Spaces:
Running
Running
| <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> | |