Spaces:

timoon811
/

tmtmatrix

Running

App Files Files Community

timoon811 commited on Apr 29, 2025

Commit

67bfb02

verified ·

1 Parent(s): 1ce1f4d

Add 2 files

Browse files

Files changed (2) hide show

index.html +215 -1
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -242,12 +242,123 @@
             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>
@@ -258,7 +369,7 @@
     <!-- 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>
@@ -280,6 +391,81 @@
         </div>
     </section>
     <!-- Capabilities Section -->
     <section class="py-20 relative overflow-hidden">
         <div class="container mx-auto px-6">
@@ -708,6 +894,33 @@
             }
         }
         // Custom Cursor
         function initCustomCursor() {
             const cursor = document.getElementById('cursor');
@@ -840,6 +1053,7 @@
         // Initialize everything when DOM is loaded
         document.addEventListener('DOMContentLoaded', () => {
             createMatrixEffect();
             initCustomCursor();
             animateCounters();
             initScrollTop();

             background: linear-gradient(90deg, transparent, var(--matrix-green), transparent);
             margin: 100px 0;
         }
+        /* New Matrix Code Rain Styles */
+        .matrix-rain {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            z-index: -1;
+        }
+        .matrix-column {
+            position: relative;
+            float: left;
+            width: 2ch;
+            height: 100%;
+            font-size: 16px;
+            writing-mode: vertical-rl;
+            text-orientation: mixed;
+        }
+        .matrix-digit {
+            color: var(--matrix-green);
+            text-shadow: 0 0 8px var(--matrix-green);
+            opacity: 0;
+            animation: matrix-fall linear infinite;
+        }
+        @keyframes matrix-fall {
+            0% {
+                transform: translateY(-100px);
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(100vh);
+                opacity: 0;
+            }
+        }
+        /* History Section Styles */
+        .history-terminal {
+            background-color: rgba(0, 0, 0, 0.7);
+            border: 1px solid var(--matrix-green);
+            padding: 30px;
+            position: relative;
+            font-family: 'JetBrains Mono', monospace;
+        }
+        .history-terminal::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background:
+                linear-gradient(rgba(0, 255, 65, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(0, 255, 65, 0.1) 1px, transparent 1px);
+            background-size: 20px 20px;
+            pointer-events: none;
+        }
+        .terminal-header {
+            color: var(--matrix-green);
+            border-bottom: 1px solid var(--matrix-green);
+            padding-bottom: 10px;
+            margin-bottom: 20px;
+            font-size: 1.2rem;
+        }
+        .terminal-line {
+            margin-bottom: 15px;
+            position: relative;
+            padding-left: 30px;
+        }
+        .terminal-line::before {
+            content: '>';
+            position: absolute;
+            left: 10px;
+            color: var(--matrix-green);
+        }
+        .terminal-text {
+            color: white;
+            line-height: 1.6;
+        }
+        .terminal-text span {
+            color: var(--matrix-green);
+            font-weight: bold;
+        }
+        .terminal-cursor {
+            display: inline-block;
+            width: 10px;
+            height: 20px;
+            background-color: var(--matrix-green);
+            animation: blink 1s infinite;
+            vertical-align: middle;
+            margin-left: 5px;
+        }
+        @keyframes blink {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0; }
+        }
     </style>
 </head>
 <body>
     <!-- Matrix Background -->
     <div class="matrix-bg" id="matrixBg"></div>
+    <!-- Matrix Code Rain -->
+    <div class="matrix-rain" id="matrixRain"></div>
     <!-- Custom Cursor -->
     <div class="custom-cursor" id="cursor"></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 relative z-10">
             <h1 class="text-6xl md:text-8xl font-bold mb-6 glow-text">
                 <span class="text-white">TMT</span>
                 <span class="text-[#00FF41]">—</span>
         </div>
     </section>
+    <!-- History Section -->
+    <section class="py-20 relative overflow-hidden">
+        <div class="container mx-auto px-6">
+            <div class="history-terminal max-w-4xl mx-auto">
+                <div class="terminal-header">TMT_HISTORY.TXT</div>
+                <div class="terminal-line">
+                    <div class="terminal-text">
+                        <span>INITIALIZING TMT CORE PROTOCOLS...</span>
+                    </div>
+                </div>
+                <div class="terminal-line">
+                    <div class="terminal-text">
+                        <span>YEAR 2018:</span> First traces of TMT detected in the digital ecosystem. A small group of performance hackers begins rewriting traffic acquisition algorithms.
+                    </div>
+                </div>
+                <div class="terminal-line">
+                    <div class="terminal-text">
+                        <span>YEAR 2020:</span> The collective evolves into a decentralized network. First major breakthrough - cracking the Facebook ad algorithm during pandemic market shifts.
+                    </div>
+                </div>
+                <div class="terminal-line">
+                    <div class="terminal-text">
+                        <span>YEAR 2022:</span> Full operational capacity achieved. TMT now controls traffic flows across 15+ ecosystems. $1M/month in managed spend becomes standard.
+                    </div>
+                </div>
+                <div class="terminal-line">
+                    <div class="terminal-text">
+                        <span>CORE VALUES:</span>
+                    </div>
+                </div>
+                <div class="terminal-line">
+                    <div class="terminal-text">
+                        <span>></span> <span>PERFORMANCE IS TRUTH:</span> Data over opinions. We follow the numbers wherever they lead.
+                    </div>
+                </div>
+                <div class="terminal-line">
+                    <div class="terminal-text">
+                        <span>></span> <span>ADAPT OR DIE:</span> Market conditions change hourly. Our systems evolve in real-time.
+                    </div>
+                </div>
+                <div class="terminal-line">
+                    <div class="terminal-text">
+                        <span>></span> <span>CONTROL THE FLOW:</span> Traffic is the lifeblood of digital. We don't just buy it - we engineer it.
+                    </div>
+                </div>
+                <div class="terminal-line">
+                    <div class="terminal-text">
+                        <span>MISSION STATEMENT:</span>
+                    </div>
+                </div>
+                <div class="terminal-line">
+                    <div class="terminal-text">
+                        To dominate performance marketing through algorithmic precision, infrastructure hacking, and relentless optimization. We exist to push the boundaries of what's possible in traffic acquisition.
+                    </div>
+                </div>
+                <div class="terminal-line">
+                    <div class="terminal-text">
+                        <span>END OF FILE</span><span class="terminal-cursor"></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
     <!-- Capabilities Section -->
     <section class="py-20 relative overflow-hidden">
         <div class="container mx-auto px-6">
             }
         }
+        // Matrix Code Rain Effect
+        function createMatrixRain() {
+            const matrixRain = document.getElementById('matrixRain');
+            const columns = Math.floor(window.innerWidth / 20); // Adjust based on character width
+            for (let i = 0; i < columns; i++) {
+                const column = document.createElement('div');
+                column.className = 'matrix-column';
+                column.style.left = `${i * 20}px`;
+                column.style.animationDelay = `${Math.random() * 2}s`;
+                column.style.animationDuration = `${2 + Math.random() * 5}s`;
+                // Create random digits in column
+                const digitCount = 20 + Math.floor(Math.random() * 20);
+                for (let j = 0; j < digitCount; j++) {
+                    const digit = document.createElement('div');
+                    digit.className = 'matrix-digit';
+                    digit.textContent = Math.floor(Math.random() * 10);
+                    digit.style.animationDelay = `${Math.random() * 5}s`;
+                    digit.style.animationDuration = `${3 + Math.random() * 7}s`;
+                    column.appendChild(digit);
+                }
+                matrixRain.appendChild(column);
+            }
+        }
         // Custom Cursor
         function initCustomCursor() {
             const cursor = document.getElementById('cursor');
         // Initialize everything when DOM is loaded
         document.addEventListener('DOMContentLoaded', () => {
             createMatrixEffect();
+            createMatrixRain();
             initCustomCursor();
             animateCounters();
             initScrollTop();

prompts.txt CHANGED Viewed

	@@ -1 +1,2 @@
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


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
2	+ Сайт крутой - не меняй его! Только добавь по моему ТЗ: в первом блоке сделай - чтобы на фоне бегали цифры и тд, как в фильме матрицы! И еще добавь блок с иторией после первого блока - типа как наши ценности, миссия, когда появилась команда и тд! Только в стилистике рассказа, как в фильме матрица!