From 0dcf0bc930b8afd2a44930460bc59bdd1ccb2d04 Mon Sep 17 00:00:00 2001
From: SekiDesu0 <vichoaranguiz04@gmail.com>
Date: Thu, 26 Feb 2026 21:46:42 -0300
Subject: [PATCH] 	modified:   static/styleIndex.css 	modified:  
 templates/index.html

---
 static/styleIndex.css | 206 +++++++++---------------------------
 templates/index.html  | 239 +++++++++++++++---------------------------
 2 files changed, 135 insertions(+), 310 deletions(-)

diff --git a/static/styleIndex.css b/static/styleIndex.css
index a758576..c44951a 100644
--- a/static/styleIndex.css
+++ b/static/styleIndex.css
@@ -1,5 +1,4 @@
 :root {
-    /* Discord Light Mode Palette */
     --bg: #ebedef;
     --card-bg: #ffffff;
     --text-main: #2e3338;
@@ -10,14 +9,11 @@
     --table-head: #f2f3f5;
     --price-color: #2e3338;
     --accent: #5865F2;
-    /* Discord Burple */
     --accent-hover: #4752c4;
     --danger: #ed4245;
-    --warning: #fee75c;
 }
 
 [data-theme="dark"] {
-    /* Discord Dark Mode Palette */
     --bg: #36393f;
     --card-bg: #2f3136;
     --text-main: #ffffff;
@@ -30,14 +26,14 @@
 }
 
 body {
-    font-family: 'gg sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-family: 'gg sans', 'Segoe UI', sans-serif;
     display: flex;
     flex-direction: column;
     padding: 20px;
     background: var(--bg);
     color: var(--text-main);
     margin: 0;
-    transition: background 0.2s, color 0.2s;
+    transition: background 0.2s;
 }
 
 .header-bar {
@@ -45,192 +41,90 @@ body {
     justify-content: space-between;
     align-items: center;
     background: var(--header-bg);
-    padding: 10px 25px;
+    padding: 0 20px;
     border-radius: 8px;
-    margin-bottom: 20px;
-    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+    margin-bottom: 15px;
+    height: 50px;
+    flex-shrink: 0;
 }
 
-.main-container {
-    display: flex;
-    gap: 25px;
-}
-
-.column {
-    flex: 1;
-    min-width: 400px;
-}
+.main-container { display: flex; gap: 20px; }
+.column { flex: 1; min-width: 0; } /* min-width: 0 prevents flex blow-out */
 
 .card {
     background: var(--card-bg);
-    padding: 25px;
+    padding: 20px;
     border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    text-align: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
     margin-bottom: 20px;
     border: 1px solid var(--border);
+    text-align: center;
 }
 
-#display-img {
-    max-width: 250px;
-    max-height: 250px;
-    border-radius: 4px;
-    margin-bottom: 15px;
-    object-fit: contain;
-}
-
-.price-tag {
-    font-size: 3em;
-    color: var(--price-color);
-    font-weight: 800;
-    margin: 10px 0;
-}
+#display-img { max-width: 200px; max-height: 200px; object-fit: contain; margin-bottom: 10px; }
+.price-tag { font-size: 2.5em; font-weight: 800; margin: 5px 0; }
 
 input {
     display: block;
     width: 100%;
-    margin: 12px 0;
-    padding: 12px;
+    padding: 10px;
+    margin: 10px 0;
     border: none;
     border-radius: 4px;
-    box-sizing: border-box;
     background: var(--input-bg);
     color: var(--text-main);
+    box-sizing: border-box;
 }
 
-button {
-    padding: 10px 15px;
-    cursor: pointer;
-    border-radius: 4px;
-    border: none;
-    transition: 0.2s;
-    font-weight: 500;
-}
+button { padding: 10px 15px; cursor: pointer; border-radius: 4px; border: none; font-weight: 600; }
+.btn-save { background: var(--accent); color: white; width: 100%; }
+.btn-edit { background: var(--accent); color: white; margin-right: 5px; }
+.btn-del { background: var(--danger); color: white; }
 
