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 Generativo - Predicciones Mensuales</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=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #0f0e17; | |
| color: #fffffe; | |
| } | |
| .title-font { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); | |
| } | |
| .star { | |
| position: absolute; | |
| background-color: #fff; | |
| border-radius: 50%; | |
| animation: twinkle var(--duration) ease-in-out infinite; | |
| } | |
| @keyframes twinkle { | |
| 0%, 100% { opacity: 0.2; } | |
| 50% { opacity: 1; } | |
| } | |
| .horoscope-card { | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid rgba(255, 215, 0, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .horoscope-card:hover { | |
| background: rgba(255, 255, 255, 0.07); | |
| border-color: rgba(255, 215, 0, 0.3); | |
| transform: translateY(-5px); | |
| } | |
| .zodiac-sign { | |
| position: relative; | |
| } | |
| .zodiac-sign::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -8px; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.7), transparent); | |
| } | |
| .last-updated { | |
| font-size: 0.8rem; | |
| color: rgba(255, 255, 255, 0.5); | |
| text-align: center; | |
| margin-top: 1rem; | |
| } | |
| .loading { | |
| display: inline-block; | |
| width: 20px; | |
| height: 20px; | |
| border: 3px solid rgba(255,255,255,.3); | |
| border-radius: 50%; | |
| border-top-color: #fff; | |
| animation: spin 1s ease-in-out infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .copy-btn { | |
| transition: all 0.3s ease; | |
| } | |
| .copy-btn:hover { | |
| transform: scale(1.05); | |
| } | |
| .copy-btn.copied { | |
| background-color: #10b981 ; | |
| } | |
| .date-selector { | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| color: white; | |
| padding: 0.5rem 1rem; | |
| border-radius: 0.5rem; | |
| outline: none; | |
| transition: all 0.3s ease; | |
| } | |
| .date-selector:hover { | |
| background: rgba(255, 255, 255, 0.15); | |
| border-color: rgba(255, 215, 0, 0.5); | |
| } | |
| .date-selector:focus { | |
| border-color: rgba(255, 215, 0, 0.8); | |
| box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2); | |
| } | |
| .generate-btn { | |
| background: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%); | |
| transition: all 0.3s ease; | |
| } | |
| .generate-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3); | |
| } | |
| .prediction-text { | |
| min-height: 120px; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Floating Stars Background --> | |
| <div id="stars-container" class="fixed inset-0 overflow-hidden z-0"></div> | |
| <!-- Header --> | |
| <header class="relative z-10 gradient-bg border-b border-purple-900/30"> | |
| <div class="container mx-auto px-6 py-8"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-moon text-yellow-400 text-3xl mr-3"></i> | |
| <h1 class="title-font text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-pink-500"> | |
| Horóscopo Generativo | |
| </h1> | |
| </div> | |
| <div id="current-date" class="text-sm font-medium bg-black/20 px-3 py-1 rounded-full"></div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Daily Horoscope Section --> | |
| <section class="relative z-10 py-16 px-6 bg-black/20 backdrop-blur-sm"> | |
| <div class="container mx-auto"> | |
| <div class="text-center mb-12"> | |
| <div class="inline-block bg-gradient-to-r from-yellow-500 to-pink-500 text-gray-900 px-4 py-1 rounded-full text-sm font-bold mb-4"> | |
| PREDICCIONES MENSUALES GENERATIVAS | |
| </div> | |
| <h2 class="title-font text-3xl font-bold mb-2"> | |
| Predicciones únicas generadas por IA | |
| </h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto"> | |
| Descubre mensajes astrológicos completamente originales generados al instante para cada signo. | |
| </p> | |
| </div> | |
| <!-- Date Selector --> | |
| <div class="flex justify-center items-center gap-4 mb-8 flex-wrap"> | |
| <div class="flex items-center gap-2"> | |
| <label for="month-select" class="text-gray-300">Mes:</label> | |
| <select id="month-select" class="date-selector"> | |
| <option value="1">Enero</option> | |
| <option value="2">Febrero</option> | |
| <option value="3">Marzo</option> | |
| <option value="4">Abril</option> | |
| <option value="5">Mayo</option> | |
| <option value="6">Junio</option> | |
| <option value="7">Julio</option> | |
| <option value="8">Agosto</option> | |
| <option value="9">Septiembre</option> | |
| <option value="10">Octubre</option> | |
| <option value="11">Noviembre</option> | |
| <option value="12">Diciembre</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <label for="year-select" class="text-gray-300">Año:</label> | |
| <select id="year-select" class="date-selector"> | |
| <option value="2023">2023</option> | |
| <option value="2024">2024</option> | |
| <option value="2025">2025</option> | |
| <option value="2026">2026</option> | |
| <option value="2027">2027</option> | |
| <option value="2028">2028</option> | |
| <option value="2029">2029</option> | |
| <option value="2030">2030</option> | |
| </select> | |
| </div> | |
| <button id="generate-btn" class="generate-btn text-white px-6 py-2 rounded-full font-medium flex items-center gap-2"> | |
| <i class="fas fa-star"></i> Generar Horóscopo | |
| </button> | |
| </div> | |
| <div id="loading" class="text-center py-12"> | |
| <div class="loading mx-auto"></div> | |
| <p class="mt-4 text-gray-400">Generando predicciones únicas...</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 hidden" id="horoscope-container"> | |
| <!-- Horoscope cards will be generated by JavaScript --> | |
| </div> | |
| <div id="last-updated" class="last-updated"></div> | |
| </div> | |
| </section> | |
| <!-- Zodiac Showcase --> | |
| <section class="relative z-10 py-12 bg-black/20 backdrop-blur-sm"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="title-font text-3xl text-center font-bold mb-12"> | |
| Los 12 <span class="text-yellow-400">Signos</span> del Zodíaco | |
| </h2> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-6"> | |
| <!-- Aries --> | |
| <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-purple-900/30 cursor-pointer"> | |
| <i class="fas fa-fire text-red-500 text-4xl mb-2"></i> | |
| <span class="font-medium">Aries</span> | |
| <span class="text-xs text-gray-400">21/03 - 19/04</span> | |
| </div> | |
| <!-- Taurus --> | |
| <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-green-900/30 cursor-pointer"> | |
| <i class="fas fa-paw text-green-500 text-4xl mb-2"></i> | |
| <span class="font-medium">Tauro</span> | |
| <span class="text-xs text-gray-400">20/04 - 20/05</span> | |
| </div> | |
| <!-- Gemini --> | |
| <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-yellow-900/30 cursor-pointer"> | |
| <i class="fas fa-comments text-yellow-500 text-4xl mb-2"></i> | |
| <span class="font-medium">Géminis</span> | |
| <span class="text-xs text-gray-400">21/05 - 20/06</span> | |
| </div> | |
| <!-- Cancer --> | |
| <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-blue-900/30 cursor-pointer"> | |
| <i class="fas fa-moon text-blue-400 text-4xl mb-2"></i> | |
| <span class="font-medium">Cáncer</span> | |
| <span class="text-xs text-gray-400">21/06 - 22/07</span> | |
| </div> | |
| <!-- Leo --> | |
| <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-orange-900/30 cursor-pointer"> | |
| <i class="fas fa-sun text-orange-400 text-4xl mb-2"></i> | |
| <span class="font-medium">Leo</span> | |
| <span class="text-xs text-gray-400">23/07 - 22/08</span> | |
| </div> | |
| <!-- Virgo --> | |
| <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-green-900/30 cursor-pointer"> | |
| <i class="fas fa-leaf text-green-300 text-4xl mb-2"></i> | |
| <span class="font-medium">Virgo</span> | |
| <span class="text-xs text-gray-400">23/08 - 22/09</span> | |
| </div> | |
| <!-- Libra --> | |
| <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-pink-900/30 cursor-pointer"> | |
| <i class="fas fa-balance-scale text-pink-400 text-4xl mb-2"></i> | |
| <span class="font-medium">Libra</span> | |
| <span class="text-xs text-gray-400">23/09 - 22/10</span> | |
| </div> | |
| <!-- Scorpio --> | |
| <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-red-900/30 cursor-pointer"> | |
| <i class="fas fa-scroll text-red-400 text-4xl mb-2"></i> | |
| <span class="font-medium">Escorpio</span> | |
| <span class="text-xs text-gray-400">23/10 - 21/11</span> | |
| </div> | |
| <!-- Sagittarius --> | |
| <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-purple-900/30 cursor-pointer"> | |
| <i class="fas fa-arrow-up text-purple-400 text-4xl mb-2"></i> | |
| <span class="font-medium">Sagitario</span> | |
| <span class="text-xs text-gray-400">22/11 - 21/12</span> | |
| </div> | |
| <!-- Capricorn --> | |
| <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-gray-900/30 cursor-pointer"> | |
| <i class="fas fa-mountain text-gray-400 text-4xl mb-2"></i> | |
| <span class="font-medium">Capricornio</span> | |
| <span class="text-xs text-gray-400">22/12 - 19/01</span> | |
| </div> | |
| <!-- Aquarius --> | |
| <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-blue-900/30 cursor-pointer"> | |
| <i class="fas fa-water text-blue-300 text-4xl mb-2"></i> | |
| <span class="font-medium">Acuario</span> | |
| <span class="text-xs text-gray-400">20/01 - 18/02</span> | |
| </div> | |
| <!-- Pisces --> | |
| <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-indigo-900/30 cursor-pointer"> | |
| <i class="fas fa-fish text-indigo-300 text-4xl mb-2"></i> | |
| <span class="font-medium">Piscis</span> | |
| <span class="text-xs text-gray-400">19/02 - 20/03</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| // Create floating stars | |
| function createStars() { | |
| const container = document.getElementById('stars-container'); | |
| const starCount = 100; | |
| for (let i = 0; i < starCount; i++) { | |
| const star = document.createElement('div'); | |
| star.classList.add('star'); | |
| // Random size between 1 and 3 pixels | |
| const size = Math.random() * 2 + 1; | |
| star.style.width = `${size}px`; | |
| star.style.height = `${size}px`; | |
| // Random position | |
| star.style.left = `${Math.random() * 100}%`; | |
| star.style.top = `${Math.random() * 100}%`; | |
| // Random animation duration between 2 and 5 seconds | |
| const duration = Math.random() * 3 + 2; | |
| star.style.setProperty('--duration', `${duration}s`); | |
| container.appendChild(star); | |
| } | |
| } | |
| // Daily Horoscope Functionality | |
| function setupHoroscope() { | |
| const zodiacSigns = [ | |
| { name: "Aries", icon: "fa-fire", color: "text-red-500", dates: "21/03 - 19/04" }, | |
| { name: "Tauro", icon: "fa-paw", color: "text-green-500", dates: "20/04 - 20/05" }, | |
| { name: "Géminis", icon: "fa-comments", color: "text-yellow-500", dates: "21/05 - 20/06" }, | |
| { name: "Cáncer", icon: "fa-moon", color: "text-blue-400", dates: "21/06 - 22/07" }, | |
| { name: "Leo", icon: "fa-sun", color: "text-orange-400", dates: "23/07 - 22/08" }, | |
| { name: "Virgo", icon: "fa-leaf", color: "text-green-300", dates: "23/08 - 22/09" }, | |
| { name: "Libra", icon: "fa-balance-scale", color: "text-pink-400", dates: "23/09 - 22/10" }, | |
| { name: "Escorpio", icon: "fa-scroll", color: "text-red-400", dates: "23/10 - 21/11" }, | |
| { name: "Sagitario", icon: "fa-arrow-up", color: "text-purple-400", dates: "22/11 - 21/12" }, | |
| { name: "Capricornio", icon: "fa-mountain", color: "text-gray-400", dates: "22/12 - 19/01" }, | |
| { name: "Acuario", icon: "fa-water", color: "text-blue-300", dates: "20/01 - 18/02" }, | |
| { name: "Piscis", icon: "fa-fish", color: "text-indigo-300", dates: "19/02 - 20/03" } | |
| ]; | |
| // Function to generate completely random love compatibility | |
| function generateLoveCompatibility() { | |
| const compatibilities = [ | |
| { text: "Alta compatibilidad amorosa", color: "text-green-400", | |
| desc: "Las estrellas favorecen encuentros significativos y conexiones profundas" }, | |
| { text: "Compatibilidad media", color: "text-yellow-400", | |
| desc: "Momento para trabajar en la comunicación y comprensión mutua" }, | |
| { text: "Baja compatibilidad", color: "text-red-400", | |
| desc: "Enfócate en tu crecimiento personal antes que en relaciones nuevas" }, | |
| { text: "Compatibilidad variable", color: "text-purple-400", | |
| desc: "Los planetas indican altibajos emocionales que requieren paciencia" }, | |
| { text: "Compatibilidad sorprendente", color: "text-pink-400", | |
| desc: "Encuentros inesperados podrían cambiar tu perspectiva amorosa" }, | |
| { text: "Compatibilidad kármica", color: "text-indigo-400", | |
| desc: "Relaciones que llegan para enseñarte lecciones importantes" } | |
| ]; | |
| return compatibilities[Math.floor(Math.random() * compatibilities.length)]; | |
| } | |
| // Function to generate random lucky numbers | |
| function generateLuckyNumbers() { | |
| const count = 3 + Math.floor(Math.random() * 3); // 3-5 numbers | |
| const numbers = []; | |
| for (let i = 0; i < count; i++) { | |
| numbers.push(Math.floor(Math.random() * 50) + 1); // 1-50 | |
| } | |
| return numbers.join(", "); | |
| } | |
| // Function to generate AI-like predictions (completely random each time) | |
| function generateRandomPrediction(sign, month, year) { | |
| // Planetary influences | |
| const planets = ["Mercurio", "Venus", "Marte", "Júpiter", "Saturno", "Urano", "Neptuno", "Plutón"]; | |
| const influences = ["armonía", "transformación", "crecimiento", "pasión", "sabiduría", "intuición", "suerte", "claridad"]; | |
| // Life aspects | |
| const aspects = ["amor", "trabajo", "salud", "finanzas", "crecimiento personal", "familia", "amistades", "carrera"]; | |
| // Prediction structures | |
| const structures = [ | |
| `La alineación de ${planets[Math.floor(Math.random() * planets.length)]} con ${planets[Math.floor(Math.random() * planets.length)]} ` + | |
| `trae ${influences[Math.floor(Math.random() * influences.length)]} al área de ${aspects[Math.floor(Math.random() * aspects.length)]}. ` + | |
| `Es momento propicio para ${["explorar nuevas oportunidades", "profundizar en relaciones", "invertir en ti mismo", "tomar riesgos calculados"][Math.floor(Math.random() * 4)]}. ` + | |
| `La energía de ${sign} se verá especialmente ${["favorecida", "desafiada", "transformada", "iluminada"][Math.floor(Math.random() * 4)]} durante este período.`, | |
| `Los tránsitos planetarios indican que ${["tu intuición será clave", "deberás ser paciente", "la comunicación fluirá", "las oportunidades llegarán"][Math.floor(Math.random() * 4)]} ` + | |
| `en el ámbito ${aspects[Math.floor(Math.random() * aspects.length)]}. ${planets[Math.floor(Math.random() * planets.length)]} ` + | |
| `en ${["conjunción", "oposición", "cuadratura", "trígono"][Math.floor(Math.random() * 4)]} con ${planets[Math.floor(Math.random() * planets.length)]} ` + | |
| `sugiere ${["un giro inesperado", "una revelación importante", "un encuentro significativo", "una decisión crucial"][Math.floor(Math.random() * 4)]}.`, | |
| `Como ${sign}, este mes el universo te invita a ${["reflexionar profundamente", "expresar tu creatividad", "abrir tu corazón", "tomar el control"][Math.floor(Math.random() * 4)]}. ` + | |
| `La presencia de ${planets[Math.floor(Math.random() * planets.length)]} en ${["tu casa astral", "tu signo solar", "tu ascendente"][Math.floor(Math.random() * 3)]} ` + | |
| `indica ${["un período de crecimiento", "momentos de claridad", "desafíos superables", "bendiciones inesperadas"][Math.floor(Math.random() * 4)]} ` + | |
| `especialmente en ${aspects[Math.floor(Math.random() * aspects.length)]}.`, | |
| `La energía cósmica de este mes favorece a ${sign} en ${aspects[Math.floor(Math.random() * aspects.length)]}. ` + | |
| `${planets[Math.floor(Math.random() * planets.length)]} ${["ilumina", "desafía", "transforma", "fortalece"][Math.floor(Math.random() * 4)]} ` + | |
| `tu ${["camino espiritual", "vida amorosa", "carrera profesional", "salud emocional"][Math.floor(Math.random() * 4)]} ` + | |
| `de maneras ${["inesperadas", "profundas", "reveladoras", "milagrosas"][Math.floor(Math.random() * 4)]}.`, | |
| `Este período astrológico marca un momento ${["crucial", "transformador", "mágico", "desafiante"][Math.floor(Math.random() * 4)]} ` + | |
| `para ${sign}. La influencia combinada de ${planets[Math.floor(Math.random() * planets.length)]} ` + | |
| `y ${planets[Math.floor(Math.random() * planets.length)]} sugiere que ${["debes confiar en tu intuición", "es hora de tomar acción", "la paciencia será recompensada", "los cambios son inevitables"][Math.floor(Math.random() * 4)]} ` + | |
| `en relación con ${aspects[Math.floor(Math.random() * aspects.length)]}.` | |
| ]; | |
| // Combine multiple structures for richer prediction | |
| let prediction = structures[Math.floor(Math.random() * structures.length)] + " "; | |
| prediction += structures[Math.floor(Math.random() * structures.length)]; | |
| // Add final advice | |
| const advice = [ | |
| "Confía en el proceso y mantén una actitud abierta.", | |
| "Este es un momento para escuchar tu voz interior más que nunca.", | |
| "Las respuestas que buscas llegarán cuando menos las esperes.", | |
| "No temas pedir ayuda cuando lo necesites.", | |
| "Recuerda que cada desafío es una oportunidad disfrazada.", | |
| "La alquimia de tus experiencias pasadas te preparó para este momento.", | |
| "Mantén el equilibrio entre dar y recibir.", | |
| "Tu intuición será tu mejor guía durante este ciclo." | |
| ]; | |
| prediction += " " + advice[Math.floor(Math.random() * advice.length)]; | |
| return prediction; | |
| } | |
| // Function to display horoscope | |
| function displayHoroscope(month, year) { | |
| const monthNames = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", | |
| "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]; | |
| document.getElementById('current-date').textContent = `${monthNames[month-1]} ${year}`; | |
| // Generate horoscope cards | |
| const container = document.getElementById('horoscope-container'); | |
| container.innerHTML = ''; | |
| zodiacSigns.forEach((sign) => { | |
| const prediction = generateRandomPrediction(sign.name, month, year); | |
| const loveCompatibility = generateLoveCompatibility(); | |
| const luckyNumbers = generateLuckyNumbers(); | |
| const card = document.createElement('div'); | |
| card.className = 'horoscope-card rounded-xl p-6'; | |
| card.innerHTML = ` | |
| <div class="flex items-center mb-4"> | |
| <i class="fas ${sign.icon} ${sign.color} text-3xl mr-3"></i> | |
| <div> | |
| <h3 class="zodiac-sign title-font text-xl font-bold">${sign.name}</h3> | |
| <span class="text-xs text-gray-400">${sign.dates}</span> | |
| </div> | |
| </div> | |
| <div class="prediction-text text-gray-300 text-sm mb-4">${prediction}</div> | |
| <div class="mb-3"> | |
| <div class="text-gray-400 text-xs">Amor</div> | |
| <div class="${loveCompatibility.color} font-medium text-sm">${loveCompatibility.text}</div> | |
| <div class="text-gray-500 text-xs">${loveCompatibility.desc}</div> | |
| </div> | |
| <div class="flex justify-between items-center mt-4"> | |
| <div class="text-xs"> | |
| <div class="text-gray-400">Números de suerte</div> | |
| <div class="text-purple-300 font-medium">${luckyNumbers}</div> | |
| </div> | |
| <button | |
| class="copy-btn bg-blue-600 hover:bg-blue-700 text-white text-xs px-3 py-1 rounded-full flex items-center" | |
| data-sign="${sign.name}" | |
| onclick="copyHoroscopeText('${sign.name}', '${prediction.replace(/'/g, "\\'")}')" | |
| > | |
| <i class="fas fa-copy mr-1"></i> Copiar | |
| </button> | |
| </div> | |
| `; | |
| container.appendChild(card); | |
| }); | |
| // Update last updated time | |
| const now = new Date(); | |
| const lastUpdated = document.getElementById('last-updated'); | |
| lastUpdated.textContent = `Generado el ${now.toLocaleDateString('es-ES')} a las ${now.toLocaleTimeString('es-ES', {hour: '2-digit', minute:'2-digit'})}`; | |
| // Hide loading and show content | |
| document.getElementById('loading').classList.add('hidden'); | |
| container.classList.remove('hidden'); | |
| } | |
| // Function to copy horoscope text | |
| function copyHoroscopeText(sign, prediction) { | |
| const textToCopy = `${sign}\n\n${prediction}`; | |
| navigator.clipboard.writeText(textToCopy).then(() => { | |
| // Show feedback | |
| const buttons = document.querySelectorAll('.copy-btn'); | |
| buttons.forEach(btn => { | |
| if (btn.dataset.sign === sign) { | |
| btn.innerHTML = '<i class="fas fa-check mr-1"></i> Copiado'; | |
| btn.classList.add('copied'); | |
| // Reset after 2 seconds | |
| setTimeout(() => { | |
| btn.innerHTML = '<i class="fas fa-copy mr-1"></i> Copiar'; | |
| btn.classList.remove('copied'); | |
| }, 2000); | |
| } | |
| }); | |
| }); | |
| } | |
| // Initialize everything when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', () => { | |
| createStars(); | |
| // Set current month and year as default | |
| const now = new Date(); | |
| document.getElementById('month-select').value = now.getMonth() + 1; | |
| document.getElementById('year-select').value = now.getFullYear(); | |
| // Initial display with current month | |
| displayHoroscope(now.getMonth() + 1, now.getFullYear()); | |
| // Generate button event | |
| document.getElementById('generate-btn').addEventListener('click', () => { | |
| const month = parseInt(document.getElementById('month-select').value); | |
| const year = parseInt(document.getElementById('year-select').value); | |
| // Show loading | |
| document.getElementById('loading').classList.remove('hidden'); | |
| document.getElementById('horoscope-container').classList.add('hidden'); | |
| // Small delay for better UX | |
| setTimeout(() => { | |
| displayHoroscope(month, year); | |
| }, 300); | |
| }); | |
| }); | |
| // Make copyHoroscopeText available globally | |
| window.copyHoroscopeText = copyHoroscopeText; | |
| } | |
| // Start the horoscope functionality | |
| setupHoroscope(); | |
| </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-gen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |