1<!DOCTYPE html> 2<html lang="es"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta name="description" content="Aplicación de Ciclos Lunares - Fases, signos, eclipses y más"> 7 <meta name="theme-color" content="#1a1a2e"> 8 9 <title>Lunar App - Ciclos Lunares</title> 10 11 <!-- Google Fonts --> 12 <link rel="preconnect" href="https://fonts.googleapis.com"> 13 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 14 <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Cormorant+Garamond:wght@300;400;600&display=swap" rel="stylesheet"> 15 16 <!-- PWA Manifest --> 17 <link rel="manifest" href="/static/manifest.json"> 18 19 <!-- Iconos --> 20 <link rel="icon" type="image/png" sizes="192x192" href="/static/icons/icon-192.png"> 21 <link rel="apple-touch-icon" href="/static/icons/icon-192.png"> 22 23 <!-- Estilos --> 24 <link rel="stylesheet" href="/static/css/style.css"> 25 26
26<script src="/static/js/luna-realista.js"></script>
26 27
27<script src="https://unpkg.com/@astrodraw/astrochart"></script>
27 28 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> 29
29<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
29 30</head> 31<body> 32 <!-- Header --> 33 <!-- PUNTO 1: Banner Notificaciones (arriba del header para que no lo tape) --> 34 <div id="notif-banner" style="background:linear-gradient(135deg, rgba(212,175,55,0.15), rgba(26,26,46,0.95)); border-bottom:1px solid rgba(212,175,55,0.3); padding:0.8rem 1rem; position:relative; z-index:1001;"> 35 <div style="max-width:960px; margin:0 auto; display:flex; align-items:center; gap:1rem; flex-wrap:wrap;"> 36 <div style="flex:1; min-width:200px;"> 37 <p style="margin:0; font-size:0.85rem; color:var(--color-texto); line-height:1.4;"> 38 Podes estar informado sobre nuestras actividades, charlas, conferencias, cursos y talleres, material de consulta y nuevos videos, activando las notificaciones. 39 </p> 40 </div> 41 <button id="btn-activar-notif" onclick="activarNotificacionesBanner()" style="background:linear-gradient(135deg,#d4af37,#b8962e); color:#0f0f1e; border:none; padding:0.6rem 1.2rem; border-radius:8px; font-weight:700; font-size:0.85rem; cursor:pointer; white-space:nowrap; font-family:'Cinzel',serif;"> 42 ACTIVAR NOTIFICACIONES 43 </button> 44 </div> 45 </div> 46 47 <header class="header"> 48 <div class="container"> 49 <div class="logo-section"> 50 <img src="/static/images/logo_urania.png" alt="La Nación de Urania" class="logo-img"> 51 <div class="logo-text-container"> 52 <h1 class="logo">LA NACIÃN DE URANIA</h1> 53 <p class="logo-subtitle">Organización Astrológica</p> 54 </div> 55 </div> 56 57 <!-- Botón hamburguesa (solo móvil) --> 58 <button class="menu-toggle" id="menu-toggle" aria-label="Abrir menú"> 59 <span class="hamburger-line"></span> 60 <span class="hamburger-line"></span> 61 <span class="hamburger-line"></span> 62 </button> 63 64 <!-- Menú de navegación --> 65 <nav class="nav" id="main-nav"> 66 <a href="/" class="nav-link active">Inicio</a> 67 <a href="/calendario" class="nav-link">Calendario</a> 68 <a href="/eclipses" class="nav-link">Eclipses</a> 69 <a href="/streaming" class="nav-link">Streaming</a> 70 <a href="/carta-natal" class="nav-link">Carta Natal</a> 71 <a href="/notificaciones" class="nav-link">Notificaciones</a> 72 </nav> 73 </div> 74 </header> 75 76 <!-- Overlay para cerrar menú al hacer click fuera (solo móvil) --> 77 <div class="menu-overlay" id="menu-overlay"></div> 78 79 <!-- Contenedor Principal --> 80 <main class="main-container"> 81 <!-- Sección: Fase Lunar Actual --> 82 <section class="card fase-actual"> 83 <h2 class="card-title">Fase Lunar Actual</h2> 84 <div class="fase-display"> 85 <div class="luna-container" id="luna-container"></div> 86 <h3 class="fase-nombre" id="fase-nombre">Cargando...</h3> 87 <div class="fase-detalles"> 88 <div class="detalle-item"> 89 <span class="detalle-label">Iluminación:</span> 90 <span class="detalle-valor" id="iluminacion">--</span> 91 </div> 92 <div class="detalle-item"> 93 <span class="detalle-label">Ãngulo:</span> 94 <span class="detalle-valor" id="angulo">--</span> 95 </div> 96 </div> 97 </div> 98 99 <!-- Barra de progreso del ciclo --> 100 <div class="progreso-ciclo"> 101 <div class="progreso-bar"> 102 <div class="progreso-fill" id="progreso-fill"></div> 103 </div> 104 <p class="progreso-texto" id="progreso-texto">DÃa lunar: --</p> 105 </div> 106 107 <!-- Botón de Interpretación --> 108 <div class="interpretacion-boton-container"> 109 <button class="btn-interpretacion" id="btn-ver-interpretacion"> 110 â¹ï¸ Ver Interpretación Astrológica 111 </button> 112 </div> 113 </section> 114 115 <!-- Sección: Luna en Signos --> 116 <section class="card signo-actual"> 117 <h2 class="card-title">Luna en Signos</h2> 118 <div class="signo-display"> 119 <div class="signo-info"> 120 <h3 class="signo-nombre" id="signo-nombre">Cargando...</h3> 121 <p class="signo-grado" id="signo-grado">-- °</p> 122 </div> 123 <div class="proximo-cambio"> 124 <p class="cambio-label">Próximo cambio:</p> 125 <p class="cambio-valor" id="proximo-signo">--</p> 126 <p class="cambio-fecha" id="cambio-fecha">--</p> 127 </div> 128 </div> 129 </section> 130 131 <!-- DÃa Lunar (Tithi) --> 132 <section class="card dia-lunar"> 133 <h2 class="card-title">DÃa Lunar (Tithi)</h2> 134 <div class="tithi-display"> 135 <div class="tithi-numero" id="tithi-numero">--</div> 136 <p class="tithi-nombre" id="tithi-nombre">--</p> 137 <p class="tithi-interpretacion" id="tithi-interpretacion" style="font-size: 0.9rem; color: var(--color-texto-secundario); margin: 0.5rem 0; display: none;">--</p> 138 <p class="tithi-progreso" id="tithi-progreso">--</p> 139 </div> 140 </section> 141 142 <!-- Sección: Fases Principales del Mes --> 143 <section class="card fases-mes"> 144 <h2 class="card-title" id="titulo-fases-principales">Fases Principales</h2> 145 <div class="fases-grid" id="fases-grid"> 146 <!-- Se llenará dinámicamente --> 147 <div class="loading-container"> 148 <div class="loading-spinner"> 149 <div class="loading-spinner-luna">ð</div> 150 </div> 151 <div class="loading-text">Cargando fases lunares...</div> 152 </div> 153 </div> 154 </section> 155 156 <!-- Botón de actualización --> 157 <div class="acciones">
158 <button class="btn-actualizar" id="btn-actualizar" onclick="actualizarTodo()"> 159 ð Actualizar 160 </button> 161 </div> 162 </main> 163 164 <!-- Modal de Interpretación --> 165 <div class="modal" id="modal-interpretacion"> 166 <div class="modal-contenido"> 167 <div class="modal-header"> 168 <h3 class="modal-titulo" id="modal-titulo">Interpretación Lunar</h3> 169 <button class="modal-cerrar" id="modal-cerrar">×</button> 170 </div> 171 <div class="modal-body"> 172 <!-- Foto de la Luna --> 173 <div class="interpretacion-luna-container" id="interpretacion-luna-container"></div> 174 175 <!-- Nombre de la Fase --> 176 <h4 class="interpretacion-nombre" id="interpretacion-nombre"></h4> 177 178 <!-- Datos Técnicos --> 179 <div class="datos-tecnicos"> 180 <div class="dato-item"> 181 <span class="dato-label">DÃa lunar:</span> 182 <span class="dato-valor" id="dato-dia-ciclo">--</span> 183 </div> 184 <div class="dato-item"> 185 <span class="dato-label">Iluminación:</span> 186 <span class="dato-valor" id="dato-iluminacion">--</span> 187 </div> 188 <div class="dato-item"> 189 <span class="dato-label">Ãngulo Sol-Luna:</span> 190 <span class="dato-valor" id="dato-angulo">--</span> 191 </div> 192 </div> 193 194 <!-- Posición Lunar --> 195 <div class="posicion-lunar"> 196 <h4 class="signo-titulo">Luna en <span id="interpretacion-signo-nombre"></span> <span id="interpretacion-grado"></span></h4> 197 </div> 198 199 <!-- Interpretación Completa --> 200 <div class="interpretacion-texto-completo"> 201 <p id="interpretacion-texto-completo"></p> 202 </div> 203 204 <!-- Consejos Prácticos --> 205 <div class="consejos-container"> 206 <h3 class="consejos-titulo">ð¡ Consejos Prácticos</h3> 207 208 <div class="consejo-seccion"> 209 <h4 class="consejo-subtitulo">â Qué hacer:</h4> 210 <ul class="consejo-lista" id="consejos-que-hacer"></ul> 211 </div> 212 213 <div class="consejo-seccion"> 214 <h4 class="consejo-subtitulo">â Qué evitar:</h4> 215 <ul class="consejo-lista" id="consejos-que-evitar"></ul> 216 </div> 217 218 <div class="consejo-seccion"> 219 <h4 class="consejo-subtitulo">ð¯ Momento ideal para:</h4> 220 <ul class="consejo-lista" id="consejos-momento-ideal"></ul> 221 </div> 222 </div> 223 224 <!-- Luna en Signos (Colapsable) --> 225 <div class="signo-descripcion-container"> 226 <button class="signo-toggle" id="signo-toggle"> 227 <span class="signo-toggle-texto">ð Sobre Luna en <span id="signo-toggle-nombre"></span></span> 228 <span class="signo-toggle-icono">â¼</span> 229 </button> 230 231 <div class="signo-descripcion-contenido" id="signo-descripcion-contenido"> 232 <p class="signo-descripcion-texto" id="signo-descripcion-texto"></p> 233 234 <div class="signo-palabras-clave"> 235 <h4 class="signo-subtitulo">â Palabras clave:</h4> 236 <div class="palabras-clave-lista" id="palabras-clave-lista"></div> 237 </div> 238 239 <div class="signo-necesita"> 240 <h4 class="signo-subtitulo">ð Necesita para sentirse bien:</h4> 241 <ul class="signo-lista" id="signo-necesita-lista"></ul> 242 </div> 243 244 <div class="signo-desafios"> 245 <h4 class="signo-subtitulo">â ï¸ DesafÃos comunes:</h4> 246 <ul class="signo-lista" id="signo-desafios-lista"></ul> 247 </div> 248 </div> 249 </div> 250 </div> 251 </div> 252 </div> 253 254 <!-- Footer --> 255 <footer class="footer"> 256 <p style="font-family: 'Cinzel', serif; color: var(--color-dorado); margin-bottom: 0.5rem;">© 2025 La Nación de Urania</p> 257 <p style="margin: 0.25rem 0;"> 258 <a href="https://www.escuelaurania.com" target="_blank" style="color: var(--color-enlace); text-decoration: none;">www.escuelaurania.com</a> 259 - 260 <a id="email-link" style="color: var(--color-enlace); text-decoration: none; cursor: pointer;">cargando...</a> 261 </p> 262 <p style="margin: 0.25rem 0;"> 263 ð± <a href="https://wa.me/5492944312096" target="_blank" style="color: var(--color-enlace); text-decoration: none;">WhatsApp: +54 9 294 431-2096</a> 264 </p> 265 <p class="ultima-actualizacion" id="ultima-actualizacion">Ãltima actualización: --</p> 266 </footer> 267 268 <!-- Scripts --> 269 270 <!-- Firebase Analytics --> 271
271<script type="module" src="/static/js/firebase-config.js"></script>
271 272 273 <!-- App JavaScript --> 274
274<script src="/static/js/app.js?v=20260403"></script>
274 275 276 <!-- Sistema de Notificaciones Push --> 277
277<script src="/static/js/push-notifications.js"></script>
277 278
278<script> 279 // Obtener clave VAPID al cargar (NO auto-suscribir, el banner se encarga) 280 window.addEventListener('load', async () => { 281 try { 282 const response = await fetch('/api/push/vapid-public-key'); 283 if (!response.ok) { 284 console.log('â ï¸ No se pudo obtener clave VAPID:', response.status); 285 return; 286 } 287 const vapidKey = await response.text(); 288 289 if (vapidKey && vapidKey.length > 10) { 290 localStorage.setItem('vapid_public_key', vapidKey.trim()); 291 console.log('â Clave VAPID obtenida'); 292 } else { 293 console.log('â ï¸ Clave VAPID vacÃa o inválida'); 294 } 295 } catch (error) { 296 console.error('â Error obteniendo clave VAPID:', error); 297 } 298 }); 299 </script>
299 300<!-- Modal Carta Natal Fases (z-index 10000 > modal calendario 9998) --> 301<div id="cf-modal-carta" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.92);z-index:10000;overflow-y:auto;padding:0.5rem;"> 302 <div style="max-width:960px;margin:0 auto;background:#0f0f1e;border-radius:12px;border:1px solid #2a2a4a;overflow:hidden;"> 303 <div style="display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:linear-gradient(135deg,#1a1a3e,#0d0d2a);border-bottom:1px solid #d4af37;"> 304 <h2 id="cf-carta-titulo" style="color:#d4af37;font-family:'Cinzel',serif;font-size:1.1rem;margin:0;">Carta Natal</h2> 305 <button id="cf-btn-cerrar" style="background:none;border:none;color:#eee;font-size:2rem;cursor:pointer;padding:0 0.5rem;">×</button> 306 </div> 307 <div style="padding:1rem 1.5rem;"> 308 <div style="display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem;padding:0.7rem;background:#1a1a3e;border-radius:8px;font-size:0.85rem;"> 309 <span style="color:#888;">📍</span> 310 <strong id="cf-ubicacion-texto" style="color:#d4af37;">Detectando...</strong> 311 <button onclick="cfCambiarUbicacion()" style="padding:0.35rem 0.7rem;background:#2a2a4a;border:none;border-radius:4px;color:#ccc;cursor:pointer;font-size:0.8rem;">📍 Cambiar</button> 312 <button onclick="cfUsarGPS()" style="padding:0.35rem 0.7rem;background:#2a2a4a;border:none;border-radius:4px;color:#ccc;cursor:pointer;font-size:0.8rem;">🛰 GPS</button> 313 </div> 314 <div style="display:flex;gap:0.4rem;margin-bottom:1.2rem;flex-wrap:wrap;"> 315 <button class="cf-tab-btn" data-tab="cf-carta" style="padding:0.5rem 1rem;background:linear-gradient(135deg,#d4af37,#b8962e);border:1px solid #d4af37;border-radius:6px;color:#0f0f1e;cursor:pointer;font-size:0.85rem;font-weight:600;">🔮 Carta</button> 316 <button class="cf-tab-btn" data-tab="cf-posiciones" style="padding:0.5rem 1rem;background:#1a1a3e;border:1px solid #2a2a4a;border-radius:6px;color:#ccc;cursor:pointer;font-size:0.85rem;">📊 Posiciones</button> 317 <button class="cf-tab-btn" data-tab="cf-aspectos" style="padding:0.5rem 1rem;background:#1a1a3e;border:1px solid #2a2a4a;border-radius:6px;color:#ccc;cursor:pointer;font-size:0.85rem;">⚡ Aspectos</button> 318 <button class="cf-tab-btn" data-tab="cf-casas" style="padding:0.5rem 1rem;background:#1a1a3e;border:1px solid #2a2a4a;border-radius:6px;color:#ccc;cursor:pointer;font-size:0.85rem;">🏠 Casas</button> 319 <button class="cf-tab-btn" data-tab="cf-tecnicos" style="padding:0.5rem 1rem;background:#1a1a3e;border:1px solid #2a2a4a;border-radius:6px;color:#ccc;cursor:pointer;font-size:0.85rem;">📋 Tecnicos</button> 320 <button class="cf-tab-btn" data-tab="cf-astrocarto" style="padding:0.5rem 1rem;background:#1a1a3e;border:1px solid #2a2a4a;border-radius:6px;color:#ccc;cursor:pointer;font-size:0.85rem;">🌍 Astrocartografia</button> 321 </div> 322 <div class="cf-tab-content" id="cf-carta" style="display:block;"><div id="cf-astrochart-container" style="display:flex;justify-content:center;overflow:hidden;"></div></div> 323 <div class="cf-tab-content" id="cf-posiciones" style="display:none;"><table id="cf-tabla-planetas" style="width:100%;border-collapse:collapse;font-size:0.9rem;"><thead><tr style="background:#1a1a3e;"><th style="color:#d4af37;padding:0.6rem;text-align:left;">Planeta</th><th style="color:#d4af37;padding:0.6rem;text-align:left;">Signo</th><th style="color:#d4af37;padding:0.6rem;text-align:left;">Grado</th><th style="color:#d4af37;padding:0.6rem;text-align:left;">Long.</th><th style="color:#d4af37;padding:0.6rem;"></th></tr></thead><tbody></tbody></table></div> 324 <div class="cf-tab-content" id="cf-aspectos" style="display:none;"><div id="cf-aspectos-lista"></div></div> 325 <div class="cf-tab-content" id="cf-casas" style="display:none;"><div id="cf-casas-info"></div></div> 326 <div class="cf-tab-content" id="cf-tecnicos" style="display:none;"><div id="cf-datos-tecnicos"></div></div> 327 <div class="cf-tab-content" id="cf-astrocarto" style="display:none;"> 328 <div id="cf-astrocarto-map" style="width:100%;height:450px;border-radius:8px;background:#1a2332;"></div> 329 <div id="cf-astrocarto-leyenda" style="display:flex;flex-wrap:wrap;gap:0.6rem;margin-top:0.8rem;padding:0.6rem;background:rgba(0,0,0,0.3);border-radius:6px;font-size:0.78rem;"></div> 330 <div style="margin-top:0.6rem;padding:0.6rem;background:rgba(212,175,55,0.06);border-radius:6px;font-size:0.8rem;color:#888;border-left:3px solid #d4af37;">Las lineas muestran donde cada planeta es angular (ASC subiendo, DSC poniendose, MC culminando, IC en nadir). Tu ubicacion actual esta marcada con 📍.</div> 331 </div> 332 </div> 333 </div> 334</div> 335 336
336<script src="/static/js/carta-fase.js"></script>
336 337
337<script> 338 async function activarNotificacionesBanner() { 339 var btn = document.getElementById('btn-activar-notif'); 340 btn.textContent = 'Activando...'; btn.disabled = true; 341 try { 342 if (window.pushNotifications && window.pushNotifications.init) { 343 var result = await window.pushNotifications.init(); 344 if (result) { document.getElementById('notif-banner').style.display = 'none'; return; } 345 } else { 346 var perm = await Notification.requestPermission(); 347 if (perm === 'granted') { document.getElementById('notif-banner').style.display = 'none'; return; } 348 } 349 } catch(e) { console.error(e); } 350 btn.textContent = 'ACTIVAR NOTIFICACIONES'; btn.disabled = false; 351 } 352 window.addEventListener('load', async function() { 353 try { 354 // Solo ocultar si el navegador no soporta notificaciones 355 if (!('Notification' in window) || !('serviceWorker' in navigator)) { 356 console.log('ð Banner: oculto (navegador no soporta)'); 357 document.getElementById('notif-banner').style.display = 'none'; 358 return; 359 } 360 console.log('ð Banner: verificando suscripción...'); 361 console.log('ð Notification.permission:', Notification.permission); 362 var reg = await navigator.serviceWorker.ready; 363 if (reg && reg.pushManager) { 364 var sub = await reg.pushManager.getSubscription(); 365 console.log('ð Suscripción encontrada:', sub ? 'SÃ' : 'NO'); 366 if (sub) { 367 console.log('ð Endpoint:', sub.endpoint.substring(0, 60) + '...'); 368 document.getElementById('notif-banner').style.display = 'none'; 369 console.log('ð Banner: oculto (hay suscripción activa)'); 370 } else { 371 console.log('ð Banner: VISIBLE (no hay suscripción)'); 372 } 373 } else { 374 console.log('ð Banner: VISIBLE (no hay pushManager)'); 375 } 376 } catch(e) { 377 // Si falla, dejar el banner visible 378 console.log('ð Banner: visible (error:', e.message, ')'); 379 } 380 }); 381 </script>
381 382 383
383<script> 384 // Email anti-obfuscation 385 (function(){ 386 var e=document.getElementById('email-link'); 387 if(e){var u='informes',d='urania.ar';e.textContent=u+'@'+d;e.href='mai'+'lto:'+u+'@'+d;e.onclick=function(){window.location.href=this.href;};} 388 })(); 389 </script>
vendor: 1 bytes, line 389
389
390<script src="/static/js/capacitor-fcm-init.js"></script>
390</body> 391</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.