| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>TMT History Block</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet"> |
| <style> |
| body { |
| background-color: #000; |
| overflow-x: hidden; |
| font-family: 'VT323', monospace; |
| } |
| |
| .screen-noise { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABOSURBVGhD7cExAQAwDMCg+zfdmRgQ8JNkS5IkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSXq1BxQ8ARQ3g5l6AAAAAElFTkSuQmCC'); |
| opacity: 0.02; |
| pointer-events: none; |
| } |
| |
| .container { |
| position: relative; |
| z-index: 10; |
| } |
| |
| .typing { |
| border-right: 2px solid #00FF00; |
| animation: blink-caret 0.75s step-end infinite; |
| } |
| |
| @keyframes blink-caret { |
| from, to { border-color: transparent } |
| 50% { border-color: #00FF00; } |
| } |
| |
| .glitch { |
| animation: glitch-effect 0.2s linear; |
| } |
| |
| @keyframes glitch-effect { |
| 0% { text-shadow: 0.05em 0 0 #00ff00, -0.05em -0.025em 0 #00ff00; } |
| 14% { text-shadow: 0.05em 0 0 #00ff00, -0.05em -0.025em 0 #00ff00; } |
| 15% { text-shadow: -0.05em -0.025em 0 #00ff00, 0.025em 0.025em 0 #00ff00; } |
| 49% { text-shadow: -0.05em -0.025em 0 #00ff00, 0.025em 0.025em 0 #00ff00; } |
| 50% { text-shadow: 0.025em 0.05em 0 #00ff00, 0.05em 0 0 #00ff00; } |
| 99% { text-shadow: 0.025em 0.05em 0 #00ff00, 0.05em 0 0 #00ff00; } |
| 100% { text-shadow: -0.025em 0 0 #00ff00, -0.025em -0.025em 0 #00ff00; } |
| } |
| |
| .highlight { |
| text-decoration: underline; |
| text-decoration-color: rgba(0, 255, 0, 0.3); |
| text-underline-offset: 2px; |
| } |
| |
| .flicker { |
| animation: flicker 2s infinite alternate; |
| } |
| |
| @keyframes flicker { |
| 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { |
| opacity: 1; |
| } |
| 20%, 22%, 24%, 55% { |
| opacity: 0.4; |
| } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen flex items-center justify-center p-4"> |
| <div class="screen-noise"></div> |
| |
| <div class="container max-w-3xl mx-auto p-6 bg-black text-green-500 text-lg md:text-xl font-mono leading-relaxed"> |
| <div id="terminal-content" class="whitespace-pre-line"></div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const content = document.getElementById('terminal-content'); |
| const lines = [ |
| {text: "TMT_HISTORY.TXT", delay: 0, glitch: false, typing: true}, |
| {text: "INITIALIZING TMT CORE PROTOCOLS...", delay: 1000, glitch: false, typing: true}, |
| {text: "", delay: 1500, glitch: false, typing: false}, |
| {text: "YEAR 2018:", delay: 2000, glitch: true, typing: true, highlight: true}, |
| {text: "First traces of TMT detected in the digital ecosystem. A small group of performance hackers begins rewriting traffic acquisition algorithms.", delay: 100, glitch: false, typing: true}, |
| {text: "", delay: 1500, glitch: false, typing: false}, |
| {text: "YEAR 2020:", delay: 2000, glitch: true, typing: true, highlight: true}, |
| {text: "The collective evolves into a decentralized network. First major breakthrough - cracking the Facebook ad algorithm during pandemic market shifts.", delay: 100, glitch: false, typing: true}, |
| {text: "", delay: 1500, glitch: false, typing: false}, |
| {text: "YEAR 2022:", delay: 2000, glitch: true, typing: true, highlight: true}, |
| {text: "Full operational capacity achieved. TMT now controls traffic flows across 15+ ecosystems. $1M/month in managed spend becomes standard.", delay: 100, glitch: false, typing: true}, |
| {text: "", delay: 1500, glitch: false, typing: false}, |
| {text: "CORE VALUES:", delay: 2000, glitch: true, typing: true, highlight: true}, |
| {text: "> PERFORMANCE IS TRUTH: Data over opinions. We follow the numbers wherever they lead.", delay: 100, glitch: false, typing: true}, |
| {text: "> ADAPT OR DIE: Market conditions change hourly. Our systems evolve in real-time.", delay: 100, glitch: false, typing: true}, |
| {text: "> CONTROL THE FLOW: Traffic is the lifeblood of digital. We don't just buy it — we engineer it.", delay: 100, glitch: false, typing: true}, |
| {text: "", delay: 1500, glitch: false, typing: false}, |
| {text: "MISSION STATEMENT:", delay: 2000, glitch: true, typing: true, highlight: true}, |
| {text: "To dominate performance marketing through algorithmic precision, infrastructure hacking, and relentless optimization. We exist to push the boundaries of what's possible in traffic acquisition.", delay: 100, glitch: false, typing: true}, |
| {text: "", delay: 1500, glitch: false, typing: false}, |
| {text: "END OF FILE", delay: 2000, glitch: false, typing: true, flicker: true} |
| ]; |
| |
| let currentLine = 0; |
| let currentChar = 0; |
| let totalDelay = 0; |
| |
| function typeWriter() { |
| if (currentLine >= lines.length) return; |
| |
| const line = lines[currentLine]; |
| |
| if (currentChar === 0) { |
| totalDelay += line.delay; |
| } |
| |
| setTimeout(() => { |
| if (currentChar < line.text.length) { |
| let span = document.getElementById(`line-${currentLine}`); |
| |
| if (!span) { |
| span = document.createElement('span'); |
| span.id = `line-${currentLine}`; |
| if (line.typing) span.classList.add('typing'); |
| content.appendChild(span); |
| |
| if (currentChar === 0 && line.glitch) { |
| span.classList.add('glitch'); |
| setTimeout(() => span.classList.remove('glitch'), 200); |
| } |
| |
| if (line.highlight) { |
| span.classList.add('highlight'); |
| } |
| |
| if (line.flicker) { |
| span.classList.add('flicker'); |
| } |
| } |
| |
| span.textContent = line.text.substring(0, currentChar + 1); |
| currentChar++; |
| typeWriter(); |
| } else { |
| if (line.typing) { |
| const span = document.getElementById(`line-${currentLine}`); |
| if (span) span.classList.remove('typing'); |
| } |
| |
| if (currentLine < lines.length - 1) { |
| content.appendChild(document.createElement('br')); |
| } |
| |
| currentLine++; |
| currentChar = 0; |
| typeWriter(); |
| } |
| }, currentChar === 0 ? line.delay : 30 + Math.random() * 20); |
| } |
| |
| typeWriter(); |
| |
| |
| let noiseElement = document.querySelector('.screen-noise'); |
| window.addEventListener('scroll', function() { |
| const scrollPosition = window.scrollY; |
| const noiseIntensity = Math.min(0.05 + scrollPosition / 10000, 0.1); |
| noiseElement.style.opacity = noiseIntensity; |
| }); |
| }); |
| </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/history2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
