Spaces:

ProCreations
/

savenasa

Running

App Files Files Community

ProCreations commited on Aug 20

Commit

61c22dd

verified ·

1 Parent(s): cf238e8

Update index.html

Browse files

Files changed (1) hide show

index.html +606 -18

index.html CHANGED Viewed

@@ -1,19 +1,607 @@
-<!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>Space Matters | Save NASA's Future</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Arial', sans-serif;
+            background: #000;
+            color: #fff;
+            overflow-x: hidden;
+            position: relative;
+        }
+        #starfield {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+        }
+        .content {
+            position: relative;
+            z-index: 10;
+            min-height: 100vh;
+        }
+        .hero {
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            padding: 20px;
+            background: radial-gradient(ellipse at center, rgba(20, 20, 40, 0.4) 0%, transparent 70%);
+        }
+        h1 {
+            font-size: clamp(3rem, 8vw, 6rem);
+            margin-bottom: 20px;
+            text-shadow: 0 0 30px rgba(100, 150, 255, 0.8);
+            animation: glow 3s ease-in-out infinite alternate;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #667eea 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        @keyframes glow {
+            from { text-shadow: 0 0 20px rgba(100, 150, 255, 0.5); }
+            to { text-shadow: 0 0 40px rgba(100, 150, 255, 1), 0 0 60px rgba(100, 150, 255, 0.5); }
+        }
+        .subtitle {
+            font-size: clamp(1.2rem, 3vw, 1.8rem);
+            opacity: 0.9;
+            margin-bottom: 40px;
+            animation: fadeInUp 1s ease-out;
+        }
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 0.9;
+                transform: translateY(0);
+            }
+        }
+        .cta-button {
+            padding: 15px 40px;
+            font-size: 1.2rem;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border: none;
+            border-radius: 50px;
+            color: white;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            display: inline-block;
+            animation: pulse 2s infinite;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+        .cta-button:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.6);
+        }
+        .section {
+            padding: 80px 20px;
+            max-width: 1200px;
+            margin: 0 auto;
+            position: relative;
+        }
+        .section::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 100px;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, #667eea, transparent);
+            animation: scan 3s linear infinite;
+        }
+        @keyframes scan {
+            0% { width: 0; }
+            50% { width: 200px; }
+            100% { width: 0; }
+        }
+        h2 {
+            font-size: clamp(2rem, 5vw, 3rem);
+            margin-bottom: 30px;
+            text-align: center;
+            background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 30px;
+            margin: 50px 0;
+        }
+        .stat-card {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 15px;
+            padding: 30px;
+            text-align: center;
+            transition: all 0.3s ease;
+            animation: fadeIn 1s ease-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .stat-card:hover {
+            transform: translateY(-10px);
+            background: rgba(255, 255, 255, 0.1);
+            box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
+        }
+        .stat-number {
+            font-size: clamp(2rem, 4vw, 3rem);
+            font-weight: bold;
+            color: #f093fb;
+            margin-bottom: 10px;
+            text-shadow: 0 0 20px rgba(240, 147, 251, 0.5);
+        }
+        .stat-label {
+            font-size: 1.1rem;
+            opacity: 0.8;
+        }
+        .warning-box {
+            background: linear-gradient(135deg, rgba(244, 67, 54, 0.1), rgba(244, 67, 54, 0.05));
+            border: 2px solid rgba(244, 67, 54, 0.5);
+            border-radius: 15px;
+            padding: 30px;
+            margin: 40px 0;
+            animation: warningPulse 2s ease-in-out infinite;
+        }
+        @keyframes warningPulse {
+            0%, 100% { border-color: rgba(244, 67, 54, 0.5); }
+            50% { border-color: rgba(244, 67, 54, 1); box-shadow: 0 0 30px rgba(244, 67, 54, 0.3); }
+        }
+        .impact-list {
+            list-style: none;
+            padding: 20px 0;
+        }
+        .impact-list li {
+            padding: 15px 0;
+            padding-left: 40px;
+            position: relative;
+            font-size: 1.1rem;
+            line-height: 1.6;
+            opacity: 0.9;
+        }
+        .impact-list li::before {
+            content: '🚀';
+            position: absolute;
+            left: 0;
+            animation: float 3s ease-in-out infinite;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-5px); }
+        }
+        .quote {
+            font-style: italic;
+            font-size: 1.3rem;
+            text-align: center;
+            padding: 40px;
+            border-left: 4px solid #667eea;
+            margin: 40px 0;
+            background: rgba(102, 126, 234, 0.05);
+            position: relative;
+        }
+        .quote::before {
+            content: '"';
+            font-size: 4rem;
+            position: absolute;
+            top: -10px;
+            left: 20px;
+            color: #667eea;
+            opacity: 0.3;
+        }
+        .footer {
+            text-align: center;
+            padding: 50px 20px;
+            background: linear-gradient(to top, rgba(20, 20, 40, 0.8), transparent);
+        }
+        .footer h3 {
+            font-size: 2rem;
+            margin-bottom: 20px;
+            color: #f093fb;
+        }
+        .social-links {
+            display: flex;
+            justify-content: center;
+            gap: 30px;
+            margin-top: 30px;
+        }
+        .social-links a {
+            color: #667eea;
+            text-decoration: none;
+            font-size: 1.1rem;
+            transition: all 0.3s ease;
+        }
+        .social-links a:hover {
+            color: #f093fb;
+            transform: scale(1.1);
+        }
+        /* Shooting star animations */
+        .shooting-star {
+            position: fixed;
+            width: 2px;
+            height: 2px;
+            background: white;
+            box-shadow: 0 0 10px white;
+            animation: shoot 3s linear infinite;
+            opacity: 0;
+        }
+        @keyframes shoot {
+            0% {
+                transform: translateX(0) translateY(0);
+                opacity: 0;
+            }
+            10% {
+                opacity: 1;
+            }
+            90% {
+                opacity: 1;
+            }
+            100% {
+                transform: translateX(-1000px) translateY(1000px);
+                opacity: 0;
+            }
+        }
+        @media (max-width: 768px) {
+            .hero {
+                padding: 40px 20px;
+            }
+            .stats-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <canvas id="starfield"></canvas>
+    <div class="content">
+        <section class="hero">
+            <h1>SPACE MATTERS</h1>
+            <p class="subtitle">NASA faces its largest budget cut in history. Our future in the stars is at stake.</p>
+            <a href="#action" class="cta-button">Take Action Now</a>
+        </section>
+        <section class="section">
+            <h2>The Crisis We Face</h2>
+            <div class="warning-box">
+                <h3 style="color: #f44336; text-align: center; margin-bottom: 20px;">⚠️ UNPRECEDENTED CUTS PROPOSED ⚠️</h3>
+                <div class="stats-grid">
+                    <div class="stat-card">
+                        <div class="stat-number">24%</div>
+                        <div class="stat-label">Overall NASA Budget Cut</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-number">47%</div>
+                        <div class="stat-label">Science Funding Slashed</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-number">40+</div>
+                        <div class="stat-label">Missions to be Cancelled</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-number">5,538</div>
+                        <div class="stat-label">Jobs to be Eliminated</div>
+                    </div>
+                </div>
+            </div>
+            <p style="font-size: 1.2rem; line-height: 1.8; opacity: 0.9; margin-top: 40px;">
+                The proposed 2026 budget would reduce NASA's funding from $24.9 billion to just $18.8 billion -
+                the lowest level since 1961 when adjusted for inflation. This isn't just numbers on a spreadsheet;
+                it's the potential end of American leadership in space exploration.
+            </p>
+        </section>
+        <section class="section">
+            <h2>What We Stand to Lose</h2>
+            <ul class="impact-list">
+                <li>Mars Sample Return mission - our chance to study Martian soil for signs of life</li>
+                <li>NEO Surveyor - the mission designed to track potentially dangerous asteroids</li>
+                <li>Chandra X-Ray Observatory - our window into the high-energy universe</li>
+                <li>Climate monitoring satellites - critical for tracking and predicting extreme weather</li>
+                <li>53% cut to Earth science programs - limiting our ability to monitor wildfires, hurricanes, and climate change</li>
+                <li>The smallest NASA workforce since before the Mercury, Gemini, and Apollo programs</li>
+            </ul>
+            <div class="quote">
+                "This would represent the smallest NASA workforce since mid-1960, before the first American had launched into space.
+                It's not just about missions - it's about the people who make discovery possible."
+                <br><span style="font-size: 0.9rem; opacity: 0.7;">- Casey Dreier, The Planetary Society</span>
+            </div>
+        </section>
+        <section class="section">
+            <h2>NASA's Incredible Return on Investment</h2>
+            <div class="stats-grid">
+                <div class="stat-card">
+                    <div class="stat-number">$75.6B</div>
+                    <div class="stat-label">Economic Output Generated (2023)</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-number">304,803</div>
+                    <div class="stat-label">Jobs Supported Nationwide</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-number">$9.5B</div>
+                    <div class="stat-label">Tax Revenue Generated</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-number">$7-40</div>
+                    <div class="stat-label">Return for Every $1 Invested</div>
+                </div>
+            </div>
+            <p style="font-size: 1.2rem; line-height: 1.8; opacity: 0.9; margin-top: 40px;">
+                NASA isn't just about exploring space - it's an economic powerhouse. From just a $25 billion budget,
+                NASA generated over $75 billion in economic activity. Every dollar invested in NASA returns between
+                $7 and $40 to the economy through technological innovation, job creation, and scientific advancement.
+            </p>
+        </section>
+        <section class="section">
+            <h2>Technologies NASA Gave Us</h2>
+            <ul class="impact-list">
+                <li>GPS navigation that guides us every day</li>
+                <li>CAT scans and LED lights used in medical treatments</li>
+                <li>Water purification systems saving lives worldwide</li>
+                <li>Memory foam improving comfort and safety</li>
+                <li>Miniaturized electronics powering our smartphones</li>
+                <li>Weather satellites predicting hurricanes and saving thousands of lives</li>
+                <li>Over 2,000 spinoff technologies benefiting humanity</li>
+            </ul>
+        </section>
+        <section class="section" id="action">
+            <h2>What You Can Do</h2>
+            <div style="background: rgba(102, 126, 234, 0.1); padding: 40px; border-radius: 15px; margin-top: 30px;">
+                <h3 style="color: #f093fb; margin-bottom: 20px;">Take Action Today:</h3>
+                <ul class="impact-list">
+                    <li>Contact your representatives in Congress - they control the budget</li>
+                    <li>Share this message on social media with #SaveNASA</li>
+                    <li>Join The Planetary Society and other space advocacy groups</li>
+                    <li>Educate others about NASA's incredible return on investment</li>
+                    <li>Attend town halls and ask your representatives about NASA funding</li>
+                </ul>
+                <div style="text-align: center; margin-top: 30px;">
+                    <a href="https://www.planetary.org/get-involved/be-a-space-advocate" class="cta-button" target="_blank">
+                        Become a Space Advocate
+                    </a>
+                </div>
+            </div>
+        </section>
+        <footer class="footer">
+            <h3>The Universe is Calling</h3>
+            <p style="font-size: 1.1rem; opacity: 0.8; margin: 20px 0;">
+                For less than half a penny of every tax dollar, NASA has taken us to the Moon,
+                explored Mars, and revealed the secrets of the cosmos. Don't let this legacy end.
+            </p>
+            <div class="social-links">
+                <a href="https://twitter.com/intent/tweet?text=NASA%20faces%20its%20largest%20budget%20cut%20in%20history.%20We%20must%20act%20now%20to%20save%20our%20space%20program.%20%23SaveNASA" target="_blank">Share on Twitter</a>
+                <a href="https://www.nasa.gov" target="_blank">Visit NASA</a>
+                <a href="https://www.planetary.org" target="_blank">The Planetary Society</a>
+            </div>
+        </footer>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script>
+        // Three.js Starfield Animation
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('starfield'), alpha: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        // Create stars
+        const starsGeometry = new THREE.BufferGeometry();
+        const starsMaterial = new THREE.PointsMaterial({
+            color: 0xFFFFFF,
+            size: 2,
+            transparent: true,
+            opacity: 0.8,
+            sizeAttenuation: true
+        });
+        const starsVertices = [];
+        const starsVelocities = [];
+        for (let i = 0; i < 5000; 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);
+            // Store velocity for twinkling effect
+            starsVelocities.push(Math.random() * 0.01);
+        }
+        starsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starsVertices, 3));
+        const stars = new THREE.Points(starsGeometry, starsMaterial);
+        scene.add(stars);
+        camera.position.z = 5;
+        // Create shooting stars
+        class ShootingStar {
+            constructor() {
+                this.reset();
+                this.mesh = this.createMesh();
+                scene.add(this.mesh);
+            }
+            createMesh() {
+                const geometry = new THREE.BufferGeometry();
+                const material = new THREE.LineBasicMaterial({
+                    color: 0xFFFFFF,
+                    transparent: true,
+                    opacity: 0.8
+                });
+                const positions = new Float32Array(6); // 2 points, 3 coordinates each
+                geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+                return new THREE.Line(geometry, material);
+            }
+            reset() {
+                this.x = Math.random() * 1000 - 500;
+                this.y = Math.random() * 500 + 200;
+                this.z = Math.random() * 500 - 250;
+                this.speed = Math.random() * 50 + 20;
+                this.length = Math.random() * 100 + 50;
+                this.opacity = Math.random() * 0.5 + 0.5;
+            }
+            update(deltaTime) {
+                this.x -= this.speed * deltaTime;
+                this.y -= this.speed * deltaTime * 0.5;
+                const positions = this.mesh.geometry.attributes.position.array;
+                positions[0] = this.x;
+                positions[1] = this.y;
+                positions[2] = this.z;
+                positions[3] = this.x + this.length;
+                positions[4] = this.y + this.length * 0.5;
+                positions[5] = this.z;
+                this.mesh.geometry.attributes.position.needsUpdate = true;
+                this.mesh.material.opacity = this.opacity * (1 - (500 - this.x) / 1000);
+                if (this.x < -500 || this.y < -500) {
+                    this.reset();
+                }
+            }
+        }
+        const shootingStars = [];
+        for (let i = 0; i < 5; i++) {
+            shootingStars.push(new ShootingStar());
+        }
+        let clock = new THREE.Clock();
+        function animate() {
+            requestAnimationFrame(animate);
+            const deltaTime = clock.getDelta();
+            const elapsedTime = clock.getElapsedTime();
+            // Rotate stars slowly
+            stars.rotation.y += 0.0001;
+            stars.rotation.x += 0.00005;
+            // Twinkle effect
+            const positions = stars.geometry.attributes.position.array;
+            for (let i = 0; i < positions.length; i += 3) {
+                const originalY = positions[i + 1];
+                positions[i + 1] = originalY + Math.sin(elapsedTime + i) * 0.1;
+            }
+            stars.geometry.attributes.position.needsUpdate = true;
+            // Update shooting stars
+            shootingStars.forEach(star => star.update(deltaTime));
+            // Pulse opacity for twinkling
+            stars.material.opacity = 0.6 + Math.sin(elapsedTime * 2) * 0.2;
+            renderer.render(scene, camera);
+        }
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+        animate();
+        // Add CSS shooting stars for extra effect
+        function createCSSShootingStar() {
+            const star = document.createElement('div');
+            star.className = 'shooting-star';
+            star.style.top = Math.random() * window.innerHeight * 0.5 + 'px';
+            star.style.left = window.innerWidth + 'px';
+            star.style.animationDelay = Math.random() * 5 + 's';
+            star.style.animationDuration = Math.random() * 2 + 2 + 's';
+            document.body.appendChild(star);
+            setTimeout(() => {
+                star.remove();
+            }, 5000);
+        }
+        // Create CSS shooting stars periodically
+        setInterval(createCSSShootingStar, 3000);
+        // Parallax effect on scroll
+        window.addEventListener('scroll', () => {
+            const scrolled = window.pageYOffset;
+            camera.position.y = scrolled * 0.0005;
+        });
+    </script>
+</body>
 </html>