Spaces:

hkais
/

solar-system-simulation

Running

App Files Files Community

hkais commited on Mar 31, 2025

Commit

b574a73

verified ·

1 Parent(s): 058a215

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +556 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: H Kais
-emoji: 🚀
-colorFrom: purple
 colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: h-kais
+emoji: 🐳
+colorFrom: blue
 colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,556 @@
-<!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 Simulation</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            background-color: #000;
+            color: #fff;
+            font-family: 'Arial', sans-serif;
+            overflow: hidden;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        header {
+            padding: 15px;
+            text-align: center;
+            background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(9,31,121,0.5) 50%, rgba(0,0,0,0) 100%);
+            border-bottom: 1px solid #333;
+        }
+        h1 {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            background: linear-gradient(to right, #fff, #5bc0de);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            text-shadow: 0 0 10px rgba(91, 192, 222, 0.3);
+        }
+        .controls {
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            padding: 10px;
+            background: rgba(0, 0, 0, 0.7);
+            border-bottom: 1px solid #333;
+        }
+        .control-group {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        label {
+            font-size: 0.9rem;
+            color: #ddd;
+        }
+        button {
+            background: rgba(50, 50, 100, 0.5);
+            color: white;
+            border: 1px solid #444;
+            border-radius: 5px;
+            padding: 5px 10px;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        button:hover {
+            background: rgba(70, 70, 150, 0.7);
+            transform: scale(1.05);
+        }
+        button.active {
+            background: rgba(91, 192, 222, 0.7);
+            border-color: #5bc0de;
+        }
+        input[type="range"] {
+            width: 150px;
+            cursor: pointer;
+        }
+        .solar-system {
+            position: relative;
+            width: 100%;
+            height: calc(100vh - 150px);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            perspective: 1000px;
+        }
+        .sun {
+            position: absolute;
+            width: 80px;
+            height: 80px;
+            background: radial-gradient(circle at 30% 30%, #fff, #ffdf00, #ff9900, #ff5e00);
+            border-radius: 50%;
+            box-shadow: 0 0 50px #ff5e00, 0 0 100px #ff9900;
+            z-index: 1;
+            animation: sunPulse 10s infinite alternate;
+        }
+        .orbit {
+            position: absolute;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 50%;
+            transform-style: preserve-3d;
+        }
+        .planet {
+            position: absolute;
+            border-radius: 50%;
+            transform-origin: center;
+        }
+        .planet-label {
+            position: absolute;
+            color: white;
+            font-size: 12px;
+            text-shadow: 0 0 3px black;
+            pointer-events: none;
+            opacity: 1;
+            transition: opacity 0.3s;
+        }
+        .planet-label.hidden {
+            opacity: 0;
+        }
+        /* Mercury */
+        .mercury-orbit {
+            width: 120px;
+            height: 120px;
+            animation: orbitRotation 4s linear infinite;
+        }
+        .mercury {
+            top: 0;
+            left: 50%;
+            width: 5px;
+            height: 5px;
+            background: linear-gradient(135deg, #a9a9a9, #696969);
+            box-shadow: 0 0 5px #a9a9a9;
+        }
+        /* Venus */
+        .venus-orbit {
+            width: 180px;
+            height: 180px;
+            animation: orbitRotation 10s linear infinite;
+        }
+        .venus {
+            top: 0;
+            left: 50%;
+            width: 10px;
+            height: 10px;
+            background: linear-gradient(135deg, #e6c229, #c88f2d);
+            box-shadow: 0 0 5px #e6c229;
+        }
+        /* Earth */
+        .earth-orbit {
+            width: 250px;
+            height: 250px;
+            animation: orbitRotation 15s linear infinite;
+        }
+        .earth {
+            top: 0;
+            left: 50%;
+            width: 11px;
+            height: 11px;
+            background: linear-gradient(135deg, #1da1f2, #0c5a8a);
+            box-shadow: 0 0 5px #1da1f2;
+        }
+        /* Mars */
+        .mars-orbit {
+            width: 320px;
+            height: 320px;
+            animation: orbitRotation 28s linear infinite;
+        }
+        .mars {
+            top: 0;
+            left: 50%;
+            width: 7px;
+            height: 7px;
+            background: linear-gradient(135deg, #ff7b25, #b33a15);
+            box-shadow: 0 0 5px #ff7b25;
+        }
+        /* Jupiter */
+        .jupiter-orbit {
+            width: 450px;
+            height: 450px;
+            animation: orbitRotation 95s linear infinite;
+        }
+        .jupiter {
+            top: 0;
+            left: 50%;
+            width: 20px;
+            height: 20px;
+            background: linear-gradient(135deg, #e8b56d, #b78a3f);
+            box-shadow: 0 0 5px #e8b56d;
+        }
+        /* Saturn */
+        .saturn-orbit {
+            width: 550px;
+            height: 550px;
+            animation: orbitRotation 230s linear infinite;
+        }
+        .saturn {
+            top: 0;
+            left: 50%;
+            width: 17px;
+            height: 17px;
+            background: linear-gradient(135deg, #e8e0b5, #c9b96b);
+            box-shadow: 0 0 5px #e8e0b5;
+        }
+        /* Saturn's rings */
+        .saturn::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) rotate(20deg);
+            width: 30px;
+            height: 5px;
+            background: rgba(210, 210, 170, 0.6);
+            border-radius: 50%;
+            box-shadow: 0 0 5px rgba(210, 210, 170, 0.8);
+        }
+        /* Uranus */
+        .uranus-orbit {
+            width: 650px;
+            height: 650px;
+            animation: orbitRotation 680s linear infinite;
+        }
+        .uranus {
+            top: 0;
+            left: 50%;
+            width: 14px;
+            height: 14px;
+            background: linear-gradient(135deg, #a3d3e0, #5baebd);
+            box-shadow: 0 0 5px #a3d3e0;
+        }
+        /* Neptune */
+        .neptune-orbit {
+            width: 750px;
+            height: 750px;
+            animation: orbitRotation 1330s linear infinite;
+        }
+        .neptune {
+            top: 0;
+            left: 50%;
+            width: 13px;
+            height: 13px;
+            background: linear-gradient(135deg, #4e90b8, #2a5675);
+            box-shadow: 0 0 5px #4e90b8;
+        }
+        @keyframes orbitRotation {
+            from {
+                transform: rotate(0deg);
+            }
+            to {
+                transform: rotate(360deg);
+            }
+        }
+        @keyframes sunPulse {
+            0% {
+                box-shadow: 0 0 50px #ff5e00, 0 0 100px #ff9900;
+            }
+            100% {
+                box-shadow: 0 0 70px #ff5e00, 0 0 140px #ff9900, 0 0 180px #ffdf00;
+            }
+        }
+        .stars {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+        .star {
+            position: absolute;
+            background-color: white;
+            border-radius: 50%;
+            animation: twinkle 1s infinite alternate;
+        }
+        @keyframes twinkle {
+            0% {
+                opacity: 0.3;
+            }
+            100% {
+                opacity: 1;
+            }
+        }
+        footer {
+            text-align: center;
+            padding: 10px;
+            font-size: 0.8rem;
+            color: #666;
+            background: rgba(0, 0, 0, 0.7);
+        }
+        .speed-display {
+            min-width: 30px;
+            text-align: center;
+        }
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            h1 {
+                font-size: 1.8rem;
+            }
+            .controls {
+                flex-wrap: wrap;
+                gap: 10px;
+            }
+            .neptune-orbit {
+                width: 500px;
+                height: 500px;
+            }
+            .uranus-orbit {
+                width: 450px;
+                height: 450px;
+            }
+            .saturn-orbit {
+                width: 400px;
+                height: 400px;
+            }
+            .jupiter-orbit {
+                width: 350px;
+                height: 350px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>Solar System Simulation</h1>
+    </header>
+    <div class="controls">
+        <div class="control-group">
+            <button id="pauseBtn"><i class="fas fa-pause"></i></button>
+            <button id="playBtn" class="active"><i class="fas fa-play"></i></button>
+        </div>
+        <div class="control-group">
+            <label for="speedControl"><i class="fas fa-tachometer-alt"></i> Speed</label>
+            <input type="range" id="speedControl" min="0.1" max="5" step="0.1" value="1">
+            <span class="speed-display" id="speedValue">1x</span>
+        </div>
+        <div class="control-group">
+            <button id="toggleLabels" class="active"><i class="fas fa-tag"></i> Labels</button>
+        </div>
+    </div>
+    <div class="solar-system">
+        <div class="stars" id="stars"></div>
+        <div class="sun"></div>
+        <!-- Mercury -->
+        <div class="orbit mercury-orbit">
+            <div class="planet mercury"></div>
+            <div class="planet-label">Mercury</div>
+        </div>
+        <!-- Venus -->
+        <div class="orbit venus-orbit">
+            <div class="planet venus"></div>
+            <div class="planet-label">Venus</div>
+        </div>
+        <!-- Earth -->
+        <div class="orbit earth-orbit">
+            <div class="planet earth"></div>
+            <div class="planet-label">Earth</div>
+        </div>
+        <!-- Mars -->
+        <div class="orbit mars-orbit">
+            <div class="planet mars"></div>
+            <div class="planet-label">Mars</div>
+        </div>
+        <!-- Jupiter -->
+        <div class="orbit jupiter-orbit">
+            <div class="planet jupiter"></div>
+            <div class="planet-label">Jupiter</div>
+        </div>
+        <!-- Saturn -->
+        <div class="orbit saturn-orbit">
+            <div class="planet saturn"></div>
+            <div class="planet-label">Saturn</div>
+        </div>
+        <!-- Uranus -->
+        <div class="orbit uranus-orbit">
+            <div class="planet uranus"></div>
+            <div class="planet-label">Uranus</div>
+        </div>
+        <!-- Neptune -->
+        <div class="orbit neptune-orbit">
+            <div class="planet neptune"></div>
+            <div class="planet-label">Neptune</div>
+        </div>
+    </div>
+    <footer>
+        Interactive Solar System Simulation | All planetary orbits are to relative scale
+    </footer>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Create stars background
+            const starsContainer = document.getElementById('stars');
+            for (let i = 0; i < 200; i++) {
+                const star = document.createElement('div');
+                star.classList.add('star');
+                star.style.width = `${Math.random() * 2}px`;
+                star.style.height = star.style.width;
+                star.style.left = `${Math.random() * 100}%`;
+                star.style.top = `${Math.random() * 100}%`;
+                star.style.animationDuration = `${2 + Math.random() * 3}s`;
+                star.style.animationDelay = `${Math.random() * 5}s`;
+                starsContainer.appendChild(star);
+            }
+            // Get control elements
+            const playBtn = document.getElementById('playBtn');
+            const pauseBtn = document.getElementById('pauseBtn');
+            const speedControl = document.getElementById('speedControl');
+            const speedValue = document.getElementById('speedValue');
+            const toggleLabels = document.getElementById('toggleLabels');
+            const planetLabels = document.querySelectorAll('.planet-label');
+            // Get all orbit elements
+            const orbits = document.querySelectorAll('.orbit');
+            // Store base animation durations
+            const baseDurations = {};
+            orbits.forEach(orbit => {
+                const style = window.getComputedStyle(orbit);
+                baseDurations[orbit.className.split(' ')[0]] = parseFloat(style.animationDuration);
+            });
+            // Animation control
+            let isPlaying = true;
+            let speedFactor = 1;
+            // Play/pause functionality
+            playBtn.addEventListener('click', function() {
+                if (!isPlaying) {
+                    orbits.forEach(orbit => {
+                        orbit.style.animationPlayState = 'running';
+                    });
+                    isPlaying = true;
+                    playBtn.classList.add('active');
+                    pauseBtn.classList.remove('active');
+                }
+            });
+            pauseBtn.addEventListener('click', function() {
+                if (isPlaying) {
+                    orbits.forEach(orbit => {
+                        orbit.style.animationPlayState = 'paused';
+                    });
+                    isPlaying = false;
+                    pauseBtn.classList.add('active');
+                    playBtn.classList.remove('active');
+                }
+            });
+            // Speed control
+            speedControl.addEventListener('input', function() {
+                speedFactor = parseFloat(this.value);
+                speedValue.textContent = `${speedFactor.toFixed(1)}x`;
+                orbits.forEach(orbit => {
+                    const orbitClass = orbit.className.split(' ')[0];
+                    const baseDuration = baseDurations[orbitClass];
+                    orbit.style.animationDuration = `${baseDuration / speedFactor}s`;
+                });
+            });
+            // Toggle labels
+            toggleLabels.addEventListener('click', function() {
+                const isActive = this.classList.contains('active');
+                this.classList.toggle('active');
+                planetLabels.forEach(label => {
+                    if (isActive) {
+                        label.classList.add('hidden');
+                    } else {
+                        label.classList.remove('hidden');
+                    }
+                });
+            });
+            // Position labels near planets
+            function updateLabelPositions() {
+                planetLabels.forEach(label => {
+                    const orbit = label.parentElement;
+                    const planet = orbit.querySelector('.planet');
+                    const orbitRect = orbit.getBoundingClientRect();
+                    const planetRect = planet.getBoundingClientRect();
+                    // Position label near the planet
+                    const planetCenterX = planetRect.left + planetRect.width / 2;
+                    const planetCenterY = planetRect.top + planetRect.height / 2;
+                    // Adjust position based on planet's position in orbit
+                    const orbitCenterX = orbitRect.left + orbitRect.width / 2;
+                    const orbitCenterY = orbitRect.top + orbitRect.height / 2;
+                    // Determine which side of the orbit the planet is on
+                    const isRight = planetCenterX > orbitCenterX;
+                    label.style.left = `${isRight ? planetCenterX + 15 : planetCenterX - 55}px`;
+                    label.style.top = `${planetCenterY - 10}px`;
+                });
+                requestAnimationFrame(updateLabelPositions);
+            }
+            // Start updating label positions
+            updateLabelPositions();
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>