Spaces:

timoon811
/

tmtinnumbers

Running

App Files Files Community

timoon811 commited on Apr 29, 2025

Commit

0f216e2

verified ·

1 Parent(s): 5ffa278

Add 3 files

Browse files

Files changed (3) hide show

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

README.md CHANGED Viewed

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

 ---
+title: tmtinnumbers
+emoji: 🐳
+colorFrom: gray
+colorTo: green
 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,198 @@
-<!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 IN NUMBERS - Matrix Console</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        @keyframes flicker {
+            0% { opacity: 0.8; }
+            50% { opacity: 0.95; }
+            100% { opacity: 0.8; }
+        }
+        @keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
+        }
+        @keyframes blink-caret {
+            from, to { border-color: transparent }
+            50% { border-color: #00FF00 }
+        }
+        .matrix-bg {
+            background-color: #000000;
+            position: relative;
+            overflow: hidden;
+        }
+        .matrix-bg::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background:
+                radial-gradient(circle at 10% 20%, rgba(0, 255, 0, 0.03) 0%, transparent 2%),
+                radial-gradient(circle at 90% 30%, rgba(0, 255, 0, 0.02) 0%, transparent 3%),
+                radial-gradient(circle at 50% 80%, rgba(0, 255, 0, 0.01) 0%, transparent 4%);
+            animation: flicker 3s infinite alternate;
+            pointer-events: none;
+        }
+        .matrix-cell {
+            border: 1px solid rgba(0, 255, 0, 0.4);
+            transition: all 0.3s ease;
+        }
+        .matrix-cell:hover {
+            border-color: rgba(0, 255, 0, 0.8);
+            box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
+        }
+        .matrix-title {
+            font-family: 'Space Grotesk', monospace;
+            color: #00FF00;
+            overflow: hidden;
+            white-space: nowrap;
+            letter-spacing: 0.15em;
+            animation:
+                typing 1.5s steps(15, end),
+                blink-caret 0.75s step-end infinite;
+        }
+        .matrix-number {
+            font-family: 'Space Grotesk', monospace;
+            color: #00FF00;
+            font-weight: bold;
+            overflow: hidden;
+            white-space: nowrap;
+            letter-spacing: 0.1em;
+        }
+        .matrix-label {
+            font-family: 'Space Grotesk', monospace;
+            color: #66FF66;
+            opacity: 0;
+            transition: opacity 0.5s ease;
+        }
+        .pixel {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            background-color: rgba(0, 255, 0, 0.1);
+            pointer-events: none;
+        }
+    </style>
+</head>
+<body class="matrix-bg min-h-screen flex flex-col items-center justify-center p-4">
+    <div class="max-w-4xl w-full">
+        <h1 class="matrix-title text-3xl md:text-4xl lg:text-5xl mb-12 text-center">TMT IN NUMBERS</h1>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
+            <!-- First Row -->
+            <div class="matrix-cell p-6 md:p-8 rounded flex flex-col items-center justify-center"
+                 onmouseenter="animateCell(this)">
+                <div class="matrix-number text-5xl md:text-6xl lg:text-7xl mb-2" id="number1"></div>
+                <div class="matrix-label text-lg md:text-xl lg:text-2xl" id="label1">USD IN MANAGED TRAFFIC</div>
+            </div>
+            <div class="matrix-cell p-6 md:p-8 rounded flex flex-col items-center justify-center"
+                 onmouseenter="animateCell(this)">
+                <div class="matrix-number text-5xl md:text-6xl lg:text-7xl mb-2" id="number2"></div>
+                <div class="matrix-label text-lg md:text-xl lg:text-2xl" id="label2">TEAM SPECIALISTS</div>
+            </div>
+            <!-- Second Row -->
+            <div class="matrix-cell p-6 md:p-8 rounded flex flex-col items-center justify-center"
+                 onmouseenter="animateCell(this)">
+                <div class="matrix-number text-5xl md:text-6xl lg:text-7xl mb-2" id="number3"></div>
+                <div class="matrix-label text-lg md:text-xl lg:text-2xl" id="label3">OFFERS ROTATED</div>
+            </div>
+            <div class="matrix-cell p-6 md:p-8 rounded flex flex-col items-center justify-center"
+                 onmouseenter="animateCell(this)">
+                <div class="matrix-number text-5xl md:text-6xl lg:text-7xl mb-2" id="number4"></div>
+                <div class="matrix-label text-lg md:text-xl lg:text-2xl" id="label4">TRAFFIC ECOSYSTEMS</div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Create random flickering pixels
+        function createPixels() {
+            const container = document.body;
+            const pixelCount = 100;
+            for (let i = 0; i < pixelCount; i++) {
+                const pixel = document.createElement('div');
+                pixel.classList.add('pixel');
+                // Random position
+                pixel.style.left = `${Math.random() * 100}%`;
+                pixel.style.top = `${Math.random() * 100}%`;
+                // Random animation
+                pixel.style.animation = `flicker ${2 + Math.random() * 3}s infinite alternate`;
+                pixel.style.opacity = Math.random() * 0.2;
+                container.appendChild(pixel);
+            }
+        }
+        // Type out text with random delays between characters
+        function typeWriter(element, text, speed, delay = 0) {
+            return new Promise((resolve) => {
+                setTimeout(() => {
+                    let i = 0;
+                    const typingInterval = setInterval(() => {
+                        if (i < text.length) {
+                            element.textContent += text.charAt(i);
+                            i++;
+                        } else {
+                            clearInterval(typingInterval);
+                            resolve();
+                        }
+                    }, speed);
+                }, delay);
+            });
+        }
+        // Animate cell on hover
+        function animateCell(cell) {
+            cell.style.transform = 'scale(1.02)';
+            setTimeout(() => {
+                cell.style.transform = 'scale(1)';
+            }, 300);
+        }
+        // Initialize the animation sequence
+        async function initAnimation() {
+            createPixels();
+            // Animate title is already handled by CSS
+            // Animate numbers with staggered delays
+            await typeWriter(document.getElementById('number1'), '5M+', 100);
+            document.getElementById('label1').style.opacity = '1';
+            await typeWriter(document.getElementById('number2'), '70+', 100, 300);
+            document.getElementById('label2').style.opacity = '1';
+            await typeWriter(document.getElementById('number3'), '200+', 100, 600);
+            document.getElementById('label3').style.opacity = '1';
+            await typeWriter(document.getElementById('number4'), '15+', 100, 900);
+            document.getElementById('label4').style.opacity = '1';
+        }
+        // Start animation when page loads
+        window.onload = initAnimation;
+    </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/tmtinnumbers" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ ✅ PROMPT: TMT — Block: “TMT IN NUMBERS” (Matrix Console Style) ⸻ 🎥 ОБЩАЯ ИДЕЯ: Create a cinematic “TMT in Numbers” block styled as a real-time encrypted system output in The Matrix universe. The numbers must feel like vital statistics decoded from the traffic network, displayed on a hacked operator console. ⸻ 🧱 КОМПОЗИЦИЯ БЛОКА: ⸻ 1. Background (Фон) • Полный глубокий чёрный (#000000). • Очень слабый живой фоновый шум: лёгкое мерцание точек, как старые CRT-сканы. • Никаких бегущих кодов на фоне — внимание должно быть только на цифрах. ⸻ 2. Структура размещения данных Параметр Детали Сетка 2 строки по 2 ячейки (2x2) Позиционирование Чёткая прямоугольная сетка с тонкими зелёными линиями между ячейками Анимация загрузки Каждая цифра появляется по очереди “набивкой” символов (буква за буквой) Пропорции Цифры большие и доминирующие, подписи маленькие ⸻ 3. Контент Данные Формат показа Заголовок блока TMT IN NUMBERS (пишется как терминальный набор текста) Показатели: • 5M+ — USD IN MANAGED TRAFFIC • 70+ — TEAM SPECIALISTS • 200+ — OFFERS ROTATED • 15+ — TRAFFIC ECOSYSTEMS ⸻ 4. Оформление цифр и подписей Элемент Стиль Основные цифры Очень крупные, жирный моноширинный шрифт, яркий зелёный #00FF00 Подписи под цифрами Меньший размер, светло-зелёный цвет #66FF66, моноширинный Шрифт JetBrains Mono, Space Grotesk, или аналогичный терминальный Выравнивание Всё строго по центру в каждой ячейке ⸻ 5. Анимация блока Элемент Эффект Заголовок “TMT IN NUMBERS” печатается построчно, без моргания курсора Появление цифр Каждая цифра печатается эффектом терминального набора Появление подписей После набора цифры плавно появляется подпись (fade-in) Фоновые детали Лёгкая вибрация ячеек при появлении данных (эффект перезагрузки сетки) ⸻ 6. Элементы управления • Нет активных кнопок. • При наведении на ячейку: • Едва заметный зелёный “highlight” границ блока (эффект включения модуля). ⸻ 📜 ТЕКСТЫ В БЛОКЕ: TMT IN NUMBERS 5M+ USD IN MANAGED TRAFFIC 70+ TEAM SPECIALISTS 200+ OFFERS ROTATED 15+ TRAFFIC ECOSYSTEMS ⸻ 🎨 ВИЗУАЛЬНЫЕ ПАРАМЕТРЫ: Элемент Значение Цвет фона #000000 Цвет цифр #00FF00 (яркий зелёный) Цвет подписей #66FF66 (светлый зелёный) Обводки ячеек Полупрозрачная зелёная рамка #00FF00 40% Шрифт Только моноширинный, строгий терминальный Размеры Большие цифры, компактные подписи ⸻ 📌 ОСОБЫЕ ТРЕБОВАНИЯ: Пункт Требование Минимализм Да, чистая терминальная эстетика Четкая сетка Да, строгая структура Акцент на цифрах Цифры должны доминировать визуально Атмосфера Ощущение реального системного вывода информации ⸻