* { box-sizing: border-box; } body { margin: 0; overflow: hidden; background: #000; font-family: system-ui, -apple-system, sans-serif; } #canvas { display: block; } .control-panel { position: fixed; top: 20px; left: 20px; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(71, 85, 105, 0.5); border-radius: 16px; padding: 20px; color: white; z-index: 100; min-width: 260px; max-height: calc(100vh - 40px); overflow-y: auto; } .control-panel h2 { font-size: 1.25rem; font-weight: bold; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .control-section { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(71, 85, 105, 0.5); } .control-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .control-section h3 { font-size: 0.875rem; font-weight: 600; color: #94a3b8; margin-bottom: 12px; } .btn { padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer; font-size: 0.875rem; font-weight: 500; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; } .btn-primary { background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: white; } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); } .btn-secondary { background: rgba(71, 85, 105, 0.5); color: white; border: 1px solid rgba(71, 85, 105, 0.8); } .btn-secondary:hover { background: rgba(71, 85, 105, 0.8); } .btn-group { display: flex; gap: 8px; flex-wrap: wrap; } .slider-container { margin-bottom: 12px; } .slider-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 0.875rem; } .slider-value { color: #60a5fa; font-weight: 600; } input[type="range"] { width: 100%; height: 6px; border-radius: 3px; background: #334155; outline: none; -webkit-appearance: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #8b5cf6); cursor: pointer; } .checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 0; font-size: 0.875rem; } .checkbox-label input { width: 16px; height: 16px; accent-color: #3b82f6; } .info-panel { position: fixed; top: 20px; right: 20px; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(71, 85, 105, 0.5); border-radius: 12px; padding: 16px; color: white; z-index: 100; min-width: 200px; } .info-panel h3 { font-size: 1rem; font-weight: bold; margin-bottom: 12px; } .info-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.8rem; border-bottom: 1px solid rgba(71, 85, 105, 0.3); } .info-row:last-child { border-bottom: none; } .info-label { color: #94a3b8; } .info-value { color: #e2e8f0; font-weight: 500; } .phase-display { text-align: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(71, 85, 105, 0.5); } .phase-icon { font-size: 2.5rem; margin-bottom: 4px; } .phase-name { font-size: 0.875rem; color: #94a3b8; } .back-link { position: fixed; bottom: 20px; right: 20px; color: #94a3b8; text-decoration: none; font-size: 0.875rem; padding: 10px 16px; background: rgba(15, 23, 42, 0.9); border-radius: 8px; border: 1px solid rgba(71, 85, 105, 0.5); z-index: 100; transition: all 0.2s; } .back-link:hover { color: white; border-color: #3b82f6; } .view-btn { padding: 6px 12px; font-size: 0.75rem; } .view-btn.active { background: linear-gradient(135deg, #3b82f6, #8b5cf6); border-color: transparent; } @media (max-width: 768px) { .control-panel { top: auto; bottom: 70px; left: 10px; right: 10px; max-height: 40vh; min-width: auto; } .info-panel { top: 10px; right: 10px; left: 10px; min-width: auto; } }
β
Back
Loading 3D Scene...
0%
π
Controls
βΌ
βΈοΈ
Pause
View Mode
Side
Top
Earth
Time Scale
1 day/s
Zoom
1.0x
Display
Moon Orbit
Tidal Bulge
Shadows
Labels
Reset
Screenshot
Information
βΌ
ε°η
Earth
Planet
Day
0
Distance
384,400 km
Moon Position
0Β°
π
New Moon
Click Earth or Moon for details