Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nebula Trader - Space Trading Adventure</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .galaxy-view { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 0; | |
| } | |
| .ui-overlay { | |
| position: relative; | |
| z-index: 1; | |
| pointer-events: none; | |
| } | |
| .ui-overlay * { | |
| pointer-events: auto; | |
| } | |
| .planet-info-card { | |
| backdrop-filter: blur(10px); | |
| background-color: rgba(15, 23, 42, 0.7); | |
| } | |
| .commodity-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3); | |
| } | |
| .ship-display { | |
| perspective: 1000px; | |
| } | |
| .ship-model { | |
| transform-style: preserve-3d; | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0) rotateY(0); } | |
| 50% { transform: translateY(-10px) rotateY(5deg); } | |
| } | |
| .pulsate { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 font-sans overflow-hidden h-screen flex flex-col"> | |
| <!-- 3D Galaxy View --> | |
| <div id="galaxy-view" class="galaxy-view"></div> | |
| <!-- Main Game UI --> | |
| <div class="ui-overlay flex flex-col h-full"> | |
| <!-- Header --> | |
| <header class="bg-gray-800/80 border-b border-gray-700 p-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent"> | |
| Nebula Trader | |
| </h1> | |
| <div class="text-sm bg-gray-700/50 px-3 py-1 rounded-full flex items-center"> | |
| <span class="w-2 h-2 bg-green-400 rounded-full mr-2"></span> | |
| <span>Online</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-6"> | |
| <div class="text-right"> | |
| <div class="text-xs text-gray-400">Credits</div> | |
| <div class="text-xl font-mono">1,250,500 <span class="text-blue-400">Ⓝ</span></div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-xs text-gray-400">Ship</div> | |
| <div class="text-lg">Mercury Starhauler</div> | |
| </div> | |
| <div class="relative group"> | |
| <img src="https://i.pravatar.cc/40" class="rounded-full w-10 h-10 border-2 border-blue-400 cursor-pointer" alt="Player"> | |
| <div class="absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg z-50 hidden group-hover:block"> | |
| <div class="py-1"> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700">Profile</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700">Settings</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700">Logout</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Left Sidebar - Navigation --> | |
| <nav class="w-16 bg-gray-800/80 border-r border-gray-700 flex flex-col items-center py-4 space-y-6"> | |
| <button class="nav-btn active" title="Galaxy Map"> | |
| <i class="fas fa-map text-xl"></i> | |
| </button> | |
| <button class="nav-btn" title="Trade"> | |
| <i class="fas fa-exchange-alt text-xl"></i> | |
| </button> | |
| <button class="nav-btn" title="Ship"> | |
| <i class="fas fa-rocket text-xl"></i> | |
| </button> | |
| <button class="nav-btn" title="Quests"> | |
| <i class="fas fa-scroll text-xl"></i> | |
| </button> | |
| <button class="nav-btn" title="Comms"> | |
| <i class="fas fa-comments text-xl"></i> | |
| </button> | |
| <div class="flex-1"></div> | |
| <button class="nav-btn" title="Help"> | |
| <i class="fas fa-question-circle text-xl"></i> | |
| </button> | |
| </nav> | |
| <!-- Center Content - Current Planet --> | |
| <main class="flex-1 overflow-y-auto p-6"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <div> | |
| <h2 class="text-3xl font-bold">New Terra Prime</h2> | |
| <div class="flex items-center mt-2 space-x-4 text-sm"> | |
| <span class="flex items-center"><i class="fas fa-globe-americas text-blue-400 mr-1"></i> Class M Planet</span> | |
| <span class="flex items-center"><i class="fas fa-users text-green-400 mr-1"></i> Population: 4.2B</span> | |
| <span class="flex items-center"><i class="fas fa-shield-alt text-yellow-400 mr-1"></i> Security: High</span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-md flex items-center"> | |
| <i class="fas fa-compass mr-2"></i> Explore | |
| </button> | |
| <button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-md flex items-center"> | |
| <i class="fas fa-info-circle mr-2"></i> Info | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Planet Info Card --> | |
| <div class="planet-info-card border border-gray-700 rounded-lg p-6 col-span-1"> | |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-info-circle text-blue-400 mr-2"></i> Planet Details | |
| </h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="text-sm text-gray-400">Government</div> | |
| <div>Corporate Democracy</div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-gray-400">Tech Level</div> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 85%"></div> | |
| </div> | |
| <span class="ml-2 text-sm">Advanced</span> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-gray-400">Economy</div> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 72%"></div> | |
| </div> | |
| <span class="ml-2 text-sm">Prosperous</span> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-gray-400">Specialty</div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-microchip text-purple-400 mr-2"></i> | |
| <span>Advanced Electronics</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trade Market --> | |
| <div class="planet-info-card border border-gray-700 rounded-lg p-6 col-span-2"> | |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-exchange-alt text-green-400 mr-2"></i> Trade Market | |
| </h3> | |
| <div class="mb-4 flex justify-between items-center"> | |
| <div class="relative w-64"> | |
| <input type="text" placeholder="Search commodities..." class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <div class="text-sm"> | |
| <span class="text-gray-400">Cargo:</span> | |
| <span class="font-mono">125/500</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <!-- Commodity Card --> | |
| <div class="commodity-card bg-gray-800/50 border border-gray-700 rounded-lg p-4 transition-all duration-200 cursor-pointer hover:border-blue-400"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-medium">Quantum Processors</h4> | |
| <span class="text-xs bg-blue-900 text-blue-200 px-2 py-1 rounded">High Tech</span> | |
| </div> | |
| <div class="flex justify-between text-sm mb-3"> | |
| <div> | |
| <div class="text-gray-400">Buy</div> | |
| <div class="text-green-400">1,250 Ⓝ</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-gray-400">Sell</div> | |
| <div class="text-red-400">950 Ⓝ</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="text-gray-400">Stock: 42</span> | |
| <div class="flex space-x-2"> | |
| <button class="w-6 h-6 bg-blue-600 hover:bg-blue-700 rounded flex items-center justify-center"> | |
| <i class="fas fa-plus text-xs"></i> | |
| </button> | |
| <button class="w-6 h-6 bg-gray-700 hover:bg-gray-600 rounded flex items-center justify-center"> | |
| <i class="fas fa-minus text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Commodity Card --> | |
| <div class="commodity-card bg-gray-800/50 border border-gray-700 rounded-lg p-4 transition-all duration-200 cursor-pointer hover:border-blue-400"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-medium">Plasma Rifles</h4> | |
| <span class="text-xs bg-red-900 text-red-200 px-2 py-1 rounded">Military</span> | |
| </div> | |
| <div class="flex justify-between text-sm mb-3"> | |
| <div> | |
| <div class="text-gray-400">Buy</div> | |
| <div class="text-green-400">3,450 Ⓝ</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-gray-400">Sell</div> | |
| <div class="text-red-400">2,800 Ⓝ</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="text-gray-400">Stock: 18</span> | |
| <div class="flex space-x-2"> | |
| <button class="w-6 h-6 bg-blue-600 hover:bg-blue-700 rounded flex items-center justify-center"> | |
| <i class="fas fa-plus text-xs"></i> | |
| </button> | |
| <button class="w-6 h-6 bg-gray-700 hover:bg-gray-600 rounded flex items-center justify-center"> | |
| <i class="fas fa-minus text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Commodity Card --> | |
| <div class="commodity-card bg-gray-800/50 border border-gray-700 rounded-lg p-4 transition-all duration-200 cursor-pointer hover:border-blue-400"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-medium">Bio-Nutrients</h4> | |
| <span class="text-xs bg-green-900 text-green-200 px-2 py-1 rounded">Agricultural</span> | |
| </div> | |
| <div class="flex justify-between text-sm mb-3"> | |
| <div> | |
| <div class="text-gray-400">Buy</div> | |
| <div class="text-green-400">320 Ⓝ</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-gray-400">Sell</div> | |
| <div class="text-red-400">250 Ⓝ</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="text-gray-400">Stock: 156</span> | |
| <div class="flex space-x-2"> | |
| <button class="w-6 h-6 bg-blue-600 hover:bg-blue-700 rounded flex items-center justify-center"> | |
| <i class="fas fa-plus text-xs"></i> | |
| </button> | |
| <button class="w-6 h-6 bg-gray-700 hover:bg-gray-600 rounded flex items-center justify-center"> | |
| <i class="fas fa-minus text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Commodity Card --> | |
| <div class="commodity-card bg-gray-800/50 border border-gray-700 rounded-lg p-4 transition-all duration-200 cursor-pointer hover:border-blue-400"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-medium">Neutronium Ore</h4> | |
| <span class="text-xs bg-yellow-900 text-yellow-200 px-2 py-1 rounded">Industrial</span> | |
| </div> | |
| <div class="flex justify-between text-sm mb-3"> | |
| <div> | |
| <div class="text-gray-400">Buy</div> | |
| <div class="text-green-400">780 Ⓝ</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-gray-400">Sell</div> | |
| <div class="text-red-400">620 Ⓝ</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="text-gray-400">Stock: 87</span> | |
| <div class="flex space-x-2"> | |
| <button class="w-6 h-6 bg-blue-600 hover:bg-blue-700 rounded flex items-center justify-center"> | |
| <i class="fas fa-plus text-xs"></i> | |
| </button> | |
| <button class="w-6 h-6 bg-gray-700 hover:bg-gray-600 rounded flex items-center justify-center"> | |
| <i class="fas fa-minus text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Commodity Card --> | |
| <div class="commodity-card bg-gray-800/50 border border-gray-700 rounded-lg p-4 transition-all duration-200 cursor-pointer hover:border-blue-400"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-medium">Luxury Goods</h4> | |
| <span class="text-xs bg-purple-900 text-purple-200 px-2 py-1 rounded">Consumer</span> | |
| </div> | |
| <div class="flex justify-between text-sm mb-3"> | |
| <div> | |
| <div class="text-gray-400">Buy</div> | |
| <div class="text-green-400">1,850 Ⓝ</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-gray-400">Sell</div> | |
| <div class="text-red-400">1,450 Ⓝ</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="text-gray-400">Stock: 23</span> | |
| <div class="flex space-x-2"> | |
| <button class="w-6 h-6 bg-blue-600 hover:bg-blue-700 rounded flex items-center justify-center"> | |
| <i class="fas fa-plus text-xs"></i> | |
| </button> | |
| <button class="w-6 h-6 bg-gray-700 hover:bg-gray-600 rounded flex items-center justify-center"> | |
| <i class="fas fa-minus text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Commodity Card --> | |
| <div class="commodity-card bg-gray-800/50 border border-gray-700 rounded-lg p-4 transition-all duration-200 cursor-pointer hover:border-blue-400"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-medium">Medical Supplies</h4> | |
| <span class="text-xs bg-pink-900 text-pink-200 px-2 py-1 rounded">Pharma</span> | |
| </div> | |
| <div class="flex justify-between text-sm mb-3"> | |
| <div> | |
| <div class="text-gray-400">Buy</div> | |
| <div class="text-green-400">2,300 Ⓝ</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-gray-400">Sell</div> | |
| <div class="text-red-400">1,950 Ⓝ</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="text-gray-400">Stock: 15</span> | |
| <div class="flex space-x-2"> | |
| <button class="w-6 h-6 bg-blue-600 hover:bg-blue-700 rounded flex items-center justify-center"> | |
| <i class="fas fa-plus text-xs"></i> | |
| </button> | |
| <button class="w-6 h-6 bg-gray-700 hover:bg-gray-600 rounded flex items-center justify-center"> | |
| <i class="fas fa-minus text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-4 border-t border-gray-700 flex justify-between items-center"> | |
| <div class="text-sm text-gray-400"> | |
| <span class="text-white">Total:</span> 0 items selected (0 Ⓝ) | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-md"> | |
| Clear | |
| </button> | |
| <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-md flex items-center"> | |
| <i class="fas fa-shopping-cart mr-2"></i> Buy Selected | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Right Sidebar - Ship & Navigation --> | |
| <aside class="w-80 bg-gray-800/80 border-l border-gray-700 p-4 overflow-y-auto hidden lg:block"> | |
| <div class="space-y-6"> | |
| <!-- Ship Display --> | |
| <div class="ship-display bg-gray-900/50 rounded-lg p-4 border border-gray-700"> | |
| <h3 class="text-lg font-semibold mb-3 flex items-center"> | |
| <i class="fas fa-rocket text-blue-400 mr-2"></i> Mercury Starhauler | |
| </h3> | |
| <div class="ship-model w-full h-40 bg-gray-800 rounded mb-4 flex items-center justify-center"> | |
| <i class="fas fa-space-shuttle text-5xl text-blue-400 opacity-50"></i> | |
| </div> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-400">Hull Integrity</span> | |
| <span>92%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-400">Shields</span> | |
| <span>100%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-400">Fuel</span> | |
| <span>78%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <div class="bg-gray-900/50 rounded-lg p-4 border border-gray-700"> | |
| <h3 class="text-lg font-semibold mb-3 flex items-center"> | |
| <i class="fas fa-map-marked-alt text-green-400 mr-2"></i> Navigation | |
| </h3> | |
| <div class="mb-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm text-gray-400">Current Sector</span> | |
| <span class="text-sm font-mono">X-12.5 / Y-7.3</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-md p-3 text-sm"> | |
| <div class="flex justify-between mb-1"> | |
| <span>New Terra Prime</span> | |
| <span class="text-blue-400">0.0 AU</span> | |
| </div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Orion Outpost</span> | |
| <span class="text-gray-400">3.7 AU</span> | |
| </div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Vega Colony</span> | |
| <span class="text-gray-400">5.2 AU</span> | |
| </div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Deneb Trade Hub</span> | |
| <span class="text-gray-400">8.9 AU</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-400">Warp Capability</span> | |
| <span class="text-sm">Class 3</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-400">Fuel Cost</span> | |
| <span class="text-sm">50 Ⓝ/AU</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-400">Travel Time</span> | |
| <span class="text-sm">~2.5 hrs/AU</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-3 border-t border-gray-700"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Enter destination..." class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-4 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button class="w-full mt-3 py-2 bg-blue-600 hover:bg-blue-700 rounded-md flex items-center justify-center"> | |
| <i class="fas fa-paper-plane mr-2"></i> Plot Course | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Notifications --> | |
| <div class="bg-gray-900/50 rounded-lg p-4 border border-gray-700"> | |
| <h3 class="text-lg font-semibold mb-3 flex items-center"> | |
| <i class="fas fa-bell text-yellow-400 mr-2"></i> Alerts | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="p-3 bg-blue-900/30 border border-blue-800 rounded-md text-sm flex items-start"> | |
| <i class="fas fa-info-circle text-blue-400 mt-1 mr-2"></i> | |
| <div> | |
| <div class="font-medium">New trade route detected</div> | |
| <div class="text-gray-400 text-xs">Vega Colony needs Medical Supplies (+15% profit)</div> | |
| </div> | |
| </div> | |
| <div class="p-3 bg-yellow-900/30 border border-yellow-800 rounded-md text-sm flex items-start"> | |
| <i class="fas fa-exclamation-triangle text-yellow-400 mt-1 mr-2"></i> | |
| <div> | |
| <div class="font-medium">Pirates in sector</div> | |
| <div class="text-gray-400 text-xs">Increased activity near Deneb Trade Hub</div> | |
| </div> | |
| </div> | |
| <div class="p-3 bg-purple-900/30 border border-purple-800 rounded-md text-sm flex items-start"> | |
| <i class="fas fa-envelope text-purple-400 mt-1 mr-2"></i> | |
| <div> | |
| <div class="font-medium">Message from Guild</div> | |
| <div class="text-gray-400 text-xs">New contract available at Orion Outpost</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Three.js scene | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| document.getElementById('galaxy-view').appendChild(renderer.domElement); | |
| // Create stars | |
| const starsGeometry = new THREE.BufferGeometry(); | |
| const starsMaterial = new THREE.PointsMaterial({ | |
| color: 0xffffff, | |
| size: 0.1, | |
| transparent: true, | |
| opacity: 0.8 | |
| }); | |
| const starsVertices = []; | |
| 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); | |
| } | |
| starsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starsVertices, 3)); | |
| const stars = new THREE.Points(starsGeometry, starsMaterial); | |
| scene.add(stars); | |
| // Create a nebula | |
| const nebulaGeometry = new THREE.SphereGeometry(100, 32, 32); | |
| const nebulaMaterial = new THREE.MeshBasicMaterial({ | |
| color: 0x440066, | |
| transparent: true, | |
| opacity: 0.2 | |
| }); | |
| const nebula = new THREE.Mesh(nebulaGeometry, nebulaMaterial); | |
| nebula.position.set(50, 0, -200); | |
| scene.add(nebula); | |
| // Create planets | |
| const planets = []; | |
| const planetColors = [0x3498db, 0xe74c3c, 0x2ecc71, 0xf1c40f, 0x9b59b6]; | |
| for (let i = 0; i < 5; i++) { | |
| const size = 5 + Math.random() * 10; | |
| const geometry = new THREE.SphereGeometry(size, 32, 32); | |
| const material = new THREE.MeshPhongMaterial({ | |
| color: planetColors[i % planetColors.length], | |
| shininess: 30 | |
| }); | |
| const planet = new THREE.Mesh(geometry, material); | |
| // Position planets in a ring | |
| const angle = (i / 5) * Math.PI * 2; | |
| const distance = 100 + Math.random() * 50; | |
| planet.position.x = Math.cos(angle) * distance; | |
| planet.position.z = Math.sin(angle) * distance - 150; | |
| planet.position.y = (Math.random() - 0.5) * 50; | |
| // Add glow effect | |
| const glowGeometry = new THREE.SphereGeometry(size * 1.2, 32, 32); | |
| const glowMaterial = new THREE.MeshBasicMaterial({ | |
| color: planetColors[i % planetColors.length], | |
| transparent: true, | |
| opacity: 0.3 | |
| }); | |
| const glow = new THREE.Mesh(glowGeometry, glowMaterial); | |
| planet.add(glow); | |
| scene.add(planet); | |
| planets.push(planet); | |
| } | |
| // Add ambient light | |
| const ambientLight = new THREE.AmbientLight(0x333333); | |
| scene.add(ambientLight); | |
| // Add directional light | |
| const directionalLight = new THREE.DirectionalLight(0xffffff, 1); | |
| directionalLight.position.set(1, 1, 1); | |
| scene.add(directionalLight); | |
| // Set camera position | |
| camera.position.z = 50; | |
| camera.position.y = 30; | |
| // Animation loop | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| // Rotate planets | |
| planets.forEach((planet, index) => { | |
| planet.rotation.y += 0.005; | |
| const angle = (index / planets.length) * Math.PI * 2 + Date.now() * 0.0001; | |
| planet.position.x = Math.cos(angle) * (100 + Math.random() * 50); | |
| planet.position.z = Math.sin(angle) * (100 + Math.random() * 50) - 150; | |
| }); | |
| // Rotate nebula | |
| nebula.rotation.x += 0.0005; | |
| nebula.rotation.y += 0.0005; | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| // Handle window resize | |
| window.addEventListener('resize', () => { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| }); | |
| // Game UI Interactions | |
| document.querySelectorAll('.nav-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| document.querySelectorAll('.commodity-card').forEach(card => { | |
| card.addEventListener('click', function() { | |
| this.classList.toggle('border-blue-400'); | |
| this.classList.toggle('bg-gray-800'); | |
| }); | |
| }); | |
| // GSAP animations for UI elements | |
| gsap.from('.commodity-card', { | |
| duration: 0.5, | |
| y: 20, | |
| opacity: 0, | |
| stagger: 0.1, | |
| ease: "back.out" | |
| }); | |
| gsap.from('nav button', { | |
| duration: 0.5, | |
| x: -20, | |
| opacity: 0, | |
| stagger: 0.1, | |
| ease: "power2.out" | |
| }); | |
| // Pulsing effect for important buttons | |
| setInterval(() => { | |
| const alertBtn = document.querySelector('button[title="Comms"]'); | |
| alertBtn.classList.toggle('pulsate'); | |
| }, 2000); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=GoZippy/zippyverse-vdeepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |