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 © 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;">×</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;">📍</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;">🔮 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 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.