Spaces:

timoon811
/

whatwecont

Running

App Files Files Community

timoon811 commited on Apr 29, 2025

Commit

4bf3814

verified ·

1 Parent(s): 3f95060

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +199 -19
prompts.txt +1 -0

README.md CHANGED Viewed

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

 ---
+title: whatwecont
+emoji: 🐳
 colorFrom: pink
+colorTo: yellow
 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,199 @@
-<!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 - What We Control</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        @keyframes dataFlow {
+            0% { background-position: 0 0; }
+            100% { background-position: 0 -100px; }
+        }
+        @keyframes terminalType {
+            from { width: 0; }
+            to { width: 100%; }
+        }
+        @keyframes pulse {
+            0% { text-shadow: 0 0 5px #00FF00; }
+            50% { text-shadow: 0 0 20px #00FF00; }
+            100% { text-shadow: 0 0 5px #00FF00; }
+        }
+        @keyframes moduleAppear {
+            0% { opacity: 0; transform: scale(0.8); box-shadow: 0 0 0 rgba(0, 255, 0, 0); }
+            50% { opacity: 1; transform: scale(1.05); box-shadow: 0 0 20px rgba(0, 255, 0, 0.5); }
+            100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 rgba(0, 255, 0, 0); }
+        }
+        @keyframes borderGlow {
+            0% { box-shadow: 0 0 5px #00FF00; }
+            50% { box-shadow: 0 0 15px #00FF00; }
+            100% { box-shadow: 0 0 5px #00FF00; }
+        }
+        @keyframes textBreath {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.02); }
+            100% { transform: scale(1); }
+        }
+        .matrix-bg {
+            background-color: #000000;
+            background-image:
+                linear-gradient(rgba(0, 255, 0, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(0, 255, 0, 0.1) 1px, transparent 1px);
+            background-size: 30px 30px;
+            position: relative;
+            overflow: hidden;
+        }
+        .matrix-bg::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(
+                rgba(0, 255, 0, 0.03) 1px,
+                transparent 1px
+            );
+            background-size: 100% 5px;
+            animation: dataFlow 2s linear infinite;
+            pointer-events: none;
+        }
+        .terminal-text {
+            font-family: 'JetBrains Mono', monospace;
+            display: inline-block;
+            overflow: hidden;
+            white-space: nowrap;
+            border-right: 2px solid #00FF00;
+            animation: terminalType 1.5s steps(15) 1s 1 normal both;
+        }
+        .terminal-text::after {
+            content: "";
+            animation: blink 1s steps(5) infinite;
+        }
+        .pulse-text {
+            animation: pulse 2s ease-in-out;
+        }
+        .module {
+            animation: moduleAppear 0.8s ease-out forwards;
+            opacity: 0;
+        }
+        .module:hover {
+            animation: borderGlow 1.5s infinite ease-in-out;
+        }
+        .module:hover .module-title {
+            animation: textBreath 2s infinite ease-in-out;
+        }
+        .pixel-icon {
+            image-rendering: pixelated;
+            image-rendering: -moz-crisp-edges;
+            image-rendering: crisp-edges;
+        }
+    </style>
+</head>
+<body class="matrix-bg min-h-screen py-12 px-4 sm:px-6 lg:px-8">
+    <div class="max-w-6xl mx-auto">
+        <!-- Section Header -->
+        <div class="text-center mb-16">
+            <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold text-green-500 mb-4 overflow-hidden">
+                <span class="terminal-text">WHAT WE CONTROL</span>
+            </h1>
+        </div>
+        <!-- Control Modules Grid -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
+            <!-- Module 1: TRAFFIC SCALING -->
+            <div class="module border border-green-500 p-6 rounded-lg bg-black bg-opacity-70 backdrop-blur-sm transition-all duration-300" style="animation-delay: 1.5s;">
+                <div class="flex items-center mb-4">
+                    <span class="text-green-500 mr-3 text-xl">🎯</span>
+                    <h2 class="module-title text-2xl font-bold text-green-500 uppercase font-mono">TRAFFIC SCALING</h2>
+                </div>
+                <p class="text-green-300 font-mono">FB, TikTok, Google, Push, Native - we dominate all channels with surgical precision.</p>
+            </div>
+            <!-- Module 2: STRATEGIC OFFER MAPPING -->
+            <div class="module border border-green-500 p-6 rounded-lg bg-black bg-opacity-70 backdrop-blur-sm transition-all duration-300" style="animation-delay: 1.8s;">
+                <div class="flex items-center mb-4">
+                    <span class="text-green-500 mr-3 text-xl">🗺️</span>
+                    <h2 class="module-title text-2xl font-bold text-green-500 uppercase font-mono">STRATEGIC OFFER MAPPING</h2>
+                </div>
+                <p class="text-green-300 font-mono">Algorithmic matching of offers to traffic sources for maximum conversion efficiency.</p>
+            </div>
+            <!-- Module 3: INFRASTRUCTURE HACKING -->
+            <div class="module border border-green-500 p-6 rounded-lg bg-black bg-opacity-70 backdrop-blur-sm transition-all duration-300" style="animation-delay: 2.1s;">
+                <div class="flex items-center mb-4">
+                    <span class="text-green-500 mr-3 text-xl">🔧</span>
+                    <h2 class="module-title text-2xl font-bold text-green-500 uppercase font-mono">INFRASTRUCTURE HACKING</h2>
+                </div>
+                <p class="text-green-300 font-mono">Keitaro, API networks, custom tracking solutions - we build the tools that others copy.</p>
+            </div>
+            <!-- Module 4: CREATIVE LABS -->
+            <div class="module border border-green-500 p-6 rounded-lg bg-black bg-opacity-70 backdrop-blur-sm transition-all duration-300" style="animation-delay: 2.4s;">
+                <div class="flex items-center mb-4">
+                    <span class="text-green-500 mr-3 text-xl">🎬</span>
+                    <h2 class="module-title text-2xl font-bold text-green-500 uppercase font-mono">CREATIVE LABS</h2>
+                </div>
+                <p class="text-green-300 font-mono">Video, UGC, Deepfake modules - our creatives outperform industry benchmarks by 300%.</p>
+            </div>
+            <!-- Module 5: DIRECT INTEGRATIONS -->
+            <div class="module border border-green-500 p-6 rounded-lg bg-black bg-opacity-70 backdrop-blur-sm transition-all duration-300" style="animation-delay: 2.7s;">
+                <div class="flex items-center mb-4">
+                    <span class="text-green-500 mr-3 text-xl">🤝</span>
+                    <h2 class="module-title text-2xl font-bold text-green-500 uppercase font-mono">DIRECT INTEGRATIONS</h2>
+                </div>
+                <p class="text-green-300 font-mono">White-glove service for brands seeking direct access to premium traffic flows.</p>
+            </div>
+            <!-- Module 6: DATA SCIENCE -->
+            <div class="module border border-green-500 p-6 rounded-lg bg-black bg-opacity-70 backdrop-blur-sm transition-all duration-300" style="animation-delay: 3.0s;">
+                <div class="flex items-center mb-4">
+                    <span class="text-green-500 mr-3 text-xl">🧠</span>
+                    <h2 class="module-title text-2xl font-bold text-green-500 uppercase font-mono">DATA SCIENCE</h2>
+                </div>
+                <p class="text-green-300 font-mono">Predictive analytics and machine learning models that anticipate market shifts.</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Add pulse animation to header after typing completes
+            setTimeout(function() {
+                const terminalText = document.querySelector('.terminal-text');
+                terminalText.classList.remove('terminal-text');
+                terminalText.style.borderRight = 'none';
+                terminalText.classList.add('pulse-text');
+            }, 2500);
+            // Add hover effects to modules
+            const modules = document.querySelectorAll('.module');
+            modules.forEach(module => {
+                module.addEventListener('mouseenter', function() {
+                    this.style.transform = 'translateY(-5px)';
+                });
+                module.addEventListener('mouseleave', function() {
+                    this.style.transform = 'translateY(0)';
+                });
+            });
+        });
+    </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/whatwecont" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ ✅ PROMPT: TMT — Block 3: “What We Control” (Matrix Digital Weapons Console) ⸻ 🎥 ОБЩАЯ ИДЕЯ: Create a cinematic control-console style section for Traffic Monsters Team landing page, inspired by “The Matrix”. The section must feel like the user is looking at a weapons loadout screen or system command center, where each capability is displayed like an unlocked tactical asset. ⸻ 🧱 КОМПОЗИЦИЯ БЛОКА: ⸻ 1. Background (Фон) • Глубокий чёрный фон (#000000). • Слабая полупрозрачная сетка, как у тактических экранов (едва заметная квадратная сетка на фоне). • Лёгкий “поток данных” на фоне (очень тонкие бегущие линии данных горизонтально). ⸻ 2. Container Style (Оформление зоны) • Блок разбит на 6 панелей (“Digital Control Modules”), каждая с чёткой рамкой (неоново-зелёная тонкая обводка #00FF00). • Панели располагаются в две колонки (по 3 в каждой). На мобилках — одна колонка с аккуратным стеком. • Панели слегка светятся зелёным при наведении. ⸻ 3. Контент каждой панели Название модуля Подпись/описание TRAFFIC SCALING FB, TikTok, Google, Push, Native - we dominate all channels with surgical precision. STRATEGIC OFFER MAPPING Algorithmic matching of offers to traffic sources for maximum conversion efficiency. INFRASTRUCTURE HACKING Keitaro, API networks, custom tracking solutions - we build the tools that others copy. CREATIVE LABS Video, UGC, Deepfake modules - our creatives outperform industry benchmarks by 300%. DIRECT INTEGRATIONS White-glove service for brands seeking direct access to premium traffic flows. DATA SCIENCE Predictive analytics and machine learning models that anticipate market shifts. • Название модуля: • Заглавными буквами, большим кеглем. • Моноширинный шрифт (например, JetBrains Mono Bold). • Цвет: яркий зелёный #00FF00. • Описание под названием: • Меньшим шрифтом. • Светло-зелёным или серо-зелёным цветом (#66FF66), чтобы отступать визуально назад. ⸻ 4. Анимации Элемент Анимация Появление блоков Блоки появляются по очереди с коротким терминальным “всплеском света” (как активация консолей). Наведение на блок Блок подсвечивается тонкой неоновой анимацией обводки. Внутри панели При наведении текст модуля слегка пульсирует или “дышит”. ⸻ 5. Элементы управления • Можно добавить иконки около каждого названия модуля (пиксельные/терминальные иконки): • 🔧 для Infrastructure • 🎯 для Traffic Scaling • 🧠 для Data Science • 🎬 для Creative Labs • 🤝 для Direct Integrations • 🗺️ для Strategic Mapping (Иконки очень маленькие, pixel-art стилистика, минимализм.) ⸻ 📌 ТЕКСТ БЛОКА: Заголовок секции (вверху, перед модулями): WHAT WE CONTROL • Большой заголовок (#00FF00), • Печатается эффектом терминального набора (без моргания). • После появления — лёгкий зелёный “пульс” на несколько миллисекунд. ⸻ 📜 ИТОГОВАЯ СХЕМА БЛОКА: • Чёрный фон + слабая сетка + горизонтальные световые линии. • Вверху: заголовок “WHAT WE CONTROL” (печать + пульс). • Под заголовком: сетка из 6 модулей (по 2 колонки). • Каждая панель — заголовок модуля + подпись. • Анимация появления блоков: последовательная активация. • При наведении: лёгкая пульсация текста и светящаяся рамка. ⸻ 🎨 ВИЗУАЛЬНЫЕ ПАРАМЕТРЫ: Элемент Значение Цвет фона #000000 Цвет шрифтов Основной текст #00FF00, описание #66FF66 Стили шрифтов Моноширинные, жирные для заголовков Стили анимаций Плавная, терминальная активация