Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>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"> | |
| <style> | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%); | |
| } | |
| .wine-card { | |
| transition | |
| : all 0.3s ease; | |
| } | |
| .wine-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.2); | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen gradient-bg text-white font-sans"> | |
| <div class="container mx-auto px-4 py-12 max-w-4xl"> | |
| <header class="text-center mb-12 fade-in"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Encuentra Tu Vino Ideal</h1> | |
| <p class="text-xl opacity-90">Responda nuestras preguntas y descubra el vino perfecto para usted</p> | |
| </header> | |
| <div id="app" class="bg-white bg-opacity-10 backdrop-blur-sm rounded-xl shadow-xl overflow-hidden fade-in"> | |
| <!-- Progress Bar --> | |
| <div class="h-2 bg-white bg-opacity-20"> | |
| <div id="progressBar" class="h-full bg-yellow-400 progress-bar" style="width: 0%"></div> | |
| </div> | |
| <!-- Question Container --> | |
| <div id="questionContainer" class="p-8"> | |
| <!-- Initial Screen --> | |
| <div id="welcomeScreen" class="text-center"> | |
| <div class="mb-8"> | |
| <i class="fas fa-wine-glass-alt text-6xl text-yellow-400 mb-4"></i> | |
| <h2 class="text-3xl font-bold mb-4">Bienvenido al Sommelier Digital</h2> | |
| <p class="text-lg mb-6">Vamos a hacerle algunas preguntas para encontrar el vino perfecto que combine con su personalidad, signo zodiacal y estado de ánimo.</p> | |
| </div> | |
| <button onclick="startQuestionnaire()" class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-8 rounded-full text-lg transition-all transform hover:scale-105"> | |
| Comenzar <i class="fas fa-chevron-right ml-2"></i> | |
| </button> | |
| </div> | |
| <!-- Questions will be inserted here dynamically --> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Data | |
| const zodiacData = { | |
| aries: { | |
| dates: "Mar 21 - Apr 19", | |
| traits: "Energético, apasionado, valiente", | |
| foods: ["Carnes rojas", "Especias fuertes", "Ajo", "Cebolla", "Quesos fuertes"], | |
| winePairings: ["Malbec", "Syrah", "Zinfandel"] | |
| }, | |
| tauro: { | |
| dates: "Apr 20 - May 20", | |
| traits: "Sensual, terrenal, persistente", | |
| foods: ["Quesos cremosos", "Trufas", "Chocolate", "Carnes de caza", "Raíces"], | |
| winePairings: ["Merlot", "Rioja", "Châteauneuf-du-Pape"] | |
| }, | |
| 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"] | |
| }, | |
| cancer: { | |
| dates: "Jun 21 - Jul 22", | |
| traits: "Emocional, intuitivo, protector", | |
| foods: ["Comida casera", "Sopas", "Mariscos", "Productos lácteos"], | |
| winePairings: ["Chardonnay", "Viognier", "Pinot Noir"] | |
| }, | |
| leo: { | |
| dates: "Jul 23 - Aug 22", | |
| traits: "Dramático, generoso, orgulloso", | |
| foods: ["Platos ostentosos", "Carnes premium", "Comida gourmet", "Frutas exóticas"], | |
| winePairings: ["Cabernet Sauvignon", "Barolo", "Champagne"] | |
| }, | |
| virgo: { | |
| dates: "Aug 23 - Sep 22", | |
| traits: "Detallista, práctico, perfeccionista", | |
| foods: ["Comida orgánica", "Vegetales", "Granos enteros", "Platos balanceados"], | |
| winePairings: ["Riesling", "Gewürztraminer", "Sancerre"] | |
| }, | |
| libra: { | |
| dates: "Sep 23 - Oct 22", | |
| traits: "Armonioso, social, equilibrado", | |
| foods: ["Comida estéticamente presentada", "Postres", "Platos equilibrados"], | |
| winePairings: ["Prosecco", "Pinot Noir", "Champagne rosado"] | |
| }, | |
| 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"] | |
| }, | |
| sagitario: { | |
| dates: "Nov 22 - Dec 21", | |
| traits: "Aventurero, optimista, filosófico", | |
| foods: ["Comida internacional", "Platos exóticos", "Carnes a la parrilla"], | |
| winePairings: ["Tempranillo", "Carmenere", "Chianti"] | |
| }, | |
| capricornio: { | |
| dates: "Dec 22 - Jan 19", | |
| traits: "Disciplinado, tradicional, ambicioso", | |
| foods: ["Carnes maduradas", "Platos clásicos", "Raíces", "Quesos añejados"], | |
| winePairings: ["Brunello di Montalcino", "Bordeaux", "Rioja Reserva"] | |
| }, | |
| acuario: { | |
| dates: "Jan 20 - Feb 18", | |
| traits: "Innovador, excéntrico, humanitario", | |
| foods: ["Comida futurista", "Fusiones", "Platos veganos innovadores"], | |
| winePairings: ["Garnacha", "Verdejo", "Vinos naturales"] | |
| }, | |
| 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"] | |
| } | |
| }; | |
| 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", "Jamon"], | |
| 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" | |
| }, | |
| { | |
| question: "¿Cuál es su nombre?", | |
| type: "text", | |
| key: "name" | |
| }, | |
| { | |
| question: "¿En qué contexto se encuentra actualmente?", | |
| type: "select", | |
| options: ["En la playa", "En la montaña", "En la ciudad", "En el campo", "En el extranjero"], | |
| key: "location" | |
| }, | |
| { | |
| question: "¿Cómo se siente hoy?", | |
| type: "select", | |
| options: ["Feliz", "Relajado", "Estresado", "Romántico", "Nostálgico", "Energético", "Creativo"], | |
| key: "mood" | |
| }, | |
| { | |
| question: "¿Qué tipo de experiencia busca con el vino?", | |
| type: "select", | |
| options: ["Algo familiar y confortable", "Una aventura nueva", "Un equilibrio entre ambos"], | |
| key: "preference" | |
| } | |
| ]; | |
| // 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"> | |
| <h2 class="text-2xl font-bold mb-6">${question.question}</h2> | |
| <div class="mb-8"> | |
| `; | |
| if (question.type === "date") { | |
| html += ` | |
| <input type="date" id="answerInput" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 text-white focus:outline-none focus:ring-2 focus:ring-yellow-400"> | |
| `; | |
| } else if (question.type === "text") { | |
| html += ` | |
| <input type="text" id="answerInput" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 text-white focus:outline-none focus:ring-2 focus:ring-yellow-400" placeholder="Escriba su nombre"> | |
| `; | |
| } else if (question.type === "select") { | |
| question.options.forEach(option => { | |
| html += ` | |
| <button onclick="selectOption('${option}')" class="w-full mb-3 px-6 py-3 rounded-lg bg-white bg-opacity-10 hover:bg-opacity-20 border border-white border-opacity-20 text-left transition-all"> | |
| ${option} | |
| </button> | |
| `; | |
| }); | |
| } | |
| html += ` | |
| </div> | |
| <div class="flex justify-between"> | |
| `; | |
| if (index > 0) { | |
| html += ` | |
| <button onclick="previousQuestion()" class="bg-white bg-opacity-10 hover:bg-opacity-20 text-white font-bold py-2 px-6 rounded-lg"> | |
| <i class="fas fa-chevron-left mr-2"></i> Anterior | |
| </button> | |
| `; | |
| } else { | |
| html += `<div></div>`; | |
| } | |
| if (question.type === "select") { | |
| html += `<div></div>`; // Placeholder for center | |
| } else { | |
| html += ` | |
| <button onclick="nextQuestion()" class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-2 px-6 rounded-lg"> | |
| Siguiente <i class="fas fa-chevron-right ml-2"></i> | |
| </button> | |
| `; | |
| } | |
| html += ` | |
| </div> | |
| </div> | |
| `; | |
| container.innerHTML = html; | |
| } | |
| function selectOption(option) { | |
| const question = questions[currentQuestion]; | |
| answers[question.key] = option; | |
| nextQuestion(); | |
| } | |
| function previousQuestion() { | |
| currentQuestion--; | |
| showQuestion(currentQuestion); | |
| } | |
| function nextQuestion() { | |
| const question = questions[currentQuestion]; | |
| if (question.type !== "select") { | |
| const input = document.getElementById('answerInput'); | |
| if (!input.value) { | |
| alert("Por favor complete la pregunta"); | |
| return; | |
| } | |
| answers[question.key] = input.value; | |
| } | |
| currentQuestion++; | |
| if (currentQuestion < questions.length) { | |
| showQuestion(currentQuestion); | |
| } else { | |
| showResults(); | |
| } | |
| } | |
| 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; | |
| } | |
| } | |
| // Display results | |
| const container = document.getElementById('questionContainer'); | |
| container.innerHTML = ` | |
| <div class="fade-in text-center"> | |
| <div class="mb-8"> | |
| <i class="fas fa-star text-5xl text-yellow-400 mb-4"></i> | |
| <h2 class="text-3xl font-bold mb-4">¡Hemos encontrado tu vino ideal!</h2> | |
| <p class="text-lg mb-2">Basado en tu signo (${zodiacSign}), nombre, ubicación y estado de ánimo, te recomendamos:</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"> | |
| <div class="text-yellow-400 text-4xl mb-3">${index + 1}</div> | |
| <h3 class="text-xl font-bold mb-2">${wine}</h3> | |
| <p class="text-sm opacity-80">Perfecto para combinar con:</p> | |
| <ul class="text-sm mt-1"> | |
| ${zodiacInfo.foods.slice(0, 2).map(food => `<li>• ${food}</li>`).join('')} | |
| ${nameFoods.slice(0, 2).map(food => `<li>• ${food}</li>`).join('')} | |
| </ul> | |
| </div> | |
| `).join('')} | |
| </div> | |
| <div class="bg-white bg-opacity-10 rounded-xl p-6 mb-8 text-left"> | |
| <h3 class="text-xl font-bold mb-4">Detalles de tu perfil:</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="font-semibold text-yellow-400 mb-2"><i class="fas fa-sun mr-2"></i> Signo Zodiacal: ${zodiacSign.charAt(0).toUpperCase() + zodiacSign.slice(1)}</h4> | |
| <p class="text-sm">${zodiacInfo.traits}</p> | |
| <p class="text-sm mt-2"><span class="font-semibold">Alimentos afines:</span> ${zodiacInfo.foods.join(", ")}</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-yellow-400 mb-2"><i class="fas fa-user mr-2"></i> Nombre: ${answers.name}</h4> | |
| <p class="text-sm"><span class="font-semibold">Alimentos asociados:</span> ${nameFoods.join(", ")}</p> | |
| <h4 class="font-semibold text-yellow-400 mt-4 mb-2"><i class="fas fa-map-marker-alt mr-2"></i> Contexto: ${answers.location}</h4> | |
| <h4 class="font-semibold text-yellow-400 mt-4 mb-2"><i class="fas fa-smile mr-2"></i> Estado de ánimo: ${answers.mood}</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <button onclick="startQuestionnaire()" class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-8 rounded-full text-lg transition-all transform hover:scale-105"> | |
| <i class="fas fa-redo mr-2"></i> Volver a empezar | |
| </button> | |
| </div> | |
| `; | |
| // Update progress bar to 100% | |
| document.getElementById('progressBar').style.width = '100%'; | |
| } | |
| </script> | |
| </body> | |
| </html> |