FDAYAN/undefined
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Cosmic Odyssey: Quantum Rescue</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>9 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/MotionPathPlugin.min.js"></script>10 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>11 <script src="https://unpkg.com/feather-icons"></script>12 <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">13 <style>14 @keyframes cosmicPulse {15 0% { box-shadow: 0 0 20px rgba(100, 200, 255, 0.5); }16 50% { box-shadow: 0 0 50px rgba(100, 200, 255, 0.8); }17 100% { box-shadow: 0 0 20px rgba(100, 200, 255, 0.5); }18 }19 .cosmic-glow {20 animation: cosmicPulse 3s infinite ease-in-out;21 }22 .text-cosmic {23 background: linear-gradient(90deg, #00d4ff, #0077ff, #a200ff);24 -webkit-background-clip: text;25 background-clip: text;26 color: transparent;27 }28 .space-bg {29 background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);30 }31 .space-card {32 backdrop-filter: blur(10px);33 background: rgba(15, 23, 42, 0.7);34 border: 1px solid rgba(100, 200, 255, 0.2);35 transition: all 0.3s ease;36 }37 .space-card:hover {38 transform: translateY(-10px);39 border-color: rgba(100, 200, 255, 0.5);40 }41 .interactive-element {42 transition: all 0.3s ease;43 }44 .interactive-element:hover {45 transform: scale(1.05);46 filter: brightness(1.1);47 }48 </style>49</head>50<body class="space-bg text-white font-['Space_Grotesk'] overflow-x-hidden">51 <!-- Vanta.js Background -->52 <div id="vanta-bg" class="fixed inset-0 -z-10"></div>53 54 <!-- Audio Elements -->55 <audio id="bgMusic" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" loop></audio>56 <audio id="clickSound" src="https://www.soundjay.com/buttons/sounds/button-09.mp3"></audio>57<!-- Hero Section -->58 <section id="hero" class="min-h-screen flex flex-col items-center justify-center relative px-4 py-20">59 <div class="absolute inset-0 bg-black bg-opacity-50"></div>60 <div class="relative z-10 text-center max-w-4xl space-y-8">61 <div class="mb-12">62 <h1 class="text-6xl md:text-8xl font-bold mb-4 text-cosmic">COSMIC ODYSSEY</h1>63 <p class="text-xl md:text-2xl text-gray-300 font-light">A Quantum Rescue Mission Beyond the Stars</p>64 </div>65 66 <div class="flex flex-col md:flex-row justify-center gap-6">67 <button id="startBtn" class="interactive-element px-12 py-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full text-lg font-medium transform transition-all duration-300 hover:shadow-xl hover:shadow-blue-500/30">68 <i data-feather="play" class="inline mr-2"></i> Begin Journey69 </button>70 <button id="aboutBtn" class="interactive-element px-12 py-4 bg-transparent border-2 border-blue-400 rounded-full text-lg font-medium transform transition-all duration-300 hover:bg-blue-900/30">71 <i data-feather="info" class="inline mr-2"></i> Mission Brief72 </button>73 </div>74 75 <div class="mt-16">76 <button id="soundToggle" class="p-3 rounded-full bg-gray-800 bg-opacity-50 hover:bg-opacity-70">77 <i data-feather="volume-2"></i>78 </button>79 </div>80 </div>81 82 <div class="absolute bottom-10 left-0 right-0 flex justify-center animate-bounce">83 <i data-feather="chevron-down" class="text-blue-400"></i>84 </div>85 </section>86 87 <!-- About Modal -->88 <div id="aboutModal" class="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center hidden">89 <div class="space-card max-w-2xl mx-4 p-8 rounded-2xl relative">90 <button id="closeAbout" class="absolute top-4 right-4 p-2 hover:text-blue-400">91 <i data-feather="x"></i>92 </button>93 <h2 class="text-3xl font-bold mb-6 text-cosmic">Mission Parameters</h2>94 <div class="space-y-6">95 <div class="flex items-start">96 <div class="bg-blue-900/30 p-3 rounded-full mr-4">97 <i data-feather="target" class="text-blue-400"></i>98 </div>99 <div>100 <h3 class="text-xl font-semibold mb-2">Objective</h3>101 <p class="text-gray-300">Navigate through quantum space anomalies to rescue your stranded crewmate from the Event Horizon sector.</p>102 </div>103 </div>104 105 <div class="flex items-start">106 <div class="bg-purple-900/30 p-3 rounded-full mr-4">107 <i data-feather="cpu" class="text-purple-400"></i>108 </div>109 <div>110 <h3 class="text-xl font-semibold mb-2">Technology</h3>111 <p class="text-gray-300">Utilize cutting-edge quantum navigation systems or rely on traditional space GPS coordinates.</p>112 </div>113 </div>114 115 <div class="flex items-start">116 <div class="bg-green-900/30 p-3 rounded-full mr-4">117 <i data-feather="alert-triangle" class="text-green-400"></i>118 </div>119 <div>120 <h3 class="text-xl font-semibold mb-2">Dangers</h3>121 <p class="text-gray-300">Beware of asteroid fields, quantum singularities, and cosmic radiation storms during your journey.</p>122 </div>123 </div>124 </div>125 <button id="startFromAbout" class="mt-8 w-full py-3 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full font-medium">126 Accept Mission127 </button>128 </div>129 </div>130 131 <!-- Story Section -->132 <section id="story" class="hidden min-h-screen flex flex-col items-center justify-center relative px-4 py-20">133 <div class="max-w-5xl w-full space-y-12">134 <div class="space-card p-8 rounded-3xl">135 <h2 id="storyTitle" class="text-4xl font-bold mb-6 text-cosmic"></h2>136 <div class="flex flex-col lg:flex-row gap-8">137 <div class="lg:w-1/2">138 <img id="storyImage" src="" alt="" class="w-full h-64 md:h-96 object-cover rounded-xl cosmic-glow">139 </div>140 <div class="lg:w-1/2">141 <p id="storyText" class="text-lg text-gray-300 mb-8"></p>142 <div class="flex flex-wrap gap-4">143 <button id="nextStoryBtn" class="interactive-element flex-1 py-3 bg-blue-600 rounded-lg font-medium flex items-center justify-center">144 <i data-feather="arrow-right" class="mr-2"></i> Continue145 </button>146 <button id="autoPlayBtn" class="interactive-element flex-1 py-3 bg-purple-600 rounded-lg font-medium flex items-center justify-center">147 <i data-feather="play" class="mr-2"></i> Auto-Play148 </button>149 </div>150 </div>151 </div>152 </div>153 </div>154 </section>155 156 <!-- Mission Section -->157 <section id="mission" class="hidden min-h-screen flex flex-col items-center justify-center px-4 py-20">158 <div class="max-w-4xl w-full space-y-12">159 <div class="space-card p-8 rounded-3xl text-center">160 <h2 class="text-4xl font-bold mb-8 text-cosmic">Navigation Protocol</h2>161 162 <div class="grid md:grid-cols-2 gap-8 mb-12">163 <div class="space-card p-6 rounded-xl interactive-element" id="gpsCard">164 <div class="bg-yellow-900/20 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4 mx-auto">165 <i data-feather="map" class="text-yellow-400 text-2xl"></i>166 </div>167 <h3 class="text-2xl font-bold mb-3 text-yellow-400">Classical GPS</h3>168 <p class="text-gray-300 mb-4">Reliable but slow traditional navigation using star maps and radio beacons.</p>169 <div class="flex justify-center">170 <button id="gpsBtn" class="py-2 px-6 bg-yellow-600 rounded-full text-sm font-medium">Select</button>171 </div>172 </div>173 174 <div class="space-card p-6 rounded-xl interactive-element" id="quantumCard">175 <div class="bg-blue-900/20 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4 mx-auto">176 <i data-feather="activity" class="text-blue-400 text-2xl"></i>177 </div>178 <h3 class="text-2xl font-bold mb-3 text-blue-400">Quantum Navigation</h3>179 <p class="text-gray-300 mb-4">Experimental faster-than-light navigation using quantum entanglement principles.</p>180 <div class="flex justify-center">181 <button id="quantumBtn" class="py-2 px-6 bg-blue-600 rounded-full text-sm font-medium">Select</button>182 </div>183 </div>184 </div>185 186 <div class="flex justify-center">187 <div class="w-full max-w-md space-card p-6 rounded-xl">188 <h3 class="text-xl font-semibold mb-4">Mission Statistics</h3>189 <div class="space-y-3">190 <div class="flex justify-between">191 <span class="text-gray-400">Distance:</span>192 <span>4.7 light years</span>193 </div>194 <div class="flex justify-between">195 <span class="text-gray-400">Time Estimate (GPS):</span>196 <span>47 standard cycles</span>197 </div>198 <div class="flex justify-between">199 <span class="text-gray-400">Time Estimate (Quantum):</span>200 <span>12 standard cycles</span>201 </div>202 <div class="flex justify-between">203 <span class="text-gray-400">Success Probability:</span>204 <span>82% ± 7%</span>205 </div>206 </div>207 </div>208 </div>209 </div>210 </div>211 </section>212 213 <!-- Game Section -->214 <section id="game" class="hidden min-h-screen flex flex-col items-center justify-center relative px-4 py-20">215 <div class="max-w-6xl w-full space-y-8 text-center">216 <h2 class="text-4xl font-bold text-cosmic">217 <span id="gameTitle">Quantum Navigation Activated</span>218 <span id="gameSubtitle" class="block text-xl text-blue-400 mt-2">Entering hyperspace corridor</span>219 </h2>220 221 <div class="relative">222 <canvas id="space" width="1200" height="600" class="w-full h-auto max-w-full rounded-2xl cosmic-glow"></canvas>223 <div id="gameOverlay" class="absolute inset-0 flex items-center justify-center hidden">224 <div class="space-card p-8 max-w-md rounded-2xl text-center">225 <h3 class="text-2xl font-bold mb-4" id="overlayTitle">Paused</h3>226 <p class="text-gray-300 mb-6" id="overlayText">Your journey is currently on hold.</p>227 <button id="resumeBtn" class="w-full py-3 bg-blue-600 rounded-full font-medium">228 Resume Mission229 </button>230 </div>231 </div>232 </div>233 234 <div id="status" class="space-card p-4 rounded-xl">235 <div class="flex justify-between items-center">236 <div>237 <span id="gameStatus" class="font-medium">Initializing navigation systems...</span>238 <div class="w-full bg-gray-700 rounded-full h-2.5 mt-2">239 <div id="progressBar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>240 </div>241 </div>242 <button id="pauseBtn" class="p-2 rounded-full bg-gray-700 hover:bg-gray-600">243 <i data-feather="pause"></i>244 </button>245 </div>246 </div>247 </div>248 </section>249 250 <!-- Outcome Section -->251 <section id="outcome" class="hidden min-h-screen flex flex-col items-center justify-center relative px-4 py-20">252 <div class="max-w-4xl w-full">253 <div class="space-card p-12 rounded-3xl text-center">254 <div class="mb-8">255 <div id="outcomeIcon" class="inline-block p-6 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 mb-6">256 <i id="outcomeFeather" data-feather="check" class="text-white text-4xl"></i>257 </div>258 <h2 id="outcomeTitle" class="text-5xl font-bold mb-4 text-cosmic"></h2>259 <p id="outcomeText" class="text-xl text-gray-300 max-w-2xl mx-auto"></p>260 </div>261 262 <div class="flex flex-col sm:flex-row justify-center gap-6">263 <button id="restartBtn" class="interactive-element flex-1 py-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full text-lg font-medium">264 <i data-feather="home" class="inline mr-2"></i> Mission Control265 </button>266 <button id="retryBtn" class="interactive-element flex-1 py-4 bg-transparent border-2 border-blue-400 rounded-full text-lg font-medium hover:bg-blue-900/30">267 <i data-feather="repeat" class="inline mr-2"></i> Try Again268 </button>269 </div>270 </div>271 272 <div class="mt-12 space-card p-8 rounded-3xl">273 <h3 class="text-2xl font-bold mb-6 text-center">Mission Debrief</h3>274 <div class="grid md:grid-cols-3 gap-6">275 <div class="text-center">276 <div class="text-4xl font-bold text-blue-400 mb-2" id="timeStat">00:00</div>277 <div class="text-gray-400">Mission Duration</div>278 </div>279 <div class="text-center">280 <div class="text-4xl font-bold text-purple-400 mb-2" id="distanceStat">0 LY</div>281 <div class="text-gray-400">Distance Traveled</div>282 </div>283 <div class="text-center">284 <div class="text-4xl font-bold text-green-400 mb-2" id="efficiencyStat">0%</div>285 <div class="text-gray-400">Navigation Efficiency</div>286 </div>287 </div>288 </div>289 </div>290 </section>291 292 <script>293 // Initialize Vanta.js294 VANTA.NET({295 el: "#vanta-bg",296 mouseControls: true,297 touchControls: true,298 gyroControls: false,299 minHeight: 200.00,300 minWidth: 200.00,301 scale: 1.00,302 scaleMobile: 1.00,303 color: 0x3a86ff,304 backgroundColor: 0x0a0e17,305 points: 12.00,306 maxDistance: 22.00,307 spacing: 18.00308 });309 310 // Initialize GSAP311 gsap.registerPlugin(MotionPathPlugin);312 313 // Initialize Feather Icons314 document.addEventListener('DOMContentLoaded', function() {315 feather.replace();316 });317 318 // Audio Elements319 const bgMusic = document.getElementById("bgMusic");320 const clickSound = document.getElementById("clickSound");321 322 // Sound Toggle323 let soundEnabled = false;324 document.getElementById("soundToggle").addEventListener("click", function() {325 soundEnabled = !soundEnabled;326 if (soundEnabled) {327 bgMusic.play();328 this.innerHTML = feather.icons["volume-2"].toSvg();329 } else {330 bgMusic.pause();331 this.innerHTML = feather.icons["volume-x"].toSvg();332 }333 });334 335 // Button Click Sounds336 document.querySelectorAll("button").forEach(btn => {337 btn.addEventListener("click", () => {338 if (soundEnabled) {339 clickSound.currentTime = 0;340 clickSound.play();341 }342 });343 });344 345 // Story Data346 const storyAPI = [347 { 348 title: "The Quantum Anomaly", 349 text: "Deep in the Andromeda sector, your research vessel encountered an unprecedented quantum anomaly. As chief scientist, you watched helplessly as the distortion field enveloped your colleague's shuttle.", 350 image: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" 351 },352 { 353 title: "Distress Signal", 354 text: "Before communications failed, you received a fragmented message: 'Trapped in quantum flux... coordinates unstable... help...' The signal cut out, but not before you triangulated the origin point.", 355 image: "https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" 356 },357 { 358 title: "Preparing the Rescue", 359 text: "You quickly retrofit an experimental quantum navigation module to your scout ship. The technology is untested at this scale, but time is running out. Your colleague's life signs are fading.", 360 image: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" 361 },362 { 363 title: "Into the Unknown", 364 text: "As you initiate the launch sequence, the station AI warns of catastrophic risks. The quantum field is unstable, and navigation will be nearly impossible. But you know you must try.", 365 image: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" 366 }367];368 369 let storyIndex = 0;370 let lastMode = "quantum";371 let missionStartTime = 0;372 let gamePaused = false;373 374 // Canvas setup375 const canvas = document.getElementById("space");376 const ctx = canvas.getContext("2d");377 378 // Adjust canvas size for mobile379 function resizeCanvas() {380 const container = canvas.parentElement;381 const ratio = canvas.width / canvas.height;382 383 if (window.innerWidth < 768) {384 canvas.style.width = '100%';385 canvas.style.height = (container.clientWidth / ratio) + 'px';386 } else {387 canvas.style.width = '';388 canvas.style.height = '';389 }390 }391 392 window.addEventListener('resize', resizeCanvas);393 resizeCanvas();394 395 const ship = { x: 120, y: 300, rotation: 0 };396 const planets = [397 { x: 300, y: 200, r: 40, color: "#FF9E00" },398 { x: 600, y: 450, r: 60, color: "#00B4D8" },399 { x: 900, y: 250, r: 55, color: "#FF0054" },400 { x: 1100, y: 400, r: 50, color: "#9B5DE5" }401 ];402 403 const friend = { x: 1300, y: 350, r: 30 };404 const stars = [];405 406 // Create stars407 for (let i = 0; i < 200; i++) {408 stars.push({409 x: Math.random() * canvas.width,410 y: Math.random() * canvas.height,411 size: Math.random() * 2 + 1,412 opacity: Math.random() * 0.8 + 0.2413 });414 }415 416 // Draw cosmic scene417 function drawScene() {418 // Clear canvas419 ctx.fillStyle = "#0a0e17";420 ctx.fillRect(0, 0, canvas.width, canvas.height);421 422 // Draw stars423 stars.forEach(star => {424 ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`;425 ctx.fillRect(star.x, star.y, star.size, star.size);426 427 // Animate stars slightly428 star.x -= 0.2;429 if (star.x < 0) star.x = canvas.width;430 });431 432 // Draw planets433 planets.forEach(planet => {434 // Planet glow435 const gradient = ctx.createRadialGradient(436 planet.x, planet.y, planet.r,437 planet.x, planet.y, planet.r * 1.5438 );439 gradient.addColorStop(0, planet.color);440 gradient.addColorStop(1, "transparent");441 442 ctx.beginPath();443 ctx.arc(planet.x, planet.y, planet.r * 1.5, 0, Math.PI * 2);444 ctx.fillStyle = gradient;445 ctx.fill();446 447 // Planet448 ctx.beginPath();449 ctx.arc(planet.x, planet.y, planet.r, 0, Math.PI * 2);450 ctx.fillStyle = planet.color;451 ctx.fill();452 453 // Planet details454 ctx.beginPath();455 ctx.arc(456 planet.x + planet.r * 0.3, 457 planet.y - planet.r * 0.3, 458 planet.r * 0.4, 459 0, 460 Math.PI * 2461 );462 ctx.fillStyle = planet.color.includes("FF") ? "#FFD700" : "#FFFFFF30";463 ctx.fill();464 });465 466 // Draw friend467 const friendGradient = ctx.createRadialGradient(468 friend.x, friend.y, friend.r,469 friend.x, friend.y, friend.r * 1.5470 );471 friendGradient.addColorStop(0, "#FF70A6");472 friendGradient.addColorStop(1, "transparent");473 474 ctx.beginPath();475 ctx.arc(friend.x, friend.y, friend.r * 1.5, 0, Math.PI * 2);476 ctx.fillStyle = friendGradient;477 ctx.fill();478 479 ctx.beginPath();480 ctx.arc(friend.x, friend.y, friend.r, 0, Math.PI * 2);481 ctx.fillStyle = "#FF70A6";482 ctx.fill();483 484 // Draw distress signal485 if (Math.random() > 0.7) {486 ctx.beginPath();487 ctx.arc(friend.x, friend.y, friend.r * 2 + Math.random() * 10, 0, Math.PI * 2);488 ctx.strokeStyle = "#FF70A6";489 ctx.lineWidth = 1 + Math.random() * 2;490 ctx.stroke();491 }492 493 // Draw ship494 ctx.save();495 ctx.translate(ship.x, ship.y);496 ctx.rotate(ship.rotation * Math.PI / 180);497 498 // Engine glow499 const engineGradient = ctx.createLinearGradient(-40, 0, -80, 0);500 engineGradient.addColorStop(0, "#00FFFF");501 engineGradient.addColorStop(1, "transparent");502 503 ctx.beginPath();504 ctx.moveTo(-40, 0);505 ctx.lineTo(-80, 15);506 ctx.lineTo(-80, -15);507 ctx.closePath();508 ctx.fillStyle = engineGradient;509 ctx.fill();510 511 // Ship body512 ctx.beginPath();513 ctx.moveTo(0, 0);514 ctx.lineTo(-40, 20);515 ctx.lineTo(-40, -20);516 ctx.closePath();517 ctx.fillStyle = "#FFFFFF";518 ctx.fill();519 520 // Ship window521 ctx.beginPath();522 ctx.arc(-20, 0, 8, 0, Math.PI * 2);523 ctx.fillStyle = "#00FFFF";524 ctx.fill();525 526 ctx.restore();527 }528 529 // Story functions530 function showStory(index) {531 const data = storyAPI[index];532 533 // Smooth transition out current content534 gsap.to(["#storyTitle", "#storyText", "#storyImage", "#nextStoryBtn", "#autoPlayBtn"], {535 opacity: 0,536 y: 30,537 duration: 0.5,538 onComplete: () => {539 // Update content540 document.getElementById("storyTitle").innerText = data.title;541 document.getElementById("storyText").innerText = data.text;542 document.getElementById("storyImage").src = data.image;543 544 // Smooth transition in new content545 gsap.fromTo("#storyImage", 546 { opacity: 0, scale: 0.9 }, 547 { opacity: 1, scale: 1, duration: 1, ease: "power2.out" }548 );549 gsap.fromTo("#storyTitle", 550 { opacity: 0, y: -30 }, 551 { 552 opacity: 1, 553 y: 0, 554 duration: 0.8, 555 delay: 0.3,556 ease: "back.out(1.7)" 557 }558 );559 gsap.fromTo("#storyText", 560 { opacity: 0, y: 30 }, 561 { 562 opacity: 1, 563 y: 0, 564 duration: 0.8, 565 delay: 0.6,566 ease: "back.out(1.7)" 567 }568 );569 gsap.fromTo("#nextStoryBtn, #autoPlayBtn",570 { opacity: 0, y: 20 },571 {572 opacity: 1,573 y: 0,574 duration: 0.5,575 delay: 0.9,576 stagger: 0.1577 }578 );579 }580 });581 }582 function nextStory() { 583 storyIndex++;584 if (storyIndex < storyAPI.length) {585 showStory(storyIndex);586 } else {587 // Prepare mission view by hiding story elements first588 gsap.to(["#storyTitle", "#storyText", "#storyImage", "#nextStoryBtn", "#autoPlayBtn"], {589 opacity: 0,590 y: 30,591 duration: 0.5,592 onComplete: () => {593 document.getElementById("story").classList.add("hidden");594 document.getElementById("mission").classList.remove("hidden");595 596 // Reset mission view position for entrance animation597 gsap.set("#mission", { y: 50, opacity: 0 });598 599 // Animate mission section entrance600 gsap.to("#mission", {601 opacity: 1,602 y: 0,603 duration: 1,604 ease: "elastic.out(1, 0.5)",605 onComplete: () => {606 // Animate cards after mission view is in place607 gsap.from("#gpsCard", {608 x: -50,609 opacity: 0,610 duration: 0.6,611 delay: 0.3,612 ease: "back.out(1.7)"613 });614 615 gsap.from("#quantumCard", {616 x: 50,617 opacity: 0,618 duration: 0.6,619 delay: 0.5,620 ease: "back.out(1.7)"621 });622 }623 });624 }625 });626 }627 }628function autoPlayStory() { 629 let autoPlayInterval = setInterval(() => {630 if (storyIndex < storyAPI.length - 1) {631 nextStory();632 } else {633 clearInterval(autoPlayInterval);634 }635 }, 5000);636 }637 638 // Mission functions639 document.getElementById("gpsBtn").addEventListener("click", () => choosePath("gps"));640 document.getElementById("quantumBtn").addEventListener("click", () => choosePath("quantum"));641 642 function choosePath(choice) {643 lastMode = choice;644 645 // Update UI based on choice646 if (choice === "gps") {647 document.getElementById("gameTitle").textContent = "Classical GPS Navigation";648 document.getElementById("gameSubtitle").textContent = "Following star maps and radio beacons";649 } else {650 document.getElementById("gameTitle").textContent = "Quantum Navigation Activated";651 document.getElementById("gameSubtitle").textContent = "Entering hyperspace corridor";652 }653 654 // Animate transition655 gsap.to("#mission", {656 opacity: 0,657 scale: 0.9,658 duration: 0.8,659 onComplete: () => {660 document.getElementById("mission").classList.add("hidden");661 document.getElementById("game").classList.remove("hidden");662 663 // Start game664 runGame(choice);665 666 // Animate game section entrance667 gsap.from("#game", {668 opacity: 0,669 scale: 0.95,670 duration: 1,671 ease: "power2.out"672 });673 }674 });675 }676 677 function runGame(mode) {678 // Reset ship position679 ship.x = 120;680 ship.y = 300;681 ship.rotation = 0;682 683 // Record start time for stats684 missionStartTime = Date.now();685 686 // Update status687 document.getElementById("gameStatus").textContent = 688 mode === "gps" 689 ? "Initializing classical navigation systems..." 690 : "Calibrating quantum entanglement matrix...";691 692 // Animate progress bar693 gsap.to("#progressBar", {694 width: "100%",695 duration: 1,696 onComplete: () => {697 document.getElementById("gameStatus").textContent = 698 mode === "gps" 699 ? "Following established space lanes..." 700 : "Navigating quantum flux...";701 }702 });703 704 // Draw initial scene705 drawScene();706 707 // Create timeline for ship movement708 let tl = gsap.timeline({709 onUpdate: drawScene,710 onComplete: () => showOutcome(711 mode === "gps" 712 ? "Classical Navigation Complete" 713 : "Quantum Navigation Successful",714 mode === "gps" 715 ? "Your conservative approach ensured safety but cost valuable time. The rescue was successful, but your colleague suffered minor quantum radiation exposure." 716 : "Your bold use of experimental quantum technology resulted in a textbook rescue. Your colleague is safe and the data collected will revolutionize space travel."717 )718 });719 720 if (mode === "gps") {721 // Classical GPS path (longer, safer)722 tl.to(ship, {723 duration: 2,724 x: 300,725 y: 250,726 rotation: 25,727 ease: "power1.inOut"728 })729 .to(ship, {730 duration: 3,731 x: 600,732 y: 420,733 rotation: -15,734 ease: "power1.inOut"735 })736 .to(ship, {737 duration: 2.5,738 x: 900,739 y: 200,740 rotation: 10,741 ease: "power1.inOut"742 })743 .to(ship, {744 duration: 3,745 x: 1100,746 y: 300,747 rotation: -5,748 ease: "power1.inOut"749 })750 .to(ship, {751 duration: 2,752 x: friend.x - 20,753 y: friend.y,754 rotation: 0,755 ease: "power1.inOut"756 });757 } else {758 // Quantum path (shorter, riskier)759 tl.to(ship, {760 duration: 1,761 x: 400,762 y: 350,763 rotation: 45,764 ease: "power2.inOut"765 })766 .to(ship, {767 duration: 1.5,768 x: 700,769 y: 150,770 rotation: -30,771 ease: "power2.inOut"772 })773 // Quantum jump effect774 .to(ship, {775 duration: 0.5,776 x: 800,777 y: 500,778 rotation: 180,779 ease: "power2.in",780 onStart: () => {781 // More prominent flash effect782 gsap.to(canvas, {783 duration: 0.3,784 backgroundColor: "#FFFFFF",785 repeat: 1,786 yoyo: true,787 onComplete: () => {788 canvas.style.backgroundColor = "transparent";789 }790 });791 792 // Add particle burst effect793 for (let i = 0; i < 50; i++) {794 const particle = {795 x: ship.x,796 y: ship.y,797 size: Math.random() * 4 + 2,798 color: `hsl(${Math.random() * 60 + 200}, 100%, 50%)`,799 vx: (Math.random() - 0.5) * 10,800 vy: (Math.random() - 0.5) * 10,801 life: 1802 };803 804 // Draw particles805 ctx.fillStyle = particle.color;806 ctx.beginPath();807 ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);808 ctx.fill();809 810 // Animate particles811 gsap.to(particle, {812 duration: 1,813 x: particle.x + particle.vx,814 y: particle.y + particle.vy,815 size: 0,816 life: 0,817 ease: "power2.out",818 onUpdate: drawScene819 });820 }821 }822 })823.to(ship, {824 duration: 1.5,825 x: friend.x - 20,826 y: friend.y,827 rotation: 0,828 ease: "power2.out"829 });830 }831 }832 833 function showOutcome(title, text) {834 // Calculate mission stats835 const missionTime = ((Date.now() - missionStartTime) / 1000).toFixed(1);836 const distance = lastMode === "gps" ? "4.7" : "4.3";837 const efficiency = lastMode === "gps" ? "72%" : "94%";838 839 // Update stats840 document.getElementById("timeStat").textContent = `${missionTime}s`;841 document.getElementById("distanceStat").textContent = `${distance} LY`;842 document.getElementById("efficiencyStat").textContent = efficiency;843 844 // Set outcome content845 document.getElementById("outcomeTitle").textContent = title;846 document.getElementById("outcomeText").textContent = text;847 // Set outcome icon848 const outcomeIcon = document.getElementById("outcomeIcon");849 const outcomeFeather = document.getElementById("outcomeFeather");850 851 if (lastMode === "gps") {852 outcomeIcon.className = "inline-block p-6 rounded-full bg-gradient-to-br from-yellow-500 to-orange-600 mb-6";853 outcomeFeather.setAttribute("data-feather", "clock");854 outcomeFeather.innerHTML = feather.icons.clock.toSvg();855 } else {856 outcomeIcon.className = "inline-block p-6 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 mb-6";857 outcomeFeather.setAttribute("data-feather", "zap");858 outcomeFeather.innerHTML = feather.icons.zap.toSvg();859 }860// Animate transition861 gsap.to("#game", {862 opacity: 0,863 duration: 0.8,864 onComplete: () => {865 document.getElementById("game").classList.add("hidden");866 document.getElementById("outcome").classList.remove("hidden");867 868 // Animate outcome section entrance869 gsap.from("#outcome", {870 opacity: 0,871 y: 50,872 duration: 1,873 ease: "elastic.out(1, 0.5)"874 });875 876 // Animate elements877 gsap.from("#outcomeIcon", {878 scale: 0,879 duration: 0.8,880 ease: "back.out(1.7)"881 });882 883 gsap.from("#outcomeTitle", {884 y: -30,885 opacity: 0,886 duration: 0.6,887 delay: 0.3,888 ease: "back.out(1.7)"889 });890 891 gsap.from("#outcomeText", {892 y: 30,893 opacity: 0,894 duration: 0.6,895 delay: 0.4,896 ease: "back.out(1.7)"897 });898 899 gsap.from("#restartBtn, #retryBtn", {900 y: 20,901 opacity: 0,902 duration: 0.5,903 delay: 0.6,904 stagger: 0.1905 });906 }907 });908 }909 910 // Pause/Resume game911 document.getElementById("pauseBtn").addEventListener("click", function() {912 gamePaused = !gamePaused;913 914 if (gamePaused) {915 document.getElementById("gameOverlay").classList.remove("hidden");916 document.getElementById("overlayTitle").textContent = "Mission Paused";917 document.getElementById("overlayText").textContent = "Quantum stabilization field active";918 gsap.globalTimeline.pause();919 920 this.innerHTML = feather.icons["play"].toSvg();921 } else {922 document.getElementById("gameOverlay").classList.add("hidden");923 gsap.globalTimeline.play();924 925 this.innerHTML = feather.icons["pause"].toSvg();926 }927 928 feather.replace();929 });930 931 document.getElementById("resumeBtn").addEventListener("click", function() {932 gamePaused = false;933 document.getElementById("gameOverlay").classList.add("hidden");934 gsap.globalTimeline.play();935 document.getElementById("pauseBtn").innerHTML = feather.icons["pause"].toSvg();936 feather.replace();937 });938 939 // Restart functions940 document.getElementById("restartBtn").addEventListener("click", function() {941 storyIndex = 0;942 943 gsap.to("#outcome", {944 opacity: 0,945 duration: 0.8,946 onComplete: () => {947 document.getElementById("outcome").classList.add("hidden");948 document.getElementById("hero").classList.remove("hidden");949 950 gsap.from("#hero", {951 opacity: 0,952 y: 50,953 duration: 1,954 ease: "elastic.out(1, 0.5)"955 });956 }957 });958 });959 960 document.getElementById("retryBtn").addEventListener("click", function() {961 gsap.to("#outcome", {962 opacity: 0,963 duration: 0.7,964 onComplete: () => {965 document.getElementById("outcome").classList.add("hidden");966 document.getElementById("game").classList.remove("hidden");967 document.getElementById("gameStatus").textContent = "Reinitializing systems...";968 document.getElementById("progressBar").style.width = "0%";969 970 gsap.set("#game", { opacity: 0 });971 runGame(lastMode);972 gsap.to("#game", { opacity: 1, duration: 0.7 });973 }974 });975 });976 // Start Mission977 document.getElementById("startBtn").addEventListener("click", function() {978 if (soundEnabled) {979 bgMusic.play().catch(() => {980 // Start muted by default and require user interaction981 bgMusic.muted = true;982 bgMusic.play().then(() => {983 bgMusic.muted = false;984 }).catch(e => console.log("Audio error:", e));985 });986 }987// Hide hero elements first988 gsap.to(["#hero h1", "#hero p", ".flex", ".mt-16"], {989 opacity: 0,990 y: -20,991 duration: 0.5,992 stagger: 0.1,993 onComplete: () => {994 document.getElementById("hero").classList.add("hidden");995 document.getElementById("story").classList.remove("hidden");996 997 // Reset story view for entrance animation998 gsap.set(["#storyTitle", "#storyText", "#storyImage", "#nextStoryBtn", "#autoPlayBtn"], {999 opacity: 0,1000 y: 201001 });1002 1003 // Show story container first1004 gsap.fromTo("#story", 1005 { opacity: 0 }, 1006 { opacity: 1, duration: 0.5 }1007 );1008 1009 // Then load first story with smooth transition1010 showStory(0);1011 }1012 });1013 });1014 // About Modal1015 document.getElementById("aboutBtn").addEventListener("click", function() {1016 // Hide hero content first1017 gsap.to(["#hero h1", "#hero p", ".flex", ".mt-16"], {1018 opacity: 0,1019 duration: 0.3,1020 onComplete: () => {1021 document.getElementById("aboutModal").classList.remove("hidden");1022 gsap.from("#aboutModal", { opacity: 0, duration: 0.3 });1023 gsap.from("#aboutModal > div", { 1024 y: 20, 1025 opacity: 0, 1026 duration: 0.5, 1027 ease: "back.out(1.7)" 1028 });1029 }1030 });1031 });1032 document.getElementById("closeAbout").addEventListener("click", function() {1033 gsap.to("#aboutModal > div", {1034 y: 20,1035 opacity: 0,1036 duration: 0.3,1037 ease: "power2.in",1038 onComplete: () => {1039 document.getElementById("aboutModal").classList.add("hidden");1040 // Show hero content again1041 gsap.to(["#hero h1", "#hero p", ".flex", ".mt-16"], {1042 opacity: 1,1043 y: 0,1044 duration: 0.5,1045 stagger: 0.11046 });1047 }1048 });1049 });1050document.getElementById("startFromAbout").addEventListener("click", function() {1051 gsap.to("#aboutModal", {1052 opacity: 0,1053 duration: 0.3,1054 onComplete: () => {1055 document.getElementById("aboutModal").classList.add("hidden");1056 1057 if (soundEnabled) {1058 bgMusic.play().catch(() => console.log("Audio requires user interaction"));1059 }1060 1061 gsap.to("#hero", {1062 opacity: 0,1063 duration: 1,1064 onComplete: () => {1065 document.getElementById("hero").classList.add("hidden");1066 document.getElementById("story").classList.remove("hidden");1067 1068 gsap.fromTo("#story", 1069 { opacity: 0, y: 20 }, 1070 { opacity: 1, y: 0, duration: 1, ease: "power2.out" }1071 );1072 1073 showStory(0);1074 }1075 });1076 }1077 });1078 });1079 1080 // Initialize stars animation1081 function animateStars() {1082 drawScene();1083 if (!gamePaused) {1084 requestAnimationFrame(animateStars);1085 }1086 }1087 animateStars();1088 </script>1089</body>1090</html>1091