| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>HYPERSPACE SIMULATOR | TCP/3D Virtual World</title> |
| <script src="https://cdn.tailwindcss.com"></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/three@0.132.2/examples/js/effects/AnaglyphEffect.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;500;700&display=swap'); |
| |
| body { |
| font-family: 'Rajdhani', sans-serif; |
| background-color: #000; |
| color: #0af; |
| overflow-x: hidden; |
| margin: 0; |
| padding: 0; |
| } |
| |
| .orbitron { |
| font-family: 'Orbitron', sans-serif; |
| } |
| |
| .cyber-text { |
| text-shadow: 0 0 10px #0af, 0 0 20px #0af, 0 0 30px #0af; |
| } |
| |
| .cyber-border { |
| border: 1px solid #0af; |
| box-shadow: 0 0 10px #0af, 0 0 20px #0af inset; |
| } |
| |
| .cyber-button { |
| transition: all 0.3s; |
| } |
| |
| .cyber-button:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 5px 15px rgba(0, 170, 255, 0.4); |
| } |
| |
| .anaglyph { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| } |
| |
| .protocol-flow { |
| position: relative; |
| height: 200px; |
| overflow: hidden; |
| } |
| |
| .packet { |
| position: absolute; |
| width: 60px; |
| height: 30px; |
| background: linear-gradient(90deg, #0af, #00ffaa); |
| border-radius: 4px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: bold; |
| color: #000; |
| box-shadow: 0 0 10px #0af; |
| } |
| |
| .terminal { |
| background-color: rgba(0, 10, 20, 0.8); |
| border: 1px solid #0af; |
| font-family: 'Courier New', monospace; |
| height: 300px; |
| overflow-y: auto; |
| padding: 15px; |
| } |
| |
| .terminal-line { |
| margin-bottom: 5px; |
| line-height: 1.4; |
| } |
| |
| .prompt { |
| color: #0af; |
| } |
| |
| .command { |
| color: #0ff; |
| } |
| |
| .response { |
| color: #f0f; |
| } |
| |
| .warning { |
| color: #ff0; |
| } |
| |
| .success { |
| color: #0f0; |
| } |
| |
| .error { |
| color: #f00; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div id="scene-container" class="anaglyph"></div> |
| |
| |
| <div class="container mx-auto px-4 py-12 relative z-10"> |
| |
| <header class="flex flex-col items-center mb-16"> |
| <h1 class="text-6xl font-bold mb-4 orbitron cyber-text">HYPERSPACE SIMULATOR</h1> |
| <h2 class="text-2xl orbitron">TCP/3D Virtual World Engine</h2> |
| <div class="mt-8 flex space-x-4"> |
| <button id="connectBtn" class="cyber-button px-6 py-3 bg-blue-900 text-blue-100 rounded-lg font-bold orbitron"> |
| <i class="fas fa-plug mr-2"></i> INITIATE HANDSHAKE |
| </button> |
| <button id="simulateBtn" class="cyber-button px-6 py-3 bg-purple-900 text-purple-100 rounded-lg font-bold orbitron"> |
| <i class="fas fa-rocket mr-2"></i> LAUNCH SIMULATOR |
| </button> |
| </div> |
| </header> |
| |
| |
| <section class="mb-20 cyber-border p-8 rounded-lg bg-black bg-opacity-70"> |
| <h3 class="text-3xl font-bold mb-6 orbitron cyber-text">TCP 3-WAY HANDSHAKE PROTOCOL</h3> |
| <div class="protocol-flow mb-8" id="handshakeFlow"> |
| |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div class="cyber-border p-4 rounded-lg"> |
| <h4 class="text-xl font-bold mb-2 orbitron">SYN</h4> |
| <p>Synchronize sequence numbers. Client sends SYN packet to server to initiate connection.</p> |
| <div class="mt-4 terminal"> |
| <div class="terminal-line"><span class="prompt">client$</span> <span class="command">send SYN(seq=x)</span></div> |
| <div class="terminal-line response">> Initializing quantum entanglement protocol...</div> |
| </div> |
| </div> |
| <div class="cyber-border p-4 rounded-lg"> |
| <h4 class="text-xl font-bold mb-2 orbitron">SYN-ACK</h4> |
| <p>Server acknowledges client's SYN and sends its own SYN. ACK is x+1, SYN is y.</p> |
| <div class="mt-4 terminal"> |
| <div class="terminal-line"><span class="prompt">server$</span> <span class="command">send SYN-ACK(seq=y, ack=x+1)</span></div> |
| <div class="terminal-line response">> Establishing hyperspace tunnel...</div> |
| </div> |
| </div> |
| <div class="cyber-border p-4 rounded-lg"> |
| <h4 class="text-xl font-bold mb-2 orbitron">ACK</h4> |
| <p>Client acknowledges server's SYN. Sequence number is x+1, ACK is y+1.</p> |
| <div class="mt-4 terminal"> |
| <div class="terminal-line"><span class="prompt">client$</span> <span class="command">send ACK(seq=x+1, ack=y+1)</span></div> |
| <div class="terminal-line success">> Connection established! Ready for hyperspace travel.</div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="mb-20 cyber-border p-8 rounded-lg bg-black bg-opacity-70"> |
| <h3 class="text-3xl font-bold mb-6 orbitron cyber-text">3D VIRTUAL WORLD ENGINE</h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div> |
| <h4 class="text-2xl font-bold mb-4 orbitron">Real-Time Reality Replication</h4> |
| <p class="mb-4">Our quantum rendering engine captures real-world data streams and reconstructs them in a fully interactive 3D environment with sub-atomic precision.</p> |
| <ul class="space-y-2"> |
| <li class="flex items-start"> |
| <i class="fas fa-atom text-blue-400 mt-1 mr-2"></i> |
| <span>Photorealistic environment mapping with Planck-scale detail</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-network-wired text-purple-400 mt-1 mr-2"></i> |
| <span>Neural network-assisted TCP/IP compression for zero-latency streaming</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-vr-cardboard text-green-400 mt-1 mr-2"></i> |
| <span>Full 3D goggles support with retinal projection technology</span> |
| </li> |
| </ul> |
| </div> |
| <div class="flex items-center justify-center"> |
| <div class="cyber-border p-4 rounded-lg w-full h-64 flex items-center justify-center"> |
| <div class="text-center"> |
| <i class="fas fa-vr-cardboard text-6xl mb-4 text-blue-400"></i> |
| <p class="orbitron">3D GOGGLES REQUIRED</p> |
| <p class="text-sm">For full hyperspace immersion</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="mb-20 cyber-border p-8 rounded-lg bg-black bg-opacity-70"> |
| <h3 class="text-3xl font-bold mb-6 orbitron cyber-text">QU |
| </html> |
