Spaces:

ParulPandey
/

solar_system

Running

App Files Files Community

ParulPandey commited on 28 days ago

Commit

a1e3877

verified ·

1 Parent(s): 388509d

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +566 -19

index.html CHANGED Viewed

@@ -1,19 +1,566 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Interactive Solar System</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            overflow: hidden;
+            background: #000;
+            font-family: 'Arial', sans-serif;
+        }
+        #canvas-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .controls {
+            position: absolute;
+            bottom: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 20px;
+            background: rgba(0, 0, 0, 0.7);
+            padding: 15px 25px;
+            border-radius: 50px;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .control-btn {
+            background: linear-gradient(45deg, #4a00e0, #8e2de2);
+            border: none;
+            color: white;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            cursor: pointer;
+            font-size: 18px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+        }
+        .control-btn:hover {
+            transform: scale(1.1);
+            box-shadow: 0 8px 25px rgba(142, 45, 226, 0.4);
+        }
+        .speed-control {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            color: white;
+        }
+        .speed-slider {
+            width: 200px;
+            height: 6px;
+            -webkit-appearance: none;
+            background: linear-gradient(to right, #4a00e0, #8e2de2);
+            border-radius: 3px;
+            outline: none;
+        }
+        .speed-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: white;
+            cursor: pointer;
+            box-shadow: 0 0 10px rgba(142, 45, 226, 0.8);
+        }
+        .info-panel {
+            position: absolute;
+            top: 30px;
+            right: 30px;
+            width: 320px;
+            background: rgba(0, 0, 0, 0.85);
+            backdrop-filter: blur(20px);
+            border-radius: 20px;
+            padding: 25px;
+            color: white;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+            transform: translateX(120%);
+            transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+            z-index: 100;
+        }
+        .info-panel.visible {
+            transform: translateX(0);
+        }
+        .info-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+        .planet-icon {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            margin-right: 15px;
+            background-size: cover;
+        }
+        .planet-name {
+            font-size: 24px;
+            font-weight: bold;
+            background: linear-gradient(45deg, #4a00e0, #8e2de2);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .info-content {
+            line-height: 1.6;
+        }
+        .info-item {
+            margin-bottom: 15px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .info-label {
+            color: #8e2de2;
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+        .info-value {
+            color: white;
+            font-size: 16px;
+        }
+        .info-description {
+            color: #ccc;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+        .close-btn {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            background: rgba(255, 255, 255, 0.1);
+            border: none;
+            color: white;
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            cursor: pointer;
+            font-size: 16px;
+        }
+        .title {
+            position: absolute;
+            top: 30px;
+            left: 30px;
+            color: white;
+            font-size: 28px;
+            font-weight: bold;
+            text-shadow: 0 0 20px rgba(142, 45, 226, 0.8);
+        }
+        .title span {
+            background: linear-gradient(45deg, #4a00e0, #8e2de2);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        @media (max-width: 768px) {
+            .controls {
+                flex-direction: column;
+                border-radius: 20px;
+                padding: 15px;
+            }
+            .info-panel {
+                width: calc(100% - 40px);
+                right: 20px;
+                top: 20px;
+            }
+            .title {
+                font-size: 20px;
+                top: 15px;
+                left: 15px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="canvas-container"></div>
+    <div class="title">Interactive <span>Solar System</span></div>
+    <div class="controls">
+        <button id="playPauseBtn" class="control-btn">⏸️</button>
+        <div class="speed-control">
+            <span>🐢</span>
+            <input type="range" id="speedSlider" class="speed-slider" min="0" max="2" step="0.1" value="1">
+            <span>🐰</span>
+        </div>
+    </div>
+    <div id="infoPanel" class="info-panel">
+        <button class="close-btn">×</button>
+        <div class="info-header">
+            <div class="planet-icon" id="planetIcon"></div>
+            <div class="planet-name" id="planetName">Planet Name</div>
+        </div>
+        <div class="info-content">
+            <div class="info-item">
+                <div class="info-label">Distance from Sun</div>
+                <div class="info-value" id="distance">0 million km</div>
+            </div>
+            <div class="info-item">
+                <div class="info-label">Orbital Period</div>
+                <div class="info-value" id="period">0 Earth days</div>
+            </div>
+            <div class="info-item">
+                <div class="info-label">Description</div>
+                <div class="info-description" id="description">Planet description...</div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Planet data with realistic information
+        const planetData = [
+            {
+                name: "Mercury",
+                radius: 1.2,
+                distance: 20,
+                speed: 8.0,
+                rotationSpeed: 0.017,
+                color: 0x8a8a8a,
+                description: "The smallest planet in our solar system and closest to the Sun. Mercury has no atmosphere and experiences extreme temperature variations.",
+                distanceFromSun: 57.9,
+                orbitalPeriod: 88
+            },
+            {
+                name: "Venus",
+                radius: 3.0,
+                distance: 30,
+                speed: 6.5,
+                rotationSpeed: 0.004,
+                color: 0xe39e1c,
+                description: "The hottest planet in our solar system with a thick toxic atmosphere. Venus is often called Earth's sister planet due to its similar size.",
+                distanceFromSun: 108.2,
+                orbitalPeriod: 225
+            },
+            {
+                name: "Earth",
+                radius: 3.1,
+                distance: 40,
+                speed: 5.5,
+                rotationSpeed: 0.01,
+                color: 0x1f77b4,
+                description: "Our home planet and the only known place in the universe with life. Earth has a diverse biosphere and a protective atmosphere.",
+                distanceFromSun: 149.6,
+                orbitalPeriod: 365
+            },
+            {
+                name: "Mars",
+                radius: 1.7,
+                distance: 50,
+                speed: 4.5,
+                rotationSpeed: 0.0097,
+                color: 0xff7f0e,
+                description: "The Red Planet known for its iron oxide surface. Mars has the largest volcano and canyon in the solar system.",
+                distanceFromSun: 227.9,
+                orbitalPeriod: 687
+            },
+            {
+                name: "Jupiter",
+                radius: 10.0,
+                distance: 70,
+                speed: 2.5,
+                rotationSpeed: 0.024,
+                color: 0xd8ca9d,
+                description: "The largest planet in our solar system, a gas giant with a prominent Great Red Spot storm. Jupiter has at least 79 moons.",
+                distanceFromSun: 778.5,
+                orbitalPeriod: 4333
+            },
+            {
+                name: "Saturn",
+                radius: 8.4,
+                distance: 90,
+                speed: 2.0,
+                rotationSpeed: 0.019,
+                color: 0xf0e0a0,
+                description: "Famous for its spectacular ring system made of ice and rock particles. Saturn is the least dense planet in our solar system.",
+                distanceFromSun: 1432.0,
+                orbitalPeriod: 10759
+            },
+            {
+                name: "Uranus",
+                radius: 3.6,
+                distance: 110,
+                speed: 1.5,
+                rotationSpeed: 0.015,
+                color: 0xa0d0e0,
+                description: "An ice giant that rotates on its side, possibly due to an ancient collision. Uranus has a blue-green color due to methane in its atmosphere.",
+                distanceFromSun: 2867.0,
+                orbitalPeriod: 30687
+            },
+            {
+                name: "Neptune",
+                radius: 3.5,
+                distance: 130,
+                speed: 1.2,
+                rotationSpeed: 0.018,
+                color: 0x4f79da,
+                description: "The windiest planet with speeds up to 2,100 km/h. Neptune was the first planet discovered through mathematical predictions.",
+                distanceFromSun: 4515.0,
+                orbitalPeriod: 60190
+            }
+        ];
+        // Initialize Three.js
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 3000);
+        const renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setPixelRatio(window.devicePixelRatio);
+        document.getElementById('canvas-container').appendChild(renderer.domElement);
+        // Add orbit controls
+        const controls = new THREE.OrbitControls(camera, renderer.domElement);
+        controls.enableDamping = true;
+        controls.dampingFactor = 0.05;
+        // Create stars background
+        const starsGeometry = new THREE.BufferGeometry();
+        const starsMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 1 });
+        const starsVertices = [];
+        for (let i = 0; i < 10000; i++) {
+            const x = (Math.random() - 0.5) * 2000;
+            const y = (Math.random() - 0.5) * 2000;
+            const z = (Math.random() - 0.5) * 2000;
+            starsVertices.push(x, y, z);
+        }
+        starsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starsVertices, 3));
+        const starField = new THREE.Points(starsGeometry, starsMaterial);
+        scene.add(starField);
+        // Create the Sun
+        const sunGeometry = new THREE.SphereGeometry(10, 64, 64);
+        const sunMaterial = new THREE.MeshBasicMaterial({
+            color: 0xffff00,
+            emissive: 0xffff33,
+            emissiveIntensity: 1
+        });
+        const sun = new THREE.Mesh(sunGeometry, sunMaterial);
+        scene.add(sun);
+        // Add sun glow effect
+        const sunGlowGeometry = new THREE.SphereGeometry(12, 32, 32);
+        const sunGlowMaterial = new THREE.MeshBasicMaterial({
+            color: 0xffff00,
+            transparent: true,
+            opacity: 0.3
+        });
+        const sunGlow = new THREE.Mesh(sunGlowGeometry, sunGlowMaterial);
+        scene.add(sunGlow);
+        // Create planets
+        const planets = [];
+        const orbits = [];
+        planetData.forEach((planet, index) => {
+            // Create planet
+            const geometry = new THREE.SphereGeometry(planet.radius, 32, 32);
+            const material = new THREE.MeshLambertMaterial({ color: planet.color });
+            const mesh = new THREE.Mesh(geometry, material);
+            // Position planet
+            const distance = planet.distance; // Scale down for visualization
+            mesh.position.x = distance;
+            // Create orbit path
+            const orbitGeometry = new THREE.BufferGeometry();
+            const orbitPoints = [];
+            const orbitSegments = 128;
+            for (let i = 0; i <= orbitSegments; i++) {
+                const theta = (i / orbitSegments) * Math.PI * 2;
+                orbitPoints.push(
+                    Math.cos(theta) * distance,
+                    0,
+                    Math.sin(theta) * distance
+                );
+            }
+            orbitGeometry.setAttribute('position', new THREE.Float32BufferAttribute(orbitPoints, 3));
+            const orbitMaterial = new THREE.LineBasicMaterial({
+                color: 0xffffff,
+                transparent: true,
+                opacity: 0.6
+            });
+            const orbit = new THREE.Line(orbitGeometry, orbitMaterial);
+            scene.add(orbit);
+            orbits.push(orbit);
+            // Add to scene
+            scene.add(mesh);
+            // Store planet data
+            planets.push({
+                mesh: mesh,
+                data: planet,
+                angle: Math.random() * Math.PI * 2,
+                distance: distance,
+                speed: planet.speed * 0.05,
+                rotationSpeed: planet.rotationSpeed
+            });
+            // Add rings to Saturn
+            if (planet.name === "Saturn") {
+                const ringGeometry = new THREE.RingGeometry(planet.radius * 1.5, planet.radius * 2.5, 64);
+                const ringMaterial = new THREE.MeshBasicMaterial({
+                    color: 0xf0e0a0,
+                    side: THREE.DoubleSide,
+                    transparent: true,
+                    opacity: 0.8
+                });
+                const ring = new THREE.Mesh(ringGeometry, ringMaterial);
+                ring.rotation.x = Math.PI / 3;
+                mesh.add(ring);
+            }
+        });
+        // Add ambient light
+        const ambientLight = new THREE.AmbientLight(0x333333);
+        scene.add(ambientLight);
+        // Add directional light (sunlight)
+        const sunLight = new THREE.PointLight(0xffffff, 1.5, 3000);
+        sunLight.position.set(0, 0, 0);
+        scene.add(sunLight);
+        // Position camera
+        camera.position.set(0, 100, 300);
+        controls.update();
+        // UI Controls
+        let isPlaying = true;
+        let speed = 1;
+        const playPauseBtn = document.getElementById('playPauseBtn');
+        const speedSlider = document.getElementById('speedSlider');
+        const infoPanel = document.getElementById('infoPanel');
+        const closeBtn = document.querySelector('.close-btn');
+        playPauseBtn.addEventListener('click', () => {
+            isPlaying = !isPlaying;
+            playPauseBtn.textContent = isPlaying ? '⏸️' : '▶️';
+        });
+        speedSlider.addEventListener('input', (e) => {
+            speed = parseFloat(e.target.value);
+        });
+        closeBtn.addEventListener('click', () => {
+            infoPanel.classList.remove('visible');
+        });
+        // Raycaster for planet selection
+        const raycaster = new THREE.Raycaster();
+        const mouse = new THREE.Vector2();
+        function onMouseClick(event) {
+            // Calculate mouse position in normalized device coordinates
+            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+            mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
+            // Update the picking ray with the camera and mouse position
+            raycaster.setFromCamera(mouse, camera);
+            // Calculate objects intersecting the picking ray
+            const intersects = raycaster.intersectObjects(planets.map(p => p.mesh));
+            if (intersects.length > 0) {
+                const planetMesh = intersects[0].object;
+                const planet = planets.find(p => p.mesh === planetMesh);
+                if (planet) {
+                    showPlanetInfo(planet.data);
+                }
+            }
+        }
+        function showPlanetInfo(planet) {
+            document.getElementById('planetName').textContent = planet.name;
+            document.getElementById('distance').textContent = `${planet.distanceFromSun} million km`;
+            document.getElementById('period').textContent = `${planet.orbitalPeriod} Earth days`;
+            document.getElementById('description').textContent = planet.description;
+            // Set planet icon color
+            const icon = document.getElementById('planetIcon');
+            icon.style.backgroundColor = `#${planet.color.toString(16).padStart(6, '0')}`;
+            infoPanel.classList.add('visible');
+        }
+        window.addEventListener('click', onMouseClick);
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+        // Animation loop
+        function animate() {
+            requestAnimationFrame(animate);
+            if (isPlaying) {
+                // Rotate sun
+                sun.rotation.y += 0.002 * speed;
+                sunGlow.rotation.y += 0.002 * speed;
+                // Update planets
+                planets.forEach(planet => {
+                    // Orbit around sun
+                    planet.angle += planet.speed * speed;
+                    planet.mesh.position.x = Math.cos(planet.angle) * planet.distance;
+                    planet.mesh.position.z = Math.sin(planet.angle) * planet.distance;
+                    // Rotate on axis
+                    planet.mesh.rotation.y += planet.rotationSpeed * speed;
+                });
+            }
+            controls.update();
+            renderer.render(scene, camera);
+        }
+        animate();
+    </script>
+</body>
+</html>