Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>{% block title %}Constellar Chatbot{% endblock %}</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script>tailwind.config = { theme: { extend: { fontFamily: { 'orbitron': ['Orbitron', 'monospace'] } } } }</script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@700;900&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg: #060d1f; | |
| --surface: rgba(255,255,255,0.03); | |
| --border: rgba(255,255,255,0.07); | |
| --accent: #6366f1; | |
| --accent-dim: rgba(99,102,241,0.15); | |
| --text: #dde4f0; | |
| --muted: rgba(221,228,240,0.45); | |
| } | |
| *, *::before, *::after { box-sizing: border-box; } | |
| body { | |
| margin: 0; | |
| font-family: 'Inter', system-ui, sans-serif; | |
| background: linear-gradient(180deg, #0b1630 0%, #060d1f 45%, #040917 100%) fixed; | |
| color: var(--text); | |
| min-height: 100vh; | |
| } | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| z-index: 0; | |
| pointer-events: none; | |
| background-image: | |
| radial-gradient(1.5px 1.5px at 40px 60px, rgba(255,255,255,.50), transparent), | |
| radial-gradient(1px 1px at 150px 155px, rgba(255,255,255,.35), transparent), | |
| radial-gradient(1.5px 1.5px at 280px 40px, rgba(200,210,255,.40), transparent), | |
| radial-gradient(1px 1px at 420px 200px, rgba(255,255,255,.45), transparent), | |
| radial-gradient(1px 1px at 520px 90px, rgba(255,255,255,.30), transparent), | |
| radial-gradient(1.5px 1.5px at 90px 300px, rgba(255,255,255,.40), transparent), | |
| radial-gradient(1px 1px at 230px 410px, rgba(200,210,255,.35), transparent), | |
| radial-gradient(1.5px 1.5px at 360px 520px, rgba(255,255,255,.35), transparent), | |
| radial-gradient(1px 1px at 500px 380px, rgba(255,255,255,.40), transparent), | |
| radial-gradient(1px 1px at 50px 480px, rgba(255,255,255,.30), transparent); | |
| background-size: 600px 600px; | |
| animation: starDrift1 240s linear infinite, starTwinkle1 9s ease-in-out infinite; | |
| } | |
| body::after { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| z-index: 0; | |
| pointer-events: none; | |
| background-image: | |
| radial-gradient(2px 2px at 120px 200px, rgba(255,255,255,.45), transparent), | |
| radial-gradient(1.5px 1.5px at 480px 80px, rgba(200,210,255,.40), transparent), | |
| radial-gradient(2px 2px at 700px 450px, rgba(255,255,255,.35), transparent), | |
| radial-gradient(1.5px 1.5px at 300px 600px, rgba(255,255,255,.40), transparent), | |
| radial-gradient(2px 2px at 820px 720px, rgba(200,210,255,.30), transparent), | |
| radial-gradient(1.5px 1.5px at 600px 280px, rgba(255,255,255,.35), transparent); | |
| background-size: 900px 900px; | |
| animation: starDrift2 380s linear infinite, starTwinkle2 14s ease-in-out infinite; | |
| } | |
| @keyframes starDrift1 { from { background-position: 0 0; } to { background-position: 0 600px; } } | |
| @keyframes starDrift2 { from { background-position: 0 0; } to { background-position: 0 900px; } } | |
| @keyframes starTwinkle1 { 0%, 100% { opacity: .95; } 50% { opacity: .55; } } | |
| @keyframes starTwinkle2 { 0%, 100% { opacity: .65; } 50% { opacity: 1; } } | |
| .bg-nebula { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 0; | |
| pointer-events: none; | |
| background: | |
| radial-gradient(640px 420px at 12% -5%, rgba(99,102,241,.14), transparent 70%), | |
| radial-gradient(720px 520px at 90% 15%, rgba(139,92,246,.09), transparent 70%), | |
| radial-gradient(900px 640px at 50% 110%, rgba(45,212,191,.055), transparent 70%); | |
| } | |
| .nav-logo svg line { | |
| stroke-dasharray: 26; | |
| stroke-dashoffset: 26; | |
| animation: drawline .9s ease forwards; | |
| } | |
| .nav-logo svg line:nth-of-type(1) { animation-delay: .10s; } | |
| .nav-logo svg line:nth-of-type(2) { animation-delay: .25s; } | |
| .nav-logo svg line:nth-of-type(3) { animation-delay: .40s; } | |
| .nav-logo svg line:nth-of-type(4) { animation-delay: .55s; } | |
| .nav-logo svg line:nth-of-type(5) { animation-delay: .70s; } | |
| @keyframes drawline { to { stroke-dashoffset: 0; } } | |
| @media (prefers-reduced-motion: reduce) { | |
| body::before, body::after { animation: none; } | |
| .nav-logo svg line { animation: none; stroke-dashoffset: 0; } | |
| } | |
| .page-wrap { position: relative; z-index: 1; } | |
| .site-header { | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| border-bottom: 1px solid var(--border); | |
| background: rgba(6,13,31,.88); | |
| backdrop-filter: blur(20px); | |
| } | |
| .nav-inner { | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| padding: 0 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| height: 60px; | |
| } | |
| .nav-logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| text-decoration: none; | |
| } | |
| .nav-logo-text { | |
| font-family: 'Orbitron', monospace; | |
| font-size: .75rem; | |
| font-weight: 900; | |
| letter-spacing: .12em; | |
| color: #fff; | |
| } | |
| .nav-links { | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| list-style: none; | |
| margin: 0; padding: 0; | |
| } | |
| .nav-links a { | |
| font-size: .8125rem; | |
| font-weight: 500; | |
| color: var(--muted); | |
| text-decoration: none; | |
| letter-spacing: .01em; | |
| transition: color .18s; | |
| position: relative; | |
| padding-bottom: 2px; | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; left: 0; | |
| width: 0; height: 1px; | |
| background: var(--accent); | |
| transition: width .18s; | |
| } | |
| .nav-links a:hover { color: #fff; } | |
| .nav-links a:hover::after { width: 100%; } | |
| .nav-actions { display: flex; align-items: center; gap: .625rem; } | |
| .btn-ghost { | |
| font-size: .8125rem; | |
| font-weight: 500; | |
| color: var(--muted); | |
| padding: .45rem 1rem; | |
| border-radius: 6px; | |
| border: 1px solid var(--border); | |
| background: transparent; | |
| text-decoration: none; | |
| transition: all .18s; | |
| } | |
| .btn-ghost:hover { | |
| color: #fff; | |
| border-color: rgba(255,255,255,.18); | |
| background: rgba(255,255,255,.05); | |
| } | |
| .btn-accent { | |
| font-size: .8125rem; | |
| font-weight: 600; | |
| color: #fff; | |
| padding: .45rem 1.125rem; | |
| border-radius: 6px; | |
| background: var(--accent); | |
| text-decoration: none; | |
| transition: all .18s; | |
| } | |
| .btn-accent:hover { | |
| background: #818cf8; | |
| box-shadow: 0 0 20px rgba(99,102,241,.4); | |
| transform: translateY(-1px); | |
| } | |
| .nav-mobile-btn { | |
| display: none; | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| color: var(--muted); | |
| padding: .25rem; | |
| } | |
| .nav-mobile-btn:hover { color: #fff; } | |
| .nav-mobile-menu { | |
| display: none; | |
| flex-direction: column; | |
| gap: .25rem; | |
| padding: .75rem 1.5rem 1rem; | |
| border-top: 1px solid var(--border); | |
| } | |
| .nav-mobile-menu a { | |
| font-size: .875rem; | |
| color: var(--muted); | |
| text-decoration: none; | |
| padding: .625rem .75rem; | |
| border-radius: 6px; | |
| transition: all .15s; | |
| } | |
| .nav-mobile-menu a:hover { | |
| color: #fff; | |
| background: rgba(255,255,255,.05); | |
| } | |
| .nav-mobile-menu .mobile-actions { | |
| display: flex; | |
| gap: .5rem; | |
| margin-top: .5rem; | |
| } | |
| .nav-mobile-menu .mobile-actions a { | |
| flex: 1; | |
| text-align: center; | |
| padding: .6rem; | |
| } | |
| @media (max-width: 768px) { | |
| .nav-links, .nav-actions { display: none; } | |
| .nav-mobile-btn { display: block; } | |
| .nav-mobile-menu.open { display: flex; } | |
| } | |
| .site-footer { | |
| margin-top: 4rem; | |
| border-top: 1px solid var(--border); | |
| } | |
| .footer-inner { | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| padding: 2.5rem 1.5rem 1.5rem; | |
| } | |
| .footer-bottom { | |
| border-top: 1px solid var(--border); | |
| padding-top: 1rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: .5rem; | |
| } | |
| .footer-bottom span { font-size: .75rem; color: rgba(255,255,255,.2); } | |
| </style> | |
| {% block extra_css %}{% endblock %} | |
| </head> | |
| <body> | |
| <div class="bg-nebula"></div> | |
| <div class="page-wrap"> | |
| <header class="site-header"> | |
| <div class="nav-inner"> | |
| <a href="{{ PREDICTOR_BASE_URL }}" class="nav-logo"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none"> | |
| <circle cx="12" cy="12" r="2.5" fill="#6366f1"/> | |
| <circle cx="4" cy="5" r="1.5" fill="rgba(99,102,241,.7)"/> | |
| <circle cx="21" cy="3" r="1" fill="rgba(255,255,255,.5)"/> | |
| <circle cx="19" cy="20" r="1.5" fill="rgba(99,102,241,.6)"/> | |
| <circle cx="5" cy="21" r="1" fill="rgba(255,255,255,.4)"/> | |
| <circle cx="22" cy="13" r="1" fill="rgba(255,255,255,.35)"/> | |
| <line x1="4" y1="5" x2="12" y2="12" stroke="rgba(99,102,241,.35)" stroke-width=".8"/> | |
| <line x1="12" y1="12" x2="21" y2="3" stroke="rgba(99,102,241,.25)" stroke-width=".8"/> | |
| <line x1="12" y1="12" x2="19" y2="20" stroke="rgba(99,102,241,.35)" stroke-width=".8"/> | |
| <line x1="12" y1="12" x2="5" y2="21" stroke="rgba(99,102,241,.25)" stroke-width=".8"/> | |
| <line x1="12" y1="12" x2="22" y2="13" stroke="rgba(99,102,241,.2)" stroke-width=".8"/> | |
| </svg> | |
| <span class="nav-logo-text">CONSTELLAR</span> | |
| </a> | |
| <ul class="nav-links"> | |
| <li><a href="{{ PREDICTOR_BASE_URL }}">Home</a></li> | |
| <li><a href="{{ PREDICTOR_BASE_URL }}predict/">Predict</a></li> | |
| <li><a href="{{ PREDICTOR_BASE_URL }}database/">Database</a></li> | |
| <li><a href="{{ CHATBOT_BASE_URL }}">Chatbot</a></li> | |
| <li><a href="{{ LOCATOR_BASE_URL }}">Locator</a></li> | |
| </ul> | |
| <div class="nav-actions"> | |
| <a href="{{ PREDICTOR_BASE_URL }}upload/" class="btn-ghost">Upload Image</a> | |
| <a href="{{ PREDICTOR_BASE_URL }}detect/" class="btn-accent">Live Detection →</a> | |
| </div> | |
| <button class="nav-mobile-btn" id="mobileMenuBtn" aria-label="Menu"> | |
| <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/> | |
| </svg> | |
| </button> | |
| </div> | |
| <nav class="nav-mobile-menu" id="mobileMenu"> | |
| <a href="{{ PREDICTOR_BASE_URL }}">Home</a> | |
| <a href="{{ PREDICTOR_BASE_URL }}predict/">Predict</a> | |
| <a href="{{ PREDICTOR_BASE_URL }}database/">Database</a> | |
| <a href="{{ CHATBOT_BASE_URL }}">Chatbot</a> | |
| <a href="{{ LOCATOR_BASE_URL }}">Locator</a> | |
| <div class="mobile-actions"> | |
| <a href="{{ PREDICTOR_BASE_URL }}upload/" class="btn-ghost">Upload</a> | |
| <a href="{{ PREDICTOR_BASE_URL }}detect/" class="btn-accent">Detect</a> | |
| </div> | |
| </nav> | |
| </header> | |
| <main>{% block content %}{% endblock %}</main> | |
| <footer class="site-footer"> | |
| <div class="footer-inner"> | |
| <div class="footer-bottom"> | |
| <span>© 2026 Constellar · Constellation Predictor</span> | |
| <span>Voice-enabled astronomy assistant</span> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| const btn = document.getElementById('mobileMenuBtn'); | |
| const menu = document.getElementById('mobileMenu'); | |
| btn.addEventListener('click', () => menu.classList.toggle('open')); | |
| </script> | |
| {% block extra_js %}{% endblock %} | |
| </body> | |
| </html> | |