Hugging Face's logo

Spaces:
timoon811
/
tmtinnumbers
Running

App Files Community
tmtinnumbers
File size: 8,215 Bytes
0f216e2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
 
<!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>