Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>3D Solar System 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> | |
| body { | |
| overflow: hidden; | |
| background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); | |
| perspective: 1000px; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| .solar-system { | |
| position: relative; | |
| width: 100vw; | |
| height: 100vh; | |
| transform-style: preserve-3d; | |
| } | |
| .sun { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 100px; | |
| height: 100px; | |
| background: radial-gradient(circle, #fc4a1a 0%, #f7b733 100%); | |
| border-radius: 50%; | |
| box-shadow: 0 0 60px #fc4a1a, 0 0 120px #f7b733; | |
| z-index: 10; | |
| animation: pulse 4s infinite alternate; | |
| } | |
| .orbit { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| transform-style: preserve-3d; | |
| transform: translate(-50%, -50%) rotateX(75deg); | |
| } | |
| .planet { | |
| position: absolute; | |
| border-radius: 50%; | |
| transform-style: preserve-3d; | |
| top: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .mercury { background: linear-gradient(45deg, #a9a9a9, #696969); } | |
| .venus { background: linear-gradient(45deg, #d2b48c, #a0522d); } | |
| .earth { background: linear-gradient(45deg, #1e90ff, #228b22); } | |
| .mars { background: linear-gradient(45deg, #ff6347, #8b0000); } | |
| .jupiter { background: linear-gradient(45deg, #f4a460, #cd853f); } | |
| .saturn { background: linear-gradient(45deg, #d2b48c, #a0522d); } | |
| .uranus { background: linear-gradient(45deg, #afeeee, #4682b4); } | |
| .neptune { background: linear-gradient(45deg, #4169e1, #000080); } | |
| .saturn-ring { | |
| position: absolute; | |
| width: 180%; | |
| height: 8px; | |
| background: linear-gradient(90deg, rgba(210,180,140,0.8), rgba(160,82,45,0.8)); | |
| border-radius: 50%; | |
| transform: translate(-50%, -50%) rotateX(75deg); | |
| top: 50%; | |
| left: 50%; | |
| box-shadow: 0 0 10px rgba(210, 180, 140, 0.8); | |
| } | |
| .controls { | |
| position: absolute; | |
| bottom: 30px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| z-index: 100; | |
| display: flex; | |
| gap: 15px; | |
| background: rgba(0, 0, 0, 0.5); | |
| padding: 12px 20px; | |
| border-radius: 30px; | |
| backdrop-filter: blur(5px); | |
| } | |
| .controls button { | |
| background: rgba(255, 255, 255, 0.15); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| color: white; | |
| padding: 8px 16px; | |
| border-radius: 20px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| font-weight: 500; | |
| min-width: 100px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| } | |
| .controls button:hover { | |
| background: rgba(255, 255, 255, 0.3); | |
| transform: translateY(-2px); | |
| } | |
| .title { | |
| position: absolute; | |
| top: 30px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| color: white; | |
| font-size: 2.5rem; | |
| text-shadow: 0 0 15px rgba(255, 255, 255, 0.7); | |
| z-index: 100; | |
| background: rgba(0, 0, 0, 0.3); | |
| padding: 10px 30px; | |
| border-radius: 30px; | |
| backdrop-filter: blur(5px); | |
| font-weight: 600; | |
| } | |
| .planet-label { | |
| position: absolute; | |
| color: white; | |
| font-size: 1rem; | |
| transform: translateY(-30px); | |
| opacity: 0; | |
| transition: all 0.3s; | |
| white-space: nowrap; | |
| background: rgba(0, 0, 0, 0.7); | |
| padding: 5px 12px; | |
| border-radius: 15px; | |
| font-weight: 500; | |
| pointer-events: none; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(-30px); | |
| box-shadow: 0 4px 10px rgba(0,0,0,0.3); | |
| z-index: 5; | |
| } | |
| .planet-container { | |
| position: absolute; | |
| transform-style: preserve-3d; | |
| transition: transform 0.3s; | |
| } | |
| .planet-container:hover { | |
| transform: scale(1.5); | |
| z-index: 20; | |
| } | |
| .planet-container:hover .planet-label { | |
| opacity: 1; | |
| transform: translateX(-50%) translateY(-40px); | |
| } | |
| .stars { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .star { | |
| position: absolute; | |
| background: white; | |
| border-radius: 50%; | |
| animation: twinkle 2s infinite alternate; | |
| } | |
| @keyframes twinkle { | |
| 0% { opacity: 0.2; } | |
| 100% { opacity: 1; } | |
| } | |
| @keyframes pulse { | |
| 0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 60px #fc4a1a, 0 0 120px #f7b733; } | |
| 100% { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 80px #fc4a1a, 0 0 140px #f7b733; } | |
| } | |
| .info-panel { | |
| position: absolute; | |
| top: 100px; | |
| right: 30px; | |
| background: rgba(0, 0, 0, 0.7); | |
| color: white; | |
| padding: 20px; | |
| border-radius: 15px; | |
| width: 300px; | |
| backdrop-filter: blur(5px); | |
| transform: translateX(0); | |
| transition: all 0.5s ease; | |
| z-index: 50; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.3); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .info-panel.hidden { | |
| transform: translateX(350px); | |
| } | |
| .info-title { | |
| font-size: 1.5rem; | |
| margin-bottom: 15px; | |
| font-weight: 600; | |
| color: #f7b733; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .info-text { | |
| font-size: 1rem; | |
| line-height: 1.6; | |
| } | |
| .toggle-info { | |
| position: absolute; | |
| top: 100px; | |
| right: 30px; | |
| background: rgba(0, 0, 0, 0.7); | |
| color: white; | |
| border: none; | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| z-index: 60; | |
| font-size: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s; | |
| box-shadow: 0 4px 10px rgba(0,0,0,0.3); | |
| } | |
| .toggle-info:hover { | |
| transform: scale(1.1); | |
| } | |
| .planet-info-icon { | |
| position: absolute; | |
| bottom: -5px; | |
| right: -5px; | |
| background: #f7b733; | |
| color: #000; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.8rem; | |
| font-weight: bold; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.3); | |
| } | |
| .planet-details { | |
| margin-top: 15px; | |
| padding-top: 15px; | |
| border-top: 1px solid rgba(255,255,255,0.2); | |
| } | |
| .detail-row { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 8px; | |
| } | |
| .detail-label { | |
| color: #f7b733; | |
| font-weight: 500; | |
| } | |
| .detail-value { | |
| text-align: right; | |
| } | |
| .selected-planet { | |
| transform: scale(1.8) ; | |
| z-index: 25 ; | |
| box-shadow: 0 0 20px rgba(255,255,255,0.7) ; | |
| } | |
| .selected-label { | |
| opacity: 1 ; | |
| transform: translateX(-50%) translateY(-40px) ; | |
| background: rgba(247, 183, 51, 0.9) ; | |
| color: #000 ; | |
| font-weight: 600 ; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="solar-system"> | |
| <div class="stars" id="stars"></div> | |
| <h1 class="title">Solar System Explorer</h1> | |
| <!-- Sun --> | |
| <div class="sun"></div> | |
| <!-- Mercury --> | |
| <div class="orbit" style="width: 160px; height: 160px; animation: orbit 2.4s linear infinite;"> | |
| <div class="planet-container" style="animation: rotate 10s linear infinite;"> | |
| <div class="planet mercury" style="width: 12px; height: 12px;"></div> | |
| <div class="planet-label">Mercury</div> | |
| </div> | |
| </div> | |
| <!-- Venus --> | |
| <div class="orbit" style="width: 220px; height: 220px; animation: orbit 6.2s linear infinite;"> | |
| <div class="planet-container" style="animation: rotate 15s linear infinite reverse;"> | |
| <div class="planet venus" style="width: 18px; height: 18px;"></div> | |
| <div class="planet-label">Venus</div> | |
| </div> | |
| </div> | |
| <!-- Earth --> | |
| <div class="orbit" style="width: 280px; height: 280px; animation: orbit 10s linear infinite;"> | |
| <div class="planet-container" style="animation: rotate 24s linear infinite;"> | |
| <div class="planet earth" style="width: 18px; height: 18px;"></div> | |
| <div class="planet-label">Earth</div> | |
| </div> | |
| </div> | |
| <!-- Mars --> | |
| <div class="orbit" style="width: 340px; height: 340px; animation: orbit 18s linear infinite;"> | |
| <div class="planet-container" style="animation: rotate 30s linear infinite;"> | |
| <div class="planet mars" style="width: 15px; height: 15px;"></div> | |
| <div class="planet-label">Mars</div> | |
| </div> | |
| </div> | |
| <!-- Jupiter --> | |
| <div class="orbit" style="width: 450px; height: 450px; animation: orbit 60s linear infinite;"> | |
| <div class="planet-container" style="animation: rotate 10s linear infinite;"> | |
| <div class="planet jupiter" style="width: 35px; height: 35px;"></div> | |
| <div class="planet-label">Jupiter</div> | |
| </div> | |
| </div> | |
| <!-- Saturn --> | |
| <div class="orbit" style="width: 550px; height: 550px; animation: orbit 140s linear infinite;"> | |
| <div class="planet-container" style="animation: rotate 12s linear infinite;"> | |
| <div class="planet saturn" style="width: 30px; height: 30px;"></div> | |
| <div class="saturn-ring"></div> | |
| <div class="planet-label">Saturn</div> | |
| </div> | |
| </div> | |
| <!-- Uranus --> | |
| <div class="orbit" style="width: 620px; height: 620px; animation: orbit 340s linear infinite;"> | |
| <div class="planet-container" style="animation: rotate 15s linear infinite reverse;"> | |
| <div class="planet uranus" style="width: 25px; height: 25px;"></div> | |
| <div class="planet-label">Uranus</div> | |
| </div> | |
| </div> | |
| <!-- Neptune --> | |
| <div class="orbit" style="width: 700px; height: 700px; animation: orbit 680s linear infinite;"> | |
| <div class="planet-container" style="animation: rotate 20s linear infinite;"> | |
| <div class="planet neptune" style="width: 25px; height: 25px;"></div> | |
| <div class="planet-label">Neptune</div> | |
| </div> | |
| </div> | |
| <div class="controls"> | |
| <button id="pauseBtn"><i class="fas fa-pause"></i> Pause</button> | |
| <button id="resumeBtn"><i class="fas fa-play"></i> Resume</button> | |
| <button id="speedUpBtn"><i class="fas fa-fast-forward"></i> Speed Up</button> | |
| <button id="slowDownBtn"><i class="fas fa-fast-backward"></i> Slow Down</button> | |
| <button id="resetBtn"><i class="fas fa-sync-alt"></i> Reset</button> | |
| </div> | |
| <button class="toggle-info" id="toggleInfo"><i class="fas fa-info"></i></button> | |
| <div class="info-panel hidden" id="infoPanel"> | |
| <div class="info-title"><i class="fas fa-globe-americas"></i> Solar System Facts</div> | |
| <div class="info-text" id="planetInfo"> | |
| Click on any planet to see detailed information. Our solar system consists of the Sun and everything that orbits around it, including planets, moons, asteroids, comets and meteoroids. | |
| </div> | |
| <div class="planet-details" id="planetDetails"> | |
| <!-- Planet details will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Create stars | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const starsContainer = document.getElementById('stars'); | |
| for (let i = 0; i < 300; i++) { | |
| const star = document.createElement('div'); | |
| star.classList.add('star'); | |
| // Random position | |
| const x = Math.random() * 100; | |
| const y = Math.random() * 100; | |
| // Random size | |
| const size = Math.random() * 3; | |
| // Random animation delay | |
| const delay = Math.random() * 3; | |
| star.style.left = `${x}%`; | |
| star.style.top = `${y}%`; | |
| star.style.width = `${size}px`; | |
| star.style.height = `${size}px`; | |
| star.style.animationDelay = `${delay}s`; | |
| starsContainer.appendChild(star); | |
| } | |
| // Animation control | |
| const pauseBtn = document.getElementById('pauseBtn'); | |
| const resumeBtn = document.getElementById('resumeBtn'); | |
| const speedUpBtn = document.getElementById('speedUpBtn'); | |
| const slowDownBtn = document.getElementById('slowDownBtn'); | |
| const resetBtn = document.getElementById('resetBtn'); | |
| const toggleInfoBtn = document.getElementById('toggleInfo'); | |
| const infoPanel = document.getElementById('infoPanel'); | |
| const planetInfo = document.getElementById('planetInfo'); | |
| const planetDetails = document.getElementById('planetDetails'); | |
| const orbits = document.querySelectorAll('.orbit'); | |
| const planetContainers = document.querySelectorAll('.planet-container'); | |
| const planets = document.querySelectorAll('.planet'); | |
| const planetLabels = document.querySelectorAll('.planet-label'); | |
| let speedMultiplier = 1; | |
| const originalDurations = {}; | |
| let selectedPlanet = null; | |
| // Store original durations | |
| orbits.forEach(orbit => { | |
| originalDurations[orbit.style.animationDuration] = orbit.style.animationDuration; | |
| }); | |
| planetContainers.forEach(container => { | |
| originalDurations[container.style.animationDuration] = container.style.animationDuration; | |
| }); | |
| // Planet information | |
| const planetData = { | |
| mercury: { | |
| title: "Mercury", | |
| info: "The smallest planet in our solar system and closest to the Sun. A year on Mercury is just 88 days long.", | |
| details: [ | |
| { label: "Diameter", value: "4,879 km" }, | |
| { label: "Distance from Sun", value: "57.9 million km" }, | |
| { label: "Orbital Period", value: "88 Earth days" }, | |
| { label: "Surface Temp", value: "-173°C to 427°C" }, | |
| { label: "Moons", value: "0" } | |
| ] | |
| }, | |
| venus: { | |
| title: "Venus", | |
| info: "The second planet from the Sun. Venus spins slowly in the opposite direction from most planets.", | |
| details: [ | |
| { label: "Diameter", value: "12,104 km" }, | |
| { label: "Distance from Sun", value: "108.2 million km" }, | |
| { label: "Orbital Period", value: "225 Earth days" }, | |
| { label: "Surface Temp", value: "462°C" }, | |
| { label: "Moons", value: "0" } | |
| ] | |
| }, | |
| earth: { | |
| title: "Earth", | |
| info: "Our home planet is the only place in the universe known to harbor life. Earth is the third planet from the Sun.", | |
| details: [ | |
| { label: "Diameter", value: "12,742 km" }, | |
| { label: "Distance from Sun", value: "149.6 million km" }, | |
| { label: "Orbital Period", value: "365.25 days" }, | |
| { label: "Surface Temp", value: "-88°C to 58°C" }, | |
| { label: "Moons", value: "1 (The Moon)" } | |
| ] | |
| }, | |
| mars: { | |
| title: "Mars", | |
| info: "The fourth planet from the Sun and the second-smallest planet. Mars is often called the Red Planet.", | |
| details: [ | |
| { label: "Diameter", value: "6,779 km" }, | |
| { label: "Distance from Sun", value: "227.9 million km" }, | |
| { label: "Orbital Period", value: "687 Earth days" }, | |
| { label: "Surface Temp", value: "-140°C to 20°C" }, | |
| { label: "Moons", value: "2 (Phobos & Deimos)" } | |
| ] | |
| }, | |
| jupiter: { | |
| title: "Jupiter", | |
| info: "The largest planet in our solar system. Jupiter is a gas giant and more than twice as massive as all other planets combined.", | |
| details: [ | |
| { label: "Diameter", value: "139,820 km" }, | |
| { label: "Distance from Sun", value: "778.3 million km" }, | |
| { label: "Orbital Period", value: "11.9 Earth years" }, | |
| { label: "Surface Temp", value: "-108°C" }, | |
| { label: "Moons", value: "79 (known)" } | |
| ] | |
| }, | |
| saturn: { | |
| title: "Saturn", | |
| info: "The sixth planet from the Sun and the second-largest. Saturn is famous for its beautiful rings.", | |
| details: [ | |
| { label: "Diameter", value: "116,460 km" }, | |
| { label: "Distance from Sun", value: "1.4 billion km" }, | |
| { label: "Orbital Period", value: "29.5 Earth years" }, | |
| { label: "Surface Temp", value: "-139°C" }, | |
| { label: "Moons", value: "82 (known)" } | |
| ] | |
| }, | |
| uranus: { | |
| title: "Uranus", | |
| info: "The seventh planet from the Sun. Uranus is an ice giant and rotates on its side.", | |
| details: [ | |
| { label: "Diameter", value: "50,724 km" }, | |
| { label: "Distance from Sun", value: "2.9 billion km" }, | |
| { label: "Orbital Period", value: "84 Earth years" }, | |
| { label: "Surface Temp", value: "-197°C" }, | |
| { label: "Moons", value: "27" } | |
| ] | |
| }, | |
| neptune: { | |
| title: "Neptune", | |
| info: "The eighth and most distant planet from the Sun. Neptune is dark, cold and whipped by supersonic winds.", | |
| details: [ | |
| { label: "Diameter", value: "49,244 km" }, | |
| { label: "Distance from Sun", value: "4.5 billion km" }, | |
| { label: "Orbital Period", value: "165 Earth years" }, | |
| { label: "Surface Temp", value: "-201°C" }, | |
| { label: "Moons", value: "14" } | |
| ] | |
| } | |
| }; | |
| // Add click events for planet selection | |
| planetContainers.forEach(container => { | |
| const planet = container.querySelector('.planet'); | |
| const planetClass = Array.from(planet.classList).find(cls => cls !== 'planet'); | |
| const label = container.querySelector('.planet-label'); | |
| container.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| // Remove previous selection | |
| if (selectedPlanet) { | |
| selectedPlanet.classList.remove('selected-planet'); | |
| const prevLabel = selectedPlanet.parentElement.querySelector('.planet-label'); | |
| prevLabel.classList.remove('selected-label'); | |
| } | |
| // Set new selection | |
| selectedPlanet = planet; | |
| planet.classList.add('selected-planet'); | |
| label.classList.add('selected-label'); | |
| // Show planet info | |
| if (planetData[planetClass]) { | |
| planetInfo.innerHTML = `<strong>${planetData[planetClass].title}</strong><br>${planetData[planetClass].info}`; | |
| // Add detailed information | |
| let detailsHTML = ''; | |
| planetData[planetClass].details.forEach(detail => { | |
| detailsHTML += ` | |
| <div class="detail-row"> | |
| <span class="detail-label">${detail.label}</span> | |
| <span class="detail-value">${detail.value}</span> | |
| </div> | |
| `; | |
| }); | |
| planetDetails.innerHTML = detailsHTML; | |
| } | |
| // Ensure info panel is visible | |
| infoPanel.classList.remove('hidden'); | |
| }); | |
| }); | |
| // Click anywhere else to deselect | |
| document.addEventListener('click', () => { | |
| if (selectedPlanet) { | |
| selectedPlanet.classList.remove('selected-planet'); | |
| const label = selectedPlanet.parentElement.querySelector('.planet-label'); | |
| label.classList.remove('selected-label'); | |
| selectedPlanet = null; | |
| // Reset info panel | |
| planetInfo.innerHTML = "Click on any planet to see detailed information. Our solar system consists of the Sun and everything that orbits around it, including planets, moons, asteroids, comets and meteoroids."; | |
| planetDetails.innerHTML = ""; | |
| } | |
| }); | |
| // Control buttons | |
| pauseBtn.addEventListener('click', function() { | |
| orbits.forEach(orbit => { | |
| orbit.style.animationPlayState = 'paused'; | |
| }); | |
| planetContainers.forEach(container => { | |
| container.style.animationPlayState = 'paused'; | |
| }); | |
| }); | |
| resumeBtn.addEventListener('click', function() { | |
| orbits.forEach(orbit => { | |
| orbit.style.animationPlayState = 'running'; | |
| }); | |
| planetContainers.forEach(container => { | |
| container.style.animationPlayState = 'running'; | |
| }); | |
| }); | |
| speedUpBtn.addEventListener('click', function() { | |
| speedMultiplier *= 1.5; | |
| updateAnimationSpeeds(); | |
| }); | |
| slowDownBtn.addEventListener('click', function() { | |
| speedMultiplier /= 1.5; | |
| updateAnimationSpeeds(); | |
| }); | |
| resetBtn.addEventListener('click', function() { | |
| speedMultiplier = 1; | |
| updateAnimationSpeeds(true); | |
| }); | |
| toggleInfoBtn.addEventListener('click', function() { | |
| infoPanel.classList.toggle('hidden'); | |
| }); | |
| function updateAnimationSpeeds(reset = false) { | |
| orbits.forEach(orbit => { | |
| const originalDuration = reset ? | |
| originalDurations[orbit.style.animationDuration] : | |
| parseFloat(orbit.style.animationDuration); | |
| orbit.style.animationDuration = reset ? | |
| originalDuration : | |
| `${originalDuration / speedMultiplier}s`; | |
| }); | |
| planetContainers.forEach(container => { | |
| const originalDuration = reset ? | |
| originalDurations[container.style.animationDuration] : | |
| parseFloat(container.style.animationDuration); | |
| container.style.animationDuration = reset ? | |
| originalDuration : | |
| `${originalDuration / speedMultiplier}s`; | |
| }); | |
| } | |
| }); | |
| </script> | |
| <style> | |
| @keyframes orbit { | |
| 0% { | |
| transform: translate(-50%, -50%) rotateX(75deg) rotateZ(0deg); | |
| } | |
| 100% { | |
| transform: translate(-50%, -50%) rotateX(75deg) rotateZ(360deg); | |
| } | |
| } | |
| @keyframes rotate { | |
| 0% { | |
| transform: rotateY(0deg); | |
| } | |
| 100% { | |
| transform: rotateY(360deg); | |
| } | |
| } | |
| </style> | |
| <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=shubham6924/solar-system" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |