Spaces:
Running
Running
File size: 8,236 Bytes
c5aa7b9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 |
<!DOCTYPE html>
<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> |