Spaces:

kam33
/

artmoh-tienda

Running

App Files Files Community

kam33 commited on Apr 22

Commit

61f99d0

verified ·

1 Parent(s): 06bcce3

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +501 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Artmoh Tienda
-emoji: 🌍
-colorFrom: gray
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: artmoh-tienda
+emoji: 🐳
+colorFrom: yellow
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,501 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LeatherHub - Mayorista de Artículos de Cuero</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .sidebar {
+            transition: all 0.3s ease;
+        }
+        .sidebar.collapsed {
+            width: 70px;
+            overflow: hidden;
+        }
+        .sidebar.collapsed .nav-text {
+            display: none;
+        }
+        .sidebar.collapsed .logo-text {
+            display: none;
+        }
+        .sidebar.collapsed .nav-item {
+            justify-content: center;
+        }
+        .content {
+            transition: all 0.3s ease;
+        }
+        .content.expanded {
+            margin-left: 70px;
+        }
+        @media (max-width: 768px) {
+            .sidebar {
+                position: fixed;
+                z-index: 1000;
+                height: 100vh;
+            }
+            .sidebar.collapsed {
+                transform: translateX(-100%);
+            }
+            .content {
+                margin-left: 0 !important;
+            }
+        }
+        .product-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+        }
+        .badge-vip {
+            background: linear-gradient(45deg, #FFD700, #FFA500);
+            color: white;
+        }
+        .badge-new {
+            background: linear-gradient(45deg, #4CAF50, #8BC34A);
+            color: white;
+        }
+        .badge-lowstock {
+            background: linear-gradient(45deg, #FF9800, #FFC107);
+            color: white;
+        }
+        .badge-outofstock {
+            background: linear-gradient(45deg, #F44336, #E91E63);
+            color: white;
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <!-- Mobile Menu Button -->
+    <div class="md:hidden fixed top-4 left-4 z-50">
+        <button id="mobileMenuBtn" class="p-2 rounded-lg bg-gray-800 text-white">
+            <i class="fas fa-bars"></i>
+        </button>
+    </div>
+    <!-- Sidebar -->
+    <div id="sidebar" class="sidebar bg-gray-800 text-white h-screen fixed w-64 shadow-lg">
+        <div class="p-4 flex items-center space-x-3 border-b border-gray-700">
+            <div class="bg-amber-600 p-2 rounded-lg">
+                <i class="fas fa-shopping-bag text-white text-xl"></i>
+            </div>
+            <h1 class="logo-text text-xl font-bold">LeatherHub</h1>
+        </div>
+        <div class="p-4">
+            <div class="flex items-center space-x-3 mb-6">
+                <div class="w-10 h-10 rounded-full bg-amber-500 flex items-center justify-center">
+                    <span class="text-white font-bold">AD</span>
+                </div>
+                <div>
+                    <p class="font-medium">Admin User</p>
+                    <p class="text-gray-400 text-sm">Administrador</p>
+                </div>
+            </div>
+            <nav class="space-y-2">
+                <a href="#" class="nav-item flex items-center space-x-3 p-3 rounded-lg bg-gray-700 text-white">
+                    <i class="fas fa-tachometer-alt"></i>
+                    <span class="nav-text">Dashboard</span>
+                </a>
+                <a href="#" class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white">
+                    <i class="fas fa-cash-register"></i>
+                    <span class="nav-text">Ventas</span>
+                </a>
+                <a href="#" class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white">
+                    <i class="fas fa-file-invoice-dollar"></i>
+                    <span class="nav-text">Facturación</span>
+                </a>
+                <a href="#" class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white">
+                    <i class="fas fa-boxes"></i>
+                    <span class="nav-text">Inventario</span>
+                </a>
+                <a href="#" class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white">
+                    <i class="fas fa-users"></i>
+                    <span class="nav-text">Clientes</span>
+                </a>
+                <a href="#" class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white">
+                    <i class="fas fa-user-tie"></i>
+                    <span class="nav-text">Empleados</span>
+                </a>
+                <a href="#" class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white">
+                    <i class="fas fa-chart-bar"></i>
+                    <span class="nav-text">Reportes</span>
+                </a>
+                <a href="#" class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white">
+                    <i class="fas fa-cog"></i>
+                    <span class="nav-text">Configuración</span>
+                </a>
+            </nav>
+        </div>
+        <div class="absolute bottom-0 w-full p-4 border-t border-gray-700">
+            <button id="toggleSidebar" class="flex items-center space-x-3 text-gray-300 hover:text-white">
+                <i class="fas fa-chevron-left"></i>
+                <span class="nav-text">Contraer menú</span>
+            </button>
+        </div>
+    </div>
+    <!-- Main Content -->
+    <div id="content" class="content min-h-screen ml-64 p-6">
+        <!-- Header -->
+        <div class="flex justify-between items-center mb-6">
+            <h2 class="text-2xl font-bold text-gray-800">Dashboard</h2>
+            <div class="flex items-center space-x-4">
+                <div class="relative">
+                    <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
+                    <input type="text" placeholder="Buscar..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-amber-500">
+                </div>
+                <button class="p-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300">
+                    <i class="fas fa-bell"></i>
+                </button>
+                <button class="p-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300">
+                    <i class="fas fa-question-circle"></i>
+                </button>
+            </div>
+        </div>
+        <!-- Stats Cards -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+            <div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-blue-500">
+                <div class="flex justify-between items-center">
+                    <div>
+                        <p class="text-gray-500">Ventas Hoy</p>
+                        <h3 class="text-2xl font-bold">$24,580</h3>
+                        <p class="text-green-500 text-sm">+12% vs ayer</p>
+                    </div>
+                    <div class="bg-blue-100 p-3 rounded-full">
+                        <i class="fas fa-dollar-sign text-blue-500"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-green-500">
+                <div class="flex justify-between items-center">
+                    <div>
+                        <p class="text-gray-500">Nuevos Clientes</p>
+                        <h3 class="text-2xl font-bold">8</h3>
+                        <p class="text-green-500 text-sm">+2 vs ayer</p>
+                    </div>
+                    <div class="bg-green-100 p-3 rounded-full">
+                        <i class="fas fa-user-plus text-green-500"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-amber-500">
+                <div class="flex justify-between items-center">
+                    <div>
+                        <p class="text-gray-500">Productos Bajo Stock</p>
+                        <h3 class="text-2xl font-bold">5</h3>
+                        <p class="text-red-500 text-sm">Reabastecer</p>
+                    </div>
+                    <div class="bg-amber-100 p-3 rounded-full">
+                        <i class="fas fa-exclamation-triangle text-amber-500"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-purple-500">
+                <div class="flex justify-between items-center">
+                    <div>
+                        <p class="text-gray-500">Órdenes Pendientes</p>
+                        <h3 class="text-2xl font-bold">3</h3>
+                        <p class="text-blue-500 text-sm">Por completar</p>
+                    </div>
+                    <div class="bg-purple-100 p-3 rounded-full">
+                        <i class="fas fa-clipboard-list text-purple-500"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Quick Actions -->
+        <div class="mb-6">
+            <h3 class="text-lg font-semibold mb-4 text-gray-700">Acciones Rápidas</h3>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <button class="bg-white p-4 rounded-lg shadow-md flex flex-col items-center justify-center hover:bg-gray-50 transition-all">
+                    <div class="bg-blue-100 p-3 rounded-full mb-2">
+                        <i class="fas fa-cash-register text-blue-500 text-xl"></i>
+                    </div>
+                    <span class="text-sm font-medium">Nueva Venta</span>
+                </button>
+                <button class="bg-white p-4 rounded-lg shadow-md flex flex-col items-center justify-center hover:bg-gray-50 transition-all">
+                    <div class="bg-green-100 p-3 rounded-full mb-2">
+                        <i class="fas fa-file-invoice text-green-500 text-xl"></i>
+                    </div>
+                    <span class="text-sm font-medium">Crear Factura</span>
+                </button>
+                <button class="bg-white p-4 rounded-lg shadow-md flex flex-col items-center justify-center hover:bg-gray-50 transition-all">
+                    <div class="bg-amber-100 p-3 rounded-full mb-2">
+                        <i class="fas fa-box-open text-amber-500 text-xl"></i>
+                    </div>
+                    <span class="text-sm font-medium">Agregar Stock</span>
+                </button>
+                <button class="bg-white p-4 rounded-lg shadow-md flex flex-col items-center justify-center hover:bg-gray-50 transition-all">
+                    <div class="bg-purple-100 p-3 rounded-full mb-2">
+                        <i class="fas fa-user-plus text-purple-500 text-xl"></i>
+                    </div>
+                    <span class="text-sm font-medium">Nuevo Cliente</span>
+                </button>
+            </div>
+        </div>
+        <!-- Recent Sales and Low Stock -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+            <!-- Recent Sales -->
+            <div class="bg-white p-6 rounded-lg shadow-md">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-lg font-semibold">Ventas Recientes</h3>
+                    <a href="#" class="text-sm text-blue-500 hover:underline">Ver todas</a>
+                </div>
+                <div class="space-y-4">
+                    <div class="flex justify-between items-center p-3 hover:bg-gray-50 rounded-lg">
+                        <div>
+                            <p class="font-medium">#ORD-10025</p>
+                            <p class="text-sm text-gray-500">Cliente: Tienda Elegante</p>
+                        </div>
+                        <div class="text-right">
+                            <p class="font-medium">$1,250.00</p>
+                            <p class="text-sm text-gray-500">Hace 15 min</p>
+                        </div>
+                    </div>
+                    <div class="flex justify-between items-center p-3 hover:bg-gray-50 rounded-lg">
+                        <div>
+                            <p class="font-medium">#ORD-10024</p>
+                            <p class="text-sm text-gray-500">Cliente: Boutique del Cuero</p>
+                        </div>
+                        <div class="text-right">
+                            <p class="font-medium">$890.00</p>
+                            <p class="text-sm text-gray-500">Hace 1 hora</p>
+                        </div>
+                    </div>
+                    <div class="flex justify-between items-center p-3 hover:bg-gray-50 rounded-lg">
+                        <div>
+                            <p class="font-medium">#ORD-10023</p>
+                            <p class="text-sm text-gray-500">Cliente: Accesorios VIP</p>
+                            <span class="badge-vip text-xs px-2 py-1 rounded-full">VIP</span>
+                        </div>
+                        <div class="text-right">
+                            <p class="font-medium">$3,450.00</p>
+                            <p class="text-sm text-gray-500">Hace 3 horas</p>
+                        </div>
+                    </div>
+                    <div class="flex justify-between items-center p-3 hover:bg-gray-50 rounded-lg">
+                        <div>
+                            <p class="font-medium">#ORD-10022</p>
+                            <p class="text-sm text-gray-500">Cliente: Moda y Estilo</p>
+                        </div>
+                        <div class="text-right">
+                            <p class="font-medium">$1,780.00</p>
+                            <p class="text-sm text-gray-500">Hoy, 10:45 AM</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Low Stock Products -->
+            <div class="bg-white p-6 rounded-lg shadow-md">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-lg font-semibold">Productos Bajo Stock</h3>
+                    <a href="#" class="text-sm text-blue-500 hover:underline">Ver inventario</a>
+                </div>
+                <div class="space-y-4">
+                    <div class="flex items-center p-3 hover:bg-gray-50 rounded-lg">
+                        <div class="w-16 h-16 bg-gray-200 rounded-lg mr-4 overflow-hidden">
+                            <img src="https://via.placeholder.com/100" alt="Product" class="w-full h-full object-cover">
+                        </div>
+                        <div class="flex-1">
+                            <p class="font-medium">Cinturón de Cuero Negro</p>
+                            <p class="text-sm text-gray-500">SKU: CIN-NEG-001</p>
+                        </div>
+                        <div class="text-right">
+                            <span class="badge-lowstock text-xs px-2 py-1 rounded-full">Stock: 3</span>
+                            <p class="text-sm text-gray-500">Mín: 5</p>
+                        </div>
+                    </div>
+                    <div class="flex items-center p-3 hover:bg-gray-50 rounded-lg">
+                        <div class="w-16 h-16 bg-gray-200 rounded-lg mr-4 overflow-hidden">
+                            <img src="https://via.placeholder.com/100" alt="Product" class="w-full h-full object-cover">
+                        </div>
+                        <div class="flex-1">
+                            <p class="font-medium">Bolso de Cuero Marrón</p>
+                            <p class="text-sm text-gray-500">SKU: BOL-MAR-002</p>
+                        </div>
+                        <div class="text-right">
+                            <span class="badge-lowstock text-xs px-2 py-1 rounded-full">Stock: 2</span>
+                            <p class="text-sm text-gray-500">Mín: 5</p>
+                        </div>
+                    </div>
+                    <div class="flex items-center p-3 hover:bg-gray-50 rounded-lg">
+                        <div class="w-16 h-16 bg-gray-200 rounded-lg mr-4 overflow-hidden">
+                            <img src="https://via.placeholder.com/100" alt="Product" class="w-full h-full object-cover">
+                        </div>
+                        <div class="flex-1">
+                            <p class="font-medium">Herraje Dorado Mediano</p>
+                            <p class="text-sm text-gray-500">SKU: HER-DOR-003</p>
+                        </div>
+                        <div class="text-right">
+                            <span class="badge-outofstock text-xs px-2 py-1 rounded-full">Stock: 0</span>
+                            <p class="text-sm text-gray-500">Mín: 10</p>
+                        </div>
+                    </div>
+                    <div class="flex items-center p-3 hover:bg-gray-50 rounded-lg">
+                        <div class="w-16 h-16 bg-gray-200 rounded-lg mr-4 overflow-hidden">
+                            <img src="https://via.placeholder.com/100" alt="Product" class="w-full h-full object-cover">
+                        </div>
+                        <div class="flex-1">
+                            <p class="font-medium">Cartera de Cuero Negro</p>
+                            <p class="text-sm text-gray-500">SKU: CAR-NEG-004</p>
+                        </div>
+                        <div class="text-right">
+                            <span class="badge-lowstock text-xs px-2 py-1 rounded-full">Stock: 4</span>
+                            <p class="text-sm text-gray-500">Mín: 6</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Top Selling Products -->
+        <div class="bg-white p-6 rounded-lg shadow-md mb-6">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-semibold">Productos Más Vendidos</h3>
+                <div class="flex space-x-2">
+                    <select class="border rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500">
+                        <option>Esta semana</option>
+                        <option>Este mes</option>
+                        <option>Este año</option>
+                    </select>
+                    <a href="#" class="text-sm text-blue-500 hover:underline">Ver reporte</a>
+                </div>
+            </div>
+            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+                <div class="product-card bg-white border border-gray-200 rounded-lg p-4 text-center transition-all">
+                    <div class="w-full h-32 bg-gray-200 rounded-lg mb-3 overflow-hidden mx-auto">
+                        <img src="https://via.placeholder.com/150" alt="Product" class="w-full h-full object-cover">
+                    </div>
+                    <h4 class="font-medium text-sm mb-1">Cinturón Negro</h4>
+                    <p class="text-gray-500 text-xs mb-2">SKU: CIN-NEG-001</p>
+                    <p class="text-green-600 font-bold">$45.00</p>
+                    <p class="text-xs text-gray-500">Vendidos: 28</p>
+                </div>
+                <div class="product-card bg-white border border-gray-200 rounded-lg p-4 text-center transition-all">
+                    <div class="w-full h-32 bg-gray-200 rounded-lg mb-3 overflow-hidden mx-auto">
+                        <img src="https://via.placeholder.com/150" alt="Product" class="w-full h-full object-cover">
+                    </div>
+                    <h4 class="font-medium text-sm mb-1">Bolso Marrón</h4>
+                    <p class="text-gray-500 text-xs mb-2">SKU: BOL-MAR-002</p>
+                    <p class="text-green-600 font-bold">$120.00</p>
+                    <p class="text-xs text-gray-500">Vendidos: 15</p>
+                </div>
+                <div class="product-card bg-white border border-gray-200 rounded-lg p-4 text-center transition-all">
+                    <div class="w-full h-32 bg-gray-200 rounded-lg mb-3 overflow-hidden mx-auto">
+                        <img src="https://via.placeholder.com/150" alt="Product" class="w-full h-full object-cover">
+                    </div>
+                    <h4 class="font-medium text-sm mb-1">Herraje Dorado</h4>
+                    <p class="text-gray-500 text-xs mb-2">SKU: HER-DOR-003</p>
+                    <p class="text-green-600 font-bold">$8.50</p>
+                    <p class="text-xs text-gray-500">Vendidos: 42</p>
+                </div>
+                <div class="product-card bg-white border border-gray-200 rounded-lg p-4 text-center transition-all">
+                    <div class="w-full h-32 bg-gray-200 rounded-lg mb-3 overflow-hidden mx-auto">
+                        <img src="https://via.placeholder.com/150" alt="Product" class="w-full h-full object-cover">
+                    </div>
+                    <h4 class="font-medium text-sm mb-1">Cartera Negra</h4>
+                    <p class="text-gray-500 text-xs mb-2">SKU: CAR-NEG-004</p>
+                    <p class="text-green-600 font-bold">$85.00</p>
+                    <p class="text-xs text-gray-500">Vendidos: 12</p>
+                </div>
+                <div class="product-card bg-white border border-gray-200 rounded-lg p-4 text-center transition-all">
+                    <div class="w-full h-32 bg-gray-200 rounded-lg mb-3 overflow-hidden mx-auto">
+                        <img src="https://via.placeholder.com/150" alt="Product" class="w-full h-full object-cover">
+                    </div>
+                    <h4 class="font-medium text-sm mb-1">Cinturón Café</h4>
+                    <p class="text-gray-500 text-xs mb-2">SKU: CIN-CAF-005</p>
+                    <p class="text-green-600 font-bold">$50.00</p>
+                    <p class="text-xs text-gray-500">Vendidos: 18</p>
+                </div>
+            </div>
+        </div>
+        <!-- Sales Chart -->
+        <div class="bg-white p-6 rounded-lg shadow-md">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-semibold">Ventas Mensuales</h3>
+                <select class="border rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500">
+                    <option>2023</option>
+                    <option>2022</option>
+                    <option>2021</option>
+                </select>
+            </div>
+            <div class="h-64">
+                <!-- Chart placeholder - would be replaced with actual chart library in production -->
+                <div class="w-full h-full bg-gray-100 rounded-lg flex items-center justify-center text-gray-400">
+                    <i class="fas fa-chart-line text-4xl"></i>
+                    <p class="ml-3">Gráfico de Ventas</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Mobile Bottom Navigation -->
+    <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-200 flex justify-around items-center p-2 z-40">
+        <a href="#" class="flex flex-col items-center p-2 text-blue-500">
+            <i class="fas fa-tachometer-alt"></i>
+            <span class="text-xs mt-1">Inicio</span>
+        </a>
+        <a href="#" class="flex flex-col items-center p-2 text-gray-500">
+            <i class="fas fa-cash-register"></i>
+            <span class="text-xs mt-1">Ventas</span>
+        </a>
+        <a href="#" class="flex flex-col items-center p-2 text-gray-500">
+            <i class="fas fa-boxes"></i>
+            <span class="text-xs mt-1">Inventario</span>
+        </a>
+        <a href="#" class="flex flex-col items-center p-2 text-gray-500">
+            <i class="fas fa-users"></i>
+            <span class="text-xs mt-1">Clientes</span>
+        </a>
+    </div>
+    <script>
+        // Toggle sidebar
+        const toggleSidebar = document.getElementById('toggleSidebar');
+        const sidebar = document.getElementById('sidebar');
+        const content = document.getElementById('content');
+        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+        toggleSidebar.addEventListener('click', () => {
+            sidebar.classList.toggle('collapsed');
+            content.classList.toggle('expanded');
+            // Change icon and text
+            if (sidebar.classList.contains('collapsed')) {
+                toggleSidebar.innerHTML = '<i class="fas fa-chevron-right"></i><span class="nav-text">Expandir</span>';
+            } else {
+                toggleSidebar.innerHTML = '<i class="fas fa-chevron-left"></i><span class="nav-text">Contraer</span>';
+            }
+        });
+        // Mobile menu toggle
+        mobileMenuBtn.addEventListener('click', () => {
+            sidebar.classList.toggle('collapsed');
+        });
+        // Close sidebar when clicking outside on mobile
+        document.addEventListener('click', (e) => {
+            if (window.innerWidth <= 768 && !sidebar.contains(e.target) && e.target !== mobileMenuBtn) {
+                sidebar.classList.add('collapsed');
+            }
+        });
+        // Simulate loading
+        document.addEventListener('DOMContentLoaded', () => {
+            setTimeout(() => {
+                document.body.classList.remove('opacity-0');
+            }, 300);
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=kam33/artmoh-tienda" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ I want to build an awesome, perfect, and super user-friendly platform for a wholesale leather goods business (mayorista) that sells products like belts (cinturones), bags (bolsos), buckles, and other leather accessories. The platform must be intuitive and mobile-friendly, designed for both desktop and smartphone users, and should fully support the day-to-day operations of a leather wholesaler. 🧩 Essential Core Features: 🧾 Sales Management (Ventas) Quickly create new sales orders (from mobile or desktop) Add items to cart using barcode, search, or category Apply manual discounts or promo codes Choose payment methods: cash, card, bank transfer, or cash on delivery Filter and view sales by date, client, or salesperson 📄 Automated Invoicing (Facturación Automática) Generate professional PDF invoices with logo & tax details Send invoices via email or WhatsApp directly from the app Support for proforma and final invoices VAT and taxes calculated automatically One-click print from within the platform 📦 Inventory Management (Gestión de Inventario) Register products with image, category, and variants (color, size, type) Real-time stock level updates Alerts for low stock or out-of-stock items Log and view stock in/out movements with full history Manage suppliers and product costs efficiently 👥 Customer Management (Clientes) Store full customer profiles (business name, contact info, location) View each customer's complete purchase history Tag VIP or frequent buyers Send personalized promotions or follow-ups via WhatsApp/email 🧑‍💼 Employee & Access Control (Usuarios) Create roles: admin, salesperson, supervisor Assign sales and track performance per employee Secure login system for each user Employee dashboard showing targets and achievements 📊 Analytics & Reports (Informes y Estadísticas) Dashboard with daily/weekly/monthly stats Top-selling items, total revenue, top clients Custom reports by product, category, or employee Export reports to Excel or PDF Inventory log with filtering and search 🌐 Integrations & Extras Optional connection to Shopify, WooCommerce, or similar WhatsApp Business integration (for sending invoices/messages) Multi-language support (English, Spanish, etc.) Works offline and syncs when reconnected Available as both mobile app and web platform 🎨 UI/UX Design Requirements Clean, modern look using Material Design or similar Large buttons/icons for fast navigation in-store Neutral, stylish color scheme with customizable branding Easy navigation via bottom tab bar or sidebar menu 🧠 Bonus Features (Opcionales) Barcode scanning to speed up item lookup or sales Daily summary dashboard (sales, new clients, low stock) Automatic cloud/database backups Push notifications (low stock, unpaid invoices, reminders)