92 lines
5.5 KiB
HTML
92 lines
5.5 KiB
HTML
<!-- /home/Autopartes/pos/templates/catalog.html -->
|
|
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Catalogo - Nexus POS</title>
|
|
<link rel="stylesheet" href="/pos/static/css/common.css">
|
|
<style>
|
|
body { margin: 0; font-family: var(--font-sans, 'Inter', system-ui, sans-serif); background: var(--color-bg, #f5f5f5); }
|
|
.top-bar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--color-surface, #fff); border-bottom: 1px solid var(--color-border, #e5e5e5); position: sticky; top: 0; z-index: 40; }
|
|
.top-bar h1 { font-size: 1.1rem; margin: 0; white-space: nowrap; }
|
|
.cart-btn { position: relative; background: var(--color-primary, #2563eb); color: #fff; border: none; padding: 8px 16px; border-radius: var(--radius, 6px); cursor: pointer; font-size: 0.9rem; }
|
|
.cart-btn .badge { position: absolute; top: -6px; right: -6px; background: #ef4444; color: #fff; border-radius: 50%; width: 20px; height: 20px; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; }
|
|
.main-layout { display: flex; gap: 0; min-height: calc(100vh - 60px); }
|
|
.sidebar-filters { width: 220px; background: var(--color-surface, #fff); border-right: 1px solid var(--color-border, #e5e5e5); padding: 16px; overflow-y: auto; flex-shrink: 0; }
|
|
.sidebar-filters h3 { font-size: 0.85rem; text-transform: uppercase; color: #666; margin: 16px 0 8px; }
|
|
.sidebar-filters ul { list-style: none; padding: 0; margin: 0; }
|
|
.sidebar-filters li { padding: 6px 8px; cursor: pointer; border-radius: 4px; font-size: 0.85rem; }
|
|
.sidebar-filters li:hover, .sidebar-filters li.active { background: var(--color-primary-light, #eff6ff); color: var(--color-primary, #2563eb); }
|
|
.content { flex: 1; padding: 20px; overflow-y: auto; }
|
|
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
|
|
.pagination button { padding: 6px 14px; border: 1px solid var(--color-border, #e5e5e5); border-radius: var(--radius, 6px); background: #fff; cursor: pointer; }
|
|
.pagination button.active { background: var(--color-primary, #2563eb); color: #fff; border-color: var(--color-primary, #2563eb); }
|
|
.pagination button:disabled { opacity: 0.4; cursor: default; }
|
|
.external-section { margin-top: 20px; }
|
|
.empty-state { text-align: center; padding: 60px 20px; color: #888; }
|
|
.kbd { display: inline-block; padding: 2px 6px; background: #e5e5e5; border-radius: 3px; font-size: 0.75rem; font-family: monospace; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="top-bar">
|
|
<h1>Catalogo</h1>
|
|
<div class="search-bar" style="flex:1">
|
|
<input type="text" id="searchInput" placeholder="Buscar por nombre, numero de parte o codigo de barras... (F1)" autocomplete="off">
|
|
</div>
|
|
<button class="cart-btn" id="cartToggle" onclick="toggleCart()">
|
|
Carrito <span class="badge" id="cartBadge" style="display:none">0</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="main-layout">
|
|
<aside class="sidebar-filters" id="sidebarFilters">
|
|
<h3>Categorias</h3>
|
|
<ul id="categoryList"><li>Cargando...</li></ul>
|
|
<h3>Marcas (fabricante)</h3>
|
|
<ul id="brandList"><li>Cargando...</li></ul>
|
|
</aside>
|
|
|
|
<main class="content">
|
|
<div class="filter-chips" id="activeFilters"></div>
|
|
<div class="catalog-grid" id="catalogGrid"></div>
|
|
<div class="pagination" id="pagination"></div>
|
|
|
|
<div class="external-section" id="externalSection" style="display:none">
|
|
<h3>Disponibilidad en Bodegas Nexus</h3>
|
|
<div class="external-results" id="externalResults"></div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Cart sidebar -->
|
|
<div class="cart-sidebar" id="cartSidebar">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
|
|
<h2 style="margin:0; font-size:1.1rem;">Carrito</h2>
|
|
<button onclick="toggleCart()" style="background:none; border:none; font-size:1.3rem; cursor:pointer;">×</button>
|
|
</div>
|
|
<div id="cartItems"></div>
|
|
<div id="cartEmpty" class="empty-state" style="padding:30px 0;">Carrito vacio</div>
|
|
<hr style="margin:16px 0;">
|
|
<div style="display:flex; justify-content:space-between; margin-bottom:4px;">
|
|
<span>Subtotal</span><span id="cartSubtotal">$0.00</span>
|
|
</div>
|
|
<div style="display:flex; justify-content:space-between; margin-bottom:4px;">
|
|
<span>IVA</span><span id="cartTax">$0.00</span>
|
|
</div>
|
|
<div style="display:flex; justify-content:space-between; font-weight:700; font-size:1.2rem; margin-bottom:16px;">
|
|
<span>Total</span><span class="cart-total" id="cartTotal">$0.00</span>
|
|
</div>
|
|
<button onclick="goToCheckout()" id="checkoutBtn" disabled
|
|
style="width:100%; padding:12px; background:var(--color-primary, #2563eb); color:#fff; border:none; border-radius:var(--radius, 6px); font-size:1rem; cursor:pointer;">
|
|
Ir a cobrar
|
|
</button>
|
|
<button onclick="clearCart()" style="width:100%; padding:8px; background:none; border:1px solid #ddd; border-radius:var(--radius, 6px); margin-top:8px; cursor:pointer; font-size:0.85rem;">
|
|
Vaciar carrito
|
|
</button>
|
|
</div>
|
|
|
|
<script src="/pos/static/js/catalog.js"></script>
|
|
</body>
|
|
</html>
|