Hugging Face's logo

Spaces:
timoon811
/
phase6
Running

App Files Community
timoon811 commited on
Commit
1f0fd11
·
verified ·
1 Parent(s): c0ade0c

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +187 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Phase6
3
- emoji: 🏃
4
- colorFrom: indigo
5
- colorTo: pink
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: phase6
3
+ emoji: 🐳
4
+ colorFrom: gray
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,187 @@
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>PhaseAI - Как это работает</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ .gradient-text {
13
+ background: linear-gradient(90deg, #8b5cf6 0%, #3b82f6 100%);
14
+ -webkit-background-clip: text;
15
+ background-clip: text;
16
+ color: transparent;
17
+ }
18
+ .step-card {
19
+ transition: all 0.3s ease;
20
+ transform-style: preserve-3d;
21
+ opacity: 0;
22
+ transform: translateY(30px);
23
+ }
24
+ .step-card.animated {
25
+ opacity: 1;
26
+ transform: translateY(0);
27
+ }
28
+ .step-card:hover {
29
+ transform: translateY(-5px) scale(1.02);
30
+ box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.2), 0 10px 10px -5px rgba(59, 130, 246, 0.04);
31
+ }
32
+ .step-icon {
33
+ transition: all 0.3s ease;
34
+ }
35
+ .step-card:hover .step-icon {
36
+ transform: scale(1.2);
37
+ }
38
+ .pulse {
39
+ animation: pulse 2s infinite;
40
+ }
41
+ @keyframes pulse {
42
+ 0% {
43
+ box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
44
+ }
45
+ 70% {
46
+ box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
47
+ }
48
+ 100% {
49
+ box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
50
+ }
51
+ }
52
+ </style>
53
+ </head>
54
+ <body class="bg-gray-900">
55
+ <section class="py-24 px-4 sm:px-6 lg:px-8 relative overflow-hidden bg-gray-900">
56
+ <!-- Анимированный фон -->
57
+ <div class="absolute inset-0 -z-10">
58
+ <div class="absolute inset-0 bg-gradient-to-b from-gray-900/90 to-gray-900"></div>
59
+ <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-blue-900/20 via-transparent to-transparent"></div>
60
+ <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-3xl h-64 bg-blue-500/10 rounded-full blur-3xl"></div>
61
+ </div>
62
+
63
+ <div class="max-w-7xl mx-auto">
64
+ <div class="text-center mb-16">
65
+ <span class="inline-block mb-4 px-4 py-1 text-sm font-medium rounded-full bg-blue-900/20 text-blue-400 border border-blue-800/50">
66
+ Просто. Быстро. Эффективно
67
+ </span>
68
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 gradient-text">
69
+ Как это работает
70
+ </h2>
71
+ <p class="text-xl text-gray-200 max-w-3xl mx-auto">
72
+ Всего <span class="font-bold text-blue-400">3 простых шага</span> до понимания фазы игры и увеличения шансов на выигрыш
73
+ </p>
74
+ </div>
75
+
76
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
77
+ <!-- Шаг 1 -->
78
+ <div class="step-card bg-gray-800 p-8 rounded-2xl border border-gray-700 relative overflow-hidden group">
79
+ <div class="absolute -inset-1 bg-gradient-to-r from-purple-600/20 to-blue-600/20 rounded-2xl opacity-0 group-hover:opacity-100 transition duration-300"></div>
80
+ <div class="relative z-10">
81
+ <div class="w-16 h-16 mb-6 mx-auto rounded-xl bg-gradient-to-br from-purple-600 to-blue-600 flex items-center justify-center text-white text-2xl step-icon">
82
+ <i class="fas fa-gamepad"></i>
83
+ </div>
84
+ <div class="flex items-center justify-center mb-3">
85
+ <span class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-600 text-white font-bold mr-3">1</span>
86
+ <h3 class="text-xl font-bold text-white">Выберите игру</h3>
87
+ </div>
88
+ <p class="text-gray-300">
89
+ Aviator, Gates of Olympus, Sweet Bonanza и другие популярные игры — выбирайте то, во что играете.
90
+ </p>
91
+ </div>
92
+ </div>
93
+
94
+ <!-- Шаг 2 -->
95
+ <div class="step-card bg-gray-800 p-8 rounded-2xl border border-gray-700 relative overflow-hidden group">
96
+ <div class="absolute -inset-1 bg-gradient-to-r from-purple-600/20 to-blue-600/20 rounded-2xl opacity-0 group-hover:opacity-100 transition duration-300"></div>
97
+ <div class="relative z-10">
98
+ <div class="w-16 h-16 mb-6 mx-auto rounded-xl bg-gradient-to-br from-purple-600 to-blue-600 flex items-center justify-center text-white text-2xl step-icon">
99
+ <i class="fas fa-chart-line"></i>
100
+ </div>
101
+ <div class="flex items-center justify-center mb-3">
102
+ <span class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-600 text-white font-bold mr-3">2</span>
103
+ <h3 class="text-xl font-bold text-white">Проверьте фазу</h3>
104
+ </div>
105
+ <p class="text-gray-300">
106
+ Наша система анализирует данные в реальном времени и показывает текущую фазу: отдача, холд или слив.
107
+ </p>
108
+ </div>
109
+ </div>
110
+
111
+ <!-- Шаг 3 -->
112
+ <div class="step-card bg-gray-800 p-8 rounded-2xl border border-gray-700 relative overflow-hidden group pulse">
113
+ <div class="absolute -inset-1 bg-gradient-to-r from-purple-600/20 to-blue-600/20 rounded-2xl opacity-0 group-hover:opacity-100 transition duration-300"></div>
114
+ <div class="relative z-10">
115
+ <div class="w-16 h-16 mb-6 mx-auto rounded-xl bg-gradient-to-br from-purple-600 to-blue-600 flex items-center justify-center text-white text-2xl step-icon">
116
+ <i class="fas fa-bullseye"></i>
117
+ </div>
118
+ <div class="flex items-center justify-center mb-3">
119
+ <span class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-600 text-white font-bold mr-3">3</span>
120
+ <h3 class="text-xl font-bold text-white">Играйте с умом</h3>
121
+ </div>
122
+ <p class="text-gray-300">
123
+ Входите в игру, когда фаза на отдаче — и повышайте свои шансы на выигрыш в нужный момент.
124
+ </p>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Демо видео -->
130
+ <div class="mt-20 max-w-4xl mx-auto bg-gray-800 rounded-2xl border border-gray-700 p-6">
131
+ <div class="flex items-center justify-between mb-6">
132
+ <h3 class="text-xl font-bold text-white flex items-center">
133
+ <i class="fas fa-play-circle text-blue-400 mr-3"></i>
134
+ Смотрите, как это работает
135
+ </h3>
136
+ <span class="text-sm text-gray-400">Демонстрация за 30 секунд</span>
137
+ </div>
138
+ <div class="aspect-w-16 aspect-h-9 bg-gray-700 rounded-xl overflow-hidden border border-gray-700 flex items-center justify-center">
139
+ <div class="text-center p-8">
140
+ <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-blue-600/20 flex items-center justify-center border border-blue-600/50">
141
+ <i class="fas fa-play text-blue-400 text-2xl"></i>
142
+ </div>
143
+ <h4 class="text-xl font-bold text-white mb-2">Демонстрация работы PhaseAI</h4>
144
+ <p class="text-gray-300 max-w-md mx-auto">Нажмите play, чтобы увидеть, как просто использовать наш сервис</p>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </section>
150
+
151
+ <script>
152
+ document.addEventListener('DOMContentLoaded', () => {
153
+ // Инициализация ScrollTrigger
154
+ gsap.registerPlugin(ScrollTrigger);
155
+
156
+ // Анимация карточек
157
+ gsap.utils.toArray('.step-card').forEach((card, i) => {
158
+ gsap.to(card, {
159
+ scrollTrigger: {
160
+ trigger: card,
161
+ start: "top 80%",
162
+ toggleActions: "play none none none"
163
+ },
164
+ opacity: 1,
165
+ y: 0,
166
+ duration: 0.8,
167
+ delay: i * 0.1,
168
+ ease: "power2.out"
169
+ });
170
+ });
171
+
172
+ // Анимация для демо блока
173
+ gsap.from('.aspect-w-16', {
174
+ scrollTrigger: {
175
+ trigger: '.aspect-w-16',
176
+ start: 'top 80%',
177
+ toggleActions: 'play none none none'
178
+ },
179
+ y: 50,
180
+ opacity: 0,
181
+ duration: 0.8,
182
+ ease: 'power3.out'
183
+ });
184
+ });
185
+ </script>
186
+ <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/phase6" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
187
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ Хорошо, переходим к Блоку 6 — это ключевой объясняющий блок, где человек понимает, как именно работает сервис. Он должен быть простым, последовательным и визуально привлекательным. ⸻ 🟩 БЛОК 6: Как работает PhaseAI Цель: Показать, что использование сервиса — это простой и понятный процесс. Разбить путь пользователя на 3–4 визуальных шага. ⸻ 🧱 Структура блока 1. 🔠 Заголовок и подзаголовок • Заголовок: «Как это работает» • Подзаголовок: «Всего 3 шага до понимания фазы и выигрыша» 2. 🪜 Блок с шагами (лучше — 3) Каждый шаг — это номер, иконка, заголовок, описание. Анимация сверху-вниз или слева-направо. № Заголовок Подпись Иконка 1 Выберите игру Aviator, Gates of Olympus, Bonanza — выберите то, что играете 🎮 2 Проверьте фазу Наша система покажет фазу: отдача, холд или слив 📈 3 Играйте с умом Используйте момент — играйте тогда, когда слот «даёт» 🎯 ⸻ 📐 HTML структура (Tailwind) <section class="py-24 bg-black text-white"> <div class="max-w-5xl mx-auto px-6 text-center"> <h2 class="text-3xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-400"> Как это работает </h2> <p class="text-lg opacity-70 mb-12"> Всего 3 шага до понимания фазы игры. Просто следуй инструкции — и заходи в нужный момент. </p> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-gray-900/50 p-6 rounded-xl border border-gray-800 hover:shadow-xl transition"> <div class="text-4xl mb-4">🎮</div> <h3 class="font-semibold text-lg mb-2">1. Выберите игру</h3> <p class="text-sm opacity-70">Aviator, Sweet Bonanza, Gates of Olympus и другие — выбирайте то, во что играете.</p> </div> <div class="bg-gray-900/50 p-6 rounded-xl border border-gray-800 hover:shadow-xl transition"> <div class="text-4xl mb-4">📈</div> <h3 class="font-semibold text-lg mb-2">2. Проверьте фазу</h3> <p class="text-sm opacity-70">PhaseAI покажет текущую фазу: отдача, холд или слив. Данные обновляются каждую минуту.</p> </div> <div class="bg-gray-900/50 p-6 rounded-xl border border-gray-800 hover:shadow-xl transition"> <div class="text-4xl mb-4">🎯</div> <h3 class="font-semibold text-lg mb-2">3. Играйте с умом</h3> <p class="text-sm opacity-70">Заходите в игру, когда фаза на отдачу — и повышайте шансы на выигрыш.</p> </div> </div> </div> </section> ⸻ 🔧 Анимации (по желанию) • При скролле снизу вверх: gsap.from(".step-card", {opacity: 0, y: 30, stagger: 0.2}) • При наведении: подсветка фона, увеличение иконки ⸻ 🧠 Альтернативный вариант — с видео или гифкой • Если планируешь использовать видео или демонстрацию интерфейса, блок можно дополнить демонстрацией (в формате: “Смотри, как просто”). ⸻ ✅ Резюме Блок 6 объясняет: • Как пользоваться сервисом • Почему это несложно • Визуально делит сложную механику на понятные шаги ⸻ Если хочешь, соберу в код сразу с анимацией. Или идём к Блоку 7 — социальные доказательства, отзывы, доверие?
2
+ Не видно информации!
3
+ Карточки просто пропадают - исправь анимацию!