Hugging Face's logo

Spaces:
timoon811
/
land2arg
Running

App Files Community
timoon811 commited on
Commit
b00dd44
·
verified ·
1 Parent(s): e2a7fdf

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +985 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Land2arg
3
- emoji: 📊
4
- colorFrom: purple
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: land2arg
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,985 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ru">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Traffic Master - Симулятор арбитражника</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ body {
12
+ font-family: 'Roboto Mono', monospace;
13
+ background-color: #0a0a0a;
14
+ color: #e2e2e2;
15
+ overflow-x: hidden;
16
+ }
17
+
18
+ .neon-purple {
19
+ color: #c678dd;
20
+ text-shadow: 0 0 5px #c678dd, 0 0 10px #c678dd;
21
+ }
22
+
23
+ .neon-green {
24
+ color: #98c379;
25
+ text-shadow: 0 0 5px #98c379, 0 0 10px #98c379;
26
+ }
27
+
28
+ .neon-blue {
29
+ color: #61afef;
30
+ text-shadow: 0 0 5px #61afef, 0 0 10px #61afef;
31
+ }
32
+
33
+ .glow-box {
34
+ box-shadow: 0 0 10px rgba(198, 120, 221, 0.5);
35
+ border: 1px solid rgba(198, 120, 221, 0.3);
36
+ }
37
+
38
+ .glow-box-green {
39
+ box-shadow: 0 0 10px rgba(152, 195, 121, 0.5);
40
+ border: 1px solid rgba(152, 195, 121, 0.3);
41
+ }
42
+
43
+ .glow-box-blue {
44
+ box-shadow: 0 0 10px rgba(97, 175, 239, 0.5);
45
+ border: 1px solid rgba(97, 175, 239, 0.3);
46
+ }
47
+
48
+ .terminal-line {
49
+ position: relative;
50
+ padding-left: 1.5rem;
51
+ }
52
+
53
+ .terminal-line:before {
54
+ content: ">";
55
+ position: absolute;
56
+ left: 0;
57
+ color: #98c379;
58
+ }
59
+
60
+ .fade-in {
61
+ animation: fadeIn 1s ease-in;
62
+ }
63
+
64
+ @keyframes fadeIn {
65
+ from { opacity: 0; }
66
+ to { opacity: 1; }
67
+ }
68
+
69
+ .slide-up {
70
+ animation: slideUp 0.5s ease-out;
71
+ }
72
+
73
+ @keyframes slideUp {
74
+ from { transform: translateY(20px); opacity: 0; }
75
+ to { transform: translateY(0); opacity: 1; }
76
+ }
77
+
78
+ .blurred {
79
+ filter: blur(5px);
80
+ transition: filter 0.3s ease;
81
+ }
82
+
83
+ .blurred:hover {
84
+ filter: blur(0);
85
+ }
86
+
87
+ .notification {
88
+ animation: slideInRight 0.5s ease-out, fadeOut 0.5s ease-out 4s forwards;
89
+ }
90
+
91
+ @keyframes slideInRight {
92
+ from { transform: translateX(100%); }
93
+ to { transform: translateX(0); }
94
+ }
95
+
96
+ @keyframes fadeOut {
97
+ from { opacity: 1; }
98
+ to { opacity: 0; display: none; }
99
+ }
100
+
101
+ .console-input {
102
+ background-color: rgba(10, 10, 10, 0.7);
103
+ border: 1px solid #333;
104
+ color: #98c379;
105
+ font-family: 'Roboto Mono', monospace;
106
+ padding: 0.5rem;
107
+ width: 100%;
108
+ }
109
+
110
+ .console-input:focus {
111
+ outline: none;
112
+ border-color: #c678dd;
113
+ box-shadow: 0 0 10px rgba(198, 120, 221, 0.5);
114
+ }
115
+
116
+ .tab-content {
117
+ display: none;
118
+ }
119
+
120
+ .tab-content.active {
121
+ display: block;
122
+ animation: fadeIn 0.5s ease-in;
123
+ }
124
+
125
+ .tab-button.active {
126
+ border-bottom: 2px solid #c678dd;
127
+ color: #c678dd;
128
+ }
129
+
130
+ .access-level {
131
+ transition: all 0.3s ease;
132
+ }
133
+
134
+ .access-level:hover {
135
+ transform: translateY(-5px);
136
+ box-shadow: 0 10px 20px rgba(198, 120, 221, 0.3);
137
+ }
138
+
139
+ .profile-card {
140
+ transition: all 0.3s ease;
141
+ }
142
+
143
+ .profile-card:hover {
144
+ transform: translateY(-5px);
145
+ box-shadow: 0 10px 20px rgba(97, 175, 239, 0.3);
146
+ }
147
+
148
+ .profile-hover {
149
+ opacity: 0;
150
+ transition: all 0.3s ease;
151
+ transform: translateY(10px);
152
+ }
153
+
154
+ .profile-card:hover .profile-hover {
155
+ opacity: 1;
156
+ transform: translateY(0);
157
+ }
158
+
159
+ .top-row {
160
+ background: linear-gradient(90deg, rgba(198, 120, 221, 0.1), rgba(198, 120, 221, 0.3), rgba(198, 120, 221, 0.1));
161
+ animation: pulse 2s infinite;
162
+ }
163
+
164
+ @keyframes pulse {
165
+ 0% { background-color: rgba(198, 120, 221, 0.1); }
166
+ 50% { background-color: rgba(198, 120, 221, 0.3); }
167
+ 100% { background-color: rgba(198, 120, 221, 0.1); }
168
+ }
169
+
170
+ .record-row {
171
+ background: linear-gradient(90deg, rgba(152, 195, 121, 0.1), rgba(152, 195, 121, 0.3), rgba(152, 195, 121, 0.1));
172
+ }
173
+
174
+ .loading-bar {
175
+ width: 0;
176
+ height: 2px;
177
+ background-color: #98c379;
178
+ animation: loading 2s forwards;
179
+ }
180
+
181
+ @keyframes loading {
182
+ 0% { width: 0; }
183
+ 100% { width: 100%; }
184
+ }
185
+ </style>
186
+ </head>
187
+ <body class="min-h-screen">
188
+ <!-- Dashboard Intro -->
189
+ <section id="dashboard-intro" class="min-h-screen flex flex-col justify-center items-center p-4 relative overflow-hidden">
190
+ <div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 to-transparent opacity-30"></div>
191
+ <div class="absolute bottom-0 left-0 w-full h-1/3 bg-gradient-to-t from-black to-transparent"></div>
192
+
193
+ <div class="relative z-10 max-w-4xl mx-auto text-center fade-in">
194
+ <div class="terminal-line text-xl md:text-3xl mb-6">
195
+ <span class="neon-green">system@traffic-master:~$</span> <span class="neon-purple">init dashboard</span>
196
+ </div>
197
+
198
+ <div class="terminal-line text-sm md:text-base mb-2">
199
+ <span class="text-gray-400">> Checking permissions...</span>
200
+ </div>
201
+
202
+ <div class="terminal-line text-sm md:text-base mb-2">
203
+ <span class="text-gray-400">> Loading modules...</span>
204
+ </div>
205
+
206
+ <div class="terminal-line text-sm md:text-base mb-8">
207
+ <span class="text-gray-400">> Connecting to TMT network...</span>
208
+ </div>
209
+
210
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 neon-purple">TRAFFIC MASTER</h1>
211
+ <p class="text-xl md:text-2xl mb-10 neon-blue">Система медиабаинга нового поколения</p>
212
+
213
+ <button id="enter-dashboard" class="bg-transparent glow-box hover:bg-purple-900/30 text-white font-bold py-3 px-8 rounded-lg transition-all duration-300 transform hover:scale-105">
214
+ <span class="neon-green">Войти в дашборд</span>
215
+ </button>
216
+ </div>
217
+
218
+ <div class="absolute bottom-10 left-0 right-0 text-center text-gray-500 text-sm">
219
+ <p>system v3.4.2 | TMT Core © 2023</p>
220
+ </div>
221
+ </section>
222
+
223
+ <!-- Main Content (hidden initially) -->
224
+ <div id="main-content" class="hidden">
225
+ <!-- Header -->
226
+ <header class="bg-black/80 backdrop-blur-sm border-b border-gray-800 fixed top-0 left-0 right-0 z-50">
227
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
228
+ <div class="flex items-center space-x-2">
229
+ <div class="w-8 h-8 rounded-full bg-purple-900 flex items-center justify-center">
230
+ <span class="text-purple-300 font-bold">TM</span>
231
+ </div>
232
+ <span class="text-xl font-bold neon-purple">TRAFFIC MASTER</span>
233
+ </div>
234
+
235
+ <nav class="hidden md:flex space-x-6">
236
+ <a href="#about" class="text-gray-400 hover:text-purple-300 transition">О системе</a>
237
+ <a href="#profiles" class="text-gray-400 hover:text-purple-300 transition">Профили</a>
238
+ <a href="#program" class="text-gray-400 hover:text-purple-300 transition">Модули</a>
239
+ <a href="#results" class="text-gray-400 hover:text-purple-300 transition">Результаты</a>
240
+ <a href="#access" class="text-gray-400 hover:text-purple-300 transition">Доступ</a>
241
+ </nav>
242
+
243
+ <button id="connect-btn" class="bg-transparent border border-purple-500/50 text-purple-300 hover:bg-purple-900/30 px-4 py-1 rounded-md text-sm transition">
244
+ Подключиться
245
+ </button>
246
+ </div>
247
+ </header>
248
+
249
+ <!-- About TMT Section -->
250
+ <section id="about" class="pt-32 pb-20 px-4 container mx-auto">
251
+ <div class="text-center mb-16">
252
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 neon-blue">TMT CORE SYSTEM</h2>
253
+ <p class="text-gray-400 max-w-2xl mx-auto">Централизованная система управления трафиком и автоматизации медиабаинга</p>
254
+ </div>
255
+
256
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
257
+ <div class="glow-box p-6 rounded-lg bg-gray-900/50">
258
+ <div class="flex justify-between items-start mb-6">
259
+ <div>
260
+ <h3 class="text-xl font-bold mb-2 neon-green">Финансовый дашборд</h3>
261
+ <p class="text-gray-400 text-sm">Общий оборот системы</p>
262
+ </div>
263
+ <span class="text-xs bg-green-900/50 text-green-300 px-2 py-1 rounded">LIVE</span>
264
+ </div>
265
+
266
+ <div class="bg-black/50 p-4 rounded mb-4">
267
+ <div class="flex justify-between items-center mb-2">
268
+ <span class="text-gray-400">Total volume:</span>
269
+ <span class="text-2xl font-bold neon-green" id="counter">$0</span>
270
+ </div>
271
+ <div class="h-1 bg-gray-800 rounded-full overflow-hidden">
272
+ <div class="h-full bg-gradient-to-r from-purple-500 to-green-500" style="width: 85%"></div>
273
+ </div>
274
+ </div>
275
+
276
+ <div class="grid grid-cols-3 gap-4 text-center">
277
+ <div class="bg-black/30 p-3 rounded">
278
+ <p class="text-gray-400 text-xs">Вертикали</p>
279
+ <p class="text-xl font-bold neon-purple">5+</p>
280
+ </div>
281
+ <div class="bg-black/30 p-3 rounded">
282
+ <p class="text-gray-400 text-xs">Команда</p>
283
+ <p class="text-xl font-bold neon-blue">20+</p>
284
+ </div>
285
+ <div class="bg-black/30 p-3 rounded">
286
+ <p class="text-gray-400 text-xs">Связки</p>
287
+ <p class="text-xl font-bold neon-green">100+</p>
288
+ </div>
289
+ </div>
290
+ </div>
291
+
292
+ <div class="glow-box-blue p-6 rounded-lg bg-gray-900/50">
293
+ <div class="flex items-center space-x-4 mb-6">
294
+ <div class="w-16 h-16 rounded-full bg-gray-800 overflow-hidden">
295
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Тимур" class="w-full h-full object-cover">
296
+ </div>
297
+ <div>
298
+ <h3 class="text-xl font-bold neon-blue">Тимур Махмутов</h3>
299
+ <p class="text-gray-400 text-sm">Lead System Architect</p>
300
+ </div>
301
+ </div>
302
+
303
+ <div class="bg-black/50 p-4 rounded mb-4">
304
+ <p class="text-gray-300 mb-3">"Мы создали систему, которая превращает знания в стабильный доход. Теперь ты не просто арбитражник — ты оператор прибыльного трафик-контура."</p>
305
+ <div class="flex space-x-2">
306
+ <span class="text-xs bg-blue-900/50 text-blue-300 px-2 py-1 rounded">TMT Founder</span>
307
+ <span class="text-xs bg-purple-900/50 text-purple-300 px-2 py-1 rounded">5+ лет в арбитраже</span>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="flex space-x-2">
312
+ <a href="#" class="text-gray-400 hover:text-blue-300"><i class="fab fa-telegram"></i></a>
313
+ <a href="#" class="text-gray-400 hover:text-blue-300"><i class="fab fa-instagram"></i></a>
314
+ <a href="#" class="text-gray-400 hover:text-blue-300"><i class="fab fa-linkedin"></i></a>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </section>
319
+
320
+ <!-- Who Is It For Section -->
321
+ <section id="profiles" class="py-20 px-4 bg-gray-900/30">
322
+ <div class="container mx-auto">
323
+ <div class="text-center mb-16">
324
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 neon-purple">КОМУ ПОДОЙДЁТ СИСТЕМА</h2>
325
+ <p class="text-gray-400 max-w-2xl mx-auto">Выбери свой профиль для интеграции с TMT Core</p>
326
+ </div>
327
+
328
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
329
+ <!-- Profile 1 -->
330
+ <div class="profile-card glow-box rounded-lg bg-gray-900/50 p-6 cursor-pointer">
331
+ <div class="flex items-center space-x-3 mb-4">
332
+ <div class="w-10 h-10 rounded-full bg-purple-900/50 flex items-center justify-center">
333
+ <span class="text-purple-300">🧑</span>
334
+ </div>
335
+ <h3 class="text-lg font-bold neon-purple">Новичок</h3>
336
+ </div>
337
+ <p class="text-gray-400 text-sm mb-4">Только начинаешь в арбитраже? Система проведёт тебя от основ до первых прибылей.</p>
338
+
339
+ <div class="profile-hover">
340
+ <div class="bg-black/50 p-3 rounded text-xs">
341
+ <p class="neon-green mb-1">"Ты не знал с чего начать. Теперь у тебя есть чёткий алгоритм."</p>
342
+ <p class="text-gray-400">Средний ROI: 120% за 3 месяца</p>
343
+ </div>
344
+ </div>
345
+ </div>
346
+
347
+ <!-- Profile 2 -->
348
+ <div class="profile-card glow-box rounded-lg bg-gray-900/50 p-6 cursor-pointer">
349
+ <div class="flex items-center space-x-3 mb-4">
350
+ <div class="w-10 h-10 rounded-full bg-blue-900/50 flex items-center justify-center">
351
+ <span class="text-blue-300">🧑‍💻</span>
352
+ </div>
353
+ <h3 class="text-lg font-bold neon-blue">Таргетолог</h3>
354
+ </div>
355
+ <p class="text-gray-400 text-sm mb-4">Умеешь настраивать рекламу? Научись превращать клики в стабильный доход.</p>
356
+
357
+ <div class="profile-hover">
358
+ <div class="bg-black/50 p-3 rounded text-xs">
359
+ <p class="neon-green mb-1">"Ты уже знал рекламу. Теперь будешь знать деньги."</p>
360
+ <p class="text-gray-400">Средний ROI: 180% за 2 месяца</p>
361
+ </div>
362
+ </div>
363
+ </div>
364
+
365
+ <!-- Profile 3 -->
366
+ <div class="profile-card glow-box rounded-lg bg-gray-900/50 p-6 cursor-pointer">
367
+ <div class="flex items-center space-x-3 mb-4">
368
+ <div class="w-10 h-10 rounded-full bg-green-900/50 flex items-center justify-center">
369
+ <span class="text-green-300">🧟</span>
370
+ </div>
371
+ <h3 class="text-lg font-bold neon-green">Фрилансер</h3>
372
+ </div>
373
+ <p class="text-gray-400 text-sm mb-4">Работаешь на заказы? Переходи на свою систему с предсказуемым доходом.</p>
374
+
375
+ <div class="profile-hover">
376
+ <div class="bg-black/50 p-3 rounded text-xs">
377
+ <p class="neon-green mb-1">"Ты менял время на деньги. Теперь деньги работают на тебя."</p>
378
+ <p class="text-gray-400">Средний ROI: 200% за 1.5 месяца</p>
379
+ </div>
380
+ </div>
381
+ </div>
382
+
383
+ <!-- Profile 4 -->
384
+ <div class="profile-card glow-box rounded-lg bg-gray-900/50 p-6 cursor-pointer">
385
+ <div class="flex items-center space-x-3 mb-4">
386
+ <div class="w-10 h-10 rounded-full bg-yellow-900/50 flex items-center justify-center">
387
+ <span class="text-yellow-300">👨‍✈️</span>
388
+ </div>
389
+ <h3 class="text-lg font-bold neon-purple">Тимлид</h3>
390
+ </div>
391
+ <p class="text-gray-400 text-sm mb-4">Управляешь командой? Масштабируй прибыль с автоматизированными процессами.</p>
392
+
393
+ <div class="profile-hover">
394
+ <div class="bg-black/50 p-3 rounded text-xs">
395
+ <p class="neon-green mb-1">"Ты управлял людьми. Теперь управляй системой."</p>
396
+ <p class="text-gray-400">Средний ROI: 250% за 1 месяц</p>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+ </div>
402
+ </section>
403
+
404
+ <!-- Program Section -->
405
+ <section id="program" class="py-20 px-4 container mx-auto">
406
+ <div class="text-center mb-16">
407
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 neon-blue">ПРОГРАММА СИСТЕМЫ</h2>
408
+ <p class="text-gray-400 max-w-2xl mx-auto">Полный цикл интеграции с TMT Core</p>
409
+ </div>
410
+
411
+ <div class="glow-box rounded-lg bg-gray-900/50 overflow-hidden">
412
+ <div class="flex overflow-x-auto border-b border-gray-800">
413
+ <button class="tab-button px-6 py-3 font-medium text-sm border-b-2 border-transparent active" data-tab="basics">Основы</button>
414
+ <button class="tab-button px-6 py-3 font-medium text-sm border-b-2 border-transparent" data-tab="bundles">Связки</button>
415
+ <button class="tab-button px-6 py-3 font-medium text-sm border-b-2 border-transparent" data-tab="creatives">Креативы</button>
416
+ <button class="tab-button px-6 py-3 font-medium text-sm border-b-2 border-transparent" data-tab="traffic">Трафик</button>
417
+ <button class="tab-button px-6 py-3 font-medium text-sm border-b-2 border-transparent" data-tab="scale">Скейл</button>
418
+ </div>
419
+
420
+ <div class="p-6">
421
+ <div id="basics" class="tab-content active">
422
+ <h3 class="text-xl font-bold mb-4 neon-purple">Основы медиабаинга</h3>
423
+ <p class="text-gray-300 mb-6">Фундаментальные принципы работы с трафиком и его монетизации.</p>
424
+
425
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
426
+ <div class="bg-black/30 p-4 rounded border border-gray-800">
427
+ <div class="flex items-center mb-2">
428
+ <div class="w-6 h-6 rounded-full bg-purple-900/50 flex items-center justify-center mr-2">
429
+ <span class="text-purple-300 text-xs">1</span>
430
+ </div>
431
+ <h4 class="font-bold">Архитектура прибыли</h4>
432
+ </div>
433
+ <p class="text-gray-400 text-sm">Как устроен доход в арбитраже трафика</p>
434
+ </div>
435
+
436
+ <div class="bg-black/30 p-4 rounded border border-gray-800">
437
+ <div class="flex items-center mb-2">
438
+ <div class="w-6 h-6 rounded-full bg-purple-900/50 flex items-center justify-center mr-2">
439
+ <span class="text-purple-300 text-xs">2</span>
440
+ </div>
441
+ <h4 class="font-bold">Инструментарий</h4>
442
+ </div>
443
+ <p class="text-gray-400 text-sm">Keitaro, Binom, Facebook Ads и другие</p>
444
+ </div>
445
+
446
+ <div class="bg-black/30 p-4 rounded border border-gray-800 blurred">
447
+ <div class="flex items-center mb-2">
448
+ <div class="w-6 h-6 rounded-full bg-purple-900/50 flex items-center justify-center mr-2">
449
+ <span class="text-purple-300 text-xs">3</span>
450
+ </div>
451
+ <h4 class="font-bold">Безопасность</h4>
452
+ </div>
453
+ <p class="text-gray-400 text-sm">Как работать без блокировок и потерь</p>
454
+ </div>
455
+
456
+ <div class="bg-black/30 p-4 rounded border border-gray-800 blurred">
457
+ <div class="flex items-center mb-2">
458
+ <div class="w-6 h-6 rounded-full bg-purple-900/50 flex items-center justify-center mr-2">
459
+ <span class="text-purple-300 text-xs">4</span>
460
+ </div>
461
+ <h4 class="font-bold">Первая связка</h4>
462
+ </div>
463
+ <p class="text-gray-400 text-sm">От запуска до первых результатов</p>
464
+ </div>
465
+ </div>
466
+ </div>
467
+
468
+ <div id="bundles" class="tab-content">
469
+ <h3 class="text-xl font-bold mb-4 neon-blue">Рабочие связки</h3>
470
+ <p class="text-gray-300 mb-6">Проверенные схемы монетизации трафика в разных вертикалях.</p>
471
+ <div class="bg-black/30 p-8 rounded border border-gray-800 text-center">
472
+ <p class="text-gray-400">Для просмотра этого модуля требуется доступ Level 2: Operator</p>
473
+ <button class="mt-4 bg-transparent border border-blue-500/50 text-blue-300 hover:bg-blue-900/30 px-4 py-1 rounded-md text-sm transition">
474
+ Получить доступ
475
+ </button>
476
+ </div>
477
+ </div>
478
+
479
+ <div id="creatives" class="tab-content">
480
+ <h3 class="text-xl font-bold mb-4 neon-green">Креативы и лендинги</h3>
481
+ <p class="text-gray-300 mb-6">Как создавать конвертящие креативы и landing pages.</p>
482
+ <div class="bg-black/30 p-8 rounded border border-gray-800 text-center">
483
+ <p class="text-gray-400">Для просмотра этого модуля требуется доступ Level 2: Operator</p>
484
+ <button class="mt-4 bg-transparent border border-green-500/50 text-green-300 hover:bg-green-900/30 px-4 py-1 rounded-md text-sm transition">
485
+ Получить доступ
486
+ </button>
487
+ </div>
488
+ </div>
489
+
490
+ <div id="traffic" class="tab-content">
491
+ <h3 class="text-xl font-bold mb-4 neon-purple">Работа с трафиком</h3>
492
+ <p class="text-gray-300 mb-6">Оптимизация и масштабирование трафика.</p>
493
+ <div class="bg-black/30 p-8 rounded border border-gray-800 text-center">
494
+ <p class="text-gray-400">Для просмотра этого модуля требуется доступ Level 3: Elite</p>
495
+ <button class="mt-4 bg-transparent border border-purple-500/50 text-purple-300 hover:bg-purple-900/30 px-4 py-1 rounded-md text-sm transition">
496
+ Получить доступ
497
+ </button>
498
+ </div>
499
+ </div>
500
+
501
+ <div id="scale" class="tab-content">
502
+ <h3 class="text-xl font-bold mb-4 neon-blue">Масштабирование</h3>
503
+ <p class="text-gray-300 mb-6">Как вывести систему на стабильный доход 5K+ в месяц.</p>
504
+ <div class="bg-black/30 p-8 rounded border border-gray-800 text-center">
505
+ <p class="text-gray-400">Для просмотра этого модуля требуется доступ Level 3: Elite</p>
506
+ <button class="mt-4 bg-transparent border border-blue-500/50 text-blue-300 hover:bg-blue-900/30 px-4 py-1 rounded-md text-sm transition">
507
+ Получить доступ
508
+ </button>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+ </section>
514
+
515
+ <!-- Live Notifications -->
516
+ <div id="notification-container" class="fixed bottom-4 right-4 space-y-3 z-50 w-72"></div>
517
+
518
+ <!-- Results Section -->
519
+ <section id="results" class="py-20 px-4 bg-gray-900/30">
520
+ <div class="container mx-auto">
521
+ <div class="text-center mb-16">
522
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 neon-green">РЕЗУЛЬТАТЫ ОПЕРАТОРОВ</h2>
523
+ <p class="text-gray-400 max-w-2xl mx-auto">Последние операции в системе TMT Core</p>
524
+ </div>
525
+
526
+ <div class="glow-box-green rounded-lg bg-gray-900/50 overflow-hidden">
527
+ <div class="overflow-x-auto">
528
+ <table class="min-w-full divide-y divide-gray-800">
529
+ <thead class="bg-black/50">
530
+ <tr>
531
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Оператор</th>
532
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Вертикаль</th>
533
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">GEO</th>
534
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">ROI</th>
535
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Профит</th>
536
+ </tr>
537
+ </thead>
538
+ <tbody class="divide-y divide-gray-800">
539
+ <tr class="top-row">
540
+ <td class="px-6 py-4 whitespace-nowrap">
541
+ <div class="flex items-center">
542
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-900/50 flex items-center justify-center">
543
+ <span class="text-green-300">👑</span>
544
+ </div>
545
+ <div class="ml-4">
546
+ <div class="text-sm font-medium neon-green">Алексей К.</div>
547
+ <div class="text-xs text-gray-400">Level 3</div>
548
+ </div>
549
+ </div>
550
+ </td>
551
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Nutra</td>
552
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">US</td>
553
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-bold neon-green">320%</td>
554
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-bold neon-green">$2,450</td>
555
+ </tr>
556
+
557
+ <tr class="record-row">
558
+ <td class="px-6 py-4 whitespace-nowrap">
559
+ <div class="flex items-center">
560
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-900/50 flex items-center justify-center">
561
+ <span class="text-green-300">🚀</span>
562
+ </div>
563
+ <div class="ml-4">
564
+ <div class="text-sm font-medium neon-green">Мария С.</div>
565
+ <div class="text-xs text-gray-400">Level 2</div>
566
+ </div>
567
+ </div>
568
+ </td>
569
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Gambling</td>
570
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">BR</td>
571
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-bold neon-green">280%</td>
572
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-bold neon-green">$1,870</td>
573
+ </tr>
574
+
575
+ <tr>
576
+ <td class="px-6 py-4 whitespace-nowrap">
577
+ <div class="flex items-center">
578
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-800 flex items-center justify-center">
579
+ <span class="text-gray-300">👨‍💻</span>
580
+ </div>
581
+ <div class="ml-4">
582
+ <div class="text-sm font-medium text-gray-300">Дмитрий П.</div>
583
+ <div class="text-xs text-gray-400">Level 2</div>
584
+ </div>
585
+ </div>
586
+ </td>
587
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">E-commerce</td>
588
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">DE</td>
589
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-400">210%</td>
590
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-400">$1,240</td>
591
+ </tr>
592
+
593
+ <tr>
594
+ <td class="px-6 py-4 whitespace-nowrap">
595
+ <div class="flex items-center">
596
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-800 flex items-center justify-center">
597
+ <span class="text-gray-300">👩‍💻</span>
598
+ </div>
599
+ <div class="ml-4">
600
+ <div class="text-sm font-medium text-gray-300">Анна Л.</div>
601
+ <div class="text-xs text-gray-400">Level 1</div>
602
+ </div>
603
+ </div>
604
+ </td>
605
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Nutra</td>
606
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">ES</td>
607
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-400">180%</td>
608
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-400">$890</td>
609
+ </tr>
610
+
611
+ <tr>
612
+ <td class="px-6 py-4 whitespace-nowrap">
613
+ <div class="flex items-center">
614
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-800 flex items-center justify-center">
615
+ <span class="text-gray-300">🧑‍🎓</span>
616
+ </div>
617
+ <div class="ml-4">
618
+ <div class="text-sm font-medium text-gray-300">Иван М.</div>
619
+ <div class="text-xs text-gray-400">Level 1</div>
620
+ </div>
621
+ </div>
622
+ </td>
623
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Crypto</td>
624
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">IN</td>
625
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-400">150%</td>
626
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-400">$650</td>
627
+ </tr>
628
+ </tbody>
629
+ </table>
630
+ </div>
631
+
632
+ <div class="px-6 py-4 bg-black/50 border-t border-gray-800 flex justify-center">
633
+ <button id="want-in-table" class="bg-transparent glow-box-green hover:bg-green-900/30 text-white font-bold py-2 px-6 rounded-md transition-all duration-300">
634
+ <span class="neon-green">Хочу тоже в таблицу</span>
635
+ </button>
636
+ </div>
637
+ </div>
638
+ </div>
639
+ </section>
640
+
641
+ <!-- Access Levels Section -->
642
+ <section id="access" class="py-20 px-4 container mx-auto">
643
+ <div class="text-center mb-16">
644
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 neon-purple">УРОВНИ ДОСТУПА</h2>
645
+ <p class="text-gray-400 max-w-2xl mx-auto">Выбери свой уровень интеграции с TMT Core</p>
646
+ </div>
647
+
648
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
649
+ <!-- Level 1 -->
650
+ <div class="access-level glow-box rounded-lg bg-gray-900/50 p-8 transform hover:scale-105 cursor-pointer">
651
+ <div class="flex justify-between items-start mb-6">
652
+ <div>
653
+ <h3 class="text-2xl font-bold mb-2 neon-purple">Level 1</h3>
654
+ <p class="text-gray-400">Viewer</p>
655
+ </div>
656
+ <div class="bg-purple-900/30 text-purple-300 px-3 py-1 rounded-full text-xs">Базовый</div>
657
+ </div>
658
+
659
+ <div class="mb-6">
660
+ <p class="text-3xl font-bold mb-1 neon-purple">$297</p>
661
+ <p class="text-gray-400 text-sm">одноразовый платёж</p>
662
+ </div>
663
+
664
+ <ul class="space-y-3 mb-8">
665
+ <li class="flex items-center">
666
+ <span class="text-purple-300 mr-2">✓</span>
667
+ <span class="text-gray-300">Доступ к основам</span>
668
+ </li>
669
+ <li class="flex items-center">
670
+ <span class="text-purple-300 mr-2">✓</span>
671
+ <span class="text-gray-300">5 базовых связок</span>
672
+ </li>
673
+ <li class="flex items-center">
674
+ <span class="text-purple-300 mr-2">✓</span>
675
+ <span class="text-gray-300">Доступ в общий чат</span>
676
+ </li>
677
+ <li class="flex items-center">
678
+ <span class="text-gray-500 mr-2">✗</span>
679
+ <span class="text-gray-500">Закрытые модули</span>
680
+ </li>
681
+ <li class="flex items-center">
682
+ <span class="text-gray-500 mr-2">✗</span>
683
+ <span class="text-gray-500">Персональный ментор</span>
684
+ </li>
685
+ </ul>
686
+
687
+ <button class="w-full bg-transparent border border-purple-500/50 text-purple-300 hover:bg-purple-900/30 py-2 rounded-md transition">
688
+ Получить доступ
689
+ </button>
690
+ </div>
691
+
692
+ <!-- Level 2 -->
693
+ <div class="access-level glow-box-blue rounded-lg bg-gray-900/50 p-8 transform hover:scale-105 cursor-pointer">
694
+ <div class="flex justify-between items-start mb-6">
695
+ <div>
696
+ <h3 class="text-2xl font-bold mb-2 neon-blue">Level 2</h3>
697
+ <p class="text-gray-400">Operator</p>
698
+ </div>
699
+ <div class="bg-blue-900/30 text-blue-300 px-3 py-1 rounded-full text-xs">Популярный</div>
700
+ </div>
701
+
702
+ <div class="mb-6">
703
+ <p class="text-3xl font-bold mb-1 neon-blue">$997</p>
704
+ <p class="text-gray-400 text-sm">одноразовый платёж</p>
705
+ </div>
706
+
707
+ <ul class="space-y-3 mb-8">
708
+ <li class="flex items-center">
709
+ <span class="text-blue-300 mr-2">✓</span>
710
+ <span class="text-gray-300">Все из Level 1</span>
711
+ </li>
712
+ <li class="flex items-center">
713
+ <span class="text-blue-300 mr-2">✓</span>
714
+ <span class="text-gray-300">20+ рабочих связок</span>
715
+ </li>
716
+ <li class="flex items-center">
717
+ <span class="text-blue-300 mr-2">✓</span>
718
+ <span class="text-gray-300">Креативы и лендинги</span>
719
+ </li>
720
+ <li class="flex items-center">
721
+ <span class="text-blue-300 mr-2">✓</span>
722
+ <span class="text-gray-300">Оптимизация трафика</span>
723
+ </li>
724
+ <li class="flex items-center">
725
+ <span class="text-gray-500 mr-2">✗</span>
726
+ <span class="text-gray-500">Персональный ментор</span>
727
+ </li>
728
+ </ul>
729
+
730
+ <button class="w-full bg-transparent border border-blue-500/50 text-blue-300 hover:bg-blue-900/30 py-2 rounded-md transition">
731
+ Получить доступ
732
+ </button>
733
+ </div>
734
+
735
+ <!-- Level 3 -->
736
+ <div class="access-level glow-box-green rounded-lg bg-gray-900/50 p-8 transform hover:scale-105 cursor-pointer">
737
+ <div class="flex justify-between items-start mb-6">
738
+ <div>
739
+ <h3 class="text-2xl font-bold mb-2 neon-green">Level 3</h3>
740
+ <p class="text-gray-400">Elite</p>
741
+ </div>
742
+ <div class="bg-green-900/30 text-green-300 px-3 py-1 rounded-full text-xs">VIP</div>
743
+ </div>
744
+
745
+ <div class="mb-6">
746
+ <p class="text-3xl font-bold mb-1 neon-green">$2,497</p>
747
+ <p class="text-gray-400 text-sm">одноразовый платёж</p>
748
+ </div>
749
+
750
+ <ul class="space-y-3 mb-8">
751
+ <li class="flex items-center">
752
+ <span class="text-green-300 mr-2">✓</span>
753
+ <span class="text-gray-300">Все из Level 2</span>
754
+ </li>
755
+ <li class="flex items-center">
756
+ <span class="text-green-300 mr-2">✓</span>
757
+ <span class="text-gray-300">Персональный ментор</span>
758
+ </li>
759
+ <li class="flex items-center">
760
+ <span class="text-green-300 mr-2">✓</span>
761
+ <span class="text-gray-300">Скейл до 10K+/мес</span>
762
+ </li>
763
+ <li class="flex items-center">
764
+ <span class="text-green-300 mr-2">✓</span>
765
+ <span class="text-gray-300">Закрытые обновления</span>
766
+ </li>
767
+ <li class="flex items-center">
768
+ <span class="text-green-300 mr-2">✓</span>
769
+ <span class="text-gray-300">Приватные связки</span>
770
+ </li>
771
+ </ul>
772
+
773
+ <button class="w-full bg-transparent border border-green-500/50 text-green-300 hover:bg-green-900/30 py-2 rounded-md transition">
774
+ Получить доступ
775
+ </button>
776
+ </div>
777
+ </div>
778
+ </section>
779
+
780
+ <!-- Footer -->
781
+ <footer class="py-12 px-4 bg-black/80 border-t border-gray-800">
782
+ <div class="container mx-auto">
783
+ <div class="flex flex-col md:flex-row justify-between items-center">
784
+ <div class="flex items-center space-x-2 mb-6 md:mb-0">
785
+ <div class="w-8 h-8 rounded-full bg-purple-900 flex items-center justify-center">
786
+ <span class="text-purple-300 font-bold">TM</span>
787
+ </div>
788
+ <span class="text-xl font-bold neon-purple">TRAFFIC MASTER</span>
789
+ </div>
790
+
791
+ <div class="flex space-x-6 mb-6 md:mb-0">
792
+ <a href="#" class="text-gray-400 hover:text-purple-300 transition"><i class="fab fa-telegram"></i></a>
793
+ <a href="#" class="text-gray-400 hover:text-purple-300 transition"><i class="fab fa-instagram"></i></a>
794
+ <a href="#" class="text-gray-400 hover:text-purple-300 transition"><i class="fab fa-youtube"></i></a>
795
+ </div>
796
+
797
+ <div class="text-gray-500 text-sm">
798
+ <p>TMT Core System © 2023. Все права защищены.</p>
799
+ </div>
800
+ </div>
801
+ </div>
802
+ </footer>
803
+ </div>
804
+
805
+ <!-- Connect Modal -->
806
+ <div id="connect-modal" class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center hidden">
807
+ <div class="glow-box rounded-lg bg-gray-900 w-full max-w-md mx-4 overflow-hidden">
808
+ <div class="p-6">
809
+ <div class="flex justify-between items-center mb-6">
810
+ <h3 class="text-xl font-bold neon-purple">Подключение к системе</h3>
811
+ <button id="close-modal" class="text-gray-400 hover:text-white">
812
+ <i class="fas fa-times"></i>
813
+ </button>
814
+ </div>
815
+
816
+ <div class="mb-6">
817
+ <label class="block text-gray-400 text-sm mb-2">Telegram</label>
818
+ <input type="text" class="console-input" placeholder="@username">
819
+ </div>
820
+
821
+ <div class="mb-6">
822
+ <label class="block text-gray-400 text-sm mb-2">Имя</label>
823
+ <input type="text" class="console-input" placeholder="Как к вам обращаться?">
824
+ </div>
825
+
826
+ <div class="mb-6">
827
+ <label class="block text-gray-400 text-sm mb-2">Цель подключения</label>
828
+ <select class="console-input">
829
+ <option>Выберите вариант</option>
830
+ <option>Начать с нуля</option>
831
+ <option>Увеличить доход</option>
832
+ <option>Масштабировать бизнес</option>
833
+ <option>Другое</option>
834
+ </select>
835
+ </div>
836
+
837
+ <button id="submit-connect" class="w-full bg-transparent glow-box hover:bg-purple-900/30 text-white font-bold py-3 rounded-lg transition">
838
+ <span class="neon-green">Подключиться к системе</span>
839
+ </button>
840
+
841
+ <div id="loading-bar" class="loading-bar mt-4 hidden"></div>
842
+
843
+ <div id="success-message" class="mt-4 text-center hidden">
844
+ <p class="neon-green mb-2">Доступ подтверждён!</p>
845
+ <p class="text-gray-400 text-sm">Скоро с вами свяжется наш оператор.</p>
846
+ </div>
847
+ </div>
848
+ </div>
849
+ </div>
850
+
851
+ <script>
852
+ // Counter animation
853
+ function animateCounter() {
854
+ let counter = 0;
855
+ const target = 5300000;
856
+ const element = document.getElementById('counter');
857
+ const duration = 3000;
858
+ const step = target / (duration / 16);
859
+
860
+ const interval = setInterval(() => {
861
+ counter += step;
862
+ if (counter >= target) {
863
+ counter = target;
864
+ clearInterval(interval);
865
+ }
866
+ element.textContent = '$' + Math.floor(counter).toLocaleString();
867
+ }, 16);
868
+ }
869
+
870
+ // Tab switching
871
+ function setupTabs() {
872
+ const tabButtons = document.querySelectorAll('.tab-button');
873
+
874
+ tabButtons.forEach(button => {
875
+ button.addEventListener('click', () => {
876
+ // Remove active class from all buttons and contents
877
+ document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
878
+ document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
879
+
880
+ // Add active class to clicked button
881
+ button.classList.add('active');
882
+
883
+ // Show corresponding content
884
+ const tabId = button.getAttribute('data-tab');
885
+ document.getElementById(tabId).classList.add('active');
886
+ });
887
+ });
888
+ }
889
+
890
+ // Notifications
891
+ function showRandomNotification() {
892
+ const notifications = [
893
+ { icon: '💰', text: '+$500 получено от FB', color: 'green' },
894
+ { icon: '🌎', text: 'Оффер GEO: ES дал ROI 220%', color: 'blue' },
895
+ { icon: '🤖', text: 'Лид: Telegram → WhatsApp → DEPOSIT', color: 'purple' },
896
+ { icon: '📈', text: 'Новый рекорд: $2,450 за день', color: 'green' },
897
+ { icon: '🔥', text: 'Новая связка: Nutra US ROI 320%', color: 'purple' }
898
+ ];
899
+
900
+ const randomNotif = notifications[Math.floor(Math.random() * notifications.length)];
901
+
902
+ const notification = document.createElement('div');
903
+ notification.className = `notification glow-box-${randomNotif.color} rounded-lg bg-gray-900/80 p-4 flex items-center space-x-3`;
904
+ notification.innerHTML = `
905
+ <span class="text-2xl">${randomNotif.icon}</span>
906
+ <span class="text-sm">${randomNotif.text}</span>
907
+ `;
908
+
909
+ const container = document.getElementById('notification-container');
910
+ container.appendChild(notification);
911
+
912
+ // Remove notification after animation
913
+ setTimeout(() => {
914
+ notification.remove();
915
+ }, 5000);
916
+ }
917
+
918
+ // Connect modal
919
+ function setupModal() {
920
+ const connectBtn = document.getElementById('connect-btn');
921
+ const wantInTableBtn = document.getElementById('want-in-table');
922
+ const closeModalBtn = document.getElementById('close-modal');
923
+ const modal = document.getElementById('connect-modal');
924
+ const submitBtn = document.getElementById('submit-connect');
925
+ const loadingBar = document.getElementById('loading-bar');
926
+ const successMessage = document.getElementById('success-message');
927
+
928
+ // Open modal
929
+ [connectBtn, wantInTableBtn].forEach(btn => {
930
+ btn.addEventListener('click', () => {
931
+ modal.classList.remove('hidden');
932
+ });
933
+ });
934
+
935
+ // Close modal
936
+ closeModalBtn.addEventListener('click', () => {
937
+ modal.classList.add('hidden');
938
+ loadingBar.classList.add('hidden');
939
+ successMessage.classList.add('hidden');
940
+ });
941
+
942
+ // Submit form
943
+ submitBtn.addEventListener('click', () => {
944
+ loadingBar.classList.remove('hidden');
945
+ loadingBar.style.animation = 'none';
946
+ void loadingBar.offsetWidth; // Trigger reflow
947
+ loadingBar.style.animation = 'loading 2s forwards';
948
+
949
+ setTimeout(() => {
950
+ loadingBar.classList.add('hidden');
951
+ successMessage.classList.remove('hidden');
952
+
953
+ setTimeout(() => {
954
+ modal.classList.add('hidden');
955
+ successMessage.classList.add('hidden');
956
+ }, 2000);
957
+ }, 2000);
958
+ });
959
+ }
960
+
961
+ // Enter dashboard
962
+ document.getElementById('enter-dashboard').addEventListener('click', () => {
963
+ document.getElementById('dashboard-intro').classList.add('hidden');
964
+ document.getElementById('main-content').classList.remove('hidden');
965
+
966
+ // Start animations
967
+ animateCounter();
968
+
969
+ // Show first notification after 2 seconds
970
+ setTimeout(() => {
971
+ showRandomNotification();
972
+
973
+ // Then show notifications every 5-8 seconds
974
+ setInterval(showRandomNotification, 5000 + Math.random() * 3000);
975
+ }, 2000);
976
+ });
977
+
978
+ // Initialize everything when DOM is loaded
979
+ document.addEventListener('DOMContentLoaded', () => {
980
+ setupTabs();
981
+ setupModal();
982
+ });
983
+ </script>
984
+ <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/land2arg" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
985
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ 🕹️ Техническое задание: Лендинг «Симулятор арбитражника» 🎯 Цель: Создать лендинг, который визуально и функционально имитирует интерфейс медиабайера. Посетитель ощущает, что он внутри арбитражной платформы, где всё живое: цифры, уведомления, вкладки, действия. ⸻ 💡 Главная идея: Лендинг подаётся как внутренняя система арбитражника, имитируя реальные панели: Keitaro, Ads Manager, CRM, Telegram-боты и т.д. Посетитель — будто «подключается» к системе, становится частью TMT. ⸻ 🧱 Структура и блоки 1. Вводный экран (Dashboard Intro) • Анимация «подключение к системе», цифровой интерфейс • Текст: «Добро пожаловать в Traffic Master – систему медиабаинга» • Кнопка: [Войти в дашборд] ⸻ 2. Блок «О нас» — TMT • График оборота (анимация счётчика $5M+) • Фотография Тимура — как карточка сотрудника системы • Логотип TMT + маркеры: • 🔥 5 вертикалей • 🧠 Команда 20+ человек • 💡 100+ связок протестировано ⸻ 3. Кому подойдёт • 4–6 карточек профилей: • 🧑 Новичок • 🧑‍💻 Таргетолог • 🧟 Фрилансер • 👨‍✈️ Тимлид • При наведении — всплывают краткие кейсы и фразы: “Ты уже знал рекламу. Теперь будешь знать деньги.” ⸻ 4. Программа — вкладки • Модули как табы: «Основы», «Связки», «Креативы», «Трафик», «Скейл» • Раскрытие по клику, часть замылена • Оформление как интерфейс обучающей платформы или LMS ⸻ 5. Live Push-уведомления • Каждые 3–5 секунд появляются нотификации: • +500$ получено от FB • Оффер GEO: ES дал ROI 220% • Лид: Telegram → WhatsApp → DEPOSIT ⸻ 6. Результаты учеников — в виде таблицы • Таблица с профитами, ROI, источниками • Ряды подсвечиваются как «ТОП дня», «Рекорд недели» • Внизу кнопка: «Хочу тоже в таблицу» ⸻ 7. Тарифы — в виде доступов • Всплывающие окна с карточками тарифов: • Level 1 — Viewer • Level 2 — Operator • Level 3 — Elite • Формат выбора: кликаешь → открывается модуль доступа ⸻ 8. Форма заявки • Оформлена как pop-up консоли: • Telegram • Имя • Цель (dropdown) • Кнопка: [Подключиться к системе] • Эффект загрузки: «доступ подтверждён» ⸻ 🎨 Визуальный стиль: • Фон: чёрный / тёмно-серый • Акценты: неон (фиолет, салатовый, синий) • Интерфейс: минималистичный tech/dash style • Шрифт: консольный, tech-style, monospace ⸻ ⚙️ Технические особенности: • Полная адаптивность (desktop + mobile) • WebGL / Lottie-анимации push-уведомлений • Эффекты появления блоков: fade, slide-in, hover-реакции • Отложенная подгрузка таблиц и нотификаций