Spaces:

timoon811
/

headertmtmatrix

Running

File size: 10,730 Bytes

eaa758a

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TMT — Traffic Monsters Team</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000;
            overflow: hidden;
            font-family: 'JetBrains Mono', monospace;
            color: #00FF00;
        }
        
        .matrix-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            opacity: 0.3;
        }
        
        .content {
            position: relative;
            z-index: 1;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 0 20px;
        }
        
        .main-title {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: clamp(2rem, 8vw, 5rem);
            margin-bottom: 1.5rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            text-shadow: 0 0 10px #00FF00;
        }
        
        .subtitle {
            font-size: clamp(1rem, 3vw, 1.8rem);
            margin-bottom: 3rem;
            max-width: 800px;
            line-height: 1.5;
            opacity: 0.9;
        }
        
        .buttons-container {
            display: flex;
            gap: 2rem;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .matrix-btn {
            background: rgba(0, 0, 0, 0.6);
            border: 2px solid #00FF00;
            color: white;
            padding: 1rem 2rem;
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        
        .matrix-btn:hover {
            text-shadow: 0 0 5px #fff;
            box-shadow: 0 0 15px #00FF00;
            transform: scale(1.05);
        }
        
        .matrix-btn:active {
            box-shadow: 0 0 20px #00FF00;
        }
        
        .matrix-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.2), transparent);
            transition: all 0.5s ease;
        }
        
        .matrix-btn:hover::before {
            left: 100%;
        }
        
        .char {
            opacity: 0;
        }
        
        .cursor {
            display: inline-block;
            width: 3px;
            height: 1em;
            background-color: #00FF00;
            animation: blink 1s infinite;
            vertical-align: middle;
            margin-left: 2px;
        }
        
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        
        .neon-pulse {
            animation: neonPulse 2s infinite alternate;
        }
        
        @keyframes neonPulse {
            from {
                text-shadow: 0 0 5px #00FF00, 0 0 10px #00FF00;
            }
            to {
                text-shadow: 0 0 10px #00FF00, 0 0 20px #00FF00, 0 0 30px #00FF00;
            }
        }
        
        @media (max-width: 768px) {
            .buttons-container {
                flex-direction: column;
                gap: 1rem;
            }
            
            .main-title {
                font-size: 2.5rem;
            }
            
            .subtitle {
                font-size: 1.2rem;
            }
        }
    </style>
</head>
<body>
    <canvas id="matrix-bg" class="matrix-bg"></canvas>
    
    <div class="content">
        <h1 id="main-title" class="main-title"></h1>
        <p id="subtitle" class="subtitle"></p>
        <div class="buttons-container">
            <button id="enter-btn" class="matrix-btn opacity-0">▶️ ENTER THE NETWORK</button>
            <button id="cases-btn" class="matrix-btn opacity-0">🎞️ VIEW CASE STUDIES</button>
        </div>
    </div>

    <script>
        // Matrix background effect
        const canvas = document.getElementById('matrix-bg');
        const ctx = canvas.getContext('2d');
        
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        const katakana = '01AF9Ω∞';
        const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        const nums = '0123456789';
        
        const alphabet = katakana + latin + nums;
        
        const fontSize = 16;
        const columns = canvas.width / fontSize;
        
        const rainDrops = [];
        
        for (let x = 0; x < columns; x++) {
            rainDrops[x] = 1;
        }
        
        const draw = () => {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            ctx.fillStyle = '#00FF00';
            ctx.font = fontSize + 'px monospace';
            
            for (let i = 0; i < rainDrops.length; i++) {
                const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
                ctx.fillText(text, i * fontSize, rainDrops[i] * fontSize);
                
                if (rainDrops[i] * fontSize > canvas.height && Math.random() > 0.975) {
                    rainDrops[i] = 0;
                }
                rainDrops[i]++;
            }
        };
        
        setInterval(draw, 30);
        
        // Text animation
        const mainTitle = "TMT — TRAFFIC MONSTERS TEAM";
        const subtitle = "We decode markets. We rewire performance.";
        
        const mainTitleElement = document.getElementById('main-title');
        const subtitleElement = document.getElementById('subtitle');
        const enterBtn = document.getElementById('enter-btn');
        const casesBtn = document.getElementById('cases-btn');
        
        // Type main title
        function typeMainTitle() {
            return new Promise((resolve) => {
                let i = 0;
                const typing = setInterval(() => {
                    if (i < mainTitle.length) {
                        const charElement = document.createElement('span');
                        charElement.classList.add('char');
                        charElement.textContent = mainTitle[i];
                        mainTitleElement.appendChild(charElement);
                        
                        gsap.to(charElement, {
                            opacity: 1,
                            duration: 0.1,
                            ease: 'power2.out'
                        });
                        
                        i++;
                    } else {
                        clearInterval(typing);
                        resolve();
                    }
                }, 100);
            });
        }
        
        // Type subtitle
        function typeSubtitle() {
            return new Promise((resolve) => {
                let i = 0;
                const typing = setInterval(() => {
                    if (i < subtitle.length) {
                        const charElement = document.createElement('span');
                        charElement.classList.add('char');
                        charElement.textContent = subtitle[i];
                        subtitleElement.appendChild(charElement);
                        
                        gsap.to(charElement, {
                            opacity: 1,
                            duration: 0.1,
                            ease: 'power2.out'
                        });
                        
                        i++;
                    } else {
                        clearInterval(typing);
                        resolve();
                    }
                }, 50);
            });
        }
        
        // Show buttons
        function showButtons() {
            gsap.to([enterBtn, casesBtn], {
                opacity: 1,
                duration: 1,
                ease: 'power2.out'
            });
            
            // Add neon pulse effect to subtitle
            subtitleElement.classList.add('neon-pulse');
        }
        
        // Start animations
        async function startAnimations() {
            await typeMainTitle();
            await typeSubtitle();
            showButtons();
        }
        
        // Start animations after a short delay
        setTimeout(startAnimations, 500);
        
        // Button actions
        enterBtn.addEventListener('click', () => {
            // Replace with your actual Telegram link
            window.location.href = 'https://t.me/trafficmonstersteam';
        });
        
        casesBtn.addEventListener('click', () => {
            // Smooth scroll to case studies section
            // You'll need to add the ID to your case studies section
            document.getElementById('case-studies')?.scrollIntoView({
                behavior: 'smooth'
            });
        });
        
        // Handle window resize
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
    </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/headertmtmatrix" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>