timoon811 commited on
Commit
90ff637
·
verified ·
1 Parent(s): c700d46

Сделай еще больше анимации на каждый блок, на каждый элемент, сделай красивые разные эффекты, постарайся посильнее - добавь больше всяких элементов! - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +315 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dajlkfskldflk
3
- emoji: 📊
4
- colorFrom: yellow
5
- colorTo: purple
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: dajlkfskldflk
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: gray
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,315 @@
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>Umbra | Закрытый набор трафферов</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
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
11
+
12
+ body {
13
+ font-family: 'Manrope', sans-serif;
14
+ background-color: #0a0a0a;
15
+ color: #e5e5e5;
16
+ overflow-x: hidden;
17
+ }
18
+
19
+ .gradient-text {
20
+ background: linear-gradient(270deg, #8b5cf6, #ec4899, #3b82f6, #10b981);
21
+ background-size: 300% 300%;
22
+ -webkit-background-clip: text;
23
+ background-clip: text;
24
+ color: transparent;
25
+ animation: gradientShift 8s ease infinite, flicker 3s ease infinite;
26
+ }
27
+
28
+ .glow {
29
+ text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
30
+ }
31
+
32
+ .fade-in {
33
+ animation: fadeIn 1.5s ease-in-out forwards;
34
+ }
35
+
36
+ .slide-up {
37
+ animation: slideUp 1s ease-out forwards;
38
+ }
39
+
40
+ .scale-in {
41
+ animation: scaleIn 1s ease-out forwards;
42
+ }
43
+
44
+ .pulse {
45
+ animation: pulse 2s infinite;
46
+ }
47
+
48
+ @keyframes fadeIn {
49
+ from { opacity: 0; }
50
+ to { opacity: 1; }
51
+ }
52
+
53
+ @keyframes slideUp {
54
+ from {
55
+ opacity: 0;
56
+ transform: translateY(50px);
57
+ }
58
+ to {
59
+ opacity: 1;
60
+ transform: translateY(0);
61
+ }
62
+ }
63
+
64
+ @keyframes scaleIn {
65
+ from {
66
+ opacity: 0;
67
+ transform: scale(0.8);
68
+ }
69
+ to {
70
+ opacity: 1;
71
+ transform: scale(1);
72
+ }
73
+ }
74
+
75
+ @keyframes pulse {
76
+ 0% { transform: scale(1); }
77
+ 50% { transform: scale(1.05); }
78
+ 100% { transform: scale(1); }
79
+ }
80
+
81
+ @keyframes float {
82
+ 0% { transform: translateY(0px); }
83
+ 50% { transform: translateY(-20px); }
84
+ 100% { transform: translateY(0px); }
85
+ }
86
+
87
+ @keyframes gradientShift {
88
+ 0% { background-position: 0% 50%; }
89
+ 50% { background-position: 100% 50%; }
90
+ 100% { background-position: 0% 50%; }
91
+ }
92
+
93
+ @keyframes rotate {
94
+ 0% { transform: rotate(0deg); }
95
+ 100% { transform: rotate(360deg); }
96
+ }
97
+
98
+ @keyframes flicker {
99
+ 0%, 100% { opacity: 1; }
100
+ 50% { opacity: 0.7; }
101
+ }
102
+
103
+ @keyframes wave {
104
+ 0%, 100% { transform: translateY(0) rotate(0deg); }
105
+ 25% { transform: translateY(-10px) rotate(2deg); }
106
+ 50% { transform: translateY(0) rotate(0deg); }
107
+ 75% { transform: translateY(-5px) rotate(-2deg); }
108
+ }
109
+
110
+ @keyframes neonGlow {
111
+ 0% { box-shadow: 0 0 5px #8b5cf6, 0 0 10px #8b5cf6, 0 0 15px #8b5cf6; }
112
+ 50% { box-shadow: 0 0 10px #ec4899, 0 0 20px #ec4899, 0 0 30px #ec4899; }
113
+ 100% { box-shadow: 0 0 5px #3b82f6, 0 0 10px #3b82f6, 0 0 15px #3b82f6; }
114
+ }
115
+
116
+ @keyframes rotate3d {
117
+ 0% { transform: rotateX(0) rotateY(0); }
118
+ 25% { transform: rotateX(5deg) rotateY(5deg); }
119
+ 50% { transform: rotateX(0) rotateY(0); }
120
+ 75% { transform: rotateX(-5deg) rotateY(-5deg); }
121
+ 100% { transform: rotateX(0) rotateY(0); }
122
+ }
123
+
124
+ .bg-grid {
125
+ background-image:
126
+ linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
127
+ linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
128
+ background-size: 40px 40px;
129
+ }
130
+
131
+ .highlight-item {
132
+ transition: all 0.3s ease;
133
+ }
134
+
135
+ .highlight-item:hover {
136
+ transform: translateY(-5px);
137
+ background: rgba(139, 92, 246, 0.1);
138
+ }
139
+ </style>
140
+ </head>
141
+ <body class="bg-grid min-h-screen flex items-center justify-center p-4 relative overflow-hidden">
142
+ <!-- Animated particles background -->
143
+ <div id="particles-js" class="absolute inset-0 z-0"></div>
144
+ <div class="max-w-6xl mx-auto relative overflow-hidden">
145
+ <!-- Animated decorative elements -->
146
+ <div class="absolute top-20 right-20 w-8 h-8 rounded-full bg-purple-400/30 animate-[pulse_3s_ease-in-out_infinite]"></div>
147
+ <div class="absolute bottom-1/4 left-1/4 w-12 h-12 rounded-full bg-pink-400/30 animate-[pulse_4s_ease-in-out_infinite] delay-1000"></div>
148
+ <div class="absolute top-1/3 right-1/3 w-6 h-6 rounded-full bg-blue-400/30 animate-[float_5s_ease-in-out_infinite]"></div>
149
+ <div class="absolute top-10 left-20 w-16 h-16 rounded-full bg-indigo-400/20 animate-[wave_6s_ease-in-out_infinite]"></div>
150
+ <div class="absolute bottom-20 right-40 w-10 h-10 rounded-full bg-teal-400/20 animate-[pulse_5s_ease-in-out_infinite] delay-500"></div>
151
+ <div class="absolute top-1/2 left-40 w-24 h-24 rounded-full bg-amber-400/10 animate-[float_7s_ease-in-out_infinite] delay-700"></div>
152
+ <div class="absolute bottom-10 right-10 w-14 h-14 rounded-full bg-rose-400/20 animate-[wave_4s_ease-in-out_infinite] delay-300"></div>
153
+ <!-- Animated background elements -->
154
+ <div class="absolute -top-20 -left-20 w-64 h-64 bg-purple-500 rounded-full filter blur-3xl opacity-20 animate-[pulse_4s_ease-in-out_infinite]"></div>
155
+ <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-pink-500 rounded-full filter blur-3xl opacity-20 animate-[pulse_5s_ease-in-out_infinite] delay-1000"></div>
156
+ <div class="absolute top-1/4 -right-32 w-96 h-96 bg-blue-500 rounded-full filter blur-3xl opacity-10 animate-[float_8s_ease-in-out_infinite]"></div>
157
+ <div class="absolute bottom-1/3 -left-32 w-80 h-80 bg-indigo-500 rounded-full filter blur-3xl opacity-10 animate-[float_7s_ease-in-out_infinite] delay-500"></div>
158
+
159
+ <div class="relative z-10 backdrop-blur-sm bg-black/50 border border-gray-800/50 rounded-2xl p-8 md:p-12 shadow-2xl overflow-hidden
160
+ animate-[fadeIn_1.5s_ease-in-out_forwards] hover:shadow-purple-500/20 transition-all duration-500 hover:border-purple-500/30
161
+ animate-[rotate3d_8s_ease-in-out_infinite] hover:animate-[neonGlow_3s_ease-in-out_infinite]">
162
+ <!-- Main content -->
163
+ <div class="text-center mb-12">
164
+ <h1 class="text-4xl md:text-6xl font-extrabold mb-6 fade-in animate-[float_6s_ease-in-out_infinite] hover:animate-[wave_3s_ease-in-out_infinite]">
165
+ <span class="gradient-text glow">Umbra</span>
166
+ </h1>
167
+ <p class="text-xl md:text-2xl font-medium text-gray-300 mb-8 slide-up" style="animation-delay: 0.2s">
168
+ Закрытый набор трафферов на Casino, льем УБТ и Facebook
169
+ </p>
170
+
171
+ <div class="max-w-3xl mx-auto">
172
+ <p class="text-lg text-gray-400 mb-8 fade-in" style="animation-delay: 0.4s">
173
+ Мы не просто «берём людей в команду» — мы формируем ядро из тех, кто готов зарабатывать здесь и сейчас.
174
+ В Umbra нет случайных игроков и вечных «учеников». Каждый, кто попадает к нам, выходит на стабильный плюс —
175
+ и мы доводим до результата каждого.
176
+ </p>
177
+
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Features grid -->
182
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
183
+ <div class="highlight-item p-6 rounded-xl border border-gray-800 bg-gray-900/50 slide-up hover:shadow-lg hover:shadow-purple-500/10
184
+ transition-all duration-300 transform hover:-translate-y-1 animate-[rotate3d_12s_ease-in-out_infinite] hover:animate-[neonGlow_2s_ease-in-out_infinite]"
185
+ style="animation-delay: 0.3s">
186
+ <div class="flex items-center mb-4">
187
+ <div class="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center mr-4 flex-shrink-0">
188
+ <i class="fas fa-money-bill-wave text-purple-400 text-lg"></i>
189
+ </div>
190
+ <h3 class="text-xl font-bold text-white">💰 От 50% с каждого депозита</h3>
191
+ </div>
192
+ <p class="text-gray-400">Работа только с лучшими Casino, автоматические выплаты.</p>
193
+ </div>
194
+
195
+ <div class="highlight-item p-6 rounded-xl border border-gray-800 bg-gray-900/50 slide-up" style="animation-delay: 0.4s">
196
+ <div class="flex items-center mb-4">
197
+ <div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center mr-4 flex-shrink-0">
198
+ <i class="fas fa-graduation-cap text-blue-400 text-lg"></i>
199
+ </div>
200
+ <h3 class="text-xl font-bold text-white">Полное обучение с нуля</h3>
201
+ </div>
202
+ <p class="text-gray-400">Шаг за шагом, пока не начнёшь зарабатывать</p>
203
+ </div>
204
+
205
+ <div class="highlight-item p-6 rounded-xl border border-gray-800 bg-gray-900/50 slide-up" style="animation-delay: 0.5s">
206
+ <div class="flex items-center mb-4">
207
+ <div class="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center mr-4 flex-shrink-0">
208
+ <i class="fas fa-book text-green-400 text-lg"></i>
209
+ </div>
210
+ <h3 class="text-xl font-bold text-white">Эксклюзивные приватные мануалы</h3>
211
+ </div>
212
+ <p class="text-gray-400">Готовые связки по УБТ и Facebook Ads, которых нет в открытом доступе</p>
213
+ </div>
214
+
215
+ <div class="highlight-item p-6 rounded-xl border border-gray-800 bg-gray-900/50 slide-up" style="animation-delay: 0.6s">
216
+ <div class="flex items-center mb-4">
217
+ <div class="w-10 h-10 rounded-full bg-yellow-500/20 flex items-center justify-center mr-4 flex-shrink-0">
218
+ <i class="fas fa-palette text-yellow-400 text-lg"></i>
219
+ </div>
220
+ <h3 class="text-xl font-bold text-white">Готовые креативы</h3>
221
+ </div>
222
+ <p class="text-gray-400">Всё под ключ, проверено на апрув</p>
223
+ </div>
224
+
225
+ <div class="highlight-item p-6 rounded-xl border border-gray-800 bg-gray-900/50 slide-up" style="animation-delay: 0.7s">
226
+ <div class="flex items-center mb-4">
227
+ <div class="w-10 h-10 rounded-full bg-red-500/20 flex items-center justify-center mr-4 flex-shrink-0">
228
+ <i class="fas fa-wallet text-red-400 text-lg"></i>
229
+ </div>
230
+ <h3 class="text-xl font-bold text-white">Бюджеты под залив</h3>
231
+ </div>
232
+ <p class="text-gray-400">Лучшим выделяем неограниченные бюджеты под залив для масштабирования</p>
233
+ </div>
234
+
235
+ <div class="highlight-item p-6 rounded-xl border border-gray-800 bg-gray-900/50 slide-up" style="animation-delay: 0.8s">
236
+ <div class="flex items-center mb-4">
237
+ <div class="w-10 h-10 rounded-full bg-indigo-500/20 flex items-center justify-center mr-4 flex-shrink-0">
238
+ <i class="fas fa-shield-alt text-indigo-400 text-lg"></i>
239
+ </div>
240
+ <h3 class="text-xl font-bold text-white">Поддержка 24/7</h3>
241
+ </div>
242
+ <p class="text-gray-400">Мы на связи в любой момент, без выходных и праздников</p>
243
+ </div>
244
+ </div>
245
+
246
+ <!-- Why us section -->
247
+ <div class="mb-12 slide-up" style="animation-delay: 0.9s">
248
+ <h2 class="text-2xl md:text-3xl font-bold mb-6 text-center gradient-text">Почему у нас зарабатывают</h2>
249
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
250
+ <div class="flex items-start">
251
+ <div class="text-purple-400 mr-3 mt-1">•</div>
252
+ <p class="text-gray-300">Мы не гоняем по чатам с «мотивационными цитатами» — каждый день работа с конкретными задачами</p>
253
+ </div>
254
+ <div class="flex items-start">
255
+ <div class="text-purple-400 mr-3 mt-1">•</div>
256
+ <p class="text-gray-300">Трафик льём в топовые офферы, которые дают высокое удержание и выплаты</p>
257
+ </div>
258
+ <div class="flex items-start">
259
+ <div class="text-purple-400 mr-3 mt-1">•</div>
260
+ <p class="text-gray-300">Все новички получают персонального наставника, который ведёт до стабильного плюса</p>
261
+ </div>
262
+ <div class="flex items-start">
263
+ <div class="text-purple-400 mr-3 mt-1">•</div>
264
+ <p class="text-gray-300">Нет ограничений по источникам — УБТ, Facebook Ads, Push, Instagram и др.</p>
265
+ </div>
266
+ <div class="flex items-start">
267
+ <div class="text-purple-400 mr-3 mt-1">•</div>
268
+ <p class="text-gray-300">Фокус на ROI: мы учим считать, оптимизировать и масштабировать</p>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- For whom section -->
274
+ <div class="mb-12 slide-up" style="animation-delay: 1s">
275
+ <h2 class="text-2xl md:text-3xl font-bold mb-6 text-center gradient-text">Для кого подойдёт</h2>
276
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
277
+ <div class="p-6 rounded-xl border border-gray-800 bg-gray-900/50">
278
+ <h3 class="text-xl font-bold text-white mb-3">Новичкам</h3>
279
+ <p class="text-gray-400">Для тех, кто хочет зайти в арбитраж без лишней теории и «граблей»</p>
280
+ </div>
281
+ <div class="p-6 rounded-xl border border-gray-800 bg-gray-900/50">
282
+ <h3 class="text-xl font-bold text-white mb-3">Опытным</h3>
283
+ <p class="text-gray-400">Для тех, кто уже льёт, но хочет больший процент, готовые связки и поддержку</p>
284
+ </div>
285
+ <div class="p-6 rounded-xl border border-gray-800 bg-gray-900/50">
286
+ <h3 class="text-xl font-bold text-white mb-3">Командным</h3>
287
+ <p class="text-gray-400">Для тех, кто устал работать в одиночку и хочет в живую, результативную команду</p>
288
+ </div>
289
+ </div>
290
+ </div>
291
+
292
+ </div>
293
+ </div>
294
+
295
+ <script>
296
+ // Additional animation triggers
297
+ document.addEventListener('DOMContentLoaded', () => {
298
+ const elements = document.querySelectorAll('.slide-up, .fade-in, .scale-in');
299
+
300
+ const observer = new IntersectionObserver((entries) => {
301
+ entries.forEach(entry => {
302
+ if (entry.isIntersecting) {
303
+ entry.target.style.opacity = 1;
304
+ entry.target.style.transform = 'translateY(0) scale(1)';
305
+ }
306
+ });
307
+ }, { threshold: 0.1 });
308
+
309
+ elements.forEach(el => {
310
+ observer.observe(el);
311
+ });
312
+ });
313
+ </script>
314
+ <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/dajlkfskldflk" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
315
+ </html>