Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Unzip Alchemist - Transform Archives Instantly</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f97316'%3E%3Cpath d='M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z'/%3E%3C/svg%3E"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> | |
| </head> | |
| <body class="bg-zinc-950 text-zinc-100 min-h-screen"> | |
| <app-navbar></app-navbar> | |
| <main class="container mx-auto px-4 py-8 max-w-7xl"> | |
| <!-- Hero Section --> | |
| <section class="text-center py-12 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-orange-500/10 via-zinc-900/5 to-transparent pointer-events-none"></div> | |
| <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-orange-400 via-orange-500 to-orange-600 bg-clip-text text-transparent animate-gradient"> | |
| Unzip Alchemist | |
| </h1> | |
| <p class="text-xl md:text-2xl text-zinc-400 mb-8 max-w-2xl mx-auto"> | |
| Transform your archives into pure digital gold with our enchanted extraction engine | |
| </p> | |
| <!-- Stats --> | |
| <div class="flex justify-center gap-8 mb-12"> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-orange-400" id="filesProcessed">0</div> | |
| <div class="text-sm text-zinc-500">Files Extracted</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-orange-400" id="totalSize">0MB</div> | |
| <div class="text-sm text-zinc-500">Total Size</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Upload Zone --> | |
| <section class="mb-12"> | |
| <div id="dropZone" class="relative group"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-orange-500 via-orange-600 to-orange-500 rounded-3xl blur-xl opacity-20 group-hover:opacity-30 transition-all duration-500"></div> | |
| <div class="relative bg-zinc-900/50 backdrop-blur-lg border-2 border-dashed border-zinc-700 rounded-3xl p-16 text-center transition-all duration-300 hover:border-orange-500 hover:bg-zinc-900/70"> | |
| <div class="mb-6"> | |
| <div class="mx-auto w-24 h-24 bg-zinc-800 rounded-full flex items-center justify-center mb-4 group-hover:bg-zinc-700 transition-colors"> | |
| <i data-feather="archive" class="w-12 h-12 text-orange-400 group-hover:text-orange-300 transition-colors"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-2">Drop your mystical archive here</h3> | |
| <p class="text-zinc-400 mb-6">or click to browse for .zip, .rar, .7z files</p> | |
| <input type="file" id="fileInput" accept=".zip,.rar,.7z" class="hidden"> | |
| <button id="browseBtn" class="bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white px-8 py-3 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg"> | |
| <i data-feather="folder-open" class="w-5 h-5 inline mr-2"></i> | |
| Browse Files | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Progress Section --> | |
| <section id="progressSection" class="hidden mb-8"> | |
| <div class="bg-zinc-900/50 backdrop-blur-lg rounded-2xl p-6 border border-zinc-800"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-xl font-semibold flex items-center gap-2"> | |
| <i data-feather="loader" class="w-5 h-5 text-orange-400 animate-spin"></i> | |
| Extracting Magic | |
| </h3> | |
| <span id="progressPercent" class="text-orange-400 font-bold">0%</span> | |
| </div> | |
| <div class="w-full bg-zinc-800 rounded-full h-3 overflow-hidden"> | |
| <div id="progressBar" class="h-full bg-gradient-to-r from-orange-500 to-orange-600 transition-all duration-300" style="width: 0%"></div> | |
| </div> | |
| <p id="progressText" class="text-sm text-zinc-500 mt-2">Preparing extraction...</p> | |
| </div> | |
| </section> | |
| <!-- File List Section --> | |
| <section id="fileListSection" class="hidden"> | |
| <div class="bg-zinc-900/50 backdrop-blur-lg rounded-2xl p-6 border border-zinc-800"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4"> | |
| <h3 class="text-2xl font-semibold flex items-center gap-2"> | |
| <i data-feather="file-text" class="w-6 h-6 text-orange-400"></i> | |
| Extracted Files | |
| </h3> | |
| <div class="flex gap-3"> | |
| <button id="downloadAllBtn" class="bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white px-6 py-2 rounded-lg font-semibold transition-all duration-300 flex items-center gap-2"> | |
| <i data-feather="download" class="w-4 h-4"></i> | |
| Download | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |