-
Notifications
You must be signed in to change notification settings - Fork 0
/
limitados.html
169 lines (158 loc) · 9.83 KB
/
limitados.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Productos Limitados - Mi Tienda</title>
<link rel="stylesheet" href="Estilo.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<header class="bg-primary text-white">
<div class="container mx-auto px-4">
<!-- Barra superior con logo y botones -->
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<div class="flex-shrink-0">
<img src="Recursos/Logonaso.png" alt="Logo" class="h-10">
</div>
<!-- Botones de escritorio (ocultos en móvil) -->
<nav class="hidden md:flex items-center space-x-4">
<a href="index.html" class="hover:text-secondary-light">Inicio</a>
<a href="productos.html" class="hover:text-secondary-light">Productos</a>
<a href="limitados.html" class="hover:text-secondary-light">Limitados</a>
<a href="proximamente.html" class="hover:text-secondary-light">Próximamente</a>
<a href="favoritos.html" class="hover:text-secondary-light">Favoritos</a>
<a href="Preguntas.html" class="hover:text-secondary-light">Preguntas Frecuentes</a>
<a href="Contactanos.html" class="hover:text-secondary-light">Contáctenos</a>
</nav>
<!-- Botones de cuenta y carrito -->
<div class="flex items-center space-x-4">
<button id="authButton" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
Cuenta
</button>
<button id="cartButton" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded flex items-center">
<span>Carrito</span>
<span id="cartCount" class="ml-2 bg-white text-green-500 rounded-full w-5 h-5 flex items-center justify-center">0</span>
</button>
<!-- Botón hamburguesa para móvil -->
<button id="menuButton" class="md:hidden flex items-center">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
<!-- Menú móvil (oculto por defecto) -->
<div id="mobileMenu" class="md:hidden hidden">
<nav class="py-4 space-y-2">
<a href="index.html" class="block hover:bg-primary-dark px-4 py-2 rounded-lg transition-colors">Inicio</a>
<a href="productos.html" class="block hover:bg-primary-dark px-4 py-2 rounded-lg transition-colors">Productos</a>
<a href="limitados.html" class="block hover:bg-primary-dark px-4 py-2 rounded-lg transition-colors">Limitados</a>
<a href="proximamente.html" class="block hover:bg-primary-dark px-4 py-2 rounded-lg transition-colors">Próximamente</a>
<a href="favoritos.html" class="block hover:bg-primary-dark px-4 py-2 rounded-lg transition-colors">Favoritos</a>
<a href="Preguntas.html" class="block hover:bg-primary-dark px-4 py-2 rounded-lg transition-colors">Preguntas Frecuentes</a>
<a href="Contactanos.html" class="block hover:bg-primary-dark px-4 py-2 rounded-lg transition-colors">Contáctenos</a>
</nav>
</div>
</div>
</header>
<main class="container mx-auto py-8 px-4">
<h1 class="text-4xl font-bold mb-8 text-center">Productos Limitados</h1>
<section class="mb-12">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="limitedProducts">
<!-- Product 1 -->
<div class="bg-white shadow-md rounded-lg overflow-hidden">
<img src="/placeholder.svg?height=200&width=300" alt="Producto Limitado 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2">Producto Limitado 1</h3>
<p class="text-gray-600 mb-4">Descripción del Producto Limitado 1. Edición especial disponible por tiempo limitado.</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold">$15.000</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
Añadir al carrito
</button>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="bg-white shadow-md rounded-lg overflow-hidden">
<img src="/placeholder.svg?height=200&width=300" alt="Producto Limitado 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2">Producto Limitado 2</h3>
<p class="text-gray-600 mb-4">Descripción del Producto Limitado 2. Otra edición especial con unidades limitadas.</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold">$15.000</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
Añadir al carrito
</button>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="bg-white shadow-md rounded-lg overflow-hidden">
<img src="/placeholder.svg?height=200&width=300" alt="Producto Limitado 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2">Producto Limitado 3</h3>
<p class="text-gray-600 mb-4">Descripción del Producto Limitado 3. Exclusivo para nuestros clientes más fieles.</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold">$15.000</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
Añadir al carrito
</button>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-primary text-white p-4 mt-8">
<div class="container mx-auto text-center">
<p>Email: [email protected]</p>
<div class="redes-sociales mt-2">
<a href="#" class="mx-2"><img src="Recursos/Facebook.png" alt="Facebook" class="h-6 inline"></a>
<a href="#" class="mx-2"><img src="Recursos/XTwitter.png" alt="Twitter" class="h-6 inline"></a>
<a href="#" class="mx-2"><img src="Recursos/Instagram.png" alt="Instagram" class="h-6 inline"></a>
</div>
<p class="mt-2">© 2024 Brainrot. Todos los derechos reservados.</p>
</div>
</footer>
<!-- Modal de Autenticación -->
<div id="authModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
<div class="bg-white p-8 rounded-lg w-full max-w-md mx-4">
<h2 class="text-2xl font-bold mb-4">Iniciar Sesión / Registrarse</h2>
<form id="authForm">
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700">Correo Electrónico</label>
<input type="email" id="email" name="email" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
</div>
<div class="mb-4">
<label for="password" class="block text-sm font-medium text-gray-700">Contraseña</label>
<input type="password" id="password" name="password" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
</div>
<button type="submit" class="w-full bg-blue-500 text-white rounded-md py-2 hover:bg-blue-600">Iniciar Sesión</button>
</form>
<p class="mt-4 text-center">
¿No tienes una cuenta? <a href="#" class="text-blue-500 hover:underline">Regístrate</a>
</p>
<button id="closeAuthModal" class="mt-4 w-full bg-gray-300 text-gray-800 rounded-md py-2 hover:bg-gray-400">Cerrar</button>
</div>
</div>
<!-- Modal del Carrito -->
<div id="cartModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
<div class="bg-white p-8 rounded-lg w-full max-w-md mx-4">
<h2 class="text-2xl font-bold mb-4">Carrito de Compras</h2>
<div id="cartItems" class="mb-4">
<!-- Los items del carrito se cargarán aquí dinámicamente -->
</div>
<div class="flex justify-between items-center font-bold">
<span>Total:</span>
<span id="cartTotal">$0.00</span>
</div>
<button id="checkoutButton" class="mt-4 w-full bg-green-500 text-white rounded-md py-2 hover:bg-green-600">Proceder al Pago</button>
<button id="closeCartModal" class="mt-4 w-full bg-gray-300 text-gray-800 rounded-md py-2 hover:bg-gray-400">Cerrar</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>