Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sommelier Digital - Encuentra Tu Vino Ideal</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"> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| .title-font { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.6s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #3a1c71 0%, #d76d77 50%, #ffaf7b 100%); | |
| background-attachment: fixed; | |
| } | |
| .wine-card { | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .wine-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 15px 30px rgba(0,0,0,0.25); | |
| } | |
| .wine-card::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 4px; | |
| background: linear-gradient(90deg, #d76d77 0%, #ffaf7b 100%); | |
| } | |
| .progress-bar { | |
| transition: width 0.7s cubic-bezier(0.65, 0, 0.35, 1); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(90deg, #d76d77 0%, #ffaf7b 100%); | |
| box-shadow: 0 4px 15px rgba(215, 109, 119, 0.4); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(215, 109, 119, 0.6); | |
| } | |
| .option-btn { | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .option-btn:hover { | |
| transform: translateX(5px); | |
| } | |
| .option-btn::before { | |
| content: ''; | |
| position: absolute; | |
| left: -10px; | |
| top: 0; | |
| bottom: 0; | |
| width: 4px; | |
| background: #d76d77; | |
| opacity: 0; | |
| transition: all 0.3s ease; | |
| } | |
| .option-btn:hover::before { | |
| left: 0; | |
| opacity: 1; | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .bounce-in { | |
| animation: bounceIn 0.6s ease-out; | |
| } | |
| @keyframes bounceIn { | |
| 0% { transform: scale(0.9); opacity: 0; } | |
| 50% { transform: scale(1.05); opacity: 1; } | |
| 100% { transform: scale(1); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(215, 109, 119, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(215, 109, 119, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(215, 109, 119, 0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen gradient-bg text-white"> | |
| <div class="container mx-auto px-4 py-8 md:py-12 max-w-4xl"> | |
| <header class="text-center mb-8 md:mb-12 fade-in"> | |
| <div class="floating inline-block mb-4"> | |
| <i class="fas fa-wine-glass-alt text-5xl text-white opacity-90"></i> | |
| </div> | |
| <h1 class="title-font text-4xl md:text-5xl font-bold mb-3">Sommelier Digital</h1> | |
| <p class="text-xl opacity-90 max-w-2xl mx-auto">Descubre el vino perfecto para tu personalidad y ocasi贸n</p> | |
| </header> | |
| <div id="app" class="bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl shadow-2xl overflow-hidden fade-in"> | |
| <!-- Progress Bar --> | |
| <div class="h-2.5 bg-white bg-opacity-20"> | |
| <div id="progressBar" class="h-full bg-gradient-to-r from-pink-500 to-orange-400 progress-bar" style="width: 0%"></div> | |
| </div> | |
| <!-- Question Container --> | |
| <div id="questionContainer" class="p-6 md:p-8"> | |
| <!-- Initial Screen --> | |
| <div id="welcomeScreen" class="text-center py-6"> | |
| <div class="mb-8"> | |
| <div class="floating inline-block mb-6"> | |
| <i class="fas fa-wine-bottle text-7xl text-white"></i> | |
| </div> | |
| <h2 class="title-font text-3xl md:text-4xl font-bold mb-4">Encuentra Tu Vino Ideal</h2> | |
| <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> | |
| </div> | |
| <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"> | |
| Comenzar <i class="fas fa-chevron-right ml-2"></i> | |
| </button> | |
| </div> | |
| <!-- Questions will be inserted here dynamically --> | |
| </div> | |
| </div> | |
| <footer class="text-center mt-12 text-sm text-white text-opacity-70"> | |
| <p>漏 2023 Sommelier Digital | Todos los derechos reservados</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Data | |
| const zodiacData = { | |
| aries: { | |
| dates: "Mar 21 - Abr 19", | |
| traits: "Energ茅tico, apasionado, valiente", | |
| foods: ["Carnes rojas", "Especias fuertes", "Ajo", "Cebolla", "Quesos fuertes"], | |
| winePairings: ["Malbec", "Syrah", "Zinfandel"], | |
| icon: "fa-fire" | |
| }, | |
| tauro: { | |
| dates: "Abr 20 - May 20", | |
| traits: "Sensual, terrenal, persistente", | |
| foods: ["Quesos cremosos", "Trufas", "Chocolate", "Carnes de caza", "Ra铆ces"], | |
| winePairings: ["Merlot", "Rioja", "Ch芒teauneuf-du-Pape"], | |
| icon: "fa-leaf" | |
| }, | |
| geminis: { | |
| dates: "May 21 - Jun 20", | |
| traits: "Vers谩til, comunicativo, curioso", | |
| foods: ["Ensaladas variadas", "Frutas tropicales", "Mariscos ligeros", "Comida 茅tnica"], | |
| winePairings: ["Sauvignon Blanc", "Pinot Grigio", "Rosado"], | |
| icon: "fa-comments" | |
| }, | |
| cancer: { | |
| dates: "Jun 21 - Jul 22", | |
| traits: "Emocional, intuitivo, protector", | |
| foods: ["Comida casera", "Sopas", "Mariscos", "Productos l谩cteos"], | |
| winePairings: ["Chardonnay", "Viognier", "Pinot Noir"], | |
| icon: "fa-moon" | |
| }, | |
| leo: { | |
| dates: "Jul 23 - Ago 22", | |
| traits: "Dram谩tico, generoso, orgulloso", | |
| foods: ["Platos ostentosos", "Carnes premium", "Comida gourmet", "Frutas ex贸ticas"], | |
| winePairings: ["Cabernet Sauvignon", "Barolo", "Champagne"], | |
| icon: "fa-crown" | |
| }, | |
| virgo: { | |
| dates: "Ago 23 - Sep 22", | |
| traits: "Detallista, pr谩ctico, perfeccionista", | |
| foods: ["Comida org谩nica", "Vegetales", "Granos enteros", "Platos balanceados"], | |
| winePairings: ["Riesling", "Gew眉rztraminer", "Sancerre"], | |
| icon: "fa-star" | |
| }, | |
| libra: { | |
| dates: "Sep 23 - Oct 22", | |
| traits: "Armonioso, social, equilibrado", | |
| foods: ["Comida est茅ticamente presentada", "Postres", "Platos equilibrados"], | |
| winePairings: ["Prosecco", "Pinot Noir", "Champagne rosado"], | |
| icon: "fa-balance-scale" | |
| }, | |
| escorpio: { | |
| dates: "Oct 23 - Nov 21", | |
| traits: "Intenso, misterioso, apasionado", | |
| foods: ["Comida picante", "Mariscos oscuros", "Quesos azules", "Chocolate amargo"], | |
| winePairings: ["Shiraz", "Carm茅n猫re", "Amarone"], | |
| icon: "fa-scorpion" | |
| }, | |
| sagitario: { | |
| dates: "Nov 22 - Dic 21", | |
| traits: "Aventurero, optimista, filos贸fico", | |
| foods: ["Comida internacional", "Platos ex贸ticos", "Carnes a la parrilla"], | |
| winePairings: ["Tempranillo", "Carmenere", "Chianti"], | |
| icon: "fa-arrow-right" | |
| }, | |
| capricornio: { | |
| dates: "Dic 22 - Ene 19", | |
| traits: "Disciplinado, tradicional, ambicioso", | |
| foods: ["Carnes maduradas", "Platos cl谩sicos", "Ra铆ces", "Quesos a帽ejados"], | |
| winePairings: ["Brunello di Montalcino", "Bordeaux", "Rioja Reserva"], | |
| icon: "fa-mountain" | |
| }, | |
| acuario: { | |
| dates: "Ene 20 - Feb 18", | |
| traits: "Innovador, exc茅ntrico, humanitario", | |
| foods: ["Comida futurista", "Fusiones", "Platos veganos innovadores"], | |
| winePairings: ["Garnacha", "Verdejo", "Vinos naturales"], | |
| icon: "fa-atom" | |
| }, | |
| piscis: { | |
| dates: "Feb 19 - Mar 20", | |
| traits: "Sensible, art铆stico, espiritual", | |
| foods: ["Pescados", "Algas", "Comida con presentaci贸n art铆stica"], | |
| winePairings: ["Moscato", "Pinot Noir", "Vinos biodin谩micos"], | |
| icon: "fa-fish" | |
| } | |
| }; | |
| const nameFoodData = { | |
| a: ["Aguacate", "Alcachofa", "Almendras"], | |
| b: ["Berenjena", "Br贸coli", "Bayas"], | |
| c: ["C铆tricos", "Coliflor", "Cangrejo"], | |
| d: ["D谩tiles", "Durazno", "Dorada"], | |
| e: ["Esp谩rragos", "Espinacas", "Endibias"], | |
| f: ["Fresas", "Frambuesas", "Frijoles"], | |
| g: ["Granada", "Garbanzos", "Gambas"], | |
| h: ["Higos", "Huevos", "Hongos"], | |
| i: ["脥nguere", "Iceberg (lechuga)", "Iberico (jam贸n)"], | |
| j: ["Jengibre", "Jud铆as", "Jam贸n"], | |
| k: ["Kiwi", "Kale", "Kumquat"], | |
| l: ["Lim贸n", "Lentejas", "Langosta"], | |
| m: ["Manzana", "Ma铆z", "Merluza"], | |
| n: ["Naranja", "Nueces", "Navajas"], | |
| o: ["Oliva", "Ostras", "Okra"], | |
| p: ["Pi帽a", "Pimiento", "Pulpo"], | |
| q: ["Queso", "Quinoa", "Quimbomb贸"], | |
| r: ["Remolacha", "R煤cula", "Rape"], | |
| s: ["Sand铆a", "Salmon", "Semillas"], | |
| t: ["Tomate", "Tofu", "Trucha"], | |
| u: ["Uva", "Udon", "Umeboshi"], | |
| v: ["Vainilla", "Vieiras", "Verduras"], | |
| w: ["Wasabi", "Wakame", "Wonton"], | |
| x: ["Xoconostle", "Xiaolongbao", "Xoi"], | |
| y: ["Yogur", "Yuca", "Yakitori"], | |
| z: ["Zanahoria", "Zapallo", "Zarzamora"] | |
| }; | |
| const moodData = { | |
| feliz: ["Champagne", "Prosecco", "Moscato"], | |
| relajado: ["Pinot Noir", "Chardonnay", "Viognier"], | |
| estresado: ["Merlot", "Rioja", "Beaujolais"], | |
| romantico: ["Champagne rosado", "Pinot Noir", "Malbec"], | |
| nostalgico: ["Vinos a帽ejos", "Sherry", "Madeira"], | |
| energico: ["Sauvignon Blanc", "Albari帽o", "Garnacha"], | |
| creativo: ["Vinos naturales", "Vinos naranjas", "Vinos biodin谩micos"] | |
| }; | |
| const locationData = { | |
| playa: ["Vinos blancos frescos", "Rosados", "Albari帽o"], | |
| montana: ["Vinos tintos robustos", "Syrah", "Cabernet Sauvignon"], | |
| ciudad: ["Vinos elegantes", "Champagne", "Pinot Noir"], | |
| campo: ["Vinos org谩nicos", "Vinos locales", "Vinos artesanales"], | |
| extranjero: ["Vinos de la regi贸n", "Vinos internacionales", "Vinos de importaci贸n"] | |
| }; | |
| // State | |
| let currentQuestion = 0; | |
| const answers = {}; | |
| const questions = [ | |
| { | |
| question: "驴Cu谩l es su fecha de nacimiento?", | |
| type: "date", | |
| key: "birthdate", | |
| icon: "fa-calendar-day" | |
| }, | |
| { | |
| question: "驴C贸mo se llama?", | |
| type: "text", | |
| key: "name", | |
| icon: "fa-signature", | |
| placeholder: "Escriba su nombre completo" | |
| }, | |
| { | |
| question: "驴D贸nde se encuentra actualmente?", | |
| type: "select", | |
| options: ["En la playa", "En la monta帽a", "En la ciudad", "En el campo", "En el extranjero"], | |
| key: "location", | |
| icon: "fa-map-marker-alt" | |
| }, | |
| { | |
| question: "驴C贸mo se siente hoy?", | |
| type: "select", | |
| options: ["Feliz", "Relajado", "Estresado", "Rom谩ntico", "Nost谩lgico", "Energ茅tico", "Creativo"], | |
| key: "mood", | |
| icon: "fa-smile" | |
| }, | |
| { | |
| question: "驴Qu茅 tipo de experiencia vin铆cola prefiere?", | |
| type: "select", | |
| options: ["Algo familiar y confortable", "Una aventura nueva", "Un equilibrio entre ambos"], | |
| key: "preference", | |
| icon: "fa-star" | |
| } | |
| ]; | |
| // Functions | |
| function startQuestionnaire() { | |
| currentQuestion = 0; | |
| document.getElementById('welcomeScreen').style.display = 'none'; | |
| showQuestion(currentQuestion); | |
| } | |
| function showQuestion(index) { | |
| const question = questions[index]; | |
| const container = document.getElementById('questionContainer'); | |
| // Update progress bar | |
| const progress = ((index + 1) / questions.length) * 100; | |
| document.getElementById('progressBar').style.width = `${progress}%`; | |
| let html = ` | |
| <div class="fade-in"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-white bg-opacity-20 w-12 h-12 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas ${question.icon} text-xl"></i> | |
| </div> | |
| <h2 class="title-font text-2xl md:text-3xl font-bold">${question.question}</h2> | |
| </div> | |
| <div class="mb-8"> | |
| `; | |
| if (question.type === "date") { | |
| html += ` | |
| <div class="relative"> | |
| <input type="date" id="answerInput" | |
| 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"> | |
| <i class="fas fa-calendar-alt absolute right-4 top-4 text-white opacity-70"></i> | |
| </div> | |
| `; | |
| } else if (question.type === "text") { | |
| html += ` | |
| <div class="relative"> | |
| <input type="text" id="answerInput" | |
| 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" | |
| placeholder="${question.placeholder}"> | |
| <i class="fas fa-user-edit absolute right-4 top-4 text-white opacity-70"></i> | |
| </div> | |
| `; | |
| } else if (question.type === "select") { | |
| question.options.forEach((option, i) => { | |
| html += ` | |
| <button onclick="selectOption('${option}')" | |
| 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"> | |
| <span class="bg-white bg-opacity-20 w-8 h-8 rounded-full flex items-center justify-center mr-4">${i+1}</span> | |
| ${option} | |
| </button> | |
| `; | |
| }); | |
| } | |
| html += ` | |
| </div> | |
| <div class="flex ${index > 0 ? 'justify-between' : 'justify-end'}"> | |
| `; | |
| if (index > 0) { | |
| html += ` | |
| <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"> | |
| <i class="fas fa-chevron-left mr-2"></i> Anterior | |
| </button> | |
| `; | |
| } | |
| if (question.type === "select") { | |
| html += `<div></div>`; // Placeholder for center | |
| } else { | |
| html += ` | |
| <button onclick="nextQuestion()" class="btn-primary text-white font-bold py-3 px-8 rounded-full text-lg transition-all transform hover:scale-105"> | |
| Siguiente <i class="fas fa-chevron-right ml-2"></i> | |
| </button> | |
| `; | |
| } | |
| html += ` | |
| </div> | |
| </div> | |
| `; | |
| container.innerHTML = html; | |
| // Focus on input if present | |
| const input = document.getElementById('answerInput'); | |
| if (input) input.focus(); | |
| } | |
| function selectOption(option) { | |
| const question = questions[currentQuestion]; | |
| answers[question.key] = option; | |
| // Add visual feedback | |
| const buttons = document.querySelectorAll('#questionContainer button'); | |
| buttons.forEach(btn => { | |
| if (btn.textContent.includes(option)) { | |
| btn.classList.add('bg-pink-500', 'bg-opacity-30', 'border-pink-400'); | |
| btn.classList.remove('bg-opacity-10', 'border-opacity-20'); | |
| } else { | |
| btn.classList.remove('bg-pink-500', 'bg-opacity-30', 'border-pink-400'); | |
| btn.classList.add('bg-opacity-10', 'border-opacity-20'); | |
| } | |
| }); | |
| // Proceed after a small delay for visual feedback | |
| setTimeout(nextQuestion, 400); | |
| } | |
| function previousQuestion() { | |
| currentQuestion--; | |
| showQuestion(currentQuestion); | |
| } | |
| function nextQuestion() { | |
| const question = questions[currentQuestion]; | |
| if (question.type !== "select") { | |
| const input = document.getElementById('answerInput'); | |
| if (!input.value) { | |
| showError("Por favor complete la pregunta"); | |
| return; | |
| } | |
| answers[question.key] = input.value; | |
| } | |
| currentQuestion++; | |
| if (currentQuestion < questions.length) { | |
| showQuestion(currentQuestion); | |
| } else { | |
| showResults(); | |
| } | |
| } | |
| function showError(message) { | |
| const errorEl = document.createElement('div'); | |
| errorEl.className = 'bg-red-500 text-white px-4 py-2 rounded-lg mb-4 text-center bounce-in'; | |
| errorEl.innerHTML = `<i class="fas fa-exclamation-circle mr-2"></i> ${message}`; | |
| const container = document.getElementById('questionContainer'); | |
| const existingError = container.querySelector('.bg-red-500'); | |
| if (existingError) existingError.remove(); | |
| const firstChild = container.firstChild; | |
| container.insertBefore(errorEl, firstChild); | |
| setTimeout(() => { | |
| errorEl.classList.remove('bounce-in'); | |
| errorEl.classList.add('fade-out'); | |
| setTimeout(() => errorEl.remove(), 500); | |
| }, 3000); | |
| } | |
| function getZodiacSign(birthdate) { | |
| const date = new Date(birthdate); | |
| const month = date.getMonth() + 1; | |
| const day = date.getDate(); | |
| if ((month === 3 && day >= 21) || (month === 4 && day <= 19)) return "aries"; | |
| if ((month === 4 && day >= 20) || (month === 5 && day <= 20)) return "tauro"; | |
| if ((month === 5 && day >= 21) || (month === 6 && day <= 20)) return "geminis"; | |
| if ((month === 6 && day >= 21) || (month === 7 && day <= 22)) return "cancer"; | |
| if ((month === 7 && day >= 23) || (month === 8 && day <= 22)) return "leo"; | |
| if ((month === 8 && day >= 23) || (month === 9 && day <= 22)) return "virgo"; | |
| if ((month === 9 && day >= 23) || (month === 10 && day <= 22)) return "libra"; | |
| if ((month === 10 && day >= 23) || (month === 11 && day <= 21)) return "escorpio"; | |
| if ((month === 11 && day >= 22) || (month === 12 && day <= 21)) return "sagitario"; | |
| if ((month === 12 && day >= 22) || (month === 1 && day <= 19)) return "capricornio"; | |
| if ((month === 1 && day >= 20) || (month === 2 && day <= 18)) return "acuario"; | |
| return "piscis"; | |
| } | |
| function getNameFoods(name) { | |
| const firstLetter = name.charAt(0).toLowerCase(); | |
| return nameFoodData[firstLetter] || ["Alimentos variados"]; | |
| } | |
| function showResults() { | |
| // Process answers | |
| const zodiacSign = getZodiacSign(answers.birthdate); | |
| const zodiacInfo = zodiacData[zodiacSign]; | |
| const nameFoods = getNameFoods(answers.name); | |
| const moodWines = moodData[answers.mood.toLowerCase()] || []; | |
| const locationWines = locationData[answers.location.toLowerCase().replace("en el ", "").replace("en la ", "").replace("en ", "")] || []; | |
| // Find common wines | |
| const allWines = [ | |
| ...zodiacInfo.winePairings, | |
| ...moodWines, | |
| ...locationWines | |
| ]; | |
| // Count occurrences | |
| const wineCounts = {}; | |
| allWines.forEach(wine => { | |
| wineCounts[wine] = (wineCounts[wine] || 0) + 1; | |
| }); | |
| // Sort by most common | |
| const sortedWines = Object.keys(wineCounts).sort((a, b) => wineCounts[b] - wineCounts[a]); | |
| // Get top 3 unique recommendations | |
| const recommendations = []; | |
| const seen = new Set(); | |
| for (const wine of sortedWines) { | |
| if (!seen.has(wine)) { | |
| recommendations.push(wine); | |
| seen.add(wine); | |
| if (recommendations.length >= 3) break; | |
| } | |
| } | |
| // Format birthdate | |
| const birthdate = new Date(answers.birthdate); | |
| const formattedDate = birthdate.toLocaleDateString('es-ES', { | |
| day: 'numeric', | |
| month: 'long', | |
| year: 'numeric' | |
| }); | |
| // Display results | |
| const container = document.getElementById('questionContainer'); | |
| container.innerHTML = ` | |
| <div class="fade-in"> | |
| <div class="text-center mb-8"> | |
| <div class="floating inline-block mb-4"> | |
| <i class="fas fa-glass-cheers text-6xl text-white"></i> | |
| </div> | |
| <h2 class="title-font text-3xl md:text-4xl font-bold mb-3">隆Hemos encontrado tu vino ideal!</h2> | |
| <p class="text-lg opacity-90 max-w-2xl mx-auto">Basado en tu perfil 煤nico, te recomendamos estas excelentes opciones:</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| ${recommendations.map((wine, index) => ` | |
| <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"> | |
| <div class="flex items-center mb-4"> | |
| <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"> | |
| ${index + 1} | |
| </div> | |
| <h3 class="title-font text-xl font-bold">${wine}</h3> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-sm opacity-80 mb-2">Perfecto para combinar con:</p> | |
| <ul class="text-sm space-y-1"> | |
| ${[...zodiacInfo.foods.slice(0, 2), ...nameFoods.slice(0, 2)].map(food => ` | |
| <li class="flex items-center"> | |
| <i class="fas fa-utensils text-xs mr-2 opacity-60"></i> ${food} | |
| </li> | |
| `).join('')} | |
| </ul> | |
| </div> | |
| <div class="text-xs opacity-60 mt-4 pt-3 border-t border-white border-opacity-10"> | |
| <i class="fas fa-info-circle mr-1"></i> Recomendaci贸n ${['primaria', 'secundaria', 'terciaria'][index]} | |
| </div> | |
| </div> | |
| `).join('')} | |
| </div> | |
| <div class="bg-white bg-opacity-10 rounded-xl p-6 md:p-8 mb-8"> | |
| <h3 class="title-font text-2xl font-bold mb-6 text-center">Tu perfil vin铆cola</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Zodiac Section --> | |
| <div class="bg-white bg-opacity-5 rounded-lg p-5"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-white bg-opacity-20 w-10 h-10 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas ${zodiacInfo.icon}"></i> | |
| </div> | |
| <div> | |
| <h4 class="title-font font-bold text-pink-300">Signo Zodiacal</h4> | |
| <h3 class="font-bold">${zodiacSign.charAt(0).toUpperCase() + zodiacSign.slice(1)}</h3> | |
| </div> | |
| </div> | |
| <div class="text-sm space-y-3"> | |
| <p><span class="font-semibold">Fechas:</span> ${zodiacInfo.dates}</p> | |
| <p><span class="font-semibold">Rasgos:</span> ${zodiacInfo.traits}</p> | |
| <p><span class="font-semibold">Alimentos afines:</span> ${zodiacInfo.foods.join(", ")}</p> | |
| <p><span class="font-semibold">Nacimiento:</span> ${formattedDate}</p> | |
| </div> | |
| </div> | |
| <!-- Personal Info Section --> | |
| <div class="space-y-5"> | |
| <div class="bg-white bg-opacity-5 rounded-lg p-5"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-white bg-opacity-20 w-10 h-10 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div> | |
| <h4 class="title-font font-bold text-orange-300">Informaci贸n Personal</h4> | |
| <h3 class="font-bold">${answers.name}</h3> | |
| </div> | |
| </div> | |
| <div class="text-sm"> | |
| <p><span class="font-semibold">Alimentos asociados:</span> ${nameFoods.join(", ")}</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-white bg-opacity-5 rounded-lg p-4"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-map-marker-alt text-orange-300 mr-2"></i> | |
| <h4 class="font-semibold text-sm">Contexto</h4> | |
| </div> | |
| <p class="text-sm">${answers.location}</p> | |
| </div> | |
| <div class="bg-white bg-opacity-5 rounded-lg p-4"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-smile text-pink-300 mr-2"></i> | |
| <h4 class="font-semibold text-sm">Estado de 谩nimo</h4> | |
| </div> | |
| <p class="text-sm">${answers.mood}</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <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"> | |
| <i class="fas fa-redo mr-2"></i> Volver a empezar | |
| </button> | |
| <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"> | |
| <i class="fas fa-share-alt mr-2"></i> Compartir | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| // Update progress bar to 100% | |
| document.getElementById('progressBar').style.width = '100%'; | |
| } | |
| function shareResults() { | |
| if (navigator.share) { | |
| navigator.share({ | |
| title: 'Mi vino ideal', | |
| text: '隆Descubre tu vino ideal con este sommelier digital!', | |
| url: window.location.href | |
| }).catch(err => { | |
| console.log('Error al compartir:', err); | |
| alert('No se pudo compartir, pero puedes copiar el enlace manualmente.'); | |
| }); | |
| } else { | |
| alert('La funci贸n de compartir no est谩 disponible en tu navegador. Copia el enlace manualmente.'); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |