34 lines
1.5 KiB
HTML
34 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Client-Side Media Cruncher</title>
|
|
<link rel="stylesheet" href="../shared.css">
|
|
</head>
|
|
<body class="theme-dark">
|
|
<main class="shell">
|
|
<nav class="topline"><a href="../">All demos</a><a href="/demos.php">Website catalog</a></nav>
|
|
<section class="hero">
|
|
<p class="kicker">Demo 01</p>
|
|
<h1>The Client-Side Media Cruncher</h1>
|
|
<p>Drop in a large image and convert or compress it locally. The browser does the work; the server sees nothing.</p>
|
|
</section>
|
|
<section class="panel">
|
|
<label class="drop-zone" for="media-input" id="drop-zone">
|
|
<strong>Drop images here</strong>
|
|
<span>WebP, JPEG, and PNG output. Video is a future Rust/Wasm codec target.</span>
|
|
</label>
|
|
<input id="media-input" type="file" accept="image/*,video/*" multiple>
|
|
<div class="controls">
|
|
<label>Output <select id="output-format"><option value="image/webp">WebP</option><option value="image/jpeg">JPEG</option><option value="image/png">PNG</option></select></label>
|
|
<label>Quality <input id="quality" type="range" min="35" max="95" value="78"><output id="quality-output">78%</output></label>
|
|
<label>Max edge <input id="max-edge" type="number" min="320" max="8000" step="160" value="1920"></label>
|
|
</div>
|
|
<div id="cruncher-results"><p class="note">Drop a file to see local compression results.</p></div>
|
|
</section>
|
|
</main>
|
|
<script src="media-cruncher.js"></script>
|
|
<script src="../theme.js"></script>
|
|
</body>
|
|
</html>
|