mirror of
https://github.com/arcodange-org/mediabunny.git
synced 2026-09-27 19:03:46 +02:00
71 lines
2.9 KiB
HTML
71 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" translate="no">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Crop example | Mediabunny</title>
|
|
<script type="module" src="./../base.ts"></script>
|
|
<script type="module" src="./crop.ts"></script>
|
|
<link rel="stylesheet" href="../base.css">
|
|
<link rel="icon" href="../../docs/public/mediabunny-logo.svg">
|
|
</head>
|
|
|
|
<body class="flex flex-col items-center py-10 bg-gray-50 text-gray-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
|
|
<h1 class="text-3xl font-bold text-green-500 text-center">Crop example</h1>
|
|
<p class="max-w-lg text-center">Select or drop a video file and specify the crop dimensions.</p>
|
|
|
|
<div class="flex flex-col items-center gap-1">
|
|
<div class="flex gap-2 mt-4">
|
|
<button id="select-file" class="rounded-lg bg-gray-200 dark:bg-zinc-750 hover:bg-gray-300 dark:hover:bg-zinc-700 px-5 py-2">
|
|
Select local file
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex gap-2 mt-4">
|
|
<button id="crop-button" class="rounded-lg bg-green-500 hover:bg-green-600 text-white px-5 py-2" disabled>
|
|
Crop Video
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4 mt-4">
|
|
<div class="flex flex-col gap-1">
|
|
<label for="crop-top" class="text-sm">Top</label>
|
|
<input type="number" id="crop-top" value="0" class="rounded-lg bg-gray-200 dark:bg-zinc-750 px-3 py-1">
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<label for="crop-left" class="text-sm">Left</label>
|
|
<input type="number" id="crop-left" value="0" class="rounded-lg bg-gray-200 dark:bg-zinc-750 px-3 py-1">
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<label for="crop-width" class="text-sm">Width</label>
|
|
<input type="number" id="crop-width" value="300" class="rounded-lg bg-gray-200 dark:bg-zinc-750 px-3 py-1">
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<label for="crop-height" class="text-sm">Height</label>
|
|
<input type="number" id="crop-height" value="300" class="rounded-lg bg-gray-200 dark:bg-zinc-750 px-3 py-1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-xs opacity-60 mt-2" id="file-name"></p>
|
|
<hr class="w-full max-w-96 my-4 border-gray-300 dark:border-zinc-700" style="display: none;">
|
|
<p id="error-element" class="text-red-500"></p>
|
|
<div id="output-container"></div>
|
|
|
|
<a href="/" class="fixed top-0 left-0 flex gap-2 py-2 px-5 items-center">
|
|
<img src="../../docs/public/mediabunny-logo.svg" class="size-6">
|
|
<p class="text-sm font-medium">Mediabunny</p>
|
|
</a>
|
|
|
|
<a
|
|
href="https://github.com/Vanilagy/mediabunny/tree/main/examples/crop"
|
|
target="_blank"
|
|
class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-gray-200 dark:bg-zinc-750 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-bl-xl"
|
|
>
|
|
<img src="../../docs/assets/github-mark.svg" class="size-6 dark:invert">
|
|
<p>View source code</p>
|
|
</a>
|
|
</body>
|
|
</html>
|