Spaces:

leemonz
/

lista-de-precios

Running

App Files Files Community

leemonz commited on Sep 4, 2025

Commit

b59c8a6

verified ·

1 Parent(s): d84c50d

la empresa se llama Mr Blonde - Initial Deployment

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +273 -18
prompts.txt +35 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Lista De Precios
-emoji: 🚀
-colorFrom: gray
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: lista-de-precios
+emoji: 🐳
+colorFrom: blue
+colorTo: pink
 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,274 @@
-<!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>Lista de Precios - Barbería</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <style>
+        :root {
+            --primary-dark: #1a202c;
+            --secondary-gold: #d69e2e;
+            --accent-gray: #2d3748;
+            --light-text: #f7fafc;
+        }
+        body {
+            font-family: 'Montserrat', sans-serif;
+            background-color: var(--primary-dark);
+            color: var(--light-text);
+        }
+        .tab-active {
+            border-bottom: 3px solid var(--secondary-gold);
+            color: var(--secondary-gold);
+        }
+        .table-row:nth-child(even) {
+            background-color: rgba(255, 255, 255, 0.05);
+        }
+        .price-highlight {
+            color: var(--secondary-gold);
+            font-weight: 600;
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col">
+    <!-- Header -->
+    <header class="bg-gradient-to-r from-gray-900 to-black py-8 px-4 text-center" data-aos="fade-down">
+        <h1 class="text-3xl md:text-4xl font-bold mb-4">Lista de Precios - Mr Blonde</h1>
+        <p class="text-lg md:text-xl mb-2">Válida desde 01/09/2025</p>
+        <div class="mt-4 p-4 bg-yellow-900 rounded-lg max-w-2xl mx-auto">
+            <p class="font-semibold">🎁 Promoción Especial:</p>
+            <p>A partir de la compra de 12 unidades de cualquier producto, regalamos la entrega a domicilio en CABA, Rosario y Córdoba Capital. Consultá por otras localidades.</p>
+        </div>
+    </header>
+    <!-- Tabs Navigation -->
+    <nav class="flex justify-center my-6 px-4" data-aos="fade-up">
+        <button id="barberias-tab" class="mx-2 px-6 py-3 font-medium tab-active transition-all">Venta a Barberías</button>
+        <button id="publico-tab" class="mx-2 px-6 py-3 font-medium transition-all">Venta al Público</button>
+    </nav>
+    <!-- Search & Sort Controls -->
+    <div class="max-w-6xl mx-auto px-4 mb-6 flex flex-wrap gap-4 justify-between items-center">
+        <input type="text" id="search-input" placeholder="Buscar producto..." class="px-4 py-2 rounded bg-gray-800 text-white w-full md:w-1/3">
+        <div class="flex space-x-2">
+            <button id="sort-asc" class="px-3 py-1 bg-gray-700 rounded hover:bg-gray-600">Precio ↑</button>
+            <button id="sort-desc" class="px-3 py-1 bg-gray-700 rounded hover:bg-gray-600">Precio ↓</button>
+        </div>
+    </div>
+    <!-- Main Content -->
+    <main class="flex-grow max-w-6xl mx-auto w-full px-4 pb-12">
+        <!-- Venta a Barberías Section -->
+        <section id="barberias-section" class="data-section active">
+            <div class="overflow-x-auto rounded-lg shadow-lg mb-12" data-aos="fade-up">
+                <table class="min-w-full table-auto">
+                    <thead class="bg-gray-800">
+                        <tr>
+                            <th class="py-3 px-4 text-left">Producto</th>
+                            <th class="py-3 px-4 text-right">Precio Total</th>
+                            <th class="py-3 px-4 text-center">Bonificación</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">Pomada OS 100g</td>
+                            <td class="py-3 px-4 text-right price-highlight">$10.713,06</td>
+                            <td class="py-3 px-4 text-center">6x1 / 8x2</td>
+                        </tr>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">Pocket OS 50g</td>
+                            <td class="py-3 px-4 text-right price-highlight">$8.073,18</td>
+                            <td class="py-3 px-4 text-center">6x1 / 8x2</td>
+                        </tr>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">Pomada Mate 50g</td>
+                            <td class="py-3 px-4 text-right price-highlight">$10.219,57</td>
+                            <td class="py-3 px-4 text-center">6x1 / 8x2</td>
+                        </tr>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">Stardust Polvo Modelador 10cc</td>
+                            <td class="py-3 px-4 text-right price-highlight">$10.053,80</td>
+                            <td class="py-3 px-4 text-center">6x1 / 8x2</td>
+                        </tr>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">Pomada Líquida x 120ml</td>
+                            <td class="py-3 px-4 text-right price-highlight">$8.302,61</td>
+                            <td class="py-3 px-4 text-center">6x1 / 8x2</td>
+                        </tr>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">Shampoo Fortalecedor 2en1 200g</td>
+                            <td class="py-3 px-4 text-right price-highlight">$10.310,58</td>
+                            <td class="py-3 px-4 text-center">6x1 / 8x2</td>
+                        </tr>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">Aceite para Barba 20ml N°1 Azul</td>
+                            <td class="py-3 px-4 text-right price-highlight">$9.956,17</td>
+                            <td class="py-3 px-4 text-center">6x1 / 8x2</td>
+                        </tr>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">Aceite para Barba 20ml N°2 Rojo</td>
+                            <td class="py-3 px-4 text-right price-highlight">$9.956,17</td>
+                            <td class="py-3 px-4 text-center">6x1 / 8x2</td>
+                        </tr>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">Aceite para Barba 20ml N°3 Amarillo</td>
+                            <td class="py-3 px-4 text-right price-highlight">$9.956,17</td>
+                            <td class="py-3 px-4 text-center">6x1 / 8x2</td>
+                        </tr>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">Bálsamo Barba con Romero 30g</td>
+                            <td class="py-3 px-4 text-right price-highlight">$8.162,96</td>
+                            <td class="py-3 px-4 text-center">6x1 / 8x2</td>
+                        </tr>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">After Shave 100g</td>
+                            <td class="py-3 px-4 text-right price-highlight">$8.480,46</td>
+                            <td class="py-3 px-4 text-center">6x1 / 8x2</td>
+                        </tr>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">Válvula Recargable 250g para Gel Mr B</td>
+                            <td class="py-3 px-4 text-right price-highlight">$1.500,25</td>
+                            <td class="py-3 px-4 text-center">6x1 / 8x2</td>
+                        </tr>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">Gel Afeitar Profesional 1080ml</td>
+                            <td class="py-3 px-4 text-right price-highlight">$14.940,09</td>
+                            <td class="py-3 px-4 text-center">6x1 / 8x2</td>
+                        </tr>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">Crema de afeitar x 400g</td>
+                            <td class="py-3 px-4 text-right price-highlight">$15.735,42</td>
+                            <td class="py-3 px-4 text-center">6x1 / 8x2</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <!-- Merchandising Subsection -->
+            <div class="bg-gray-800 rounded-lg p-6 mt-8" data-aos="fade-up">
+                <h2 class="text-2xl font-bold mb-4 text-center">Merchandising</h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div class="bg-gray-700 p-4 rounded flex justify-between items-center">
+                        <span>Capas</span>
+                        <span class="price-highlight">$14.026</span>
+                    </div>
+                    <div class="bg-gray-700 p-4 rounded flex justify-between items-center">
+                        <span>Cajones Exhibidores Mr. Blonde</span>
+                        <span class="price-highlight">$34.145</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Venta al Público Section -->
+        <section id="publico-section" class="data-section hidden">
+            <div class="overflow-x-auto rounded-lg shadow-lg" data-aos="fade-up">
+                <table class="min-w-full table-auto">
+                    <thead class="bg-gray-800">
+                        <tr>
+                            <th class="py-3 px-4 text-left">Producto</th>
+                            <th class="py-3 px-4 text-right">Precio Total</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">Pomada OS 100gr</td>
+                            <td class="py-3 px-4 text-right price-highlight">$17.730</td>
+                        </tr>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">Pocket 50gr</td>
+                            <td class="py-3 px-4 text-right price-highlight">$13.400</td>
+                        </tr>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">Pomada Mate 50gr</td>
+                            <td class="py-3 px-4 text-right price-highlight">$16.860</td>
+                        </tr>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">Stardust Polvo Modelador 10cc</td>
+                            <td class="py-3 px-4 text-right price-highlight">$16.400</td>
+                        </tr>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">Pomada Líquida x 120ml</td>
+                            <td class="py-3 px-4 text-right price-highlight">$13.650</td>
+                        </tr>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">Shampoo Fortalecedor 2en1 200g</td>
+                            <td class="py-3 px-4 text-right price-highlight">$16.700</td>
+                        </tr>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">Aceites para barba 20ml</td>
+                            <td class="py-3 px-4 text-right price-highlight">$15.930</td>
+                        </tr>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">Bálsamo Barba con Romero 30g</td>
+                            <td class="py-3 px-4 text-right price-highlight">$13.000</td>
+                        </tr>
+                        <tr class="table-row">
+                            <td class="py-3 px-4">After Shave 100g</td>
+                            <td class="py-3 px-4 text-right price-highlight">$13.299</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </section>
+    </main>
+    <!-- Footer -->
+    <footer class="bg-black text-center py-6 text-sm">
+        <p>¿Tienes consultas? <a href="#" class="text-yellow-500 hover:underline">Contáctanos</a></p>
+        <p class="mt-2">© 2025 Mr Blonde. Todos los derechos reservados.</p>
+    </footer>
+    <script>
+        // Tab Switching
+        document.getElementById('barberias-tab').addEventListener('click', () => switchTab('barberias'));
+        document.getElementById('publico-tab').addEventListener('click', () => switchTab('publico'));
+        function switchTab(tabName) {
+            document.querySelectorAll('.data-section').forEach(section => section.classList.add('hidden'));
+            document.getElementById(`${tabName}-section`).classList.remove('hidden');
+            document.querySelectorAll('nav button').forEach(btn => btn.classList.remove('tab-active'));
+            document.getElementById(`${tabName}-tab`).classList.add('tab-active');
+        }
+        // Search Functionality
+        document.getElementById('search-input').addEventListener('input', function() {
+            const searchTerm = this.value.toLowerCase();
+            document.querySelectorAll('.table-row').forEach(row => {
+                const text = row.textContent.toLowerCase();
+                row.style.display = text.includes(searchTerm) ? '' : 'none';
+            });
+        });
+        // Sorting Functionality
+        document.getElementById('sort-asc').addEventListener('click', () => sortTable(true));
+        document.getElementById('sort-desc').addEventListener('click', () => sortTable(false));
+        function sortTable(ascending) {
+            const tbody = document.querySelector('.active tbody');
+            const rows = Array.from(tbody.querySelectorAll('.table-row'));
+            rows.sort((a, b) => {
+                const aPrice = parseFloat(a.querySelector('.price-highlight').textContent.replace(/[^0-9,]/g, '').replace(',', '.'));
+                const bPrice = parseFloat(b.querySelector('.price-highlight').textContent.replace(/[^0-9,]/g, '').replace(',', '.'));
+                return ascending ? aPrice - bPrice : bPrice - aPrice;
+            });
+            rows.forEach(row => tbody.appendChild(row));
+        }
+        // Initialize AOS
+        AOS.init({
+            duration: 800,
+            once: true
+        });
+        feather.replace();
+    </script>
+</body>
 </html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,35 @@

+diseña una lista de precion en html dinamica y hermosa para que vean mis clientes: esta es la informacion de la lista de precios: Lista de precios Barberías desde 01/09/2025
+A partir de la compra de 12 unidades de cualquier producto regalamos la entrega en domicilio
+en CABA, Rosario y Córdoba Capital. Consultá por otras localidades.
+Venta a Barberías
+Producto TOTAL Bonificación
+Pomada OS 100g 10713,06 6x1 / 8x2
+Pocket OS 50g 8073,18 6x1 / 8x2
+Pomada Mate 50g 10219,57 6x1 / 8x2
+Stardust Polvo Modelador 10cc 10053,80 6x1 / 8x2
+Pomada Líquida x 120ml 8302,61 6x1 / 8x2
+Shampoo Fortalecedor 2en1 200g 10310,58 6x1 / 8x2
+Aceite para Barba 20ml N°1 Azul 9956,17 6x1 / 8x2
+Aceite para Barba 20ml N°2 Rojo 9956,17 6x1 / 8x2
+Aceite para Barba 20ml N°3 Amarillo 9956,17 6x1 / 8x2
+Bálsamo Barba con Romero 30g 8162,96 6x1 / 8x2
+After Shave 100g 8480,46 6x1 / 8x2
+Válvula Recargable 250g para Gel Mr B 1500,25 6x1 / 8x2
+Gel Afeitar Profesional 1080ml 14940,09 6x1 / 8x2
+Crema de afeitar x 400g 15735,42 6x1 / 8x2
+Merchandasing Total
+Capas 14026
+Cajones Exhibidores Mr. Blonde 34145
+Venta al público
+Producto TOTAL
+Pomada OS 100gr 17730
+Pocket 50gr 13400
+Pomada Mate 50gr 16860
+Stardust Polvo Modelador 10cc 16400
+Pomada Líquida x 120ml 13650
+Shampoo Fortalecedor 2en1 200g 16700
+Aceites para barba 20ml 15930
+Bálsamo Barba con Romero 30g 13000
+After Shave 100g 13299
+la empresa se llama Mr Blonde
+la empresa se llama Mr Blonde