Spaces:

timoon811
/

tmtmatrix

Running

App Files Files Community

timoon811 commited on Apr 29, 2025

Commit

142f56d

verified ·

1 Parent(s): a47050d

Add 2 files

Browse files

Files changed (2) hide show

index.html +130 -5
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -15,6 +15,8 @@
             --matrix-green: #00FF41;
             --matrix-dark: #000000;
             --matrix-light: #0D0208;
         }
         body {
@@ -350,6 +352,102 @@
             0%, 100% { opacity: 1; }
             50% { opacity: 0; }
         }
     </style>
 </head>
 <body>
@@ -367,6 +465,18 @@
         <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 relative z-10">
@@ -696,11 +806,11 @@
             <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">
@@ -1050,6 +1160,20 @@
             });
         }
         // Initialize everything when DOM is loaded
         document.addEventListener('DOMContentLoaded', () => {
             createMatrixEffect();
@@ -1058,6 +1182,7 @@
             animateCounters();
             initScrollTop();
             initMagneticButtons();
             // Intersection Observer for animations
             const observer = new IntersectionObserver((entries) => {

             --matrix-green: #00FF41;
             --matrix-dark: #000000;
             --matrix-light: #0D0208;
+            --matrix-blue: #0066FF;
+            --matrix-red: #FF0033;
         }
         body {
             0%, 100% { opacity: 1; }
             50% { opacity: 0; }
         }
+        /* Pill Buttons */
+        .pill-container {
+            position: fixed;
+            bottom: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 30px;
+            z-index: 100;
+        }
+        .pill-button {
+            width: 120px;
+            height: 40px;
+            border-radius: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            font-size: 14px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+        }
+        .pill-button::before {
+            content: '';
+            position: absolute;
+            top: -10px;
+            left: -10px;
+            right: -10px;
+            bottom: -10px;
+            border-radius: 30px;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .pill-button:hover::before {
+            opacity: 0.3;
+        }
+        .blue-pill {
+            background-color: var(--matrix-blue);
+            color: white;
+            border: 1px solid var(--matrix-blue);
+        }
+        .blue-pill::before {
+            background: radial-gradient(circle, rgba(0, 102, 255, 0.8), transparent 70%);
+        }
+        .blue-pill:hover {
+            box-shadow: 0 0 20px var(--matrix-blue);
+            transform: translateY(-3px);
+        }
+        .red-pill {
+            background-color: var(--matrix-red);
+            color: white;
+            border: 1px solid var(--matrix-red);
+        }
+        .red-pill::before {
+            background: radial-gradient(circle, rgba(255, 0, 51, 0.8), transparent 70%);
+        }
+        .red-pill:hover {
+            box-shadow: 0 0 20px var(--matrix-red);
+            transform: translateY(-3px);
+        }
+        .pill-glow {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-radius: 20px;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .pill-button:hover .pill-glow {
+            opacity: 0.6;
+        }
+        .blue-glow {
+            box-shadow: 0 0 15px var(--matrix-blue);
+        }
+        .red-glow {
+            box-shadow: 0 0 15px var(--matrix-red);
+        }
     </style>
 </head>
 <body>
         <i class="fas fa-arrow-up"></i>
     </div>
+    <!-- Pill Buttons -->
+    <div class="pill-container">
+        <div class="pill-button blue-pill">
+            <div class="pill-glow blue-glow"></div>
+            Blue Pill
+        </div>
+        <div class="pill-button red-pill">
+            <div class="pill-glow red-glow"></div>
+            Red Pill
+        </div>
+    </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">
             <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">
             });
         }
+        // Pill Button Effects
+        function initPillButtons() {
+            const bluePill = document.querySelector('.blue-pill');
+            const redPill = document.querySelector('.red-pill');
+            bluePill.addEventListener('click', () => {
+                alert('You chose the Blue Pill - Continue living in the blissful ignorance of the ordinary marketing world.');
+            });
+            redPill.addEventListener('click', () => {
+                alert('You chose the Red Pill - Welcome to the real world of performance marketing. Follow the white rabbit...');
+            });
+        }
         // Initialize everything when DOM is loaded
         document.addEventListener('DOMContentLoaded', () => {
             createMatrixEffect();
             animateCounters();
             initScrollTop();
             initMagneticButtons();
+            initPillButtons();
             // Intersection Observer for animations
             const observer = new IntersectionObserver((entries) => {

prompts.txt CHANGED Viewed

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

   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 кнопки - в виде красной и синей таблетки - как в матрице!