Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TMT History</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap"> | |
| <style> | |
| @font-face { | |
| font-family: 'Monument Extended'; | |
| src: url('https://fonts.cdnfonts.com/css/monument-extended') format('woff2'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| body { | |
| font-family: 'JetBrains Mono', monospace; | |
| background-color: #000; | |
| color: #00FF00; | |
| overflow-x: hidden; | |
| } | |
| .monument { | |
| font-family: 'Monument Extended', sans-serif; | |
| } | |
| .matrix-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| opacity: 0.2; | |
| background: #000; | |
| overflow: hidden; | |
| } | |
| .matrix-code { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| justify-content: space-around; | |
| } | |
| .code-column { | |
| display: flex; | |
| flex-direction: column; | |
| color: #00FF00; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 14px; | |
| line-height: 1.2; | |
| animation: fall linear infinite; | |
| } | |
| @keyframes fall { | |
| 0% { | |
| transform: translateY(-100%); | |
| } | |
| 100% { | |
| transform: translateY(100vh); | |
| } | |
| } | |
| .typing { | |
| border-right: 2px solid #00FF00; | |
| animation: blink 0.75s step-end infinite; | |
| } | |
| @keyframes blink { | |
| from, to { border-color: transparent; } | |
| 50% { border-color: #00FF00; } | |
| } | |
| .terminal { | |
| background-color: rgba(0, 0, 0, 0.7); | |
| border: 1px solid #00FF00; | |
| box-shadow: 0 0 20px rgba(0, 255, 0, 0.3); | |
| } | |
| .terminal-header { | |
| border-bottom: 1px solid #00FF00; | |
| background-color: rgba(0, 20, 0, 0.5); | |
| } | |
| .terminal-body { | |
| height: 60vh; | |
| overflow-y: auto; | |
| scrollbar-width: none; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| } | |
| .terminal-body::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .prompt { | |
| color: #00FF00; | |
| } | |
| .cursor { | |
| animation: blink 1s step-end infinite; | |
| } | |
| .glitch { | |
| position: relative; | |
| } | |
| .glitch::before, .glitch::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .glitch::before { | |
| left: 2px; | |
| text-shadow: -2px 0 #00FF00; | |
| clip: rect(44px, 450px, 56px, 0); | |
| animation: glitch-anim 5s infinite linear alternate-reverse; | |
| } | |
| .glitch::after { | |
| left: -2px; | |
| text-shadow: -2px 0 #00FF00; | |
| clip: rect(44px, 450px, 56px, 0); | |
| animation: glitch-anim2 5s infinite linear alternate-reverse; | |
| } | |
| @keyframes glitch-anim { | |
| 0% { clip: rect(31px, 9999px, 94px, 0); } | |
| 10% { clip: rect(112px, 9999px, 76px, 0); } | |
| 20% { clip: rect(85px, 9999px, 77px, 0); } | |
| 30% { clip: rect(27px, 9999px, 97px, 0); } | |
| 40% { clip: rect(64px, 9999px, 98px, 0); } | |
| 50% { clip: rect(61px, 9999px, 85px, 0); } | |
| 60% { clip: rect(99px, 9999px, 114px, 0); } | |
| 70% { clip: rect(34px, 9999px, 115px, 0); } | |
| 80% { clip: rect(98px, 9999px, 129px, 0); } | |
| 90% { clip: rect(43px, 9999px, 96px, 0); } | |
| 100% { clip: rect(82px, 9999px, 64px, 0); } | |
| } | |
| @keyframes glitch-anim2 { | |
| 0% { clip: rect(65px, 9999px, 119px, 0); } | |
| 10% { clip: rect(33px, 9999px, 69px, 0); } | |
| 20% { clip: rect(82px, 9999px, 73px, 0); } | |
| 30% { clip: rect(79px, 9999px, 37px, 0); } | |
| 40% { clip: rect(28px, 9999px, 17px, 0); } | |
| 50% { clip: rect(45px, 9999px, 78px, 0); } | |
| 60% { clip: rect(65px, 9999px, 53px, 0); } | |
| 70% { clip: rect(58px, 9999px, 70px, 0); } | |
| 80% { clip: rect(98px, 9999px, 51px, 0); } | |
| 90% { clip: rect(28px, 9999px, 99px, 0); } | |
| 100% { clip: rect(68px, 9999px, 109px, 0); } | |
| } | |
| .command { | |
| color: #00FF00; | |
| font-weight: bold; | |
| } | |
| .file { | |
| color: #00FF00; | |
| font-weight: bold; | |
| } | |
| .year { | |
| color: #00FF00; | |
| font-weight: bold; | |
| } | |
| .value { | |
| color: #00FF00; | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-green-500"> | |
| <!-- Matrix Code Background --> | |
| <div class="matrix-bg" id="matrixBg"></div> | |
| <div class="container mx-auto px-4 py-12 max-w-4xl"> | |
| <div class="terminal relative"> | |
| <div class="terminal-header p-3 flex items-center"> | |
| <div class="flex space-x-2 mr-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-sm">TMT_HISTORY.TXT</div> | |
| </div> | |
| <div class="terminal-body p-4" id="terminalOutput"> | |
| <!-- Content will be added here by JavaScript --> | |
| </div> | |
| <div class="terminal-footer p-4 border-t border-green-500 flex items-center"> | |
| <span class="prompt mr-2">root@tmt:~$</span> | |
| <span id="typingCursor" class="cursor">_</span> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Matrix code background | |
| function createMatrixEffect() { | |
| const matrixBg = document.getElementById('matrixBg'); | |
| const chars = "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン"; | |
| for (let i = 0; i < 20; i++) { | |
| const column = document.createElement('div'); | |
| column.className = 'code-column'; | |
| column.style.left = `${Math.random() * 100}%`; | |
| column.style.animationDuration = `${5 + Math.random() * 10}s`; | |
| column.style.animationDelay = `${Math.random() * 5}s`; | |
| for (let j = 0; j < 30; j++) { | |
| const char = document.createElement('span'); | |
| char.textContent = chars.charAt(Math.floor(Math.random() * chars.length)); | |
| char.style.opacity = Math.random(); | |
| column.appendChild(char); | |
| } | |
| matrixBg.appendChild(column); | |
| } | |
| } | |
| // Typewriter effect for the history | |
| function typeHistory() { | |
| const history = [ | |
| {text: "TMT_HISTORY.TXT", class: "file glitch", delay: 1000, dataText: "TMT_HISTORY.TXT"}, | |
| {text: "INITIALIZING TMT CORE PROTOCOLS...", class: "command", delay: 500}, | |
| {text: "", delay: 1000}, | |
| {text: "YEAR 2018: First traces of TMT detected in the digital ecosystem. A small group of performance hackers begins rewriting traffic acquisition algorithms.", delay: 50}, | |
| {text: "", delay: 500}, | |
| {text: "YEAR 2020: The collective evolves into a decentralized network. First major breakthrough - cracking the Facebook ad algorithm during pandemic market shifts.", delay: 50}, | |
| {text: "", delay: 500}, | |
| {text: "YEAR 2022: Full operational capacity achieved. TMT now controls traffic flows across 15+ ecosystems. $1M/month in managed spend becomes standard.", delay: 50}, | |
| {text: "", delay: 1000}, | |
| {text: "CORE VALUES:", class: "command", delay: 500}, | |
| {text: "> PERFORMANCE IS TRUTH: Data over opinions. We follow the numbers wherever they lead.", delay: 30}, | |
| {text: "> ADAPT OR DIE: Market conditions change hourly. Our systems evolve in real-time.", delay: 30}, | |
| {text: "> CONTROL THE FLOW: Traffic is the lifeblood of digital. We don't just buy it - we engineer it.", delay: 30}, | |
| {text: "", delay: 1000}, | |
| {text: "MISSION STATEMENT:", class: "command", delay: 500}, | |
| {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: 30}, | |
| {text: "", delay: 1000}, | |
| {text: "END OF FILE", class: "command", delay: 1000} | |
| ]; | |
| const terminalOutput = document.getElementById('terminalOutput'); | |
| let i = 0; | |
| function typeNextLine() { | |
| if (i < history.length) { | |
| const line = history[i]; | |
| if (line.text === "") { | |
| const br = document.createElement('div'); | |
| terminalOutput.appendChild(br); | |
| i++; | |
| setTimeout(typeNextLine, line.delay); | |
| return; | |
| } | |
| const lineElement = document.createElement('div'); | |
| lineElement.className = line.class || ''; | |
| lineElement.textContent = line.text; | |
| terminalOutput.appendChild(lineElement); | |
| // Add typing effect for non-empty lines | |
| if (line.text) { | |
| lineElement.style.display = 'inline-block'; | |
| lineElement.style.overflow = 'hidden'; | |
| lineElement.style.whiteSpace = 'nowrap'; | |
| lineElement.style.width = '0'; | |
| const textWidth = lineElement.scrollWidth; | |
| let currentWidth = 0; | |
| const typingSpeed = 5; // characters per 50ms | |
| const typingInterval = setInterval(() => { | |
| currentWidth += typingSpeed; | |
| lineElement.style.width = `${currentWidth}px`; | |
| if (currentWidth >= textWidth) { | |
| clearInterval(typingInterval); | |
| lineElement.style.whiteSpace = 'pre-wrap'; | |
| lineElement.style.width = 'auto'; | |
| terminalOutput.appendChild(document.createElement('br')); | |
| i++; | |
| setTimeout(typeNextLine, line.delay); | |
| } | |
| }, 50); | |
| } else { | |
| terminalOutput.appendChild(lineElement); | |
| i++; | |
| setTimeout(typeNextLine, line.delay); | |
| } | |
| } else { | |
| // Animation complete | |
| document.getElementById('typingCursor').style.visibility = 'hidden'; | |
| } | |
| } | |
| // Start typing after a short delay | |
| setTimeout(typeNextLine, 1000); | |
| } | |
| // Initialize everything when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', () => { | |
| createMatrixEffect(); | |
| typeHistory(); | |
| // Random glitch effect | |
| setInterval(() => { | |
| const glitchElements = document.querySelectorAll('.glitch'); | |
| glitchElements.forEach(el => { | |
| if (Math.random() > 0.7) { | |
| el.classList.add('glitch-active'); | |
| setTimeout(() => { | |
| el.classList.remove('glitch-active'); | |
| }, 200); | |
| } | |
| }); | |
| }, 5000); | |
| }); | |
| </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/tmtmatrix0019" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |