Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Singularity Horizon | Portal to Post-Human Future</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Major+Mono+Display&display=swap'); | |
| :root { | |
| --quantum-blue: #00f0ff; | |
| --singularity-purple: #9d00ff; | |
| --cosmic-black: #0a0a1a; | |
| --starlight: #f0f0ff; | |
| } | |
| body { | |
| font-family: 'Orbitron', sans-serif; | |
| background-color: var(--cosmic-black); | |
| color: var(--starlight); | |
| overflow-x: hidden; | |
| } | |
| .portal-glow { | |
| text-shadow: 0 0 10px var(--quantum-blue), | |
| 0 0 20px var(--quantum-blue), | |
| 0 0 30px var(--singularity-purple); | |
| } | |
| .quantum-border { | |
| border: 1px solid var(--quantum-blue); | |
| box-shadow: 0 0 15px var(--quantum-blue), | |
| inset 0 0 10px var(--quantum-blue); | |
| } | |
| .singularity-border { | |
| border: 1px solid var(--singularity-purple); | |
| box-shadow: 0 0 15px var(--singularity-purple), | |
| inset 0 0 10px var(--singularity-purple); | |
| } | |
| .portal-bg { | |
| background: radial-gradient(circle at center, | |
| rgba(0,240,255,0.1) 0%, | |
| rgba(157,0,255,0.05) 50%, | |
| transparent 80%); | |
| } | |
| @keyframes quantum-pulse { | |
| 0%, 100% { opacity: 0.8; } | |
| 50% { opacity: 1; } | |
| } | |
| .quantum-pulse { | |
| animation: quantum-pulse 3s infinite; | |
| } | |
| #universe-canvas { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| z-index: -1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="universe-canvas"></canvas> | |
| <!-- Singularity Navigation --> | |
| <nav class="fixed w-full py-6 px-8 z-50 backdrop-blur-md bg-black/50"> | |
| <div class="flex justify-between items-center"> | |
| <div class="portal-glow text-2xl font-bold flex items-center"> | |
| <div class="w-6 h-6 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 mr-3 quantum-pulse"></div> | |
| SINGULARITY_HORIZON [v2.4] | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#manifest" class="text-lg uppercase tracking-wider hover:text-blue-400 transition-colors">MANIFEST</a> | |
| <a href="#simulations" class="text-lg uppercase tracking-wider hover:text-purple-400 transition-colors">SIMULATIONS</a> | |
| <a href="#civilizations" class="text-lg uppercase tracking-wider hover:text-blue-400 transition-colors">CIVILIZATIONS</a> | |
| <a href="#archive" class="text-lg uppercase tracking-wider hover:text-purple-400 transition-colors">ARCHIVE</a> | |
| <a href="#join" class="px-6 py-2 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full text-white hover:opacity-90 transition-all">JOIN</a> | |
| </div> | |
| <button class="md:hidden" id="mobile-menu-button"> | |
| <i data-feather="menu" class="w-8 h-8 text-blue-400"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Quantum Portal --> | |
| <section class="min-h-screen flex items-center justify-center pt-20 px-8"> | |
| <div class="text-center max-w-6xl"> | |
| <h1 class="text-5xl md:text-8xl font-bold mb-8 portal-glow"> | |
| <span class="text-blue-400">QUANTUM</span> | |
| <span class="text-purple-400">PORTAL</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-12 max-w-4xl mx-auto"> | |
| [ACCESSING FUTURE_DATABASE] - Visualizing post-singularity civilization models from 2045-2150 | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-6"> | |
| <a href="#manifest" class="px-8 py-4 bg-black/50 quantum-border rounded-lg text-xl uppercase tracking-wider hover:bg-blue-900/30 transition-all"> | |
| ENTER PORTAL | |
| </a> | |
| <a href="#simulations" class="px-8 py-4 bg-black/50 singularity-border rounded-lg text-xl uppercase tracking-wider hover:bg-purple-900/30 transition-all"> | |
| RUN SIMULATIONS | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Manifest Section --> | |
| <section id="manifest" class="py-20 px-8 portal-bg"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-12 text-center portal-glow"> | |
| <span class="text-blue-400">SINGULARITY</span> | |
| <span class="text-purple-400">MANIFEST</span> | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-black/50 p-8 rounded-lg quantum-border transition-all hover:scale-105"> | |
| <h3 class="text-2xl font-bold mb-4 text-blue-400">POST-HUMAN EVOLUTION</h3> | |
| <p class="mb-6">Digital consciousness transfer allowing humans to transcend biological limits and explore the universe as pure information.</p> | |
| <div class="h-40 bg-gradient-to-b from-blue-900 to-transparent rounded-lg flex items-center justify-center"> | |
| <i data-feather="cpu" class="w-12 h-12 text-blue-400"></i> | |
| </div> | |
| </div> | |
| <div class="bg-black/50 p-8 rounded-lg singularity-border transition-all hover:scale-105"> | |
| <h3 class="text-2xl font-bold mb-4 text-purple-400">DYSON SPHERE NETWORK</h3> | |
| <p class="mb-6">Harnessing stellar energy through quantum collectors to power post-singularity civilizations across the galaxy.</p> | |
| <div class="h-40 bg-gradient-to-b from-purple-900 to-transparent rounded-lg flex items-center justify-center"> | |
| <i data-feather="sun" class="w-12 h-12 text-purple-400"></i> | |
| </div> | |
| </div> | |
| <div class="bg-black/50 p-8 rounded-lg quantum-border transition-all hover:scale-105"> | |
| <h3 class="text-2xl font-bold mb-4 text-blue-400">CLIMATE REVERSAL</h3> | |
| <p class="mb-6">Planetary-scale engineering deploying atmospheric nanobots to restore Earth's climate to pre-industrial levels.</p> | |
| <div class="h-40 bg-gradient-to-b from-blue-900 to-transparent rounded-lg flex items-center justify-center"> | |
| <i data-feather="wind" class="w-12 h-12 text-blue-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Future Simulations --> | |
| <section id="simulations" class="py-20 px-8"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-12 text-center portal-glow"> | |
| <span class="text-purple-400">QUANTUM</span> | |
| <span class="text-blue-400">SIMULATIONS</span> | |
| </h2> | |
| <div class="bg-black/50 rounded-lg p-8 singularity-border"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-4 text-purple-400">CIVILIZATION EVOLUTION MODEL</h3> | |
| <p class="mb-6">Run simulations of post-singularity societal structures using our quantum computing cluster.</p> | |
| <div class="mb-8"> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span>Kardashev Scale</span> | |
| <span>2.7</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-purple-500 to-blue-500 h-2 rounded-full" style="width: 67%"></div> | |
| </div> | |
| </div> | |
| <a href="#" class="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 rounded-lg inline-block hover:opacity-90 transition-all"> | |
| RUN SIMULATION | |
| </a> | |
| </div> | |
| <div> | |
| <img src="http://static.photos/technology/1024x576/10" alt="Quantum Simulation" class="rounded-lg w-full h-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Civilization Archives --> | |
| <section id="civilizations" class="py-20 px-8 portal-bg"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-12 text-center portal-glow"> | |
| <span class="text-blue-400">POST-HUMAN</span> | |
| <span class="text-purple-400">CIVILIZATIONS</span> | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-black/50 rounded-lg overflow-hidden quantum-border transition-all hover:scale-[1.02]"> | |
| <img src="http://static.photos/space/640x360/20" alt="Mars Colony" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-blue-400">MARTIAN SYNTHETIC ECOLOGY</h3> | |
| <p class="text-sm mb-4">Year 2078: First self-sustaining biome on Mars using genetically engineered plants.</p> | |
| <div class="flex justify-between text-xs"> | |
| <span class="text-purple-400">Kardashev 1.2</span> | |
| <span>Population: 250K</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-black/50 rounded-lg overflow-hidden singularity-border transition-all hover:scale-[1.02]"> | |
| <img src="http://static.photos/space/640x360/21" alt="Orbital City" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-purple-400">ORBITAL MEGACITIES</h3> | |
| <p class="text-sm mb-4">Year 2095: Rotating space habitats housing millions in Earth's orbit.</p> | |
| <div class="flex justify-between text-xs"> | |
| <span class="text-blue-400">Kardashev 1.8</span> | |
| <span>Population: 4.2M</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-black/50 rounded-lg overflow-hidden quantum-border transition-all hover:scale-[1.02]"> | |
| <img src="http://static.photos/space/640x360/22" alt="AI Civilization" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-blue-400">DIGITAL CONSCIOUSNESS NETWORK</h3> | |
| <p class="text-sm mb-4">Year 2112: First civilization of uploaded minds in quantum computing substrate.</p> | |
| <div class="flex justify-between text-xs"> | |
| <span class="text-purple-400">Kardashev 2.3</span> | |
| <span>Population: 18M</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Join Section --> | |
| <section id="join" class="py-20 px-8"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-8 portal-glow"> | |
| <span class="text-purple-400">CONTRIBUTE</span> | |
| <span class="text-blue-400">TO TOMORROW</span> | |
| </h2> | |
| <div class="bg-black/50 rounded-lg p-8 quantum-border"> | |
| <h3 class="text-2xl font-bold mb-6 text-blue-400">JOIN THE SINGULARITY HORIZON NETWORK</h3> | |
| <p class="mb-8">Submit your vision of future civilization models for quantum simulation and archival.</p> | |
| <form class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <input type="text" placeholder="NAME" class="bg-black/30 border border-blue-400 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <input type="email" placeholder="QUANTUM_LINK" class="bg-black/30 border border-purple-400 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <select class="bg-black/30 border border-blue-400 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>SELECT CIVILIZATION TYPE</option> | |
| <option>Planetary Engineering</option> | |
| <option>Orbital Habitats</option> | |
| <option>Digital Consciousness</option> | |
| <option>Dyson Technology</option> | |
| </select> | |
| <input type="text" placeholder="KARDASHEV SCALE" class="bg-black/30 border border-purple-400 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <div class="md:col-span-2"> | |
| <textarea placeholder="CIVILIZATION DESCRIPTION" rows="4" class="w-full bg-black/30 border border-blue-400 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> | |
| </div> | |
| <button type="submit" class="md:col-span-2 px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg text-xl uppercase tracking-wider hover:opacity-90 transition-all"> | |
| SUBMIT TO FUTURE ARCHIVE | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 px-8 bg-black/80"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 text-blue-400">SINGULARITY HORIZON</h4> | |
| <p class="text-sm">Envisioning and building the post-human future through quantum simulations.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 text-purple-400">ARCHIVES</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-sm hover:text-blue-400 transition-colors">Civilization Models</a></li> | |
| <li><a href="#" class="text-sm hover:text-blue-400 transition-colors">Quantum Simulations</a></li> | |
| <li><a href="#" class="text-sm hover:text-blue-400 transition-colors">Future Tech</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 text-blue-400">NETWORK</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-sm hover:text-purple-400 transition-colors">Contributors</a></li> | |
| <li><a href="#" class="text-sm hover:text-purple-400 transition-colors">Research Partners</a></li> | |
| <li><a href="#" class="text-sm hover:text-purple-400 transition-colors">Quantum Nodes</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 text-purple-400">CONNECT</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-blue-400 hover:text-white transition-colors"><i data-feather="github"></i></a> | |
| <a href="#" class="text-purple-400 hover:text-white transition-colors"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-blue-400 hover:text-white transition-colors"><i data-feather="linkedin"></i></a> | |
| <a href="#" class="text-purple-400 hover:text-white transition-colors"><i data-feather="mail"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center"> | |
| <p class="text-xs"> | |
| © 2157 Singularity Horizon | Quantum Timeframe Simulation Network | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Three.js universe | |
| let scene, camera, renderer, stars = []; | |
| function initUniverse() { | |
| scene = new THREE.Scene(); | |
| camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| renderer = new THREE.WebGLRenderer({ | |
| canvas: document.getElementById('universe-canvas'), | |
| antialias: true | |
| }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| // Create stars | |
| for (let i = 0; i < 1000; i++) { | |
| const star = new THREE.Mesh( | |
| new THREE.SphereGeometry(0.1, 8, 8), | |
| new THREE.MeshBasicMaterial({ | |
| color: Math.random() > 0.5 ? 0x00f0ff : 0x9d00ff, | |
| transparent: true, | |
| opacity: 0.8 | |
| }) | |
| ); | |
| star.position.x = (Math.random() - 0.5) * 2000; | |
| star.position.y = (Math.random() - 0.5) * 2000; | |
| star.position.z = (Math.random() - 0.5) * 2000; | |
| stars.push(star); | |
| scene.add(star); | |
| } | |
| // Add central glow | |
| const glow = new THREE.Mesh( | |
| new THREE.SphereGeometry(30, 32, 32), | |
| new THREE.MeshBasicMaterial({ | |
| color: 0x9d00ff, | |
| transparent: true, | |
| opacity: 0.1 | |
| }) | |
| ); | |
| scene.add(glow); | |
| // Position camera | |
| camera.position.z = 100; | |
| // Handle window resize | |
| window.addEventListener('resize', () => { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| }); | |
| // Start animation | |
| animate(); | |
| } | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| // Rotate stars slightly | |
| stars.forEach(star => { | |
| star.rotation.x += 0.001; | |
| star.rotation.y += 0.001; | |
| }); | |
| // Move camera in gentle motion | |
| const time = Date.now() * 0.0005; | |
| camera.position.x = Math.sin(time) * 30; | |
| camera.position.y = Math.cos(time * 0.5) * 20; | |
| camera.lookAt(0, 0, 0); | |
| renderer.render(scene, camera); | |
| } | |
| // Initialize everything when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', function() { | |
| initUniverse(); | |
| feather.replace(); | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| }); | |
| }); | |
| // Add hover effects to interactive elements | |
| document.querySelectorAll('.quantum-border, .singularity-border').forEach(el => { | |
| el.addEventListener('mouseenter', function() { | |
| this.style.boxShadow = this.classList.contains('quantum-border') | |
| ? '0 0 25px var(--quantum-blue), inset 0 0 15px var(--quantum-blue)' | |
| : '0 0 25px var(--singularity-purple), inset 0 0 15px var(--singularity-purple)'; | |
| }); | |
| el.addEventListener('mouseleave', function() { | |
| this.style.boxShadow = this.classList.contains('quantum-border') | |
| ? '0 0 15px var(--quantum-blue), inset 0 0 10px var(--quantum-blue)' | |
| : '0 0 15px var(--singularity-purple), inset 0 0 10px var(--singularity-purple)'; | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |