Spaces:

longdiyao
/

space1

Running

App Files Files Community

longdiyao commited on Apr 7, 2025

Commit

8049a53

verified ·

1 Parent(s): 01ae5c5

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +427 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Space1
-emoji: 📚
-colorFrom: red
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: space1
+emoji: 🐳
+colorFrom: purple
+colorTo: green
 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,427 @@
-<!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 Space Explorer</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        /* Custom CSS for animations and effects */
+        .planet-card {
+            transition: all 0.3s ease;
+            transform-style: preserve-3d;
+        }
+        .planet-card:hover {
+            transform: translateY(-10px) scale(1.05);
+            box-shadow: 0 20px 25px -5px rgba(255, 255, 255, 0.1), 0 10px 10px -5px rgba(255, 255, 255, 0.04);
+        }
+        .star {
+            position: absolute;
+            background-color: white;
+            border-radius: 50%;
+            animation: twinkle var(--duration) infinite ease-in-out;
+        }
+        @keyframes twinkle {
+            0%, 100% { opacity: 0.2; }
+            50% { opacity: 1; }
+        }
+        .spaceship {
+            animation: float 6s ease-in-out infinite;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-20px); }
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
+        }
+    </style>
+</head>
+<body class="gradient-bg text-white min-h-screen font-sans overflow-x-hidden">
+    <!-- Star background -->
+    <div id="stars-container" class="fixed inset-0 overflow-hidden z-0"></div>
+    <!-- Header with animated spaceship -->
+    <header class="relative z-10 py-8 px-4 sm:px-6 lg:px-8">
+        <div class="container mx-auto flex flex-col items-center">
+            <div class="flex items-center mb-6">
+                <i class="fas fa-rocket text-4xl text-purple-400 mr-4 spaceship"></i>
+                <h1 class="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-500">
+                    Space Explorer
+                </h1>
+            </div>
+            <p class="text-lg text-gray-300 max-w-2xl text-center mb-8">
+                Explore our solar system's wonders. Click on planets to discover fascinating facts about each celestial body.
+            </p>
+            <div class="relative w-full max-w-xl">
+                <input
+                    type="text"
+                    id="search-planets"
+                    placeholder="Search planets..."
+                    class="w-full bg-gray-800 bg-opacity-50 border border-gray-700 rounded-full py-3 px-6 text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+                >
+                <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white">
+                    <i class="fas fa-search"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+    <main class="relative z-10 py-8 px-4 sm:px-6 lg:px-8">
+        <!-- Solar System Visualization -->
+        <div class="container mx-auto mb-16">
+            <h2 class="text-2xl font-semibold mb-6 flex items-center">
+                <i class="fas fa-solar-panel mr-3 text-yellow-400"></i>
+                Our Solar System
+            </h2>
+            <div class="relative h-64 md:h-96 w-full mb-12 overflow-hidden rounded-xl bg-black bg-opacity-30 border border-gray-800">
+                <!-- Orbits -->
+                <div class="absolute inset-0 flex items-center justify-center">
+                    <div class="orbit mercury-orbit"></div>
+                    <div class="orbit venus-orbit"></div>
+                    <div class="orbit earth-orbit"></div>
+                    <div class="orbit mars-orbit"></div>
+                    <div class="orbit jupiter-orbit"></div>
+                    <div class="orbit saturn-orbit"></div>
+                    <div class="orbit uranus-orbit"></div>
+                    <div class="orbit neptune-orbit"></div>
+                </div>
+                <!-- Sun -->
+                <div
+                    class="sun absolute left-1/4 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 md:w-20 md:h-20 rounded-full bg-gradient-to-br from-yellow-500 to-red-600 shadow-lg shadow-yellow-500/50 cursor-pointer"
+                    onclick="showPlanetInfo('sun')"
+                ></div>
+                <!-- Planets will be positioned here by JavaScript -->
+            </div>
+            <!-- Planet Cards Grid -->
+            <div id="planet-cards" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                <!-- Cards will be generated by JavaScript -->
+            </div>
+        </div>
+        <!-- Facts Section -->
+        <div class="container mx-auto mb-16">
+            <h2 class="text-2xl font-semibold mb-6 flex items-center">
+                <i class="fas fa-star mr-3 text-blue-400"></i>
+                Space Facts
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="bg-gray-800 bg-opacity-50 p-6 rounded-xl border border-gray-700 hover:border-blue-400 transition-all">
+                    <div class="text-blue-400 text-3xl mb-4">
+                        <i class="fas fa-temperature-high"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Extreme Temperatures</h3>
+                    <p class="text-gray-300">Mercury's surface temperature varies from -173°C at night to 427°C during the day.</p>
+                </div>
+                <div class="bg-gray-800 bg-opacity-50 p-6 rounded-xl border border-gray-700 hover:border-purple-400 transition-all">
+                    <div class="text-purple-400 text-3xl mb-4">
+                        <i class="fas fa-wind"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Powerful Winds</h3>
+                    <p class="text-gray-300">Neptune has the strongest winds in the solar system, reaching speeds of 2,100 km/h.</p>
+                </div>
+                <div class="bg-gray-800 bg-opacity-50 p-6 rounded-xl border border-gray-700 hover:border-yellow-400 transition-all">
+                    <div class="text-yellow-400 text-3xl mb-4">
+                        <i class="fas fa-expand"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Gigantic Size</h3>
+                    <p class="text-gray-300">Jupiter is so large that all other planets in the solar system could fit inside it.</p>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Planet Info Modal -->
+    <div id="planet-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
+        <div class="bg-gray-900 rounded-xl max-w-2xl w-full mx-4 p-6 relative border border-gray-700">
+            <button onclick="closeModal()" class="absolute top-4 right-4 text-gray-400 hover:text-white">
+                <i class="fas fa-times text-2xl"></i>
+            </button>
+            <div class="flex flex-col md:flex-row gap-6">
+                <div class="flex-shrink-0">
+                    <div id="modal-planet-image" class="w-32 h-32 md:w-48 md:h-48 rounded-full"></div>
+                </div>
+                <div>
+                    <h2 id="modal-planet-name" class="text-3xl font-bold mb-2"></h2>
+                    <div id="modal-planet-tags" class="flex flex-wrap gap-2 mb-4"></div>
+                    <p id="modal-planet-description" class="text-gray-300 mb-4"></p>
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <p class="text-gray-400">Distance from Sun</p>
+                            <p id="modal-planet-distance" class="text-lg"></p>
+                        </div>
+                        <div>
+                            <p class="text-gray-400">Diameter</p>
+                            <p id="modal-planet-diameter" class="text-lg"></p>
+                        </div>
+                        <div>
+                            <p class="text-gray-400">Orbital Period</p>
+                            <p id="modal-planet-period" class="text-lg"></p>
+                        </div>
+                        <div>
+                            <p class="text-gray-400">Surface Temp</p>
+                            <p id="modal-planet-temp" class="text-lg"></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <footer class="relative z-10 py-8 px-4 sm:px-6 lg:px-8 border-t border-gray-800">
+        <div class="container mx-auto text-center text-gray-400">
+            <p>© 2023 Space Explorer. All astronomical data is approximate.</p>
+            <div class="flex justify-center space-x-4 mt-4">
+                <a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a>
+                <a href="#" class="hover:text-white"><i class="fab fa-github"></i></a>
+                <a href="#" class="hover:text-white"><i class="fab fa-linkedin"></i></a>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Create stars background
+        function createStars() {
+            const container = document.getElementById('stars-container');
+            const starCount = 200;
+            for (let i = 0; i < starCount; i++) {
+                const star = document.createElement('div');
+                star.classList.add('star');
+                // Random properties for each star
+                const size = Math.random() * 3;
+                const posX = Math.random() * 100;
+                const posY = Math.random() * 100;
+                const duration = 2 + Math.random() * 5;
+                star.style.width = `${size}px`;
+                star.style.height = `${size}px`;
+                star.style.left = `${posX}%`;
+                star.style.top = `${posY}%`;
+                star.style.setProperty('--duration', `${duration}s`);
+                container.appendChild(star);
+            }
+        }
+        // Planet data
+        const planets = [
+            {
+                name: "Mercury",
+                color: "bg-gray-400",
+                size: "w-4 h-4 md:w-6 md:h-6",
+                position: "left-[32%] top-1/2",
+                description: "The smallest planet in our solar system and closest to the Sun. Mercury is only slightly larger than Earth's Moon.",
+                distance: "57.9 million km",
+                diameter: "4,879 km",
+                orbitalPeriod: "88 Earth days",
+                temperature: "-173°C to 427°C",
+                tags: ["Rocky", "No moons", "Fastest orbit"],
+                icon: "fas fa-temperature-low"
+            },
+            {
+                name: "Venus",
+                color: "bg-yellow-200",
+                size: "w-6 h-6 md:w-8 md:h-8",
+                position: "left-[36%] top-1/2",
+                description: "Similar in size to Earth, Venus has a toxic atmosphere of carbon dioxide with clouds of sulfuric acid.",
+                distance: "108.2 million km",
+                diameter: "12,104 km",
+                orbitalPeriod: "225 Earth days",
+                temperature: "462°C",
+                tags: ["Hottest planet", "Retrograde rotation", "No moons"],
+                icon: "fas fa-fire"
+            },
+            {
+                name: "Earth",
+                color: "bg-blue-500",
+                size: "w-6 h-6 md:w-8 md:h-8",
+                position: "left-[40%] top-1/2",
+                description: "Our home planet is the only known place in the universe confirmed to host life, with liquid water on the surface.",
+                distance: "149.6 million km",
+                diameter: "12,742 km",
+                orbitalPeriod: "365.25 days",
+                temperature: "-88°C to 58°C",
+                tags: ["Water", "Life", "Moon"],
+                icon: "fas fa-globe-americas"
+            },
+            {
+                name: "Mars",
+                color: "bg-red-400",
+                size: "w-5 h-5 md:w-7 md:h-7",
+                position: "left-[44%] top-1/2",
+                description: "The Red Planet is dusty, cold desert world with a very thin atmosphere. There is strong evidence Mars was wetter in the past.",
+                distance: "227.9 million km",
+                diameter: "6,779 km",
+                orbitalPeriod: "687 Earth days",
+                temperature: "-153°C to 20°C",
+                tags: ["Red planet", "2 moons", "Olympus Mons"],
+                icon: "fas fa-mountain"
+            },
+            {
+                name: "Jupiter",
+                color: "bg-yellow-600",
+                size: "w-10 h-10 md:w-14 md:h-14",
+                position: "left-[50%] top-1/2",
+                description: "The largest planet in our solar system, a gas giant with a Great Red Spot that's a storm larger than Earth.",
+                distance: "778.3 million km",
+                diameter: "139,820 km",
+                orbitalPeriod: "12 Earth years",
+                temperature: "-108°C",
+                tags: ["Gas giant", "79 moons", "Great Red Spot"],
+                icon: "fas fa-ring"
+            },
+            {
+                name: "Saturn",
+                color: "bg-yellow-300",
+                size: "w-9 h-9 md:w-12 md:h-12",
+                position: "left-[56%] top-1/2",
+                description: "Famous for its beautiful ring system, Saturn is a gas giant made mostly of hydrogen and helium.",
+                distance: "1.4 billion km",
+                diameter: "116,460 km",
+                orbitalPeriod: "29 Earth years",
+                temperature: "-139°C",
+                tags: ["Rings", "82 moons", "Gas giant"],
+                icon: "fas fa-ring"
+            },
+            {
+                name: "Uranus",
+                color: "bg-teal-300",
+                size: "w-7 h-7 md:w-9 md:h-9",
+                position: "left-[62%] top-1/2",
+                description: "An ice giant that rotates on its side, Uranus has a blue-green color from methane in its atmosphere.",
+                distance: "2.9 billion km",
+                diameter: "50,724 km",
+                orbitalPeriod: "84 Earth years",
+                temperature: "-197°C",
+                tags: ["Ice giant", "Sideways rotation", "13 rings"],
+                icon: "fas fa-icicles"
+            },
+            {
+                name: "Neptune",
+                color: "bg-blue-600",
+                size: "w-7 h-7 md:w-9 md:h-9",
+                position: "left-[68%] top-1/2",
+                description: "The windiest planet with the strongest winds in the solar system. Neptune was the first planet located through mathematical calculations.",
+                distance: "4.5 billion km",
+                diameter: "49,244 km",
+                orbitalPeriod: "165 Earth years",
+                temperature: "-201°C",
+                tags: ["Windiest", "14 moons", "Great Dark Spot"],
+                icon: "fas fa-wind"
+            },
+            {
+                name: "Sun",
+                color: "bg-gradient-to-br from-yellow-500 to-red-600",
+                size: "w-16 h-16 md:w-20 md:h-20",
+                position: "left-1/4 top-1/2",
+                description: "The star at the center of our solar system. It accounts for 99.86% of the mass in the solar system and is nearly a perfect sphere of hot plasma.",
+                distance: "Center of solar system",
+                diameter: "1.39 million km",
+                orbitalPeriod: "225-250 million years (galactic orbit)",
+                temperature: "5,500°C (surface), 15 million°C (core)",
+                tags: ["Star", "G2V type", "Solar flares"],
+                icon: "fas fa-sun"
+            }
+        ];
+        // Position planets in the solar system visualization
+        function positionPlanets() {
+            const solarSystem = document.querySelector('.relative.h-64');
+            planets.forEach(planet => {
+                if (planet.name === "Sun") return; // Sun is already in the HTML
+                const planetEl = document.createElement('div');
+                planetEl.className = `planet absolute ${planet.position} transform -translate-y-1/2 rounded-full ${planet.color} ${planet.size} cursor-pointer shadow-md`;
+                planetEl.setAttribute('onclick', `showPlanetInfo('${planet.name.toLowerCase()}')`);
+                solarSystem.appendChild(planetEl);
+            });
+        }
+        // Generate planet cards
+        function generatePlanetCards() {
+            const container = document.getElementById('planet-cards');
+            planets.forEach(planet => {
+                const card = document.createElement('div');
+                card.className = 'planet-card bg-gray-800 bg-opacity-50 rounded-xl overflow-hidden border border-gray-700 hover:border-purple-500 cursor-pointer';
+                card.setAttribute('onclick', `showPlanetInfo('${planet.name.toLowerCase()}')`);
+                card.innerHTML = `
+                    <div class="h-40 ${planet.color} flex items-center justify-center">
+                        <i class="${planet.icon} text-4xl text-white opacity-80"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-semibold mb-2">${planet.name}</h3>
+                        <div class="flex flex-wrap gap-2 mb-3">
+                            ${planet.tags.map(tag => `<span class="text-xs px-2 py-1 bg-gray-700 rounded-full">${tag}</span>`).join('')}
+                        </div>
+                        <p class="text-gray-300 text-sm line-clamp-2">${planet.description}</p>
+                    </div>
+                `;
+                container.appendChild(card);
+            });
+        }
+        // Show planet info modal
+        function showPlanetInfo(planetName) {
+            const planet = planets.find(p => p.name.toLowerCase() === planetName);
+            if (!planet) return;
+            document.getElementById('modal-planet-name').textContent = planet.name;
+            document.getElementById('modal-planet-description').textContent = planet.description;
+            document.getElementById('modal-planet-distance').textContent = planet.distance;
+            document.getElementById('modal-planet-diameter').textContent = planet.diameter;
+            document.getElementById('modal-planet-period').textContent = planet.orbitalPeriod;
+            document.getElementById('modal-planet-temp').textContent = planet.temperature;
+            const tagsContainer = document.getElementById('modal-planet-tags');
+            tagsContainer.innerHTML = planet.tags.map(tag =>
+                `<span class="text-sm px-3 py-1 bg-gray-800 rounded-full">${tag}</span>`
+            ).join('');
+            const planetImage = document.getElementById('modal-planet-image');
+            planetImage.className = `w-32 h-32 md:w-48 md:h-48 rounded-full ${planet.color} flex items-center justify-center shadow-lg`;
+            planetImage.innerHTML = `<i class="${planet.icon} text-4xl text-white"></i>`;
+            document.getElementById('planet-modal').classList.remove('hidden');
+        }
+        // Close modal
+        function closeModal() {
+            document.getElementById('planet-modal').classList.add('hidden');
+        }
+        // Search functionality
+        document.getElementById('search-planets').addEventListener('input', function(e) {
+            const searchTerm = e.target.value.toLowerCase();
+            const cards = document.querySelectorAll('.planet-card');
+            cards.forEach(card => {
+                const planetName = card.querySelector('h3').textContent.toLowerCase();
+                if (planetName.includes(searchTerm)) {
+                    card.classList.remove('hidden');
+                } else {
+                    card.classList.add('hidden');
+                }
+            });
+        });
+        // Initialize everything when DOM is loaded
+        document.addEventListener('DOMContentLoaded', function() {
+            createStars();
+            positionPlanets();
+            generatePlanetCards();
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=longdiyao/space1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>