Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TMT Postloader - Stay in the Illusion</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet"> | |
| <style> | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| @keyframes glitch { | |
| 0% { text-shadow: 0.05em 0 0 #00ff00, -0.05em -0.025em 0 #ff0000, -0.025em 0.05em 0 #0000ff; } | |
| 14% { text-shadow: 0.05em 0 0 #00ff00, -0.05em -0.025em 0 #ff0000, -0.025em 0.05em 0 #0000ff; } | |
| 15% { text-shadow: -0.05em -0.025em 0 #00ff00, 0.025em 0.025em 0 #ff0000, -0.05em -0.05em 0 #0000ff; } | |
| 49% { text-shadow: -0.05em -0.025em 0 #00ff00, 0.025em 0.025em 0 #ff0000, -0.05em -0.05em 0 #0000ff; } | |
| 50% { text-shadow: 0.025em 0.05em 0 #00ff00, 0.05em 0 0 #ff0000, 0 -0.05em 0 #0000ff; } | |
| 99% { text-shadow: 0.025em 0.05em 0 #00ff00, 0.05em 0 0 #ff0000, 0 -0.05em 0 #0000ff; } | |
| 100% { text-shadow: -0.025em 0 0 #00ff00, -0.025em -0.025em 0 #ff0000, -0.025em -0.05em 0 #0000ff; } | |
| } | |
| .cursor-blink { | |
| animation: blink 1s step-end infinite; | |
| } | |
| .glitch-effect { | |
| animation: glitch 650ms infinite; | |
| } | |
| body { | |
| font-family: 'VT323', monospace; | |
| background-color: #000; | |
| color: #00FF00; | |
| overflow: hidden; | |
| height: 100vh; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .typing { | |
| border-right: 0.15em solid #00FF00; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| display: inline-block; | |
| } | |
| .noise { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), | |
| linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); | |
| background-size: 100% 2px, 3px 100%; | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-green-500 flex items-center justify-center h-screen"> | |
| <!-- Landing Page (before clicking the blue pill) --> | |
| <div id="landing" class="text-center p-8"> | |
| <h1 class="text-4xl mb-8 font-mono">TMT</h1> | |
| <p class="text-xl mb-12 font-mono">The choice is yours</p> | |
| <div class="flex justify-center space-x-8"> | |
| <button id="bluePill" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full transition-all duration-300 transform hover:scale-105"> | |
| Stay in the Illusion | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Postloader Sequence (hidden initially) --> | |
| <div id="postloader" class="hidden font-mono text-2xl p-8 max-w-2xl mx-auto"> | |
| <div id="terminal" class="relative"> | |
| <div id="line1" class="mb-4"></div> | |
| <div id="line2" class="mb-4"></div> | |
| <div id="cursor" class="cursor-blink">_</div> | |
| <div id="glitch" class="hidden absolute inset-0 noise"></div> | |
| </div> | |
| </div> | |
| <script> | |
| document.getElementById('bluePill').addEventListener('click', function() { | |
| // Hide landing page | |
| document.getElementById('landing').classList.add('hidden'); | |
| // Show postloader | |
| const postloader = document.getElementById('postloader'); | |
| postloader.classList.remove('hidden'); | |
| // Start the sequence | |
| setTimeout(() => { | |
| // Show cursor | |
| document.getElementById('cursor').textContent = '>_'; | |
| // Type first line | |
| setTimeout(() => { | |
| typeText('> You chose the illusion.', 'line1', () => { | |
| // Type second line after first completes | |
| setTimeout(() => { | |
| typeText('> Sleep well, Operator.', 'line2', () => { | |
| // Show glitch effect | |
| setTimeout(() => { | |
| document.getElementById('glitch').classList.remove('hidden'); | |
| document.getElementById('cursor').classList.add('hidden'); | |
| // Glitch effect | |
| setTimeout(() => { | |
| document.getElementById('terminal').classList.add('glitch-effect'); | |
| // Remove glitch and fade to black | |
| setTimeout(() => { | |
| document.getElementById('glitch').classList.add('hidden'); | |
| document.getElementById('terminal').classList.remove('glitch-effect'); | |
| // Fade to black | |
| postloader.style.opacity = '1'; | |
| let opacity = 1; | |
| const fadeInterval = setInterval(() => { | |
| opacity -= 0.05; | |
| postloader.style.opacity = opacity; | |
| if (opacity <= 0) { | |
| clearInterval(fadeInterval); | |
| postloader.classList.add('hidden'); | |
| // Lock the user in black screen | |
| document.body.classList.add('cursor-none'); | |
| document.body.style.cursor = 'none'; | |
| // Disable scrolling | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| }, 100); | |
| }, 500); | |
| }, 300); | |
| }, 1000); | |
| }); | |
| }, 500); | |
| }); | |
| }, 1000); | |
| }, 500); | |
| }); | |
| function typeText(text, elementId, callback) { | |
| const element = document.getElementById(elementId); | |
| let i = 0; | |
| element.innerHTML = ''; | |
| function typing() { | |
| if (i < text.length) { | |
| element.innerHTML += text.charAt(i); | |
| i++; | |
| setTimeout(typing, 100 + Math.random() * 50); // Random typing speed variation | |
| } else { | |
| if (callback) callback(); | |
| } | |
| } | |
| typing(); | |
| } | |
| </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=timoon811/postloadermatrix" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |