Hugging Face's logo

Spaces:
dlma
/
jack
Running

App Files Community
dlma commited on
Commit
b0cc08a
·
verified ·
1 Parent(s): 748039d

add max disagne end anymation - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +668 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Jack
3
- emoji: 😻
4
- colorFrom: green
5
- colorTo: yellow
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: jack
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,668 @@
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>JackOliva - Futuristic Platform</title>
7
+ <!-- Lucide Icons -->
8
+ <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
9
+ <style>
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ body {
17
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
18
+ background: linear-gradient(to bottom right, #0f172a, #581c87, #0f172a);
19
+ color: white;
20
+ min-height: 100vh;
21
+ overflow-x: hidden;
22
+ }
23
+
24
+ .stars {
25
+ position: fixed;
26
+ top: 0;
27
+ left: 0;
28
+ width: 100%;
29
+ height: 100%;
30
+ pointer-events: none;
31
+ z-index: 1;
32
+ }
33
+
34
+ .stars::before {
35
+ content: '';
36
+ position: absolute;
37
+ top: 0;
38
+ left: 0;
39
+ width: 100%;
40
+ height: 100%;
41
+ background-image:
42
+ radial-gradient(2px 2px at 20px 30px, #fff, transparent),
43
+ radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.3), transparent),
44
+ radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.5), transparent),
45
+ radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.3), transparent),
46
+ radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.6), transparent);
47
+ background-repeat: repeat;
48
+ background-size: 200px 100px;
49
+ animation: sparkle 20s linear infinite;
50
+ }
51
+
52
+ @keyframes sparkle {
53
+ from { transform: translateY(0); }
54
+ to { transform: translateY(-100px); }
55
+ }
56
+
57
+ .container {
58
+ position: relative;
59
+ z-index: 10;
60
+ }
61
+
62
+ /* Header */
63
+ header {
64
+ padding: 1rem 1.5rem;
65
+ }
66
+
67
+ nav {
68
+ display: flex;
69
+ align-items: center;
70
+ justify-content: space-between;
71
+ max-width: 1200px;
72
+ margin: 0 auto;
73
+ }
74
+
75
+ .logo {
76
+ display: flex;
77
+ align-items: center;
78
+ gap: 0.5rem;
79
+ }
80
+
81
+ .logo-icon {
82
+ width: 40px;
83
+ height: 40px;
84
+ background: transparent;
85
+ border-radius: 50%;
86
+ display: flex;
87
+ align-items: center;
88
+ justify-content: center;
89
+ font-size: 1.5rem;
90
+ }
91
+
92
+ .logo-icon img {
93
+ width: 40px;
94
+ height: 40px;
95
+ object-fit: contain;
96
+ }
97
+
98
+ .logo-text {
99
+ font-size: 1.5rem;
100
+ font-weight: bold;
101
+ }
102
+
103
+ .logo-accent {
104
+ color: #a855f7;
105
+ }
106
+
107
+ .nav-links {
108
+ display: none;
109
+ gap: 2rem;
110
+ align-items: center;
111
+ }
112
+
113
+ .nav-links a {
114
+ color: #d1d5db;
115
+ text-decoration: none;
116
+ transition: color 0.3s;
117
+ }
118
+
119
+ .nav-links a:hover {
120
+ color: white;
121
+ }
122
+
123
+ .btn {
124
+ background: linear-gradient(to right, #a855f7, #ec4899);
125
+ color: white;
126
+ padding: 0.75rem 1.5rem;
127
+ border: none;
128
+ border-radius: 0.5rem;
129
+ cursor: pointer;
130
+ font-weight: 500;
131
+ transition: all 0.3s;
132
+ }
133
+
134
+ .btn:hover {
135
+ background: linear-gradient(to right, #9333ea, #db2777);
136
+ }
137
+
138
+ /* Hero Section */
139
+ .hero {
140
+ text-align: center;
141
+ padding: 5rem 1.5rem;
142
+ max-width: 1000px;
143
+ margin: 0 auto;
144
+ }
145
+
146
+ .hero h1 {
147
+ font-size: 3rem;
148
+ font-weight: bold;
149
+ margin-bottom: 1.5rem;
150
+ }
151
+
152
+ .hero p {
153
+ font-size: 1.25rem;
154
+ color: #d1d5db;
155
+ margin-bottom: 2rem;
156
+ max-width: 600px;
157
+ margin-left: auto;
158
+ margin-right: auto;
159
+ }
160
+
161
+ .badges {
162
+ display: flex;
163
+ flex-wrap: wrap;
164
+ justify-content: center;
165
+ gap: 1rem;
166
+ margin-bottom: 3rem;
167
+ }
168
+
169
+ .badge {
170
+ background: rgba(88, 28, 135, 0.5);
171
+ color: #d8b4fe;
172
+ padding: 0.5rem 1rem;
173
+ border-radius: 1rem;
174
+ border: 1px solid #a855f7;
175
+ font-size: 0.875rem;
176
+ }
177
+
178
+ /* Stats Section */
179
+ .stats {
180
+ padding: 4rem 1.5rem;
181
+ max-width: 1200px;
182
+ margin: 0 auto;
183
+ }
184
+
185
+ .stats-grid {
186
+ display: grid;
187
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
188
+ gap: 1.5rem;
189
+ }
190
+
191
+ .stat-card {
192
+ background: rgba(30, 41, 59, 0.5);
193
+ border: 1px solid #475569;
194
+ backdrop-filter: blur(4px);
195
+ padding: 1.5rem;
196
+ border-radius: 0.5rem;
197
+ text-align: center;
198
+ transition: all 0.3s;
199
+ }
200
+
201
+ .stat-card:hover {
202
+ background: rgba(30, 41, 59, 0.7);
203
+ }
204
+
205
+ .stat-icon {
206
+ font-size: 2rem;
207
+ margin-bottom: 0.5rem;
208
+ }
209
+
210
+ .stat-value {
211
+ font-size: 2rem;
212
+ font-weight: bold;
213
+ margin-bottom: 0.25rem;
214
+ }
215
+
216
+ .stat-label {
217
+ color: #9ca3af;
218
+ font-size: 0.875rem;
219
+ }
220
+
221
+ /* Features Section */
222
+ .features {
223
+ padding: 4rem 1.5rem;
224
+ max-width: 1200px;
225
+ margin: 0 auto;
226
+ }
227
+
228
+ .features-grid {
229
+ display: grid;
230
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
231
+ gap: 1.5rem;
232
+ }
233
+
234
+ .feature-card {
235
+ background: rgba(30, 41, 59, 0.5);
236
+ border: 1px solid #475569;
237
+ backdrop-filter: blur(4px);
238
+ padding: 1.5rem;
239
+ border-radius: 0.5rem;
240
+ transition: all 0.3s;
241
+ }
242
+
243
+ .feature-card:hover {
244
+ background: rgba(30, 41, 59, 0.7);
245
+ }
246
+
247
+ .feature-header {
248
+ display: flex;
249
+ align-items: flex-start;
250
+ gap: 1rem;
251
+ }
252
+
253
+ .feature-icon {
254
+ font-size: 2rem;
255
+ flex-shrink: 0;
256
+ }
257
+
258
+ .feature-content h3 {
259
+ font-size: 1.25rem;
260
+ font-weight: 600;
261
+ margin-bottom: 0.5rem;
262
+ }
263
+
264
+ .feature-content p {
265
+ color: #9ca3af;
266
+ }
267
+
268
+ /* Access Card */
269
+ .access-section {
270
+ padding: 4rem 1.5rem;
271
+ max-width: 400px;
272
+ margin: 0 auto;
273
+ }
274
+
275
+ .access-card {
276
+ background: rgba(30, 41, 59, 0.5);
277
+ border: 1px solid #475569;
278
+ backdrop-filter: blur(4px);
279
+ padding: 2rem;
280
+ border-radius: 0.5rem;
281
+ text-align: center;
282
+ transition: all 0.3s ease;
283
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
284
+ transform: perspective(1000px) rotateX(0deg) scale(1);
285
+ overflow: hidden;
286
+ position: relative;
287
+ }
288
+
289
+ .access-card::before {
290
+ content: '';
291
+ position: absolute;
292
+ top: 0;
293
+ left: 0;
294
+ right: 0;
295
+ height: 4px;
296
+ background: linear-gradient(to right, #a855f7, #ec4899);
297
+ transform: scaleX(0);
298
+ transform-origin: left;
299
+ transition: transform 0.3s ease;
300
+ }
301
+
302
+ .access-card:hover {
303
+ transform: perspective(1000px) rotateX(5deg) scale(1.02);
304
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
305
+ border-color: #a855f7;
306
+ }
307
+
308
+ .access-card:hover::before {
309
+ transform: scaleX(1);
310
+ }
311
+
312
+ .hovered-element {
313
+ transition: all 0.3s ease;
314
+ }
315
+
316
+ .access-card:hover .hovered-element {
317
+ transform: translateY(-2px);
318
+ }
319
+
320
+ .access-icon {
321
+ width: 64px;
322
+ height: 64px;
323
+ background: linear-gradient(to right, #a855f7, #ec4899);
324
+ border-radius: 50%;
325
+ display: flex;
326
+ align-items: center;
327
+ justify-content: center;
328
+ margin: 0 auto 1.5rem;
329
+ font-size: 2rem;
330
+ }
331
+
332
+ .access-card h2 {
333
+ font-size: 1.5rem;
334
+ font-weight: bold;
335
+ margin-bottom: 0.5rem;
336
+ }
337
+
338
+ .access-card .subtitle {
339
+ color: #9ca3af;
340
+ margin-bottom: 1.5rem;
341
+ }
342
+
343
+ .benefits {
344
+ margin-bottom: 2rem;
345
+ }
346
+
347
+ .benefit {
348
+ display: flex;
349
+ align-items: center;
350
+ gap: 0.75rem;
351
+ text-align: left;
352
+ margin-bottom: 0.75rem;
353
+ }
354
+
355
+ .benefit .check {
356
+ color: #10b981;
357
+ font-size: 1.25rem;
358
+ }
359
+
360
+ .full-width-btn {
361
+ width: 100%;
362
+ margin-bottom: 1rem;
363
+ }
364
+
365
+ .security-info {
366
+ display: flex;
367
+ align-items: center;
368
+ justify-content: center;
369
+ gap: 0.5rem;
370
+ font-size: 0.875rem;
371
+ color: #9ca3af;
372
+ margin-bottom: 1rem;
373
+ }
374
+
375
+ .terms {
376
+ font-size: 0.75rem;
377
+ color: #6b7280;
378
+ margin-bottom: 1.5rem;
379
+ }
380
+
381
+ .status {
382
+ display: flex;
383
+ align-items: center;
384
+ justify-content: center;
385
+ gap: 0.5rem;
386
+ margin-bottom: 0.5rem;
387
+ }
388
+
389
+ .status-dot {
390
+ width: 12px;
391
+ height: 12px;
392
+ background: #10b981;
393
+ border-radius: 50%;
394
+ }
395
+
396
+ .status-text {
397
+ font-size: 0.875rem;
398
+ color: #9ca3af;
399
+ }
400
+
401
+ .tagline {
402
+ font-size: 0.75rem;
403
+ color: #6b7280;
404
+ }
405
+
406
+ @media (min-width: 768px) {
407
+ .nav-links {
408
+ display: flex;
409
+ }
410
+
411
+ .hero h1 {
412
+ font-size: 4rem;
413
+ }
414
+
415
+ .stats-grid {
416
+ grid-template-columns: repeat(4, 1fr);
417
+ }
418
+
419
+ .features-grid {
420
+ grid-template-columns: repeat(2, 1fr);
421
+ }
422
+ }
423
+
424
+ .icon-svg {
425
+ width: 1em;
426
+ height: 1em;
427
+ display: inline-block;
428
+ vertical-align: middle;
429
+ }
430
+
431
+ .stat-icon .icon-svg {
432
+ width: 2rem;
433
+ height: 2rem;
434
+ }
435
+
436
+ .feature-icon .icon-svg {
437
+ width: 2rem;
438
+ height: 2rem;
439
+ }
440
+
441
+ .access-icon .icon-svg {
442
+ width: 2rem;
443
+ height: 2rem;
444
+ }
445
+ </style>
446
+ </head>
447
+ <body>
448
+ <div class="stars"></div>
449
+
450
+ <div class="container">
451
+ <!-- Header -->
452
+ <header>
453
+ <nav>
454
+ <div class="logo">
455
+ <div class="logo-icon">
456
+ <img src="https://i.postimg.cc/Gm6cPWkT/image.png" alt="JackOliva Logo" />
457
+ </div>
458
+ <span class="logo-text">Jack<span class="logo-accent">Oliva</span></span>
459
+ </div>
460
+
461
+
462
+ </nav>
463
+ </header>
464
+
465
+ <!-- Hero Section -->
466
+ <section class="hero">
467
+ <h1>Jack<span class="logo-accent">Oliva</span></h1>
468
+ <p>The ultimate <span class="logo-accent">futuristic platform</span> for elite developers. Access cutting-edge tools and join an exclusive Discord community.</p>
469
+
470
+ <div class="badges">
471
+ <span class="badge"><i data-lucide="star" class="icon-svg"></i> Premium Access</span>
472
+ <span class="badge"><i data-lucide="trophy" class="icon-svg"></i> Elite Community</span>
473
+ <span class="badge"><i data-lucide="wrench" class="icon-svg"></i> Advanced Tools</span>
474
+ </div>
475
+
476
+ <button class="btn" onclick="scrollToAccess()">Join the Platform</button>
477
+ </section>
478
+
479
+ <!-- Stats Section -->
480
+ <section class="stats">
481
+ <div class="stats-grid">
482
+ <div class="stat-card">
483
+ <div class="stat-icon"><i data-lucide="users" class="icon-svg"></i></div>
484
+ <div class="stat-value">12.8K+</div>
485
+ <div class="stat-label">Active Users</div>
486
+ </div>
487
+ <div class="stat-card">
488
+ <div class="stat-icon"><i data-lucide="wrench" class="icon-svg"></i></div>
489
+ <div class="stat-value">47+</div>
490
+ <div class="stat-label">Tools Available</div>
491
+ </div>
492
+ <div class="stat-card">
493
+ <div class="stat-icon"><i data-lucide="zap" class="icon-svg"></i></div>
494
+ <div class="stat-value">99.9%</div>
495
+ <div class="stat-label">Uptime</div>
496
+ </div>
497
+ <div class="stat-card">
498
+ <div class="stat-icon"><i data-lucide="globe" class="icon-svg"></i></div>
499
+ <div class="stat-value">156</div>
500
+ <div class="stat-label">Countries</div>
501
+ </div>
502
+ </div>
503
+ </section>
504
+
505
+ <!-- Features Section -->
506
+ <section class="features">
507
+ <div class="features-grid">
508
+ <div class="feature-card">
509
+ <div class="feature-header">
510
+ <div class="feature-icon" style="color: #a855f7;"><i data-lucide="settings" class="icon-svg"></i></div>
511
+ <div class="feature-content">
512
+ <h3>Advanced Tools</h3>
513
+ <p>Hyper-scale commands, faster generations, and more</p>
514
+ </div>
515
+ </div>
516
+ </div>
517
+ <div class="feature-card">
518
+ <div class="feature-header">
519
+ <div class="feature-icon" style="color: #ef4444;"><i data-lucide="shield" class="icon-svg"></i></div>
520
+ <div class="feature-content">
521
+ <h3>Security Suite</h3>
522
+ <p>Password generators, JWT decoders, encryption tools</p>
523
+ </div>
524
+ </div>
525
+ </div>
526
+ <div class="feature-card">
527
+ <div class="feature-header">
528
+ <div class="feature-icon" style="color: #3b82f6;"><i data-lucide="network" class="icon-svg"></i></div>
529
+ <div class="feature-content">
530
+ <h3>Network Tools</h3>
531
+ <p>IP lookup, DNS checker, port scanner monitoring</p>
532
+ </div>
533
+ </div>
534
+ </div>
535
+ <div class="feature-card">
536
+ <div class="feature-header">
537
+ <div class="feature-icon" style="color: #10b981;"><i data-lucide="terminal" class="icon-svg"></i></div>
538
+ <div class="feature-content">
539
+ <h3>Developer Console</h3>
540
+ <p>Custom analytics tool, schema monitoring</p>
541
+ </div>
542
+ </div>
543
+ </div>
544
+ </div>
545
+ </section>
546
+
547
+ <!-- Access Card -->
548
+ <section class="access-section" id="access">
549
+ <div class="access-card">
550
+ <div class="access-icon"><i data-lucide="shield" class="icon-svg"></i></div>
551
+
552
+ <h2>Secure Access</h2>
553
+ <p class="subtitle">Discord authentication required for exclusive access</p>
554
+
555
+ <div class="benefits">
556
+ <div class="benefit">
557
+ <span class="check"><i data-lucide="check" class="icon-svg" style="color: #10b981;"></i></span>
558
+ <span>End-to-end encrypted sessions</span>
559
+ </div>
560
+ <div class="benefit">
561
+ <span class="check"><i data-lucide="check" class="icon-svg" style="color: #10b981;"></i></span>
562
+ <span>Discord server verification</span>
563
+ </div>
564
+ <div class="benefit">
565
+ <span class="check"><i data-lucide="check" class="icon-svg" style="color: #10b981;"></i></span>
566
+ <span>Premium member benefits</span>
567
+ </div>
568
+ </div>
569
+
570
+ <a href="https://discord.gg/3MkdY4UjeM" target="_blank" rel="noopener noreferrer" class="btn full-width-btn">Continue with Discord</a>
571
+
572
+ <div class="security-info">
573
+ <span><i data-lucide="shield" class="icon-svg"></i></span>
574
+ <span>Secure OAuth 2.0 Authentication</span>
575
+ </div>
576
+
577
+ <p class="terms">
578
+ By continuing, you agree to our Terms of Service and acknowledge
579
+ that you've read our Privacy Policy. You must be 13 or older to
580
+ use the platform.
581
+ </p>
582
+
583
+ <div class="status">
584
+ <div class="status-dot"></div>
585
+ <span class="status-text">Jack 668</span>
586
+ </div>
587
+ <p class="tagline">Master Fullstack Development</p>
588
+ </div>
589
+ </section>
590
+ </div>
591
+
592
+ <script>
593
+ // Initialize Lucide icons
594
+ lucide.createIcons();
595
+
596
+ function scrollToAccess() {
597
+ document.getElementById('access').scrollIntoView({
598
+ behavior: 'smooth'
599
+ });
600
+ }
601
+
602
+ function connectDiscord() {
603
+ alert('Discord authentication would be implemented here!');
604
+ }
605
+
606
+ // Add some interactive effects
607
+ document.addEventListener('DOMContentLoaded', function() {
608
+ // Animate stat cards on scroll
609
+ const observerOptions = {
610
+ threshold: 0.1,
611
+ rootMargin: '0px 0px -50px 0px'
612
+ };
613
+
614
+ const observer = new IntersectionObserver((entries) => {
615
+ entries.forEach(entry => {
616
+ if (entry.isIntersecting) {
617
+ entry.target.style.transform = 'translateY(0)';
618
+ entry.target.style.opacity = '1';
619
+
620
+ if (entry.target.classList.contains('access-card')) {
621
+ entry.target.style.animation = 'cardAppear 0.8s ease forwards';
622
+ }
623
+ }
624
+ });
625
+ }, observerOptions);
626
+
627
+ // Observe all cards
628
+ document.querySelectorAll('.stat-card, .feature-card, .access-card').forEach(card => {
629
+ card.style.transform = 'translateY(20px)';
630
+ card.style.opacity = '0';
631
+ card.style.transition = 'all 0.6s ease';
632
+ observer.observe(card);
633
+ });
634
+ });
635
+
636
+ // Add keyframes for animation
637
+ const style = document.createElement('style');
638
+ style.textContent = `
639
+ @keyframes cardAppear {
640
+ 0% {
641
+ transform: translateY(20px) scale(0.95);
642
+ opacity: 0;
643
+ }
644
+ 50% {
645
+ opacity: 1;
646
+ }
647
+ 100% {
648
+ transform: translateY(0) scale(1);
649
+ opacity: 1;
650
+ }
651
+ }
652
+
653
+ @keyframes gradientPulse {
654
+ 0% {
655
+ background-position: 0% 50%;
656
+ }
657
+ 50% {
658
+ background-position: 100% 50%;
659
+ }
660
+ 100% {
661
+ background-position: 0% 50%;
662
+ }
663
+ }
664
+ `;
665
+ document.head.appendChild(style);
666
+ </script>
667
+ <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=dlma/jack" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
668
+ </html>