Spaces:

goodemagod
/

vinoidealok

Running

App Files Files Community

goodemagod commited on May 7

Commit

597123b

verified ·

1 Parent(s): e49e0e9

Update index.html

Browse files

Files changed (1) hide show

index.html +438 -19

index.html CHANGED Viewed

@@ -1,19 +1,438 @@
-<!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>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>