Exploring the vastness of our solar system offers a glimpse into the wonders of space. From the blazing sun to the icy edges of the Kuiper Belt, each celestial body tells a unique story.
In this article, we will delve into ten fascinating examples within our solar system. These examples highlight the diversity and complexity of the cosmic neighborhood we call home.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Design your own Solar System with Subframe's drag-and-drop interface and intuitive, responsive canvas. Loved by designers and developers alike, Subframe ensures pixel-perfect UI every time.
Start for free and bring your cosmic visions to life!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to elevate your UI designs? With Subframe, you can create stunning, pixel-perfect interfaces, including intricate Solar System models, in no time.
Experience the efficiency of our drag-and-drop editor and start designing immediately. Start for free and bring your creative visions to life today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cosmic Explorer: Interactive Solar System</title> <style> :root { --dark-navy: #050e2a; --deep-space: #070b1d; --star-white: #ffffff; --mercury-color: #c7c7c7; --venus-color: #e89d5e; --earth-color: #4c86f0; --mars-color: #e27b58; --jupiter-color: #e0ae6f; --saturn-color: #f7e4b5; --uranus-color: #b1e7e7; --neptune-color: #4b70dd; --pluto-color: #9d9d9d; --mercury-orbit: #c7c7c755; --venus-orbit: #e89d5e55; --earth-orbit: #4c86f055; --mars-orbit: #e27b5855; --jupiter-orbit: #e0ae6f55; --saturn-orbit: #f7e4b555; --uranus-orbit: #b1e7e755; --neptune-orbit: #4b70dd55; --pluto-orbit: #9d9d9d55; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } body { background: var(--deep-space); background: radial-gradient(circle, var(--dark-navy) 0%, var(--deep-space) 100%); overflow: hidden; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; color: var(--star-white); } #container { position: relative; width: 700px; height: 700px; display: flex; flex-direction: column; justify-content: center; align-items: center; } header { position: absolute; top: 15px; left: 0; right: 0; z-index: 10; text-align: center; padding: 10px; } h1 { font-size: 24px; margin-bottom: 5px; text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); letter-spacing: 1px; } p.subtitle { font-size: 14px; opacity: 0.8; max-width: 600px; margin: 0 auto; } #solar-system { width: 600px; height: 600px; position: relative; margin: 30px auto; transform-style: preserve-3d; perspective: 1000px; } .sun { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; background: radial-gradient(circle, #ffde94 30%, #ff9d00 100%); border-radius: 50%; box-shadow: 0 0 40px #ff9d00; z-index: 10; transform-style: preserve-3d; } .sun::after { content: ""; position: absolute; top: -10px; left: -10px; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 157, 0, 0.3) 0%, rgba(255, 157, 0, 0) 70%); animation: pulse 3s infinite alternate; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.3; } 100% { transform: scale(1.2); opacity: 0.1; } } .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); transition: transform 0.5s ease; z-index: 1; } .planet { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); border-radius: 50%; z-index: 2; transform-style: preserve-3d; transition: box-shadow 0.3s ease; } .planet-label { position: absolute; color: white; font-size: 11px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; transform: translateY(-15px); text-align: center; text-shadow: 0 0 5px rgba(0, 0, 0, 0.8); } .planet:hover .planet-label { opacity: 1; } .planet:hover { cursor: pointer; } .planet-info { position: absolute; bottom: 20px; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); border-radius: 10px; padding: 15px; transform: translateY(20px); opacity: 0; transition: all 0.3s ease; z-index: 20; max-width: 500px; margin: 0 auto; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); } .planet-info.active { transform: translateY(0); opacity: 1; } .planet-info h2 { margin-bottom: 10px; display: flex; align-items: center; } .planet-info-color { display: inline-block; width: 15px; height: 15px; border-radius: 50%; margin-right: 10px; } .planet-info p { margin-bottom: 8px; font-size: 14px; line-height: 1.4; } .planet-info-close { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; opacity: 0.7; } .planet-info-close:hover { opacity: 1; } .controls { position: absolute; bottom: 15px; left: 0; right: 0; display: flex; justify-content: center; gap: 15px; z-index: 10; } .control-btn { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 20px; padding: 8px 15px; font-size: 12px; cursor: pointer; transition: all 0.2s ease; backdrop-filter: blur(5px); } .control-btn:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); } .control-btn.active { background: rgba(255, 255, 255, 0.3); box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } .stars { position: absolute; width: 100%; height: 100%; overflow: hidden; z-index: 0; } .star { position: absolute; background-color: white; border-radius: 50%; animation: twinkle var(--duration) infinite both; opacity: var(--opacity); } @keyframes twinkle { 0%, 100% { opacity: var(--opacity); transform: scale(1); } 50% { opacity: var(--opacity-half); transform: scale(0.5); } } .instructions { position: absolute; top: 80px; left: 0; right: 0; text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.5px; transform: translateY(0); opacity: 1; transition: all 0.3s ease; } .instructions.hidden { transform: translateY(-10px); opacity: 0; } .trail { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0; } @keyframes fadeTrail { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } } .tutorial-highlight { position: absolute; border-radius: 50%; box-shadow: 0 0 0 2px white, 0 0 0 10px rgba(255, 255, 255, 0.1); animation: pulse-highlight 2s infinite; pointer-events: none; z-index: 100; } @keyframes pulse-highlight { 0%, 100% { box-shadow: 0 0 0 2px white, 0 0 0 10px rgba(255, 255, 255, 0.1); } 50% { box-shadow: 0 0 0 2px white, 0 0 0 20px rgba(255, 255, 255, 0.05); } } @media (max-width: 700px) { #solar-system { width: 400px; height: 400px; transform: scale(0.65); } .planet-info { max-width: 85%; padding: 10px; } .controls { flex-wrap: wrap; gap: 8px; } .control-btn { padding: 6px 10px; font-size: 11px; } h1 { font-size: 20px; } p.subtitle { font-size: 12px; } } @media (max-width: 500px) { #solar-system { width: 350px; height: 350px; transform: scale(0.5); } } </style> </head> <body> <div id="container"> <header> <h1>COSMIC EXPLORER</h1> <p class="subtitle">Navigate our solar system by dragging to rotate the view, click on planets to discover their secrets</p> </header> <div class="instructions"> Click and drag to rotate the solar system perspective </div> <div id="solar-system"> <div class="stars"></div> <div class="sun"></div> <!-- Orbits and planets will be dynamically created --> </div> <div class="planet-info"> <div class="planet-info-close">×</div> <h2><span class="planet-info-color"></span> <span class="planet-info-name"></span></h2> <p class="planet-info-description"></p> <p class="planet-info-details"></p> <p class="planet-info-fun-fact"></p> </div> <div class="controls"> <button class="control-btn view-btn active" data-view="top">Top View</button> <button class="control-btn view-btn" data-view="side">Side View</button> <button class="control-btn" id="reset-view">Reset View</button> <button class="control-btn" id="toggle-labels">Show Labels</button> <button class="control-btn" id="toggle-orbits">Highlight Orbits</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Planet data const planets = [ { name: "Mercury", diameter: 8, orbitRadius: 60, orbitPeriod: 20, color: "var(--mercury-color)", orbitColor: "var(--mercury-orbit)", tilt: 0.034, description: "The smallest and innermost planet in our Solar System.", details: "Mercury has virtually no atmosphere and experiences extreme temperature variations.", funFact: "A day on Mercury (176 Earth days) is twice as long as its year (88 Earth days)." }, { name: "Venus", diameter: 12, orbitRadius: 85, orbitPeriod: 30, color: "var(--venus-color)", orbitColor: "var(--venus-orbit)", tilt: 2.64, description: "The second planet from the Sun, known as Earth's 'sister planet'.", details: "Venus has a thick toxic atmosphere that traps heat, making it the hottest planet in our solar system.", funFact: "Venus rotates backward compared to other planets, with the Sun rising in the west and setting in the east." }, { name: "Earth", diameter: 12, orbitRadius: 110, orbitPeriod: 40, color: "var(--earth-color)", orbitColor: "var(--earth-orbit)", tilt: 23.44, description: "Our home planet and the only known world with abundant liquid water and life.", details: "Earth's atmosphere and magnetic field protect us from harmful solar radiation.", funFact: "Earth's rotation is gradually slowing. Eventually, days will become longer by about 1.7 milliseconds per century." }, { name: "Mars", diameter: 10, orbitRadius: 135, orbitPeriod: 60, color: "var(--mars-color)", orbitColor: "var(--mars-orbit)", tilt: 25.19, description: "The fourth planet from the Sun, often called the 'Red Planet'.", details: "Mars has the largest volcano in the solar system, Olympus Mons, and a canyon system that dwarfs Earth's Grand Canyon.", funFact: "Mars experiences dust storms so massive they can cover the entire planet and last for months." }, { name: "Jupiter", diameter: 22, orbitRadius: 180, orbitPeriod: 80, color: "var(--jupiter-color)", orbitColor: "var(--jupiter-orbit)", tilt: 3.13, description: "The largest planet in our Solar System, a gas giant with a mass 2.5 times all other planets combined.", details: "Jupiter's Great Red Spot is a gigantic storm that has been raging for over 400 years.", funFact: "Jupiter has the fastest rotation of any planet, completing a day in just under 10 hours." }, { name: "Saturn", diameter: 18, orbitRadius: 230, orbitPeriod: 100, color: "var(--saturn-color)", orbitColor: "var(--saturn-orbit)", tilt: 26.73, description: "The sixth planet from the Sun, famous for its spectacular ring system.", details: "Saturn's rings are made mostly of ice particles with some rocky debris and dust.", funFact: "Saturn is less dense than water—if placed in a giant bathtub, it would float." }, { name: "Uranus", diameter: 16, orbitRadius: 280, orbitPeriod: 120, color: "var(--uranus-color)", orbitColor: "var(--uranus-orbit)", tilt: 97.77, description: "The seventh planet from the Sun, an ice giant with a unique sideways rotation.", details: "Uranus appears blue-green due to methane in its atmosphere which absorbs red light.", funFact: "Uranus rotates on its side, likely due to a massive collision in its early formation." }, { name: "Neptune", diameter: 16, orbitRadius: 320, orbitPeriod: 140, color: "var(--neptune-color)", orbitColor: "var(--neptune-orbit)", tilt: 28.32, description: "The eighth and most distant planet, known for its deep blue color and fierce winds.", details: "Neptune has the strongest winds in the solar system, reaching speeds of 1,200 mph.", funFact: "Neptune was discovered through mathematical predictions rather than direct observation." } ]; // DOM elements const solarSystem = document.getElementById('solar-system'); const planetInfo = document.querySelector('.planet-info'); const planetInfoName = document.querySelector('.planet-info-name'); const planetInfoColor = document.querySelector('.planet-info-color'); const planetInfoDescription = document.querySelector('.planet-info-description'); const planetInfoDetails = document.querySelector('.planet-info-details'); const planetInfoFunFact = document.querySelector('.planet-info-fun-fact'); const planetInfoClose = document.querySelector('.planet-info-close'); const resetViewBtn = document.getElementById('reset-view'); const toggleLabelsBtn = document.getElementById('toggle-labels'); const toggleOrbitsBtn = document.getElementById('toggle-orbits'); const instructionsEl = document.querySelector('.instructions'); const viewBtns = document.querySelectorAll('.view-btn'); const starsContainer = document.querySelector('.stars'); // State variables let isDragging = false; let startX = 0, startY = 0; let rotationX = 75; // Initial X rotation let rotationY = 0; // Initial Y rotation let tutorialHighlight = null; let labelsVisible = false; let orbitsHighlighted = false; let currentView = 'top'; // 'top' or 'side' // Create stars function createStars() { for (let i = 0; i < 200; i++) { const star = document.createElement('div'); star.className = 'star'; const size = Math.random() * 2; star.style.width = `${size}px`; star.style.height = `${size}px`; star.style.left = `${Math.random() * 100}%`; star.style.top = `${Math.random() * 100}%`; star.style.setProperty('--duration', `${3 + Math.random() * 7}s`); star.style.setProperty('--opacity', `${0.5 + Math.random() * 0.5}`); star.style.setProperty('--opacity-half', `${0.1 + Math.random() * 0.3}`); starsContainer.appendChild(star); } } // Create planets and orbits function createPlanets() { planets.forEach((planet, index) => { // Create orbit const orbit = document.createElement('div'); orbit.className = 'orbit'; orbit.style.width = `${planet.orbitRadius * 2}px`; orbit.style.height = `${planet.orbitRadius * 2}px`; orbit.dataset.planetName = planet.name; solarSystem.appendChild(orbit); // Create planet const planetEl = document.createElement('div'); planetEl.className = 'planet'; planetEl.style.width = `${planet.diameter}px`; planetEl.style.height = `${planet.diameter}px`; planetEl.style.backgroundColor = planet.color; planetEl.style.boxShadow = `0 0 10px ${planet.color}`; // Position planet at a random point in its orbit const angle = Math.random() * Math.PI * 2; const x = Math.cos(angle) * planet.orbitRadius; const y = Math.sin(angle) * planet.orbitRadius; planetEl.style.transform = `translate(${x}px, ${y}px)`; // Add rotation animation planetEl.style.animation = `orbit ${planet.orbitPeriod}s linear infinite`; // Add planet label const label = document.createElement('div'); label.className = 'planet-label'; label.textContent = planet.name; planetEl.appendChild(label); // Store planet data planetEl.dataset.name = planet.name; planetEl.dataset.index = index; // Append planet to orbit orbit.appendChild(planetEl); // Set up animation const keyframes = []; for (let i = 0; i <= 100; i++) { const angle = (i / 100) * Math.PI * 2; const x = Math.cos(angle) * planet.orbitRadius; const y = Math.sin(angle) * planet.orbitRadius; keyframes.push({ offset: i / 100, transform: `translate(${x}px, ${y}px)` }); } planetEl.animate(keyframes, { duration: planet.orbitPeriod * 1000, iterations: Infinity }); // Add click event to show planet info planetEl.addEventListener('click', (e) => { e.stopPropagation(); showPlanetInfo(index); }); }); } // Show planet information function showPlanetInfo(index) { const planet = planets[index]; planetInfoName.textContent = planet.name; planetInfoColor.style.backgroundColor = planet.color; planetInfoDescription.textContent = planet.description; planetInfoDetails.textContent = planet.details; planetInfoFunFact.textContent = "Fun Fact: " + planet.funFact; planetInfo.classList.add('active'); hideInstructions(); removeTutorialHighlight(); } // Hide planet information function hidePlanetInfo() { planetInfo.classList.remove('active'); } // Create planet trail function createTrail(x, y, color) { const trail = document.createElement('div'); trail.className = 'trail'; trail.style.left = `${x}px`; trail.style.top = `${y}px`; trail.style.width = '8px'; trail.style.height = '8px'; trail.style.backgroundColor = color; trail.style.animation = 'fadeTrail 2s forwards'; solarSystem.appendChild(trail); // Remove trail after animation completes setTimeout(() => { solarSystem.removeChild(trail); }, 2000); } // Show tutorial highlight function showTutorialHighlight() { if (tutorialHighlight) return; const planets = document.querySelectorAll('.planet'); if (planets.length === 0) return; // Pick a random planet to highlight const randomPlanet = planets[Math.floor(Math.random() * planets.length)]; const rect = randomPlanet.getBoundingClientRect(); const solarSystemRect = solarSystem.getBoundingClientRect(); tutorialHighlight = document.createElement('div'); tutorialHighlight.className = 'tutorial-highlight'; tutorialHighlight.style.width = `${randomPlanet.offsetWidth + 10}px`; tutorialHighlight.style.height = `${randomPlanet.offsetHeight + 10}px`; tutorialHighlight.style.left = `${rect.left - solarSystemRect.left + randomPlanet.offsetWidth / 2}px`; tutorialHighlight.style.top = `${rect.top - solarSystemRect.top + randomPlanet.offsetHeight / 2}px`; tutorialHighlight.style.transform = 'translate(-50%, -50%)'; solarSystem.appendChild(tutorialHighlight); // Remove highlight after 5 seconds setTimeout(removeTutorialHighlight, 5000); } // Remove tutorial highlight function removeTutorialHighlight() { if (tutorialHighlight && tutorialHighlight.parentNode) { tutorialHighlight.parentNode.removeChild(tutorialHighlight); tutorialHighlight = null; } } // Hide instructions function hideInstructions() { instructionsEl.classList.add('hidden'); } // Toggle labels visibility function toggleLabels() { labelsVisible = !labelsVisible; const labels = document.querySelectorAll('.planet-label'); labels.forEach(label => { label.style.opacity = labelsVisible ? '1' : '0'; }); toggleLabelsBtn.textContent = labelsVisible ? 'Hide Labels' : 'Show Labels'; toggleLabelsBtn.classList.toggle('active', labelsVisible); } // Toggle orbit highlights function toggleOrbits() { orbitsHighlighted = !orbitsHighlighted; const orbits = document.querySelectorAll('.orbit'); orbits.forEach(orbit => { const planetName = orbit.dataset.planetName; const planetData = planets.find(p => p.name === planetName); if (planetData) { orbit.style.borderColor = orbitsHighlighted ? planetData.orbitColor : 'rgba(255, 255, 255, 0.1)'; orbit.style.borderWidth = orbitsHighlighted ? '2px' : '1px'; } }); toggleOrbitsBtn.textContent = orbitsHighlighted ? 'Normal Orbits' : 'Highlight Orbits'; toggleOrbitsBtn.classList.toggle('active', orbitsHighlighted); } // Change view (top or side) function changeView(view) { currentView = view; const orbits = document.querySelectorAll('.orbit'); viewBtns.forEach(btn => { btn.classList.toggle('active', btn.dataset.view === view); }); if (view === 'top') { rotationX = 75; rotationY = 0; } else if (view === 'side') { rotationX = 0; rotationY = 0; } updateSolarSystemRotation(); } // Update solar system rotation function updateSolarSystemRotation() { const orbits = document.querySelectorAll('.orbit'); orbits.forEach(orbit => { orbit.style.transform = `translate(-50%, -50%) rotateX(${rotationX}deg) rotateY(${rotationY}deg)`; }); } // Reset view function resetView() { changeView(currentView); hidePlanetInfo(); } // Initialize function init() { createStars(); createPlanets(); updateSolarSystemRotation(); // After a delay, show the tutorial highlight setTimeout(showTutorialHighlight, 3000); // Event listeners planetInfoClose.addEventListener('click', hidePlanetInfo); solarSystem.addEventListener('mousedown', (e) => { if (e.target.classList.contains('planet')) return; isDragging = true; startX = e.clientX; startY = e.clientY; solarSystem.style.cursor = 'grabbing'; hideInstructions(); }); document.addEventListener('mousemove', (e) => { if (!isDragging) return; const deltaX = e.clientX - startX; const deltaY = e.clientY - startY; rotationY += deltaX * 0.5; rotationX = Math.max(-90, Math.min(90, rotationX + deltaY * 0.5)); updateSolarSystemRotation(); startX = e.clientX; startY = e.clientY; }); document.addEventListener('mouseup', () => { isDragging = false; solarSystem.style.cursor = 'grab'; }); solarSystem.addEventListener('touchstart', (e) => { if (e.target.classList.contains('planet')) return; isDragging = true; startX = e.touches[0].clientX; startY = e.touches[0].clientY; hideInstructions(); e.preventDefault(); }, { passive: false }); document.addEventListener('touchmove', (e) => { if (!isDragging) return; const deltaX = e.touches[0].clientX - startX; const deltaY = e.touches[0].clientY - startY; rotationY += deltaX * 0.5; rotationX = Math.max(-90, Math.min(90, rotationX + deltaY * 0.5)); updateSolarSystemRotation(); startX = e.touches[0].clientX; startY = e.touches[0].clientY; e.preventDefault(); }, { passive: false }); document.addEventListener('touchend', () => { isDragging = false; }); resetViewBtn.addEventListener('click', resetView); toggleLabelsBtn.addEventListener('click', toggleLabels); toggleOrbitsBtn.addEventListener('click', toggleOrbits); viewBtns.forEach(btn => { btn.addEventListener('click', () => { changeView(btn.dataset.view); }); }); } init(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Solar System Data Visualization</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', 'Segoe UI', sans-serif; } body { width: 100%; height: 100%; background-color: #0d1117; color: #e6edf3; overflow: hidden; display: flex; justify-content: center; align-items: center; } .container { width: 700px; height: 700px; position: relative; display: flex; flex-direction: column; } .header { padding: 20px; text-align: center; } .header h1 { font-size: 24px; margin-bottom: 5px; background: linear-gradient(45deg, #58a6ff, #88ddff); -webkit-background-clip: text; background-clip: text; color: transparent; text-transform: uppercase; letter-spacing: 1px; } .header p { font-size: 14px; color: #8b949e; max-width: 450px; margin: 0 auto; } .dashboard { flex: 1; display: flex; flex-direction: column; } .solar-system { flex: 1; position: relative; margin: 10px; border-radius: 10px; background-color: #161b22; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .sun { position: absolute; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffdb58, #ff7b00); top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 25px #ff7b00, 0 0 50px rgba(255, 123, 0, 0.3); z-index: 10; } .orbit { position: absolute; border-radius: 50%; border: 1px dashed rgba(101, 117, 133, 0.3); top: 50%; left: 50%; transform: translate(-50%, -50%); } .planet { position: absolute; border-radius: 50%; transform-origin: center; cursor: pointer; transition: box-shadow 0.3s ease, transform 0.2s ease; } .planet:hover { transform: scale(1.2); box-shadow: 0 0 15px currentColor; } .planet-label { position: absolute; font-size: 10px; color: rgba(230, 237, 243, 0.8); text-transform: uppercase; letter-spacing: 0.5px; transform: translate(-50%, -20px); background-color: rgba(22, 27, 34, 0.7); padding: 2px 5px; border-radius: 3px; backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.3s ease; white-space: nowrap; } .planet:hover .planet-label { opacity: 1; } .tooltip { position: absolute; background-color: rgba(13, 17, 23, 0.9); backdrop-filter: blur(8px); border-radius: 8px; padding: 15px; width: 220px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); border: 1px solid rgba(88, 166, 255, 0.2); z-index: 100; pointer-events: none; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; } .tooltip h3 { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; } .tooltip-indicator { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; } .tooltip hr { border: none; height: 1px; background-color: rgba(88, 166, 255, 0.2); margin: 10px 0; } .tooltip-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; } .tooltip-stat { display: flex; flex-direction: column; } .tooltip-stat span:first-child { color: #8b949e; font-size: 10px; margin-bottom: 2px; } .tooltip-stat span:last-child { color: #e6edf3; font-weight: 600; } .controls { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background-color: #161b22; border-radius: 10px; margin: 0 10px 10px 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } .time-control { display: flex; align-items: center; } .time-control button { background: none; border: none; color: #58a6ff; cursor: pointer; font-size: 16px; padding: 5px 10px; margin-right: 5px; border-radius: 4px; transition: background-color 0.2s ease; } .time-control button:hover { background-color: rgba(88, 166, 255, 0.1); } .date-display { font-size: 14px; font-weight: 500; text-align: center; padding: 5px 10px; border-radius: 4px; background-color: rgba(88, 166, 255, 0.1); color: #e6edf3; min-width: 150px; } .view-toggle { display: flex; align-items: center; } .view-toggle span { font-size: 12px; color: #8b949e; margin-right: 8px; } .toggle-btn { position: relative; display: inline-block; width: 40px; height: 22px; } .toggle-btn input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #2d333b; border-radius: 22px; transition: .4s; } .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 2px; bottom: 2px; background-color: #8b949e; border-radius: 50%; transition: .4s; } input:checked + .toggle-slider { background-color: #58a6ff; } input:checked + .toggle-slider:before { transform: translateX(18px); background-color: white; } .loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(13, 17, 23, 0.85); display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 1000; } .loading-spinner { width: 50px; height: 50px; border: 3px solid rgba(88, 166, 255, 0.2); border-top: 3px solid #58a6ff; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 15px; } .loading-text { color: #e6edf3; font-size: 16px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .metrics-badge { position: absolute; top: 20px; right: 20px; background-color: rgba(22, 27, 34, 0.8); backdrop-filter: blur(5px); border-radius: 8px; padding: 10px 15px; font-size: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); border: 1px solid rgba(88, 166, 255, 0.2); display: flex; flex-direction: column; gap: 8px; color: #8b949e; z-index: 5; } .metric-item { display: flex; justify-content: space-between; gap: 20px; } .metric-item .value { color: #e6edf3; font-weight: 500; } .star-field { position: absolute; width: 100%; height: 100%; z-index: 1; } .star { position: absolute; background-color: white; border-radius: 50%; opacity: 0.7; } @keyframes pulse { 0% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0.7; transform: scale(1); } } .info-card { position: absolute; bottom: 20px; left: 20px; background-color: rgba(22, 27, 34, 0.7); backdrop-filter: blur(5px); border-radius: 8px; padding: 12px; font-size: 12px; max-width: 180px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); border: 1px solid rgba(88, 166, 255, 0.2); color: #8b949e; z-index: 5; transition: transform 0.3s ease, opacity 0.3s ease; } .info-card:hover { transform: translateY(-5px); } .info-card h4 { color: #e6edf3; margin-bottom: 5px; font-size: 13px; } .info-card p { margin-bottom: 8px; line-height: 1.4; } .alert { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background-color: rgba(22, 27, 34, 0.9); backdrop-filter: blur(5px); border-radius: 8px; padding: 12px 20px; z-index: 200; border: 1px solid rgba(88, 166, 255, 0.3); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; max-width: 300px; text-align: center; display: flex; align-items: center; justify-content: center; } .alert.show { opacity: 1; transform: translateX(-50%) translateY(0); } .alert-icon { margin-right: 8px; color: #58a6ff; } .celestial-event { position: absolute; background-color: rgba(255, 210, 50, 0.2); border: 1px solid rgba(255, 210, 50, 0.4); border-radius: 50%; pointer-events: none; z-index: 6; animation: pulse 2s infinite ease-in-out; } .celestial-event::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background-color: rgba(255, 210, 50, 0.8); border-radius: 50%; } /* Responsive styles */ @media (max-width: 700px) { .header h1 { font-size: 20px; } .header p { font-size: 12px; } .controls { flex-direction: column; gap: 10px; } .date-display { order: -1; margin-bottom: 10px; } .tooltip { width: 180px; padding: 10px; } .metrics-badge { right: 10px; top: 10px; padding: 8px; font-size: 10px; } .info-card { left: 10px; bottom: 10px; max-width: 150px; font-size: 10px; } } </style> </head> <body> <div class="container"> <div class="header"> <h1>Solar System Explorer</h1> <p>Real-time planetary positions with accurate orbital data based on NASA JPL ephemeris calculations</p> </div> <div class="dashboard"> <div class="solar-system"> <div class="star-field"></div> <div class="sun"></div> <!-- Planets and orbits will be generated by JS --> <div class="metrics-badge"> <div class="metric-item"> <span>Time Scale</span> <span class="value" id="time-scale">1 day/sec</span> </div> <div class="metric-item"> <span>Active Planets</span> <span class="value" id="active-planets">8</span> </div> <div class="metric-item"> <span>Next Event</span> <span class="value" id="next-event">Mar 11, 2023</span> </div> </div> <div class="info-card"> <h4>Data Visualization</h4> <p>Hover over planets to view orbital metrics and real-time positional data.</p> <p>Toggle realistic view to observe actual scale differences.</p> </div> <div class="tooltip" id="planet-tooltip"> <h3> <span><span class="tooltip-indicator"></span> <span class="planet-name"></span></span> <span class="planet-distance"></span> </h3> <hr> <div class="tooltip-stats"> <div class="tooltip-stat"> <span>ORBITAL PERIOD</span> <span class="orbital-period"></span> </div> <div class="tooltip-stat"> <span>VELOCITY</span> <span class="orbital-velocity"></span> </div> <div class="tooltip-stat"> <span>DIAMETER</span> <span class="planet-diameter"></span> </div> <div class="tooltip-stat"> <span>AXIAL TILT</span> <span class="axial-tilt"></span> </div> </div> </div> </div> <div class="controls"> <div class="time-control"> <button id="slower-btn">⏪</button> <button id="pause-btn">⏸</button> <button id="faster-btn">⏩</button> </div> <div class="date-display" id="date-display">Jan 01, 2023</div> <div class="view-toggle"> <span>Realistic Scale</span> <label class="toggle-btn"> <input type="checkbox" id="scale-toggle"> <span class="toggle-slider"></span> </label> </div> </div> </div> <div class="loading-overlay" id="loading-overlay"> <div class="loading-spinner"></div> <div class="loading-text">Loading planetary data...</div> </div> <div class="alert" id="system-alert"> <span class="alert-icon">ℹ️</span> <span id="alert-message"></span> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Planet data with realistic stats const planets = [ { name: "Mercury", color: "#a6a6a6", radius: 2439.7, // km orbitRadius: 57909050, // km orbitPeriod: 87.97, // days orbitSpeed: 47.87, // km/s axialTilt: 0.034, // degrees realSize: 3, // px for visualization scaledSize: 8, scaledOrbitRadius: 45 }, { name: "Venus", color: "#e7cdcd", radius: 6051.8, orbitRadius: 108208000, orbitPeriod: 224.7, orbitSpeed: 35.02, axialTilt: 177.4, realSize: 6, scaledSize: 12, scaledOrbitRadius: 70 }, { name: "Earth", color: "#2f6a69", radius: 6371, orbitRadius: 149598023, orbitPeriod: 365.26, orbitSpeed: 29.78, axialTilt: 23.44, realSize: 6, scaledSize: 12, scaledOrbitRadius: 95 }, { name: "Mars", color: "#c1440e", radius: 3389.5, orbitRadius: 227939366, orbitPeriod: 686.98, orbitSpeed: 24.13, axialTilt: 25.19, realSize: 4, scaledSize: 10, scaledOrbitRadius: 120 }, { name: "Jupiter", color: "#e3a55d", radius: 69911, orbitRadius: 778547200, orbitPeriod: 4332.59, orbitSpeed: 13.07, axialTilt: 3.13, realSize: 20, scaledSize: 24, scaledOrbitRadius: 155 }, { name: "Saturn", color: "#d2b65b", radius: 58232, orbitRadius: 1433449370, orbitPeriod: 10759.22, orbitSpeed: 9.69, axialTilt: 26.73, realSize: 17, scaledSize: 22, scaledOrbitRadius: 190 }, { name: "Uranus", color: "#caebed", radius: 25362, orbitRadius: 2876679082, orbitPeriod: 30688.5, orbitSpeed: 6.81, axialTilt: 97.77, realSize: 12, scaledSize: 16, scaledOrbitRadius: 225 }, { name: "Neptune", color: "#5b9fb5", radius: 24622, orbitRadius: 4503443661, orbitPeriod: 60195, orbitSpeed: 5.43, axialTilt: 28.32, realSize: 12, scaledSize: 16, scaledOrbitRadius: 260 } ]; // Celestial events for visualization const celestialEvents = [ { date: new Date('2023-03-11'), description: "Mercury at Greatest Western Elongation", position: { x: 90, y: 85 }, radius: 20 }, { date: new Date('2023-05-29'), description: "Mars-Jupiter Conjunction", position: { x: 230, y: 190 }, radius: 25 }, { date: new Date('2023-08-13'), description: "Perseid Meteor Shower", position: { x: 150, y: 210 }, radius: 30 }, { date: new Date('2023-10-28'), description: "Partial Lunar Eclipse", position: { x: 300, y: 180 }, radius: 25 }, { date: new Date('2023-12-14'), description: "Geminid Meteor Shower", position: { x: 200, y: 120 }, radius: 28 } ]; // DOM elements const solarSystem = document.querySelector('.solar-system'); const tooltip = document.getElementById('planet-tooltip'); const dateDisplay = document.getElementById('date-display'); const loadingOverlay = document.getElementById('loading-overlay'); const scaleToggle = document.getElementById('scale-toggle'); const timeScaleDisplay = document.getElementById('time-scale'); const activePlanetsDisplay = document.getElementById('active-planets'); const nextEventDisplay = document.getElementById('next-event'); const systemAlert = document.getElementById('system-alert'); const alertMessage = document.getElementById('alert-message'); const pauseBtn = document.getElementById('pause-btn'); const slowerBtn = document.getElementById('slower-btn'); const fasterBtn = document.getElementById('faster-btn'); const starField = document.querySelector('.star-field'); // App state let currentDate = new Date('2023-01-01'); let timeScale = 1; // days per second let isPaused = false; let isRealisticScale = false; let simulationSpeed = 1; let lastTimestamp = 0; let activePlanetsCount = planets.length; // Create star field function createStarField() { for (let i = 0; i < 120; i++) { const star = document.createElement('div'); star.classList.add('star'); // Random size between 1-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}%`; // Make some stars twinkle if (Math.random() > 0.7) { star.style.animation = `pulse ${3 + Math.random() * 4}s infinite`; } starField.appendChild(star); } } // Create planets and orbits function createPlanets() { planets.forEach((planet, index) => { // Create orbit const orbit = document.createElement('div'); orbit.classList.add('orbit'); orbit.style.width = `${planet.scaledOrbitRadius * 2}px`; orbit.style.height = `${planet.scaledOrbitRadius * 2}px`; solarSystem.appendChild(orbit); // Create planet const planetEl = document.createElement('div'); planetEl.classList.add('planet'); planetEl.id = `planet-${index}`; planetEl.style.backgroundColor = planet.color; planetEl.style.width = `${planet.scaledSize}px`; planetEl.style.height = `${planet.scaledSize}px`; planetEl.style.boxShadow = `0 0 8px ${planet.color}`; // Set initial position const angle = Math.random() * Math.PI * 2; // Random starting angle const x = Math.cos(angle) * planet.scaledOrbitRadius + solarSystem.offsetWidth / 2 - planet.scaledSize / 2; const y = Math.sin(angle) * planet.scaledOrbitRadius + solarSystem.offsetHeight / 2 - planet.scaledSize / 2; planetEl.style.left = `${x}px`; planetEl.style.top = `${y}px`; // Set data attributes for animations planetEl.dataset.angle = angle; planetEl.dataset.orbitRadius = planet.scaledOrbitRadius; planetEl.dataset.orbitPeriod = planet.orbitPeriod; // Create planet label const label = document.createElement('div'); label.classList.add('planet-label'); label.textContent = planet.name; planetEl.appendChild(label); // Add event listeners planetEl.addEventListener('mouseenter', () => showTooltip(planetEl, planet)); planetEl.addEventListener('mouseleave', hideTooltip); solarSystem.appendChild(planetEl); }); } // Show tooltip when hovering over a planet function showTooltip(planetEl, planetData) { // Set tooltip content tooltip.querySelector('.planet-name').textContent = planetData.name; tooltip.querySelector('.tooltip-indicator').style.backgroundColor = planetData.color; tooltip.querySelector('.orbital-period').textContent = `${planetData.orbitPeriod.toLocaleString()} days`; tooltip.querySelector('.orbital-velocity').textContent = `${planetData.orbitSpeed.toLocaleString()} km/s`; tooltip.querySelector('.planet-diameter').textContent = `${(planetData.radius * 2).toLocaleString()} km`; tooltip.querySelector('.axial-tilt').textContent = `${planetData.axialTilt.toLocaleString()}°`; // Current distance from sun (simplified) const angle = parseFloat(planetEl.dataset.angle); const actualDistance = (planetData.orbitRadius / 1000000).toFixed(1); tooltip.querySelector('.planet-distance').textContent = `${actualDistance}M km`; // Position tooltip near the planet but within viewport const rect = planetEl.getBoundingClientRect(); const containerRect = solarSystem.getBoundingClientRect(); let left = rect.left - containerRect.left + rect.width / 2; let top = rect.top - containerRect.top + rect.height / 2; // Adjust if tooltip would go outside the container if (left + tooltip.offsetWidth > containerRect.width) { left = left - tooltip.offsetWidth - 20; } else { left = left + 20; } if (top + tooltip.offsetHeight > containerRect.height) { top = top - tooltip.offsetHeight - 10; } tooltip.style.left = `${left}px`; tooltip.style.top = `${top}px`; tooltip.style.opacity = '1'; tooltip.style.transform = 'translateY(0)'; } // Hide tooltip function hideTooltip() { tooltip.style.opacity = '0'; tooltip.style.transform = 'translateY(10px)'; } // Update planet positions based on orbital period function updatePlanets(timestamp) { if (lastTimestamp === 0) { lastTimestamp = timestamp; requestAnimationFrame(updatePlanets); return; } const deltaTime = timestamp - lastTimestamp; lastTimestamp = timestamp; if (!isPaused) { // Advance date based on time scale const daysToAdd = (deltaTime / 1000) * timeScale * simulationSpeed; currentDate.setDate(currentDate.getDate() + daysToAdd); // Update date display dateDisplay.textContent = currentDate.toLocaleDateString('en-US', { month: 'short', day: '2-digit', year: 'numeric' }); // Check for celestial events checkCelestialEvents(); // Update planets planets.forEach((planet, index) => { const planetEl = document.getElementById(`planet-${index}`); // Calculate new angle based on orbital period const angleChange = (2 * Math.PI / planet.orbitPeriod) * daysToAdd; let angle = parseFloat(planetEl.dataset.angle) + angleChange; // Normalize angle to 0-2π if (angle >= 2 * Math.PI) { angle = angle % (2 * Math.PI); } planetEl.dataset.angle = angle; // Calculate new position const radius = parseFloat(planetEl.dataset.orbitRadius); const x = Math.cos(angle) * radius + solarSystem.offsetWidth / 2 - planetEl.offsetWidth / 2; const y = Math.sin(angle) * radius + solarSystem.offsetHeight / 2 - planetEl.offsetHeight / 2; planetEl.style.left = `${x}px`; planetEl.style.top = `${y}px`; }); } requestAnimationFrame(updatePlanets); } // Toggle between realistic and visual scales function toggleScale() { isRealisticScale = !isRealisticScale; planets.forEach((planet, index) => { const planetEl = document.getElementById(`planet-${index}`); const orbit = document.querySelectorAll('.orbit')[index]; if (isRealisticScale) { // Use realistic size proportions planetEl.style.width = `${planet.realSize}px`; planetEl.style.height = `${planet.realSize}px`; // Scale down orbit radiuses for realistic view const scaleFactor = 0.7; const newRadius = planet.scaledOrbitRadius * scaleFactor; orbit.style.width = `${newRadius * 2}px`; orbit.style.height = `${newRadius * 2}px`; planetEl.dataset.orbitRadius = newRadius; } else { // Use visually appealing sizes planetEl.style.width = `${planet.scaledSize}px`; planetEl.style.height = `${planet.scaledSize}px`; // Restore standard orbit radiuses orbit.style.width = `${planet.scaledOrbitRadius * 2}px`; orbit.style.height = `${planet.scaledOrbitRadius * 2}px`; planetEl.dataset.orbitRadius = planet.scaledOrbitRadius; } }); showAlert(isRealisticScale ? "Switched to realistic scale" : "Switched to visual scale"); } // Check for celestial events function checkCelestialEvents() { // Remove any existing events document.querySelectorAll('.celestial-event').forEach(el => el.remove()); // Find next upcoming event let nextEvent = null; let closestDiff = Infinity; celestialEvents.forEach(event => { // Find events within ±5 days const diffTime = Math.abs(event.date - currentDate); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); if (diffDays <= 5) { // Create event marker const marker = document.createElement('div'); marker.classList.add('celestial-event'); marker.style.width = `${event.radius * 2}px`; marker.style.height = `${event.radius * 2}px`; marker.style.left = `${event.position.x - event.radius}px`; marker.style.top = `${event.position.y - event.radius}px`; solarSystem.appendChild(marker); // Show alert for event discovery if (diffDays <= 1) { showAlert(`Celestial Event: ${event.description}`); } } // Find closest future event for "Next Event" display if (event.date > currentDate && (event.date - currentDate) < closestDiff) { closestDiff = event.date - currentDate; nextEvent = event; } }); // Update next event display if (nextEvent) { nextEventDisplay.textContent = nextEvent.date.toLocaleDateString('en-US', { month: 'short', day: '2-digit', year: 'numeric' }); } } // Show system alert function showAlert(message) { alertMessage.textContent = message; systemAlert.classList.add('show'); setTimeout(() => { systemAlert.classList.remove('show'); }, 3000); } // Initialize simulation function init() { createStarField(); createPlanets(); // Simulate loading setTimeout(() => { loadingOverlay.style.opacity = '0'; setTimeout(() => { loadingOverlay.style.display = 'none'; }, 500); // Start animation requestAnimationFrame(updatePlanets); showAlert("Solar system data loaded successfully"); }, 1500); // Set initial values updateTimeScaleDisplay(); activePlanetsDisplay.textContent = activePlanetsCount; nextEventDisplay.textContent = celestialEvents[0].date.toLocaleDateString('en-US', { month: 'short', day: '2-digit', year: 'numeric' }); } // Update time scale display function updateTimeScaleDisplay() { const effectiveScale = timeScale * simulationSpeed; if (effectiveScale >= 365) { timeScaleDisplay.textContent = `${(effectiveScale / 365).toFixed(1)} years/sec`; } else { timeScaleDisplay.textContent = `${effectiveScale.toFixed(1)} days/sec`; } } // Event listeners scaleToggle.addEventListener('change', toggleScale); pauseBtn.addEventListener('click', () => { isPaused = !isPaused; pauseBtn.textContent = isPaused ? '▶️' : '⏸'; showAlert(isPaused ? "Simulation paused" : "Simulation resumed"); }); slowerBtn.addEventListener('click', () => { simulationSpeed = Math.max(0.1, simulationSpeed / 2); updateTimeScaleDisplay(); showAlert(`Simulation speed: ${simulationSpeed}x`); }); fasterBtn.addEventListener('click', () => { simulationSpeed = Math.min(20, simulationSpeed * 2); updateTimeScaleDisplay(); showAlert(`Simulation speed: ${simulationSpeed}x`); }); // Start the simulation init(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cosmic Explorer VR</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } :root { --space-black: #070814; --deep-purple: #1e0b40; --cosmic-blue: #0b1d3a; --nebula-pink: #ff2a6d; --star-yellow: #ffee88; --orbital-teal: #05d9e8; --mars-red: #d92b2b; --jupiter-orange: #e67e22; --saturn-gold: #f1c40f; --neptune-blue: #3498db; --uranus-cyan: #1abc9c; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--space-black); color: white; height: 700px; width: 700px; overflow: hidden; position: relative; display: flex; flex-direction: column; background: radial-gradient(ellipse at bottom, var(--cosmic-blue) 0%, var(--space-black) 100%); } .stars { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .solar-system { position: relative; width: 100%; height: 500px; margin: 0 auto; display: flex; justify-content: center; align-items: center; perspective: 1000px; transform-style: preserve-3d; z-index: 1; } .sun { width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff176 0%, #ffb74d 25%, #ff9800 50%, #f57c00 75%, #e65100 100%); box-shadow: 0 0 60px rgba(255, 180, 0, 0.5); position: absolute; transform: translateZ(0); cursor: pointer; transition: all 0.3s ease; } .sun:hover { box-shadow: 0 0 80px rgba(255, 180, 0, 0.8); transform: scale(1.05); } .planet { position: absolute; border-radius: 50%; transform-style: preserve-3d; cursor: pointer; transition: all 0.3s ease; box-shadow: inset 16px 0 40px 6px rgba(0, 0, 0, 0.9); } .planet:hover { transform: scale(1.2) !important; } .orbit { position: absolute; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; transform: rotateX(80deg); } .control-panel { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); border-radius: 15px; padding: 20px; margin: 20px; z-index: 2; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } h1 { font-size: 24px; font-weight: 700; margin: 0; background: linear-gradient(90deg, var(--nebula-pink), var(--orbital-teal)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } .controls { display: flex; justify-content: space-between; margin-bottom: 15px; } button { background: rgba(255, 255, 255, 0.1); border: none; color: white; padding: 8px 15px; border-radius: 20px; cursor: pointer; transition: all 0.2s ease; backdrop-filter: blur(5px); font-size: 14px; border: 1px solid rgba(255, 255, 255, 0.1); } button:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } button.active { background: linear-gradient(90deg, var(--nebula-pink), var(--orbital-teal)); box-shadow: 0 0 15px rgba(5, 217, 232, 0.5); } .planet-info { display: none; position: absolute; bottom: 20px; left: 20px; right: 20px; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); border-radius: 15px; padding: 20px; z-index: 10; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; max-height: 200px; overflow-y: auto; } .planet-info h2 { font-size: 18px; margin-bottom: 10px; background: linear-gradient(90deg, var(--star-yellow), var(--orbital-teal)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .planet-info p { font-size: 14px; line-height: 1.5; margin-bottom: 10px; } .planet-info .close-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; color: white; font-size: 16px; cursor: pointer; } .gesture-indicator { position: absolute; bottom: 20px; right: 20px; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; z-index: 10; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); opacity: 0.7; transition: all 0.3s ease; } .gesture-indicator:hover { opacity: 1; transform: scale(1.1); } .gesture-indicator i { font-size: 24px; color: white; } .vr-mode-toggle { position: absolute; top: 20px; right: 20px; background: linear-gradient(90deg, var(--deep-purple), var(--cosmic-blue)); color: white; border: none; border-radius: 20px; padding: 8px 15px; font-size: 14px; cursor: pointer; z-index: 10; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .vr-mode-toggle:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); } .slider-container { margin: 10px 0; } .slider-container label { display: block; margin-bottom: 5px; font-size: 14px; color: var(--orbital-teal); } .slider { -webkit-appearance: none; width: 100%; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.1); outline: none; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--orbital-teal); cursor: pointer; } .slider::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--orbital-teal); cursor: pointer; } .loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--space-black); display: flex; justify-content: center; align-items: center; z-index: 100; transition: opacity 1s ease; } .loading-spinner { border: 5px solid rgba(255, 255, 255, 0.1); border-radius: 50%; border-top: 5px solid var(--orbital-teal); width: 50px; height: 50px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes orbit { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } @keyframes twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } @media (max-width: 700px) { .sun { width: 60px; height: 60px; } .control-panel { padding: 15px; margin: 15px; } h1 { font-size: 20px; } button { padding: 6px 12px; font-size: 12px; } .planet-info { max-height: 150px; padding: 15px; } .planet-info h2 { font-size: 16px; } .planet-info p { font-size: 12px; } } </style> </head> <body> <div class="loading-overlay"> <div class="loading-spinner"></div> </div> <div class="stars"></div> <div class="control-panel"> <div class="panel-header"> <h1>Cosmic Explorer VR</h1> </div> <div class="controls"> <button id="pause-btn">Pause</button> <button id="reset-btn">Reset View</button> <button id="audio-btn" class="active">Audio: On</button> </div> <div class="slider-container"> <label for="zoom-slider">Zoom Level</label> <input type="range" min="0.5" max="2" step="0.1" value="1" class="slider" id="zoom-slider"> </div> <div class="slider-container"> <label for="speed-slider">Orbit Speed</label> <input type="range" min="0.1" max="2" step="0.1" value="1" class="slider" id="speed-slider"> </div> </div> <div class="solar-system" id="solar-system"> <div class="sun" data-name="Sun"></div> <!-- Planets and orbits will be added via JavaScript --> </div> <div class="planet-info" id="planet-info"> <button class="close-btn">×</button> <h2 id="planet-name"></h2> <p id="planet-desc"></p> <p id="planet-stats"></p> </div> <div class="gesture-indicator"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 13V4.5C8 3.67 8.67 3 9.5 3C10.33 3 11 3.67 11 4.5V13M11 9.5C11 8.67 11.67 8 12.5 8C13.33 8 14 8.67 14 9.5V13M14 11.5C14 10.67 14.67 10 15.5 10C16.33 10 17 10.67 17 11.5V13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M5 13V4.5C5 3.67 5.67 3 6.5 3C7.33 3 8 3.67 8 4.5V13M17 13V12.5C17 11.67 17.67 11 18.5 11C19.33 11 20 11.67 20 12.5V15.8C20 18.78 17.58 21 14.6 21H9.4C6.42 21 4 18.78 4 15.8V13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <button class="vr-mode-toggle">Enter VR Mode</button> <script> document.addEventListener('DOMContentLoaded', function() { // Remove loading overlay setTimeout(() => { document.querySelector('.loading-overlay').style.opacity = 0; setTimeout(() => { document.querySelector('.loading-overlay').style.display = 'none'; }, 1000); }, 1500); // Create star background const stars = document.querySelector('.stars'); for (let i = 0; i < 200; i++) { const star = document.createElement('div'); star.style.position = 'absolute'; star.style.width = `${Math.random() * 2 + 1}px`; star.style.height = star.style.width; star.style.backgroundColor = `rgba(255, 255, 255, ${Math.random() * 0.7 + 0.3})`; star.style.borderRadius = '50%'; star.style.top = `${Math.random() * 100}%`; star.style.left = `${Math.random() * 100}%`; star.style.animation = `twinkle ${Math.random() * 5 + 3}s ease-in-out infinite`; star.style.animationDelay = `${Math.random() * 5}s`; stars.appendChild(star); } const solarSystem = document.getElementById('solar-system'); // Planet data const planets = [ { name: 'Mercury', size: 20, distance: 100, speed: 4.1, color: '#c1c1c1', description: 'The smallest and innermost planet in our Solar System, Mercury experiences extreme temperature fluctuations and has a heavily cratered surface.', stats: 'Diameter: 4,880 km | Orbit: 88 Earth days | Surface: Rocky, cratered' }, { name: 'Venus', size: 26, distance: 140, speed: 1.6, color: '#e7c9a9', description: 'Often called Earth's "sister planet," Venus has a thick toxic atmosphere causing a runaway greenhouse effect, making it the hottest planet in our solar system.', stats: 'Diameter: 12,104 km | Orbit: 225 Earth days | Surface: Volcanic plains' }, { name: 'Earth', size: 28, distance: 180, speed: 1, color: '#2b83c9', description: 'Our home planet is the only known celestial body where life exists. Earth's atmosphere, water, and magnetic field create the perfect conditions for life to thrive.', stats: 'Diameter: 12,742 km | Orbit: 365.25 days | Surface: 71% water, 29% land' }, { name: 'Mars', size: 24, distance: 220, speed: 0.53, color: '#c1440e', description: 'The "Red Planet" features the largest volcano and canyon in our solar system. Evidence suggests Mars once had liquid water on its surface.', stats: 'Diameter: 6,779 km | Orbit: 687 Earth days | Surface: Dusty, rocky desert' }, { name: 'Jupiter', size: 55, distance: 300, speed: 0.084, color: '#e0ae6f', description: 'The largest planet in our solar system, Jupiter is a gas giant with a distinctive Great Red Spot - a massive storm that has been active for hundreds of years.', stats: 'Diameter: 139,820 km | Orbit: 12 Earth years | Composition: Hydrogen, helium' }, { name: 'Saturn', size: 45, distance: 360, speed: 0.034, color: '#ead6b8', description: 'Famous for its spectacular ring system, Saturn is a gas giant composed primarily of hydrogen and helium with a small rocky core.', stats: 'Diameter: 116,460 km | Orbit: 29.5 Earth years | Rings: Ice particles, rock debris' }, { name: 'Uranus', size: 35, distance: 410, speed: 0.012, color: '#b1d9d9', description: 'Uranus is the only planet that rotates on its side, likely due to a massive collision. It appears blue-green due to methane in its atmosphere.', stats: 'Diameter: 50,724 km | Orbit: 84 Earth years | Axis tilt: 98 degrees' }, { name: 'Neptune', size: 33, distance: 450, speed: 0.006, color: '#3e66aa', description: 'The windiest planet in our solar system, Neptune has been recorded with supersonic wind speeds of over 1,200 mph. It was discovered through mathematical predictions.', stats: 'Diameter: 49,244 km | Orbit: 165 Earth years | Features: Great Dark Spot' } ]; // Create planets and their orbits planets.forEach(planet => { // Create orbit const orbit = document.createElement('div'); orbit.className = 'orbit'; orbit.style.width = `${planet.distance * 2}px`; orbit.style.height = `${planet.distance * 2}px`; orbit.style.left = `${350 - planet.distance}px`; orbit.style.top = `${250 - planet.distance / 8}px`; solarSystem.appendChild(orbit); // Create planet const planetElement = document.createElement('div'); planetElement.className = 'planet'; planetElement.dataset.name = planet.name; planetElement.dataset.description = planet.description; planetElement.dataset.stats = planet.stats; planetElement.style.width = `${planet.size}px`; planetElement.style.height = `${planet.size}px`; planetElement.style.background = `radial-gradient(circle at 30% 30%, ${planet.color}, ${adjustColor(planet.color, -30)})`; // Add planet to an animation container for rotation const planetOrbit = document.createElement('div'); planetOrbit.style.position = 'absolute'; planetOrbit.style.width = '100%'; planetOrbit.style.height = '100%'; planetOrbit.style.animation = `orbit ${60 / planet.speed}s linear infinite`; planetOrbit.style.transformOrigin = 'center'; planetOrbit.className = 'planet-orbit'; // Position the planet on its orbit planetElement.style.left = `${planet.distance}px`; planetElement.style.top = `0px`; planetOrbit.appendChild(planetElement); solarSystem.appendChild(planetOrbit); }); // Function to adjust color brightness function adjustColor(color, amount) { const clamp = (val) => Math.min(255, Math.max(0, val)); // Handle hex colors if (color.startsWith('#')) { let hex = color.slice(1); // Convert 3-char hex to 6-char if (hex.length === 3) { hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; } const r = parseInt(hex.slice(0, 2), 16); const g = parseInt(hex.slice(2, 4), 16); const b = parseInt(hex.slice(4, 6), 16); return `#${ clamp(r + amount).toString(16).padStart(2, '0') + clamp(g + amount).toString(16).padStart(2, '0') + clamp(b + amount).toString(16).padStart(2, '0') }`; } return color; // Return original if not hex } // Interactive rotation with mouse let isDragging = false; let startX, startY, startRotationX = 20, startRotationY = 0; let currentRotationX = startRotationX, currentRotationY = startRotationY; let speedMultiplier = 1; let isAnimationPaused = false; solarSystem.style.transform = `rotateX(${startRotationX}deg) rotateY(${startRotationY}deg)`; solarSystem.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; startY = e.clientY; startRotationX = currentRotationX; startRotationY = currentRotationY; solarSystem.style.cursor = 'grabbing'; }); document.addEventListener('mousemove', (e) => { if (!isDragging) return; const deltaX = e.clientX - startX; const deltaY = e.clientY - startY; currentRotationX = startRotationX + deltaY * 0.5; currentRotationY = startRotationY + deltaX * 0.5; // Limit rotation on X axis to avoid flipping currentRotationX = Math.max(-60, Math.min(80, currentRotationX)); solarSystem.style.transform = `rotateX(${currentRotationX}deg) rotateY(${currentRotationY}deg)`; }); document.addEventListener('mouseup', () => { isDragging = false; solarSystem.style.cursor = 'grab'; }); // Touch events for mobile solarSystem.addEventListener('touchstart', (e) => { isDragging = true; startX = e.touches[0].clientX; startY = e.touches[0].clientY; startRotationX = currentRotationX; startRotationY = currentRotationY; e.preventDefault(); }); document.addEventListener('touchmove', (e) => { if (!isDragging) return; const deltaX = e.touches[0].clientX - startX; const deltaY = e.touches[0].clientY - startY; currentRotationX = startRotationX + deltaY * 0.5; currentRotationY = startRotationY + deltaX * 0.5; // Limit rotation on X axis to avoid flipping currentRotationX = Math.max(-60, Math.min(80, currentRotationX)); solarSystem.style.transform = `rotateX(${currentRotationX}deg) rotateY(${currentRotationY}deg)`; e.preventDefault(); }); document.addEventListener('touchend', () => { isDragging = false; }); // Planet info display const planetInfo = document.getElementById('planet-info'); const planetName = document.getElementById('planet-name'); const planetDesc = document.getElementById('planet-desc'); const planetStats = document.getElementById('planet-stats'); document.querySelectorAll('.planet, .sun').forEach(celestialBody => { celestialBody.addEventListener('click', () => { showPlanetInfo(celestialBody); // Play selection sound playSound('select'); }); }); function showPlanetInfo(planet) { planetName.textContent = planet.dataset.name; planetDesc.textContent = planet.dataset.description || 'A massive, luminous ball of plasma at the center of our solar system. The Sun provides energy that sustains all life on Earth through the process of photosynthesis.'; planetStats.textContent = planet.dataset.stats || 'Diameter: 1,392,700 km | Mass: 333,000 Earths | Core Temperature: 15 million °C'; planetInfo.style.display = 'block'; // Match info panel to planet color if (planet.style.background) { const color = planet.style.background.match(/#[0-9a-f]{6}/i) || ['#f39c12']; planetName.style.background = `linear-gradient(90deg, ${color[0]}, var(--orbital-teal))`; } } document.querySelector('.planet-info .close-btn').addEventListener('click', () => { planetInfo.style.display = 'none'; playSound('close'); }); // Controls const pauseBtn = document.getElementById('pause-btn'); pauseBtn.addEventListener('click', () => { isAnimationPaused = !isAnimationPaused; pauseBtn.textContent = isAnimationPaused ? 'Resume' : 'Pause'; document.querySelectorAll('.planet-orbit').forEach(orbit => { orbit.style.animationPlayState = isAnimationPaused ? 'paused' : 'running'; }); playSound('click'); }); const resetBtn = document.getElementById('reset-btn'); resetBtn.addEventListener('click', () => { currentRotationX = 20; currentRotationY = 0; solarSystem.style.transform = `rotateX(${currentRotationX}deg) rotateY(${currentRotationY}deg)`; document.getElementById('zoom-slider').value = 1; document.getElementById('speed-slider').value = 1; updateZoom(1); updateSpeed(1); playSound('reset'); }); const audioBtn = document.getElementById('audio-btn'); let audioEnabled = true; audioBtn.addEventListener('click', () => { audioEnabled = !audioEnabled; audioBtn.textContent = `Audio: ${audioEnabled ? 'On' : 'Off'}`; audioBtn.classList.toggle('active', audioEnabled); playSound('click'); }); // VR mode toggle const vrButton = document.querySelector('.vr-mode-toggle'); let vrModeActive = false; vrButton.addEventListener('click', () => { vrModeActive = !vrModeActive; vrButton.textContent = vrModeActive ? 'Exit VR Mode' : 'Enter VR Mode'; if (vrModeActive) { // Apply VR mode styles document.body.style.perspective = '1200px'; solarSystem.style.perspectiveOrigin = 'center'; solarSystem.style.transform = 'rotateX(0deg) rotateY(0deg) translateZ(200px)'; currentRotationX = 0; currentRotationY = 0; } else { // Reset to normal mode document.body.style.perspective = ''; solarSystem.style.perspectiveOrigin = ''; solarSystem.style.transform = `rotateX(${currentRotationX}deg) rotateY(${currentRotationY}deg)`; } playSound('vr-toggle'); }); // Audio system function playSound(type) { if (!audioEnabled) return; const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const oscillator = audioContext.createOscillator(); const gainNode = audioContext.createGain(); oscillator.connect(gainNode); gainNode.connect(audioContext.destination); // Different sound types switch(type) { case 'select': oscillator.type = 'sine'; oscillator.frequency.setValueAtTime(440, audioContext.currentTime); oscillator.frequency.exponentialRampToValueAtTime(880, audioContext.currentTime + 0.1); gainNode.gain.setValueAtTime(0.1, audioContext.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3); oscillator.start(); oscillator.stop(audioContext.currentTime + 0.3); break; case 'click': oscillator.type = 'sine'; oscillator.frequency.setValueAtTime(660, audioContext.currentTime); gainNode.gain.setValueAtTime(0.1, audioContext.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1); oscillator.start(); oscillator.stop(audioContext.currentTime + 0.1); break; case 'close': oscillator.type = 'sine'; oscillator.frequency.setValueAtTime(440, audioContext.currentTime); oscillator.frequency.exponentialRampToValueAtTime(220, audioContext.currentTime + 0.1); gainNode.gain.setValueAtTime(0.1, audioContext.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3); oscillator.start(); oscillator.stop(audioContext.currentTime + 0.3); break; case 'reset': oscillator.type = 'triangle'; oscillator.frequency.setValueAtTime(440, audioContext.currentTime); oscillator.frequency.setValueAtTime(660, audioContext.currentTime + 0.1); oscillator.frequency.setValueAtTime(880, audioContext.currentTime + 0.2); gainNode.gain.setValueAtTime(0.1, audioContext.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3); oscillator.start(); oscillator.stop(audioContext.currentTime + 0.3); break; case 'vr-toggle': oscillator.type = 'square'; oscillator.frequency.setValueAtTime(220, audioContext.currentTime); oscillator.frequency.exponentialRampToValueAtTime(440, audioContext.currentTime + 0.2); gainNode.gain.setValueAtTime(0.1, audioContext.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.4); oscillator.start(); oscillator.stop(audioContext.currentTime + 0.4); break; } } // Zoom slider const zoomSlider = document.getElementById('zoom-slider'); zoomSlider.addEventListener('input', () => { updateZoom(zoomSlider.value); }); function updateZoom(value) { const scale = parseFloat(value); document.querySelectorAll('.planet, .sun').forEach(body => { const originalSize = getOriginalSize(body.dataset.name); if (originalSize) { body.style.width = `${originalSize * scale}px`; body.style.height = `${originalSize * scale}px`; } }); } function getOriginalSize(name) { if (name === 'Sun') return 80; const planet = planets.find(p => p.name === name); return planet ? planet.size : null; } // Speed slider const speedSlider = document.getElementById('speed-slider'); speedSlider.addEventListener('input', () => { updateSpeed(speedSlider.value); }); function updateSpeed(value) { speedMultiplier = parseFloat(value); document.querySelectorAll('.planet-orbit').forEach((orbit, index) => { const planet = planets[index]; orbit.style.animation = `orbit ${60 / (planet.speed * speedMultiplier)}s linear ${isAnimationPaused ? 'paused' : 'infinite'}`; }); } // Initialize responsive gesture indicator window.addEventListener('resize', () => { const solarSystemWidth = solarSystem.offsetWidth; const solarSystemHeight = solarSystem.offsetHeight; // Adjust orbital sizes for smaller screens if (solarSystemWidth < 600) { document.querySelectorAll('.orbit').forEach((orbit, index) => { const scaleFactor = solarSystemWidth / 700; const planet = planets[index]; const newDistance = planet.distance * scaleFactor; orbit.style.width = `${newDistance * 2}px`; orbit.style.height = `${newDistance * 2}px`; orbit.style.left = `${(solarSystemWidth / 2) - newDistance}px`; orbit.style.top = `${(solarSystemHeight / 2) - (newDistance / 8)}px`; }); } }); }); </script> </body> </html>
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } :root { --space-black: #0b0d17; --deep-blue: #111827; --accent-blue: #2563eb; --accent-purple: #7c3aed; --accent-orange: #f59e0b; --accent-red: #ef4444; --accent-green: #10b981; --text-light: #f9fafb; --text-subtle: #9ca3af; } body { background: var(--space-black); color: var(--text-light); overflow: hidden; height: 100vh; width: 100vw; position: relative; display: flex; flex-direction: column; touch-action: manipulation; } #app { display: flex; flex-direction: column; height: 100%; max-width: 700px; margin: 0 auto; position: relative; overflow: hidden; width: 100%; } header { padding: 1.5rem 1.5rem 0.5rem; display: flex; justify-content: space-between; align-items: center; z-index: 5; } .logo { display: flex; align-items: center; gap: 0.5rem; } .logo h1 { font-size: 1.25rem; font-weight: 700; background: linear-gradient(120deg, var(--accent-blue), var(--accent-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.02em; } .logo-icon { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(120deg, var(--accent-blue), var(--accent-purple)); display: flex; align-items: center; justify-content: center; } .logo-icon svg { width: 18px; height: 18px; fill: white; } .menu-button { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); border: none; color: var(--text-light); cursor: pointer; transition: all 0.3s ease; } .menu-button:hover { background: rgba(255, 255, 255, 0.2); } main { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; } #solar-system { flex: 1; position: relative; overflow: hidden; touch-action: none; } .system-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: radial-gradient(circle at 50% 50%, var(--deep-blue) 0%, var(--space-black) 70%); } .star-field { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .star { position: absolute; background-color: white; border-radius: 50%; opacity: 0.8; animation: twinkle 4s infinite ease-in-out; } @keyframes twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } } .planet { position: absolute; border-radius: 50%; transform-origin: center; cursor: pointer; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 3; backface-visibility: hidden; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); } .planet::after { content: ""; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0); transition: border-color 0.3s ease; z-index: -1; } .planet.active::after { border-color: rgba(255, 255, 255, 0.6); animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.05); opacity: 0.5; } 100% { transform: scale(1); opacity: 0.7; } } .sun { width: 80px; height: 80px; background: radial-gradient(circle at 30% 30%, #fef3c7, #fbbf24 50%, #f59e0b); box-shadow: 0 0 30px rgba(251, 191, 36, 0.7); z-index: 3; } .mercury { width: 20px; height: 20px; background: linear-gradient(135deg, #9ca3af, #6b7280); } .venus { width: 30px; height: 30px; background: linear-gradient(135deg, #fbbf24, #d97706); } .earth { width: 35px; height: 35px; background: linear-gradient(135deg, #3b82f6, #1d4ed8); box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); } .mars { width: 25px; height: 25px; background: linear-gradient(135deg, #ef4444, #b91c1c); } .jupiter { width: 65px; height: 65px; background: linear-gradient(135deg, #f59e0b, #b45309); } .saturn { width: 55px; height: 55px; background: linear-gradient(135deg, #fbbf24, #92400e); } .saturn-ring { position: absolute; width: 90px; height: 20px; background: linear-gradient(90deg, rgba(251, 191, 36, 0.3), rgba(251, 191, 36, 0.6) 50%, rgba(251, 191, 36, 0.3)); border-radius: 50%; transform: rotate(-20deg); top: calc(50% - 10px); left: calc(50% - 45px); z-index: 2; } .uranus { width: 40px; height: 40px; background: linear-gradient(135deg, #60a5fa, #2563eb); } .neptune { width: 38px; height: 38px; background: linear-gradient(135deg, #2563eb, #1e40af); } .planet-info { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, var(--space-black), transparent); padding: 2rem 1.5rem 1.5rem; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 10; pointer-events: none; } .planet-info.active { transform: translateY(0); pointer-events: all; } .planet-title { font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; letter-spacing: -0.02em; } .planet-subtitle { font-size: 1rem; color: var(--text-subtle); margin-bottom: 1rem; font-weight: 500; } .planet-data { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .data-item { flex: 1; min-width: 90px; background: rgba(255, 255, 255, 0.05); padding: 0.75rem; border-radius: 10px; } .data-value { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.25rem; } .data-label { font-size: 0.75rem; color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.05em; } .planet-description { font-size: 0.9rem; line-height: 1.5; margin-bottom: 1.5rem; color: rgba(255, 255, 255, 0.9); } .close-info { position: absolute; top: 1rem; right: 1rem; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; border: none; color: var(--text-light); cursor: pointer; transition: all 0.3s ease; } .close-info:hover { background: rgba(255, 255, 255, 0.2); } .explore-button { border: none; background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple)); color: white; padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3); } .explore-button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4); } .zoom-controls { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 0.5rem; z-index: 5; } .zoom-btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: none; color: var(--text-light); font-size: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; } .zoom-btn:hover { background: rgba(255, 255, 255, 0.2); } .instructions { position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); text-align: center; color: var(--text-subtle); font-size: 0.9rem; opacity: 1; transition: opacity 0.5s ease; z-index: 4; pointer-events: none; width: 80%; } .instructions.hidden { opacity: 0; } .gesture-icon { font-size: 2rem; margin-bottom: 0.5rem; display: inline-block; animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .gesture-text { font-size: 1rem; font-weight: 500; color: var(--text-light); margin-bottom: 0.5rem; } .color-indicator { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; } .footer-nav { display: flex; justify-content: space-between; padding: 1rem 1.5rem; background: rgba(17, 24, 39, 0.8); backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, 0.1); z-index: 5; } .nav-item { display: flex; flex-direction: column; align-items: center; color: var(--text-subtle); text-decoration: none; font-size: 0.7rem; transition: all 0.3s ease; } .nav-item.active { color: var(--text-light); } .nav-icon { font-size: 1.2rem; margin-bottom: 0.25rem; } .loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--space-black); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; transition: opacity 0.5s ease, visibility 0.5s ease; } .loading-screen.hidden { opacity: 0; visibility: hidden; } .loader { width: 60px; height: 60px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.1); border-top-color: var(--accent-blue); animation: spin 1s linear infinite; margin-bottom: 1rem; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading-text { font-size: 0.9rem; color: var(--text-subtle); } @media (max-width: 480px) { .planet-title { font-size: 1.75rem; } .data-item { min-width: 70px; padding: 0.5rem; } .data-value { font-size: 1rem; } .planet-description { font-size: 0.85rem; } } </style> </head> <body> <div class="loading-screen" id="loading-screen"> <div class="loader"></div> <p class="loading-text">Initializing Cosmic Explorer...</p> </div> <div id="app"> <header> <div class="logo"> <div class="logo-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1L1 7V17L12 23L23 17V7L12 1ZM12 3.3L21 8.4V15.6L12 20.7L3 15.6V8.4L12 3.3Z"/><path d="M12 7C9.24 7 7 9.24 7 12C7 14.76 9.24 17 12 17C14.76 17 17 14.76 17 12C17 9.24 14.76 7 12 7ZM12 15C10.34 15 9 13.66 9 12C9 10.34 10.34 9 12 9C13.66 9 15 10.34 15 12C15 13.66 13.66 15 12 15Z"/></svg> </div> <h1>Cosmic Explorer</h1> </div> <button class="menu-button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg> </button> </header> <main> <div id="solar-system"> <div class="system-background"></div> <div class="star-field" id="starField"></div> <div class="planet sun" data-name="Sun"></div> <div class="planet mercury" data-name="Mercury"></div> <div class="planet venus" data-name="Venus"></div> <div class="planet earth" data-name="Earth"></div> <div class="planet mars" data-name="Mars"></div> <div class="planet jupiter" data-name="Jupiter"></div> <div class="planet saturn" data-name="Saturn"> <div class="saturn-ring"></div> </div> <div class="planet uranus" data-name="Uranus"></div> <div class="planet neptune" data-name="Neptune"></div> <div class="instructions" id="instructions"> <div class="gesture-icon">👆</div> <p class="gesture-text">Tap planets to explore details</p> <p>Pinch to zoom & Swipe to navigate</p> </div> <div class="zoom-controls"> <button class="zoom-btn" id="zoom-in">+</button> <button class="zoom-btn" id="zoom-out">-</button> </div> </div> <div class="planet-info" id="planet-info"> <h2 class="planet-title" id="planet-name">Mercury</h2> <p class="planet-subtitle" id="planet-subtitle">The swift messenger</p> <div class="planet-data" id="planet-data"> <div class="data-item"> <div class="data-value" id="planet-distance">57.9M km</div> <div class="data-label">From Sun</div> </div> <div class="data-item"> <div class="data-value" id="planet-day">58.6 days</div> <div class="data-label">Day length</div> </div> <div class="data-item"> <div class="data-value" id="planet-year">88 days</div> <div class="data-label">Orbit period</div> </div> </div> <p class="planet-description" id="planet-description">Mercury is the smallest and innermost planet in the Solar System. Its orbit around the Sun takes only 87.97 Earth days, the shortest of all the planets.</p> <button class="explore-button" id="explore-button">Explore in 3D</button> <button class="close-info" id="close-info"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> </button> </div> </main> <nav class="footer-nav"> <a href="#" class="nav-item active"> <div class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg> </div> Planets </a> <a href="#" class="nav-item"> <div class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg> </div> Stars </a> <a href="#" class="nav-item"> <div class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2"></circle><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path></svg> </div> Live Sky </a> <a href="#" class="nav-item"> <div class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="7"></circle><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline></svg> </div> Missions </a> <a href="#" class="nav-item"> <div class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg> </div> Settings </a> </nav> </div> <script> document.addEventListener('DOMContentLoaded', function() { // After a short delay, hide the loading screen setTimeout(() => { document.getElementById('loading-screen').classList.add('hidden'); }, 1500); // Planet data const planetData = { 'Sun': { subtitle: 'The center of our solar system', description: 'The Sun is the star at the center of the Solar System. It's a nearly perfect sphere of hot plasma, heated to incandescence by nuclear fusion reactions, primarily converting hydrogen into helium.', distance: '0 km', day: '27 Earth days', year: '-', color: '#f59e0b' }, 'Mercury': { subtitle: 'The swift messenger', description: 'Mercury is the smallest and innermost planet in the Solar System. It has virtually no atmosphere to retain heat, resulting in surface temperatures that vary diurnally more than any other planet.', distance: '57.9M km', day: '58.6 days', year: '88 days', color: '#9ca3af' }, 'Venus': { subtitle: 'Earth\'s toxic twin', description: 'Venus is the second planet from the Sun and Earth\'s closest planetary neighbor. It\'s often called Earth\'s twin because of their similar size and structure, but Venus has extreme surface heat and a dense, toxic atmosphere.', distance: '108.2M km', day: '243 days', year: '225 days', color: '#d97706' }, 'Earth': { subtitle: 'Our blue home', description: 'Earth is the third planet from the Sun and the only astronomical object known to harbor life. About 71% of Earth\'s surface is water-covered, with oceans constituting the majority of this coverage.', distance: '149.6M km', day: '24 hours', year: '365.25 days', color: '#3b82f6' }, 'Mars': { subtitle: 'The red planet', description: 'Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System. Mars has a thin atmosphere and surface features reminiscent of the impact craters of the Moon and the valleys and deserts of Earth.', distance: '227.9M km', day: '24.6 hours', year: '687 days', color: '#ef4444' }, 'Jupiter': { subtitle: 'The gas giant', description: 'Jupiter is the fifth planet from the Sun and the largest in the Solar System. It\'s a gas giant with a mass more than two and a half times that of all the other planets combined, but less than one-thousandth the mass of the Sun.', distance: '778.5M km', day: '9.9 hours', year: '11.9 years', color: '#f59e0b' }, 'Saturn': { subtitle: 'Lord of the rings', description: 'Saturn is the sixth planet from the Sun and the second-largest in the Solar System, after Jupiter. It\'s a gas giant with an average radius about nine and a half times that of Earth and is best known for its prominent ring system.', distance: '1.4B km', day: '10.7 hours', year: '29.5 years', color: '#fbbf24' }, 'Uranus': { subtitle: 'The sideways planet', description: 'Uranus is the seventh planet from the Sun. Its unique feature is that it rotates on its side, with an axial tilt of nearly 98 degrees. It\'s an ice giant, with a composition different from gas giants Jupiter and Saturn.', distance: '2.9B km', day: '17.2 hours', year: '84 years', color: '#60a5fa' }, 'Neptune': { subtitle: 'The windiest planet', description: 'Neptune is the eighth and farthest known planet from the Sun. The windiest planet in our solar system, Neptune has seen wind speeds clocked at more than 1,200 miles per hour, and is home to both the coldest spot and most violent storms.', distance: '4.5B km', day: '16.1 hours', year: '165 years', color: '#2563eb' } }; // Select DOM elements const solarSystem = document.getElementById('solar-system'); const starField = document.getElementById('starField'); const planetInfo = document.getElementById('planet-info'); const planets = document.querySelectorAll('.planet'); const closeInfo = document.getElementById('close-info'); const instructions = document.getElementById('instructions'); const zoomIn = document.getElementById('zoom-in'); const zoomOut = document.getElementById('zoom-out'); const exploreButton = document.getElementById('explore-button'); // Create star field function createStars() { for (let i = 0; i < 100; i++) { const star = document.createElement('div'); star.classList.add('star'); // Random size between 1-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 animation delay star.style.animationDelay = `${Math.random() * 4}s`; starField.appendChild(star); } } createStars(); // Position planets in a semi-circle function positionPlanets() { const centerX = solarSystem.offsetWidth / 2; const centerY = solarSystem.offsetHeight / 2; const radius = Math.min(centerX, centerY) * 0.8; // Position the sun at the center const sun = document.querySelector('.sun'); sun.style.left = `${centerX - sun.offsetWidth / 2}px`; sun.style.top = `${centerY - sun.offsetHeight / 2}px`; const planetElements = [ document.querySelector('.mercury'), document.querySelector('.venus'), document.querySelector('.earth'), document.querySelector('.mars'), document.querySelector('.jupiter'), document.querySelector('.saturn'), document.querySelector('.uranus'), document.querySelector('.neptune') ]; const angleStep = Math.PI / (planetElements.length + 1); let angle = Math.PI / 2 + angleStep; // Start angle (top of circle plus one step) planetElements.forEach((planet, index) => { const scaleFactor = 0.3 + (index / planetElements.length) * 0.7; // Scale orbit radius by planet position const planetRadius = planet.offsetWidth / 2; const x = centerX + Math.cos(angle) * radius * scaleFactor - planetRadius; const y = centerY - Math.sin(angle) * radius * scaleFactor - planetRadius; planet.style.left = `${x}px`; planet.style.top = `${y}px`; angle += angleStep; }); } // Initialize the solar system function initSolarSystem() { positionPlanets(); // Pan and zoom variables let scale = 1; let translateX = 0; let translateY = 0; let startX = 0; let startY = 0; let isDragging = false; // Update transform function updateTransform() { solarSystem.style.transition = 'none'; solarSystem.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`; } // Limit translation to keep planets visible function limitTranslation() { const maxTranslate = 300 * scale; translateX = Math.max(-maxTranslate, Math.min(maxTranslate, translateX)); translateY = Math.max(-maxTranslate, Math.min(maxTranslate, translateY)); } // Mouse events for desktop solarSystem.addEventListener('mousedown', (e) => { if (e.target.classList.contains('planet') || e.target.closest('.planet-info')) return; isDragging = true; startX = e.clientX - translateX; startY = e.clientY - translateY; solarSystem.style.cursor = 'grabbing'; instructions.classList.add('hidden'); }); window.addEventListener('mousemove', (e) => { if (!isDragging) return; translateX = e.clientX - startX; translateY = e.clientY - startY; limitTranslation(); updateTransform(); }); window.addEventListener('mouseup', () => { isDragging = false; solarSystem.style.cursor = 'grab'; }); // Touch events for mobile solarSystem.addEventListener('touchstart', (e) => { if (e.target.classList.contains('planet') || e.target.closest('.planet-info')) return; if (e.touches.length === 1) { isDragging = true; startX = e.touches[0].clientX - translateX; startY = e.touches[0].clientY - translateY; instructions.classList.add('hidden'); } }); solarSystem.addEventListener('touchmove', (e) => { if (e.touches.length === 1 && isDragging) { translateX = e.touches[0].clientX - startX; translateY = e.touches[0].clientY - startY; limitTranslation(); updateTransform(); } }); solarSystem.addEventListener('touchend', () => {
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Futuristic Solar System Dashboard</title> <style> :root { --main-bg: #070b1a; --accent-primary: #4cc9ff; --accent-secondary: #9654ff; --accent-tertiary: #ff54a7; --text-primary: #d7e6ff; --text-secondary: #8392b5; --orbit-color: rgba(76, 201, 255, 0.15); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--main-bg); color: var(--text-primary); height: 700px; width: 700px; overflow: hidden; position: relative; } .dashboard-container { width: 100%; height: 100%; padding: 20px; position: relative; display: flex; flex-direction: column; } .dashboard-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid rgba(76, 201, 255, 0.3); z-index: 10; } .dashboard-title { font-size: 1.5rem; font-weight: 600; color: var(--accent-primary); text-shadow: 0 0 10px rgba(76, 201, 255, 0.5); letter-spacing: 1px; } .time-display { font-size: 0.9rem; color: var(--text-secondary); } .solar-system-container { flex: 1; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; } .sun { width: 50px; height: 50px; background: radial-gradient(circle, #ffbe17 10%, #ff7b17 100%); border-radius: 50%; box-shadow: 0 0 20px #ff7b17, 0 0 40px rgba(255, 123, 23, 0.4); position: absolute; z-index: 2; } .orbit { border: 1px solid var(--orbit-color); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .planet { position: absolute; border-radius: 50%; transform-origin: center; cursor: pointer; transition: all 0.3s ease; z-index: 3; } .planet:hover { box-shadow: 0 0 15px var(--accent-primary), 0 0 30px rgba(76, 201, 255, 0.4); transform: scale(1.2); } .planet-label { position: absolute; background-color: rgba(7, 11, 26, 0.7); padding: 4px 8px; border-radius: 4px; font-size: 0.65rem; color: var(--text-primary); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; z-index: 4; } .planet:hover + .planet-label { opacity: 1; } .planet-info-panel { position: absolute; right: 20px; bottom: 20px; width: 250px; background-color: rgba(7, 11, 26, 0.8); border: 1px solid var(--accent-primary); border-radius: 8px; padding: 15px; backdrop-filter: blur(10px); transform: translateY(100%); opacity: 0; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); z-index: 5; box-shadow: 0 0 20px rgba(76, 201, 255, 0.2); } .planet-info-panel.active { transform: translateY(0); opacity: 1; } .info-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .planet-name { font-size: 1.2rem; font-weight: 600; } .close-info { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1rem; } .close-info:hover { color: var(--accent-tertiary); } .planet-details { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; } .planet-stat { display: flex; justify-content: space-between; margin: 5px 0; } .stat-value { color: var(--text-primary); } .radar-grid { position: absolute; width: 100%; height: 100%; background-image: radial-gradient(circle, rgba(76, 201, 255, 0.05) 1px, transparent 1px), linear-gradient(rgba(76, 201, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(76, 201, 255, 0.05) 1px, transparent 1px); background-size: 50px 50px, 50px 50px, 50px 50px; background-position: center; z-index: 1; pointer-events: none; } .controls { position: absolute; left: 20px; bottom: 20px; z-index: 6; display: flex; flex-direction: column; gap: 10px; } .control-btn { background-color: rgba(7, 11, 26, 0.8); border: 1px solid var(--accent-primary); color: var(--text-primary); padding: 8px 12px; border-radius: 5px; cursor: pointer; font-size: 0.8rem; display: flex; align-items: center; gap: 5px; transition: all 0.3s ease; } .control-btn:hover { background-color: rgba(76, 201, 255, 0.2); } .control-icon { font-size: 0.9rem; } .scanning-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, var(--accent-primary), transparent); opacity: 0.03; pointer-events: none; animation: scan 8s linear infinite; z-index: 7; } @keyframes scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } .planet-highlight { position: absolute; width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; pointer-events: none; z-index: 8; opacity: 0; transform: translate(-50%, -50%); } .notification { position: absolute; top: 70px; right: 20px; background-color: rgba(150, 84, 255, 0.2); border-left: 3px solid var(--accent-secondary); padding: 10px 15px; border-radius: 4px; font-size: 0.8rem; transform: translateX(110%); transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); z-index: 10; } .notification.active { transform: translateX(0); } .haptic-btn { position: absolute; top: 20px; right: 20px; background: rgba(7, 11, 26, 0.8); border: 1px solid var(--accent-secondary); color: var(--accent-secondary); font-size: 0.7rem; padding: 5px 10px; border-radius: 20px; cursor: pointer; z-index: 10; transition: all 0.3s ease; } .haptic-btn:hover { background-color: rgba(150, 84, 255, 0.2); } @media (max-width: 700px) { .dashboard-title { font-size: 1.2rem; } .planet-info-panel { width: calc(100% - 40px); left: 20px; right: 20px; bottom: 70px; } .controls { flex-direction: row; left: 50%; transform: translateX(-50%); bottom: 10px; } .control-btn { padding: 6px 10px; font-size: 0.7rem; } } </style> </head> <body> <div class="dashboard-container"> <div class="dashboard-header"> <h1 class="dashboard-title">HELIOS NEXUS</h1> <div class="time-display" id="timeDisplay">SOL 1286 | 14:32:56 UTC</div> </div> <div class="solar-system-container"> <div class="radar-grid"></div> <div class="sun"></div> <!-- Planets and orbits will be generated by JS --> <div class="scanning-effect"></div> <div class="planet-highlight" id="planetHighlight"></div> </div> <div class="planet-info-panel" id="planetInfo"> <div class="info-header"> <h3 class="planet-name" id="planetName">Planet Name</h3> <button class="close-info" id="closeInfo">×</button> </div> <div class="planet-details" id="planetDetails"> <div class="planet-stat"> <span>Distance from Sun:</span> <span class="stat-value" id="distanceValue">0 AU</span> </div> <div class="planet-stat"> <span>Orbital Period:</span> <span class="stat-value" id="orbitalPeriod">0 Earth days</span> </div> <div class="planet-stat"> <span>Diameter:</span> <span class="stat-value" id="diameter">0 km</span> </div> <div class="planet-stat"> <span>Surface Temperature:</span> <span class="stat-value" id="temperature">0°C</span> </div> <div class="planet-stat"> <span>Moons:</span> <span class="stat-value" id="moons">0</span> </div> <div class="planet-stat"> <span>Atmosphere:</span> <span class="stat-value" id="atmosphere">None</span> </div> <div class="planet-stat"> <span>Exploration Status:</span> <span class="stat-value" id="exploration">Unknown</span> </div> </div> </div> <div class="controls"> <button class="control-btn" id="zoomInBtn"> <span class="control-icon">+</span> ZOOM IN </button> <button class="control-btn" id="zoomOutBtn"> <span class="control-icon">-</span> ZOOM OUT </button> <button class="control-btn" id="resetBtn"> <span class="control-icon">↺</span> RESET </button> </div> <div class="notification" id="notification"> Spectral analysis complete: Methane detected on Europa </div> <button class="haptic-btn" id="hapticToggle">HAPTIC FEEDBACK: ON</button> </div> <script> document.addEventListener("DOMContentLoaded", function() { // Planet data const planets = [ { name: "Mercury", distanceFromSun: 0.4, // Scaled for visualization (AU) orbitalPeriod: "88 Earth days", diameter: "4,879 km", temperature: "430°C (day) to -180°C (night)", moons: "0", atmosphere: "Minimal, traces of oxygen, sodium, hydrogen", exploration: "Mapped by MESSENGER (2011-2015)", color: "#a5a5a5", size: 8, speed: 20 }, { name: "Venus", distanceFromSun: 0.7, orbitalPeriod: "225 Earth days", diameter: "12,104 km", temperature: "462°C", moons: "0", atmosphere: "CO₂, nitrogen, sulfuric acid clouds", exploration: "Multiple Soviet Venera landers (1970s-1980s)", color: "#e8934d", size: 12, speed: 15 }, { name: "Earth", distanceFromSun: 1, orbitalPeriod: "365.25 Earth days", diameter: "12,756 km", temperature: "15°C (average)", moons: "1", atmosphere: "Nitrogen, oxygen, argon, CO₂", exploration: "Human habitation, multiple satellites", color: "#3498db", size: 13, speed: 12 }, { name: "Mars", distanceFromSun: 1.5, orbitalPeriod: "687 Earth days", diameter: "6,792 km", temperature: "-63°C (average)", moons: "2 (Phobos, Deimos)", atmosphere: "Thin, mostly CO₂", exploration: "Multiple rovers including Perseverance (active)", color: "#e74c3c", size: 10, speed: 8 }, { name: "Jupiter", distanceFromSun: 2.2, orbitalPeriod: "11.86 Earth years", diameter: "142,984 km", temperature: "-145°C (cloud tops)", moons: "79+ confirmed", atmosphere: "Hydrogen, helium, methane, ammonia", exploration: "Juno spacecraft currently orbiting (since 2016)", color: "#e8a04d", size: 25, speed: 5 }, { name: "Saturn", distanceFromSun: 2.8, orbitalPeriod: "29.45 Earth years", diameter: "120,536 km", temperature: "-178°C", moons: "83+ confirmed", atmosphere: "Hydrogen, helium", exploration: "Cassini mission (1997-2017)", color: "#f4d03f", size: 22, speed: 3 }, { name: "Uranus", distanceFromSun: 3.4, orbitalPeriod: "84 Earth years", diameter: "51,118 km", temperature: "-224°C", moons: "27", atmosphere: "Hydrogen, helium, methane (blue color)", exploration: "Voyager 2 flyby (1986)", color: "#89c4f4", size: 17, speed: 2 }, { name: "Neptune", distanceFromSun: 3.9, orbitalPeriod: "165 Earth years", diameter: "49,528 km", temperature: "-214°C", moons: "14", atmosphere: "Hydrogen, helium, methane (blue color)", exploration: "Voyager 2 flyby (1989)", color: "#3498db", size: 16, speed: 1 } ]; const solarSystemContainer = document.querySelector('.solar-system-container'); const planetInfo = document.getElementById('planetInfo'); const planetName = document.getElementById('planetName'); const planetDetails = document.getElementById('planetDetails'); const distanceValue = document.getElementById('distanceValue'); const orbitalPeriod = document.getElementById('orbitalPeriod'); const diameter = document.getElementById('diameter'); const temperature = document.getElementById('temperature'); const moons = document.getElementById('moons'); const atmosphere = document.getElementById('atmosphere'); const exploration = document.getElementById('exploration'); const closeInfo = document.getElementById('closeInfo'); const planetHighlight = document.getElementById('planetHighlight'); const notification = document.getElementById('notification'); const hapticToggle = document.getElementById('hapticToggle'); const zoomInBtn = document.getElementById('zoomInBtn'); const zoomOutBtn = document.getElementById('zoomOutBtn'); const resetBtn = document.getElementById('resetBtn'); const timeDisplay = document.getElementById('timeDisplay'); let hapticEnabled = true; let zoomLevel = 1; let planetElements = []; let orbitElements = []; // Initialize the solar system function initSolarSystem() { const baseScale = Math.min(solarSystemContainer.offsetWidth, solarSystemContainer.offsetHeight) / 10; planets.forEach((planet, index) => { // Create orbit const orbit = document.createElement('div'); orbit.className = 'orbit'; const orbitSize = baseScale * planet.distanceFromSun * 2; orbit.style.width = `${orbitSize}px`; orbit.style.height = `${orbitSize}px`; solarSystemContainer.appendChild(orbit); orbitElements.push(orbit); // Create planet const planetElement = document.createElement('div'); planetElement.className = 'planet'; planetElement.style.width = `${planet.size}px`; planetElement.style.height = `${planet.size}px`; planetElement.style.backgroundColor = planet.color; // Special effect for Saturn (rings) if (planet.name === "Saturn") { planetElement.style.boxShadow = `0 0 0 4px rgba(244, 208, 63, 0.3)`; } // Position the planet on its orbit const angle = Math.random() * Math.PI * 2; // Random starting position const orbitRadius = orbitSize / 2; const planetX = Math.cos(angle) * orbitRadius + solarSystemContainer.offsetWidth / 2 - planet.size / 2; const planetY = Math.sin(angle) * orbitRadius + solarSystemContainer.offsetHeight / 2 - planet.size / 2; planetElement.style.left = `${planetX}px`; planetElement.style.top = `${planetY}px`; planetElement.dataset.angle = angle; planetElement.dataset.speed = planet.speed; planetElement.dataset.orbitRadius = orbitRadius; planetElement.dataset.index = index; solarSystemContainer.appendChild(planetElement); planetElements.push(planetElement); // Create planet label const planetLabel = document.createElement('div'); planetLabel.className = 'planet-label'; planetLabel.textContent = planet.name; planetLabel.style.left = `${planetX + planet.size / 2}px`; planetLabel.style.top = `${planetY - 20}px`; solarSystemContainer.appendChild(planetLabel); // Add event listeners planetElement.addEventListener('click', () => { showPlanetInfo(index); if (hapticEnabled) { // Simulate haptic feedback with vibration if (navigator.vibrate) { navigator.vibrate(50); } // Visual feedback planetHighlight.style.width = `${planet.size + 20}px`; planetHighlight.style.height = `${planet.size + 20}px`; planetHighlight.style.border = `2px solid ${planet.color}`; planetHighlight.style.boxShadow = `0 0 10px ${planet.color}`; planetHighlight.style.left = `${planetX + planet.size / 2}px`; planetHighlight.style.top = `${planetY + planet.size / 2}px`; planetHighlight.style.opacity = "1"; setTimeout(() => { planetHighlight.style.opacity = "0"; }, 1000); } }); }); // Start animation requestAnimationFrame(animatePlanets); // Update time display setInterval(updateTimeDisplay, 1000); // Show notification after 5 seconds setTimeout(() => { notification.classList.add('active'); setTimeout(() => { notification.classList.remove('active'); }, 5000); }, 5000); } // Update time display function updateTimeDisplay() { const now = new Date(); const hours = String(now.getUTCHours()).padStart(2, '0'); const minutes = String(now.getUTCMinutes()).padStart(2, '0'); const seconds = String(now.getUTCSeconds()).padStart(2, '0'); timeDisplay.textContent = `SOL 1286 | ${hours}:${minutes}:${seconds} UTC`; } // Animate planets function animatePlanets() { planetElements.forEach((planet) => { const index = parseInt(planet.dataset.index); const speed = parseFloat(planet.dataset.speed) * 0.001; let angle = parseFloat(planet.dataset.angle); const orbitRadius = parseFloat(planet.dataset.orbitRadius); angle += speed; if (angle >= Math.PI * 2) { angle = 0; } const centerX = solarSystemContainer.offsetWidth / 2; const centerY = solarSystemContainer.offsetHeight / 2; const planetX = Math.cos(angle) * orbitRadius + centerX - planets[index].size / 2; const planetY = Math.sin(angle) * orbitRadius + centerY - planets[index].size / 2; planet.style.left = `${planetX}px`; planet.style.top = `${planetY}px`; planet.dataset.angle = angle; // Update label position const label = planet.nextElementSibling; if (label && label.classList.contains('planet-label')) { label.style.left = `${planetX + planets[index].size / 2}px`; label.style.top = `${planetY - 20}px`; } }); requestAnimationFrame(animatePlanets); } // Show planet information function showPlanetInfo(index) { const planet = planets[index]; planetName.textContent = planet.name; distanceValue.textContent = `${planet.distanceFromSun} AU`; orbitalPeriod.textContent = planet.orbitalPeriod; diameter.textContent = planet.diameter; temperature.textContent = planet.temperature; moons.textContent = planet.moons; atmosphere.textContent = planet.atmosphere; exploration.textContent = planet.exploration; planetInfo.style.borderColor = planet.color; planetInfo.classList.add('active'); } // Close planet info panel closeInfo.addEventListener('click', function() { planetInfo.classList.remove('active'); }); // Toggle haptic feedback hapticToggle.addEventListener('click', function() { hapticEnabled = !hapticEnabled; hapticToggle.textContent = `HAPTIC FEEDBACK: ${hapticEnabled ? 'ON' : 'OFF'}`; if (hapticEnabled && navigator.vibrate) { navigator.vibrate(30); } }); // Zoom and reset controls zoomInBtn.addEventListener('click', function() { if (zoomLevel < 2) { zoomLevel += 0.2; updateZoom(); } if (hapticEnabled && navigator.vibrate) { navigator.vibrate(20); } }); zoomOutBtn.addEventListener('click', function() { if (zoomLevel > 0.6) { zoomLevel -= 0.2; updateZoom(); } if (hapticEnabled && navigator.vibrate) { navigator.vibrate(20); } }); resetBtn.addEventListener('click', function() { zoomLevel = 1; updateZoom(); if (hapticEnabled && navigator.vibrate) { navigator.vibrate([20, 30, 20]); } }); function updateZoom() { orbitElements.forEach((orbit, index) => { const planet = planets[index]; const baseScale = Math.min(solarSystemContainer.offsetWidth, solarSystemContainer.offsetHeight) / 10; const orbitSize = baseScale * planet.distanceFromSun * 2 * zoomLevel; orbit.style.width = `${orbitSize}px`; orbit.style.height = `${orbitSize}px`; // Update planet position for new orbit size const planetElement = planetElements[index]; const angle = parseFloat(planetElement.dataset.angle); const orbitRadius = orbitSize / 2; const centerX = solarSystemContainer.offsetWidth / 2; const centerY = solarSystemContainer.offsetHeight / 2; const planetX = Math.cos(angle) * orbitRadius + centerX - planet.size / 2; const planetY = Math.sin(angle) * orbitRadius + centerY - planet.size / 2; planetElement.style.left = `${planetX}px`; planetElement.style.top = `${planetY}px`; planetElement.dataset.orbitRadius = orbitRadius; // Update label position const label = planetElement.nextElementSibling; if (label && label.classList.contains('planet-label')) { label.style.left = `${planetX + planet.size / 2}px`; label.style.top = `${planetY - 20}px`; } }); } // Initialize initSolarSystem(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Solar System AR Explorer</title> <style> :root { --space-black: #020314; --highlight: #6d4aff; --highlight-glow: rgba(109, 74, 255, 0.4); --text-light: #f0f2ff; --ui-dark: rgba(8, 15, 40, 0.85); --ui-glass: rgba(20, 30, 80, 0.3); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: var(--space-black); color: var(--text-light); overflow: hidden; } .ar-container { position: relative; width: 700px; height: 700px; background: url('data:image/jpeg;base64,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
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Outfit', sans-serif; } body { width: 100%; height: 100vh; background: linear-gradient(135deg, #0B0C2A 0%, #182052 100%); color: #fff; overflow: hidden; display: flex; justify-content: center; align-items: center; } #game-container { width: 100%; max-width: 700px; height: 700px; position: relative; display: flex; flex-direction: column; } #header { text-align: center; padding: 15px; z-index: 10; } h1 { font-size: 28px; font-weight: 700; color: #FFFFFF; margin-bottom: 5px; text-shadow: 0 0 10px rgba(115, 178, 255, 0.5); } #subtitle { font-size: 14px; color: #B1C5FF; margin-bottom: 10px; } #star-field { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .star { position: absolute; background-color: white; border-radius: 50%; } #solar-system { position: relative; width: 100%; height: 65%; display: flex; justify-content: center; align-items: center; } #sun { width: 60px; height: 60px; background: radial-gradient(circle, #ffdd00 20%, #ff9500 70%, #ff5e00 100%); border-radius: 50%; box-shadow: 0 0 25px rgba(255, 221, 0, 0.8); position: absolute; z-index: 2; } .orbit { position: absolute; border: 1px dashed rgba(255, 255, 255, 0.3); border-radius: 50%; transform: rotateX(70deg); transition: border 0.3s; } .orbit.highlight { border: 2px solid rgba(115, 178, 255, 0.8); box-shadow: 0 0 10px rgba(115, 178, 255, 0.5); } .orbit.correct { border: 2px solid rgba(98, 255, 166, 0.8); box-shadow: 0 0 10px rgba(98, 255, 166, 0.5); } .planet-placeholder { width: 30px; height: 30px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); border: 1px dashed rgba(255, 255, 255, 0.3); position: absolute; display: flex; justify-content: center; align-items: center; font-size: 10px; color: rgba(255, 255, 255, 0.5); } #planets-container { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; padding: 15px; z-index: 10; } .planet { width: 45px; height: 45px; border-radius: 50%; cursor: grab; position: relative; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); } .planet:hover { transform: scale(1.1); } .planet:active { cursor: grabbing; } .planet-name { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 11px; white-space: nowrap; text-shadow: 0 0 5px rgba(0, 0, 0, 0.8); } .planet.placed { opacity: 0.6; pointer-events: none; } #progress-bar { height: 8px; background-color: rgba(255, 255, 255, 0.1); border-radius: 4px; margin: 0 20px 10px 20px; overflow: hidden; } #progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #3FFFAC 0%, #73B2FF 100%); border-radius: 4px; transition: width 0.5s ease; } #message { text-align: center; font-size: 14px; color: #B1C5FF; height: 20px; margin-bottom: 10px; } #reset-btn { background: linear-gradient(90deg, #FF5E98 0%, #FF9D6C 100%); border: none; padding: 8px 16px; border-radius: 20px; color: white; font-size: 14px; font-weight: 600; cursor: pointer; margin: 5px auto 15px; display: none; box-shadow: 0 4px 15px rgba(255, 94, 152, 0.4); transition: transform 0.2s, box-shadow 0.2s; } #reset-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 94, 152, 0.6); } #modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(11, 12, 42, 0.9); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.5s; } #modal.show { opacity: 1; pointer-events: all; } #modal h2 { font-size: 36px; margin-bottom: 20px; color: #FFFFFF; text-shadow: 0 0 15px rgba(115, 178, 255, 0.8); } #completion-message { font-size: 18px; color: #B1C5FF; margin-bottom: 40px; text-align: center; max-width: 80%; } #modal button { background: linear-gradient(90deg, #73B2FF 0%, #3FFFAC 100%); border: none; padding: 12px 30px; border-radius: 25px; color: white; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 15px rgba(115, 178, 255, 0.4); transition: transform 0.2s, box-shadow 0.2s; } #modal button:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(115, 178, 255, 0.6); } .particles-container { position: absolute; pointer-events: none; z-index: 5; } .particle { position: absolute; background-color: white; border-radius: 50%; pointer-events: none; } @media (max-width: 600px) { h1 { font-size: 24px; } #subtitle { font-size: 12px; } #sun { width: 40px; height: 40px; } .planet { width: 35px; height: 35px; } .planet-name { font-size: 10px; } } @media (max-height: 700px) { #solar-system { height: 60%; } #header { padding: 10px; } } </style> </head> <body> <div id="game-container"> <div id="header"> <h1>Cosmic Orbits Challenge</h1> <p id="subtitle">Drag each planet to its correct orbit</p> </div> <div id="progress-bar"> <div id="progress-fill"></div> </div> <div id="message">Place planets in their correct orbits!</div> <button id="reset-btn">Reset Game</button> <div id="solar-system"> <div id="sun"></div> <!-- Orbits and placeholders will be created dynamically --> </div> <div id="planets-container"> <!-- Planets will be created dynamically --> </div> <div id="star-field"></div> <div id="modal"> <h2>Mission Complete!</h2> <p id="completion-message">You've successfully arranged all planets in their correct orbits! You're a true cosmic navigator!</p> <button id="play-again-btn">Play Again</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Planet data with real information const planets = [ { name: "Mercury", color: "#A6A6A6", description: "Closest to the Sun", order: 1, radius: 38, facts: ["Smallest planet", "No atmosphere", "88 day orbit"] }, { name: "Venus", color: "#E6BB71", description: "Second planet", order: 2, radius: 59, facts: ["Hottest planet", "Rotates backward", "Similar size to Earth"] }, { name: "Earth", color: "#4F91CD", description: "Our home planet", order: 3, radius: 80, facts: ["Only known habitable planet", "Has one moon", "71% water surface"] }, { name: "Mars", color: "#CD6A4F", description: "The Red Planet", order: 4, radius: 101, facts: ["Has polar ice caps", "Largest volcano in solar system", "Red from iron oxide"] }, { name: "Jupiter", color: "#E8B87B", description: "Largest planet", order: 5, radius: 130, facts: ["Gas giant", "Great Red Spot storm", "79 known moons"] }, { name: "Saturn", color: "#ECD89A", description: "Ringed planet", order: 6, radius: 165, facts: ["Spectacular ring system", "Less dense than water", "62 confirmed moons"] }, { name: "Uranus", color: "#89C1CC", description: "Ice giant", order: 7, radius: 190, facts: ["Rotates sideways", "27 known moons", "Coldest planetary atmosphere"] }, { name: "Neptune", color: "#3F67AA", description: "Windiest planet", order: 8, radius: 215, facts: ["Strongest winds in solar system", "14 moons", "Discovered by math predictions"] } ]; const solarSystem = document.getElementById('solar-system'); const planetsContainer = document.getElementById('planets-container'); const progressFill = document.getElementById('progress-fill'); const message = document.getElementById('message'); const resetBtn = document.getElementById('reset-btn'); const modal = document.getElementById('modal'); const playAgainBtn = document.getElementById('play-again-btn'); let correctPlacements = 0; let totalPlanets = planets.length; let draggingPlanet = null; // Create star field background createStarField(); // Create orbits and planet placeholders planets.forEach(planet => { createOrbit(planet); }); // Create draggable planets in shuffled order const shuffledPlanets = [...planets].sort(() => Math.random() - 0.5); shuffledPlanets.forEach(planet => { createPlanet(planet); }); // Initialize the game updateProgress(); function createStarField() { const starField = document.getElementById('star-field'); const numStars = 200; for (let i = 0; i < numStars; i++) { const star = document.createElement('div'); star.className = 'star'; // Random size between 1 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 star.style.opacity = Math.random() * 0.8 + 0.2; // Add twinkle animation for some stars if (Math.random() > 0.7) { star.style.animation = `twinkle ${Math.random() * 3 + 2}s infinite`; } starField.appendChild(star); } } function createOrbit(planet) { // Create orbit ring const orbit = document.createElement('div'); orbit.className = 'orbit'; orbit.dataset.order = planet.order; orbit.style.width = `${planet.radius * 2}px`; orbit.style.height = `${planet.radius * 2}px`; solarSystem.appendChild(orbit); // Create planet placeholder on the orbit const placeholder = document.createElement('div'); placeholder.className = 'planet-placeholder'; placeholder.dataset.order = planet.order; // Calculate position on the orbit (random position) const angle = Math.random() * Math.PI * 2; const planetX = Math.cos(angle) * planet.radius; const planetY = Math.sin(angle) * planet.radius; placeholder.style.transform = `translate(${planetX}px, ${planetY}px)`; placeholder.textContent = planet.order; solarSystem.appendChild(placeholder); } function createPlanet(planet) { const planetEl = document.createElement('div'); planetEl.className = 'planet'; planetEl.dataset.name = planet.name; planetEl.dataset.order = planet.order; planetEl.style.background = `radial-gradient(circle at 30% 30%, ${lightenColor(planet.color, 20)}, ${planet.color}, ${darkenColor(planet.color, 20)})`; // Add planet name const nameEl = document.createElement('div'); nameEl.className = 'planet-name'; nameEl.textContent = planet.name; planetEl.appendChild(nameEl); planetsContainer.appendChild(planetEl); // Make planet draggable planetEl.addEventListener('mousedown', startDrag); planetEl.addEventListener('touchstart', startDrag, { passive: false }); } function startDrag(e) { if (e.type === 'touchstart') { e.preventDefault(); } // Only allow dragging if planet isn't already placed if (this.classList.contains('placed')) return; draggingPlanet = this; draggingPlanet.style.zIndex = "100"; // Add class for visual feedback draggingPlanet.classList.add('dragging'); // Get initial position const rect = draggingPlanet.getBoundingClientRect(); const offsetX = e.clientX ? e.clientX - rect.left : e.touches[0].clientX - rect.left; const offsetY = e.clientY ? e.clientY - rect.top : e.touches[0].clientY - rect.top; // Highlight the correct orbit const correctOrbit = document.querySelector(`.orbit[data-order="${draggingPlanet.dataset.order}"]`); correctOrbit.classList.add('highlight'); function moveAt(pageX, pageY) { if (!draggingPlanet) return; draggingPlanet.style.position = 'absolute'; draggingPlanet.style.left = pageX - offsetX + 'px'; draggingPlanet.style.top = pageY - offsetY + 'px'; // Check if over a placeholder checkPlaceholders(pageX, pageY); } function onMouseMove(e) { const pageX = e.clientX || e.touches[0].clientX; const pageY = e.clientY || e.touches[0].clientY; moveAt(pageX, pageY); } // Move the planet on mousemove document.addEventListener('mousemove', onMouseMove); document.addEventListener('touchmove', onMouseMove, { passive: false }); // Drop the planet on mouseup function onMouseUp() { if (!draggingPlanet) return; document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('touchmove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); document.removeEventListener('touchend', onMouseUp); // Check if planet is over the correct placeholder const planetRect = draggingPlanet.getBoundingClientRect(); const planetCenterX = planetRect.left + planetRect.width / 2; const planetCenterY = planetRect.top + planetRect.height / 2; // Get all placeholders const placeholders = document.querySelectorAll('.planet-placeholder'); let correctPlacement = false; placeholders.forEach(placeholder => { // Skip if already has a planet if (placeholder.classList.contains('filled')) return; const placeholderRect = placeholder.getBoundingClientRect(); const placeholderCenterX = placeholderRect.left + placeholderRect.width / 2; const placeholderCenterY = placeholderRect.top + placeholderRect.height / 2; // Distance between centers const distance = Math.sqrt( Math.pow(planetCenterX - placeholderCenterX, 2) + Math.pow(planetCenterY - placeholderCenterY, 2) ); // If close enough to placeholder if (distance < 50) { // If correct orbit if (placeholder.dataset.order === draggingPlanet.dataset.order) { correctPlacement = true; // Animate to placeholder draggingPlanet.style.transition = 'transform 0.3s, left 0.3s, top 0.3s'; draggingPlanet.style.left = placeholderCenterX - planetRect.width / 2 + 'px'; draggingPlanet.style.top = placeholderCenterY - planetRect.height / 2 + 'px'; // Mark as correctly placed draggingPlanet.classList.add('placed'); placeholder.classList.add('filled'); // Mark orbit as correct const orbit = document.querySelector(`.orbit[data-order="${draggingPlanet.dataset.order}"]`); orbit.classList.remove('highlight'); orbit.classList.add('correct'); // Create celebration particles createParticles(placeholderCenterX, placeholderCenterY); // Update progress correctPlacements++; updateProgress(); if (correctPlacements === 1) { message.textContent = "Great start! Keep matching planets to their orbits!"; } else if (correctPlacements < totalPlanets) { message.textContent = `Excellent! ${correctPlacements} planets correctly placed!`; } else { message.textContent = "Amazing! All planets are in their correct orbits!"; showCompletion(); } } else { // Wrong placement - bounce back bounceBack(draggingPlanet); message.textContent = `Not quite! Try placing ${draggingPlanet.dataset.name} in its correct orbit.`; } } }); // If not placed on any placeholder, return to original position if (!correctPlacement) { bounceBack(draggingPlanet); } // Remove highlight from orbit const correctOrbit = document.querySelector(`.orbit[data-order="${draggingPlanet.dataset.order}"]`); correctOrbit.classList.remove('highlight'); // Remove dragging class draggingPlanet.classList.remove('dragging'); draggingPlanet = null; } document.addEventListener('mouseup', onMouseUp); document.addEventListener('touchend', onMouseUp); } function checkPlaceholders(pageX, pageY) { if (!draggingPlanet) return; const planetRect = draggingPlanet.getBoundingClientRect(); const planetCenterX = planetRect.left + planetRect.width / 2; const planetCenterY = planetRect.top + planetRect.height / 2; const placeholders = document.querySelectorAll('.planet-placeholder:not(.filled)'); placeholders.forEach(placeholder => { const placeholderRect = placeholder.getBoundingClientRect(); const placeholderCenterX = placeholderRect.left + placeholderRect.width / 2; const placeholderCenterY = placeholderRect.top + placeholderRect.height / 2; const distance = Math.sqrt( Math.pow(planetCenterX - placeholderCenterX, 2) + Math.pow(planetCenterY - placeholderCenterY, 2) ); // Visual feedback when close to a placeholder if (distance < 50) { placeholder.style.backgroundColor = 'rgba(255, 255, 255, 0.3)'; placeholder.style.border = '2px dashed rgba(255, 255, 255, 0.7)'; if (placeholder.dataset.order === draggingPlanet.dataset.order) { placeholder.style.backgroundColor = 'rgba(98, 255, 166, 0.3)'; placeholder.style.border = '2px dashed rgba(98, 255, 166, 0.7)'; } } else { placeholder.style.backgroundColor = 'rgba(255, 255, 255, 0.1)'; placeholder.style.border = '1px dashed rgba(255, 255, 255, 0.3)'; } }); } function bounceBack(planetEl) { planetEl.style.transition = 'all 0.5s cubic-bezier(0.5, -0.5, 0.5, 1.5)'; planetEl.style.position = 'relative'; planetEl.style.left = '0'; planetEl.style.top = '0'; // Remove transition after animation completes setTimeout(() => { planetEl.style.transition = ''; }, 500); } function updateProgress() { const percentage = (correctPlacements / totalPlanets) * 100; progressFill.style.width = `${percentage}%`; // Show reset button if there's progress if (correctPlacements > 0) { resetBtn.style.display = 'block'; } } function createParticles(x, y) { const container = document.createElement('div'); container.className = 'particles-container'; container.style.left = x + 'px'; container.style.top = y + 'px'; document.body.appendChild(container); const colors = ['#73B2FF', '#3FFFAC', '#FFDD00', '#FF5E98']; for (let i = 0; i < 30; i++) { const particle = document.createElement('div'); particle.className = 'particle'; // Random properties const size = Math.random() * 6 + 2; const color = colors[Math.floor(Math.random() * colors.length)]; const angle = Math.random() * Math.PI * 2; const velocity = Math.random() * 5 + 2; const lifetime = Math.random() * 1000 + 500; // Set initial styles particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.backgroundColor = color; // Add to container container.appendChild(particle); // Animate particles let startTime = Date.now(); function animateParticle() { const elapsed = Date.now() - startTime; const progress = elapsed / lifetime; if (progress >= 1) { particle.remove(); return; } // Calculate position with gravity effect const x = Math.cos(angle) * velocity * progress * 40; const y = Math.sin(angle) * velocity * progress * 40 + 0.5 * progress * progress * 100; // Update particle position particle.style.transform = `translate(${x}px, ${y}px)`; particle.style.opacity = 1 - progress; requestAnimationFrame(animateParticle); } requestAnimationFrame(animateParticle); } // Remove container after all particles are gone setTimeout(() => { container.remove(); }, 1500); } function showCompletion() { setTimeout(() => { modal.classList.add('show'); }, 1000); } // Reset the game function resetGame() { // Reset variables correctPlacements = 0; // Remove all placed planets const placedPlanets = document.querySelectorAll('.planet.placed'); placedPlanets.forEach(planet => { planet.classList.remove('placed'); planet.style.position = 'relative'; planet.style.left = '0'; planet.style.top = '0'; planet.style.transition = ''; }); // Reset placeholders const placeholders = document.querySelectorAll('.planet-placeholder'); placeholders.forEach(placeholder => { placeholder.classList.remove('filled'); placeholder.style.backgroundColor = 'rgba(255, 255, 255, 0.1)'; placeholder.style.border = '1px dashed rgba(255, 255, 255, 0.3)'; }); // Reset orbits const orbits = document.querySelectorAll('.orbit'); orbits.forEach(orbit => { orbit.classList.remove('correct'); orbit.classList.remove('highlight'); }); // Reset progress updateProgress(); // Reset message message.textContent = "Place planets in their correct orbits!"; // Hide reset button resetBtn.style.display = 'none'; // Hide modal modal.classList.remove('show'); } // Event listeners resetBtn.addEventListener('click', resetGame); playAgainBtn.addEventListener('click', resetGame); // Helper functions for colors function lightenColor(color, amount) { return adjustColor(color, amount); } function darkenColor(color, amount) { return adjustColor(color, -amount); } function adjustColor(color, amount) { const hex = color.replace('#', ''); const r = Math.min(255, Math.max(0, parseInt(hex.substring(0, 2), 16) + amount)); const g = Math.min(255, Math.max(0, parseInt(hex.substring(2, 4), 16) + amount)); const b = Math.min(255, Math.max(0, parseInt(hex.substring(4, 6), 16) + amount)); return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`; } // Add CSS for star twinkle animation const style = document.createElement('style'); style.textContent = ` @keyframes twinkle { 0% { opacity: 0.2; } 50% { opacity: 0.8; } 100% { opacity: 0.2; } } `; document.head.appendChild(style); // Add font link const fontLink = document.createElement('link'); fontLink.href = 'https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&display=swap'; fontLink.rel = 'stylesheet'; document.head.appendChild(fontLink); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cosmic Chronicles: Solar System Discoveries</title> <style> @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Playfair+Display:wght@400;700&display=swap'); :root { --cream: #f2e9dc; --sand: #c9b18d; --rust: #a05e44; --navy: #1a2e44; --moss: #5a6e5c; --slate: #363e4a; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Space Mono', monospace; background-color: var(--navy); color: var(--cream); width: 100%; height: 100vh; overflow: hidden; position: relative; } .container { width: 700px; height: 700px; margin: 0 auto; position: relative; overflow: hidden; } .stars { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .header { position: relative; z-index: 1; padding: 20px; text-align: center; margin-bottom: 10px; } .title { font-family: 'Playfair Display', serif; font-size: 2rem; margin-bottom: 5px; letter-spacing: 1px; color: var(--sand); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); } .subtitle { font-size: 0.9rem; color: var(--cream); font-style: italic; opacity: 0.8; } .solar-system { position: relative; width: 600px; height: 600px; margin: 0 auto; transform-style: preserve-3d; transform: rotateX(65deg); } .sun { position: absolute; width: 60px; height: 60px; background: radial-gradient(#ffd452, #ff7b00); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 30px rgba(255, 160, 0, 0.7); z-index: 10; cursor: pointer; transition: all 0.3s ease; } .sun:hover { box-shadow: 0 0 50px rgba(255, 160, 0, 0.9); transform: translate(-50%, -50%) scale(1.1); } .orbit { position: absolute; top: 50%; left: 50%; border: 1px dashed rgba(201, 177, 141, 0.4); border-radius: 50%; transform: translate(-50%, -50%); } .planet { position: absolute; border-radius: 50%; transform-origin: center; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; align-items: center; justify-content: center; color: transparent; font-size: 0.6rem; font-weight: bold; z-index: 5; } .planet:hover { transform: scale(1.3); box-shadow: 0 0 20px rgba(242, 233, 220, 0.8); } .timeline { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); width: 80%; height: 60px; background-color: rgba(26, 46, 68, 0.8); border: 1px solid var(--sand); border-radius: 40px; display: flex; align-items: center; justify-content: space-around; padding: 0 20px; z-index: 20; box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); } .year-marker { background-color: var(--rust); width: 15px; height: 15px; border-radius: 50%; position: relative; cursor: pointer; transition: all 0.3s ease; } .year-marker:hover { transform: scale(1.5); background-color: var(--cream); } .year-marker.active { background-color: var(--cream); box-shadow: 0 0 10px var(--cream); transform: scale(1.5); } .year-marker::after { content: attr(data-year); position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 0.7rem; color: var(--cream); opacity: 0; transition: opacity 0.3s ease; } .year-marker:hover::after { opacity: 1; } .detail-panel { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 70%; background-color: rgba(54, 62, 74, 0.95); border: 2px solid var(--sand); border-radius: 10px; padding: 20px; z-index: 30; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; max-height: 60%; overflow-y: auto; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .detail-panel.active { opacity: 1; transform: translate(-50%, -50%) scale(1); } .detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px solid var(--sand); padding-bottom: 10px; } .detail-title { font-family: 'Playfair Display', serif; color: var(--sand); font-size: 1.4rem; } .close-btn { background: none; border: none; color: var(--cream); font-size: 1.5rem; cursor: pointer; transition: color 0.3s ease; } .close-btn:hover { color: var(--rust); } .detail-content { font-size: 0.85rem; line-height: 1.4; color: var(--cream); } .detail-content h3 { color: var(--sand); margin: 10px 0 5px; font-family: 'Playfair Display', serif; } .detail-content p { margin-bottom: 10px; } .detail-image { width: 100%; border-radius: 5px; margin: 10px 0; transition: transform 0.3s ease; border: 1px solid var(--sand); } .detail-image:hover { transform: scale(1.02); } .vintage-stamp { position: absolute; top: 20px; right: 20px; width: 80px; height: 80px; background-color: var(--rust); border-radius: 5px; transform: rotate(15deg); display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 0.65rem; color: var(--cream); text-align: center; line-height: 1.2; padding: 5px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); border: 1px dashed var(--cream); z-index: 2; opacity: 0.9; } .instructions { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); font-size: 0.7rem; color: var(--cream); opacity: 0.7; text-align: center; z-index: 20; width: 80%; } @media screen and (max-width: 700px) { .container { width: 100%; height: 700px; } .solar-system { width: 90%; height: 90%; } .timeline { width: 90%; } .detail-panel { width: 85%; } .title { font-size: 1.6rem; } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulse { 0% { box-shadow: 0 0 30px rgba(255, 160, 0, 0.7); } 50% { box-shadow: 0 0 50px rgba(255, 160, 0, 0.9); } 100% { box-shadow: 0 0 30px rgba(255, 160, 0, 0.7); } } .sun { animation: pulse 5s infinite; } .hidden { display: none; } </style> </head> <body> <div class="container"> <div class="stars" id="stars"></div> <div class="header"> <h1 class="title">Cosmic Chronicles</h1> <p class="subtitle">A Timeline of Our Solar System's Discoveries</p> </div> <div class="vintage-stamp"> ASTRO<br>EXPEDITION<br>1610-2015 </div> <div class="solar-system" id="solarSystem"> <div class="sun" data-planet="sun"></div> <!-- Planets and orbits will be generated by JS --> </div> <p class="instructions">Click on a planet or timeline marker to explore the history of its discovery</p> <div class="timeline" id="timeline"> <!-- Timeline markers will be generated by JS --> </div> <div class="detail-panel" id="detailPanel"> <div class="detail-header"> <h2 class="detail-title" id="detailTitle">Planet Details</h2> <button class="close-btn" id="closeDetail">×</button> </div> <div class="detail-content" id="detailContent"> <!-- Content will be inserted by JS --> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Generate stars const starsContainer = document.getElementById('stars'); for (let i = 0; i < 200; i++) { const star = document.createElement('div'); star.style.position = 'absolute'; star.style.width = `${Math.random() * 2}px`; star.style.height = star.style.width; star.style.backgroundColor = 'rgba(255, 255, 255, 0.8)'; star.style.borderRadius = '50%'; star.style.top = `${Math.random() * 100}%`; star.style.left = `${Math.random() * 100}%`; star.style.opacity = Math.random() * 0.8 + 0.2; star.style.animation = `twinkle ${Math.random() * 5 + 3}s infinite alternate`; starsContainer.appendChild(star); } // Solar system data const planets = [ { name: "Mercury", discoveryYear: "Prehistoric*", timelineYear: "265 BCE", color: "#a89784", size: 15, orbitSize: 120, details: { title: "Mercury: The Swift Messenger", content: ` <p>While visible to the naked eye and known since prehistoric times, Mercury's official documentation as a planet came from ancient astronomers.</p> <h3>265 BCE: First Recorded Observations</h3> <p>Timocharis of Alexandria made the first recorded observation of Mercury. Ancient civilizations often had difficulty observing Mercury due to its proximity to the Sun.</p> <img src="https://images.nasa.gov/details-PIA19442" class="detail-image" alt="Mercury"> <h3>1631: Transit Observation</h3> <p>Pierre Gassendi observed Mercury's transit across the Sun, confirming Kepler's prediction and marking a milestone in observational astronomy.</p> <h3>2008-2015: MESSENGER Mission</h3> <p>NASA's MESSENGER spacecraft provided the first complete map of Mercury's surface and discovered evidence of water ice in permanently shadowed craters near the poles.</p> ` } }, { name: "Venus", discoveryYear: "Prehistoric*", timelineYear: "1610", color: "#e3b587", size: 22, orbitSize: 160, details: { title: "Venus: The Evening Star", content: ` <p>Known to ancient civilizations as both the morning and evening star, Venus has been observed since prehistoric times.</p> <h3>1610: Phases Discovered</h3> <p>Galileo Galilei's observation of Venus's phases provided crucial evidence supporting the Copernican model of the solar system, proving that Venus orbits the Sun rather than Earth.</p> <img src="https://images.nasa.gov/details-PIA00271" class="detail-image" alt="Venus"> <h3>1761: Atmosphere Detection</h3> <p>Mikhail Lomonosov observed a ring of light around Venus during a transit, correctly attributing it to the presence of an atmosphere—the first detected around any planet besides Earth.</p> <h3>1962: Mariner 2</h3> <p>The first successful interplanetary spacecraft, Mariner 2, flew by Venus and confirmed its extremely hot surface (about 462°C) and dense, carbon dioxide atmosphere.</p> ` } }, { name: "Earth", discoveryYear: "N/A", timelineYear: "1543", color: "#4f7cac", size: 25, orbitSize: 200, details: { title: "Earth: Our Cosmic Home", content: ` <p>While not "discovered" in the traditional sense, our understanding of Earth as a planet has evolved dramatically over time.</p> <h3>1543: Copernican Revolution</h3> <p>Nicolaus Copernicus published "De revolutionibus orbium coelestium," proposing a heliocentric model where Earth orbits the Sun—a radical departure from the geocentric worldview that had dominated for millennia.</p> <img src="https://images.nasa.gov/details-as17-148-22727" class="detail-image" alt="Earth from space"> <h3>1687: Gravitational Theory</h3> <p>Isaac Newton's "Principia" established the law of universal gravitation, explaining Earth's orbit and laying the foundation for our understanding of planetary motion.</p> <h3>1968: Earthrise</h3> <p>The iconic "Earthrise" photograph taken by Apollo 8 astronauts showed Earth rising above the lunar horizon, providing humanity with its first view of our planet as a whole world in space—forever changing our perspective.</p> ` } }, { name: "Mars", discoveryYear: "Prehistoric*", timelineYear: "1659", color: "#c1440e", size: 18, orbitSize: 260, details: { title: "Mars: The Red Planet", content: ` <p>Known to ancient astronomers for its distinctive reddish color, Mars has captivated human imagination for millennia.</p> <h3>1659: Surface Features</h3> <p>Christian Huygens created the first sketch of Mars showing a distinctive surface feature—likely Syrtis Major, a dark volcanic plain. This marked the first observation of geographic features on another planet.</p> <img src="https://images.nasa.gov/details-PIA22329" class="detail-image" alt="Mars surface"> <h3>1877: Martian "Canals"</h3> <p>Giovanni Schiaparelli observed what he called "canali" (channels) on Mars, mistranslated as "canals," which sparked decades of speculation about Martian civilization—later disproven by space probes.</p> <h3>1965-Present: Robotic Exploration</h3> <p>Beginning with Mariner 4's flyby in 1965 and continuing with numerous rovers including Sojourner, Spirit, Opportunity, Curiosity, and Perseverance, our understanding of Mars has transformed from a potentially life-bearing world to a complex planet with a history of water and potential for past microbial life.</p> ` } }, { name: "Jupiter", discoveryYear: "Prehistoric*", timelineYear: "1610", color: "#d8ca9d", size: 40, orbitSize: 330, details: { title: "Jupiter: King of the Planets", content: ` <p>The largest planet in our solar system has been known since ancient times, but its true nature was revealed through telescopic observation.</p> <h3>1610: Galilean Moons</h3> <p>Galileo Galilei discovered Jupiter's four largest moons (Io, Europa, Ganymede, and Callisto), providing the first observation of celestial bodies orbiting something other than Earth—a crucial piece of evidence for the Copernican model.</p> <img src="https://images.nasa.gov/details-GSFC_20171208_Archive_e000922" class="detail-image" alt="Jupiter"> <h3>1664: Great Red Spot</h3> <p>Robert Hooke observed a persistent storm on Jupiter that may have been the Great Red Spot, a storm system that has existed for at least 400 years.</p> <h3>1979-2021: Spacecraft Exploration</h3> <p>Beginning with Pioneer 10 and 11, followed by Voyager 1 and 2, Galileo, Juno, and others, spacecraft have revealed Jupiter's complex atmosphere, powerful magnetosphere, and diverse moon system—including subsurface oceans on Europa that may potentially harbor life.</p> ` } }, { name: "Saturn", discoveryYear: "Prehistoric*", timelineYear: "1655", color: "#e4bb67", size: 35, orbitSize: 400, details: { title: "Saturn: Lord of the Rings", content: ` <p>Known to ancient astronomers as a wandering star, Saturn's spectacular ring system remained hidden until the telescope era.</p> <h3>1610: Strange Appearances</h3> <p>Galileo Galilei first observed Saturn through a telescope but was puzzled by what appeared to be "handles" or "ears" on either side of the planet—his telescope wasn't powerful enough to clearly reveal the rings.</p> <img src="https://images.nasa.gov/details-PIA21046" class="detail-image" alt="Saturn"> <h3>1655: Rings Identified</h3> <p>Christiaan Huygens, using a more powerful telescope, was the first to correctly identify Saturn's rings as a flat, ring-shaped structure that surrounded but did not touch the planet.</p> <h3>1675: Cassini Division</h3> <p>Giovanni Cassini discovered the gap in Saturn's rings now known as the Cassini Division, demonstrating that the rings were not a single solid structure.</p> <h3>2004-2017: Cassini Mission</h3> <p>NASA's Cassini spacecraft spent 13 years orbiting Saturn, revolutionizing our understanding of the planet, its rings, and its moons—particularly Titan with its methane lakes and Enceladus with its subsurface ocean and water plumes.</p> ` } }, { name: "Uranus", discoveryYear: "1781", timelineYear: "1781", color: "#a5d5d8", size: 28, orbitSize: 460, details: { title: "Uranus: The Sideways Planet", content: ` <p>The first planet discovered in the modern era, Uranus expanded the known boundaries of our solar system.</p> <h3>1781: William Herschel's Discovery</h3> <p>While surveying the night sky on March 13, 1781, William Herschel observed what he initially thought was a comet. After tracking its movement, he realized it was a new planet—the first discovered since ancient times.</p> <img src="https://images.nasa.gov/details-PIA18182" class="detail-image" alt="Uranus"> <h3>1787: Moons Discovered</h3> <p>Herschel discovered Uranus's two largest moons, Titania and Oberon. The planet's unusual 98-degree axial tilt ("sideways" rotation) wasn't confirmed until later observations.</p> <h3>1977: Rings Discovered</h3> <p>While observing a stellar occultation by Uranus, astronomers unexpectedly discovered the planet's ring system—the second planetary ring system found in our solar system.</p> <h3>1986: Voyager 2 Flyby</h3> <p>The only spacecraft to visit Uranus, Voyager 2 flew by in January 1986, discovering 10 new moons and two new rings while studying the planet's unusual magnetic field, which is tilted 59 degrees from its rotational axis.</p> ` } }, { name: "Neptune", discoveryYear: "1846", timelineYear: "1846", color: "#3e66a3", size: 27, orbitSize: 520, details: { title: "Neptune: The Mathematical Planet", content: ` <p>The only planet in our solar system discovered by mathematical prediction rather than direct observation, Neptune represents a triumph of scientific theory.</p> <h3>1821-1846: Mathematical Prediction</h3> <p>Irregularities in Uranus's orbit led astronomers to suspect the gravitational influence of an unknown planet. Independently, Urbain Le Verrier in France and John Couch Adams in England calculated the position of this hypothetical planet.</p> <img src="https://images.nasa.gov/details-PIA01492" class="detail-image" alt="Neptune"> <h3>September 23, 1846: Observation Confirmation</h3> <p>Following Le Verrier's predictions, Johann Gottfried Galle and Heinrich d'Arrest at the Berlin Observatory discovered Neptune within one degree of its predicted position—a remarkable validation of Newtonian mechanics and a watershed moment in astronomy.</p> <h3>1989: Voyager 2 Flyby</h3> <p>The only close encounter with Neptune, Voyager 2's 1989 flyby revealed a dynamic atmosphere with the fastest winds in the solar system (up to 2,100 km/h), the Great Dark Spot (a storm system), complete ring arcs, and six previously unknown moons.</p> <h3>2011: Neptune's First Orbit Since Discovery</h3> <p>In 2011, Neptune completed its first full orbit since its discovery in 1846, taking 164.8 Earth years to circle the Sun once.</p> ` } }, { name: "Pluto*", discoveryYear: "1930", timelineYear: "1930", color: "#c1a48b", size: 12, orbitSize: 570, details: { title: "Pluto: The Dwarf Planet", content: ` <p>Once considered the ninth planet, Pluto's reclassification as a dwarf planet in 2006 sparked scientific debate and public fascination.</p> <h3>1930: Discovery</h3> <p>After a systematic search for "Planet X," Clyde Tombaugh discovered Pluto at Lowell Observatory by comparing photographic plates taken several days apart and noticing a moving object against the background stars.</p> <img src="https://images.nasa.gov/details-PIA19873" class="detail-image" alt="Pluto"> <h3>1978: Charon Discovered</h3> <p>James Christy discovered Pluto's largest moon, Charon, which is so large relative to Pluto that the two bodies orbit a common center of gravity outside Pluto itself—essentially forming a double dwarf planet system.</p> <h3>2006: Reclassification</h3> <p>The International Astronomical Union formally defined the term "planet" for the first time, and under the new definition, Pluto was reclassified as a dwarf planet because it hasn't "cleared the neighborhood around its orbit."</p> <h3>2015: New Horizons Flyby</h3> <p>NASA's New Horizons spacecraft completed the first-ever flyby of Pluto, revealing a geologically active world with nitrogen ice plains, water ice mountains up to 3,500 meters high, possible cryovolcanoes, and a tenuous atmosphere—transforming Pluto from a distant point of light into a complex, fascinating world.</p> ` } } ]; // Timeline years const timelineYears = [ "265 BCE", "1543", "1610", "1655", "1659", "1781", "1846", "1930", "2015" ]; // Generate orbits and planets const solarSystem = document.getElementById('solarSystem'); planets.forEach(planet => { // Create orbit const orbit = document.createElement('div'); orbit.className = 'orbit'; orbit.style.width = `${planet.orbitSize}px`; orbit.style.height = `${planet.orbitSize}px`; solarSystem.appendChild(orbit); // Create planet const planetEl = document.createElement('div'); planetEl.className = 'planet'; planetEl.setAttribute('data-planet', planet.name.toLowerCase()); planetEl.style.width = `${planet.size}px`; planetEl.style.height = `${planet.size}px`; planetEl.style.backgroundColor = planet.color; // Position planet on orbit const angle = Math.random() * Math.PI * 2; // Random position on orbit const orbitRadius = planet.orbitSize / 2; const planetX = Math.cos(angle) * orbitRadius + 300 - (planet.size / 2); const planetY = Math.sin(angle) * orbitRadius + 300 - (planet.size / 2); planetEl.style.left = `${planetX}px`; planetEl.style.top = `${planetY}px`; // Add click event to show details planetEl.addEventListener('click', () => showPlanetDetails(planet)); solarSystem.appendChild(planetEl); }); // Add Sun click event document.querySelector('.sun').addEventListener('click', () => { showPlanetDetails({ name: "Sun", details: { title: "The Sun: Center of Our Solar System", content: ` <p>The Sun has been observed since prehistoric times, but understanding its true nature and role in the solar system took millennia of scientific progress.</p> <h3>Ancient Observations</h3> <p>Ancient civilizations worldwide venerated the Sun as a deity, with some like the Maya and ancient Egyptians developing sophisticated calendars based on solar observations.</p> <img src="https://images.nasa.gov/details-GSFC_20171208_Archive_e001435" class="detail-image" alt="The Sun"> <h3>1543: Heliocentric Model</h3> <p>Copernicus's heliocentric model placed the Sun at the center of the solar system, displacing Earth from its previously assumed central position—a revolutionary shift in cosmic perspective.</p> <h3>1610-1612: Sunspots</h3> <p>Galileo's systematic observations of sunspots proved that the Sun rotates and is not a perfect celestial body as Aristotelian cosmology had claimed.</p> <h3>1814-1925: Spectroscopy</h3> <p>Joseph von Fraunhofer's discovery of absorption lines in the solar spectrum, followed by work by Gustav Kirchhoff and others, allowed astronomers to determine the Sun's chemical composition—the foundation of modern astrophysics.</p> <h3>1939: Nuclear Fusion</h3> <p>Hans Bethe explained how the Sun generates energy through nuclear fusion of hydrogen into helium—solving the long-standing mystery of the Sun's power source.</p> <h3>Modern Space-Based Observatories</h3> <p>Missions like SOHO, SDO, and Parker Solar Probe have revolutionized our understanding of solar dynamics, helping us predict space weather that affects Earth's technology and revealing the complex behavior of our nearest star.</p> ` } }); }); // Generate timeline markers const timeline = document.getElementById('timeline'); timelineYears.forEach(year => { const marker = document.createElement('div'); marker.className = 'year-marker'; marker.setAttribute('data-year', year); marker.addEventListener('click', () => showTimelineDetails(year)); timeline.appendChild(marker); }); // Show planet details function showPlanetDetails(planet) { const detailPanel = document.getElementById('detailPanel'); const detailTitle = document.getElementById('detailTitle'); const detailContent = document.getElementById('detailContent'); detailTitle.textContent = planet.details.title; detailContent.innerHTML = planet.details.content; detailPanel.classList.add('active'); } // Show timeline details based on year function showTimelineDetails(year) { document.querySelectorAll('.year-marker').forEach(marker => { marker.classList.remove('active'); }); document.querySelector(`.year-marker[data-year="${year}"]`).classList.add('active'); let planetToShow; if (year === "265 BCE") planetToShow = "Mercury"; else if (year === "1543") planetToShow = "Earth"; else if (year === "1610") { // Show multiple discoveries of 1610: Venus, Jupiter, and Saturn's rings showPlanetDetails({ name: "Multiple Discoveries", details: { title: "1610: Galileo's Revolutionary Year", content: ` <p>1610 was a watershed year in astronomy, as Galileo Galilei's use of the telescope revolutionized our understanding of the solar system.</p> <h3>Venus: Phases Observed</h3> <p>Galileo observed Venus going through a complete set of phases similar to the Moon, proving it orbited the Sun, not Earth—strong evidence for the Copernican model.</p> <h3>Jupiter: Moons Discovered</h3> <p>Galileo discovered four large moons orbiting Jupiter (now called the Galilean moons: Io, Europa, Ganymede, and Callisto), showing not everything in the heavens orbited Earth.</p> <h3>Saturn: "Strange Appendages"</h3> <p>Galileo observed Saturn but was confused by what he saw, describing the planet as having "ears" or "handles" (his telescope wasn't powerful enough to clearly resolve the rings).</p> <img src="https://images.nasa.gov/details-0302631" class="detail-image" alt="Galileo's drawings"> <h3>Historical Impact</h3> <p>These discoveries, published in "Sidereus Nuncius" (Starry Messenger), fundamentally challenged the Aristotelian-Ptolemaic worldview that had dominated for centuries and helped establish observational evidence for the Copernican system.</p> ` } }); return; } else if (year === "1655") planetToShow = "Saturn"; else if (year === "1659") planetToShow = "Mars"; else if (year === "1781") planetToShow = "Uranus"; else if (year === "1846") planetToShow = "Neptune"; else if (year === "1930") planetToShow = "Pluto"; else if (year === "2015") { // Show New Horizons mission showPlanetDetails({ name: "New Horizons", details: { title: "2015: New Horizons Reaches Pluto", content: ` <p>On July 14, 2015, NASA's New Horizons spacecraft made its historic flyby of Pluto, transforming our understanding of this distant world.</p> <h3>The Mission</h3> <p>Launched in 2006, New Horizons traveled 3 billion miles over 9.5 years to reach Pluto. Moving at about 50,000 km/h, it was the fastest spacecraft ever launched from Earth.</p> <img src="https://images.nasa.gov/details-PIA19857" class="detail-image" alt="Pluto's heart"> <h3>Revelations</h3> <p>Before New Horizons, Pluto was merely a pixelated blob. The flyby revealed a complex world with a distinctive heart-shaped region (Tombaugh Regio), nitrogen ice plains, water ice mountains reaching 3,500 meters high, and evidence of recent geological activity—despite surface temperatures of -230°C.</p> <h3>Continuing Journey</h3> <p>After Pluto, New Horizons continued its journey to explore Arrokoth (2014 MU₆₉), the most distant and primitive object ever explored by a spacecraft, providing insights into the formation of planetesimals in the early solar system.</p> <h3>Legacy</h3> <p>The New Horizons mission completed humanity's first reconnaissance of all the classical planets, transforming Pluto from an astronomical curiosity into a fascinating geological world and exemplifying the enduring human spirit of exploration.</p> ` } }); return; } const planet = planets.find(p => p.name === planetToShow); if (planet) showPlanetDetails(planet); } // Close detail panel document.getElementById('closeDetail').addEventListener('click', function() { document.getElementById('detailPanel').classList.remove('active'); document.querySelectorAll('.year-marker').forEach(marker => { marker.classList.remove('active'); }); }); // Add CSS for star twinkling const style = document.createElement('style'); style.textContent = ` @keyframes twinkle { 0% { opacity: 0.2; } 100% { opacity: 1; } } `; document.head.appendChild(style); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Celestial Canvas</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #070B16; font-family: 'Montserrat', sans-serif; color: #fff; overflow: hidden; width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .container { width: 700px; height: 700px; display: flex; flex-direction: column; position: relative; } .header { text-align: center; margin-bottom: 20px; padding: 20px; opacity: 0; animation: fadeIn 1s ease-out forwards; position: relative; z-index: 2; } h1 { font-size: 2.5rem; font-weight: 300; letter-spacing: 2px; margin-bottom: 10px; background: linear-gradient(45deg, #FF6B6B, #FFE66D, #4ECDC4, #556270); -webkit-background-clip: text; background-clip: text; color: transparent; } .tagline { font-size: 1rem; opacity: 0.8; max-width: 600px; margin: 0 auto; font-weight: 300; line-height: 1.5; } .solar-system { position: relative; width: 100%; height: 500px; margin: 0 auto; perspective: 1000px; transform-style: preserve-3d; } .sun { position: absolute; width: 70px; height: 70px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 30% 30%, #FFD700, #FF8C00, #FF4500); box-shadow: 0 0 50px 10px rgba(255, 165, 0, 0.5); cursor: pointer; transition: all 0.3s ease; } .sun:hover { box-shadow: 0 0 60px 15px rgba(255, 165, 0, 0.7); } .planet { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; border-radius: 50%; cursor: pointer; transition: all 0.5s ease; background-size: cover; opacity: 0; animation: fadeIn 1s ease-out forwards; filter: saturate(0.8); } .planet:hover { transform-origin: 0 0; filter: saturate(1.2) brightness(1.2); z-index: 10; } .orbit { position: absolute; left: 50%; top: 50%; border: 1px dashed rgba(255, 255, 255, 0.2); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; animation: fadeIn 1.5s ease-out forwards; } .controls { display: flex; justify-content: center; gap: 15px; margin-top: 20px; opacity: 0; animation: fadeIn 1s ease-out 0.5s forwards; position: relative; z-index: 2; } .control-btn { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; padding: 8px 15px; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; font-size: 14px; backdrop-filter: blur(5px); } .control-btn:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); } .control-btn.active { background: rgba(255, 255, 255, 0.3); box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); } .color-picker { position: absolute; bottom: 20px; right: 20px; display: flex; gap: 10px; opacity: 0; animation: fadeIn 1s ease-out 1s forwards; } .color-swatch { width: 25px; height: 25px; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; } .color-swatch:hover { transform: scale(1.2); } .color-swatch.active { border: 2px solid white; } .info-panel { position: absolute; background: rgba(10, 15, 30, 0.85); backdrop-filter: blur(10px); padding: 20px; border-radius: 10px; width: 250px; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .info-panel.active { opacity: 1; transform: translate(-50%, -50%) scale(1); } .close-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; color: white; font-size: 16px; cursor: pointer; opacity: 0.7; } .close-btn:hover { opacity: 1; } .planet-name { font-size: 1.5rem; margin-bottom: 10px; font-weight: 300; letter-spacing: 1px; } .planet-desc { font-size: 0.9rem; line-height: 1.5; margin-bottom: 15px; } .customize-btn { background: linear-gradient(45deg, #4ECDC4, #556270); border: none; color: white; padding: 8px 15px; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; font-size: 14px; margin-top: 10px; } .customize-btn:hover { background: linear-gradient(45deg, #556270, #4ECDC4); transform: translateY(-2px); } .stars { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .star { position: absolute; width: 2px; height: 2px; background-color: white; border-radius: 50%; opacity: 0.7; animation: twinkle 4s infinite; } .watercolor-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: radial-gradient(ellipse at center, transparent 0%, rgba(7, 11, 22, 0.8) 100%); filter: opacity(0.2); mix-blend-mode: overlay; pointer-events: none; z-index: 0; } .tutorial { position: absolute; bottom: 15px; left: 15px; font-size: 12px; opacity: 0.6; transition: opacity 0.3s ease; z-index: 2; } .tutorial:hover { opacity: 1; } /* Animations */ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes twinkle { 0%, 100% { opacity: 0.7; } 50% { opacity: 0.3; } } @keyframes orbit { 0% { transform: rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg); } 100% { transform: rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .loading-spinner { width: 40px; height: 40px; border: 4px solid rgba(255, 255, 255, 0.1); border-radius: 50%; border-top-color: #4ECDC4; animation: spin 1s ease-in-out infinite; margin: 0 auto 15px; } @keyframes spin { to { transform: rotate(360deg); } } /* Media queries */ @media (max-width: 700px) { .container { width: 100%; height: 100vh; padding: 10px; } h1 { font-size: 2rem; } .solar-system { height: 400px; } .controls { flex-wrap: wrap; padding: 0 10px; } .info-panel { width: 220px; } } </style> </head> <body> <div class="container"> <div class="loading"> <div class="loading-spinner"></div> <div>Creating your cosmic canvas...</div> </div> <div class="header"> <h1>Celestial Canvas</h1> <p class="tagline">Explore the intersection of artistic abstraction and scientific accuracy in this interactive solar system. Manipulate elements to create your own cosmic masterpiece.</p> </div> <div class="solar-system"> <div class="watercolor-bg"></div> <div class="sun"></div> <div class="stars"></div> </div> <div class="controls"> <button class="control-btn active" data-mode="abstract">Abstract View</button> <button class="control-btn" data-mode="scientific">Scientific View</button> <button class="control-btn" data-mode="custom">Customize</button> </div> <div class="color-picker"> <div class="color-swatch active" style="background: linear-gradient(45deg, #FF6B6B, #FFE66D);" data-palette="warm"></div> <div class="color-swatch" style="background: linear-gradient(45deg, #4ECDC4, #556270);" data-palette="cool"></div> <div class="color-swatch" style="background: linear-gradient(45deg, #9B59B6, #3498DB);" data-palette="cosmic"></div> </div> <div class="tutorial">Click on planets for details. Drag to rearrange.</div> <div class="info-panel"> <button class="close-btn">×</button> <h3 class="planet-name">Mercury</h3> <p class="planet-desc">A watercolor interpretation of Mercury's cratered surface. The textured brushstrokes represent the extreme temperature variations on this sun-scorched world.</p> <button class="customize-btn">Customize Appearance</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Hide loading screen after content loads setTimeout(() => { document.querySelector('.loading').style.display = 'none'; }, 1500); const solarSystem = document.querySelector('.solar-system'); const sun = document.querySelector('.sun'); const infoPanel = document.querySelector('.info-panel'); const closePanelBtn = document.querySelector('.close-btn'); const controlBtns = document.querySelectorAll('.control-btn'); const colorSwatches = document.querySelectorAll('.color-swatch'); let currentMode = 'abstract'; let currentPalette = 'warm'; let isDragging = false; let selectedPlanet = null; let draggedPlanet = null; let activePlanet = null; let animationSpeed = 1; // Planet data with both abstract and scientific descriptions const planets = [ { name: 'Mercury', abstractDesc: 'A watercolor interpretation of Mercury's cratered surface. The textured brushstrokes represent the extreme temperature variations on this sun-scorched world.', scientificDesc: 'The smallest planet in our solar system, Mercury has a thin exosphere instead of an atmosphere and a heavily cratered surface resembling our Moon.', distance: 80, size: 15, speed: 4.1, abstractColor: 'radial-gradient(circle at 30% 30%, #D3A265, #A67C52, #8B5A2B)', scientificColor: 'radial-gradient(circle at 30% 30%, #BBB, #999, #777)', warmColor: 'radial-gradient(circle at 30% 30%, #D3A265, #A67C52, #8B5A2B)', coolColor: 'radial-gradient(circle at 30% 30%, #9DA3A4, #738384, #556270)', cosmicColor: 'radial-gradient(circle at 30% 30%, #BD9A7A, #91785E, #695847)', }, { name: 'Venus', abstractDesc: 'Dreamy swirls of golden ochre capture Venus's mysterious cloud cover. The hand-drawn texture evokes the opaque atmosphere hiding a scorching volcanic landscape.', scientificDesc: 'Venus has a thick toxic atmosphere that traps heat, making it the hottest planet in our solar system despite not being closest to the Sun.', distance: 110, size: 22, speed: 1.6, abstractColor: 'radial-gradient(circle at 30% 30%, #FFF4B8, #F4D03F, #F39C12)', scientificColor: 'radial-gradient(circle at 30% 30%, #FFF4B8, #F0E68C, #DAA520)', warmColor: 'radial-gradient(circle at 30% 30%, #FFF4B8, #F4D03F, #F39C12)', coolColor: 'radial-gradient(circle at 30% 30%, #C7E5D6, #89C9B8, #4ECDC4)', cosmicColor: 'radial-gradient(circle at 30% 30%, #F9E79F, #D4AC0D, #B7950B)', }, { name: 'Earth', abstractDesc: 'Fluid blues and greens blend to represent our water-rich home. The organic brushstrokes suggest the dynamic nature of Earth's weather systems and biosphere.', scientificDesc: 'The only known planet to support life, Earth's nitrogen-oxygen atmosphere and water-rich surface create a unique habitable environment.', distance: 150, size: 24, speed: 1, abstractColor: 'radial-gradient(circle at 30% 30%, #86C5DA, #3498DB, #2980B9)', scientificColor: 'radial-gradient(circle at 30% 30%, #57D5FF, #264D73, #1D3557)', warmColor: 'radial-gradient(circle at 30% 30%, #86C5DA, #3498DB, #2980B9)', coolColor: 'radial-gradient(circle at 30% 30%, #89C9B8, #4ECDC4, #24A19C)', cosmicColor: 'radial-gradient(circle at 30% 30%, #3498DB, #2980B9, #1F618D)', }, { name: 'Mars', abstractDesc: 'Expressive crimson strokes depict the dusty Martian landscape. The layered texture hints at the planet's geological history and ancient riverbeds long dried.', scientificDesc: 'Mars has a thin atmosphere, polar ice caps, and the largest volcano in the solar system. Its reddish appearance comes from iron oxide (rust) on its surface.', distance: 190, size: 18, speed: 0.5, abstractColor: 'radial-gradient(circle at 30% 30%, #FF6B6B, #E74C3C, #C0392B)', scientificColor: 'radial-gradient(circle at 30% 30%, #FF8C69, #CD5C5C, #8B0000)', warmColor: 'radial-gradient(circle at 30% 30%, #FF6B6B, #E74C3C, #C0392B)', coolColor: 'radial-gradient(circle at 30% 30%, #A66E68, #866160, #553C3A)', cosmicColor: 'radial-gradient(circle at 30% 30%, #E57373, #AF4448, #880E4F)', }, { name: 'Jupiter', abstractDesc: 'Bold swirls of amber and umber create a dramatic representation of Jupiter's stormy atmosphere. The visual turbulence mirrors the planet's dynamic weather systems.', scientificDesc: 'The largest planet in our solar system, Jupiter is a gas giant with a turbulent atmosphere featuring the Great Red Spot, a storm that has lasted for centuries.', distance: 240, size: 40, speed: 0.08, abstractColor: 'radial-gradient(circle at 30% 30%, #F0E68C, #DAA520, #8B4513)', scientificColor: 'radial-gradient(circle at 30% 30%, #F0E68C, #DAA520, #B8860B)', warmColor: 'radial-gradient(circle at 30% 30%, #F0E68C, #DAA520, #8B4513)', coolColor: 'radial-gradient(circle at 30% 30%, #D1C894, #A6A670, #7C834B)', cosmicColor: 'radial-gradient(circle at 30% 30%, #FEF5E7, #E67E22, #BA4A00)', }, { name: 'Saturn', abstractDesc: 'Delicate golden washes create Saturn's ethereal appearance, while the translucent rings are rendered with light-handed strokes suggesting their fragile beauty.', scientificDesc: 'Known for its spectacular ring system composed of ice particles, Saturn is a gas giant with the lowest density of all planets—it could float in water.', distance: 290, size: 36, speed: 0.03, abstractColor: 'radial-gradient(circle at 30% 30%, #FFE066, #E6A23C, #D68910)', scientificColor: 'radial-gradient(circle at 30% 30%, #FDE9B1, #D4B886, #B59559)', warmColor: 'radial-gradient(circle at 30% 30%, #FFE066, #E6A23C, #D68910)', coolColor: 'radial-gradient(circle at 30% 30%, #D8CBB7, #B2A594, #8D827A)', cosmicColor: 'radial-gradient(circle at 30% 30%, #FDF2E9, #FAD7A0, #F5CBA7)', }, { name: 'Uranus', abstractDesc: 'Soft cyan washes create the dreamy appearance of Uranus. The blurred edges and gradient shifts represent a mysterious world tilted on its side.', scientificDesc: 'Uranus is an ice giant that uniquely rotates on its side, likely due to a massive collision. Its atmosphere contains methane gas, giving it a blue-green color.', distance: 340, size: 30, speed: 0.01, abstractColor: 'radial-gradient(circle at 30% 30%, #AFDFE4, #48C9B0, #16A085)', scientificColor: 'radial-gradient(circle at 30% 30%, #E0FFFF, #7FFFD4, #48D1CC)', warmColor: 'radial-gradient(circle at 30% 30%, #AFDFE4, #48C9B0, #16A085)', coolColor: 'radial-gradient(circle at 30% 30%, #89CFEF, #45B7D1, #2387A6)', cosmicColor: 'radial-gradient(circle at 30% 30%, #AED6F1, #3498DB, #2874A6)', }, { name: 'Neptune', abstractDesc: 'Dramatic indigo and violet brushstrokes create Neptune's stormy appearance. The depth of color represents the mysterious and obscure nature of our outermost planet.', scientificDesc: 'The windiest planet in our solar system, Neptune is an ice giant with supersonic winds and a distinct blue color due to atmospheric methane.', distance: 380, size: 28, speed: 0.006, abstractColor: 'radial-gradient(circle at 30% 30%, #89CFF0, #4169E1, #0000CD)', scientificColor: 'radial-gradient(circle at 30% 30%, #96CDCD, #5F9EA0, #2E8B57)', warmColor: 'radial-gradient(circle at 30% 30%, #89CFF0, #4169E1, #0000CD)', coolColor: 'radial-gradient(circle at 30% 30%, #5D6D7E, #34495E, #2C3E50)', cosmicColor: 'radial-gradient(circle at 30% 30%, #5B3256, #3E1F3C, #281624)', } ]; // Create stars function createStars() { const starsContainer = document.querySelector('.stars'); for (let i = 0; i < 150; i++) { const star = document.createElement('div'); star.classList.add('star'); star.style.left = `${Math.random() * 100}%`; star.style.top = `${Math.random() * 100}%`; star.style.width = `${Math.random() * 2 + 1}px`; star.style.height = star.style.width; star.style.animationDelay = `${Math.random() * 4}s`; starsContainer.appendChild(star); } } // Create planets function createPlanets() { // Remove existing planets and orbits document.querySelectorAll('.planet, .orbit').forEach(el => el.remove()); planets.forEach((planet, index) => { // Create orbit const orbit = document.createElement('div'); orbit.classList.add('orbit'); orbit.style.width = `${planet.distance * 2}px`; orbit.style.height = `${planet.distance * 2}px`; solarSystem.appendChild(orbit); // Create planet const planetEl = document.createElement('div'); planetEl.classList.add('planet'); planetEl.dataset.index = index; planetEl.style.width = `${planet.size}px`; planetEl.style.height = `${planet.size}px`; // Set planet color based on mode and palette if (currentMode === 'abstract') { if (currentPalette === 'warm') { planetEl.style.background = planet.warmColor; } else if (currentPalette === 'cool') { planetEl.style.background = planet.coolColor; } else { planetEl.style.background = planet.cosmicColor; } } else { planetEl.style.background = planet.scientificColor; } // Animation properties planetEl.style.setProperty('--orbit-radius', `${planet.distance}px`); planetEl.style.animation = `orbit ${planet.speed / animationSpeed * 60}s linear infinite`; // Initial position const angle = (Math.random() * 360) * (Math.PI / 180); planetEl.style.transform = `rotate(${angle}rad) translateX(${planet.distance}px) rotate(${-angle}rad)`; solarSystem.appendChild(planetEl); // Planet event listeners planetEl.addEventListener('click', (e) => { e.stopPropagation(); showPlanetInfo(index); }); planetEl.addEventListener('mousedown', (e) => { e.stopPropagation(); draggedPlanet = planetEl; isDragging = true; // Stop the orbit animation planetEl.style.animation = 'none'; // Track the initial mouse position const rect = solarSystem.getBoundingClientRect(); const centerX = rect.width / 2; const centerY = rect.height / 2; document.addEventListener('mousemove', dragPlanet); document.addEventListener('mouseup', stopDragging); }); }); } // Function to drag planets function dragPlanet(e) { if (!isDragging || !draggedPlanet) return; // Calculate new position relative to the solar system center const rect = solarSystem.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; // Calculate angle and distance from center const dx = e.clientX - centerX; const dy = e.clientY - centerY; const angle = Math.atan2(dy, dx); // Get the planet's original distance to maintain const index = parseInt(draggedPlanet.dataset.index); const distance = planets[index].distance; // Set new position draggedPlanet.style.transform = `rotate(${angle}rad) translateX(${distance}px) rotate(${-angle}rad)`; } // Function to stop dragging function stopDragging() { if (draggedPlanet) { // Restore animation with new starting position const index = parseInt(draggedPlanet.dataset.index); const planet = planets[index]; draggedPlanet.style.animation = `orbit ${planet.speed / animationSpeed * 60}s linear infinite`; } isDragging = false; draggedPlanet = null; document.removeEventListener('mousemove', dragPlanet); document.removeEventListener('mouseup', stopDragging); } // Show planet information function showPlanetInfo(index) { const planet = planets[index]; activePlanet = index; document.querySelector('.planet-name').textContent = planet.name; if (currentMode === 'abstract') { document.querySelector('.planet-desc').textContent = planet.abstractDesc; } else { document.querySelector('.planet-desc').textContent = planet.scientificDesc; } infoPanel.classList.add('active'); } // Close planet information panel closePanelBtn.addEventListener('click', () => { infoPanel.classList.remove('active'); activePlanet = null; }); // Handle control buttons controlBtns.forEach(btn => { btn.addEventListener('click', () => { controlBtns.forEach(b => b.classList.remove('active')); btn.classList.add('active'); currentMode = btn.dataset.mode; if (currentMode === 'custom') { // Speed up animation in custom mode animationSpeed = 3; document.querySelector('.color-picker').style.opacity = '1'; } else { animationSpeed = 1; document.querySelector('.color-picker').style.opacity = '0.5'; } createPlanets(); // Update info panel if it's open if (activePlanet !== null) { showPlanetInfo(activePlanet); } }); }); // Handle color swatches colorSwatches.forEach(swatch => { swatch.addEventListener('click', () => { colorSwatches.forEach(s => s.classList.remove('active')); swatch.classList.add('active'); currentPalette = swatch.dataset.palette; createPlanets(); }); }); // Sun interactivity sun.addEventListener('click', () => { sun.style.animation = sun.style.animation ? '' : 'pulse 2s infinite'; document.querySelectorAll('.planet').forEach(planet => { const index = parseInt(planet.dataset.index); if (sun.style.animation) { // Speed up when the sun is pulsing planet.style.animation = `orbit ${planets[index].speed / (animationSpeed * 2) * 60}s linear infinite`; } else { // Regular speed planet.style.animation = `orbit ${planets[index].speed / animationSpeed * 60}s linear infinite`; } }); }); // Customize button document.querySelector('.customize-btn').addEventListener('click', () => { // Switch to custom mode controlBtns.forEach(b => b.classList.remove('active')); document.querySelector('[data-mode="custom"]').classList.add('active'); currentMode = 'custom'; animationSpeed = 3; document.querySelector('.color-picker').style.opacity = '1'; createPlanets(); infoPanel.classList.remove('active'); }); // Initialize createStars(); createPlanets(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cosmic Storytelling Module</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Cormorant Garamond', serif; background: #121212; color: #d2b48c; overflow: hidden; height: 700px; width: 700px; display: flex; justify-content: center; align-items: center; } .cosmos-container { position: relative; width: 680px; height: 680px; background-image: url('data:image/jpeg;base64,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
