PageSourceSearch

https://lunarapp-urania-production.up.railway.app/

html lunarapp-urania-production.up.railway.app collected 2026-10-03 12:12:50 UTC 22,379 bytes, 391 lines download raw bytes

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">&times;</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;">&times;</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;">&#128205;</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;">&#128205; 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;">&#128752; 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;">&#128302; 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;">&#128202; 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;">&#9889; 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;">&#127968; 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;">&#128203; 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;">&#127757; 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 &#128205;.</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.