Spaces:

timoon811
/

tmtmatrix0019

Running

App Files Files Community

timoon811 commited on Apr 29, 2025

Commit

09dcdab

verified ·

1 Parent(s): 2975b13

Add 3 files

Browse files

Files changed (3) hide show

README.md +5 -3
index.html +685 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Tmtmatrix0019
-emoji: 😻
 colorFrom: green
 colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: tmtmatrix0019
+emoji: 🐳
 colorFrom: green
 colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,685 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <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: 'Inter', sans-serif;
+            background-color: #000;
+            color: #00FF00;
+            overflow-x: hidden;
+            scroll-behavior: smooth;
+        }
+        .monument {
+            font-family: 'Monument Extended', sans-serif;
+        }
+        .mono {
+            font-family: 'JetBrains Mono', monospace;
+        }
+        .matrix-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            opacity: 0.3;
+            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);
+            }
+        }
+        .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 #ff00ff;
+            clip: rect(44px, 450px, 56px, 0);
+            animation: glitch-anim 5s infinite linear alternate-reverse;
+        }
+        .glitch::after {
+            left: -2px;
+            text-shadow: -2px 0 #00ffff;
+            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); }
+        }
+        .crt::after {
+            content: " ";
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            background: rgba(0, 255, 0, 0.03);
+            pointer-events: none;
+            z-index: 2;
+        }
+        .crt::before {
+            content: " ";
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            background: linear-gradient(rgba(0, 0, 0, 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));
+            z-index: 2;
+            background-size: 100% 2px, 3px 100%;
+            pointer-events: none;
+        }
+        .typing {
+            border-right: 2px solid #00FF00;
+            animation: blink 0.75s step-end infinite;
+        }
+        @keyframes blink {
+            from, to { border-color: transparent; }
+            50% { border-color: #00FF00; }
+        }
+        .pill-btn {
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .pill-btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.4), transparent);
+            transition: all 0.5s ease;
+        }
+        .pill-btn:hover::before {
+            left: 100%;
+        }
+        .red-pill:hover {
+            animation: vibrate 0.3s linear infinite;
+        }
+        .blue-pill:hover {
+            opacity: 0.5;
+        }
+        @keyframes vibrate {
+            0% { transform: translateX(0); }
+            25% { transform: translateX(-2px); }
+            50% { transform: translateX(0); }
+            75% { transform: translateX(2px); }
+            100% { transform: translateX(0); }
+        }
+        .case-card {
+            transition: all 0.3s ease;
+            box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
+        }
+        .case-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
+        }
+        .flicker {
+            animation: flicker 5s infinite alternate;
+        }
+        @keyframes flicker {
+            0%, 18%, 22%, 25%, 53%, 57%, 100% {
+                opacity: 1;
+            }
+            20%, 24%, 55% {
+                opacity: 0.5;
+            }
+        }
+        .scroll-top {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% {
+                box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7);
+            }
+            70% {
+                box-shadow: 0 0 0 10px rgba(0, 255, 0, 0);
+            }
+            100% {
+                box-shadow: 0 0 0 0 rgba(0, 255, 0, 0);
+            }
+        }
+    </style>
+</head>
+<body class="crt">
+    <!-- Matrix Code Background -->
+    <div class="matrix-bg" id="matrixBg"></div>
+    <!-- Hero Section -->
+    <section class="min-h-screen flex flex-col justify-center items-center relative px-4">
+        <div class="text-center max-w-4xl mx-auto">
+            <h1 class="monument text-4xl md:text-6xl lg:text-7xl mb-6 glitch" data-text="TMT — TRAFFIC MONSTERS TEAM">
+                <span id="titleText"></span>
+            </h1>
+            <p class="mono text-xl md:text-2xl mb-10">
+                <span id="subtitleText" class="typing"></span>
+            </p>
+            <div class="flex flex-col sm:flex-row justify-center gap-4">
+                <a href="#" class="pill-btn border border-green-500 text-green-500 px-8 py-3 rounded-sm hover:bg-green-500 hover:text-black transition-all duration-300 flex items-center justify-center gap-2">
+                    <i class="fas fa-play"></i> Enter the Network
+                </a>
+                <a href="#cases" class="pill-btn border border-green-500 text-green-500 px-8 py-3 rounded-sm hover:bg-green-500 hover:text-black transition-all duration-300 flex items-center justify-center gap-2">
+                    <i class="fas fa-film"></i> Watch Completed Missions
+                </a>
+            </div>
+        </div>
+        <div class="absolute bottom-10 left-0 right-0 flex justify-center">
+            <a href="#origin" class="animate-bounce">
+                <i class="fas fa-chevron-down text-green-500 text-2xl"></i>
+            </a>
+        </div>
+    </section>
+    <!-- The Origin Code -->
+    <section id="origin" class="py-20 px-4 max-w-4xl mx-auto">
+        <h2 class="monument text-3xl md:text-4xl mb-4 text-center flicker">THE ORIGIN CODE</h2>
+        <p class="mono text-green-500 text-center mb-10">"Before control... there was chaos."</p>
+        <div class="border border-green-500 p-6 md:p-8 relative">
+            <div class="absolute top-0 left-0 w-4 h-4 border-t border-l border-green-500"></div>
+            <div class="absolute top-0 right-0 w-4 h-4 border-t border-r border-green-500"></div>
+            <div class="absolute bottom-0 left-0 w-4 h-4 border-b border-l border-green-500"></div>
+            <div class="absolute bottom-0 right-0 w-4 h-4 border-b border-r border-green-500"></div>
+            <p class="mono text-lg leading-relaxed">
+                Once, the digital realms were wild — endless, uncontrolled, unpredictable. In 2022, a group of architects emerged. They did not seek to follow the flow — they sought to command it. Thus, the Traffic Monsters Team was born. Forged in the heart of the Data Wars, molded by broken funnels and lost offers, they built their own Matrix — a system where traffic obeys and strategies evolve. For three years, TMT has not survived the system. They have rewritten its rules.
+            </p>
+        </div>
+    </section>
+    <!-- Capabilities Block -->
+    <section class="py-20 px-4 max-w-6xl mx-auto">
+        <h2 class="monument text-3xl md:text-4xl mb-16 text-center flicker">MASTERING THE SYSTEMS</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <!-- Offer Mapping -->
+            <div class="border border-green-500 p-6 hover:bg-black hover:bg-opacity-30 transition-all duration-300">
+                <div class="flex items-center gap-4 mb-4">
+                    <div class="text-green-500 text-2xl">
+                        <i class="fas fa-map-marked-alt"></i>
+                    </div>
+                    <h3 class="monument text-xl">Offer Mapping</h3>
+                </div>
+                <p class="mono text-gray-300">Precision targeting of high-converting offers across global markets with real-time optimization.</p>
+            </div>
+            <!-- Multi-channel Traffic Execution -->
+            <div class="border border-green-500 p-6 hover:bg-black hover:bg-opacity-30 transition-all duration-300">
+                <div class="flex items-center gap-4 mb-4">
+                    <div class="text-green-500 text-2xl">
+                        <i class="fas fa-project-diagram"></i>
+                    </div>
+                    <h3 class="monument text-xl">Multi-channel Traffic Execution</h3>
+                </div>
+                <p class="mono text-gray-300">Omnichannel distribution across paid, organic, and arbitrage networks for maximum reach.</p>
+            </div>
+            <!-- Keitaro Tracking & API Control -->
+            <div class="border border-green-500 p-6 hover:bg-black hover:bg-opacity-30 transition-all duration-300">
+                <div class="flex items-center gap-4 mb-4">
+                    <div class="text-green-500 text-2xl">
+                        <i class="fas fa-chart-line"></i>
+                    </div>
+                    <h3 class="monument text-xl">Keitaro Tracking & API Control</h3>
+                </div>
+                <p class="mono text-gray-300">Advanced tracking infrastructure with full API integration for real-time data sovereignty.</p>
+            </div>
+            <!-- Creative Manufacturing -->
+            <div class="border border-green-500 p-6 hover:bg-black hover:bg-opacity-30 transition-all duration-300">
+                <div class="flex items-center gap-4 mb-4">
+                    <div class="text-green-500 text-2xl">
+                        <i class="fas fa-vr-cardboard"></i>
+                    </div>
+                    <h3 class="monument text-xl">Creative Manufacturing</h3>
+                </div>
+                <p class="mono text-gray-300">UGC, deepfake, and hyper-personalized content production at industrial scale.</p>
+            </div>
+            <!-- Funnel and App Monetization -->
+            <div class="border border-green-500 p-6 hover:bg-black hover:bg-opacity-30 transition-all duration-300">
+                <div class="flex items-center gap-4 mb-4">
+                    <div class="text-green-500 text-2xl">
+                        <i class="fas fa-funnel-dollar"></i>
+                    </div>
+                    <h3 class="monument text-xl">Funnel and App Monetization</h3>
+                </div>
+                <p class="mono text-gray-300">Full-stack monetization architectures from top-of-funnel to retention optimization.</p>
+            </div>
+            <!-- Additional capability -->
+            <div class="border border-green-500 p-6 hover:bg-black hover:bg-opacity-30 transition-all duration-300">
+                <div class="flex items-center gap-4 mb-4">
+                    <div class="text-green-500 text-2xl">
+                        <i class="fas fa-brain"></i>
+                    </div>
+                    <h3 class="monument text-xl">Predictive Analytics</h3>
+                </div>
+                <p class="mono text-gray-300">AI-driven forecasting models that anticipate market shifts before they occur.</p>
+            </div>
+        </div>
+    </section>
+    <!-- Metrics Block -->
+    <section class="py-20 px-4 bg-black bg-opacity-50">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="monument text-3xl md:text-4xl mb-16 text-center flicker">DATA SOVEREIGNTY</h2>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 text-center">
+                <div class="border border-green-500 p-6">
+                    <div class="monument text-4xl mb-2" id="trafficCounter">0</div>
+                    <p class="mono uppercase text-sm">Traffic Processed</p>
+                </div>
+                <div class="border border-green-500 p-6">
+                    <div class="monument text-4xl mb-2" id="operatorsCounter">0</div>
+                    <p class="mono uppercase text-sm">Media Operators</p>
+                </div>
+                <div class="border border-green-500 p-6">
+                    <div class="monument text-4xl mb-2" id="offersCounter">0</div>
+                    <p class="mono uppercase text-sm">Offers Deployed</p>
+                </div>
+                <div class="border border-green-500 p-6">
+                    <div class="monument text-4xl mb-2" id="sourcesCounter">0</div>
+                    <p class="mono uppercase text-sm">Traffic Sources Controlled</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Case Studies -->
+    <section id="cases" class="py-20 px-4 max-w-6xl mx-auto">
+        <h2 class="monument text-3xl md:text-4xl mb-16 text-center flicker">COMPLETED MISSIONS</h2>
+        <div class="relative">
+            <div class="overflow-x-auto pb-8">
+                <div class="flex space-x-6 w-max">
+                    <!-- Case 1 -->
+                    <div class="case-card w-64 flex-shrink-0 border border-green-500 p-6 bg-black bg-opacity-50">
+                        <div class="mb-4">
+                            <span class="mono text-xs text-green-500">CLASSIFIED</span>
+                            <h3 class="monument text-xl mt-1">Operation Green Gambit</h3>
+                        </div>
+                        <div class="mono text-sm space-y-2">
+                            <p><span class="text-gray-400">Source:</span> Paid Social</p>
+                            <p><span class="text-gray-400">Vertical:</span> Gambling</p>
+                            <p><span class="text-gray-400">CTR:</span> 4.8%</p>
+                            <p><span class="text-gray-400">ROI:</span> 320%</p>
+                            <p><span class="text-gray-400">CR:</span> 9.2%</p>
+                        </div>
+                    </div>
+                    <!-- Case 2 -->
+                    <div class="case-card w-64 flex-shrink-0 border border-green-500 p-6 bg-black bg-opacity-50">
+                        <div class="mb-4">
+                            <span class="mono text-xs text-green-500">CLASSIFIED</span>
+                            <h3 class="monument text-xl mt-1">Project Nutra Nexus</h3>
+                        </div>
+                        <div class="mono text-sm space-y-2">
+                            <p><span class="text-gray-400">Source:</span> Native Ads</p>
+                            <p><span class="text-gray-400">Vertical:</span> Nutra</p>
+                            <p><span class="text-gray-400">CTR:</span> 3.5%</p>
+                            <p><span class="text-gray-400">ROI:</span> 280%</p>
+                            <p><span class="text-gray-400">CR:</span> 7.8%</p>
+                        </div>
+                    </div>
+                    <!-- Case 3 -->
+                    <div class="case-card w-64 flex-shrink-0 border border-green-500 p-6 bg-black bg-opacity-50">
+                        <div class="mb-4">
+                            <span class="mono text-xs text-green-500">CLASSIFIED</span>
+                            <h3 class="monument text-xl mt-1">Black Finance Protocol</h3>
+                        </div>
+                        <div class="mono text-sm space-y-2">
+                            <p><span class="text-gray-400">Source:</span> Push Notifications</p>
+                            <p><span class="text-gray-400">Vertical:</span> Finance</p>
+                            <p><span class="text-gray-400">CTR:</span> 5.2%</p>
+                            <p><span class="text-gray-400">ROI:</span> 410%</p>
+                            <p><span class="text-gray-400">CR:</span> 11.3%</p>
+                        </div>
+                    </div>
+                    <!-- Case 4 -->
+                    <div class="case-card w-64 flex-shrink-0 border border-green-500 p-6 bg-black bg-opacity-50">
+                        <div class="mb-4">
+                            <span class="mono text-xs text-green-500">CLASSIFIED</span>
+                            <h3 class="monument text-xl mt-1">SaaS Dominance</h3>
+                        </div>
+                        <div class="mono text-sm space-y-2">
+                            <p><span class="text-gray-400">Source:</span> Google Ads</p>
+                            <p><span class="text-gray-400">Vertical:</span> SaaS</p>
+                            <p><span class="text-gray-400">CTR:</span> 6.1%</p>
+                            <p><span class="text-gray-400">ROI:</span> 380%</p>
+                            <p><span class="text-gray-400">CR:</span> 8.9%</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="text-center mt-10">
+            <a href="#" class="pill-btn border border-green-500 text-green-500 px-8 py-3 rounded-sm hover:bg-green-500 hover:text-black transition-all duration-300 inline-flex items-center gap-2">
+                <i class="fas fa-lock-open"></i> Request Full Mission Reports
+            </a>
+        </div>
+    </section>
+    <!-- The Architect -->
+    <section class="py-20 px-4 max-w-6xl mx-auto">
+        <h2 class="monument text-3xl md:text-4xl mb-16 text-center flicker">THE ARCHITECT</h2>
+        <div class="flex flex-col lg:flex-row items-center gap-10">
+            <div class="relative lg:w-1/2">
+                <div class="border border-green-500 p-1 relative">
+                    <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Timur" class="w-full h-auto">
+                    <div class="absolute inset-0 bg-green-500 opacity-10 pointer-events-none"></div>
+                </div>
+                <div class="absolute -top-4 -left-4 w-20 h-20 border-t border-l border-green-500"></div>
+                <div class="absolute -top-4 -right-4 w-20 h-20 border-t border-r border-green-500"></div>
+                <div class="absolute -bottom-4 -left-4 w-20 h-20 border-b border-l border-green-500"></div>
+                <div class="absolute -bottom-4 -right-4 w-20 h-20 border-b border-r border-green-500"></div>
+            </div>
+            <div class="lg:w-1/2">
+                <h3 class="monument text-2xl mb-4">Timur: Architect of Controlled Chaos</h3>
+                <p class="mono text-lg mb-6 leading-relaxed">
+                    Creator of TMT. Reprogrammer of the Traffic Universe. With a background in dark funnel optimization and behavioral psychology, Timur engineered the TMT system to predict and manipulate digital flows at scale. His architecture has processed over $5M in traffic across 70+ operators and 15+ sources.
+                </p>
+                <div class="flex gap-4">
+                    <a href="#" class="border border-green-500 text-green-500 w-10 h-10 flex items-center justify-center hover:bg-green-500 hover:text-black transition-all duration-300">
+                        <i class="fab fa-instagram"></i>
+                    </a>
+                    <a href="#" class="border border-green-500 text-green-500 w-10 h-10 flex items-center justify-center hover:bg-green-500 hover:text-black transition-all duration-300">
+                        <i class="fab fa-youtube"></i>
+                    </a>
+                    <a href="#" class="border border-green-500 text-green-500 w-10 h-10 flex items-center justify-center hover:bg-green-500 hover:text-black transition-all duration-300">
+                        <i class="fab fa-telegram"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Partners and Verticals -->
+    <section class="py-20 px-4 bg-black bg-opacity-50">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="monument text-3xl md:text-4xl mb-16 text-center flicker">ALLIES NETWORK</h2>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-8">
+                <div class="flex items-center justify-center grayscale hover:grayscale-0 transition-all duration-300">
+                    <div class="text-4xl font-bold mono">VERTICAL 1</div>
+                </div>
+                <div class="flex items-center justify-center grayscale hover:grayscale-0 transition-all duration-300">
+                    <div class="text-4xl font-bold mono">VERTICAL 2</div>
+                </div>
+                <div class="flex items-center justify-center grayscale hover:grayscale-0 transition-all duration-300">
+                    <div class="text-4xl font-bold mono">VERTICAL 3</div>
+                </div>
+                <div class="flex items-center justify-center grayscale hover:grayscale-0 transition-all duration-300">
+                    <div class="text-4xl font-bold mono">VERTICAL 4</div>
+                </div>
+                <div class="flex items-center justify-center grayscale hover:grayscale-0 transition-all duration-300">
+                    <div class="text-4xl font-bold mono">VERTICAL 5</div>
+                </div>
+            </div>
+            <div class="mt-16">
+                <h3 class="monument text-xl mb-6 text-center">DOMINANT VERTICALS</h3>
+                <div class="flex flex-wrap justify-center gap-4">
+                    <span class="mono border border-green-500 px-4 py-2">GAMBLING</span>
+                    <span class="mono border border-green-500 px-4 py-2">NUTRA</span>
+                    <span class="mono border border-green-500 px-4 py-2">BETTING</span>
+                    <span class="mono border border-green-500 px-4 py-2">FINANCE</span>
+                    <span class="mono border border-green-500 px-4 py-2">SAAS</span>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Final Choice -->
+    <section class="min-h-screen flex flex-col justify-center items-center px-4 relative">
+        <div class="text-center max-w-2xl mx-auto">
+            <p class="mono text-xl mb-10">"You are now at the crossroads. Choose wisely."</p>
+            <div class="flex flex-col sm:flex-row justify-center gap-6">
+                <a href="#" class="red-pill pill-btn bg-red-900 bg-opacity-50 text-white px-10 py-4 rounded-full border border-red-500 flex items-center justify-center gap-2">
+                    <span class="w-4 h-4 bg-red-500 rounded-full"></span> Red Pill → Enter the Network
+                </a>
+                <a href="#" class="blue-pill pill-btn bg-blue-900 bg-opacity-50 text-white px-10 py-4 rounded-full border border-blue-500 flex items-center justify-center gap-2">
+                    <span class="w-4 h-4 bg-blue-500 rounded-full"></span> Blue Pill → Stay in the Illusion
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="py-10 px-4 border-t border-green-500 border-opacity-30">
+        <div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center">
+            <div class="mono text-sm mb-4 md:mb-0">
+                © 2025 TMT — Reprogramming the Digital World.
+            </div>
+            <div class="flex gap-4 mb-4 md:mb-0">
+                <a href="#" class="text-green-500 hover:text-white transition-all duration-300">
+                    <i class="fab fa-telegram fa-lg"></i>
+                </a>
+                <a href="#" class="text-green-500 hover:text-white transition-all duration-300">
+                    <i class="fab fa-instagram fa-lg"></i>
+                </a>
+                <a href="#" class="text-green-500 hover:text-white transition-all duration-300">
+                    <i class="fab fa-youtube fa-lg"></i>
+                </a>
+            </div>
+            <a href="#" class="scroll-top border border-green-500 text-green-500 w-12 h-12 rounded-full flex items-center justify-center hover:bg-green-500 hover:text-black transition-all duration-300">
+                <i class="fas fa-power-off"></i>
+            </a>
+        </div>
+    </footer>
+    <script>
+        // Matrix code background
+        function createMatrixEffect() {
+            const matrixBg = document.getElementById('matrixBg');
+            const chars = "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン";
+            for (let i = 0; i < 30; 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();
+                    char.style.animation = `flicker ${3 + Math.random() * 5}s infinite alternate`;
+                    char.style.animationDelay = `${Math.random() * 5}s`;
+                    column.appendChild(char);
+                }
+                matrixBg.appendChild(column);
+            }
+        }
+        // Typing effect for title
+        function typeTitle() {
+            const title = "TMT — TRAFFIC MONSTERS TEAM";
+            const subtitle = "Decoding the chaos. Mastering the flow.";
+            const titleElement = document.getElementById('titleText');
+            const subtitleElement = document.getElementById('subtitleText');
+            let i = 0;
+            const typing = setInterval(() => {
+                if (i < title.length) {
+                    titleElement.textContent += title.charAt(i);
+                    i++;
+                } else {
+                    clearInterval(typing);
+                    typeSubtitle();
+                }
+            }, 100);
+            function typeSubtitle() {
+                let j = 0;
+                const subtitleTyping = setInterval(() => {
+                    if (j < subtitle.length) {
+                        subtitleElement.textContent += subtitle.charAt(j);
+                        j++;
+                    } else {
+                        clearInterval(subtitleTyping);
+                        subtitleElement.classList.remove('typing');
+                    }
+                }, 50);
+            }
+        }
+        // Animated counters
+        function animateCounters() {
+            const counters = [
+                { element: 'trafficCounter', target: 5, suffix: 'M+' },
+                { element: 'operatorsCounter', target: 70, suffix: '+' },
+                { element: 'offersCounter', target: 200, suffix: '+' },
+                { element: 'sourcesCounter', target: 15, suffix: '+' }
+            ];
+            const duration = 2000; // ms
+            const steps = 20;
+            const stepTime = duration / steps;
+            counters.forEach(counter => {
+                let current = 0;
+                const increment = counter.target / steps;
+                const element = document.getElementById(counter.element);
+                const timer = setInterval(() => {
+                    current += increment;
+                    if (current >= counter.target) {
+                        clearInterval(timer);
+                        current = counter.target;
+                    }
+                    element.textContent = Math.floor(current) + counter.suffix;
+                }, stepTime);
+            });
+        }
+        // Initialize everything when DOM is loaded
+        document.addEventListener('DOMContentLoaded', () => {
+            createMatrixEffect();
+            typeTitle();
+            // Intersection Observer for counters
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        animateCounters();
+                        observer.unobserve(entry.target);
+                    }
+                });
+            }, { threshold: 0.5 });
+            const metricsSection = document.querySelector('#trafficCounter').parentElement.parentElement.parentElement;
+            observer.observe(metricsSection);
+            // Random glitch effect
+            setInterval(() => {
+                const elements = document.querySelectorAll('.glitch');
+                elements.forEach(el => {
+                    if (Math.random() > 0.9) {
+                        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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ ✅ PROMPT: TMT — Traffic Monsters Team в стиле “The Matrix” Create a one-page cinematic landing page for Traffic Monsters Team (TMT), styled in the aesthetic of The Matrix (1999). • Tone: dark, encrypted, controlled, cybernetic. • No mentions of students, learning, or education. • Target: partner networks, advertisers, media buying professionals, competitors. ⸻ 🧱 SITE STRUCTURE 1. Hero Section — Operation: Control the Flow • Animated flowing green code as background (vertical streams, random symbol glitches, old CRT screen flicker). • Central Title (appearing letter-by-letter): TMT — TRAFFIC MONSTERS TEAM • Subtitle (typed terminal effect): Decoding the chaos. Mastering the flow. • Two Buttons (glowing frame): • ▶️ Enter the Network (Telegram) • 🎞️ Watch Completed Missions (Cases) 2. The Origin Code — Story of TMT • Title: THE ORIGIN CODE • Subtitle: "Before control... there was chaos." • Story Text (cinematic myth style): Once, the digital realms were wild — endless, uncontrolled, unpredictable. In 2022, a group of architects emerged. They did not seek to follow the flow — they sought to command it. Thus, the Traffic Monsters Team was born. Forged in the heart of the Data Wars, molded by broken funnels and lost offers, they built their own Matrix — a system where traffic obeys and strategies evolve. For three years, TMT has not survived the system. They have rewritten its rules. 3. Capabilities Block — Mastering the Systems • Grid layout of capabilities: • Offer Mapping • Multi-channel Traffic Execution • Keitaro Tracking & API Control • Creative Manufacturing (UGC, Deepfakes) • Funnel and App Monetization • Each service visualized with terminal-style icons. 4. Metrics Block — Data Sovereignty • Animated counters with terminal typing effect: • $5M+ Traffic Processed • 70+ Media Operators • 200+ Offers Deployed • 15+ Traffic Sources Controlled 5. Case Studies — Completed Missions • Horizontal carousel of case studies: • Mission Name • Traffic Source • Offer Category • Metrics (CTR, ROI, CR) • Each case framed as a “declassified mission report”. 6. The Architect — Founder Timur • Cinematic portrait of Timur with Matrix-style green glow. • Short bio: Timur: Architect of Controlled Chaos. Creator of TMT. Reprogrammer of the Traffic Universe. • Links: • Instagram • YouTube Interview 7. Partners and Verticals — Allies Network • Black-and-white distorted logos (optional static effect). • Mentioned Verticals: • Gambling • Nutra • Betting • Finance • SaaS 8. Final Choice — Red Pill or Blue Pill (CTA) • Dark background with dripping code. • Text: “You are now at the crossroads. Choose wisely.” • Two Buttons (pill style): • 🔴 Red Pill → Enter the Network (Telegram) • 🔵 Blue Pill → Stay in the Illusion (Return to Top) • Hover Effects: • Red Pill vibrates lightly. • Blue Pill fades away. 9. Footer — System Root Signature • Minimal footer: • Telegram, Instagram, YouTube icons (green glow on hover). • Text: © 2025 TMT — Reprogramming the Digital World. • Scroll-to-top button: "Wake Up" ⸻ 🎨 VISUAL DETAILS • Background: deep black (#000000) • Main Color: neon green (#00FF00) • Secondary Color: silver metallic (#B0B0B0) • Fonts: • Headlines: Monument Extended • Body: Inter • Numbers and code: JetBrains Mono • Effects: • Slow-moving matrix code • Terminal typing animation • Flickering text reveals • Glitch effects on buttons and transitions