-.btn-save {
-    background: var(--accent);
-    color: white;
-    width: 100%;
-    font-size: 1.1em;
-}
+/* Table Handling */
+.table-wrapper { overflow-x: auto; width: 100%; border-radius: 8px; }
+table { width: 100%; border-collapse: collapse; min-width: 450px; }
+th, td { padding: 12px; border-bottom: 1px solid var(--border); text-align: left; }
+th { background: var(--table-head); color: var(--text-muted); font-size: 0.75em; text-transform: uppercase; }
 
-.btn-save:hover {
-    background: var(--accent-hover);
-}
+input[type="checkbox"] { width: 20px !important; height: 20px !important; margin: 0; cursor: pointer; display: inline-block; }
 
-.btn-edit {
-    background: var(--accent);
-    color: white;
-}
-
-.btn-del {
-    background: var(--danger);
-    color: white;
-}
-
-table {
-    width: 100%;
-    border-collapse: collapse;
-    background: var(--card-bg);
-    border-radius: 8px;
-    overflow: hidden;
-}
-
-th,
-td {
-    padding: 15px;
-    border-bottom: 1px solid var(--border);
-    text-align: left;
-}
-
-th {
-    background: var(--table-head);
-    color: var(--text-muted);
-    text-transform: uppercase;
-    font-size: 0.8em;
-    letter-spacing: 0.5px;
-}
-
-.theme-toggle-btn {
-    background: var(--text-main);
-    color: var(--bg);
-    font-weight: bold;
-}
-
-/* --- BULK ACTIONS PERMANENT BAR --- */
+/* Bulk Actions Bar */
 .bulk-actions {
     display: flex;
     background: var(--accent);
     color: white;
-    padding: 10px 20px;
+    padding: 10px 15px;
     border-radius: 8px;
-    margin-bottom: 15px;
+    margin-bottom: 10px;
     justify-content: space-between;
     align-items: center;
-    min-height: 60px;
-    box-sizing: border-box;
-    width: 100%;
+    min-height: 55px;
 }
+.bulk-controls { display: flex; align-items: center; gap: 8px; }
+.bulk-actions input#bulk-price-input { width: 100px !important; margin: 0 !important; height: 35px !important; background: rgba(0,0,0,0.2) !important; color: white !important; border: 1px solid rgba(255,255,255,0.2) !important; }
 
-.bulk-controls {
-    display: flex;
+#new-product-prompt {
+    display: none;
+    background: var(--accent);
+    color: white;
+    padding: 10px 15px;
+    border-radius: 8px;
+    margin-bottom: 10px;
+    justify-content: space-between;
     align-items: center;
-    gap: 10px;
-    flex-shrink: 0;
 }
 
-/* Override the global 100% width for this specific input */
-.bulk-actions input#bulk-price-input {
-    width: 130px !important;
-    margin: 0 !important;
-    padding: 8px !important;
-    height: 36px !important;
-    background: rgba(0,0,0,0.2) !important;
-    border: 1px solid rgba(255,255,255,0.3) !important;
-    color: white !important;
-}
-
-.bulk-actions button {
-    height: 36px;
-    white-space: nowrap;
-    padding: 0 15px;
-    margin: 0;
-}
-
-/* --- RESPONSIVE DESIGN (MOBILE) --- */
+/* Responsive Overrides */
 @media (max-width: 900px) {
-    .main-container {
-        flex-direction: column;
-    }
-    
-    .column {
-        min-width: 100%;
-    }
-
-    .bulk-actions {
-        flex-direction: column;
-        height: auto;
-        padding: 15px;
-        gap: 10px;
-        text-align: center;
-    }
-
-    .bulk-controls {
-        width: 100%;
-        justify-content: center;
-    }
-
-    .bulk-actions input#bulk-price-input {
-        width: 100% !important; /* On mobile, let it be wide */
-    }
-
-    /* Hide barcode on very small screens to save space */
-    td:nth-child(2), th:nth-child(2) {
-        display: none;
-    }
+    .main-container { flex-direction: column; }
+    .header-bar span { display: none; } /* Hide user text on tiny screens */
 }
 
-@keyframes slideDown {
-    from { transform: translateY(-20px); opacity: 0; }
-    to { transform: translateY(0); opacity: 1; }
-}
+@media (max-width: 600px) {
+    body { padding: 10px; }
+    th, td { padding: 8px 5px; font-size: 0.8em; }
+    .btn-edit, .btn-del { padding: 5px; font-size: 0.75em; }
+    /* Hide barcode text column on mobile to fit */
+    td:nth-child(2), th:nth-child(2) { display: none; }
+}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 3660a83..e72ef5d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,73 +1,62 @@
 <!DOCTYPE html>
 <html lang="es">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SekiPOS - Inventory Management</title>
+    <title>SekiPOS - Inventory</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
-    <link rel="shortcut icon" href="./static/favicon.png" type="image/x-icon">
     <link rel="stylesheet" href="./static/styleIndex.css">
 </head>
-
 <body>
-
     <div class="header-bar">
-        <h2 style="margin:0;">SekiPOS v1.4</h2>
-        <div style="display: flex; align-items: center; gap: 15px;">
-            <button onclick="toggleTheme()" class="theme-toggle-btn" id="theme-text" style="margin: 0;">Modo
-                Oscuro</button>
-            <span style="color: var(--border);">|</span>
-            <span>Usuario: <b>{{ user.username }}</b></span>
-            <span style="color: var(--border);">|</span>
-            <a href="/logout" style="color: var(--danger); text-decoration: none; font-weight: bold;">Cerrar Sesión</a>
+        <h2>SekiPOS v1.5</h2>
+        <div style="display: flex; align-items: center; gap: 10px;">
+            <button onclick="toggleTheme()" id="theme-text" style="padding: 5px 10px; font-size: 0.8em;">Modo Oscuro</button>
+            <a href="/logout" style="color: var(--danger); text-decoration: none; font-size: 0.9em; font-weight: bold;">Salir</a>
         </div>
     </div>
 
     <div class="main-container">
         <div class="column">
             <div id="new-product-prompt">
-                <span style="flex-grow: 1;">¡Nuevo! Barcode <b><span id="new-barcode-display"></span></b>. ¿Deseas
-                    agregarlo?</span>
-                <button onclick="dismissPrompt()"
-                    style="background:rgba(0,0,0,0.2); color:white; margin-left: 15px;">Omitir</button>
-            </div>
-
-            <div class="card" id="scan-display">
-                <h2 style="color: var(--text-muted); margin-top:0;">Último Escaneado</h2>
-                <img id="display-img" src="./static/placeholder.png" alt="Producto">
-                <h1 id="display-name" style="margin: 10px 0;">Escanea un producto</h1>
-                <div class="price-tag" id="display-price">$0</div>
-                <p id="display-barcode" style="color: var(--text-muted); font-family: monospace;"></p>
+                <span>Nuevo: <b id="new-barcode-display"></b></span>
+                <button onclick="dismissPrompt()" style="background:rgba(0,0,0,0.2); color:white;">Omitir</button>
             </div>
 
             <div class="card">
-                <h3 id="form-title" style="margin-top:0;">Agregar/Editar Producto</h3>
+                <h3 style="color: var(--text-muted); margin-top:0;">Último Escaneado</h3>
+                <img id="display-img" src="./static/placeholder.png">
+                <h2 id="display-name">Esperando scan...</h2>
+                <div class="price-tag" id="display-price">$0</div>
+                <p id="display-barcode" style="font-family: monospace; opacity: 0.5;"></p>
+            </div>
+
+            <div class="card">
+                <h3 id="form-title" style="margin-top:0;">Editar/Crear</h3>
                 <form action="/upsert" method="POST" id="product-form">
                     <input type="text" name="barcode" id="form-barcode" placeholder="Barcode" required>
-                    <input type="text" name="name" id="form-name" placeholder="Nombre del Producto" required>
+                    <input type="text" name="name" id="form-name" placeholder="Nombre" required>
                     <input type="number" name="price" id="form-price" placeholder="Precio (CLP)" required>
-                    <input type="text" name="image_url" id="form-image" placeholder="URL de Imagen">
-                    <button type="submit" class="btn-save">Guardar en Inventario</button>
+                    <input type="text" name="image_url" id="form-image" placeholder="URL Imagen">
+                    <button type="submit" class="btn-save">Guardar Cambios</button>
                 </form>
             </div>
         </div>
 
         <div class="column">
             <div class="card">
-                <h3 style="text-align: left; margin-top:0;">Inventario</h3>
-                
-                <!-- Bulk Action Bar -->
                 <div id="bulk-bar" class="bulk-actions">
-                    <span><b id="selected-count">0</b> seleccionados</span>
+                    <span><b id="selected-count">0</b> listos</span>
                     <div class="bulk-controls">
-                        <input type="number" id="bulk-price-input" placeholder="Precio CLP">
-                        <button onclick="applyBulkPrice()" style="background: white; color: var(--accent);">OK</button>
+                        <input type="number" id="bulk-price-input" placeholder="Precio">
+                        <button onclick="applyBulkPrice()" style="background:white; color:var(--accent);">OK</button>
                         <button onclick="clearSelection()" class="btn-del">✕</button>
                     </div>
                 </div>
-                <input type="text" id="searchInput" onkeyup="searchTable()" placeholder="Buscar...">
-                <div style="overflow-x: auto; width: 100%;">
+                
+                <input type="text" id="searchInput" onkeyup="searchTable()" placeholder="Filtrar productos...">
+                
+                <div class="table-wrapper">
                     <table id="inventoryTable">
                         <thead>
                             <tr>
@@ -80,17 +69,15 @@
                         </thead>
                         <tbody>
                             {% for p in products %}
-                            <tr>
-                                <td><input type="checkbox" class="product-checkbox" data-barcode="{{ p[0] }}" onclick="updateBulkBar()"></td>
+                            <tr data-barcode="{{ p[0] }}">
+                                <td><input type="checkbox" class="product-checkbox" onclick="updateBulkBar()"></td>
                                 <td style="font-family: monospace;">{{ p[0] }}</td>
-                                <td>{{ p[1] }}</td>
+                                <td class="name-cell">{{ p[1] }}</td>
                                 <td class="price-cell" data-value="{{ p[2] }}"></td>
                                 <td style="white-space: nowrap;">
-                                    <button class="btn-edit"
-                                        onclick="editProduct('{{ p[0] }}', '{{ p[1] }}', '{{ p[2] }}', '{{ p[3] }}')">Editar</button>
+                                    <button class="btn-edit" onclick="editProduct('{{ p[0] }}', '{{ p[1] }}', '{{ p[2] }}', '{{ p[3] }}')">E</button>
                                     <form action="/delete/{{ p[0] }}" method="POST" style="display:inline;">
-                                        <button type="submit" class="btn-del"
-                                            onclick="return confirm('¿Eliminar producto?')">Borrar</button>
+                                        <button type="submit" class="btn-del" onclick="return confirm('¿Borrar?')">D</button>
                                     </form>
                                 </td>
                             </tr>
@@ -104,125 +91,54 @@
 
     <script>
         var socket = io();
+        const clp = new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP', minimumFractionDigits: 0 });
 
-        const clpFormatter = new Intl.NumberFormat('es-CL', {
-            style: 'currency',
-            currency: 'CLP',
-            minimumFractionDigits: 0
-        });
-
-        function formatTablePrices() {
+        function formatAll() {
             document.querySelectorAll('.price-cell').forEach(td => {
-                const val = parseFloat(td.getAttribute('data-value'));
-                td.innerText = clpFormatter.format(val);
+                td.innerText = clp.format(td.getAttribute('data-value'));
             });
         }
-        formatTablePrices();
+        formatAll();
 
-        function toggleTheme() {
-            const html = document.documentElement;
-            const currentTheme = html.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            html.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            updateThemeUI(newTheme);
-        }
-
-        function updateThemeUI(theme) {
-            const btnText = document.getElementById('theme-text');
-            btnText.innerText = theme === 'dark' ? 'Modo Claro' : 'Modo Oscuro';
-        }
-
-        const savedTheme = localStorage.getItem('theme') || 'light';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        updateThemeUI(savedTheme);
-
-        socket.on('new_scan', function (data) {
-            // 1. Update the Display Card
-            document.getElementById('display-name').innerText = data.name;
-            document.getElementById('display-price').innerText = clpFormatter.format(data.price);
-            document.getElementById('display-barcode').innerText = data.barcode;
-            document.getElementById('display-img').src = data.image || './static/placeholder.png';
-
-            // 2. Sync the Edit Form to this product
-            updateForm(data.barcode, data.name, data.price, data.image, "Editando: " + data.name);
+        socket.on('new_scan', d => {
+            document.getElementById('display-name').innerText = d.name;
+            document.getElementById('display-price').innerText = clp.format(d.price);
+            document.getElementById('display-barcode').innerText = d.barcode;
+            document.getElementById('display-img').src = d.image || './static/placeholder.png';
+            updateForm(d.barcode, d.name, d.price, d.image, "Editando: " + d.name);
         });
 
-        socket.on('scan_error', function (data) {
-            // 1. Show the "Add New" prompt at the top
+        socket.on('scan_error', d => {
             const prompt = document.getElementById('new-product-prompt');
-            document.getElementById('new-barcode-display').innerText = data.barcode;
+            document.getElementById('new-barcode-display').innerText = d.barcode;
             prompt.style.display = 'flex';
-
-            // 2. Update Display Card with whatever info we have (cached or external)
-            document.getElementById('display-name').innerText = data.name || "Producto Nuevo";
-            document.getElementById('display-price').innerText = clpFormatter.format(0);
-            document.getElementById('display-barcode').innerText = data.barcode;
-            document.getElementById('display-img').src = data.image || './static/placeholder.png';
-
-            // 3. Prepare the form for a new entry
-            updateForm(data.barcode, data.name, '', data.image, "Crear Nuevo: " + (data.name || data.barcode));
+            updateForm(d.barcode, d.name || '', '', d.image || '', "Crear: " + d.barcode);
         });
 
-        function updateForm(barcode, name, price, image, title) {
-            // Reset the prompt if it was open
+        function updateForm(b, n, p, i, t) {
             dismissPrompt();
-
-            // Update Form Fields
-            document.getElementById('form-barcode').value = barcode;
-            document.getElementById('form-name').value = name || '';
-            document.getElementById('form-price').value = price || '';
-            document.getElementById('form-image').value = image || '';
-            document.getElementById('form-title').innerText = title;
-
-            // Visual feedback: briefly highlight the form
-            const formCard = document.getElementById('product-form').parentElement;
-            formCard.style.border = "2px solid var(--accent)";
-            setTimeout(() => { formCard.style.border = "none"; }, 500);
-
-            // Focus price because it's usually the only thing missing
-            //document.getElementById('form-price').focus();
+            document.getElementById('form-barcode').value = b;
+            document.getElementById('form-name').value = n;
+            document.getElementById('form-price').value = p;
+            document.getElementById('form-image').value = i;
+            document.getElementById('form-title').innerText = t;
         }
 
-        function dismissPrompt() {
-            document.getElementById('new-product-prompt').style.display = 'none';
-        }
-
-        function editProduct(barcode, name, price, image) {
-            dismissPrompt();
-            document.getElementById('form-barcode').value = barcode;
-            document.getElementById('form-name').value = name;
-            document.getElementById('form-price').value = price;
-            document.getElementById('form-image').value = image;
-            document.getElementById('form-title').innerText = "Editando: " + name;
+        function dismissPrompt() { document.getElementById('new-product-prompt').style.display = 'none'; }
+        
+        function editProduct(b, n, p, i) {
+            updateForm(b, n, p, i, "Editando: " + n);
             window.scrollTo({ top: 0, behavior: 'smooth' });
         }
 
-        function searchTable() {
-            var input = document.getElementById("searchInput");
-            var filter = input.value.toUpperCase();
-            var tr = document.getElementById("inventoryTable").getElementsByTagName("tr");
-            for (var i = 1; i < tr.length; i++) {
-                var content = tr[i].textContent || tr[i].innerText;
-                tr[i].style.display = content.toUpperCase().indexOf(filter) > -1 ? "" : "none";
-            }
-        }
-
         function toggleAll(source) {
-            const checkboxes = document.querySelectorAll('.product-checkbox');
-            checkboxes.forEach(cb => cb.checked = source.checked);
+            document.querySelectorAll('.product-checkbox').forEach(cb => cb.checked = source.checked);
             updateBulkBar();
         }
 
         function updateBulkBar() {
-            const checked = document.querySelectorAll('.product-checkbox:checked');
-            document.getElementById('selected-count').innerText = checked.length;
-            
-            const okBtn = document.querySelector('.bulk-controls button[onclick="applyBulkPrice()"]');
-            if (okBtn) {
-                okBtn.disabled = checked.length === 0;
-                okBtn.style.opacity = checked.length === 0 ? "0.5" : "1";
-            }
+            const count = document.querySelectorAll('.product-checkbox:checked').length;
+            document.getElementById('selected-count').innerText = count;
         }
 
         function clearSelection() {
@@ -233,26 +149,41 @@
 
         async function applyBulkPrice() {
             const price = document.getElementById('bulk-price-input').value;
-            if (!price || price < 0) return alert("Ingresa un precio válido");
+            if (!price) return;
+            const checked = document.querySelectorAll('.product-checkbox:checked');
+            const barcodes = Array.from(checked).map(cb => cb.closest('tr').getAttribute('data-barcode'));
 
-            const barcodes = Array.from(document.querySelectorAll('.product-checkbox:checked'))
-                                .map(cb => cb.getAttribute('data-barcode'));
-
-            if (!confirm(`¿Actualizar el precio de ${barcodes.length} productos a ${clpFormatter.format(price)}?`)) return;
-
-            const response = await fetch('/bulk_price_update', {
+            const res = await fetch('/bulk_price_update', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ barcodes: barcodes, new_price: price })
+                body: JSON.stringify({ barcodes, new_price: price })
             });
 
-            if (response.ok) {
-                window.location.reload();
-            } else {
-                alert("Error al actualizar productos.");
+            if (res.ok) {
+                checked.forEach(cb => {
+                    const row = cb.closest('tr');
+                    const cell = row.querySelector('.price-cell');
+                    cell.setAttribute('data-value', price);
+                    cell.innerText = clp.format(price);
+                    cb.checked = false;
+                });
+                updateBulkBar();
             }
         }
+
+        function searchTable() {
+            let q = document.getElementById("searchInput").value.toUpperCase();
+            document.querySelectorAll("#inventoryTable tbody tr").forEach(tr => {
+                tr.style.display = tr.innerText.toUpperCase().includes(q) ? "" : "none";
+            });
+        }
+
+        function toggleTheme() {
+            const t = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', t);
+            localStorage.setItem('theme', t);
+        }
+        document.documentElement.setAttribute('data-theme', localStorage.getItem('theme') || 'light');
     </script>
 </body>
-
 </html>
\ No newline at end of file