PageSourceSearch

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

html lunarapp-urania-production.up.railway.app collected 2026-10-03 12:12:54 UTC 23,219 bytes, 374 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="Carta Natal - La Nación de Urania">
7    <meta name="theme-color" content="#1a1a2e">
8    
9    <title>Carta Natal - Lunar App</title>
10    
11    <link rel="preconnect" href="https://fonts.googleapis.com">
12    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Cormorant+Garamond:wght@300;400;600&display=swap" rel="stylesheet">
14    
15    <link rel="manifest" href="/static/manifest.json">
16    <link rel="icon" type="image/png" sizes="192x192" href="/static/icons/icon-192.png">
17    <link rel="apple-touch-icon" href="/static/icons/icon-192.png">
18    
19    <link rel="stylesheet" href="/static/css/style.css">
20    
21    
21<script src="https://unpkg.com/@astrodraw/astrochart"></script>
21
22    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
23    
23<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
23
24    
25    <style>
26        .cn-form-grid { display: grid; gap: 0.8rem; }
27        .cn-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
28        .cn-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.8rem; }
29        .cn-label { color: var(--color-texto-secundario); font-size: 0.85rem; display: block; margin-bottom: 0.3rem; }
30        .cn-input {
31            width: 100%; padding: 0.6rem; background: var(--color-card);
32            border: 1px solid var(--color-borde); border-radius: 6px;
33            color: var(--color-texto); font-size: 1rem; box-sizing: border-box;
34        }
35        .cn-input:focus { border-color: #d4af37; outline: none; }
36        .cn-input-small { font-size: 0.9rem; padding: 0.5rem; }
37        .cn-info-box {
38            padding: 0.6rem; background: rgba(212,175,55,0.08); border-radius: 6px;
39            border-left: 3px solid #d4af37; font-size: 0.85rem;
40        }
41        .cn-btn-primary {
42            padding: 0.8rem 1.5rem; background: linear-gradient(135deg, #d4af37, #b8962e);
43            border: none; border-radius: 8px; color: #0f0f1e; font-size: 1rem;
44            font-weight: 600; cursor: pointer; font-family: 'Cinzel', serif;
45            letter-spacing: 0.5px; width: 100%;
46        }
47        .cn-btn-primary:hover { background: linear-gradient(135deg, #e0bf47, #c8a63e); }
48        .cn-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
49        .cn-btn-secondary {
50            padding: 0.6rem 1rem; background: #2a2a4a; border: 1px solid var(--color-borde);
51            border-radius: 6px; color: #ccc; cursor: pointer; font-size: 0.9rem;
52        }
53        .cn-btn-secondary:hover { background: #3a3a5a; }
54        .cn-ciudad-results {
55            display: none; position: absolute; top: 100%; left: 0; right: 0;
56            background: #1a1a3e; border: 1px solid #d4af37; border-radius: 0 0 8px 8px;
57            max-height: 250px; overflow-y: auto; z-index: 100;
58        }
59        .cn-ciudad-item {
60            padding: 0.7rem 0.8rem; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.06);
61            transition: background 0.2s;
62        }
63        .cn-ciudad-item:hover { background: rgba(212,175,55,0.15); }
64        .cn-saved-item {
65            display: flex; justify-content: space-between; align-items: center;
66            padding: 0.7rem; background: rgba(255,255,255,0.03); border-radius: 6px;
67            border: 1px solid var(--color-borde); margin-bottom: 0.5rem; cursor: pointer;
68            transition: border-color 0.2s;
69        }
70        .cn-saved-item:hover { border-color: #d4af37; }
71        .cn-saved-name { color: #d4af37; font-weight: 600; font-size: 0.95rem; }
72        .cn-saved-details { color: #888; font-size: 0.8rem; margin-top: 0.2rem; }
73        .cn-saved-actions { display: flex; gap: 0.3rem; }
74        .cn-saved-actions button {
75            background: none; border: none; color: #888; cursor: pointer;
76            font-size: 1rem; padding: 0.2rem; transition: color 0.2s;
77        }
78        .cn-saved-actions button:hover { color: #d4af37; }
79        .cn-btn-coords {
80            padding: 0.7rem 1rem; background: linear-gradient(135deg, #2a2a5a, #1a1a4a);
81            border: 1px solid #d4af37; border-radius: 8px; color: #d4af37;
82            cursor: pointer; font-size: 0.9rem; font-weight: 600; width: 100%;
83            text-align: center; transition: all 0.3s;
84        }
85        .cn-btn-coords:hover { background: linear-gradient(135deg, #3a3a6a, #2a2a5a); }
86        .cn-btn-coords.active { background: linear-gradient(135deg, #d4af37, #b8962e); color: #0f0f1e; }
87        .cn-coords-manual { display: none; margin-top: 0.8rem; padding: 0.8rem; background: rgba(212,175,55,0.05); border-radius: 8px; border: 1px solid var(--color-borde); }
88        .cn-sexagesimal-group { display: flex; align-items: center; gap: 0.3rem; }
89        .cn-sex-input {
90            width: 55px; padding: 0.5rem 0.3rem; background: var(--color-card);
91            border: 1px solid var(--color-borde); border-radius: 4px;
92            color: var(--color-texto); font-size: 0.95rem; text-align: center;
93            font-family: monospace;
94        }
95        .cn-sex-input:focus { border-color: #d4af37; outline: none; }
96        .cn-sex-label { color: #888; font-size: 0.9rem; min-width: 12px; }
97        .cn-sex-select {
98            padding: 0.5rem; background: var(--color-card); border: 1px solid var(--color-borde);
99            border-radius: 4px; color: #d4af37; font-size: 0.95rem; cursor: pointer;
100        }
101        .cn-sex-select:focus { border-color: #d4af37; outline: none; }
102        .cn-huso-group { display: flex; align-items: center; gap: 0.4rem; }
103        .cn-huso-input {
104            width: 50px; padding: 0.5rem 0.3rem; background: var(--color-card);
105            border: 1px solid var(--color-borde); border-radius: 4px;
106            color: var(--color-texto); font-size: 0.95rem; text-align: center;
107            font-family: monospace;
108        }
109        .cn-huso-input:focus { border-color: #d4af37; outline: none; }
110        .cn-separator { border: none; border-top: 1px solid var(--color-borde); margin: 1rem 0; }
111        @media (max-width: 500px) {
112            .cn-row-2, .cn-row-3 { grid-template-columns: 1fr; }
113            #cn-btn-imprimir { display: none !important; }
114        }
115        @media (min-width: 769px) {
116            .hamburger { display: none !important; }
117        }
118        @media print {
119            @page { size: A4 portrait; margin: 8mm 10mm; }
120        }
121    </style>
122</head>
123<body>
124    <header class="header">
125        <div class="container">
126            <div class="logo-section">
127                <div class="logo-text-container">
128                    <h1 class="logo-title">La Nación de Urania</h1>
129                    <p class="logo-subtitle">Ciclos Lunares</p>
130                </div>
131            </div>
132            <button class="hamburger" id="hamburger-btn" aria-label="Menú">
133                <span class="hamburger-line"></span>
134                <span class="hamburger-line"></span>
135                <span class="hamburger-line"></span>
136            </button>
137            <nav class="nav" id="main-nav">
138                <a href="/" class="nav-link">Inicio</a>
139                <a href="/calendario" class="nav-link">Calendario</a>
140                <a href="/eclipses" class="nav-link">Eclipses</a>
141                <a href="/streaming" class="nav-link">Streaming</a>
142                <a href="/carta-natal" class="nav-link active">Carta Natal</a>
143                <a href="/notificaciones" class="nav-link">Notificaciones</a>
144            </nav>
145        </div>
146    </header>
147    
148    <div class="menu-overlay" id="menu-overlay"></div>
149
150    <main class="main-container">
151        <!-- Formulario de datos natales -->
152        <section class="card">
153            <h2 class="card-title">🔮 Carta Natal</h2>
154            <p style="color:var(--color-texto-secundario);font-size:0.9rem;margin-bottom:1rem;">
155                Ingresá los datos de nacimiento para calcular la carta natal completa con planetas, casas, aspectos y astrocartografía.
156            </p>
157            
158            <div class="cn-form-grid">
159                <!-- Nombre (opcional, para guardar) -->
160                <div>
161                    <label class="cn-label">👤 Nombre (opcional, para guardar)</label>
162                    <input type="text" id="cn-nombre" class="cn-input" placeholder="Ej: Juan Pérez">
163                </div>
164                
165                <!-- Fecha y Hora -->
166                <div class="cn-row-2">
167                    <div>
168                        <label class="cn-label">📅 Fecha de nacimiento</label>
169                        <input type="date" id="cn-fecha" class="cn-input">
170                    </div>
171                    <div>
172                        <label class="cn-label">🕐 Hora de nacimiento</label>
173                        <input type="time" id="cn-hora" class="cn-input" value="12:00">
174                    </div>
175                </div>
176                
177                <!-- Búsqueda de ciudad -->
178                <div style="position:relative;">
179                    <label class="cn-label">📍 Lugar de nacimiento</label>
180                    <input type="text" id="cn-ciudad" class="cn-input" 
181                        placeholder="Escribí una ciudad (ej: Buenos Aires, Madrid)..." autocomplete="off">
182                    <div id="cn-resultados" class="cn-ciudad-results"></div>
183                </div>
184                
185                <!-- Info ubicación detectada -->
186                <div id="cn-ubicacion-info" class="cn-info-box" style="display:none;">
187                    <span id="cn-ubicacion-texto" style="color:#d4af37;"></span>
188                    <span id="cn-tz-texto" style="color:var(--color-texto-secundario);margin-left:0.5rem;"></span>
189                </div>
190                
191                <!-- Botón para mostrar/ocultar campos manuales -->
192                <button class="cn-btn-coords" id="cn-btn-toggle-coords" onclick="cnToggleCoords()">
193                    ⚙️ Ingresar / Corregir Coordenadas y Huso Horario
194                </button>
195                
196                <!-- Campos editables de coordenadas y huso -->
197                <div id="cn-coords-manual" class="cn-coords-manual">
198                    <p style="color:#d4af37;font-size:0.85rem;font-weight:600;margin-bottom:0.8rem;">📐 Coordenadas en formato sexagesimal</p>
199                    
200                    <!-- Latitud -->
201                    <div style="margin-bottom:0.8rem;">
202                        <label class="cn-label">Latitud</label>
203                        <div class="cn-sexagesimal-group">
204                            <input type="number" id="cn-lat-grados" class="cn-sex-input" min="0" max="90" step="1" placeholder="34" onchange="cnSexagesimalEditado()">
205                            <span class="cn-sex-label">°</span>
206                            <input type="number" id="cn-lat-min" class="cn-sex-input" min="0" max="59" step="1" placeholder="36" onchange="cnSexagesimalEditado()">
207                            <span class="cn-sex-label">'</span>
208                            <input type="number" id="cn-lat-seg" class="cn-sex-input" min="0" max="59" step="1" placeholder="13" onchange="cnSexagesimalEditado()">
209                            <span class="cn-sex-label">"</span>
210                            <select id="cn-lat-hem" class="cn-sex-select" onchange="cnSexagesimalEditado()">
211                                <option value="S">Sur (S)</option>
212                                <option value="N">Norte (N)</option>
213                            </select>
214                        </div>
215                    </div>
216                    
217                    <!-- Longitud -->
218                    <div style="margin-bottom:0.8rem;">
219                        <label class="cn-label">Longitud</label>
220                        <div class="cn-sexagesimal-group">
221                            <input type="number" id="cn-lon-grados" class="cn-sex-input" min="0" max="180" step="1" placeholder="58" onchange="cnSexagesimalEditado()">
222                            <span class="cn-sex-label">°</span>
223                            <input type="number" id="cn-lon-min" class="cn-sex-input" min="0" max="59" step="1" placeholder="22" onchange="cnSexagesimalEditado()">
224                            <span class="cn-sex-label">'</span>
225                            <input type="number" id="cn-lon-seg" class="cn-sex-input" min="0" max="59" step="1" placeholder="54" onchange="cnSexagesimalEditado()">
226                            <span class="cn-sex-label">"</span>
227                            <select id="cn-lon-hem" class="cn-sex-select" onchange="cnSexagesimalEditado()">
228                                <option value="W">Oeste (W)</option>
229                                <option value="E">Este (E)</option>
230                            </select>
231                        </div>
232                    </div>
233                    
234                    <!-- Huso horario -->
235                    <div style="margin-bottom:0.5rem;">
236                        <label class="cn-label">Huso Horario</label>
237                        <div class="cn-huso-group">
238                            <select id="cn-tz-signo" class="cn-sex-select" style="width:50px;">
239                                <option value="-">−</option>
240                                <option value="+">+</option>
241                            </select>
242                            <input type="number" id="cn-tz-horas" class="cn-huso-input" min="0" max="14" step="1" placeholder="3" value="3">
243                            <span class="cn-sex-label">h</span>
244                            <input type="number" id="cn-tz-minutos" class="cn-huso-input" min="0" max="59" step="15" placeholder="00" value="0">
245                            <span class="cn-sex-label">m</span>
246                            <button class="cn-btn-secondary" style="padding:0.4rem 0.6rem;font-size:0.8rem;" onclick="cnAplicarHuso()">Aplicar</button>
247                        </div>
248                        <p style="color:#888;font-size:0.75rem;margin-top:0.3rem;">
249                            Ej: Argentina = −3:00 | España = +1:00 | India = +5:30
250                        </p>
251                    </div>
252                    
253                    <!-- Campos ocultos (valores decimales para la API) -->
254                    <input type="hidden" id="cn-lat">
255                    <input type="hidden" id="cn-lon">
256                    <input type="hidden" id="cn-tz-offset">
257                    
258                    <!-- Info resultante -->
259                    <div id="cn-coords-resultado" style="display:none;margin-top:0.5rem;padding:0.5rem;background:rgba(212,175,55,0.1);border-radius:4px;font-size:0.8rem;color:#d4af37;"></div>
260                </div>
261                
262                <!-- Botón calcular -->
263                <button id="cn-btn-calcular" class="cn-btn-primary" onclick="cnCalcularCarta()">
264                    🔮 Calcular Carta Natal
265                </button>
266                
267                <!-- Botón guardar (aparece después de calcular) -->
268                <div id="cn-acciones-post" style="display:none;">
269                    <div class="cn-row-2">
270                        <button class="cn-btn-secondary" onclick="cnGuardarDatos()">
271                            💾 Guardar esta carta
272                        </button>
273                        <button class="cn-btn-secondary" onclick="cnVerCartaGuardada()">
274                            📊 Ver carta nuevamente
275                        </button>
276                    </div>
277                </div>
278            </div>
279        </section>
280
281        <!-- Cartas guardadas -->
282        <section class="card" id="cn-guardadas-section">
283            <h2 class="card-title">📋 Cartas Guardadas</h2>
284            <div id="cn-guardadas-lista">
285                <p style="color:#888;font-size:0.9rem;">
285No hay cartas guardadas todavía.</p>
286            </div>
287        </section>
288    </main>
289
290    <!-- Footer -->
291    <footer class="footer">
292        <p>La Nación de Urania &copy; 2025</p>
293        <p style="font-size: 0.85rem; color: var(--color-texto-secundario); margin-top: 0.3rem;">
294            Contacto: <a id="email-link" href="#" style="color: var(--color-acento);">cargando...</a>
295        </p>
296    </footer>
297
298<!-- Modal Carta Natal (mismo que en otras páginas pero con botones imprimir/pdf) -->
299<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;">
300    <div style="max-width:960px;margin:0 auto;background:#0f0f1e;border-radius:12px;border:1px solid #2a2a4a;overflow:hidden;">
301        <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;">
302            <h2 id="cf-carta-titulo" style="color:#d4af37;font-family:'Cinzel',serif;font-size:1.1rem;margin:0;">Carta Natal</h2>
303            <div style="display:flex;gap:0.5rem;align-items:center;">
304                <button id="cn-btn-imprimir" onclick="cfImprimirCarta()" title="Imprimir" style="background:none;border:1px solid #555;border-radius:4px;color:#ccc;font-size:1rem;cursor:pointer;padding:0.3rem 0.6rem;">🖨️</button>
305                <button onclick="cfGuardarPDF()" title="Guardar PDF" style="background:none;border:1px solid #555;border-radius:4px;color:#ccc;font-size:1rem;cursor:pointer;padding:0.3rem 0.6rem;">📄</button>
306                <button id="cf-btn-cerrar" style="background:none;border:none;color:#eee;font-size:2rem;cursor:pointer;padding:0 0.5rem;">&times;</button>
307            </div>
308        </div>
309        <div style="padding:1rem 1.5rem;">
310            <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;">
311                <span style="color:#888;">&#128205;</span>
312                <strong id="cf-ubicacion-texto" style="color:#d4af37;">Detectando...</strong>
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 src="/static/js/carta-natal.js"></script>
337
338
339    
339<script>
340    // Email anti-obfuscation
341    (function(){
342        var e=document.getElementById('email-link');
343        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;};}
344    })();
345    </script>
345
346    
347    
347<script>
348    // Hamburger menu
349    document.addEventListener('DOMContentLoaded', function() {
350        var hamburger = document.getElementById('hamburger-btn');
351        var nav = document.getElementById('main-nav');
352        var overlay = document.getElementById('menu-overlay');
353        if (hamburger && nav) {
354            hamburger.addEventListener('click', function() {
355                nav.classList.toggle('active');
356                if (overlay) overlay.classList.toggle('active');
357            });
358            if (overlay) overlay.addEventListener('click', function() {
359                nav.classList.remove('active');
360                overlay.classList.remove('active');
361            });
362            nav.querySelectorAll('.nav-link').forEach(function(link) {
363                link.addEventListener('click', function() {
364                    nav.classList.remove('active');
365                    if (overlay) overlay.classList.remove('active');
366                });
367            });
368        }
369        // Cargar cartas guardadas
370        cnCargarGuardadas();
371    });
372    </script>
vendor: 1 bytes, line 372
372
373<script src="/static/js/capacitor-fcm-init.js"></script>
373</body>
374</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.