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 Dashboard</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"> | |
| <style> | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .floating { | |
| animation: float 4s ease-in-out infinite; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e1b4b 0%, #3b0764 50%, #7e22ce 100%); | |
| } | |
| .card-glow:hover { | |
| box-shadow: 0 0 20px rgba(124, 58, 237, 0.7); | |
| } | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: #1e1b4b; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: #7e22ce; | |
| border-radius: 3px; | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen text-white font-sans"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-12"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center floating"> | |
| <i class="fas fa-rocket text-xl"></i> | |
| </div> | |
| <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-300"> | |
| Cosmic Explorer | |
| </h1> | |
| </div> | |
| <div class="flex items-center space-x-6"> | |
| <button class="relative group"> | |
| <i class="fas fa-bell text-xl text-purple-300"></i> | |
| <span class="absolute -top-1 -right-1 w-4 h-4 bg-pink-500 rounded-full flex items-center justify-center text-xs">3</span> | |
| <div class="absolute right-0 mt-2 w-64 bg-gray-800 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10 p-2"> | |
| <p class="text-sm p-2 border-b border-gray-700">New cosmic event detected</p> | |
| <p class="text-sm p-2 border-b border-gray-700">System update available</p> | |
| <p class="text-sm p-2">Exploration team check-in</p> | |
| </div> | |
| </button> | |
| <div class="flex items-center space-x-2 cursor-pointer group"> | |
| <div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center"> | |
| <i class="fas fa-user-astronaut"></i> | |
| </div> | |
| <span class="group-hover:text-purple-300 transition-colors">Commander</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Dashboard --> | |
| <main> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 card-glow transition-all duration-300 hover:bg-opacity-70"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-purple-300 text-sm">Light Years Traveled</p> | |
| <h3 class="text-2xl font-bold mt-1">12,748</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-lg bg-purple-900 bg-opacity-50 flex items-center justify-center"> | |
| <i class="fas fa-lightbulb text-purple-300"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 h-2 bg-gray-700 rounded-full"> | |
| <div class="h-full bg-purple-500 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 card-glow transition-all duration-300 hover:bg-opacity-70"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-blue-300 text-sm">Planets Discovered</p> | |
| <h3 class="text-2xl font-bold mt-1">428</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-lg bg-blue-900 bg-opacity-50 flex items-center justify-center"> | |
| <i class="fas fa-globe text-blue-300"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 h-2 bg-gray-700 rounded-full"> | |
| <div class="h-full bg-blue-500 rounded-full" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 card-glow transition-all duration-300 hover:bg-opacity-70"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-green-300 text-sm">Life Signs Detected</p> | |
| <h3 class="text-2xl font-bold mt-1">17</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-lg bg-green-900 bg-opacity-50 flex items-center justify-center"> | |
| <i class="fas fa-leaf text-green-300"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 h-2 bg-gray-700 rounded-full"> | |
| <div class="h-full bg-green-500 rounded-full" style="width: 30%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 card-glow transition-all duration-300 hover:bg-opacity-70"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-yellow-300 text-sm">Fuel Reserves</p> | |
| <h3 class="text-2xl font-bold mt-1">84%</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-lg bg-yellow-900 bg-opacity-50 flex items-center justify-center"> | |
| <i class="fas fa-gas-pump text-yellow-300"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 h-2 bg-gray-700 rounded-full"> | |
| <div class="h-full bg-yellow-500 rounded-full" style="width: 84%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Star Map --> | |
| <div class="lg:col-span-2 bg-gray-800 bg-opacity-50 rounded-xl p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Galactic Star Map</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-purple-700 rounded-lg text-sm hover:bg-purple-600">3D View</button> | |
| <button class="px-3 py-1 bg-gray-700 rounded-lg text-sm hover:bg-gray-600">Grid</button> | |
| </div> | |
| </div> | |
| <div class="relative h-96 rounded-lg overflow-hidden"> | |
| <div id="starMap" class="absolute inset-0 bg-gradient-to-br from-purple-900 to-blue-900 flex items-center justify-center"> | |
| <!-- Stars will be added by JavaScript --> | |
| </div> | |
| <div class="absolute bottom-4 left-4 right-4 bg-gray-900 bg-opacity-70 rounded-lg p-3"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-purple-300">Current Sector</p> | |
| <p class="font-medium">Andromeda Quadrant</p> | |
| </div> | |
| <button class="px-3 py-1 bg-purple-600 rounded-lg text-sm hover:bg-purple-500"> | |
| <i class="fas fa-expand mr-1"></i> Fullscreen | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Discoveries --> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6"> | |
| <h2 class="text-xl font-bold mb-6">Recent Discoveries</h2> | |
| <div class="space-y-4 max-h-96 overflow-y-auto custom-scrollbar pr-2"> | |
| <div class="flex items-start space-x-3 p-3 bg-gray-700 bg-opacity-30 rounded-lg hover:bg-opacity-50 transition-colors"> | |
| <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center mt-1"> | |
| <i class="fas fa-water"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Oceanic Exoplanet</h4> | |
| <p class="text-sm text-gray-300">Found in Kepler-442 system with potential for aquatic life</p> | |
| <div class="flex items-center mt-1 text-xs text-blue-300"> | |
| <i class="fas fa-clock mr-1"></i> | |
| <span>2 hours ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3 p-3 bg-gray-700 bg-opacity-30 rounded-lg hover:bg-opacity-50 transition-colors"> | |
| <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center mt-1"> | |
| <i class="fas fa-gem"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Crystalline Formation</h4> | |
| <p class="text-sm text-gray-300">Massive crystal structures detected on asteroid XJ-449</p> | |
| <div class="flex items-center mt-1 text-xs text-purple-300"> | |
| <i class="fas fa-clock mr-1"></i> | |
| <span>1 day ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3 p-3 bg-gray-700 bg-opacity-30 rounded-lg hover:bg-opacity-50 transition-colors"> | |
| <div class="w-10 h-10 rounded-full bg-green-600 flex items-center justify-center mt-1"> | |
| <i class="fas fa-seedling"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Bioluminescent Flora</h4> | |
| <p class="text-sm text-gray-300">Plant life emitting light discovered on TRAPPIST-1e</p> | |
| <div class="flex items-center mt-1 text-xs text-green-300"> | |
| <i class="fas fa-clock mr-1"></i> | |
| <span>3 days ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3 p-3 bg-gray-700 bg-opacity-30 rounded-lg hover:bg-opacity-50 transition-colors"> | |
| <div class="w-10 h-10 rounded-full bg-yellow-600 flex items-center justify-center mt-1"> | |
| <i class="fas fa-meteor"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Rare Mineral Comet</h4> | |
| <p class="text-sm text-gray-300">Comet with unusual mineral composition passing nearby</p> | |
| <div class="flex items-center mt-1 text-xs text-yellow-300"> | |
| <i class="fas fa-clock mr-1"></i> | |
| <span>5 days ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3 p-3 bg-gray-700 bg-opacity-30 rounded-lg hover:bg-opacity-50 transition-colors"> | |
| <div class="w-10 h-10 rounded-full bg-red-600 flex items-center justify-center mt-1"> | |
| <i class="fas fa-fire"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Volcanic Activity</h4> | |
| <p class="text-sm text-gray-300">Unprecedented volcanic eruptions on Io-analog moon</p> | |
| <div class="flex items-center mt-1 text-xs text-red-300"> | |
| <i class="fas fa-clock mr-1"></i> | |
| <span>1 week ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mission Log --> | |
| <div class="mt-8 bg-gray-800 bg-opacity-50 rounded-xl p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Mission Log</h2> | |
| <button id="addLogBtn" class="px-4 py-2 bg-purple-600 rounded-lg hover:bg-purple-500 flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Add Entry | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="text-left border-b border-gray-700"> | |
| <th class="pb-3">Date</th> | |
| <th class="pb-3">Event</th> | |
| <th class="pb-3">Status</th> | |
| <th class="pb-3">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b border-gray-700 hover:bg-gray-700 hover:bg-opacity-30"> | |
| <td class="py-4">Stardate 57894.3</td> | |
| <td>Entered Andromeda Quadrant</td> | |
| <td><span class="px-2 py-1 bg-green-900 bg-opacity-50 text-green-300 rounded-full text-xs">Completed</span></td> | |
| <td> | |
| <button class="p-1 text-gray-400 hover:text-white"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-700 hover:bg-gray-700 hover:bg-opacity-30"> | |
| <td class="py-4">Stardate 57892.1</td> | |
| <td>First contact with Kepler-442 civilization</td> | |
| <td><span class="px-2 py-1 bg-blue-900 bg-opacity-50 text-blue-300 rounded-full text-xs">In Progress</span></td> | |
| <td> | |
| <button class="p-1 text-gray-400 hover:text-white"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-700 hover:bg-gray-700 hover:bg-opacity-30"> | |
| <td class="py-4">Stardate 57889.7</td> | |
| <td>Warp core maintenance</td> | |
| <td><span class="px-2 py-1 bg-yellow-900 bg-opacity-50 text-yellow-300 rounded-full text-xs">Pending</span></td> | |
| <td> | |
| <button class="p-1 text-gray-400 hover:text-white"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-700 hover:bg-opacity-30"> | |
| <td class="py-4">Stardate 57886.5</td> | |
| <td>Sample collection from TRAPPIST-1e</td> | |
| <td><span class="px-2 py-1 bg-purple-900 bg-opacity-50 text-purple-300 rounded-full text-xs">Analyzing</span></td> | |
| <td> | |
| <button class="p-1 text-gray-400 hover:text-white"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Add Log Modal (hidden by default) --> | |
| <div id="logModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-gray-800 rounded-xl p-6 w-full max-w-md"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold">Add Mission Log</h3> | |
| <button id="closeModalBtn" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form id="logForm" class="space-y-4"> | |
| <div> | |
| <label class="block text-sm text-gray-300 mb-1">Date</label> | |
| <input type="text" class="w-full bg-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Stardate..."> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-300 mb-1">Event</label> | |
| <input type="text" class="w-full bg-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Event description..."> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-300 mb-1">Status</label> | |
| <select class="w-full bg-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <option>Completed</option> | |
| <option>In Progress</option> | |
| <option>Pending</option> | |
| <option>Analyzing</option> | |
| </select> | |
| </div> | |
| <div class="pt-2"> | |
| <button type="submit" class="w-full bg-purple-600 hover:bg-purple-500 py-2 rounded-lg font-medium"> | |
| Add Log Entry | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| // Create stars for the star map | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const starMap = document.getElementById('starMap'); | |
| const starCount = 150; | |
| for (let i = 0; i < starCount; i++) { | |
| const star = document.createElement('div'); | |
| star.className = 'absolute rounded-full bg-white'; | |
| // Random size between 1px and 3px | |
| const size = Math.random() * 2 + 1; | |
| star.style.width = `${size}px`; | |
| star.style.height = `${size}px`; | |
| // Random position | |
| star.style.left = `${Math.random() * 100}%`; | |
| star.style.top = `${Math.random() * 100}%`; | |
| // Random opacity for twinkling effect | |
| star.style.opacity = Math.random(); | |
| starMap.appendChild(star); | |
| } | |
| // Add a few larger "stars" (planets) | |
| for (let i = 0; i < 5; i++) { | |
| const planet = document.createElement('div'); | |
| planet.className = 'absolute rounded-full'; | |
| const size = Math.random() * 10 + 5; | |
| planet.style.width = `${size}px`; | |
| planet.style.height = `${size}px`; | |
| planet.style.left = `${Math.random() * 90 + 5}%`; | |
| planet.style.top = `${Math.random() * 90 + 5}%`; | |
| // Random planet colors | |
| const colors = ['bg-blue-400', 'bg-purple-400', 'bg-red-400', 'bg-yellow-400', 'bg-green-400']; | |
| planet.classList.add(colors[Math.floor(Math.random() * colors.length)]); | |
| starMap.appendChild(planet); | |
| } | |
| // Modal functionality | |
| const addLogBtn = document.getElementById('addLogBtn'); | |
| const closeModalBtn = document.getElementById('closeModalBtn'); | |
| const logModal = document.getElementById('logModal'); | |
| addLogBtn.addEventListener('click', () => { | |
| logModal.classList.remove('hidden'); | |
| }); | |
| closeModalBtn.addEventListener('click', () => { | |
| logModal.classList.add('hidden'); | |
| }); | |
| logModal.addEventListener('click', (e) => { | |
| if (e.target === logModal) { | |
| logModal.classList.add('hidden'); | |
| } | |
| }); | |
| document.getElementById('logForm').addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // In a real app, you would handle form submission here | |
| alert('Log entry added!'); | |
| logModal.classList.add('hidden'); | |
| }); | |
| }); | |
| </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=Ibrahemqasim/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |