Hugging Face's logo

Spaces:
flen-crypto
/
12234
Running

App Files Community
flen-crypto commited on
Commit
0a3f941
·
verified ·
1 Parent(s): cf0a5e0

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +382 -19
index.html CHANGED
@@ -1,19 +1,382 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
+ <title>Draft Day Derby 2.0</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
8
+ <style>
9
+ :root {
10
+ --primary: #6a11cb;
11
+ --secondary: #2575fc;
12
+ --accent: #00f7ff;
13
+ --background: #0f0c29;
14
+ --text: #ffffff;
15
+ --neutral: #f0f0f0;
16
+ --danger: #ff3860;
17
+ --success: #00d1b2;
18
+ --warning: #ffdd57;
19
+ --card-bg: #1a1a2e;
20
+ --button-bg: #16213e;
21
+ --glow: 0 0 8px var(--accent);
22
+ }
23
+
24
+ * {
25
+ margin: 0;
26
+ padding: 0;
27
+ box-sizing: border-box;
28
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
29
+ }
30
+
31
+ body {
32
+ background: var(--background);
33
+ color: var(--text);
34
+ overflow-x: hidden;
35
+ }
36
+
37
+ header {
38
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
39
+ padding: 1rem;
40
+ text-align: center;
41
+ position: relative;
42
+ overflow: hidden;
43
+ }
44
+
45
+ header h1 {
46
+ font-size: 2.2rem;
47
+ text-shadow: var(--glow);
48
+ margin-bottom: 0.5rem;
49
+ }
50
+
51
+ header p {
52
+ font-size: 1rem;
53
+ max-width: 600px;
54
+ margin: auto;
55
+ }
56
+
57
+ .hero-selection {
58
+ padding: 2rem;
59
+ display: grid;
60
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
61
+ gap: 1.5rem;
62
+ max-width: 1200px;
63
+ margin: auto;
64
+ }
65
+
66
+ .hero-card {
67
+ background: var(--card-bg);
68
+ border-radius: 12px;
69
+ padding: 1rem;
70
+ text-align: center;
71
+ box-shadow: 0 4px 10px rgba(0,0,0,0.5);
72
+ transition: transform 0.3s, box-shadow 0.3s;
73
+ position: relative;
74
+ overflow: hidden;
75
+ }
76
+
77
+ .hero-card.frozen {
78
+ filter: grayscale(100%) opacity(0.5);
79
+ }
80
+
81
+ .hero-card.glowing {
82
+ box-shadow: var(--glow);
83
+ }
84
+
85
+ .hero-card:hover {
86
+ transform: translateY(-5px);
87
+ box-shadow: 0 8px 16px rgba(0,0,0,0.6);
88
+ }
89
+
90
+ .hero-card img {
91
+ width: 100%;
92
+ height: auto;
93
+ border-radius: 8px;
94
+ margin-bottom: 0.8rem;
95
+ }
96
+
97
+ .hero-card h3 {
98
+ font-size: 1.2rem;
99
+ margin-bottom: 0.5rem;
100
+ }
101
+
102
+ .hero-stats {
103
+ display: flex;
104
+ justify-content: space-around;
105
+ font-size: 0.9rem;
106
+ }
107
+
108
+ .progress-section {
109
+ padding: 2rem;
110
+ max-width: 1200px;
111
+ margin: auto;
112
+ background: rgba(26, 26, 46, 0.5);
113
+ border-radius: 12px;
114
+ }
115
+
116
+ .progress-wheel {
117
+ width: 200px;
118
+ height: 200px;
119
+ border-radius: 50%;
120
+ background: conic-gradient(var(--accent) 70%, #222 0);
121
+ margin: auto;
122
+ display: flex;
123
+ align-items: center;
124
+ justify-content: center;
125
+ box-shadow: var(--glow);
126
+ }
127
+
128
+ .progress-wheel.frozen {
129
+ background: conic-gradient(#888 70%, #333 0);
130
+ box-shadow: 0 0 10px #aaa;
131
+ }
132
+
133
+ .progress-center {
134
+ width: 160px;
135
+ height: 160px;
136
+ background: var(--background);
137
+ border-radius: 50%;
138
+ display: flex;
139
+ align-items: center;
140
+ justify-content: center;
141
+ font-weight: bold;
142
+ font-size: 1.4rem;
143
+ }
144
+
145
+ .race-replay {
146
+ margin-top: 2rem;
147
+ padding: 1rem;
148
+ background: rgba(26, 26, 46, 0.8);
149
+ border-radius: 12px;
150
+ text-align: center;
151
+ }
152
+
153
+ .race-replay video {
154
+ width: 100%;
155
+ max-width: 800px;
156
+ margin-top: 1rem;
157
+ border-radius: 8px;
158
+ }
159
+
160
+ .boost-section {
161
+ display: flex;
162
+ justify-content: center;
163
+ gap: 1rem;
164
+ margin-top: 1rem;
165
+ }
166
+
167
+ .button {
168
+ padding: 0.8rem 1.5rem;
169
+ background: var(--button-bg);
170
+ color: var(--text);
171
+ border: none;
172
+ border-radius: 8px;
173
+ font-weight: bold;
174
+ cursor: pointer;
175
+ transition: background 0.3s;
176
+ display: flex;
177
+ align-items: center;
178
+ gap: 0.5rem;
179
+ }
180
+
181
+ .button:hover {
182
+ background: var(--primary);
183
+ }
184
+
185
+ .button.glowing {
186
+ box-shadow: var(--glow);
187
+ }
188
+
189
+ .leaderboard {
190
+ margin-top: 2rem;
191
+ padding: 1.5rem;
192
+ background: rgba(26, 26, 46, 0.8);
193
+ border-radius: 12px;
194
+ }
195
+
196
+ .leaderboard h2 {
197
+ text-align: center;
198
+ margin-bottom: 1rem;
199
+ }
200
+
201
+ .board {
202
+ display: grid;
203
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
204
+ gap: 1rem;
205
+ }
206
+
207
+ .board-entry {
208
+ background: var(--card-bg);
209
+ padding: 1rem;
210
+ border-radius: 8px;
211
+ display: flex;
212
+ align-items: center;
213
+ gap: 1rem;
214
+ }
215
+
216
+ .board-entry img {
217
+ width: 50px;
218
+ height: 50px;
219
+ border-radius: 50%;
220
+ }
221
+
222
+ .onboarding {
223
+ text-align: center;
224
+ padding: 2rem;
225
+ }
226
+
227
+ .onboarding video {
228
+ width: 100%;
229
+ max-width: 600px;
230
+ border-radius: 8px;
231
+ margin-top: 1rem;
232
+ }
233
+
234
+ footer {
235
+ text-align: center;
236
+ padding: 2rem;
237
+ font-size: 0.9rem;
238
+ color: var(--neutral);
239
+ background: rgba(0,0,0,0.2);
240
+ }
241
+
242
+ /* Responsive Design */
243
+ @media (max-width: 768px) {
244
+ header h1 {
245
+ font-size: 1.8rem;
246
+ }
247
+
248
+ .boost-section {
249
+ flex-direction: column;
250
+ align-items: center;
251
+ }
252
+
253
+ .progress-wheel {
254
+ width: 150px;
255
+ height: 150px;
256
+ }
257
+
258
+ .progress-center {
259
+ width: 120px;
260
+ height: 120px;
261
+ font-size: 1.1rem;
262
+ }
263
+ }
264
+ </style>
265
+ </head>
266
+ <body>
267
+ <header>
268
+ <h1>🐎 Draft Day Derby 2.0</h1>
269
+ <p>Select 3 hero-athletes to race daily. Unlock boosts, earn rewards, and climb the leaderboard!</p>
270
+ </header>
271
+
272
+ <section class="onboarding">
273
+ <h2>Freeze Preview</h2>
274
+ <video controls muted autoplay loop>
275
+ <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
276
+ Freeze animation preview
277
+ </video>
278
+ <p>If no selection within 36h, your stable freezes. Use a Glider to revive your streak!</p>
279
+ </section>
280
+
281
+ <section class="hero-selection">
282
+ <div class="hero-card glowing">
283
+ <img src="https://i.pravatar.cc/150?img=1" alt="Hero 1">
284
+ <h3>Flash Lance</h3>
285
+ <div class="hero-stats">
286
+ <span>Speed: <i class="fas fa-tachometer-alt"></i> 92</span>
287
+ <span>Endurance: <i class="fas fa-heart"></i> 75</span>
288
+ <span>Burst: <i class="fas fa-bolt"></i> 85</span>
289
+ </div>
290
+ </div>
291
+ <div class="hero-card">
292
+ <img src="https://i.pravatar.cc/150?img=2" alt="Hero 2">
293
+ <h3>Storm Rider</h3>
294
+ <div class="hero-stats">
295
+ <span>Speed: <i class="fas fa-tachometer-alt"></i> 80</span>
296
+ <span>Endurance: <i class="fas fa-heart"></i> 90</span>
297
+ <span>Burst: <i class="fas fa-bolt"></i> 78</span>
298
+ </div>
299
+ </div>
300
+ <div class="hero-card frozen">
301
+ <img src="https://i.pravatar.cc/150?img=3" alt="Hero 3">
302
+ <h3>Blaze Bolt</h3>
303
+ <div class="hero-stats">
304
+ <span>Speed: <i class="fas fa-tachometer-alt"></i> 88</span>
305
+ <span>Endurance: <i class="fas fa-heart"></i> 80</span>
306
+ <span>Burst: <i class="fas fa-bolt"></i> 92</span>
307
+ </div>
308
+ </div>
309
+ <div class="hero-card">
310
+ <img src="https://i.pravatar.cc/150?img=4" alt="Hero 4">
311
+ <h3>Echo Rush</h3>
312
+ <div class="hero-stats">
313
+ <span>Speed: <i class="fas fa-tachometer-alt"></i> 75</span>
314
+ <span>Endurance: <i class="fas fa-heart"></i> 95</span>
315
+ <span>Burst: <i class="fas fa-bolt"></i> 82</span>
316
+ </div>
317
+ </div>
318
+ <div class="hero-card glowing">
319
+ <img src="https://i.pravatar.cc/150?img=5" alt="Hero 5">
320
+ <h3>Neon Stride</h3>
321
+ <div class="hero-stats">
322
+ <span>Speed: <i class="fas fa-tachometer-alt"></i> 95</span>
323
+ <span>Endurance: <i class="fas fa-heart"></i> 60</span>
324
+ <span>Burst: <i class="fas fa-bolt"></i> 88</span>
325
+ </div>
326
+ </div>
327
+ </section>
328
+
329
+ <section class="progress-section">
330
+ <h2>Speed Progress</h2>
331
+ <div class="progress-wheel">
332
+ <div class="progress-center">72%</div>
333
+ </div>
334
+ <p>Energy recharges at 00:00 UTC. Bonus power-ups activate for eligible heroes.</p>
335
+ <div class="boost-section">
336
+ <button class="button glowing"><i class="fas fa-plus-circle"></i> Revive with Glider</button>
337
+ <button class="button"><i class="fas fa-bolt"></i> Use Fantasy Flares</button>
338
+ </div>
339
+ </section>
340
+
341
+ <section class="race-replay">
342
+ <h2>Race Replay</h2>
343
+ <video controls>
344
+ <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
345
+ Race replay animation
346
+ </video>
347
+ <p>Your heroes just crossed the finish line! Check out today’s fastest lanes.</p>
348
+ </section>
349
+
350
+ <section class="leaderboard">
351
+ <h2><i class="fas fa-crown"></i> Leaderboards</h2>
352
+ <div class="board">
353
+ <div class="board-entry">
354
+ <img src="https://i.pravatar.cc/150?img=6" alt="Top User 1">
355
+ <div>
356
+ <strong>Alpha Rider</strong> – 1,240 pts<br>
357
+ Most Upsets: 🥇
358
+ </div>
359
+ </div>
360
+ <div class="board-entry">
361
+ <img src="https://i.pravatar.cc/150?img=7" alt="Top User 2">
362
+ <div>
363
+ <strong>Neon Flash</strong> – 1,190 pts<br>
364
+ Fastest Lane: 🥈
365
+ </div>
366
+ </div>
367
+ <div class="board-entry">
368
+ <img src="https://i.pravatar.cc/150?img=8" alt="Top User 3">
369
+ <div>
370
+ <strong>Bolt Vandal</strong> – 1,150 pts<br>
371
+ Weekly Derby Winner: 🥉
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </section>
376
+
377
+ <footer>
378
+ <p>Earn rewards with every race. Share your Derby highlights on social!</p>
379
+ <p><i class="fab fa-ethereum"></i> Powered by FCS Fantasy CryptoSports</p>
380
+ </footer>
381
+ </body>
382
+ </html>