Hugging Face's logo

Spaces:
goodemagod
/
vinoidealok
Running

App Files Community
goodemagod commited on
Commit
80afb37
路
verified 路
1 Parent(s): 34fa07d

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +675 -0
index.html ADDED
@@ -0,0 +1,675 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Sommelier Digital - Encuentra Tu Vino Ideal</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">
10
+ <style>
11
+ body {
12
+ font-family: 'Montserrat', sans-serif;
13
+ }
14
+ .title-font {
15
+ font-family: 'Playfair Display', serif;
16
+ }
17
+ .fade-in {
18
+ animation: fadeIn 0.6s ease-in-out;
19
+ }
20
+ @keyframes fadeIn {
21
+ from { opacity: 0; transform: translateY(10px); }
22
+ to { opacity: 1; transform: translateY(0); }
23
+ }
24
+ .gradient-bg {
25
+ background: linear-gradient(135deg, #3a1c71 0%, #d76d77 50%, #ffaf7b 100%);
26
+ background-attachment: fixed;
27
+ }
28
+ .wine-card {
29
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
30
+ position: relative;
31
+ overflow: hidden;
32
+ }
33
+ .wine-card:hover {
34
+ transform: translateY(-8px);
35
+ box-shadow: 0 15px 30px rgba(0,0,0,0.25);
36
+ }
37
+ .wine-card::after {
38
+ content: '';
39
+ position: absolute;
40
+ top: 0;
41
+ left: 0;
42
+ right: 0;
43
+ height: 4px;
44
+ background: linear-gradient(90deg, #d76d77 0%, #ffaf7b 100%);
45
+ }
46
+ .progress-bar {
47
+ transition: width 0.7s cubic-bezier(0.65, 0, 0.35, 1);
48
+ }
49
+ .btn-primary {
50
+ background: linear-gradient(90deg, #d76d77 0%, #ffaf7b 100%);
51
+ box-shadow: 0 4px 15px rgba(215, 109, 119, 0.4);
52
+ }
53
+ .btn-primary:hover {
54
+ transform: translateY(-2px);
55
+ box-shadow: 0 6px 20px rgba(215, 109, 119, 0.6);
56
+ }
57
+ .option-btn {
58
+ transition: all 0.3s ease;
59
+ position: relative;
60
+ overflow: hidden;
61
+ }
62
+ .option-btn:hover {
63
+ transform: translateX(5px);
64
+ }
65
+ .option-btn::before {
66
+ content: '';
67
+ position: absolute;
68
+ left: -10px;
69
+ top: 0;
70
+ bottom: 0;
71
+ width: 4px;
72
+ background: #d76d77;
73
+ opacity: 0;
74
+ transition: all 0.3s ease;
75
+ }
76
+ .option-btn:hover::before {
77
+ left: 0;
78
+ opacity: 1;
79
+ }
80
+ .floating {
81
+ animation: floating 3s ease-in-out infinite;
82
+ }
83
+ @keyframes floating {
84
+ 0% { transform: translateY(0px); }
85
+ 50% { transform: translateY(-10px); }
86
+ 100% { transform: translateY(0px); }
87
+ }
88
+ .bounce-in {
89
+ animation: bounceIn 0.6s ease-out;
90
+ }
91
+ @keyframes bounceIn {
92
+ 0% { transform: scale(0.9); opacity: 0; }
93
+ 50% { transform: scale(1.05); opacity: 1; }
94
+ 100% { transform: scale(1); }
95
+ }
96
+ .pulse {
97
+ animation: pulse 2s infinite;
98
+ }
99
+ @keyframes pulse {
100
+ 0% { box-shadow: 0 0 0 0 rgba(215, 109, 119, 0.7); }
101
+ 70% { box-shadow: 0 0 0 10px rgba(215, 109, 119, 0); }
102
+ 100% { box-shadow: 0 0 0 0 rgba(215, 109, 119, 0); }
103
+ }
104
+ </style>
105
+ </head>
106
+ <body class="min-h-screen gradient-bg text-white">
107
+ <div class="container mx-auto px-4 py-8 md:py-12 max-w-4xl">
108
+ <header class="text-center mb-8 md:mb-12 fade-in">
109
+ <div class="floating inline-block mb-4">
110
+ <i class="fas fa-wine-glass-alt text-5xl text-white opacity-90"></i>
111
+ </div>
112
+ <h1 class="title-font text-4xl md:text-5xl font-bold mb-3">Sommelier Digital</h1>
113
+ <p class="text-xl opacity-90 max-w-2xl mx-auto">Descubre el vino perfecto para tu personalidad y ocasi贸n</p>
114
+ </header>
115
+
116
+ <div id="app" class="bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl shadow-2xl overflow-hidden fade-in">
117
+ <!-- Progress Bar -->
118
+ <div class="h-2.5 bg-white bg-opacity-20">
119
+ <div id="progressBar" class="h-full bg-gradient-to-r from-pink-500 to-orange-400 progress-bar" style="width: 0%"></div>
120
+ </div>
121
+
122
+ <!-- Question Container -->
123
+ <div id="questionContainer" class="p-6 md:p-8">
124
+ <!-- Initial Screen -->
125
+ <div id="welcomeScreen" class="text-center py-6">
126
+ <div class="mb-8">
127
+ <div class="floating inline-block mb-6">
128
+ <i class="fas fa-wine-bottle text-7xl text-white"></i>
129
+ </div>
130
+ <h2 class="title-font text-3xl md:text-4xl font-bold mb-4">Encuentra Tu Vino Ideal</h2>
131
+ <p class="text-lg mb-6 max-w-2xl mx-auto">Responda nuestro breve cuestionario y nuestro algoritmo sommelier seleccionar谩 los vinos que mejor se adapten a su personalidad, estado de 谩nimo y preferencias.</p>
132
+ </div>
133
+ <button onclick="startQuestionnaire()" class="btn-primary text-white font-bold py-3 px-8 rounded-full text-lg transition-all transform hover:scale-105 pulse">
134
+ Comenzar <i class="fas fa-chevron-right ml-2"></i>
135
+ </button>
136
+ </div>
137
+
138
+ <!-- Questions will be inserted here dynamically -->
139
+ </div>
140
+ </div>
141
+
142
+ <footer class="text-center mt-12 text-sm text-white text-opacity-70">
143
+ <p>漏 2023 Sommelier Digital | Todos los derechos reservados</p>
144
+ </footer>
145
+ </div>
146
+
147
+ <script>
148
+ // Data
149
+ const zodiacData = {
150
+ aries: {
151
+ dates: "Mar 21 - Abr 19",
152
+ traits: "Energ茅tico, apasionado, valiente",
153
+ foods: ["Carnes rojas", "Especias fuertes", "Ajo", "Cebolla", "Quesos fuertes"],
154
+ winePairings: ["Malbec", "Syrah", "Zinfandel"],
155
+ icon: "fa-fire"
156
+ },
157
+ tauro: {
158
+ dates: "Abr 20 - May 20",
159
+ traits: "Sensual, terrenal, persistente",
160
+ foods: ["Quesos cremosos", "Trufas", "Chocolate", "Carnes de caza", "Ra铆ces"],
161
+ winePairings: ["Merlot", "Rioja", "Ch芒teauneuf-du-Pape"],
162
+ icon: "fa-leaf"
163
+ },
164
+ geminis: {
165
+ dates: "May 21 - Jun 20",
166
+ traits: "Vers谩til, comunicativo, curioso",
167
+ foods: ["Ensaladas variadas", "Frutas tropicales", "Mariscos ligeros", "Comida 茅tnica"],
168
+ winePairings: ["Sauvignon Blanc", "Pinot Grigio", "Rosado"],
169
+ icon: "fa-comments"
170
+ },
171
+ cancer: {
172
+ dates: "Jun 21 - Jul 22",
173
+ traits: "Emocional, intuitivo, protector",
174
+ foods: ["Comida casera", "Sopas", "Mariscos", "Productos l谩cteos"],
175
+ winePairings: ["Chardonnay", "Viognier", "Pinot Noir"],
176
+ icon: "fa-moon"
177
+ },
178
+ leo: {
179
+ dates: "Jul 23 - Ago 22",
180
+ traits: "Dram谩tico, generoso, orgulloso",
181
+ foods: ["Platos ostentosos", "Carnes premium", "Comida gourmet", "Frutas ex贸ticas"],
182
+ winePairings: ["Cabernet Sauvignon", "Barolo", "Champagne"],
183
+ icon: "fa-crown"
184
+ },
185
+ virgo: {
186
+ dates: "Ago 23 - Sep 22",
187
+ traits: "Detallista, pr谩ctico, perfeccionista",
188
+ foods: ["Comida org谩nica", "Vegetales", "Granos enteros", "Platos balanceados"],
189
+ winePairings: ["Riesling", "Gew眉rztraminer", "Sancerre"],
190
+ icon: "fa-star"
191
+ },
192
+ libra: {
193
+ dates: "Sep 23 - Oct 22",
194
+ traits: "Armonioso, social, equilibrado",
195
+ foods: ["Comida est茅ticamente presentada", "Postres", "Platos equilibrados"],
196
+ winePairings: ["Prosecco", "Pinot Noir", "Champagne rosado"],
197
+ icon: "fa-balance-scale"
198
+ },
199
+ escorpio: {
200
+ dates: "Oct 23 - Nov 21",
201
+ traits: "Intenso, misterioso, apasionado",
202
+ foods: ["Comida picante", "Mariscos oscuros", "Quesos azules", "Chocolate amargo"],
203
+ winePairings: ["Shiraz", "Carm茅n猫re", "Amarone"],
204
+ icon: "fa-scorpion"
205
+ },
206
+ sagitario: {
207
+ dates: "Nov 22 - Dic 21",
208
+ traits: "Aventurero, optimista, filos贸fico",
209
+ foods: ["Comida internacional", "Platos ex贸ticos", "Carnes a la parrilla"],
210
+ winePairings: ["Tempranillo", "Carmenere", "Chianti"],
211
+ icon: "fa-arrow-right"
212
+ },
213
+ capricornio: {
214
+ dates: "Dic 22 - Ene 19",
215
+ traits: "Disciplinado, tradicional, ambicioso",
216
+ foods: ["Carnes maduradas", "Platos cl谩sicos", "Ra铆ces", "Quesos a帽ejados"],
217
+ winePairings: ["Brunello di Montalcino", "Bordeaux", "Rioja Reserva"],
218
+ icon: "fa-mountain"
219
+ },
220
+ acuario: {
221
+ dates: "Ene 20 - Feb 18",
222
+ traits: "Innovador, exc茅ntrico, humanitario",
223
+ foods: ["Comida futurista", "Fusiones", "Platos veganos innovadores"],
224
+ winePairings: ["Garnacha", "Verdejo", "Vinos naturales"],
225
+ icon: "fa-atom"
226
+ },
227
+ piscis: {
228
+ dates: "Feb 19 - Mar 20",
229
+ traits: "Sensible, art铆stico, espiritual",
230
+ foods: ["Pescados", "Algas", "Comida con presentaci贸n art铆stica"],
231
+ winePairings: ["Moscato", "Pinot Noir", "Vinos biodin谩micos"],
232
+ icon: "fa-fish"
233
+ }
234
+ };
235
+
236
+ const nameFoodData = {
237
+ a: ["Aguacate", "Alcachofa", "Almendras"],
238
+ b: ["Berenjena", "Br贸coli", "Bayas"],
239
+ c: ["C铆tricos", "Coliflor", "Cangrejo"],
240
+ d: ["D谩tiles", "Durazno", "Dorada"],
241
+ e: ["Esp谩rragos", "Espinacas", "Endibias"],
242
+ f: ["Fresas", "Frambuesas", "Frijoles"],
243
+ g: ["Granada", "Garbanzos", "Gambas"],
244
+ h: ["Higos", "Huevos", "Hongos"],
245
+ i: ["脥nguere", "Iceberg (lechuga)", "Iberico (jam贸n)"],
246
+ j: ["Jengibre", "Jud铆as", "Jam贸n"],
247
+ k: ["Kiwi", "Kale", "Kumquat"],
248
+ l: ["Lim贸n", "Lentejas", "Langosta"],
249
+ m: ["Manzana", "Ma铆z", "Merluza"],
250
+ n: ["Naranja", "Nueces", "Navajas"],
251
+ o: ["Oliva", "Ostras", "Okra"],
252
+ p: ["Pi帽a", "Pimiento", "Pulpo"],
253
+ q: ["Queso", "Quinoa", "Quimbomb贸"],
254
+ r: ["Remolacha", "R煤cula", "Rape"],
255
+ s: ["Sand铆a", "Salmon", "Semillas"],
256
+ t: ["Tomate", "Tofu", "Trucha"],
257
+ u: ["Uva", "Udon", "Umeboshi"],
258
+ v: ["Vainilla", "Vieiras", "Verduras"],
259
+ w: ["Wasabi", "Wakame", "Wonton"],
260
+ x: ["Xoconostle", "Xiaolongbao", "Xoi"],
261
+ y: ["Yogur", "Yuca", "Yakitori"],
262
+ z: ["Zanahoria", "Zapallo", "Zarzamora"]
263
+ };
264
+
265
+ const moodData = {
266
+ feliz: ["Champagne", "Prosecco", "Moscato"],
267
+ relajado: ["Pinot Noir", "Chardonnay", "Viognier"],
268
+ estresado: ["Merlot", "Rioja", "Beaujolais"],
269
+ romantico: ["Champagne rosado", "Pinot Noir", "Malbec"],
270
+ nostalgico: ["Vinos a帽ejos", "Sherry", "Madeira"],
271
+ energico: ["Sauvignon Blanc", "Albari帽o", "Garnacha"],
272
+ creativo: ["Vinos naturales", "Vinos naranjas", "Vinos biodin谩micos"]
273
+ };
274
+
275
+ const locationData = {
276
+ playa: ["Vinos blancos frescos", "Rosados", "Albari帽o"],
277
+ montana: ["Vinos tintos robustos", "Syrah", "Cabernet Sauvignon"],
278
+ ciudad: ["Vinos elegantes", "Champagne", "Pinot Noir"],
279
+ campo: ["Vinos org谩nicos", "Vinos locales", "Vinos artesanales"],
280
+ extranjero: ["Vinos de la regi贸n", "Vinos internacionales", "Vinos de importaci贸n"]
281
+ };
282
+
283
+ // State
284
+ let currentQuestion = 0;
285
+ const answers = {};
286
+ const questions = [
287
+ {
288
+ question: "驴Cu谩l es su fecha de nacimiento?",
289
+ type: "date",
290
+ key: "birthdate",
291
+ icon: "fa-calendar-day"
292
+ },
293
+ {
294
+ question: "驴C贸mo se llama?",
295
+ type: "text",
296
+ key: "name",
297
+ icon: "fa-signature",
298
+ placeholder: "Escriba su nombre completo"
299
+ },
300
+ {
301
+ question: "驴D贸nde se encuentra actualmente?",
302
+ type: "select",
303
+ options: ["En la playa", "En la monta帽a", "En la ciudad", "En el campo", "En el extranjero"],
304
+ key: "location",
305
+ icon: "fa-map-marker-alt"
306
+ },
307
+ {
308
+ question: "驴C贸mo se siente hoy?",
309
+ type: "select",
310
+ options: ["Feliz", "Relajado", "Estresado", "Rom谩ntico", "Nost谩lgico", "Energ茅tico", "Creativo"],
311
+ key: "mood",
312
+ icon: "fa-smile"
313
+ },
314
+ {
315
+ question: "驴Qu茅 tipo de experiencia vin铆cola prefiere?",
316
+ type: "select",
317
+ options: ["Algo familiar y confortable", "Una aventura nueva", "Un equilibrio entre ambos"],
318
+ key: "preference",
319
+ icon: "fa-star"
320
+ }
321
+ ];
322
+
323
+ // Functions
324
+ function startQuestionnaire() {
325
+ currentQuestion = 0;
326
+ document.getElementById('welcomeScreen').style.display = 'none';
327
+ showQuestion(currentQuestion);
328
+ }
329
+
330
+ function showQuestion(index) {
331
+ const question = questions[index];
332
+ const container = document.getElementById('questionContainer');
333
+
334
+ // Update progress bar
335
+ const progress = ((index + 1) / questions.length) * 100;
336
+ document.getElementById('progressBar').style.width = `${progress}%`;
337
+
338
+ let html = `
339
+ <div class="fade-in">
340
+ <div class="flex items-center mb-6">
341
+ <div class="bg-white bg-opacity-20 w-12 h-12 rounded-full flex items-center justify-center mr-4">
342
+ <i class="fas ${question.icon} text-xl"></i>
343
+ </div>
344
+ <h2 class="title-font text-2xl md:text-3xl font-bold">${question.question}</h2>
345
+ </div>
346
+ <div class="mb-8">
347
+ `;
348
+
349
+ if (question.type === "date") {
350
+ html += `
351
+ <div class="relative">
352
+ <input type="date" id="answerInput"
353
+ class="w-full px-5 py-4 rounded-xl bg-white bg-opacity-20 border border-white border-opacity-30 text-white focus:outline-none focus:ring-2 focus:ring-pink-400 placeholder-white placeholder-opacity-70">
354
+ <i class="fas fa-calendar-alt absolute right-4 top-4 text-white opacity-70"></i>
355
+ </div>
356
+ `;
357
+ } else if (question.type === "text") {
358
+ html += `
359
+ <div class="relative">
360
+ <input type="text" id="answerInput"
361
+ class="w-full px-5 py-4 rounded-xl bg-white bg-opacity-20 border border-white border-opacity-30 text-white focus:outline-none focus:ring-2 focus:ring-pink-400 placeholder-white placeholder-opacity-70"
362
+ placeholder="${question.placeholder}">
363
+ <i class="fas fa-user-edit absolute right-4 top-4 text-white opacity-70"></i>
364
+ </div>
365
+ `;
366
+ } else if (question.type === "select") {
367
+ question.options.forEach((option, i) => {
368
+ html += `
369
+ <button onclick="selectOption('${option}')"
370
+ class="w-full mb-3 px-6 py-4 rounded-xl bg-white bg-opacity-10 hover:bg-opacity-20 border border-white border-opacity-20 text-left transition-all option-btn flex items-center">
371
+ <span class="bg-white bg-opacity-20 w-8 h-8 rounded-full flex items-center justify-center mr-4">${i+1}</span>
372
+ ${option}
373
+ </button>
374
+ `;
375
+ });
376
+ }
377
+
378
+ html += `
379
+ </div>
380
+ <div class="flex ${index > 0 ? 'justify-between' : 'justify-end'}">
381
+ `;
382
+
383
+ if (index > 0) {
384
+ html += `
385
+ <button onclick="previousQuestion()" class="bg-white bg-opacity-10 hover:bg-opacity-20 text-white font-bold py-3 px-6 rounded-lg transition-all">
386
+ <i class="fas fa-chevron-left mr-2"></i> Anterior
387
+ </button>
388
+ `;
389
+ }
390
+
391
+ if (question.type === "select") {
392
+ html += `<div></div>`; // Placeholder for center
393
+ } else {
394
+ html += `
395
+ <button onclick="nextQuestion()" class="btn-primary text-white font-bold py-3 px-8 rounded-full text-lg transition-all transform hover:scale-105">
396
+ Siguiente <i class="fas fa-chevron-right ml-2"></i>
397
+ </button>
398
+ `;
399
+ }
400
+
401
+ html += `
402
+ </div>
403
+ </div>
404
+ `;
405
+
406
+ container.innerHTML = html;
407
+
408
+ // Focus on input if present
409
+ const input = document.getElementById('answerInput');
410
+ if (input) input.focus();
411
+ }
412
+
413
+ function selectOption(option) {
414
+ const question = questions[currentQuestion];
415
+ answers[question.key] = option;
416
+
417
+ // Add visual feedback
418
+ const buttons = document.querySelectorAll('#questionContainer button');
419
+ buttons.forEach(btn => {
420
+ if (btn.textContent.includes(option)) {
421
+ btn.classList.add('bg-pink-500', 'bg-opacity-30', 'border-pink-400');
422
+ btn.classList.remove('bg-opacity-10', 'border-opacity-20');
423
+ } else {
424
+ btn.classList.remove('bg-pink-500', 'bg-opacity-30', 'border-pink-400');
425
+ btn.classList.add('bg-opacity-10', 'border-opacity-20');
426
+ }
427
+ });
428
+
429
+ // Proceed after a small delay for visual feedback
430
+ setTimeout(nextQuestion, 400);
431
+ }
432
+
433
+ function previousQuestion() {
434
+ currentQuestion--;
435
+ showQuestion(currentQuestion);
436
+ }
437
+
438
+ function nextQuestion() {
439
+ const question = questions[currentQuestion];
440
+
441
+ if (question.type !== "select") {
442
+ const input = document.getElementById('answerInput');
443
+ if (!input.value) {
444
+ showError("Por favor complete la pregunta");
445
+ return;
446
+ }
447
+ answers[question.key] = input.value;
448
+ }
449
+
450
+ currentQuestion++;
451
+
452
+ if (currentQuestion < questions.length) {
453
+ showQuestion(currentQuestion);
454
+ } else {
455
+ showResults();
456
+ }
457
+ }
458
+
459
+ function showError(message) {
460
+ const errorEl = document.createElement('div');
461
+ errorEl.className = 'bg-red-500 text-white px-4 py-2 rounded-lg mb-4 text-center bounce-in';
462
+ errorEl.innerHTML = `<i class="fas fa-exclamation-circle mr-2"></i> ${message}`;
463
+
464
+ const container = document.getElementById('questionContainer');
465
+ const existingError = container.querySelector('.bg-red-500');
466
+ if (existingError) existingError.remove();
467
+
468
+ const firstChild = container.firstChild;
469
+ container.insertBefore(errorEl, firstChild);
470
+
471
+ setTimeout(() => {
472
+ errorEl.classList.remove('bounce-in');
473
+ errorEl.classList.add('fade-out');
474
+ setTimeout(() => errorEl.remove(), 500);
475
+ }, 3000);
476
+ }
477
+
478
+ function getZodiacSign(birthdate) {
479
+ const date = new Date(birthdate);
480
+ const month = date.getMonth() + 1;
481
+ const day = date.getDate();
482
+
483
+ if ((month === 3 && day >= 21) || (month === 4 && day <= 19)) return "aries";
484
+ if ((month === 4 && day >= 20) || (month === 5 && day <= 20)) return "tauro";
485
+ if ((month === 5 && day >= 21) || (month === 6 && day <= 20)) return "geminis";
486
+ if ((month === 6 && day >= 21) || (month === 7 && day <= 22)) return "cancer";
487
+ if ((month === 7 && day >= 23) || (month === 8 && day <= 22)) return "leo";
488
+ if ((month === 8 && day >= 23) || (month === 9 && day <= 22)) return "virgo";
489
+ if ((month === 9 && day >= 23) || (month === 10 && day <= 22)) return "libra";
490
+ if ((month === 10 && day >= 23) || (month === 11 && day <= 21)) return "escorpio";
491
+ if ((month === 11 && day >= 22) || (month === 12 && day <= 21)) return "sagitario";
492
+ if ((month === 12 && day >= 22) || (month === 1 && day <= 19)) return "capricornio";
493
+ if ((month === 1 && day >= 20) || (month === 2 && day <= 18)) return "acuario";
494
+ return "piscis";
495
+ }
496
+
497
+ function getNameFoods(name) {
498
+ const firstLetter = name.charAt(0).toLowerCase();
499
+ return nameFoodData[firstLetter] || ["Alimentos variados"];
500
+ }
501
+
502
+ function showResults() {
503
+ // Process answers
504
+ const zodiacSign = getZodiacSign(answers.birthdate);
505
+ const zodiacInfo = zodiacData[zodiacSign];
506
+ const nameFoods = getNameFoods(answers.name);
507
+ const moodWines = moodData[answers.mood.toLowerCase()] || [];
508
+ const locationWines = locationData[answers.location.toLowerCase().replace("en el ", "").replace("en la ", "").replace("en ", "")] || [];
509
+
510
+ // Find common wines
511
+ const allWines = [
512
+ ...zodiacInfo.winePairings,
513
+ ...moodWines,
514
+ ...locationWines
515
+ ];
516
+
517
+ // Count occurrences
518
+ const wineCounts = {};
519
+ allWines.forEach(wine => {
520
+ wineCounts[wine] = (wineCounts[wine] || 0) + 1;
521
+ });
522
+
523
+ // Sort by most common
524
+ const sortedWines = Object.keys(wineCounts).sort((a, b) => wineCounts[b] - wineCounts[a]);
525
+
526
+ // Get top 3 unique recommendations
527
+ const recommendations = [];
528
+ const seen = new Set();
529
+ for (const wine of sortedWines) {
530
+ if (!seen.has(wine)) {
531
+ recommendations.push(wine);
532
+ seen.add(wine);
533
+ if (recommendations.length >= 3) break;
534
+ }
535
+ }
536
+
537
+ // Format birthdate
538
+ const birthdate = new Date(answers.birthdate);
539
+ const formattedDate = birthdate.toLocaleDateString('es-ES', {
540
+ day: 'numeric',
541
+ month: 'long',
542
+ year: 'numeric'
543
+ });
544
+
545
+ // Display results
546
+ const container = document.getElementById('questionContainer');
547
+ container.innerHTML = `
548
+ <div class="fade-in">
549
+ <div class="text-center mb-8">
550
+ <div class="floating inline-block mb-4">
551
+ <i class="fas fa-glass-cheers text-6xl text-white"></i>
552
+ </div>
553
+ <h2 class="title-font text-3xl md:text-4xl font-bold mb-3">隆Hemos encontrado tu vino ideal!</h2>
554
+ <p class="text-lg opacity-90 max-w-2xl mx-auto">Basado en tu perfil 煤nico, te recomendamos estas excelentes opciones:</p>
555
+ </div>
556
+
557
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
558
+ ${recommendations.map((wine, index) => `
559
+ <div class="wine-card bg-white bg-opacity-10 p-6 rounded-xl border border-white border-opacity-20 bounce-in" style="animation-delay: ${index * 0.1}s">
560
+ <div class="flex items-center mb-4">
561
+ <div class="bg-gradient-to-r from-pink-500 to-orange-400 w-10 h-10 rounded-full flex items-center justify-center text-white font-bold mr-3">
562
+ ${index + 1}
563
+ </div>
564
+ <h3 class="title-font text-xl font-bold">${wine}</h3>
565
+ </div>
566
+ <div class="mb-4">
567
+ <p class="text-sm opacity-80 mb-2">Perfecto para combinar con:</p>
568
+ <ul class="text-sm space-y-1">
569
+ ${[...zodiacInfo.foods.slice(0, 2), ...nameFoods.slice(0, 2)].map(food => `
570
+ <li class="flex items-center">
571
+ <i class="fas fa-utensils text-xs mr-2 opacity-60"></i> ${food}
572
+ </li>
573
+ `).join('')}
574
+ </ul>
575
+ </div>
576
+ <div class="text-xs opacity-60 mt-4 pt-3 border-t border-white border-opacity-10">
577
+ <i class="fas fa-info-circle mr-1"></i> Recomendaci贸n ${['primaria', 'secundaria', 'terciaria'][index]}
578
+ </div>
579
+ </div>
580
+ `).join('')}
581
+ </div>
582
+
583
+ <div class="bg-white bg-opacity-10 rounded-xl p-6 md:p-8 mb-8">
584
+ <h3 class="title-font text-2xl font-bold mb-6 text-center">Tu perfil vin铆cola</h3>
585
+
586
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
587
+ <!-- Zodiac Section -->
588
+ <div class="bg-white bg-opacity-5 rounded-lg p-5">
589
+ <div class="flex items-center mb-4">
590
+ <div class="bg-white bg-opacity-20 w-10 h-10 rounded-full flex items-center justify-center mr-3">
591
+ <i class="fas ${zodiacInfo.icon}"></i>
592
+ </div>
593
+ <div>
594
+ <h4 class="title-font font-bold text-pink-300">Signo Zodiacal</h4>
595
+ <h3 class="font-bold">${zodiacSign.charAt(0).toUpperCase() + zodiacSign.slice(1)}</h3>
596
+ </div>
597
+ </div>
598
+ <div class="text-sm space-y-3">
599
+ <p><span class="font-semibold">Fechas:</span> ${zodiacInfo.dates}</p>
600
+ <p><span class="font-semibold">Rasgos:</span> ${zodiacInfo.traits}</p>
601
+ <p><span class="font-semibold">Alimentos afines:</span> ${zodiacInfo.foods.join(", ")}</p>
602
+ <p><span class="font-semibold">Nacimiento:</span> ${formattedDate}</p>
603
+ </div>
604
+ </div>
605
+
606
+ <!-- Personal Info Section -->
607
+ <div class="space-y-5">
608
+ <div class="bg-white bg-opacity-5 rounded-lg p-5">
609
+ <div class="flex items-center mb-3">
610
+ <div class="bg-white bg-opacity-20 w-10 h-10 rounded-full flex items-center justify-center mr-3">
611
+ <i class="fas fa-user"></i>
612
+ </div>
613
+ <div>
614
+ <h4 class="title-font font-bold text-orange-300">Informaci贸n Personal</h4>
615
+ <h3 class="font-bold">${answers.name}</h3>
616
+ </div>
617
+ </div>
618
+ <div class="text-sm">
619
+ <p><span class="font-semibold">Alimentos asociados:</span> ${nameFoods.join(", ")}</p>
620
+ </div>
621
+ </div>
622
+
623
+ <div class="grid grid-cols-2 gap-4">
624
+ <div class="bg-white bg-opacity-5 rounded-lg p-4">
625
+ <div class="flex items-center mb-2">
626
+ <i class="fas fa-map-marker-alt text-orange-300 mr-2"></i>
627
+ <h4 class="font-semibold text-sm">Contexto</h4>
628
+ </div>
629
+ <p class="text-sm">${answers.location}</p>
630
+ </div>
631
+
632
+ <div class="bg-white bg-opacity-5 rounded-lg p-4">
633
+ <div class="flex items-center mb-2">
634
+ <i class="fas fa-smile text-pink-300 mr-2"></i>
635
+ <h4 class="font-semibold text-sm">Estado de 谩nimo</h4>
636
+ </div>
637
+ <p class="text-sm">${answers.mood}</p>
638
+ </div>
639
+ </div>
640
+ </div>
641
+ </div>
642
+ </div>
643
+
644
+ <div class="text-center">
645
+ <button onclick="startQuestionnaire()" class="btn-primary text-white font-bold py-3 px-8 rounded-full text-lg transition-all transform hover:scale-105 inline-flex items-center">
646
+ <i class="fas fa-redo mr-2"></i> Volver a empezar
647
+ </button>
648
+ <button onclick="shareResults()" class="ml-4 bg-white bg-opacity-10 hover:bg-opacity-20 text-white font-bold py-3 px-6 rounded-full text-lg transition-all transform hover:scale-105 inline-flex items-center">
649
+ <i class="fas fa-share-alt mr-2"></i> Compartir
650
+ </button>
651
+ </div>
652
+ </div>
653
+ `;
654
+
655
+ // Update progress bar to 100%
656
+ document.getElementById('progressBar').style.width = '100%';
657
+ }
658
+
659
+ function shareResults() {
660
+ if (navigator.share) {
661
+ navigator.share({
662
+ title: 'Mi vino ideal',
663
+ text: '隆Descubre tu vino ideal con este sommelier digital!',
664
+ url: window.location.href
665
+ }).catch(err => {
666
+ console.log('Error al compartir:', err);
667
+ alert('No se pudo compartir, pero puedes copiar el enlace manualmente.');
668
+ });
669
+ } else {
670
+ alert('La funci贸n de compartir no est谩 disponible en tu navegador. Copia el enlace manualmente.');
671
+ }
672
+ }
673
+ </script>
674
+ </body>
675
+ </html>