Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Unzip Online</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| <!-- JSZip library --> | |
| <script defer src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> | |
| <script defer src="script.js"></script> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <h1>Unzip Online</h1> | |
| <p class="subtitle">Extract and preview files from ZIP archives in your browser.</p> | |
| </header> | |
| <main class="container"> | |
| <section class="panel"> | |
| <div id="dropZone" class="drop-zone" tabindex="0" aria-label="Drop ZIP file here or click to choose"> | |
| <div class="drop-zone__content"> | |
| <div class="icon">📦</div> | |
| <div class="primary">Drag & Drop your ZIP file here</div> | |
| <div class="secondary">or</div> | |
| <label for="fileInput" class="btn">Choose File</label> | |
| <input id="fileInput" type="file" accept=".zip,application/zip,application/x-zip-compressed" hidden /> | |
| <div class="hint">Only .zip files are supported</div> | |
| </div> | |
| </div> | |
| <div class="controls"> | |
| <input id="searchInput" class="input" type="search" placeholder="Search files..." /> | |
| <button id="clearBtn" class="btn btn-secondary" disabled>Clear</button> | |
| <button id="downloadAllBtn" class="btn btn-primary" disabled>Download All</button> | |
| </div> | |
| </section> | |
| <section class="panel"> | |
| <div id="status" class="status">No file loaded.</div> | |
| <div id="progress" class="progress" aria-hidden="true"> | |
| <div id="progressBar" class="progress__bar" style="width:0%"></div> | |
| </div> | |
| <div class="meta"> | |
| <span id="fileName"></span> | |
| <span id="fileSize"></span> | |
| </div> | |
| </section> | |
| <section class="panel"> | |
| <div class="panel-header"> | |
| <h2>Files</h2> | |
| <span id="count" class="count">0</span> | |
| </div> | |
| <ul id="fileList" class="file-list" aria-live="polite"></ul> | |
| </section> | |
| <section id="previewSection" class="panel preview" hidden> | |
| <div class="panel-header"> | |
| <h2>Preview</h2> | |
| <button id="closePreviewBtn" class="btn btn-secondary">Close Preview</button> | |
| </div> | |
| <div id="previewContent" class="preview__content"></div> | |
| </section> | |
| </main> | |
| <footer class="footer"> | |
| <small>All processing is done locally in your browser. No files are uploaded.</small> | |
| </footer> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |