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</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(-20px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(0, 191, 255, 0.5); | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: .15em solid #00bfff; | |
| white-space: nowrap; | |
| letter-spacing: .15em; | |
| animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #00bfff; } | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen text-white font-sans"> | |
| <!-- Navigation --> | |
| <nav class="bg-black bg-opacity-30 backdrop-blur-md fixed w-full z-10"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-rocket text-2xl text-cyan-400"></i> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-cyan-600">Home</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Explore</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Galaxies</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">About</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button class="bg-cyan-600 hover:bg-cyan-700 px-4 py-2 rounded-md text-sm font-medium flex items-center"> | |
| <i class="fas fa-user-astronaut mr-2"></i> Sign In | |
| </button> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-cyan-600">Home</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white">Explore</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white">Galaxies</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white">About</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white">Sign In</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="relative pt-32 pb-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="lg:grid lg:grid-cols-12 lg:gap-8"> | |
| <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left"> | |
| <h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl"> | |
| <span class="block text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">Explore the</span> | |
| <span class="typewriter block">Cosmos</span> | |
| </h1> | |
| <p class="mt-3 text-base text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> | |
| Journey through the stars and discover the wonders of our universe. From distant galaxies to mysterious black holes, the cosmos awaits your exploration. | |
| </p> | |
| <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0"> | |
| <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3"> | |
| <button id="exploreBtn" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-cyan-600 hover:bg-cyan-700 md:py-4 md:text-lg md:px-10 transition duration-300 transform hover:scale-105"> | |
| <i class="fas fa-space-shuttle mr-2"></i> Begin Journey | |
| </button> | |
| <button class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-cyan-400 bg-gray-800 hover:bg-gray-700 md:py-4 md:text-lg md:px-10 transition duration-300 transform hover:scale-105"> | |
| <i class="fas fa-book-open mr-2"></i> Learn More | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center"> | |
| <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md floating"> | |
| <div class="relative h-64 w-full bg-gradient-to-br from-purple-500 to-blue-600 rounded-lg overflow-hidden"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-globe-americas text-8xl opacity-20"></i> | |
| </div> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="relative w-40 h-40 rounded-full bg-white bg-opacity-10 backdrop-blur-sm border border-white border-opacity-20 flex items-center justify-center"> | |
| <div class="absolute w-32 h-32 rounded-full bg-white bg-opacity-10 backdrop-blur-sm border border-white border-opacity-20"></div> | |
| <div class="absolute w-24 h-24 rounded-full bg-white bg-opacity-10 backdrop-blur-sm border border-white border-opacity-20"></div> | |
| <i class="fas fa-satellite-dish text-4xl text-white"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="py-12 bg-black bg-opacity-20 backdrop-blur-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-cyan-400 font-semibold tracking-wide uppercase">Features</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> | |
| Discover the Universe | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto"> | |
| Our platform brings the cosmos to your fingertips with these amazing features. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Feature 1 --> | |
| <div class="card-hover bg-gray-800 bg-opacity-50 rounded-lg p-6 backdrop-blur-sm border border-gray-700"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-cyan-500 text-white mb-4"> | |
| <i class="fas fa-star text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-white mb-2">Stellar Database</h3> | |
| <p class="text-gray-300"> | |
| Access information on millions of stars, planets, and celestial objects with our comprehensive database. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="card-hover bg-gray-800 bg-opacity-50 rounded-lg p-6 backdrop-blur-sm border border-gray-700"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white mb-4"> | |
| <i class="fas fa-vr-cardboard text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-white mb-2">VR Exploration</h3> | |
| <p class="text-gray-300"> | |
| Experience the cosmos like never before with our immersive virtual reality simulations. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="card-hover bg-gray-800 bg-opacity-50 rounded-lg p-6 backdrop-blur-sm border border-gray-700"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4"> | |
| <i class="fas fa-satellite text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-white mb-2">Live Tracking</h3> | |
| <p class="text-gray-300"> | |
| Track satellites, space stations, and spacecraft in real-time as they orbit our planet. | |
| </p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="card-hover bg-gray-800 bg-opacity-50 rounded-lg p-6 backdrop-blur-sm border border-gray-700"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4"> | |
| <i class="fas fa-meteor text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-white mb-2">Event Alerts</h3> | |
| <p class="text-gray-300"> | |
| Get notified about upcoming meteor showers, eclipses, and other celestial events. | |
| </p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="card-hover bg-gray-800 bg-opacity-50 rounded-lg p-6 backdrop-blur-sm border border-gray-700"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-pink-500 text-white mb-4"> | |
| <i class="fas fa-user-astronaut text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-white mb-2">Community</h3> | |
| <p class="text-gray-300"> | |
| Connect with fellow space enthusiasts and share your discoveries and observations. | |
| </p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="card-hover bg-gray-800 bg-opacity-50 rounded-lg p-6 backdrop-blur-sm border border-gray-700"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-500 text-white mb-4"> | |
| <i class="fas fa-chart-line text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-white mb-2">Data Visualization</h3> | |
| <p class="text-gray-300"> | |
| Beautiful interactive charts and graphs to help you understand complex astronomical data. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Interactive Section --> | |
| <div class="relative py-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="lg:grid lg:grid-cols-12 lg:gap-8"> | |
| <div class="lg:col-span-5"> | |
| <div class="relative"> | |
| <div class="relative h-64 w-full bg-gradient-to-br from-purple-900 to-blue-900 rounded-xl overflow-hidden shadow-2xl"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div id="planet" class="relative w-32 h-32 rounded-full bg-gradient-to-br from-yellow-400 to-red-500 shadow-lg transition-all duration-500 cursor-pointer"> | |
| <div class="absolute top-4 left-4 w-6 h-6 rounded-full bg-white bg-opacity-30"></div> | |
| <div class="absolute bottom-6 right-6 w-4 h-4 rounded-full bg-white bg-opacity-20"></div> | |
| <div class="absolute top-10 right-10 w-3 h-3 rounded-full bg-white bg-opacity-10"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <button id="changePlanet" class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg text-white font-medium transition duration-300"> | |
| <i class="fas fa-random mr-2"></i> Generate Random Planet | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 lg:mt-0 lg:col-span-7"> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 backdrop-blur-sm border border-gray-700"> | |
| <h2 class="text-3xl font-bold text-white mb-6">Interactive Space Explorer</h2> | |
| <p class="text-gray-300 mb-6"> | |
| Our interactive tools allow you to visualize and explore celestial objects in ways never before possible. Click on the planet to see it glow, or generate a random planet with different characteristics. | |
| </p> | |
| <div class="space-y-4"> | |
| <div> | |
| <h3 class="text-lg font-medium text-white mb-2">Planet Characteristics</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-1">Size</label> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div id="sizeBar" class="bg-cyan-500 h-2.5 rounded-full" style="width: 70%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-1">Temperature</label> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div id="tempBar" class="bg-red-500 h-2.5 rounded-full" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-1">Atmosphere</label> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div id="atmoBar" class="bg-blue-500 h-2.5 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-1">Gravity</label> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div id="gravityBar" class="bg-purple-500 h-2.5 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium text-white mb-2">Planet Type</h3> | |
| <div id="planetType" class="inline-block px-3 py-1 rounded-full text-sm font-medium bg-cyan-600 text-white"> | |
| Terrestrial | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Newsletter Section --> | |
| <div class="py-16 bg-gradient-to-r from-cyan-900 to-blue-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:flex lg:items-center lg:justify-between"> | |
| <div class="lg:w-0 lg:flex-1"> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> | |
| Stay Updated with Cosmic News | |
| </h2> | |
| <p class="mt-3 max-w-3xl text-lg leading-6 text-gray-200"> | |
| Subscribe to our newsletter and receive the latest discoveries, space news, and event notifications directly to your inbox. | |
| </p> | |
| </div> | |
| <div class="mt-8 lg:mt-0 lg:ml-8"> | |
| <form class="sm:flex"> | |
| <label for="email-address" class="sr-only">Email address</label> | |
| <input id="email-address" name="email" type="email" autocomplete="email" required class="w-full px-5 py-3 border border-transparent placeholder-gray-500 focus:ring-2 focus:ring-offset-2 focus:ring-offset-cyan-700 focus:ring-white focus:border-white sm:max-w-xs rounded-md" placeholder="Enter your email"> | |
| <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0"> | |
| <button type="submit" class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-cyan-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-cyan-700 focus:ring-white transition duration-300 transform hover:scale-105"> | |
| <i class="fas fa-paper-plane mr-2"></i> Subscribe | |
| </button> | |
| </div> | |
| </form> | |
| <p class="mt-3 text-sm text-gray-200"> | |
| We care about your data. Read our <a href="#" class="text-white font-medium underline">Privacy Policy</a>. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-black bg-opacity-50 backdrop-blur-sm"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Explore</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Stars</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Planets</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Galaxies</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Nebulae</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Resources</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Telescopes</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Maps</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Data</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Research</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Company</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">About</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Team</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Connect</h3> | |
| <div class="mt-4 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| <div class="mt-6"> | |
| <p class="text-sm text-gray-400"> | |
| <i class="fas fa-envelope mr-2"></i> [email protected] | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between"> | |
| <p class="text-base text-gray-400"> | |
| © 2023 Cosmic Explorer. All rights reserved. | |
| </p> | |
| <div class="mt-4 md:mt-0 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white">Terms</a> | |
| <a href="#" class="text-gray-400 hover:text-white">Privacy</a> | |
| <a href="#" class="text-gray-400 hover:text-white">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="backToTop" class="fixed bottom-6 right-6 bg-cyan-600 hover:bg-cyan-700 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Planet interaction | |
| const planet = document.getElementById('planet'); | |
| planet.addEventListener('click', function() { | |
| this.classList.toggle('glow'); | |
| }); | |
| // Random planet generator | |
| const planetTypes = ['Terrestrial', 'Gas Giant', 'Ice Giant', 'Dwarf', 'Ocean', 'Lava', 'Desert']; | |
| const planetColors = [ | |
| 'bg-gradient-to-br from-yellow-400 to-red-500', | |
| 'bg-gradient-to-br from-yellow-200 to-orange-400', | |
| 'bg-gradient-to-br from-blue-300 to-blue-600', | |
| 'bg-gradient-to-br from-gray-400 to-gray-600', | |
| 'bg-gradient-to-br from-blue-400 to-blue-700', | |
| 'bg-gradient-to-br from-red-400 to-orange-600', | |
| 'bg-gradient-to-br from-yellow-300 to-amber-600' | |
| ]; | |
| document.getElementById('changePlanet').addEventListener('click', function() { | |
| // Randomize planet appearance | |
| const randomSize = Math.floor(Math.random() * 100) + 50; | |
| planet.style.width = `${randomSize}px`; | |
| planet.style.height = `${randomSize}px`; | |
| // Randomize planet color | |
| const randomColorIndex = Math.floor(Math.random() * planetColors.length); | |
| planet.className = `relative rounded-full ${planetColors[randomColorIndex]} shadow-lg transition-all duration-500 cursor-pointer`; | |
| // Update planet type | |
| document.getElementById('planetType').textContent = planetTypes[randomColorIndex]; | |
| // Update characteristic bars | |
| document.getElementById('sizeBar').style.width = `${Math.floor(Math.random() * 80) + 20}%`; | |
| document.getElementById('tempBar').style.width = `${Math.floor(Math.random() * 100)}%`; | |
| document.getElementById('atmoBar').style.width = `${Math.floor(Math.random() * 100)}%`; | |
| document.getElementById('gravityBar').style.width = `${Math.floor(Math.random() * 100)}%`; | |
| }); | |
| // Back to top button | |
| window.addEventListener('scroll', function() { | |
| const backToTopButton = document.getElementById('backToTop'); | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('opacity-0', 'invisible'); | |
| backToTopButton.classList.add('opacity-100', 'visible'); | |
| } else { | |
| backToTopButton.classList.remove('opacity-100', 'visible'); | |
| backToTopButton.classList.add('opacity-0', 'invisible'); | |
| } | |
| }); | |
| document.getElementById('backToTop').addEventListener('click', function() { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Explore button animation | |
| document.getElementById('exploreBtn').addEventListener('click', function() { | |
| this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Launching...'; | |
| setTimeout(() => { | |
| this.innerHTML = '<i class="fas fa-check mr-2"></i> Ready for Launch!'; | |
| }, 1500); | |
| }); | |
| // Typewriter effect | |
| setTimeout(() => { | |
| document.querySelector('.typewriter').classList.remove('typewriter'); | |
| }, 3500); | |
| </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=victor/explore-the-cosmos" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |