From ef9a9296dd6fcc1b0a2d47281658d326c513b27a Mon Sep 17 00:00:00 2001 From: Shiro-Nek0 Date: Tue, 10 Mar 2026 18:40:47 -0300 Subject: [PATCH] initial modularization + templates --- .vscode/launch.json | 11 ++ .vscode/tasks.json | 15 ++ static/cookieStuff.js | 17 ++ static/style.css | 255 ++++++++++++++++++++++++++ static/themeStuff.js | 39 ++++ templates/checkout.html | 351 +++++++++++++++++------------------- templates/dicom.html | 240 +++++++++++++----------- templates/index.html | 391 +--------------------------------------- templates/navbar.html | 56 ++++++ templates/sales.html | 248 ++++++++++++++----------- 10 files changed, 841 insertions(+), 782 deletions(-) create mode 100644 .vscode/launch.json create mode 100644 .vscode/tasks.json create mode 100644 static/cookieStuff.js create mode 100644 static/style.css create mode 100644 static/themeStuff.js create mode 100644 templates/navbar.html diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..0e4c8ea --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,11 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "name": "Build SekiPOS (F5)", + "type": "node", + "request": "launch", + "preLaunchTask": "build-sekipos" + } + ] +} \ No newline at end of file diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 0000000..4125580 --- /dev/null +++ b/.vscode/tasks.json @@ -0,0 +1,15 @@ +{ + "version": "2.0.0", + "tasks": [ + { + "label": "build-sekipos", + "type": "shell", + "command": "docker build -t sekipos:latest .", + "group": "build", + "presentation": { + "reveal": "always", + "panel": "new" + } + } + ] +} \ No newline at end of file diff --git a/static/cookieStuff.js b/static/cookieStuff.js new file mode 100644 index 0000000..fba1cb0 --- /dev/null +++ b/static/cookieStuff.js @@ -0,0 +1,17 @@ +function setCookie(name, value, days = 365) { + const d = new Date(); + d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000)); + let expires = "expires=" + d.toUTCString(); + document.cookie = name + "=" + value + ";" + expires + ";path=/;SameSite=Lax"; +} + +function getCookie(name) { + let nameEQ = name + "="; + let ca = document.cookie.split(';'); + for (let i = 0; i < ca.length; i++) { + let c = ca[i]; + while (c.charAt(0) == ' ') c = c.substring(1, c.length); + if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); + } + return null; +} \ No newline at end of file diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..ec23bb9 --- /dev/null +++ b/static/style.css @@ -0,0 +1,255 @@ + :root { + --bg: #ebedef; + --card-bg: #ffffff; + --text-main: #2e3338; + --text-muted: #4f5660; + --border: #e3e5e8; + --navbar-bg: #ffffff; + --input-bg: #e3e5e8; + --table-head: #f2f3f5; + --accent: #5865f2; + --accent-hover: #4752c4; + --danger: #ed4245; + } + + [data-theme="dark"] { + --bg: #36393f; + --card-bg: #2f3136; + --text-main: #dcddde; + --text-muted: #b9bbbe; + --border: #202225; + --navbar-bg: #202225; + --input-bg: #202225; + --table-head: #292b2f; + } + + body { + background: var(--bg); + color: var(--text-main); + font-family: "gg sans", "Segoe UI", sans-serif; + transition: background 0.2s, color 0.2s; + } + + /* ── Navbar ── */ + .navbar { + background: var(--navbar-bg) !important; + border-bottom: 1px solid var(--border); + } + + .navbar-brand { + color: var(--text-main) !important; + font-weight: 700; + } + + .nav-link, + .dropdown-item { + color: var(--text-main) !important; + } + + .dropdown-menu { + background: var(--card-bg); + border: 1px solid var(--border); + } + + .dropdown-item:hover { + background: var(--input-bg); + } + + .dropdown-item.text-danger { + color: var(--danger) !important; + } + + /* ── Cards ── */ + .discord-card { + background: var(--card-bg); + border: 1px solid var(--border); + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + } + + /* ── Inputs ── */ + .form-control, + .form-control:focus { + background: var(--input-bg); + color: var(--text-main); + border: none; + box-shadow: none; + } + + .form-control:focus { + outline: 2px solid var(--accent); + } + + .form-control::placeholder { + color: var(--text-muted); + } + + /* ── Buttons ── */ + .btn-accent { + background: var(--accent); + color: #fff; + border: none; + } + + .btn-accent:hover { + background: var(--accent-hover); + color: #fff; + } + + .btn-danger-discord { + background: var(--danger); + color: #fff; + border: none; + } + + .btn-danger-discord:hover { + background: #c23235; + color: #fff; + } + + /* ── Price tag ── */ + .price-tag { + font-size: 2.8rem; + /* Slightly larger for the wider card */ + font-weight: 800; + color: var(--accent); + /* Optional: uses your accent color for better visibility */ + } + + /* ── Table ── */ + .table { + color: var(--text-main); + --bs-table-color: var(--text-main); + --bs-table-bg: transparent; + --bs-table-border-color: var(--border); + } + + /* -- Checkbox Size Fix -- */ + #select-all { + transform: scale(1.3); + margin-top: 2px; + } + + [data-theme="dark"] .table { + --bs-table-color: var(--text-main); + color: var(--text-main); + } + + .table thead th { + background: var(--table-head); + color: var(--text-muted); + font-size: 0.72rem; + text-transform: uppercase; + border-bottom: 1px solid var(--border); + } + + .table tbody td { + border-bottom: 1px solid var(--border); + vertical-align: middle; + } + + /* ── Bulk bar ── */ + .bulk-bar { + background: var(--accent); + color: #fff; + border-radius: 8px; + } + + .bulk-bar .form-control { + width: 110px; + background: rgba(0, 0, 0, 0.2) !important; + color: #fff !important; + border: 1px solid rgba(255, 255, 255, 0.25) !important; + } + + .bulk-bar .form-control::placeholder { + color: rgba(255, 255, 255, 0.6); + } + + /* ── New-product prompt ── */ + .new-product-prompt { + background: var(--accent); + color: #fff; + border-radius: 8px; + } + + /* ── Product image ── */ + #display-img { + width: 100%; + /* Allows it to fill the new width */ + max-width: 250px; + /* Increased from 160px */ + height: auto; + max-height: 250px; + /* Increased from 160px */ + object-fit: contain; + } + + /* ── Checkbox ── */ + input[type="checkbox"] { + cursor: pointer; + } + + /* ── Mobile: hide barcode column ── */ + @media (max-width: 576px) { + .col-barcode { + display: none; + } + + .btn-edit-sm, + .btn-del-sm { + padding: 4px 7px; + font-size: 0.75rem; + } + } + + .modal-content { + background: var(--card-bg); + color: var(--text-main); + border: 1px solid var(--border); + } + + .modal-header, + .modal-footer { + border-color: var(--border); + } + + .btn-close { + /* Makes the X button visible in dark mode */ + filter: var(--bs-theme-placeholder, invert(0.7) grayscale(100%) brightness(200%)); + } + + [data-theme="dark"] .btn-close { + filter: invert(1) grayscale(100%) brightness(200%); + } + + /* Add this inside your - - + + {% with active_page='dicom' %}{% include 'navbar.html' %}{% endwith %}
- +
Registrar Movimiento
-
@@ -94,9 +151,10 @@
- +
- +
- @@ -149,26 +210,26 @@
- +
+ + + \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 5dabef3..121957b 100644 --- a/templates/index.html +++ b/templates/index.html @@ -10,312 +10,11 @@ - + - - - + {% with active_page='inventory' %}{% include 'navbar.html' %}{% endwith %}
@@ -453,9 +152,10 @@ {{ p[1] }} {% if p[5] == 'kg' %} - - + - {% else %} - {{ p[4] | int }} Uni + {{ p[4] | int }} Uni {% endif %} @@ -597,20 +297,6 @@ + + \ No newline at end of file diff --git a/templates/navbar.html b/templates/navbar.html new file mode 100644 index 0000000..8971264 --- /dev/null +++ b/templates/navbar.html @@ -0,0 +1,56 @@ + \ No newline at end of file diff --git a/templates/sales.html b/templates/sales.html index 3a6726f..023d157 100644 --- a/templates/sales.html +++ b/templates/sales.html @@ -1,6 +1,6 @@ - + @@ -11,21 +11,60 @@ + - + {% with active_page='sales' %}{% include 'navbar.html' %}{% endwith %}
@@ -99,19 +145,24 @@
{% if selected_date %}Día Seleccionado{% else %}Ventas de Hoy{% endif %}
-

+

-
Últimos 7 Días
-

+
Últimos 7 + Días
+

-
Este Mes
-

+
Este Mes +
+

@@ -120,12 +171,14 @@

Historial

- - + + {% if selected_date %} - + {% endif %}
@@ -148,7 +201,8 @@ {{ s[3] }} - @@ -164,7 +218,8 @@
-
Detalle de Venta
+
Detalle de Venta +
@@ -178,7 +233,7 @@ - + TOTAL: @@ -188,7 +243,7 @@
-
+
@@ -228,9 +284,9 @@ document.querySelectorAll('.utc-date').forEach(el => { const date = new Date(el.innerText + " UTC"); if (!isNaN(date)) { - el.innerText = date.toLocaleString('es-CL', { - year: 'numeric', month: '2-digit', day: '2-digit', - hour: '2-digit', minute:'2-digit' + el.innerText = date.toLocaleString('es-CL', { + year: 'numeric', month: '2-digit', day: '2-digit', + hour: '2-digit', minute: '2-digit' }); } }); @@ -243,13 +299,13 @@ async function viewSale(id, rawDate, total) { document.getElementById('modal-ticket-id').innerText = `#${id}`; document.getElementById('modal-total').innerText = clp.format(total); - + const localDate = new Date(rawDate + " UTC").toLocaleString('es-CL'); document.getElementById('modal-date').innerText = localDate !== "Invalid Date" ? localDate : rawDate; const tbody = document.getElementById('receipt-items'); tbody.innerHTML = 'Cargando...'; - + // Attach the ID to the delete button document.getElementById('btn-reverse-sale').setAttribute('onclick', `reverseSale(${id})`); @@ -259,7 +315,7 @@ try { const res = await fetch(`/api/sale/${id}`); const items = await res.json(); - + tbody.innerHTML = items.map(item => ` @@ -286,10 +342,10 @@ function reverseSale(id) { saleToReverse = id; document.getElementById('reverse-modal-id').innerText = id; - + // Hide the receipt modal so we don't have overlapping popups bootstrap.Modal.getInstance(document.getElementById('receiptModal')).hide(); - + // Show the new confirmation modal const confirmModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('reverseConfirmModal')); confirmModal.show(); @@ -297,10 +353,10 @@ async function executeReverseSale() { if (!saleToReverse) return; - + try { const res = await fetch(`/api/sale/${saleToReverse}`, { method: 'DELETE' }); - + if (res.ok) { window.location.reload(); // Refresh the dashboard } else { @@ -311,26 +367,10 @@ console.error(err); alert("Error de conexión con el servidor."); } - } - - /* Theme Management */ - function applyTheme(t) { - document.documentElement.setAttribute('data-theme', t); - const isDark = t === 'dark'; - const icon = document.getElementById('theme-icon'); - const label = document.getElementById('theme-label'); - if (icon) icon.className = isDark ? 'bi bi-sun me-2' : 'bi bi-moon-stars me-2'; - if (label) label.innerText = isDark ? 'Modo Claro' : 'Modo Oscuro'; - localStorage.setItem('theme', t); } - - function toggleTheme() { - applyTheme(document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'); - } - - (function initTheme() { - applyTheme(localStorage.getItem('theme') || 'light'); - })(); + + + \ No newline at end of file