timoon811 commited on
Commit
2cae89d
·
verified ·
1 Parent(s): dc95175

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +679 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Storyarbitrage
3
- emoji: 🦀
4
- colorFrom: green
5
  colorTo: blue
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: storyarbitrage
3
+ emoji: 🐳
4
+ colorFrom: red
5
  colorTo: blue
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,679 @@
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>30 дней арбитражника трафика - Реальная история</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@400;500;600;700;800&display=swap');
11
+
12
+ body {
13
+ font-family: 'Manrope', sans-serif;
14
+ background-color: #f8fafc;
15
+ scroll-behavior: smooth;
16
+ }
17
+
18
+ .gradient-bg {
19
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
20
+ }
21
+
22
+ .card-hover:hover {
23
+ transform: translateY(-5px);
24
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
25
+ }
26
+
27
+ .day-card {
28
+ transition: all 0.3s ease;
29
+ perspective: 1000px;
30
+ }
31
+
32
+ .day-card-inner {
33
+ transition: transform 0.6s;
34
+ transform-style: preserve-3d;
35
+ }
36
+
37
+ .day-card:hover .day-card-inner {
38
+ transform: rotateY(10deg);
39
+ }
40
+
41
+ .pulse-animation {
42
+ animation: pulse 2s infinite;
43
+ }
44
+
45
+ @keyframes pulse {
46
+ 0% { transform: scale(1); }
47
+ 50% { transform: scale(1.05); }
48
+ 100% { transform: scale(1); }
49
+ }
50
+
51
+ .progress-bar {
52
+ height: 6px;
53
+ background-color: #e2e8f0;
54
+ border-radius: 3px;
55
+ overflow: hidden;
56
+ }
57
+
58
+ .progress-fill {
59
+ height: 100%;
60
+ background: linear-gradient(90deg, #4f46e5, #a855f7);
61
+ transition: width 0.5s ease;
62
+ }
63
+
64
+ .floating {
65
+ animation: floating 3s ease-in-out infinite;
66
+ }
67
+
68
+ @keyframes floating {
69
+ 0% { transform: translateY(0px); }
70
+ 50% { transform: translateY(-10px); }
71
+ 100% { transform: translateY(0px); }
72
+ }
73
+
74
+ .highlight-text {
75
+ position: relative;
76
+ display: inline-block;
77
+ }
78
+
79
+ .highlight-text::after {
80
+ content: '';
81
+ position: absolute;
82
+ bottom: 0;
83
+ left: 0;
84
+ width: 100%;
85
+ height: 30%;
86
+ background-color: rgba(165, 180, 252, 0.5);
87
+ z-index: -1;
88
+ transition: all 0.3s ease;
89
+ }
90
+
91
+ .highlight-text:hover::after {
92
+ height: 100%;
93
+ background-color: rgba(165, 180, 252, 0.8);
94
+ }
95
+ </style>
96
+ </head>
97
+ <body>
98
+ <!-- Hero Section -->
99
+ <section class="gradient-bg text-white py-20 px-4">
100
+ <div class="container mx-auto max-w-6xl">
101
+ <div class="flex flex-col md:flex-row items-center">
102
+ <div class="md:w-1/2 mb-10 md:mb-0">
103
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
104
+ <span class="highlight-text">30 дней</span> арбитражника трафика
105
+ </h1>
106
+ <p class="text-xl md:text-2xl opacity-90 mb-8">
107
+ Реальная история о том, как новичок пытался заработать на арбитраже трафика. Готовы к правде?
108
+ </p>
109
+ <div class="flex flex-col sm:flex-row gap-4">
110
+ <a href="#days" class="bg-white text-indigo-700 hover:bg-gray-100 font-bold py-3 px-6 rounded-lg text-center transition duration-300 transform hover:scale-105">
111
+ Начать путешествие <i class="fas fa-arrow-down ml-2"></i>
112
+ </a>
113
+ <a href="#final" class="border-2 border-white text-white hover:bg-white hover:text-indigo-700 font-bold py-3 px-6 rounded-lg text-center transition duration-300 transform hover:scale-105">
114
+ Чем всё закончилось? <i class="fas fa-fast-forward ml-2"></i>
115
+ </a>
116
+ </div>
117
+ </div>
118
+ <div class="md:w-1/2 flex justify-center">
119
+ <img src="https://illustrations.popsy.co/amber/digital-nomad.svg" alt="Арбитражник" class="w-full max-w-md floating">
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </section>
124
+
125
+ <!-- Progress Bar -->
126
+ <div class="bg-white shadow-sm sticky top-0 z-50">
127
+ <div class="container mx-auto px-4">
128
+ <div class="py-2">
129
+ <div class="progress-bar">
130
+ <div class="progress-fill" id="progress-fill" style="width: 0%"></div>
131
+ </div>
132
+ <div class="flex justify-between mt-2 text-sm text-gray-600">
133
+ <span>День 1</span>
134
+ <span id="current-day">0/30</span>
135
+ <span>День 30</span>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Stats Section -->
142
+ <section class="bg-white py-12 px-4">
143
+ <div class="container mx-auto max-w-6xl">
144
+ <h2 class="text-3xl font-bold text-center mb-12">Цифры, которые вас шокируют</h2>
145
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
146
+ <div class="bg-gray-50 p-6 rounded-xl text-center border border-gray-200">
147
+ <div class="text-5xl font-bold text-indigo-600 mb-4">97%</div>
148
+ <h3 class="text-xl font-semibold mb-2">Новичков теряют деньги</h3>
149
+ <p class="text-gray-600">В первые 30 дней работы с арбитражем трафика</p>
150
+ </div>
151
+ <div class="bg-gray-50 p-6 rounded-xl text-center border border-gray-200">
152
+ <div class="text-5xl font-bold text-indigo-600 mb-4">50+</div>
153
+ <h3 class="text-xl font-semibold mb-2">Попыток настроить рекламу</h3>
154
+ <p class="text-gray-600">Прежде чем найти работающую связку</p>
155
+ </div>
156
+ <div class="bg-gray-50 p-6 rounded-xl text-center border border-gray-200">
157
+ <div class="text-5xl font-bold text-indigo-600 mb-4">$2000</div>
158
+ <h3 class="text-xl font-semibold mb-2">Средние вложения</h3>
159
+ <p class="text-gray-600">Которые теряют новички до первых результатов</p>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </section>
164
+
165
+ <!-- 30 Days Journey -->
166
+ <section id="days" class="py-16 px-4 bg-gray-50">
167
+ <div class="container mx-auto max-w-6xl">
168
+ <h2 class="text-3xl font-bold text-center mb-4">30 дней ада арбитражника</h2>
169
+ <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Каждый день - новая попытка, ошибка или маленькая победа. Листайте вниз, чтобы увидеть полную историю.</p>
170
+
171
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
172
+ <!-- Day 1 -->
173
+ <div class="day-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
174
+ <div class="day-card-inner">
175
+ <div class="p-6">
176
+ <div class="flex justify-between items-center mb-4">
177
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 1</span>
178
+ <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$50</span>
179
+ </div>
180
+ <h3 class="text-xl font-bold mb-3">Эйфория начала</h3>
181
+ <p class="text-gray-600 mb-4">Регистрация в 5 рекламных сетях, чтение форумов до 3 ночи. Первая кампания запущена с бюджетом $50. "Как же всё просто!"</p>
182
+ <div class="flex items-center text-sm text-gray-500">
183
+ <i class="fas fa-smile-beam text-indigo-500 mr-2"></i>
184
+ <span>Настроение: Восторг</span>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Day 2 -->
191
+ <div class="day-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
192
+ <div class="day-card-inner">
193
+ <div class="p-6">
194
+ <div class="flex justify-between items-center mb-4">
195
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 2</span>
196
+ <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$100</span>
197
+ </div>
198
+ <h3 class="text-xl font-bold mb-3">Первые сливы</h3>
199
+ <p class="text-gray-600 mb-4">$50 сгорели за 2 часа без ни одного лида. Добавил ещё $50, изменил креативы. "Наверное, просто неудачный оффер..."</p>
200
+ <div class="flex items-center text-sm text-gray-500">
201
+ <i class="fas fa-meh text-indigo-500 mr-2"></i>
202
+ <span>Настроение: Лёгкое недоумение</span>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Day 3 -->
209
+ <div class="day-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
210
+ <div class="day-card-inner">
211
+ <div class="p-6">
212
+ <div class="flex justify-between items-center mb-4">
213
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 3</span>
214
+ <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$150</span>
215
+ </div>
216
+ <h3 class="text-xl font-bold mb-3">Первая блокировка</h3>
217
+ <p class="text-gray-600 mb-4">Аккаунт в Facebook заблокирован за "нестандартную активность". Начал изучать антифрод системы. "Почему они такие строгие?"</p>
218
+ <div class="flex items-center text-sm text-gray-500">
219
+ <i class="fas fa-frown text-indigo-500 mr-2"></i>
220
+ <span>Настроение: Раздражение</span>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- Day 4 -->
227
+ <div class="day-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
228
+ <div class="day-card-inner">
229
+ <div class="p-6">
230
+ <div class="flex justify-between items-center mb-4">
231
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 4</span>
232
+ <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$200</span>
233
+ </div>
234
+ <h3 class="text-xl font-bold mb-3">Новые попытки</h3>
235
+ <p class="text-gray-600 mb-4">Зарегистрировал новый аккаунт, попробовал другой оффер. Потратил ещё $50. "На этот раз точно получится!"</p>
236
+ <div class="flex items-center text-sm text-gray-500">
237
+ <i class="fas fa-smile text-indigo-500 mr-2"></i>
238
+ <span>Настроение: Осторожный оптимизм</span>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+
244
+ <!-- Day 5 -->
245
+ <div class="day-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
246
+ <div class="day-card-inner">
247
+ <div class="p-6">
248
+ <div class="flex justify-between items-center mb-4">
249
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 5</span>
250
+ <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$250</span>
251
+ </div>
252
+ <h3 class="text-xl font-bold mb-3">Первые лиды</h3>
253
+ <p class="text-gray-600 mb-4">Получил 3 лида! Но конверсия в продажу - 0. Потратил ещё $50. "Почему они не покупают? Может, лендинг плохой?"</p>
254
+ <div class="flex items-center text-sm text-gray-500">
255
+ <i class="fas fa-meh-rolling-eyes text-indigo-500 mr-2"></i>
256
+ <span>Настроение: Разочарование</span>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+
262
+ <!-- Day 6 -->
263
+ <div class="day-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
264
+ <div class="day-card-inner">
265
+ <div class="p-6">
266
+ <div class="flex justify-between items-center mb-4">
267
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 6</span>
268
+ <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$300</span>
269
+ </div>
270
+ <h3 class="text-xl font-bold mb-3">Изучение аналитики</h3>
271
+ <p class="text-gray-600 mb-4">Понял, что не настроил UTM-метки и не видит откуда идут переходы. Начал изучать Google Analytics. "Как же всё сложно..."</p>
272
+ <div class="flex items-center text-sm text-gray-500">
273
+ <i class="fas fa-book text-indigo-500 mr-2"></i>
274
+ <span>Настроение: Учёба</span>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Day 7 -->
281
+ <div class="day-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
282
+ <div class="day-card-inner">
283
+ <div class="p-6">
284
+ <div class="flex justify-between items-center mb-4">
285
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 7</span>
286
+ <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$350</span>
287
+ </div>
288
+ <h3 class="text-xl font-bold mb-3">Неделя без результата</h3>
289
+ <p class="text-gray-600 mb-4">Потрачено $350, 0 продаж. Начал сомневаться, стоит ли продолжать. "Может, это не моё?"</p>
290
+ <div class="flex items-center text-sm text-gray-500">
291
+ <i class="fas fa-sad-tear text-indigo-500 mr-2"></i>
292
+ <span>Настроение: Депрессия</span>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </div>
297
+
298
+ <!-- Day 8 -->
299
+ <div class="day-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
300
+ <div class="day-card-inner">
301
+ <div class="p-6">
302
+ <div class="flex justify-between items-center mb-4">
303
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 8</span>
304
+ <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$400</span>
305
+ </div>
306
+ <h3 class="text-xl font-bold mb-3">Новая стратегия</h3>
307
+ <p class="text-gray-600 mb-4">Решил попробовать TikTok Ads. Потратил ещё $50. "Здесь точно проще, все говорят!"</p>
308
+ <div class="flex items-center text-sm text-gray-500">
309
+ <i class="fas fa-smile-wink text-indigo-500 mr-2"></i>
310
+ <span>Настроение: Новая надежда</span>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Day 9 -->
317
+ <div class="day-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
318
+ <div class="day-card-inner">
319
+ <div class="p-6">
320
+ <div class="flex justify-between items-center mb-4">
321
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 9</span>
322
+ <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$450</span>
323
+ </div>
324
+ <h3 class="text-xl font-bold mb-3">Бан номер два</h3>
325
+ <p class="text-gray-600 mb-4">TikTok заблокировал аккаунт за "нарушение политик". Потрачено ещё $50. "Да как так-то?!"</p>
326
+ <div class="flex items-center text-sm text-gray-500">
327
+ <i class="fas fa-angry text-indigo-500 mr-2"></i>
328
+ <span>Настроение: Ярость</span>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+
334
+ <!-- Day 10 -->
335
+ <div class="day-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
336
+ <div class="day-card-inner">
337
+ <div class="p-6">
338
+ <div class="flex justify-between items-center mb-4">
339
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 10</span>
340
+ <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$500</span>
341
+ </div>
342
+ <h3 class="text-xl font-bold mb-3">Первая продажа!</h3>
343
+ <p class="text-gray-600 mb-4">Наконец-то первая продажа! Комиссия $20. Потрачено $500. ROI = -96%. "Хоть что-то..."</p>
344
+ <div class="flex items-center text-sm text-gray-500">
345
+ <i class="fas fa-grin-stars text-indigo-500 mr-2"></i>
346
+ <span>Настроение: Смешанные чувства</span>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <!-- Days 11-20 (collapsed) -->
353
+ <div class="day-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 col-span-1 md:col-span-2 lg:col-span-3">
354
+ <div class="day-card-inner">
355
+ <div class="p-6">
356
+ <div class="flex justify-between items-center mb-4">
357
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">Дни 11-20</span>
358
+ <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$1200</span>
359
+ </div>
360
+ <h3 class="text-xl font-bold mb-3">Череда проб и ошибок</h3>
361
+ <p class="text-gray-600 mb-4">10 дней тестирования разных офферов, креативов, таргетингов. Ещё 5 заблокированных аккаунтов. 3 продажи. Общие потери перевалили за $1000. "Когда же будет стабильность?"</p>
362
+ <div class="flex items-center text-sm text-gray-500">
363
+ <i class="fas fa-tired text-indigo-500 mr-2"></i>
364
+ <span>Настроение: Истощение</span>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+
370
+ <!-- Day 21 -->
371
+ <div class="day-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
372
+ <div class="day-card-inner">
373
+ <div class="p-6">
374
+ <div class="flex justify-between items-center mb-4">
375
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 21</span>
376
+ <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$1500</span>
377
+ </div>
378
+ <h3 class="text-xl font-bold mb-3">Первая зелёная кампания</h3>
379
+ <p class="text-gray-600 mb-4">Наконец-то нашел связку, которая даёт ROI +15%! "Ура! Теперь только масштабировать!"</p>
380
+ <div class="flex items-center text-sm text-gray-500">
381
+ <i class="fas fa-laugh text-indigo-500 mr-2"></i>
382
+ <span>Настроение: Эйфория</span>
383
+ </div>
384
+ </div>
385
+ </div>
386
+ </div>
387
+
388
+ <!-- Day 22 -->
389
+ <div class="day-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
390
+ <div class="day-card-inner">
391
+ <div class="p-6">
392
+ <div class="flex justify-between items-center mb-4">
393
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 22</span>
394
+ <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$1550</span>
395
+ </div>
396
+ <h3 class="text-xl font-bold mb-3">Обвал конверсии</h3>
397
+ <p class="text-gray-600 mb-4">Вчерашняя успешная кампания сегодня даёт -50%. "Что случилось? Почему всё сломалось?"</p>
398
+ <div class="flex items-center text-sm text-gray-500">
399
+ <i class="fas fa-dizzy text-indigo-500 mr-2"></i>
400
+ <span>Настроение: Шок</span>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ </div>
405
+
406
+ <!-- Day 23 -->
407
+ <div class="day-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
408
+ <div class="day-card-inner">
409
+ <div class="p-6">
410
+ <div class="flex justify-between items-center mb-4">
411
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 23</span>
412
+ <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$1600</span>
413
+ </div>
414
+ <h3 class="text-xl font-bold mb-3">Новый подход</h3>
415
+ <p class="text-gray-600 mb-4">Решил тестировать не 1-2 кампании, а сразу 10-15 с небольшим бюджетом. "Найдем работающую связку быстрее!"</p>
416
+ <div class="flex items-center text-sm text-gray-500">
417
+ <i class="fas fa-lightbulb text-indigo-500 mr-2"></i>
418
+ <span>Настроение: Озарение</span>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ </div>
423
+
424
+ <!-- Day 24 -->
425
+ <div class="day-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
426
+ <div class="day-card-inner">
427
+ <div class="p-6">
428
+ <div class="flex justify-between items-center mb-4">
429
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 24</span>
430
+ <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$1650</span>
431
+ </div>
432
+ <h3 class="text-xl font-bold mb-3">Первая стабильная связка</h3>
433
+ <p class="text-gray-600 mb-4">Одна из тестовых кампаний даёт +25% ROI уже 3 дня подряд. "Теперь главное не слить всё на масштабировании!"</p>
434
+ <div class="flex items-center text-sm text-gray-500">
435
+ <i class="fas fa-grin-beam text-indigo-500 mr-2"></i>
436
+ <span>Настроение: Осторожная радость</span>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+
442
+ <!-- Day 25 -->
443
+ <div class="day-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
444
+ <div class="day-card-inner">
445
+ <div class="p-6">
446
+ <div class="flex justify-between items-center mb-4">
447
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 25</span>
448
+ <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$1700</span>
449
+ </div>
450
+ <h3 class="text-xl font-bold mb-3">Масштабирование</h3>
451
+ <p class="text-gray-600 mb-4">Увеличил бюджет успешной кампании в 5 раз. "Сейчас заработаю кучу денег!"</p>
452
+ <div class="flex items-center text-sm text-gray-500">
453
+ <i class="fas fa-laugh-beam text-indigo-500 mr-2"></i>
454
+ <span>Настроение: Предвкушение</span>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ </div>
459
+
460
+ <!-- Day 26 -->
461
+ <div class="day-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
462
+ <div class="day-card-inner">
463
+ <div class="p-6">
464
+ <div class="flex justify-between items-center mb-4">
465
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 26</span>
466
+ <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$1800</span>
467
+ </div>
468
+ <h3 class="text-xl font-bold mb-3">Обвал при масштабировании</h3>
469
+ <p class="text-gray-600 mb-4">Конверсия уп��ла в 3 раза при увеличении бюджета. "Почему так происходит? Как это исправить?"</p>
470
+ <div class="flex items-center text-sm text-gray-500">
471
+ <i class="fas fa-sad-cry text-indigo-500 mr-2"></i>
472
+ <span>Настроение: Отчаяние</span>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ </div>
477
+
478
+ <!-- Day 27 -->
479
+ <div class="day-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
480
+ <div class="day-card-inner">
481
+ <div class="p-6">
482
+ <div class="flex justify-between items-center mb-4">
483
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 27</span>
484
+ <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$1850</span>
485
+ </div>
486
+ <h3 class="text-xl font-bold mb-3">Новая стратегия масштабирования</h3>
487
+ <p class="text-gray-600 mb-4">Вместо увеличения бюджета одной кампании, создал 5 её копий с небольшим бюджетом. "Так должно сработать!"</p>
488
+ <div class="flex items-center text-sm text-gray-500">
489
+ <i class="fas fa-smile text-indigo-500 mr-2"></i>
490
+ <span>Настроение: Осторожный оптимизм</span>
491
+ </div>
492
+ </div>
493
+ </div>
494
+ </div>
495
+
496
+ <!-- Day 28 -->
497
+ <div class="day-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
498
+ <div class="day-card-inner">
499
+ <div class="p-6">
500
+ <div class="flex justify-between items-center mb-4">
501
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 28</span>
502
+ <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$1900</span>
503
+ </div>
504
+ <h3 class="text-xl font-bold mb-3">Работает!</h3>
505
+ <p class="text-gray-600 mb-4">4 из 5 кампаний дают +20-30% ROI. Общая прибыль за день: $80. "Наконец-то!"</p>
506
+ <div class="flex items-center text-sm text-gray-500">
507
+ <i class="fas fa-grin text-indigo-500 mr-2"></i>
508
+ <span>Настроение: Радость</span>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+
514
+ <!-- Day 29 -->
515
+ <div class="day-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
516
+ <div class="day-card-inner">
517
+ <div class="p-6">
518
+ <div class="flex justify-between items-center mb-4">
519
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 29</span>
520
+ <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$1920</span>
521
+ </div>
522
+ <h3 class="text-xl font-bold mb-3">Стабильность</h3>
523
+ <p class="text-gray-600 mb-4">Прибыль $120 за день. Общие потери сократились до $1920. "Ещё неделя такой работы - и выйду в ноль!"</p>
524
+ <div class="flex items-center text-sm text-gray-500">
525
+ <i class="fas fa-grin-stars text-indigo-500 mr-2"></i>
526
+ <span>Настроение: Уверенность</span>
527
+ </div>
528
+ </div>
529
+ </div>
530
+ </div>
531
+
532
+ <!-- Day 30 -->
533
+ <div id="final" class="day-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 col-span-1 md:col-span-2 lg:col-span-3 pulse-animation">
534
+ <div class="day-card-inner">
535
+ <div class="p-6">
536
+ <div class="flex justify-between items-center mb-4">
537
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 30</span>
538
+ <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$1800</span>
539
+ </div>
540
+ <h3 class="text-xl font-bold mb-3">Итоги месяца</h3>
541
+ <p class="text-gray-600 mb-4">Общие расходы: $2000. Общий доход: $200. Чистый убыток: $1800. Но теперь есть работающая стратегия, которая приносит $100-150 прибыли ежедневно. "Оно того стоило!"</p>
542
+ <div class="flex items-center text-sm text-gray-500">
543
+ <i class="fas fa-grin-hearts text-indigo-500 mr-2"></i>
544
+ <span>Настроение: Гордость и удовлетворение</span>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ </div>
551
+ </section>
552
+
553
+ <!-- Lessons Learned -->
554
+ <section class="py-16 px-4 bg-indigo-50">
555
+ <div class="container mx-auto max-w-6xl">
556
+ <h2 class="text-3xl font-bold text-center mb-12">Главные уроки этого пути</h2>
557
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
558
+ <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200 card-hover">
559
+ <div class="text-indigo-500 text-4xl mb-4">
560
+ <i class="fas fa-brain"></i>
561
+ </div>
562
+ <h3 class="text-xl font-bold mb-3">Психология важнее технологий</h3>
563
+ <p class="text-gray-600">90% новичков сдаются в первые 2 недели. Только упорство и готовность учиться на ошибках приводят к результату.</p>
564
+ </div>
565
+ <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200 card-hover">
566
+ <div class="text-indigo-500 text-4xl mb-4">
567
+ <i class="fas fa-chart-line"></i>
568
+ </div>
569
+ <h3 class="text-xl font-bold mb-3">Тестирование - основа успеха</h3>
570
+ <p class="text-gray-600">Нужно тестировать много связок малыми бюджетами, а не лить всё в одну "удачную" кампанию.</p>
571
+ </div>
572
+ <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200 card-hover">
573
+ <div class="text-indigo-500 text-4xl mb-4">
574
+ <i class="fas fa-piggy-bank"></i>
575
+ </div>
576
+ <h3 class="text-xl font-bold mb-3">Деньги нужны на ошибки</h3>
577
+ <p class="text-gray-600">Минимальный бюджет для старта - $2000. Меньшие суммы просто не позволят пройти этап обучения.</p>
578
+ </div>
579
+ </div>
580
+ </div>
581
+ </section>
582
+
583
+ <!-- CTA Section -->
584
+ <section class="gradient-bg text-white py-16 px-4">
585
+ <div class="container mx-auto max-w-4xl text-center">
586
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Готовы пройти этот путь?</h2>
587
+ <p class="text-xl opacity-90 mb-8">Арбитраж трафика - это сложно, но возможно. Главное - не сдаваться после первых неудач.</p>
588
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
589
+ <a href="#days" class="bg-white text-indigo-700 hover:bg-gray-100 font-bold py-3 px-8 rounded-lg text-center transition duration-300 transform hover:scale-105">
590
+ Ещё раз прочитать историю <i class="fas fa-redo ml-2"></i>
591
+ </a>
592
+ <a href="#" class="border-2 border-white text-white hover:bg-white hover:text-indigo-700 font-bold py-3 px-8 rounded-lg text-center transition duration-300 transform hover:scale-105">
593
+ Начать свой путь <i class="fas fa-rocket ml-2"></i>
594
+ </a>
595
+ </div>
596
+ </div>
597
+ </section>
598
+
599
+ <!-- Footer -->
600
+ <footer class="bg-gray-900 text-white py-8 px-4">
601
+ <div class="container mx-auto max-w-6xl">
602
+ <div class="flex flex-col md:flex-row justify-between items-center">
603
+ <div class="mb-4 md:mb-0">
604
+ <h3 class="text-xl font-bold">30 дней арбитражника</h3>
605
+ <p class="text-gray-400">Реальная история о сложном пути к первым деньгам</p>
606
+ </div>
607
+ <div class="flex space-x-4">
608
+ <a href="#" class="text-gray-400 hover:text-white transition">
609
+ <i class="fab fa-telegram text-2xl"></i>
610
+ </a>
611
+ <a href="#" class="text-gray-400 hover:text-white transition">
612
+ <i class="fab fa-vk text-2xl"></i>
613
+ </a>
614
+ <a href="#" class="text-gray-400 hover:text-white transition">
615
+ <i class="fab fa-youtube text-2xl"></i>
616
+ </a>
617
+ </div>
618
+ </div>
619
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400 text-sm">
620
+ <p>© 2023 Путь арбитражника. Все права защищены. Это вымышленная история, любые совпадения случайны.</p>
621
+ </div>
622
+ </div>
623
+ </footer>
624
+
625
+ <script>
626
+ // Update progress bar and current day as user scrolls
627
+ window.addEventListener('scroll', function() {
628
+ const dayCards = document.querySelectorAll('.day-card');
629
+ const totalDays = dayCards.length;
630
+ const progressFill = document.getElementById('progress-fill');
631
+ const currentDayElement = document.getElementById('current-day');
632
+
633
+ let visibleDays = 0;
634
+
635
+ dayCards.forEach(card => {
636
+ const rect = card.getBoundingClientRect();
637
+ if (rect.top < window.innerHeight && rect.bottom > 0) {
638
+ visibleDays++;
639
+ }
640
+ });
641
+
642
+ const progress = (visibleDays / totalDays) * 100;
643
+ progressFill.style.width = `${progress}%`;
644
+ currentDayElement.textContent = `${visibleDays}/${totalDays}`;
645
+ });
646
+
647
+ // Smooth scroll for anchor links
648
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
649
+ anchor.addEventListener('click', function (e) {
650
+ e.preventDefault();
651
+
652
+ const targetId = this.getAttribute('href');
653
+ if (targetId === '#') return;
654
+
655
+ const targetElement = document.querySelector(targetId);
656
+ if (targetElement) {
657
+ targetElement.scrollIntoView({
658
+ behavior: 'smooth'
659
+ });
660
+ }
661
+ });
662
+ });
663
+
664
+ // Animate cards when they come into view
665
+ const observer = new IntersectionObserver((entries) => {
666
+ entries.forEach(entry => {
667
+ if (entry.isIntersecting) {
668
+ entry.target.classList.add('animate__animated', 'animate__fadeInUp');
669
+ observer.unobserve(entry.target);
670
+ }
671
+ });
672
+ }, { threshold: 0.1 });
673
+
674
+ document.querySelectorAll('.day-card').forEach(card => {
675
+ observer.observe(card);
676
+ });
677
+ </script>
678
+ <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/storyarbitrage" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
679
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Сделай крутой лендинг - Путь арбитражника трафика - на 30 блоков - то есть на 30 дней, чтобы показать, что арбитраж это не легко!