Spaces:

timoon811
/

tmtmatrix

Running

App Files Files Community

timoon811 commited on Apr 29, 2025

Commit

1ce1f4d

verified ·

1 Parent(s): 55edbac

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +865 -19
prompts.txt +1 -0

README.md CHANGED Viewed

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

 ---
+title: tmtmatrix
+emoji: 🐳
+colorFrom: pink
+colorTo: pink
 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,865 @@
-<!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>
+    <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <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@300;400;500;600;700&family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --matrix-green: #00FF41;
+            --matrix-dark: #000000;
+            --matrix-light: #0D0208;
+        }
+        body {
+            font-family: 'JetBrains Mono', monospace;
+            background-color: var(--matrix-dark);
+            color: white;
+            overflow-x: hidden;
+            cursor: none;
+        }
+        h1, h2, h3, h4, h5, h6 {
+            font-family: 'Space Grotesk', sans-serif;
+        }
+        .matrix-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--matrix-dark);
+            z-index: -2;
+            overflow: hidden;
+        }
+        .matrix-code {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0.15;
+            z-index: -1;
+        }
+        .matrix-char {
+            color: var(--matrix-green);
+            text-shadow: 0 0 5px var(--matrix-green);
+            opacity: 0;
+            animation: fall linear forwards;
+        }
+        @keyframes fall {
+            to {
+                transform: translateY(100vh);
+                opacity: 1;
+            }
+        }
+        .neon-border {
+            position: relative;
+        }
+        .neon-border::before {
+            content: '';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            border: 2px solid var(--matrix-green);
+            border-radius: inherit;
+            z-index: -1;
+            opacity: 0;
+            transition: opacity 0.3s, box-shadow 0.3s;
+        }
+        .neon-border:hover::before {
+            opacity: 1;
+            box-shadow: 0 0 10px var(--matrix-green), 0 0 20px var(--matrix-green);
+        }
+        .glow-text {
+            text-shadow: 0 0 5px var(--matrix-green);
+        }
+        .custom-cursor {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background-color: var(--matrix-green);
+            position: fixed;
+            pointer-events: none;
+            mix-blend-mode: difference;
+            z-index: 9999;
+            transform: translate(-50%, -50%);
+        }
+        .cursor-trail {
+            position: fixed;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background-color: var(--matrix-green);
+            pointer-events: none;
+            z-index: 9998;
+            opacity: 0.6;
+            transform: translate(-50%, -50%);
+        }
+        .code-typing {
+            font-family: 'JetBrains Mono', monospace;
+            color: var(--matrix-green);
+        }
+        .avatar-glow {
+            position: relative;
+        }
+        .avatar-glow::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-radius: 50%;
+            background: radial-gradient(circle, transparent 50%, var(--matrix-green) 150%);
+            opacity: 0;
+            transition: opacity 0.3s;
+            z-index: -1;
+        }
+        .avatar-glow:hover::after {
+            opacity: 0.3;
+        }
+        .data-node {
+            position: relative;
+        }
+        .data-node::before {
+            content: '';
+            position: absolute;
+            top: -5px;
+            left: -5px;
+            right: -5px;
+            bottom: -5px;
+            border: 1px solid var(--matrix-green);
+            border-radius: 4px;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .data-node:hover::before {
+            opacity: 0.5;
+        }
+        .terminal-flicker {
+            animation: flicker 0.5s infinite alternate;
+        }
+        @keyframes flicker {
+            0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
+                opacity: 1;
+            }
+            20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
+                opacity: 0.4;
+            }
+        }
+        .hologram-effect {
+            transition: transform 0.3s, filter 0.3s;
+        }
+        .hologram-effect:hover {
+            transform: translateY(-5px);
+            filter: drop-shadow(0 5px 10px var(--matrix-green));
+        }
+        .magnetic-button {
+            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+        .magnetic-button:hover {
+            transform: scale(1.05);
+        }
+        .crt-effect {
+            position: relative;
+            overflow: hidden;
+        }
+        .crt-effect::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            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;
+        }
+        .scroll-top {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background-color: rgba(0, 255, 65, 0.2);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            transition: all 0.3s;
+            z-index: 99;
+        }
+        .scroll-top:hover {
+            background-color: rgba(0, 255, 65, 0.4);
+            box-shadow: 0 0 15px var(--matrix-green);
+        }
+        .scroll-top i {
+            color: var(--matrix-green);
+            font-size: 20px;
+        }
+        .section-divider {
+            height: 1px;
+            background: linear-gradient(90deg, transparent, var(--matrix-green), transparent);
+            margin: 100px 0;
+        }
+    </style>
+</head>
+<body>
+    <!-- Matrix Background -->
+    <div class="matrix-bg" id="matrixBg"></div>
+    <!-- Custom Cursor -->
+    <div class="custom-cursor" id="cursor"></div>
+    <!-- Scroll to Top Button -->
+    <div class="scroll-top" id="scrollTop">
+        <i class="fas fa-arrow-up"></i>
+    </div>
+    <!-- Hero Section -->
+    <section class="min-h-screen flex items-center justify-center relative overflow-hidden crt-effect">
+        <div class="container mx-auto px-6 py-20 text-center">
+            <h1 class="text-6xl md:text-8xl font-bold mb-6 glow-text">
+                <span class="text-white">TMT</span>
+                <span class="text-[#00FF41]">—</span>
+                <span class="text-white">TRAFFIC MONSTERS TEAM</span>
+            </h1>
+            <p class="text-xl md:text-2xl mb-12 text-gray-300 terminal-flicker">
+                We decode markets. We rewire performance.
+            </p>
+            <div class="flex flex-col md:flex-row gap-4 justify-center">
+                <a href="#" class="bg-[#00FF41] text-black font-bold py-3 px-8 rounded-none magnetic-button hover:bg-opacity-80 transition-all duration-300 relative overflow-hidden group">
+                    <span class="relative z-10">Enter the Network</span>
+                    <span class="absolute inset-0 bg-black opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
+                </a>
+                <a href="#" class="border border-[#00FF41] text-[#00FF41] font-bold py-3 px-8 rounded-none magnetic-button hover:bg-[#00FF41] hover:bg-opacity-10 transition-all duration-300 relative overflow-hidden neon-border">
+                    <span class="relative z-10">View Case Studies</span>
+                    <span class="absolute inset-0 bg-[#00FF41] opacity-0 group-hover:opacity-5 transition-opacity duration-300"></span>
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Capabilities Section -->
+    <section class="py-20 relative overflow-hidden">
+        <div class="container mx-auto px-6">
+            <h2 class="text-4xl md:text-5xl font-bold mb-16 text-center glow-text">
+                <span class="text-[#00FF41]">WHAT</span> WE CONTROL
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Traffic Scaling -->
+                <div class="data-node p-8 border border-gray-800 hover:border-[#00FF41] transition-all duration-300">
+                    <div class="text-[#00FF41] text-4xl mb-4">
+                        <i class="fas fa-chart-line"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-3">Traffic Scaling</h3>
+                    <p class="text-gray-400">
+                        FB, TikTok, Google, Push, Native - we dominate all channels with surgical precision.
+                    </p>
+                </div>
+                <!-- Strategic Offer Mapping -->
+                <div class="data-node p-8 border border-gray-800 hover:border-[#00FF41] transition-all duration-300">
+                    <div class="text-[#00FF41] text-4xl mb-4">
+                        <i class="fas fa-map-marked-alt"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-3">Strategic Offer Mapping</h3>
+                    <p class="text-gray-400">
+                        Algorithmic matching of offers to traffic sources for maximum conversion efficiency.
+                    </p>
+                </div>
+                <!-- Infrastructure Hacking -->
+                <div class="data-node p-8 border border-gray-800 hover:border-[#00FF41] transition-all duration-300">
+                    <div class="text-[#00FF41] text-4xl mb-4">
+                        <i class="fas fa-server"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-3">Infrastructure Hacking</h3>
+                    <p class="text-gray-400">
+                        Keitaro, API networks, custom tracking solutions - we build the tools that others copy.
+                    </p>
+                </div>
+                <!-- Creative Labs -->
+                <div class="data-node p-8 border border-gray-800 hover:border-[#00FF41] transition-all duration-300">
+                    <div class="text-[#00FF41] text-4xl mb-4">
+                        <i class="fas fa-video"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-3">Creative Labs</h3>
+                    <p class="text-gray-400">
+                        Video, UGC, Deepfake modules - our creatives outperform industry benchmarks by 300%.
+                    </p>
+                </div>
+                <!-- Direct Advertiser Integrations -->
+                <div class="data-node p-8 border border-gray-800 hover:border-[#00FF41] transition-all duration-300">
+                    <div class="text-[#00FF41] text-4xl mb-4">
+                        <i class="fas fa-handshake"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-3">Direct Advertiser Integrations</h3>
+                    <p class="text-gray-400">
+                        White-glove service for brands seeking direct access to premium traffic flows.
+                    </p>
+                </div>
+                <!-- Data Science -->
+                <div class="data-node p-8 border border-gray-800 hover:border-[#00FF41] transition-all duration-300">
+                    <div class="text-[#00FF41] text-4xl mb-4">
+                        <i class="fas fa-brain"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-3">Data Science</h3>
+                    <p class="text-gray-400">
+                        Predictive analytics and machine learning models that anticipate market shifts.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- TMT Numbers Section -->
+    <section class="py-20 relative overflow-hidden">
+        <div class="section-divider"></div>
+        <div class="container mx-auto px-6">
+            <h2 class="text-4xl md:text-5xl font-bold mb-16 text-center glow-text">
+                <span class="text-[#00FF41]">TMT</span> IN NUMBERS
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <div class="text-center">
+                    <div class="text-5xl md:text-6xl font-bold mb-4 text-[#00FF41] code-typing" id="counter1">0</div>
+                    <p class="text-gray-400 uppercase text-sm tracking-widest">USD IN MANAGED TRAFFIC</p>
+                </div>
+                <div class="text-center">
+                    <div class="text-5xl md:text-6xl font-bold mb-4 text-[#00FF41] code-typing" id="counter2">0</div>
+                    <p class="text-gray-400 uppercase text-sm tracking-widest">TEAM SPECIALISTS</p>
+                </div>
+                <div class="text-center">
+                    <div class="text-5xl md:text-6xl font-bold mb-4 text-[#00FF41] code-typing" id="counter3">0</div>
+                    <p class="text-gray-400 uppercase text-sm tracking-widest">OFFERS ROTATED</p>
+                </div>
+                <div class="text-center">
+                    <div class="text-5xl md:text-6xl font-bold mb-4 text-[#00FF41] code-typing" id="counter4">0</div>
+                    <p class="text-gray-400 uppercase text-sm tracking-widest">TRAFFIC ECOSYSTEMS</p>
+                </div>
+            </div>
+        </div>
+        <div class="section-divider"></div>
+    </section>
+    <!-- Case Studies Section -->
+    <section class="py-20 relative overflow-hidden">
+        <div class="container mx-auto px-6">
+            <h2 class="text-4xl md:text-5xl font-bold mb-16 text-center glow-text">
+                <span class="text-[#00FF41]">TMT</span> MISSIONS
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Case Study 1 -->
+                <div class="border border-gray-800 hover:border-[#00FF41] transition-all duration-300 group">
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-4">
+                            <h3 class="text-xl font-bold group-hover:text-[#00FF41] transition-colors duration-300">Gambling Vertical</h3>
+                            <span class="text-[#00FF41] text-sm">EUROPE</span>
+                        </div>
+                        <div class="mb-4">
+                            <p class="text-gray-400 text-sm mb-2">Traffic Source: <span class="text-white">Facebook</span></p>
+                            <p class="text-gray-400 text-sm mb-2">Duration: <span class="text-white">90 days</span></p>
+                        </div>
+                        <div class="grid grid-cols-3 gap-2 mb-4">
+                            <div class="text-center">
+                                <p class="text-[#00FF41] text-xl font-bold">4.2%</p>
+                                <p class="text-gray-400 text-xs">CTR</p>
+                            </div>
+                            <div class="text-center">
+                                <p class="text-[#00FF41] text-xl font-bold">12.7%</p>
+                                <p class="text-gray-400 text-xs">CR</p>
+                            </div>
+                            <div class="text-center">
+                                <p class="text-[#00FF41] text-xl font-bold">3.8x</p>
+                                <p class="text-gray-400 text-xs">ROI</p>
+                            </div>
+                        </div>
+                        <div class="h-40 bg-gray-900 mb-4 flex items-center justify-center terminal-flicker">
+                            <span class="text-gray-600">[creative preview]</span>
+                        </div>
+                        <button class="w-full py-2 border border-[#00FF41] text-[#00FF41] hover:bg-[#00FF41] hover:text-black transition-all duration-300">
+                            DECRYPT DETAILS
+                        </button>
+                    </div>
+                </div>
+                <!-- Case Study 2 -->
+                <div class="border border-gray-800 hover:border-[#00FF41] transition-all duration-300 group">
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-4">
+                            <h3 class="text-xl font-bold group-hover:text-[#00FF41] transition-colors duration-300">Nutra Vertical</h3>
+                            <span class="text-[#00FF41] text-sm">USA</span>
+                        </div>
+                        <div class="mb-4">
+                            <p class="text-gray-400 text-sm mb-2">Traffic Source: <span class="text-white">Native</span></p>
+                            <p class="text-gray-400 text-sm mb-2">Duration: <span class="text-white">45 days</span></p>
+                        </div>
+                        <div class="grid grid-cols-3 gap-2 mb-4">
+                            <div class="text-center">
+                                <p class="text-[#00FF41] text-xl font-bold">2.8%</p>
+                                <p class="text-gray-400 text-xs">CTR</p>
+                            </div>
+                            <div class="text-center">
+                                <p class="text-[#00FF41] text-xl font-bold">8.3%</p>
+                                <p class="text-gray-400 text-xs">CR</p>
+                            </div>
+                            <div class="text-center">
+                                <p class="text-[#00FF41] text-xl font-bold">5.2x</p>
+                                <p class="text-gray-400 text-xs">ROI</p>
+                            </div>
+                        </div>
+                        <div class="h-40 bg-gray-900 mb-4 flex items-center justify-center terminal-flicker">
+                            <span class="text-gray-600">[creative preview]</span>
+                        </div>
+                        <button class="w-full py-2 border border-[#00FF41] text-[#00FF41] hover:bg-[#00FF41] hover:text-black transition-all duration-300">
+                            DECRYPT DETAILS
+                        </button>
+                    </div>
+                </div>
+                <!-- Case Study 3 -->
+                <div class="border border-gray-800 hover:border-[#00FF41] transition-all duration-300 group">
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-4">
+                            <h3 class="text-xl font-bold group-hover:text-[#00FF41] transition-colors duration-300">Finance Vertical</h3>
+                            <span class="text-[#00FF41] text-sm">ASIA</span>
+                        </div>
+                        <div class="mb-4">
+                            <p class="text-gray-400 text-sm mb-2">Traffic Source: <span class="text-white">Google</span></p>
+                            <p class="text-gray-400 text-sm mb-2">Duration: <span class="text-white">60 days</span></p>
+                        </div>
+                        <div class="grid grid-cols-3 gap-2 mb-4">
+                            <div class="text-center">
+                                <p class="text-[#00FF41] text-xl font-bold">3.5%</p>
+                                <p class="text-gray-400 text-xs">CTR</p>
+                            </div>
+                            <div class="text-center">
+                                <p class="text-[#00FF41] text-xl font-bold">15.1%</p>
+                                <p class="text-gray-400 text-xs">CR</p>
+                            </div>
+                            <div class="text-center">
+                                <p class="text-[#00FF41] text-xl font-bold">4.1x</p>
+                                <p class="text-gray-400 text-xs">ROI</p>
+                            </div>
+                        </div>
+                        <div class="h-40 bg-gray-900 mb-4 flex items-center justify-center terminal-flicker">
+                            <span class="text-gray-600">[creative preview]</span>
+                        </div>
+                        <button class="w-full py-2 border border-[#00FF41] text-[#00FF41] hover:bg-[#00FF41] hover:text-black transition-all duration-300">
+                            DECRYPT DETAILS
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Founder Section -->
+    <section class="py-20 relative overflow-hidden">
+        <div class="section-divider"></div>
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col lg:flex-row items-center gap-12">
+                <div class="lg:w-1/3 relative">
+                    <div class="w-full h-96 bg-gray-900 relative overflow-hidden group">
+                        <div class="absolute inset-0 bg-[#00FF41] opacity-0 group-hover:opacity-5 transition-opacity duration-500"></div>
+                        <div class="absolute inset-0 flex items-center justify-center terminal-flicker">
+                            <span class="text-gray-600">[founder image]</span>
+                        </div>
+                        <div class="absolute bottom-0 left-0 right-0 h-1 bg-[#00FF41] transform origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-500"></div>
+                    </div>
+                </div>
+                <div class="lg:w-2/3">
+                    <h2 class="text-4xl md:text-5xl font-bold mb-8 glow-text">
+                        <span class="text-[#00FF41]">TIMUR</span> — ORCHESTRATOR
+                    </h2>
+                    <p class="text-gray-300 mb-6 leading-relaxed">
+                        Architect of decentralized performance domination. Timur founded TMT with a singular vision: to create the most efficient traffic acquisition machine in the digital ecosystem.
+                    </p>
+                    <p class="text-gray-300 mb-6 leading-relaxed">
+                        With over a decade in performance marketing, Timur has personally scaled campaigns to seven-figure monthly spends across every major vertical and GEO. His strategic frameworks are now implemented by the entire TMT operator network.
+                    </p>
+                    <div class="flex gap-4">
+                        <a href="#" class="border border-[#00FF41] text-[#00FF41] px-6 py-2 flex items-center gap-2 hover:bg-[#00FF41] hover:text-black transition-all duration-300">
+                            <i class="fab fa-instagram"></i> Instagram
+                        </a>
+                        <a href="#" class="border border-[#00FF41] text-[#00FF41] px-6 py-2 flex items-center gap-2 hover:bg-[#00FF41] hover:text-black transition-all duration-300">
+                            <i class="fab fa-youtube"></i> YouTube Interview
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="section-divider"></div>
+    </section>
+    <!-- Team Section -->
+    <section class="py-20 relative overflow-hidden">
+        <div class="container mx-auto px-6">
+            <h2 class="text-4xl md:text-5xl font-bold mb-16 text-center glow-text">
+                THE <span class="text-[#00FF41]">OPERATORS</span>
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <!-- Operator 1 -->
+                <div class="text-center group">
+                    <div class="w-32 h-32 mx-auto mb-6 rounded-full bg-gray-900 relative overflow-hidden avatar-glow">
+                        <div class="absolute inset-0 flex items-center justify-center terminal-flicker">
+                            <span class="text-gray-600">[avatar]</span>
+                        </div>
+                    </div>
+                    <h3 class="text-xl font-bold mb-1 group-hover:text-[#00FF41] transition-colors duration-300">@roi_architect</h3>
+                    <p class="text-gray-400 text-sm">Facebook Conqueror</p>
+                    <div class="mt-4 h-px bg-gray-800 w-1/2 mx-auto group-hover:bg-[#00FF41] transition-colors duration-300"></div>
+                </div>
+                <!-- Operator 2 -->
+                <div class="text-center group">
+                    <div class="w-32 h-32 mx-auto mb-6 rounded-full bg-gray-900 relative overflow-hidden avatar-glow">
+                        <div class="absolute inset-0 flex items-center justify-center terminal-flicker">
+                            <span class="text-gray-600">[avatar]</span>
+                        </div>
+                    </div>
+                    <h3 class="text-xl font-bold mb-1 group-hover:text-[#00FF41] transition-colors duration-300">@traffic_necromancer</h3>
+                    <p class="text-gray-400 text-sm">Multi-GEO Master</p>
+                    <div class="mt-4 h-px bg-gray-800 w-1/2 mx-auto group-hover:bg-[#00FF41] transition-colors duration-300"></div>
+                </div>
+                <!-- Operator 3 -->
+                <div class="text-center group">
+                    <div class="w-32 h-32 mx-auto mb-6 rounded-full bg-gray-900 relative overflow-hidden avatar-glow">
+                        <div class="absolute inset-0 flex items-center justify-center terminal-flicker">
+                            <span class="text-gray-600">[avatar]</span>
+                        </div>
+                    </div>
+                    <h3 class="text-xl font-bold mb-1 group-hover:text-[#00FF41] transition-colors duration-300">@bm_blacksmith</h3>
+                    <p class="text-gray-400 text-sm">BM Engineer</p>
+                    <div class="mt-4 h-px bg-gray-800 w-1/2 mx-auto group-hover:bg-[#00FF41] transition-colors duration-300"></div>
+                </div>
+                <!-- Operator 4 -->
+                <div class="text-center group">
+                    <div class="w-32 h-32 mx-auto mb-6 rounded-full bg-gray-900 relative overflow-hidden avatar-glow">
+                        <div class="absolute inset-0 flex items-center justify-center terminal-flicker">
+                            <span class="text-gray-600">[avatar]</span>
+                        </div>
+                    </div>
+                    <h3 class="text-xl font-bold mb-1 group-hover:text-[#00FF41] transition-colors duration-300">@data_sorcerer</h3>
+                    <p class="text-gray-400 text-sm">Analytics Wizard</p>
+                    <div class="mt-4 h-px bg-gray-800 w-1/2 mx-auto group-hover:bg-[#00FF41] transition-colors duration-300"></div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Partners Section -->
+    <section class="py-20 relative overflow-hidden">
+        <div class="section-divider"></div>
+        <div class="container mx-auto px-6">
+            <h2 class="text-4xl md:text-5xl font-bold mb-16 text-center glow-text">
+                <span class="text-[#00FF41]">PARTNER</span> NETWORKS
+            </h2>
+            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">
+                <div class="h-24 bg-gray-900 flex items-center justify-center hologram-effect">
+                    <span class="text-gray-600">[partner logo]</span>
+                </div>
+                <div class="h-24 bg-gray-900 flex items-center justify-center hologram-effect">
+                    <span class="text-gray-600">[partner logo]</span>
+                </div>
+                <div class="h-24 bg-gray-900 flex items-center justify-center hologram-effect">
+                    <span class="text-gray-600">[partner logo]</span>
+                </div>
+                <div class="h-24 bg-gray-900 flex items-center justify-center hologram-effect">
+                    <span class="text-gray-600">[partner logo]</span>
+                </div>
+                <div class="h-24 bg-gray-900 flex items-center justify-center hologram-effect">
+                    <span class="text-gray-600">[partner logo]</span>
+                </div>
+            </div>
+            <div class="mt-12">
+                <h3 class="text-xl font-bold mb-6 text-center text-[#00FF41]">VERTICALS WE DOMINATE</h3>
+                <div class="flex flex-wrap justify-center gap-4">
+                    <span class="px-4 py-2 border border-[#00FF41] text-[#00FF41]">GAMBLING</span>
+                    <span class="px-4 py-2 border border-[#00FF41] text-[#00FF41]">BETTING</span>
+                    <span class="px-4 py-2 border border-[#00FF41] text-[#00FF41]">NUTRA</span>
+                    <span class="px-4 py-2 border border-[#00FF41] text-[#00FF41]">FINANCE</span>
+                    <span class="px-4 py-2 border border-[#00FF41] text-[#00FF41]">UTILITIES</span>
+                </div>
+            </div>
+        </div>
+        <div class="section-divider"></div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-32 relative overflow-hidden">
+        <div class="container mx-auto px-6 text-center">
+            <h2 class="text-4xl md:text-6xl font-bold mb-6 glow-text">
+                READY TO <span class="text-[#00FF41]">REWIRE</span> YOUR TRAFFIC?
+            </h2>
+            <p class="text-xl md:text-2xl mb-12 text-gray-300">
+                Join the operators who control the flow.
+            </p>
+            <a href="#" class="inline-block bg-[#00FF41] text-black font-bold py-4 px-12 rounded-none magnetic-button hover:bg-opacity-90 transition-all duration-300 relative overflow-hidden group">
+                <span class="relative z-10 flex items-center gap-2">
+                    <i class="fab fa-telegram-plane"></i> Connect via Telegram
+                </span>
+                <span class="absolute inset-0 bg-black opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
+            </a>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="py-12 border-t border-gray-800">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-6 md:mb-0">
+                    <p class="text-gray-400">© 2025 TMT — CONTROL THE FLOW</p>
+                </div>
+                <div class="flex gap-6">
+                    <a href="#" class="text-gray-400 hover:text-[#00FF41] transition-colors duration-300 text-xl">
+                        <i class="fab fa-telegram-plane"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-[#00FF41] transition-colors duration-300 text-xl">
+                        <i class="fab fa-instagram"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-[#00FF41] transition-colors duration-300 text-xl">
+                        <i class="fab fa-youtube"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Matrix Background
+        function createMatrixEffect() {
+            const chars = "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン";
+            const matrixBg = document.getElementById('matrixBg');
+            // Create columns of falling characters
+            for (let i = 0; i < 100; i++) {
+                const column = document.createElement('div');
+                column.className = 'matrix-code';
+                column.style.left = `${Math.random() * 100}%`;
+                column.style.animationDuration = `${5 + Math.random() * 20}s`;
+                column.style.animationDelay = `${Math.random() * 5}s`;
+                // Create characters in each column
+                for (let j = 0; j < 30; j++) {
+                    const char = document.createElement('span');
+                    char.className = 'matrix-char';
+                    char.textContent = chars[Math.floor(Math.random() * chars.length)];
+                    char.style.animationDuration = `${3 + Math.random() * 10}s`;
+                    char.style.animationDelay = `${Math.random() * 5}s`;
+                    column.appendChild(char);
+                }
+                matrixBg.appendChild(column);
+            }
+        }
+        // Custom Cursor
+        function initCustomCursor() {
+            const cursor = document.getElementById('cursor');
+            const cursorTrails = [];
+            const trailCount = 10;
+            // Create cursor trails
+            for (let i = 0; i < trailCount; i++) {
+                const trail = document.createElement('div');
+                trail.className = 'cursor-trail';
+                trail.style.width = `${20 - i}px`;
+                trail.style.height = `${20 - i}px`;
+                trail.style.opacity = `${1 - (i / trailCount)}`;
+                document.body.appendChild(trail);
+                cursorTrails.push({
+                    element: trail,
+                    position: { x: 0, y: 0 },
+                    targetPosition: { x: 0, y: 0 }
+                });
+            }
+            document.addEventListener('mousemove', (e) => {
+                cursor.style.left = `${e.clientX}px`;
+                cursor.style.top = `${e.clientY}px`;
+                // Update target positions for trails
+                cursorTrails.forEach((trail, index) => {
+                    if (index === 0) {
+                        trail.targetPosition = { x: e.clientX, y: e.clientY };
+                    } else {
+                        const prevTrail = cursorTrails[index - 1];
+                        trail.targetPosition = {
+                            x: prevTrail.position.x,
+                            y: prevTrail.position.y
+                        };
+                    }
+                });
+            });
+            // Animate trails
+            function animateTrails() {
+                cursorTrails.forEach((trail) => {
+                    trail.position.x += (trail.targetPosition.x - trail.position.x) * 0.2;
+                    trail.position.y += (trail.targetPosition.y - trail.position.y) * 0.2;
+                    trail.element.style.left = `${trail.position.x}px`;
+                    trail.element.style.top = `${trail.position.y}px`;
+                });
+                requestAnimationFrame(animateTrails);
+            }
+            animateTrails();
+        }
+        // Counter Animation
+        function animateCounters() {
+            const counters = [
+                { element: document.getElementById('counter1'), target: 5, suffix: 'M+' },
+                { element: document.getElementById('counter2'), target: 70, suffix: '+' },
+                { element: document.getElementById('counter3'), target: 200, suffix: '+' },
+                { element: document.getElementById('counter4'), target: 15, suffix: '+' }
+            ];
+            counters.forEach((counter) => {
+                let current = 0;
+                const increment = counter.target / 30;
+                const timer = setInterval(() => {
+                    current += increment;
+                    if (current >= counter.target) {
+                        current = counter.target;
+                        clearInterval(timer);
+                    }
+                    counter.element.textContent = Math.floor(current) + counter.suffix;
+                }, 50);
+            });
+        }
+        // Scroll to Top
+        function initScrollTop() {
+            const scrollTop = document.getElementById('scrollTop');
+            window.addEventListener('scroll', () => {
+                if (window.pageYOffset > 300) {
+                    scrollTop.style.opacity = '1';
+                    scrollTop.style.visibility = 'visible';
+                } else {
+                    scrollTop.style.opacity = '0';
+                    scrollTop.style.visibility = 'hidden';
+                }
+            });
+            scrollTop.addEventListener('click', () => {
+                window.scrollTo({
+                    top: 0,
+                    behavior: 'smooth'
+                });
+            });
+        }
+        // Magnetic Buttons
+        function initMagneticButtons() {
+            const buttons = document.querySelectorAll('.magnetic-button');
+            buttons.forEach(button => {
+                button.addEventListener('mousemove', (e) => {
+                    const rect = button.getBoundingClientRect();
+                    const x = e.clientX - rect.left;
+                    const y = e.clientY - rect.top;
+                    const centerX = rect.width / 2;
+                    const centerY = rect.height / 2;
+                    const angle = Math.atan2(y - centerY, x - centerX);
+                    const distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
+                    const maxDistance = Math.sqrt(Math.pow(centerX, 2) + Math.pow(centerY, 2));
+                    const translateX = Math.cos(angle) * distance * 0.1;
+                    const translateY = Math.sin(angle) * distance * 0.1;
+                    button.style.transform = `translate(${translateX}px, ${translateY}px) scale(1.05)`;
+                });
+                button.addEventListener('mouseleave', () => {
+                    button.style.transform = '';
+                });
+            });
+        }
+        // Initialize everything when DOM is loaded
+        document.addEventListener('DOMContentLoaded', () => {
+            createMatrixEffect();
+            initCustomCursor();
+            animateCounters();
+            initScrollTop();
+            initMagneticButtons();
+            // Intersection Observer for animations
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('animate');
+                    }
+                });
+            }, {
+                threshold: 0.1
+            });
+            document.querySelectorAll('.data-node, .avatar-glow, .hologram-effect').forEach(el => {
+                observer.observe(el);
+            });
+        });
+    </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/tmtmatrix" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ Create a one-page landing page for TMT (Traffic Monsters Team) — a global performance marketing team styled in the aesthetic of The Matrix. ❗️No mention of students, courses, or learning. ❗️Purely a high-level media buying and digital arbitrage business. Audience: • Partner networks (affiliate programs) • Direct advertisers (brands) • High-level traffic specialists and analysts • Market competitors (must create “wow effect”) ⸻ 🎨 Визуальная концепция: • Matrix style: • Deep black background (#000000) • Flowing green code streams (#00FF00) • Subtle metallic gradients and glass panels • Sharp, clean brutalism with cybernetic precision • Fonts: • Headlines: Monument Extended, Space Grotesk, or Matrix Code font (stylized) • Text: Inter, PP Neue Montreal, or JetBrains Mono • Effects: • Green neon outlines • Code rain overlays • Scroll-triggered terminal flickers • Kinetic glowing cursor • Magnetic slow-hover buttons ⸻ 🧱 Структура лендинга: ⸻ 🟢 1. Hero Section (The Entrance) • Dynamic background: slow moving Matrix code (black/green digital rain) • Main headline: TMT — TRAFFIC MONSTERS TEAM • Subline: We decode markets. We rewire performance. • CTAs (only buttons): • Enter the Network (Telegram) • View Case Studies • Kinetic mouse interactions (glowing green trail) ⸻ ⚙️ 2. Capabilities Block (What We Control) • Simple grid of services: • Traffic Scaling (FB, TikTok, Google, Push, Native) • Strategic Offer Mapping • Infrastructure Hacking (Keitaro, API networks) • Creative Labs (Video, UGC, Deepfake modules) • Direct Advertiser Integrations • Green grid overlays, minimalism, animated data nodes on hover. ⸻ 📈 3. TMT Numbers (Data Facts) • Metric counters: • 5M+ USD in managed traffic • 70+ team specialists • 200+ offers rotated • 15+ traffic ecosystems controlled • Each number appears via code-typing animation or terminal blink. ⸻ 📊 4. Team Case Studies (TMT Missions) • Carousel or interactive grid of cases: • Traffic source • Offer vertical • Geo focus • CTR, CR, ROI metrics • Optional: screenshots in code-framed boxes • Subtle slow flicker on data blocks. ⸻ 🧠 5. Founder Section: Timur • Image (edited in Matrix-like photo treatment: green glow or code particles) • Bio Text: Timur: Orchestrator of controlled chaos. Founder of TMT. Architect of decentralized performance domination. • Social links: • Instagram (green neon button) • YouTube Interview (CRT screen icon) ⸻ 👤 6. Team Block (Agents) • Title: THE OPERATORS • Display: • Stylized Matrix-style avatars (cybernetic, green glow, hacker masks) • Nicknames with roles: • @roi_architect — Facebook Conqueror • @traffic_necromancer — Multi-GEO Master • @bm_blacksmith — BM Engineer • Interactive effect: green particles floating near avatars. ⸻ 🤝 7. Partners Block (Networks & Verticals) • Logos (if allowed) as encrypted sigils or green holograms • Verticals listed clearly: • Gambling • Betting • Nutra • Finance • Utilities • Smooth holographic hover transitions. ⸻ 🚀 8. Contact CTA (Exit the Simulation) • Big Title: READY TO REWIRE YOUR TRAFFIC? • Subline: Join the operators who control the flow. • Button: 💬 Connect via Telegram • Background: accelerated green data rain as you hover. ⸻ 🖤 9. Footer • Clean, minimal: • Telegram / Instagram / YouTube icons (neon green flicker on hover) • Scroll-to-top button: green code pulse • Text: © 2025 TMT — Control the Flow ⸻ 🧬 Motion / Animation Effects: Элемент Эффект Hero Background Moving slow matrix rain, blur in foreground Metrics Counters Terminal typing effect Buttons on Hover CRT distortion + magnetic slow move Case Studies / Team Code flicker reveal Avatars Green noise floating particles Cursor Green laser tail