unziponline / index.html
Felguk's picture
Create a unzip online using JSZIP library
228425f verified
<!DOCTYPE html>
<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>