Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Horóscopo Mensual</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Poppins:wght@300;400;600&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(135deg, #1a052e 0%, #0f0118 100%); | |
| color: #e2d8f0; | |
| min-height: 100vh; | |
| } | |
| .title-font { | |
| font-family: 'Lora', serif; | |
| } | |
| .zodiac-card { | |
| background: rgba(46, 16, 75, 0.5); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(149, 76, 233, 0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .zodiac-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(149, 76, 233, 0.3); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, #7e3af2 0%, #5a1db4 100%); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(149, 76, 233, 0.4); | |
| } | |
| .zodiac-icon { | |
| font-size: 2rem; | |
| filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3)); | |
| } | |
| .constellation-bg { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="10" cy="10" r="0.5" fill="white"/><circle cx="30" cy="15" r="0.5" fill="white"/><circle cx="50" cy="5" r="0.5" fill="white"/><circle cx="70" cy="20" r="0.5" fill="white"/><circle cx="90" cy="10" r="0.5" fill="white"/><circle cx="15" cy="30" r="0.5" fill="white"/><circle cx="35" cy="40" r="0.5" fill="white"/><circle cx="55" cy="35" r="0.5" fill="white"/><circle cx="75" cy="45" r="0.5" fill="white"/><circle cx="95" cy="50" r="0.5" fill="white"/><circle cx="5" cy="60" r="0.5" fill="white"/><circle cx="25" cy="70" r="0.5" fill="white"/><circle cx="45" cy="65" r="0.5" fill="white"/><circle cx="65" cy="75" r="0.5" fill="white"/><circle cx="85" cy="80" r="0.5" fill="white"/><circle cx="15" cy="90" r="0.5" fill="white"/><circle cx="40" cy="95" r="0.5" fill="white"/><circle cx="60" cy="85" r="0.5" fill="white"/><circle cx="80" cy="90" r="0.5" fill="white"/><circle cx="95" cy="70" r="0.5" fill="white"/></svg>'); | |
| opacity: 0.1; | |
| pointer-events: none; | |
| } | |
| .moon-phase { | |
| position: absolute; | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| right: 20px; | |
| top: 20px; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-out forwards; | |
| } | |
| /* Aumentar tamaño del texto */ | |
| .horoscope-text { | |
| font-size: 1.1rem; | |
| line-height: 1.6; | |
| } | |
| .sign-name { | |
| font-size: 1.3rem; | |
| } | |
| .advice-text { | |
| font-size: 1.05rem; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <div class="constellation-bg"></div> | |
| <div class="container mx-auto px-4 py-8 relative z-10"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="title-font text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-pink-300 mb-4"> | |
| Horóscopo Mensual | |
| </h1> | |
| <p class="text-lg text-purple-200 max-w-2xl mx-auto"> | |
| Descubre predicciones únicas para cada signo zodiacal, basadas en los eventos astrológicos del mes. | |
| </p> | |
| </header> | |
| <!-- Input Form - Moved to results section --> | |
| <div id="input-section" class="max-w-md mx-auto bg-purple-900 bg-opacity-30 rounded-xl p-6 shadow-lg backdrop-blur-sm border border-purple-800 border-opacity-50 mb-12"> | |
| <h2 class="text-xl font-semibold mb-4 text-center text-purple-100">Selecciona un mes y año</h2> | |
| <div class="flex flex-col space-y-4"> | |
| <div> | |
| <label for="month" class="block text-sm font-medium text-purple-200 mb-1">Mes</label> | |
| <select id="month" class="w-full bg-purple-900 bg-opacity-50 border border-purple-700 text-purple-100 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> | |
| <option value="">Selecciona un mes</option> | |
| <option value="Enero">Enero</option> | |
| <option value="Febrero">Febrero</option> | |
| <option value="Marzo">Marzo</option> | |
| <option value="Abril">Abril</option> | |
| <option value="Mayo">Mayo</option> | |
| <option value="Junio">Junio</option> | |
| <option value="Julio">Julio</option> | |
| <option value="Agosto">Agosto</option> | |
| <option value="Septiembre">Septiembre</option> | |
| <option value="Octubre">Octubre</option> | |
| <option value="Noviembre">Noviembre</option> | |
| <option value="Diciembre">Diciembre</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="year" class="block text-sm font-medium text-purple-200 mb-1">Año</label> | |
| <input type="number" id="year" min="2000" max="2050" placeholder="Ej: 2025" class="w-full bg-purple-900 bg-opacity-50 border border-purple-700 text-purple-100 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> | |
| </div> | |
| <button id="generate-btn" class="btn-primary text-white font-medium py-2 px-6 rounded-lg mt-4"> | |
| Generar Horóscopos | |
| </button> | |
| </div> | |
| <div id="error-message" class="text-red-400 text-sm mt-2 hidden"></div> | |
| </div> | |
| <!-- Results Section --> | |
| <div id="results-section" class="hidden"> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- Input section inside results --> | |
| <div class="bg-purple-900 bg-opacity-30 rounded-xl p-6 shadow-lg backdrop-blur-sm border border-purple-800 border-opacity-50 mb-8"> | |
| <h2 class="text-xl font-semibold mb-4 text-center text-purple-100">Generar nuevos horóscopos</h2> | |
| <div class="flex flex-col md:flex-row md:space-x-4 space-y-4 md:space-y-0"> | |
| <div class="flex-1"> | |
| <label for="month-results" class="block text-sm font-medium text-purple-200 mb-1">Mes</label> | |
| <select id="month-results" class="w-full bg-purple-900 bg-opacity-50 border border-purple-700 text-purple-100 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> | |
| <option value="">Selecciona un mes</option> | |
| <option value="Enero">Enero</option> | |
| <option value="Febrero">Febrero</option> | |
| <option value="Marzo">Marzo</option> | |
| <option value="Abril">Abril</option> | |
| <option value="Mayo">Mayo</option> | |
| <option value="Junio">Junio</option> | |
| <option value="Julio">Julio</option> | |
| <option value="Agosto">Agosto</option> | |
| <option value="Septiembre">Septiembre</option> | |
| <option value="Octubre">Octubre</option> | |
| <option value="Noviembre">Noviembre</option> | |
| <option value="Diciembre">Diciembre</option> | |
| </select> | |
| </div> | |
| <div class="flex-1"> | |
| <label for="year-results" class="block text-sm font-medium text-purple-200 mb-1">Año</label> | |
| <input type="number" id="year-results" min="2000" max="2050" placeholder="Ej: 2025" class="w-full bg-purple-900 bg-opacity-50 border border-purple-700 text-purple-100 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> | |
| </div> | |
| <div class="flex items-end"> | |
| <button id="regenerate-btn" class="btn-primary text-white font-medium py-2 px-6 rounded-lg w-full"> | |
| <i class="fas fa-sync-alt mr-2"></i> Regenerar | |
| </button> | |
| </div> | |
| </div> | |
| <div id="error-message-results" class="text-red-400 text-sm mt-2 hidden"></div> | |
| </div> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="title-font text-2xl font-bold text-purple-100"> | |
| Horóscopos para <span id="selected-month" class="text-purple-300"></span> <span id="selected-year" class="text-purple-300"></span> | |
| </h2> | |
| <button id="export-btn" class="btn-primary text-white font-medium py-2 px-4 rounded-lg flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Exportar | |
| </button> | |
| </div> | |
| <div id="zodiac-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Zodiac cards will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const generateBtn = document.getElementById('generate-btn'); | |
| const regenerateBtn = document.getElementById('regenerate-btn'); | |
| const exportBtn = document.getElementById('export-btn'); | |
| const monthSelect = document.getElementById('month'); | |
| const yearInput = document.getElementById('year'); | |
| const monthResultsSelect = document.getElementById('month-results'); | |
| const yearResultsInput = document.getElementById('year-results'); | |
| const errorMessage = document.getElementById('error-message'); | |
| const errorMessageResults = document.getElementById('error-message-results'); | |
| const inputSection = document.getElementById('input-section'); | |
| const resultsSection = document.getElementById('results-section'); | |
| const zodiacContainer = document.getElementById('zodiac-container'); | |
| const selectedMonthSpan = document.getElementById('selected-month'); | |
| const selectedYearSpan = document.getElementById('selected-year'); | |
| // Variable para almacenar los horóscopos generados | |
| let currentHoroscopes = []; | |
| // Zodiac data | |
| const zodiacSigns = [ | |
| { name: "Aries", symbol: "♈", dates: "21 marzo - 19 abril", emoji: "🐏" }, | |
| { name: "Tauro", symbol: "♉", dates: "20 abril - 20 mayo", emoji: "🐂" }, | |
| { name: "Géminis", symbol: "♊", dates: "21 mayo - 20 junio", emoji: "👯" }, | |
| { name: "Cáncer", symbol: "♋", dates: "21 junio - 22 julio", emoji: "🦀" }, | |
| { name: "Leo", symbol: "♌", dates: "23 julio - 22 agosto", emoji: "🦁" }, | |
| { name: "Virgo", symbol: "♍", dates: "23 agosto - 22 septiembre", emoji: "🌾" }, | |
| { name: "Libra", symbol: "♎", dates: "23 septiembre - 22 octubre", emoji: "⚖️" }, | |
| { name: "Escorpio", symbol: "♏", dates: "23 octubre - 21 noviembre", emoji: "🦂" }, | |
| { name: "Sagitario", symbol: "♐", dates: "22 noviembre - 21 diciembre", emoji: "🏹" }, | |
| { name: "Capricornio", symbol: "♑", dates: "22 diciembre - 19 enero", emoji: "🐐" }, | |
| { name: "Acuario", symbol: "♒", dates: "20 enero - 18 febrero", emoji: "🌊" }, | |
| { name: "Piscis", symbol: "♓", dates: "19 febrero - 20 marzo", emoji: "🐟" } | |
| ]; | |
| // Astrological events and themes | |
| const astroEvents = [ | |
| "luna llena", "luna nueva", "Mercurio retrógrado", "Venus en conjunción", | |
| "Marte en tránsito", "Júpiter en cuadratura", "Saturno en oposición", | |
| "eclipse solar", "eclipse lunar", "lluvia de estrellas", "equinoccio", | |
| "solsticio", "Venus en trígono", "Plutón en sextil", "Neptuno en conjunción" | |
| ]; | |
| const themes = [ | |
| "amor", "trabajo", "salud", "creatividad", "finanzas", "espiritualidad", | |
| "familia", "amistades", "carrera", "aprendizaje", "viajes", "crecimiento personal" | |
| ]; | |
| const adviceTypes = { | |
| love: [ | |
| "Expresa tus sentimientos con claridad.", | |
| "Escucha con el corazón abierto.", | |
| "Sorprende con un gesto inesperado.", | |
| "Dedica tiempo de calidad.", | |
| "Sé paciente en las discusiones.", | |
| "Celebra los pequeños momentos.", | |
| "Comparte tus sueños íntimos.", | |
| "Mantén la comunicación fluida." | |
| ], | |
| practical: [ | |
| "Organiza tus prioridades hoy.", | |
| "Toma notas de tus ideas.", | |
| "Haz una lista de metas.", | |
| "Reserva tiempo para descansar.", | |
| "Aprende algo nuevo esta semana.", | |
| "Ordena tu espacio personal.", | |
| "Medita durante 10 minutos.", | |
| "Planifica un pequeño viaje." | |
| ] | |
| }; | |
| const emojis = ["🌕", "🌑", "🌙", "✨", "🌟", "💫", "🔥", "💧", "🌊", "🌪️", "🌈", "⚡", "🌱", "🍃", "🌻", "🌸"]; | |
| // Generate unique horoscope for each sign | |
| function generateHoroscopes(month, year) { | |
| zodiacContainer.innerHTML = ''; | |
| currentHoroscopes = []; | |
| // Generate random astrological events for the month | |
| const monthEvents = generateMonthEvents(month, year); | |
| zodiacSigns.forEach((sign, index) => { | |
| const event = monthEvents[index % monthEvents.length]; | |
| const theme = themes[Math.floor(Math.random() * themes.length)]; | |
| const loveAdvice = adviceTypes.love[Math.floor(Math.random() * adviceTypes.love.length)]; | |
| const practicalAdvice = adviceTypes.practical[Math.floor(Math.random() * adviceTypes.practical.length)]; | |
| const emoji = emojis[Math.floor(Math.random() * emojis.length)]; | |
| // Generate prediction based on sign characteristics | |
| const prediction = generatePrediction(sign, event, theme, month); | |
| // Store horoscope data for export | |
| currentHoroscopes.push({ | |
| sign: `${sign.symbol} ${sign.name} (${sign.dates})`, | |
| prediction: `${prediction} ${emoji}`, | |
| love: `❤️ Amor: ${loveAdvice}`, | |
| advice: `👉 Consejo: ${practicalAdvice}` | |
| }); | |
| // Create card | |
| const card = document.createElement('div'); | |
| card.className = `zodiac-card rounded-xl p-6 fade-in`; | |
| card.style.animationDelay = `${index * 0.1}s`; | |
| card.innerHTML = ` | |
| <div class="flex items-start mb-4"> | |
| <span class="zodiac-icon text-3xl mr-3">${sign.symbol}</span> | |
| <div> | |
| <h3 class="sign-name text-xl font-semibold text-purple-100">${sign.name} (${sign.dates})</h3> | |
| <p class="text-purple-300">${sign.emoji} ${getSeasonEmoji(month)}</p> | |
| </div> | |
| </div> | |
| <p class="mb-4 text-purple-50 horoscope-text">${prediction} ${emoji}</p> | |
| <div class="space-y-2 advice-text"> | |
| <p class="text-pink-300"><span class="font-medium">❤️ Amor:</span> ${loveAdvice}</p> | |
| <p class="text-blue-300"><span class="font-medium">👉 Consejo:</span> ${practicalAdvice}</p> | |
| </div> | |
| <div class="absolute bottom-4 right-4 text-xs text-purple-400 opacity-70">${event}</div> | |
| `; | |
| zodiacContainer.appendChild(card); | |
| }); | |
| } | |
| // Generate month-specific astrological events | |
| function generateMonthEvents(month, year) { | |
| const events = []; | |
| const eventCount = 3 + Math.floor(Math.random() * 4); // 3-6 events per month | |
| for (let i = 0; i < eventCount; i++) { | |
| const baseEvent = astroEvents[Math.floor(Math.random() * astroEvents.length)]; | |
| let day = 1 + Math.floor(Math.random() * 28); | |
| // Special cases for certain events | |
| if (baseEvent.includes("luna llena")) { | |
| day = 5 + Math.floor(Math.random() * 5) * 7; // Around full moon phase | |
| } else if (baseEvent.includes("luna nueva")) { | |
| day = 1 + Math.floor(Math.random() * 5) * 7; // Around new moon phase | |
| } | |
| events.push(`${baseEvent} el ${day} de ${month}`); | |
| } | |
| // Add some generic events that don't have specific dates | |
| events.push(`El sol en ${getNextSign(month)} desde mediados de mes`); | |
| events.push(`Marte en ${getRandomElement(["Aries", "Tauro", "Géminis", "Cáncer"])} todo el mes`); | |
| return events; | |
| } | |
| // Generate prediction text based on sign characteristics | |
| function generatePrediction(sign, event, theme, month) { | |
| const signTraits = { | |
| "Aries": ["energía", "impulsividad", "liderazgo", "acción"], | |
| "Tauro": ["paciencia", "estabilidad", "placer", "persistencia"], | |
| "Géminis": ["comunicación", "curiosidad", "adaptabilidad", "versatilidad"], | |
| "Cáncer": ["emociones", "intuición", "protección", "hogar"], | |
| "Leo": ["creatividad", "generosidad", "orgullo", "expresión"], | |
| "Virgo": ["organización", "detalle", "servicio", "análisis"], | |
| "Libra": ["armonía", "relaciones", "justicia", "diplomacia"], | |
| "Escorpio": ["intensidad", "transformación", "pasión", "misterio"], | |
| "Sagitario": ["aventura", "optimismo", "filosofía", "expansión"], | |
| "Capricornio": ["disciplina", "responsabilidad", "ambición", "estructura"], | |
| "Acuario": ["innovación", "originalidad", "humanitarismo", "independencia"], | |
| "Piscis": ["empatía", "imaginación", "espiritualidad", "sensibilidad"] | |
| }; | |
| const traits = signTraits[sign.name]; | |
| const trait = traits[Math.floor(Math.random() * traits.length)]; | |
| const actions = { | |
| "amor": ["florece", "se profundiza", "se renueva", "requiere atención"], | |
| "trabajo": ["avanza", "se transforma", "requiere enfoque", "ofrece oportunidades"], | |
| "salud": ["mejora", "necesita cuidado", "se equilibra", "se fortalece"], | |
| "creatividad": ["fluye", "se expande", "encuentra inspiración", "se libera"], | |
| "finanzas": ["se estabilizan", "mejoran", "requieren planificación", "ofrecen sorpresas"], | |
| "espiritualidad": ["crece", "se aclara", "se conecta", "se expande"], | |
| "familia": ["se une", "comparte", "apoya", "celebra"], | |
| "amistades": ["se fortalecen", "se renuevan", "ofrecen apoyo", "inspiran"], | |
| "carrera": ["progresa", "cambia", "ofrece desafíos", "se redefine"], | |
| "aprendizaje": ["se acelera", "se profundiza", "se diversifica", "inspira"], | |
| "viajes": ["se planifican", "sorprenden", "enseñan", "transforman"], | |
| "crecimiento personal": ["avanza", "se consolida", "se redescubre", "se celebra"] | |
| }; | |
| const action = actions[theme][Math.floor(Math.random() * actions[theme].length)]; | |
| const connectors = [ | |
| `La ${event} activa tu ${trait}, ${sign.name}.`, | |
| `Durante ${event}, tu ${trait} ${action} en el área de ${theme}.`, | |
| `${event} influye en tu ${trait}, ${sign.name}, especialmente en ${theme}.`, | |
| `Con ${event}, el ${theme} ${action} gracias a tu ${trait}.`, | |
| `${event} resalta tu ${trait} este mes, ${sign.name}, enfócate en ${theme}.` | |
| ]; | |
| const advice = [ | |
| `Confía en tu instinto para tomar decisiones.`, | |
| `Mantén el equilibrio entre acción y reflexión.`, | |
| `Aprovecha esta energía para avanzar en tus metas.`, | |
| `No temas pedir ayuda cuando lo necesites.`, | |
| `Celebra los pequeños logros en el camino.`, | |
| `Escucha las señales que te rodean.` | |
| ]; | |
| return `${connectors[Math.floor(Math.random() * connectors.length)]} ${advice[Math.floor(Math.random() * advice.length)]}`; | |
| } | |
| // Helper functions | |
| function getRandomElement(array) { | |
| return array[Math.floor(Math.random() * array.length)]; | |
| } | |
| function getNextSign(month) { | |
| const months = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]; | |
| const currentIndex = months.indexOf(month); | |
| const nextIndex = (currentIndex + 1) % 12; | |
| return zodiacSigns[nextIndex].name; | |
| } | |
| function getSeasonEmoji(month) { | |
| if (["Diciembre", "Enero", "Febrero"].includes(month)) return "❄️ Invierno"; | |
| if (["Marzo", "Abril", "Mayo"].includes(month)) return "🌱 Primavera"; | |
| if (["Junio", "Julio", "Agosto"].includes(month)) return "☀️ Verano"; | |
| return "🍂 Otoño"; | |
| } | |
| // Export horoscopes to text file | |
| function exportHoroscopes() { | |
| const month = monthResultsSelect.value || monthSelect.value; | |
| const year = yearResultsInput.value || yearInput.value; | |
| if (!currentHoroscopes.length) { | |
| showErrorResults("No hay horóscopos para exportar. Genera horóscopos primero."); | |
| return; | |
| } | |
| let text = `Horóscopo Mensual - ${month} ${year}\n\n`; | |
| currentHoroscopes.forEach(horoscope => { | |
| text += `${horoscope.sign}\n${horoscope.prediction}\n${horoscope.love}\n${horoscope.advice}\n\n`; | |
| }); | |
| const blob = new Blob([text], { type: 'text/plain' }); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = `Horoscopo_Mensual_${month}_${year}.txt`; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| URL.revokeObjectURL(url); | |
| } | |
| // Event listeners | |
| generateBtn.addEventListener('click', function() { | |
| const month = monthSelect.value; | |
| const year = yearInput.value; | |
| // Validate inputs | |
| if (!month) { | |
| showError("Por favor selecciona un mes"); | |
| return; | |
| } | |
| if (!year || year < 2000 || year > 2050) { | |
| showError("Por favor ingresa un año válido entre 2000 y 2050"); | |
| return; | |
| } | |
| hideError(); | |
| generateHoroscopes(month, year); | |
| // Update UI | |
| selectedMonthSpan.textContent = month; | |
| selectedYearSpan.textContent = year; | |
| monthResultsSelect.value = month; | |
| yearResultsInput.value = year; | |
| inputSection.classList.add('hidden'); | |
| resultsSection.classList.remove('hidden'); | |
| // Scroll to results | |
| setTimeout(() => { | |
| resultsSection.scrollIntoView({ behavior: 'smooth' }); | |
| }, 100); | |
| }); | |
| regenerateBtn.addEventListener('click', function() { | |
| const month = monthResultsSelect.value; | |
| const year = yearResultsInput.value; | |
| // Validate inputs | |
| if (!month) { | |
| showErrorResults("Por favor selecciona un mes"); | |
| return; | |
| } | |
| if (!year || year < 2000 || year > 2050) { | |
| showErrorResults("Por favor ingresa un año válido entre 2000 y 2050"); | |
| return; | |
| } | |
| hideErrorResults(); | |
| generateHoroscopes(month, year); | |
| // Update UI | |
| selectedMonthSpan.textContent = month; | |
| selectedYearSpan.textContent = year; | |
| // Scroll to top of results | |
| zodiacContainer.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| }); | |
| exportBtn.addEventListener('click', exportHoroscopes); | |
| function showError(message) { | |
| errorMessage.textContent = message; | |
| errorMessage.classList.remove('hidden'); | |
| } | |
| function hideError() { | |
| errorMessage.classList.add('hidden'); | |
| } | |
| function showErrorResults(message) { | |
| errorMessageResults.textContent = message; | |
| errorMessageResults.classList.remove('hidden'); | |
| } | |
| function hideErrorResults() { | |
| errorMessageResults.classList.add('hidden'); | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=hellodigitalAI/hrscp-sg" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |