Ezequield commited on
Commit
b0b1471
·
verified ·
1 Parent(s): 583c479

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +362 -695
index.html CHANGED
@@ -3,747 +3,414 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>TheLogoCollection | Premium Asset Hub</title>
7
- <!-- Import RemixIcon for high-quality icons -->
8
- <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
9
- <!-- Import Google Fonts -->
10
- <link rel="preconnect" href="https://fonts.googleapis.com">
11
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
13
-
14
- <style>
15
- /* --- CSS VARIABLES & RESET --- */
16
- :root {
17
- --bg-body: #0a0a0a;
18
- --bg-card: #141414;
19
- --bg-card-hover: #1c1c1c;
20
- --primary: #00ccff; /* Cyan/MediaFire vibe */
21
- --secondary: #4caf50; /* Green/DeviantArt vibe */
22
- --accent: #ff4757;
23
- --text-main: #ffffff;
24
- --text-muted: #a0a0a0;
25
- --border: #2a2a2a;
26
- --radius: 12px;
27
- --font-main: 'Inter', sans-serif;
28
- --font-display: 'Space Grotesk', sans-serif;
29
- --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
30
- }
31
-
32
- * {
33
- margin: 0;
34
- padding: 0;
35
- box-sizing: border-box;
36
  }
 
37
 
38
- body {
39
- font-family: var(--font-main);
40
- background-color: var(--bg-body);
41
- color: var(--text-main);
42
- line-height: 1.6;
43
- overflow-x: hidden;
44
- }
45
 
46
- a { text-decoration: none; color: inherit; transition: var(--transition); }
47
- ul { list-style: none; }
48
- img { max-width: 100%; display: block; }
 
49
 
50
- /* --- LAYOUT UTILITIES --- */
51
- .container {
52
- max-width: 1200px;
53
- margin: 0 auto;
54
- padding: 0 20px;
55
  }
56
-
57
- .flex-center { display: flex; align-items: center; justify-content: center; }
58
- .flex-between { display: flex; align-items: center; justify-content: space-between; }
59
-
60
- /* --- HEADER --- */
61
- header {
62
- position: fixed;
63
- top: 0;
64
- left: 0;
65
- width: 100%;
66
- padding: 20px 0;
67
- background: rgba(10, 10, 10, 0.8);
68
  backdrop-filter: blur(12px);
69
- border-bottom: 1px solid var(--border);
70
- z-index: 1000;
71
- }
72
-
73
- .nav-inner {
74
- display: flex;
75
- justify-content: space-between;
76
- align-items: center;
77
- }
78
-
79
- .logo {
80
- font-family: var(--font-display);
81
- font-size: 1.5rem;
82
- font-weight: 700;
83
- letter-spacing: -0.5px;
84
- display: flex;
85
- align-items: center;
86
- gap: 10px;
87
- }
88
-
89
- .logo span { color: var(--primary); }
90
-
91
- .nav-links {
92
- display: flex;
93
- gap: 30px;
94
- }
95
-
96
- .nav-links a {
97
- font-size: 0.9rem;
98
- color: var(--text-muted);
99
- font-weight: 500;
100
- }
101
-
102
- .nav-links a:hover { color: var(--primary); }
103
-
104
- .anycoder-link {
105
- font-size: 0.8rem;
106
- background: rgba(255, 255, 255, 0.1);
107
- padding: 6px 12px;
108
- border-radius: 20px;
109
- color: var(--primary);
110
- border: 1px solid rgba(0, 204, 255, 0.2);
111
- }
112
-
113
- .anycoder-link:hover {
114
- background: var(--primary);
115
- color: #000;
116
- }
117
-
118
- /* --- HERO SECTION --- */
119
- .hero {
120
- padding: 160px 0 80px;
121
- text-align: center;
122
- position: relative;
123
- overflow: hidden;
124
- }
125
-
126
- /* Decorative background blob */
127
- .hero::before {
128
- content: '';
129
- position: absolute;
130
- top: -100px;
131
- left: 50%;
132
- transform: translateX(-50%);
133
- width: 600px;
134
- height: 600px;
135
- background: radial-gradient(circle, rgba(0,204,255,0.15) 0%, rgba(10,10,10,0) 70%);
136
- z-index: -1;
137
- pointer-events: none;
138
- }
139
-
140
- .hero h1 {
141
- font-family: var(--font-display);
142
- font-size: 4rem;
143
- font-weight: 700;
144
- line-height: 1.1;
145
- margin-bottom: 20px;
146
- background: linear-gradient(135deg, #fff 0%, #a0a0a0 100%);
147
- -webkit-background-clip: text;
148
- -webkit-text-fill-color: transparent;
149
- }
150
-
151
- .hero p {
152
- font-size: 1.2rem;
153
- color: var(--text-muted);
154
- max-width: 600px;
155
- margin: 0 auto 40px;
156
- }
157
-
158
- .btn-main {
159
- display: inline-flex;
160
- align-items: center;
161
- gap: 10px;
162
- padding: 14px 32px;
163
- background: var(--primary);
164
- color: #000;
165
- font-weight: 600;
166
- border-radius: 50px;
167
- font-size: 1rem;
168
- cursor: pointer;
169
- border: none;
170
- transition: var(--transition);
171
- }
172
-
173
- .btn-main:hover {
174
- transform: translateY(-2px);
175
- box-shadow: 0 10px 20px rgba(0, 204, 255, 0.2);
176
- background: #33d9ff;
177
- }
178
-
179
- /* --- FILTERS --- */
180
- .filters {
181
- margin-bottom: 40px;
182
- display: flex;
183
- gap: 15px;
184
- overflow-x: auto;
185
- padding-bottom: 10px;
186
- justify-content: center;
187
- }
188
-
189
- .filter-btn {
190
- background: var(--bg-card);
191
- border: 1px solid var(--border);
192
- color: var(--text-muted);
193
- padding: 8px 20px;
194
- border-radius: 30px;
195
- cursor: pointer;
196
- transition: var(--transition);
197
- white-space: nowrap;
198
- }
199
-
200
- .filter-btn.active, .filter-btn:hover {
201
- background: var(--text-main);
202
- color: var(--bg-body);
203
- border-color: var(--text-main);
204
- }
205
-
206
- /* --- GRID GALLERY --- */
207
- .gallery-grid {
208
- display: grid;
209
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
210
- gap: 30px;
211
- padding-bottom: 100px;
212
- }
213
-
214
- .card {
215
- background: var(--bg-card);
216
- border: 1px solid var(--border);
217
- border-radius: var(--radius);
218
- overflow: hidden;
219
- transition: var(--transition);
220
- position: relative;
221
- display: flex;
222
- flex-direction: column;
223
- }
224
-
225
- .card:hover {
226
- transform: translateY(-5px);
227
- border-color: var(--primary);
228
- box-shadow: 0 10px 30px rgba(0,0,0,0.5);
229
- }
230
-
231
- .card-image {
232
- height: 200px;
233
- width: 100%;
234
- object-fit: cover;
235
- position: relative;
236
- }
237
-
238
- .card-overlay {
239
- position: absolute;
240
- top: 10px;
241
- right: 10px;
242
- background: rgba(0,0,0,0.6);
243
- backdrop-filter: blur(4px);
244
- padding: 4px 10px;
245
- border-radius: 4px;
246
- font-size: 0.75rem;
247
- color: #fff;
248
- display: flex;
249
- align-items: center;
250
- gap: 4px;
251
- }
252
-
253
- .card-content {
254
- padding: 20px;
255
- flex-grow: 1;
256
- display: flex;
257
- flex-direction: column;
258
- }
259
-
260
- .card-title {
261
- font-size: 1.1rem;
262
- font-weight: 600;
263
- margin-bottom: 8px;
264
- color: var(--text-main);
265
- }
266
-
267
- .card-meta {
268
- display: flex;
269
- gap: 10px;
270
- margin-bottom: 20px;
271
- font-size: 0.85rem;
272
- color: var(--text-muted);
273
- }
274
-
275
- .tag {
276
- display: flex;
277
- align-items: center;
278
- gap: 4px;
279
- }
280
-
281
- .card-actions {
282
- margin-top: auto;
283
- display: flex;
284
- gap: 10px;
285
- }
286
-
287
- .btn-card {
288
- flex: 1;
289
- padding: 10px;
290
- border-radius: 8px;
291
- border: none;
292
- cursor: pointer;
293
- font-weight: 600;
294
- font-size: 0.9rem;
295
- display: flex;
296
- align-items: center;
297
- justify-content: center;
298
- gap: 8px;
299
- transition: var(--transition);
300
- }
301
-
302
- .btn-download {
303
- background: rgba(0, 204, 255, 0.1);
304
- color: var(--primary);
305
- border: 1px solid rgba(0, 204, 255, 0.2);
306
- }
307
-
308
- .btn-download:hover {
309
- background: var(--primary);
310
- color: #000;
311
- }
312
-
313
- .btn-external {
314
- background: rgba(255, 255, 255, 0.05);
315
- color: var(--text-muted);
316
- }
317
-
318
- .btn-external:hover {
319
- background: rgba(255, 255, 255, 0.1);
320
- color: var(--text-main);
321
- }
322
-
323
- /* --- DOWNLOAD MODAL --- */
324
- .modal-overlay {
325
- position: fixed;
326
- top: 0;
327
- left: 0;
328
- width: 100%;
329
- height: 100%;
330
- background: rgba(0,0,0,0.8);
331
- backdrop-filter: blur(5px);
332
- z-index: 2000;
333
- display: flex;
334
- align-items: center;
335
- justify-content: center;
336
- opacity: 0;
337
- pointer-events: none;
338
- transition: opacity 0.3s ease;
339
- }
340
-
341
- .modal-overlay.active {
342
- opacity: 1;
343
- pointer-events: auto;
344
- }
345
-
346
- .modal {
347
- background: #1a1a1a;
348
- width: 90%;
349
- max-width: 500px;
350
- border-radius: 16px;
351
- border: 1px solid var(--border);
352
- padding: 30px;
353
- text-align: center;
354
- transform: scale(0.9);
355
- transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
356
- box-shadow: 0 20px 50px rgba(0,0,0,0.5);
357
- }
358
-
359
- .modal-overlay.active .modal {
360
- transform: scale(1);
361
  }
362
 
363
- .modal-icon {
364
- font-size: 3rem;
365
- color: var(--primary);
366
- margin-bottom: 20px;
367
  }
368
 
369
- .modal-title {
370
- font-size: 1.5rem;
371
- margin-bottom: 10px;
372
- font-weight: 700;
373
  }
374
-
375
- .modal-desc {
376
- color: var(--text-muted);
377
- margin-bottom: 30px;
378
- font-size: 0.95rem;
379
  }
380
-
381
- /* Progress Bar */
382
- .progress-container {
383
- height: 6px;
384
- background: #333;
385
- border-radius: 3px;
386
- margin-bottom: 10px;
387
- overflow: hidden;
388
- display: none; /* Hidden initially */
389
  }
390
-
391
- .progress-bar {
392
- height: 100%;
393
- width: 0%;
394
- background: var(--secondary);
395
- border-radius: 3px;
396
- transition: width 0.1s linear;
397
- }
398
-
399
- .status-text {
400
- font-size: 0.85rem;
401
- color: var(--secondary);
402
- margin-bottom: 20px;
403
- min-height: 20px;
404
- }
405
-
406
- .modal-btn {
407
- background: var(--secondary);
408
- color: #fff;
409
- padding: 12px 24px;
410
- border: none;
411
- border-radius: 8px;
412
- font-size: 1rem;
413
- font-weight: 600;
414
- cursor: pointer;
415
- width: 100%;
416
- display: none; /* Hidden initially */
417
- }
418
-
419
- .modal-btn:hover {
420
- background: #43a047;
421
- }
422
-
423
- .close-modal {
424
- position: absolute;
425
- top: 15px;
426
- right: 15px;
427
- background: transparent;
428
- border: none;
429
- color: var(--text-muted);
430
- font-size: 1.2rem;
431
- cursor: pointer;
432
- }
433
-
434
- /* --- FOOTER --- */
435
- footer {
436
- border-top: 1px solid var(--border);
437
- padding: 40px 0;
438
- text-align: center;
439
- color: var(--text-muted);
440
- font-size: 0.9rem;
441
- }
442
-
443
- /* --- RESPONSIVE --- */
444
- @media (max-width: 768px) {
445
- .hero h1 { font-size: 2.5rem; }
446
- .nav-links { display: none; } /* Simplified for mobile */
447
- .gallery-grid { grid-template-columns: 1fr; }
448
  }
449
  </style>
450
  </head>
451
- <body>
452
 
453
  <!-- Header -->
454
- <header>
455
- <div class="container nav-inner">
456
- <a href="#" class="logo">
457
- <i class="ri-shape-2-fill" style="color: var(--primary);"></i>
458
- TheLogo<span>Collection</span>
459
- </a>
460
-
461
- <nav class="nav-links">
462
- <a href="#">Home</a>
463
- <a href="#">Collections</a>
464
- <a href="#">Premium</a>
465
- <a href="#">Submit</a>
466
- </nav>
467
 
468
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
469
- Built with anycoder
470
- </a>
 
 
 
 
 
 
 
 
471
  </div>
472
  </header>
473
 
474
  <!-- Main Content -->
475
- <main>
476
- <!-- Hero Section -->
477
- <section class="hero container">
478
- <h1>Curated Design Assets<br>For Creators.</h1>
479
- <p>Download high-quality logo packs, vectors, and design resources. <br>Sourced from top community collections.</p>
480
- <button class="btn-main" onclick="scrollToGallery()">
481
- Browse Collection <i class="ri-arrow-down-line"></i>
482
- </button>
483
- </section>
484
-
485
- <!-- Gallery Section -->
486
- <section id="gallery" class="container">
487
- <!-- Filter Tags -->
488
- <div class="filters">
489
- <button class="filter-btn active">All</button>
490
- <button class="filter-btn">Esports</button>
491
- <button class="filter-btn">Minimalist</button>
492
- <button class="filter-btn">Vintage</button>
493
- <button class="filter-btn">3D Renders</button>
494
- <button class="filter-btn">Typography</button>
495
  </div>
496
 
497
- <!-- Grid -->
498
- <div class="gallery-grid" id="grid">
499
- <!-- Cards will be injected here via JS, but putting static HTML for structure -->
500
- </div>
501
- </section>
502
- </main>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
503
 
504
- <!-- Footer -->
505
- <footer>
506
- <div class="container">
507
- <p>&copy; 2023 TheLogoCollection. All rights reserved.</p>
508
- <p style="margin-top: 10px; font-size: 0.8rem; opacity: 0.6;">
509
- This is a static showcase. Not affiliated with MediaFire or DeviantArt.
510
- </p>
511
- </div>
512
- </footer>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
513
 
514
- <!-- Download Simulation Modal -->
515
- <div class="modal-overlay" id="downloadModal">
516
- <div class="modal">
517
- <button class="close-modal" onclick="closeModal()"><i class="ri-close-line"></i></button>
518
-
519
- <div id="modalState-initial">
520
- <div class="modal-icon"><i class="ri-download-cloud-2-line"></i></div>
521
- <h3 class="modal-title">Download Request</h3>
522
- <p class="modal-desc">You are about to download <strong id="packName" style="color: var(--text-main)">Pack Name</strong>.</p>
523
- <div style="display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; font-size: 0.8rem; color: var(--text-muted);">
524
- <span><i class="ri-file-zip-line"></i> ZIP Archive</span>
525
- <span><i class="ri-database-2-line"></i> MediaFire Host</span>
526
  </div>
527
- <button class="btn-main" style="width: 100%; justify-content: center;" onclick="startDownload()">Start Download</button>
528
- </div>
529
 
530
- <div id="modalState-progress" style="display: none;">
531
- <div class="modal-icon" style="color: var(--secondary);"><i class="ri-loader-4-line ri-spin"></i></div>
532
- <h3 class="modal-title">Preparing Link...</h3>
533
- <div class="progress-container" style="display: block;">
534
- <div class="progress-bar" id="progressBar"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
535
  </div>
536
- <div class="status-text" id="statusText">Connecting to server...</div>
537
- </div>
538
 
539
- <div id="modalState-complete" style="display: none;">
540
- <div class="modal-icon" style="color: var(--secondary);"><i class="ri-checkbox-circle-line"></i></div>
541
- <h3 class="modal-title">Ready!</h3>
542
- <p class="modal-desc">Your download link has been generated.</p>
543
- <button class="modal-btn" style="display: block;" onclick="finishDownload()">Save File</button>
544
  </div>
545
-
546
  </div>
547
- </div>
548
 
549
- <script>
550
- // --- DATA ---
551
- const packs = [
552
- {
553
- id: 1,
554
- title: "Neon Cyberpunk Logos",
555
- author: "DevArtist_01",
556
- size: "45 MB",
557
- tags: ["Esports", "Gaming"],
558
- image: "https://picsum.photos/seed/cyber/400/300",
559
- downloads: "1.2k"
560
- },
561
- {
562
- id: 2,
563
- title: "Minimalist geometric",
564
- author: "VectorKing",
565
- size: "12 MB",
566
- tags: ["Minimalist", "SVG"],
567
- image: "https://picsum.photos/seed/geo/400/300",
568
- downloads: "850"
569
- },
570
- {
571
- id: 3,
572
- title: "Retro Badge Collection",
573
- author: "OldSchool",
574
- size: "88 MB",
575
- tags: ["Vintage", "Badge"],
576
- image: "https://picsum.photos/seed/retro/400/300",
577
- downloads: "3.4k"
578
- },
579
- {
580
- id: 4,
581
- title: "Abstract 3D Shapes",
582
- author: "RenderGod",
583
- size: "150 MB",
584
- tags: ["3D", "Abstract"],
585
- image: "https://picsum.photos/seed/abs/400/300",
586
- downloads: "560"
587
- },
588
- {
589
- id: 5,
590
- title: "Typography Monsters",
591
- author: "FontMaster",
592
- size: "22 MB",
593
- tags: ["Typography", "Art"],
594
- image: "https://picsum.photos/seed/font/400/300",
595
- downloads: "2.1k"
596
- },
597
- {
598
- id: 6,
599
- title: "Nature Organic Icons",
600
- author: "GreenLeaf",
601
- size: "30 MB",
602
- tags: ["Nature", "Icon"],
603
- image: "https://picsum.photos/seed/nature/400/300",
604
- downloads: "900"
605
- },
606
- {
607
- id: 7,
608
- title: "Tech Startup Kit",
609
- author: "SiliconValley",
610
- size: "55 MB",
611
- tags: ["Business", "Tech"],
612
- image: "https://picsum.photos/seed/tech/400/300",
613
- downloads: "4.5k"
614
- },
615
- {
616
- id: 8,
617
- title: "Dark Mode UI Logos",
618
- author: "InterfacePro",
619
- size: "18 MB",
620
- tags: ["UI/UX", "Dark"],
621
- image: "https://picsum.photos/seed/dark/400/300",
622
- downloads: "1.1k"
623
- }
624
- ];
625
-
626
- // --- RENDER GRID ---
627
- const grid = document.getElementById('grid');
628
-
629
- function renderGrid() {
630
- grid.innerHTML = packs.map(pack => `
631
- <article class="card">
632
- <div class="card-image">
633
- <img src="${pack.image}" alt="${pack.title}" loading="lazy">
634
- <div class="card-overlay">
635
- <i class="ri-download-line"></i> ${pack.downloads}
636
- </div>
637
- </div>
638
- <div class="card-content">
639
- <h3 class="card-title">${pack.title}</h3>
640
- <div class="card-meta">
641
- <span class="tag"><i class="ri-user-line"></i> ${pack.author}</span>
642
- <span class="tag"><i class="ri-hard-drive-2-line"></i> ${pack.size}</span>
643
- </div>
644
- <div style="margin-bottom: 15px; display: flex; flex-wrap: wrap; gap: 5px;">
645
- ${pack.tags.map(tag => `<span style="font-size: 0.75rem; color: var(--primary); background: rgba(0,204,255,0.1); padding: 2px 8px; border-radius: 4px;">#${tag}</span>`).join('')}
646
- </div>
647
- <div class="card-actions">
648
- <button class="btn-card btn-download" onclick="openModal('${pack.title}')">
649
- <i class="ri-download-cloud-line"></i> Download
650
- </button>
651
- <button class="btn-card btn-external" title="View Source">
652
- <i class="ri-external-link-line"></i>
653
- </button>
654
- </div>
655
- </div>
656
- </article>
657
- `).join('');
658
- }
659
 
660
- renderGrid();
 
661
 
662
- // --- MODAL & DOWNLOAD LOGIC ---
663
- const modalOverlay = document.getElementById('downloadModal');
664
- const packNameSpan = document.getElementById('packName');
665
-
666
- // Modal States
667
- const stateInitial = document.getElementById('modalState-initial');
668
- const stateProgress = document.getElementById('modalState-progress');
669
- const stateComplete = document.getElementById('modalState-complete');
670
- const progressBar = document.getElementById('progressBar');
671
- const statusText = document.getElementById('statusText');
672
-
673
- let currentPack = "";
674
-
675
- function openModal(packName) {
676
- currentPack = packName;
677
- packNameSpan.textContent = packName;
678
 
679
- // Reset states
680
- stateInitial.style.display = 'block';
681
- stateProgress.style.display = 'none';
682
- stateComplete.style.display = 'none';
683
 
684
- modalOverlay.classList.add('active');
685
- }
686
-
687
- function closeModal() {
688
- modalOverlay.classList.remove('active');
689
- }
690
 
691
- // Close when clicking outside modal
692
- modalOverlay.addEventListener('click', (e) => {
693
- if (e.target === modalOverlay) closeModal();
694
- });
695
 
696
- function startDownload() {
697
- // Switch to progress state
698
- stateInitial.style.display = 'none';
699
- stateProgress.style.display = 'block';
700
-
701
- let width = 0;
702
- const interval = setInterval(() => {
703
- // Simulate non-linear loading speed
704
- const increment = Math.random() * 15;
705
- width += increment;
706
-
707
- if (width >= 100) {
708
- width = 100;
709
- clearInterval(interval);
710
- statusText.textContent = "Generating secure link...";
711
- setTimeout(() => {
712
- showComplete();
713
- }, 800);
714
  } else {
715
- statusText.textContent = `Downloading from MediaFire servers... ${Math.floor(width)}%`;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
716
  }
 
 
 
 
 
717
 
718
- progressBar.style.width = width + '%';
719
- }, 200);
720
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
721
 
722
- function showComplete() {
723
- stateProgress.style.display = 'none';
724
- stateComplete.style.display = 'block';
725
- }
726
 
727
- function finishDownload() {
728
- // Create a dummy file to simulate actual download
729
- const element = document.createElement('a');
730
- const fileContent = `This is a dummy file for ${currentPack}.\n\nIn a real application, this would be the binary data from MediaFire or DeviantArt.`;
731
- element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContent));
732
- element.setAttribute('download', `${currentPack.replace(/\s+/g, '_')}_Info.txt`);
733
-
734
- element.style.display = 'none';
735
- document.body.appendChild(element);
736
-
737
- element.click();
738
-
739
- document.body.removeChild(element);
740
- closeModal();
741
- }
742
 
743
- // --- SCROLL FUNCTION ---
744
- function scrollToGallery() {
745
- document.getElementById('gallery').scrollIntoView({ behavior: 'smooth' });
746
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
747
  </script>
748
  </body>
749
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DeviantArt Archiver | MediaFire Zip Tool</title>
7
+
8
+ <!-- Modern CSS Framework -->
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+
11
+ <!-- Configuration for Tailwind to match original design -->
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ brand: {
18
+ 50: '#f0f9ff',
19
+ 100: '#e0f2fe',
20
+ 500: '#0ea5e9',
21
+ 600: '#0284c7',
22
+ 900: '#0c4a6e',
23
+ }
24
+ },
25
+ animation: {
26
+ 'shimmer': 'shimmer 1.5s infinite',
27
+ },
28
+ keyframes: {
29
+ shimmer: {
30
+ '0%': { transform: 'translateX(-100%)' },
31
+ '100%': { transform: 'translateX(100%)' }
32
+ }
33
+ }
34
+ }
35
+ }
36
  }
37
+ </script>
38
 
39
+ <!-- Icons Library -->
40
+ <script src="https://unpkg.com/@phosphor-icons/web"></script>
 
 
 
 
 
41
 
42
+ <!-- JSZip for Client-side Zipping -->
43
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
44
+ <!-- FileSaver for Downloading the Zip -->
45
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
46
 
47
+ <style>
48
+ /* Custom Styles for nuances not covered by Tailwind utilities */
49
+ body {
50
+ font-family: 'Inter', system-ui, -apple-system, sans-serif;
 
51
  }
52
+
53
+ .glass-panel {
54
+ background: rgba(31, 41, 55, 0.5);
 
 
 
 
 
 
 
 
 
55
  backdrop-filter: blur(12px);
56
+ -webkit-backdrop-filter: blur(12px);
57
+ border: 1px solid rgba(75, 85, 99, 0.4);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
58
  }
59
 
60
+ /* Smooth transitions for inputs */
61
+ .input-group input:focus ~ .icon-highlight,
62
+ .input-group input:not(:placeholder-shown) ~ .icon-highlight {
63
+ color: #0ea5e9;
64
  }
65
 
66
+ /* Toast Notification Animation */
67
+ @keyframes slideInDown {
68
+ from { transform: translate(-50%, -100%); opacity: 0; }
69
+ to { transform: translate(-50%, 20px); opacity: 1; }
70
  }
71
+ @keyframes fadeOut {
72
+ from { opacity: 1; }
73
+ to { opacity: 0; }
 
 
74
  }
75
+ .toast {
76
+ animation: slideInDown 0.3s ease-out forwards;
 
 
 
 
 
 
 
77
  }
78
+ .toast.hiding {
79
+ animation: fadeOut 0.3s ease-in forwards;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
80
  }
81
  </style>
82
  </head>
83
+ <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col selection:bg-brand-500 selection:text-white">
84
 
85
  <!-- Header -->
86
+ <header class="border-b border-gray-800 bg-gray-900/50 backdrop-blur-sm sticky top-0 z-50">
87
+ <div class="container mx-auto px-4 h-16 flex items-center justify-between">
88
+ <div class="flex items-center gap-3">
89
+ <div class="w-9 h-9 bg-gradient-to-br from-brand-500 to-purple-600 rounded-lg flex items-center justify-center font-bold text-white shadow-lg shadow-brand-500/20">
90
+ <i class="ph ph-archive-box text-xl"></i>
91
+ </div>
92
+ <span class="font-semibold text-lg tracking-tight hidden sm:block text-gray-100">DA Zipper</span>
93
+ </div>
 
 
 
 
 
94
 
95
+ <nav class="flex items-center">
96
+ <a
97
+ href="https://huggingface.co/spaces/akhaliq/anycoder"
98
+ target="_blank"
99
+ rel="noopener noreferrer"
100
+ class="text-sm font-medium text-gray-400 hover:text-brand-400 transition-colors duration-200 flex items-center gap-1.5 group"
101
+ >
102
+ Built with anycoder
103
+ <i class="ph ph-arrow-square-out group-hover:translate-x-0.5 transition-transform"></i>
104
+ </a>
105
+ </nav>
106
  </div>
107
  </header>
108
 
109
  <!-- Main Content -->
110
+ <main class="flex-grow container mx-auto px-4 py-8 md:py-12 flex flex-col items-center justify-center">
111
+
112
+ <div class="w-full max-w-2xl">
113
+ <div class="text-center mb-10 space-y-2">
114
+ <h1 class="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-brand-400 via-brand-500 to-purple-500 drop-shadow-sm">
115
+ DeviantArt Archiver
116
+ </h1>
117
+ <p class="text-gray-400 text-lg md:text-base max-w-lg mx-auto leading-relaxed">
118
+ Extract media from DeviantArt links, package them into a secure ZIP, and simulate cloud upload.
119
+ </p>
 
 
 
 
 
 
 
 
 
 
120
  </div>
121
 
122
+ <!-- Downloader Component -->
123
+ <div id="downloader-card" class="glass-panel rounded-2xl p-6 md:p-8 shadow-2xl relative overflow-hidden">
124
+ <!-- Decorative background glow -->
125
+ <div class="absolute -top-24 -right-24 w-48 h-48 bg-brand-500/10 rounded-full blur-3xl pointer-events-none"></div>
126
+ <div class="absolute -bottom-24 -left-24 w-48 h-48 bg-purple-500/10 rounded-full blur-3xl pointer-events-none"></div>
127
+
128
+ <form id="process-form" class="space-y-6 relative z-10">
129
+ <div class="input-group relative">
130
+ <label for="url" class="block text-sm font-medium text-gray-300 mb-2 ml-1">
131
+ DeviantArt Artwork URL
132
+ </label>
133
+ <div class="relative group">
134
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
135
+ <i class="ph ph-link text-gray-500 text-lg icon-highlight transition-colors duration-300"></i>
136
+ </div>
137
+ <input
138
+ type="url"
139
+ id="url"
140
+ placeholder="https://www.deviantart.com/..."
141
+ autocomplete="off"
142
+ class="w-full bg-gray-900/80 border border-gray-600 rounded-lg pl-10 pr-10 py-3.5 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-brand-500/50 focus:border-brand-500 transition-all duration-200"
143
+ />
144
+ <button
145
+ type="button"
146
+ id="clear-btn"
147
+ class="hidden absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-white transition-colors cursor-pointer"
148
+ >
149
+ <i class="ph ph-x-circle text-lg"></i>
150
+ </button>
151
+ </div>
152
+ <p class="mt-2 text-xs text-gray-500 ml-1 flex items-center gap-1">
153
+ <i class="ph ph-info"></i>
154
+ Direct link to the artwork page required.
155
+ </p>
156
+ </div>
157
 
158
+ <button
159
+ type="submit"
160
+ id="submit-btn"
161
+ class="w-full group relative overflow-hidden bg-gradient-to-r from-brand-600 to-brand-500 hover:from-brand-500 hover:to-brand-400 text-white font-semibold py-3.5 px-6 rounded-lg shadow-lg shadow-brand-500/25 transform hover:-translate-y-0.5 transition-all duration-200"
162
+ >
163
+ <span class="relative z-10 flex items-center justify-center gap-2">
164
+ <i class="ph ph-download-simple text-lg"></i>
165
+ <span id="btn-text">Download & Zip</span>
166
+ </span>
167
+ <!-- Button shine effect -->
168
+ <div class="absolute top-0 -inset-full h-full w-1/2 z-5 block transform -skew-x-12 bg-gradient-to-r from-transparent to-white opacity-20 group-hover:animate-shimmer" />
169
+ </button>
170
+ </form>
171
+
172
+ <!-- Progress Section -->
173
+ <div id="progress-section" class="hidden mt-8 space-y-5">
174
+ <div class="flex items-center justify-between text-sm">
175
+ <span class="text-gray-400 font-medium">Processing Status</span>
176
+ <span id="status-text" class="text-brand-400 font-bold animate-pulse">Initializing...</span>
177
+ </div>
178
+
179
+ <!-- Progress Bar -->
180
+ <div class="h-2.5 w-full bg-gray-700/50 rounded-full overflow-hidden relative">
181
+ <div id="progress-bar" class="h-full bg-gradient-to-r from-brand-600 via-purple-500 to-brand-400 w-0 transition-all duration-500 ease-out rounded-full shadow-[0_0_10px_rgba(14,165,233,0.5)]"></div>
182
+ </div>
183
 
184
+ <!-- Step Indicators -->
185
+ <div class="grid grid-cols-4 gap-2 text-xs text-center text-gray-500 font-medium uppercase tracking-wider">
186
+ <div class="step" id="step-1">Fetch</div>
187
+ <div class="step" id="step-2">Pack</div>
188
+ <div class="step" id="step-3">Upload</div>
189
+ <div class="step" id="step-4">Done</div>
190
+ </div>
 
 
 
 
 
191
  </div>
 
 
192
 
193
+ <!-- Result Section -->
194
+ <div id="result-section" class="hidden mt-8 animate-[fadeIn_0.5s_ease-out]">
195
+ <div class="p-4 bg-green-900/10 border border-green-700/30 rounded-xl flex flex-col sm:flex-row items-start sm:items-center gap-4">
196
+ <div class="flex-shrink-0 w-10 h-10 rounded-full bg-green-500/10 flex items-center justify-center">
197
+ <i class="ph ph-check-circle text-2xl text-green-400"></i>
198
+ </div>
199
+ <div class="flex-grow text-center sm:text-left">
200
+ <h4 class="text-green-400 font-semibold mb-0.5">Archive Ready</h4>
201
+ <p class="text-sm text-gray-400">
202
+ ZIP file generated successfully.
203
+ </p>
204
+ </div>
205
+ <a
206
+ id="download-link"
207
+ href="#"
208
+ class="flex-shrink-0 inline-flex items-center gap-2 bg-green-600 hover:bg-green-500 text-white text-sm font-bold py-2.5 px-5 rounded-lg transition-all shadow-lg shadow-green-900/20 active:scale-95"
209
+ >
210
+ <i class="ph ph-file-archive text-lg"></i>
211
+ Download ZIP
212
+ </a>
213
+ </div>
214
  </div>
 
 
215
 
 
 
 
 
 
216
  </div>
 
217
  </div>
218
+ </main>
219
 
220
+ <!-- Footer -->
221
+ <footer class="border-t border-gray-800 bg-gray-900 py-6 mt-auto">
222
+ <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
223
+ <p>&copy; <span id="year"></span> DeviantArt Tool. All rights reserved.</p>
224
+ </div>
225
+ </footer>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
226
 
227
+ <!-- Toast Container -->
228
+ <div id="toast-container" class="fixed top-4 left-1/2 transform -translate-x-1/2 z-[100] flex flex-col gap-2 pointer-events-none"></div>
229
 
230
+ <script>
231
+ // --- Logic Implementation ---
232
+
233
+ document.addEventListener('DOMContentLoaded', () => {
234
+ // Set Year
235
+ document.getElementById('year').textContent = new Date().getFullYear();
236
+
237
+ // Elements
238
+ const form = document.getElementById('process-form');
239
+ const urlInput = document.getElementById('url');
240
+ const clearBtn = document.getElementById('clear-btn');
241
+ const submitBtn = document.getElementById('submit-btn');
242
+ const btnText = document.getElementById('btn-text');
 
 
 
243
 
244
+ const progressSection = document.getElementById('progress-section');
245
+ const progressBar = document.getElementById('progress-bar');
246
+ const statusText = document.getElementById('status-text');
 
247
 
248
+ const resultSection = document.getElementById('result-section');
249
+ const downloadLink = document.getElementById('download-link');
 
 
 
 
250
 
251
+ // State
252
+ let isProcessing = false;
253
+ let generatedBlob = null;
 
254
 
255
+ // Input Handling
256
+ urlInput.addEventListener('input', (e) => {
257
+ if (e.target.value.length > 0) {
258
+ clearBtn.classList.remove('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
259
  } else {
260
+ clearBtn.classList.add('hidden');
261
+ }
262
+ });
263
+
264
+ clearBtn.addEventListener('click', () => {
265
+ urlInput.value = '';
266
+ urlInput.focus();
267
+ clearBtn.classList.add('hidden');
268
+ resetUI();
269
+ });
270
+
271
+ // Validation Helper
272
+ const isValidUrl = (string) => {
273
+ try {
274
+ const url = new URL(string);
275
+ return url.hostname.includes('deviantart.com');
276
+ } catch (_) {
277
+ return false;
278
  }
279
+ };
280
+
281
+ const showToast = (message, type = 'error') => {
282
+ const container = document.getElementById('toast-container');
283
+ const toast = document.createElement('div');
284
 
285
+ const bgColor = type === 'error' ? 'bg-red-500' : 'bg-green-500';
286
+ const icon = type === 'error' ? 'ph-warning-circle' : 'ph-check-circle';
287
+
288
+ toast.className = `toast pointer-events-auto flex items-center gap-3 px-4 py-3 rounded-lg shadow-xl text-white font-medium text-sm ${bgColor}`;
289
+ toast.innerHTML = `
290
+ <i class="ph ${icon} text-lg"></i>
291
+ <span>${message}</span>
292
+ `;
293
+
294
+ container.appendChild(toast);
295
+
296
+ // Remove after 3 seconds
297
+ setTimeout(() => {
298
+ toast.classList.add('hiding');
299
+ toast.addEventListener('animationend', () => toast.remove());
300
+ }, 3000);
301
+ };
302
+
303
+ const resetUI = () => {
304
+ resultSection.classList.add('hidden');
305
+ progressSection.classList.add('hidden');
306
+ progressBar.style.width = '0%';
307
+ document.querySelectorAll('.step').forEach(el => el.classList.remove('text-brand-400', 'text-white'));
308
+ generatedBlob = null;
309
+ };
310
+
311
+ const updateProgress = (percent, status, stepIndex) => {
312
+ progressBar.style.width = `${percent}%`;
313
+ statusText.textContent = status;
314
+
315
+ if (stepIndex !== null) {
316
+ const step = document.getElementById(`step-${stepIndex}`);
317
+ if (step) {
318
+ step.classList.add('text-brand-400');
319
+ // Make previous steps white
320
+ for(let i=1; i<stepIndex; i++) {
321
+ document.getElementById(`step-${i}`).classList.remove('text-brand-400');
322
+ document.getElementById(`step-${i}`).classList.add('text-white');
323
+ }
324
+ }
325
+ }
326
+ };
327
 
328
+ // --- Main Process Logic ---
329
+ form.addEventListener('submit', async (e) => {
330
+ e.preventDefault();
331
+ const url = urlInput.value.trim();
332
 
333
+ if (!url) {
334
+ showToast('Please enter a DeviantArt URL');
335
+ return;
336
+ }
 
 
 
 
 
 
 
 
 
 
 
337
 
338
+ if (!isValidUrl(url)) {
339
+ showToast('Please enter a valid DeviantArt URL');
340
+ return;
341
+ }
342
+
343
+ if (isProcessing) return;
344
+ isProcessing = true;
345
+
346
+ // UI Updates
347
+ submitBtn.disabled = true;
348
+ submitBtn.classList.add('opacity-75', 'cursor-not-allowed');
349
+ btnText.textContent = 'Processing...';
350
+ resetUI();
351
+ progressSection.classList.remove('hidden');
352
+
353
+ try {
354
+ // --- SIMULATION STEP 1: Fetch & Analyze ---
355
+ updateProgress(15, 'Connecting to DeviantArt...', 1);
356
+ await new Promise(r => setTimeout(r, 1000)); // Simulate network
357
+
358
+ updateProgress(35, 'Analyzing media content...', 1);
359
+ await new Promise(r => setTimeout(r, 800));
360
+
361
+ // --- SIMULATION STEP 2: Zipping ---
362
+ updateProgress(50, 'Compressing images...', 2);
363
+ await new Promise(r => setTimeout(r, 600));
364
+
365
+ // Generate a REAL Zip file client-side
366
+ const zip = new JSZip();
367
+
368
+ // Add a text file with metadata
369
+ zip.file("source_url.txt", `Original URL: ${url}\nDownloaded: ${new Date().toLocaleString()}`);
370
+
371
+ // Add a placeholder image (Base64) to simulate content
372
+ // In a real backend scenario, this would be the actual downloaded image
373
+ const mockImageContent = "Mock Image Content for Demo";
374
+ zip.file("artwork_info.txt", "Due to browser security (CORS), we cannot scrape external sites directly from a purely client-side HTML file without a proxy. This file proves the ZIP generation works.");
375
+
376
+ const content = await zip.generateAsync({type:"blob"});
377
+ generatedBlob = content;
378
+
379
+ updateProgress(80, 'Generating ZIP archive...', 2);
380
+ await new Promise(r => setTimeout(r, 800));
381
+
382
+ // --- SIMULATION STEP 3: Upload ---
383
+ updateProgress(90, 'Uploading to MediaFire...', 3);
384
+ await new Promise(r => setTimeout(r, 1200));
385
+
386
+ // --- FINISH ---
387
+ updateProgress(100, 'Complete!', 4);
388
+ document.getElementById('step-4').classList.add('text-green-400');
389
+
390
+ // Show Result
391
+ progressSection.classList.add('hidden');
392
+ resultSection.classList.remove('hidden');
393
+
394
+ // Setup Download Link
395
+ const downloadUrl = URL.createObjectURL(generatedBlob);
396
+ downloadLink.href = downloadUrl;
397
+ downloadLink.download = `deviantart_archive_${Date.now()}.zip`;
398
+
399
+ showToast('ZIP file generated successfully!', 'success');
400
+
401
+ } catch (error) {
402
+ console.error(error);
403
+ showToast('An error occurred during processing.');
404
+ statusText.textContent = 'Error occurred';
405
+ statusText.classList.add('text-red-500');
406
+ } finally {
407
+ isProcessing = false;
408
+ submitBtn.disabled = false;
409
+ submitBtn.classList.remove('opacity-75', 'cursor-not-allowed');
410
+ btnText.textContent = 'Download & Zip';
411
+ }
412
+ });
413
+ });
414
  </script>
415
  </body>
416
  </html>