Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cosmic Explorer - Interactive Solar System</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap'); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Orbitron', monospace; | |
| overflow: hidden; | |
| background: #000; | |
| } | |
| #solarCanvas { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| z-index: 1; | |
| } | |
| .ui-overlay { | |
| position: relative; | |
| z-index: 10; | |
| pointer-events: none; | |
| } | |
| .ui-overlay > * { | |
| pointer-events: auto; | |
| } | |
| .glow-text { | |
| text-shadow: 0 0 20px rgba(147, 51, 234, 0.5), 0 0 40px rgba(147, 51, 234, 0.3); | |
| } | |
| .glass-effect { | |
| background: rgba(15, 23, 42, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(147, 51, 234, 0.3); | |
| } | |
| .planet-info { | |
| animation: fadeIn 0.3s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .orbit-trail { | |
| stroke: rgba(147, 51, 234, 0.2); | |
| stroke-width: 1; | |
| fill: none; | |
| stroke-dasharray: 5, 5; | |
| animation: rotate 60s linear infinite; | |
| } | |
| @keyframes rotate { | |
| from { stroke-dashoffset: 0; } | |
| to { stroke-dashoffset: 10; } | |
| } | |
| .star { | |
| position: absolute; | |
| background: white; | |
| border-radius: 50%; | |
| } | |
| .control-button { | |
| transition: all 0.3s ease; | |
| } | |
| .control-button:hover { | |
| transform: scale(1.1); | |
| box-shadow: 0 0 20px rgba(147, 51, 234, 0.5); | |
| } | |
| .speed-indicator { | |
| background: linear-gradient(90deg, #9333ea, #ec4899); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-slate-900 text-white"> | |
| <canvas id="solarCanvas"></canvas> | |
| <!-- Stars Background --> | |
| <div id="starsContainer"></div> | |
| <!-- UI Overlay --> | |
| <div class="ui-overlay"> | |
| <!-- Header --> | |
| <header class="glass-effect p-4 flex justify-between items-center"> | |
| <div class="flex items-center gap-4"> | |
| <h1 class="text-2xl font-bold glow-text">Cosmic Explorer 🪐</h1> | |
| <div class="text-sm text-purple-300"> | |
| <span id="dateDisplay"></span> | |
| </div> | |
| <div class="text-sm text-yellow-400 flex items-center gap-2"> | |
| <i data-feather="clock" class="w-4 h-4"></i> | |
| <span id="timeDisplay">Time Lapse: 0D</span> | |
| </div> | |
| <div class="text-sm text-green-400 flex items-center gap-2"> | |
| <i data-feather="map-pin" class="w-4 h-4"></i> | |
| <span id="locationDisplay">Loading location...</span> | |
| </div> | |
| </div> | |
| <div class="flex gap-4"> | |
| <button id="fullscreenBtn" class="control-button glass-effect px-4 py-2 rounded-lg flex items-center gap-2"> | |
| <i data-feather="maximize" class="w-4 h-4"></i> | |
| <span class="hidden sm:inline">Fullscreen</span> | |
| </button> | |
| <button id="infoBtn" class="control-button glass-effect px-4 py-2 rounded-lg flex items-center gap-2"> | |
| <i data-feather="info" class="w-4 h-4"></i> | |
| <span class="hidden sm:inline">Info</span> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Planet Information Panel --> | |
| <div id="planetInfo" class="planet-info fixed top-24 left-4 glass-effect p-6 rounded-xl max-w-sm hidden"> | |
| <button id="closeInfo" class="absolute top-2 right-2 text-gray-400 hover:text-white"> | |
| <i data-feather="x" class="w-5 h-5"></i> | |
| </button> | |
| <h2 id="planetName" class="text-xl font-bold mb-3"></h2> | |
| <div class="space-y-2 text-sm"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Type:</span> | |
| <span id="planetType"></span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Distance from Sun:</span> | |
| <span id="planetDistance"></span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Orbital Period:</span> | |
| <span id="planetPeriod"></span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Diameter:</span> | |
| <span id="planetDiameter"></span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Moons:</span> | |
| <span id="planetMoons"></span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Controls Panel --> | |
| <div class="fixed bottom-4 left-4 glass-effect p-4 rounded-xl"> | |
| <div class="space-y-4"> | |
| <div class="flex items-center gap-4"> | |
| <label class="text-sm text-gray-300">Time Speed</label> | |
| <input type="range" id="speedSlider" min="0" max="100" value="1" step="0.1" class="w-32"> | |
| <span id="speedValue" class="speed-indicator font-bold">1.0x</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <label class="text-sm text-gray-300">Zoom</label> | |
| <input type="range" id="zoomSlider" min="0.5" max="3" value="1" step="0.1" class="w-32"> | |
| <span id="zoomValue" class="text-purple-300 font-bold">1.0x</span> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button id="pauseBtn" class="control-button bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg flex items-center gap-2"> | |
| <i data-feather="pause" class="w-4 h-4"></i> | |
| <span>Pause</span> | |
| </button> | |
| <button id="resetBtn" class="control-button bg-slate-600 hover:bg-slate-700 px-4 py-2 rounded-lg flex items-center gap-2"> | |
| <i data-feather="refresh-cw" class="w-4 h-4"></i> | |
| <span>Reset</span> | |
| </button> | |
| </div> | |
| <div class="time-controls"> | |
| <span class="text-xs text-gray-400">Quick jump:</span> | |
| <div class="time-unit" data-time="1">1D</div> | |
| <div class="time-unit" data-time="7">1W</div> | |
| <div class="time-unit" data-time="30">1M</div> | |
| <div class="time-unit" data-time="365">1Y</div> | |
| <div class="time-unit" data-time="3650">10Y</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Legend --> | |
| <div class="fixed bottom-4 right-4 glass-effect p-4 rounded-xl"> | |
| <h3 class="text-sm font-bold mb-2 text-purple-300">Planets</h3> | |
| <div class="space-y-1 text-xs"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-3 h-3 rounded-full bg-yellow-400"></div> | |
| <span>Sun</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-2 h-2 rounded-full bg-gray-400"></div> | |
| <span>Mercury</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-2 h-2 rounded-full bg-yellow-200"></div> | |
| <span>Venus</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-2 h-2 rounded-full bg-blue-500"></div> | |
| <span>Earth</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-2 h-2 rounded-full bg-red-500"></div> | |
| <span>Mars</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-2 h-2 rounded-full bg-orange-400"></div> | |
| <span>Jupiter</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-2 h-2 rounded-full bg-yellow-600"></div> | |
| <span>Saturn</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-2 h-2 rounded-full bg-cyan-400"></div> | |
| <span>Uranus</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-2 h-2 rounded-full bg-blue-700"></div> | |
| <span>Neptune</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats Display --> | |
| <div class="fixed top-24 right-4 glass-effect p-4 rounded-xl"> | |
| <h3 class="text-sm font-bold mb-2 text-purple-300">Statistics</h3> | |
| <div class="space-y-1 text-xs"> | |
| <div class="flex justify-between gap-4"> | |
| <span class="text-gray-400">FPS:</span> | |
| <span id="fpsDisplay">60</span> | |
| </div> | |
| <div class="flex justify-between gap-4"> | |
| <span class="text-gray-400">Days Elapsed:</span> | |
| <span id="daysDisplay">0</span> | |
| </div> | |
| <div class="flex justify-between gap-4"> | |
| <span class="text-gray-400">Years Elapsed:</span> | |
| <span id="yearsDisplay">0</span> | |
| </div> | |
| <div class="flex justify-between gap-4"> | |
| <span class="text-gray-400">Current Date:</span> | |
| <span id="currentDateDisplay" class="text-blue-300"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |