Spaces:
Running
Running
Can we add actual images of the moon phases or illustrations, please? - Initial Deployment
d6e8240 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Space Dashboard - Moon Phases & Rocket Launches</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| space: { | |
| dark: '#0f172a', | |
| light: '#1e293b', | |
| accent: '#7c3aed', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .moon-phase { | |
| transition: all 0.3s ease; | |
| } | |
| .moon-phase:hover { | |
| transform: scale(1.05); | |
| } | |
| .launch-card { | |
| transition: all 0.3s ease; | |
| } | |
| .launch-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(124, 58, 237, 0.3); | |
| } | |
| .animate-pulse-slow { | |
| animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-space-dark text-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex flex-col md:flex-row justify-between items-center mb-12"> | |
| <div class="mb-4 md:mb-0"> | |
| <h1 class="text-3xl font-bold bg-gradient-to-r from-purple-500 to-indigo-600 bg-clip-text text-transparent"> | |
| <i class="fas fa-moon mr-2"></i>Space Dashboard | |
| </h1> | |
| <p class="text-sm text-gray-400">Track celestial events and space exploration</p> | |
| </div> | |
| <div id="location" class="bg-space-light px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-map-marker-alt text-purple-500 mr-2"></i> | |
| <span class="animate-pulse-slow">Detecting your location...</span> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Moon Phases Section --> | |
| <section class="lg:col-span-2 bg-space-light rounded-xl p-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-semibold"> | |
| <i class="fas fa-moon mr-2 text-purple-500"></i>Moon Phases | |
| </h2> | |
| <div class="text-sm bg-purple-900 bg-opacity-50 px-3 py-1 rounded-full"> | |
| <span id="current-moon-phase">Loading...</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col items-center mb-8"> | |
| <div id="current-moon-image" class="w-48 h-48 rounded-full mb-4 overflow-hidden"> | |
| <img src="https://svs.gsfc.nasa.gov/vis/a000000/a004700/a004720/phase0001_print.jpg" class="w-full h-full object-cover" id="moon-phase-image" alt="Current Moon Phase"> | |
| </div> | |
| <h3 class="text-xl font-medium" id="current-phase-title">Current Moon Phase</h3> | |
| </div> | |
| <div class="grid grid-cols-4 md:grid-cols-8 gap-4 mb-8"> | |
| <div class="moon-phase flex flex-col items-center p-2 rounded-lg cursor-pointer hover:bg-space-dark"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Moon_phases_en.jpg/120px-Moon_phases_en.jpg" class="w-12 h-12 rounded-full object-cover object-left" style="object-position: 0% 0%" alt="New Moon"> | |
| <span class="text-xs">New Moon</span> | |
| </div> | |
| <div class="moon-phase flex flex-col items-center p-2 rounded-lg cursor-pointer hover:bg-space-dark"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Moon_phases_en.jpg/120px-Moon_phases_en.jpg" class="w-12 h-12 rounded-full object-cover object-left" style="object-position: 14.2857% 0%" alt="Waxing Crescent"> | |
| <span class="text-xs">Waxing Crescent</span> | |
| </div> | |
| <div class="moon-phase flex flex-col items-center p-2 rounded-lg cursor-pointer hover:bg-space-dark"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Moon_phases_en.jpg/120px-Moon_phases_en.jpg" class="w-12 h-12 rounded-full object-cover object-left" style="object-position: 28.5714% 0%" alt="First Quarter"> | |
| <span class="text-xs">First Quarter</span> | |
| </div> | |
| <div class="moon-phase flex flex-col items-center p-2 rounded-lg cursor-pointer hover:bg-space-dark"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Moon_phases_en.jpg/120px-Moon_phases_en.jpg" class="w-12 h-12 rounded-full object-cover object-left" style="object-position: 42.8571% 0%" alt="Waxing Gibbous"> | |
| <span class="text-xs">Waxing Gibbous</span> | |
| </div> | |
| <div class="moon-phase flex flex-col items-center p-2 rounded-lg cursor-pointer hover:bg-space-dark"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Moon_phases_en.jpg/120px-Moon_phases_en.jpg" class="w-12 h-12 rounded-full object-cover object-left" style="object-position: 57.1428% 0%" alt="Full Moon"> | |
| <span class="text-xs">Full Moon</span> | |
| </div> | |
| <div class="moon-phase flex flex-col items-center p-2 rounded-lg cursor-pointer hover:bg-space-dark"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Moon_phases_en.jpg/120px-Moon_phases_en.jpg" class="w-12 h-12 rounded-full object-cover object-left" style="object-position: 71.4285% 0%" alt="Waning Gibbous"> | |
| <span class="text-xs">Waning Gibbous</span> | |
| </div> | |
| <div class="moon-phase flex flex-col items-center p-2 rounded-lg cursor-pointer hover:bg-space-dark"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Moon_phases_en.jpg/120px-Moon_phases_en.jpg" class="w-12 h-12 rounded-full object-cover object-left" style="object-position: 85.7142% 0%" alt="Last Quarter"> | |
| <span class="text-xs">Last Quarter</span> | |
| </div> | |
| <div class="moon-phase flex flex-col items-center p-2 rounded-lg cursor-pointer hover:bg-space-dark"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Moon_phases_en.jpg/120px-Moon_phases_en.jpg" class="w-12 h-12 rounded-full object-cover object-left" style="object-position: 100% 0%" alt="Waning Crescent"> | |
| <span class="text-xs">Waning Crescent</span> | |
| </div> | |
| </div> | |
| <div class="bg-space-dark rounded-lg p-4"> | |
| <h3 class="font-medium mb-2">Current Moon Information</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="bg-space-light p-3 rounded-lg"> | |
| <p class="text-xs text-gray-400">Illumination</p> | |
| <p class="font-semibold" id="moon-illumination">--%</p> | |
| </div> | |
| <div class="bg-space-light p-3 rounded-lg"> | |
| <p class="text-xs text-gray-400">Age</p> | |
| <p class="font-semibold" id="moon-age">-- days</p> | |
| </div> | |
| <div class="bg-space-light p-3 rounded-lg"> | |
| <p class="text-xs text-gray-400">Next Full Moon</p> | |
| <p class="font-semibold" id="next-full-moon">-- days</p> | |
| </div> | |
| <div class="bg-space-light p-3 rounded-lg"> | |
| <p class="text-xs text-gray-400">Next New Moon</p> | |
| <p class="font-semibold" id="next-new-moon">-- days</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Rocket Launches Section --> | |
| <section class="bg-space-light rounded-xl p-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-semibold"> | |
| <i class="fas fa-rocket mr-2 text-purple-500"></i>Upcoming Launches | |
| </h2> | |
| <button id="refresh-launches" class="text-purple-500 hover:text-purple-400"> | |
| <i class="fas fa-sync-alt"></i> | |
| </button> | |
| </div> | |
| <div id="launches-container" class="space-y-4"> | |
| <!-- Launch cards will be inserted here --> | |
| <div class="launch-card bg-space-dark rounded-lg p-4 border-l-4 border-purple-500"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">Loading launches...</h3> | |
| <span class="text-xs bg-purple-900 bg-opacity-50 px-2 py-1 rounded-full">TBD</span> | |
| </div> | |
| <p class="text-sm text-gray-400 mb-3">Fetching launch data...</p> | |
| <div class="flex items-center text-xs text-gray-400"> | |
| <i class="fas fa-map-marker-alt mr-1"></i> | |
| <span>Unknown Launch Site</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <a href="https://www.rocketlaunch.live/" target="_blank" class="text-purple-500 hover:text-purple-400 text-sm inline-flex items-center"> | |
| View all launches <i class="fas fa-external-link-alt ml-1 text-xs"></i> | |
| </a> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="mt-12 pt-6 border-t border-gray-800 text-center text-sm text-gray-500"> | |
| <p>Data provided by free APIs. Last updated: <span id="last-updated">Just now</span></p> | |
| <p class="mt-1">© <span id="current-year"></span> Space Dashboard - Not affiliated with NASA or SpaceX</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Set current year in footer | |
| document.getElementById('current-year').textContent = new Date().getFullYear(); | |
| // Get user's location | |
| function getLocation() { | |
| if (navigator.geolocation) { | |
| navigator.geolocation.getCurrentPosition( | |
| showPosition, | |
| showError, | |
| { enableHighAccuracy: true, timeout: 10000 } | |
| ); | |
| } else { | |
| document.getElementById('location').innerHTML = '<i class="fas fa-map-marker-alt text-purple-500 mr-2"></i>Location not supported'; | |
| } | |
| } | |
| function showPosition(position) { | |
| const latitude = position.coords.latitude.toFixed(4); | |
| const longitude = position.coords.longitude.toFixed(4); | |
| // Reverse geocoding would typically be done with a service like Google Maps API | |
| // For this demo, we'll just show coordinates | |
| // This would normally come from a reverse geocode API | |
| const mockStates = ['Florida', 'California', 'Texas', 'New York', 'Hawaii']; | |
| const userState = mockStates[Math.floor(Math.random() * mockStates.length)]; | |
| document.getElementById('location').innerHTML = ` | |
| <i class="fas fa-map-marker-alt text-purple-500 mr-2"></i> | |
| <span>${userState}, USA</span> | |
| `; | |
| // Store state for launch filtering | |
| window.userState = userState; | |
| // Now that we have location, we can get more accurate moon data | |
| updateMoonData(position.coords.latitude, position.coords.longitude); | |
| } | |
| function showError(error) { | |
| let message = "Location access denied"; | |
| if (error.code === error.PERMISSION_DENIED) { | |
| message = "Location access denied"; | |
| } else if (error.code === error.POSITION_UNAVAILABLE) { | |
| message = "Location unavailable"; | |
| } else if (error.code === error.TIMEOUT) { | |
| message = "Location request timed out"; | |
| } | |
| document.getElementById('location').innerHTML = ` | |
| <i class="fas fa-map-marker-alt text-purple-500 mr-2"></i> | |
| <span>${message}</span> | |
| `; | |
| // Use default coordinates if location access is denied | |
| updateMoonData(0, 0); | |
| } | |
| // Moon phase calculation | |
| function updateMoonData(lat, lon) { | |
| // In a real app, you would call an API with the coordinates | |
| // For this demo, we'll use static data | |
| // Simulate API delay | |
| setTimeout(() => { | |
| const phases = ["New Moon", "Waxing Crescent", "First Quarter", "Waxing Gibbous", | |
| "Full Moon", "Waning Gibbous", "Last Quarter", "Waning Crescent"]; | |
| const currentPhase = phases[Math.floor(Math.random() * phases.length)]; | |
| document.getElementById('current-moon-phase').textContent = currentPhase; | |
| document.getElementById('current-phase-title').textContent = currentPhase; | |
| document.getElementById('moon-illumination').textContent = `${Math.floor(Math.random() * 100)}%`; | |
| document.getElementById('moon-age').textContent = `${Math.floor(Math.random() * 29.5)} days`; | |
| document.getElementById('next-full-moon').textContent = `${Math.floor(Math.random() * 14)} days`; | |
| document.getElementById('next-new-moon').textContent = `${Math.floor(Math.random() * 14)} days`; | |
| // Update moon image based on phase | |
| const moonImage = document.getElementById('moon-phase-image'); | |
| const phasePositions = { | |
| "New Moon": "0%", | |
| "Waxing Crescent": "14.2857%", | |
| "First Quarter": "28.5714%", | |
| "Waxing Gibbous": "42.8571%", | |
| "Full Moon": "57.1428%", | |
| "Waning Gibbous": "71.4285%", | |
| "Last Quarter": "85.7142%", | |
| "Waning Crescent": "100%" | |
| }; | |
| moonImage.style.objectPosition = `${phasePositions[currentPhase]} 0%`; | |
| }, 1000); | |
| } | |
| // Fetch rocket launches | |
| function fetchLaunches() { | |
| // In a real app, you would call the Launch Library API or similar | |
| // For this demo, we'll use mock data | |
| // Simulate API delay | |
| setTimeout(() => { | |
| const mockLaunches = [ | |
| { | |
| name: "SpaceX Falcon 9 • Starlink Group 6-50", | |
| date: "2023-11-15T23:00:00Z", | |
| site: "Cape Canaveral SFS, Florida, USA", | |
| status: "Go for Launch" | |
| }, | |
| { | |
| name: "ULA Atlas V • USSF-52", | |
| date: "2023-12-07T14:00:00Z", | |
| site: "Cape Canaveral SFS, Florida, USA", | |
| status: "On Schedule" | |
| }, | |
| { | |
| name: "Ariane 5 • Galileo FOC FM25 & FM27", | |
| date: "2023-11-24T13:00:00Z", | |
| site: "Kourou, French Guiana", | |
| status: "On Schedule" | |
| }, | |
| { | |
| name: "Rocket Lab Electron • The Moon God Awakens", | |
| date: "2023-12-01T05:00:00Z", | |
| site: "Mahia Peninsula, New Zealand", | |
| status: "On Schedule" | |
| } | |
| ]; | |
| const container = document.getElementById('launches-container'); | |
| container.innerHTML = ''; | |
| const filteredLaunches = mockLaunches.filter(launch => { | |
| return window.userState && launch.site.includes(window.userState); | |
| }); | |
| if (filteredLaunches.length === 0) { | |
| const container = document.getElementById('launches-container'); | |
| container.innerHTML = ` | |
| <div class="launch-card bg-space-dark rounded-lg p-4 border-l-4 border-purple-500"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">No upcoming launches in ${window.userState}</h3> | |
| </div> | |
| <p class="text-sm text-gray-400 mb-3">Check back later for updates</p> | |
| </div> | |
| `; | |
| return; | |
| } | |
| filteredLaunches.forEach(launch => { | |
| const launchDate = new Date(launch.date); | |
| const now = new Date(); | |
| const daysUntil = Math.ceil((launchDate - now) / (1000 * 60 * 60 * 24)); | |
| let statusClass = "bg-gray-700"; | |
| if (launch.status.includes("Go")) statusClass = "bg-green-700"; | |
| else if (launch.status.includes("Schedule")) statusClass = "bg-blue-700"; | |
| const card = document.createElement('div'); | |
| card.className = 'launch-card bg-space-dark rounded-lg p-4 border-l-4 border-purple-500 mb-4'; | |
| card.innerHTML = ` | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">${launch.name}</h3> | |
| <span class="text-xs ${statusClass} bg-opacity-50 px-2 py-1 rounded-full">${daysUntil}d</span> | |
| </div> | |
| <p class="text-sm text-gray-400 mb-3">${launchDate.toLocaleString()}</p> | |
| <div class="flex items-center text-xs text-gray-400"> | |
| <i class="fas fa-map-marker-alt mr-1"></i> | |
| <span>${launch.site}</span> | |
| </div> | |
| `; | |
| container.appendChild(card); | |
| }); | |
| document.getElementById('last-updated').textContent = new Date().toLocaleString(); | |
| }, 1500); | |
| } | |
| // Refresh launches button | |
| document.getElementById('refresh-launches').addEventListener('click', fetchLaunches); | |
| // Initialize everything when page loads | |
| window.addEventListener('load', () => { | |
| getLocation(); | |
| fetchLaunches(); | |
| // Set up moon phase click events | |
| document.querySelectorAll('.moon-phase').forEach((phase, index) => { | |
| phase.addEventListener('click', () => { | |
| const phases = ["New Moon", "Waxing Crescent", "First Quarter", "Waxing Gibbous", | |
| "Full Moon", "Waning Gibbous", "Last Quarter", "Waning Crescent"]; | |
| document.getElementById('current-moon-phase').textContent = phases[index]; | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=drbaker171/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |