@omnimedia/omnitool
Version:
open source video processing tools
106 lines (87 loc) • 2.55 kB
HTML
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="darkreader-lock"/>
<title>omnitool</title>
<style>
@layer vars, basics, page;
@layer vars {
:root {
--link: cyan;
--color: #fffa;
--background: #111;
}
}
@layer basics {
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
@layer page {
html {
font-size: 10px;
color: var(--color);
background: var(--background);
}
body {
padding: 2em;
}
.results {
margin-top: 1em;
display: flex;
flex-direction: column;
gap: 1em;
> div {
font-size: 1.5em;
border: 1px solid color-mix(in lch, transparent, var(--color) 20%);
padding: 1em;
}
canvas {
width: 20em;
}
}
#filmstrip {
display: flex;
overflow-x: scroll;
}
}
</style>
<script type=module src="demo/demo.bundle.min.js?v=7ebfc5a6da44"></script>
<meta name="theme-color" content="#3cff9c">
<meta property="og:type" content="website">
<meta property="og:site_name" content="omnitool.omniclip.app">
<meta property="og:title" content="omnitool">
<meta property="og:description" content="video processing toolkit">
<meta property="og:image" content="https://omnitool.omniclip.app/assets/favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Share+Tech&display=swap" rel="stylesheet">
</head>
<body>
<section>
<h1>Omnitool <small>v1.1.0-4</small></h1>
<button class=fetch>fetch</button>
<button class="import">import</button>
<div class=results></div>
<div class=filmstrip-demo>
<label for="viewable-range">viewable range:</label>
<input type="range" min="0" max="100" step="1" value="10" class="range" id="viewable-range" name="viewable-range">
<div class="range-view"></div>
<label for="range-size">viewable range size:</label>
<input type="range" class="range-size" min="0.1" max="10" step="0.1" value="0.5" id="range-size" name="range-size">
<label for="frequency">frequency:</label>
<input type="range" class="frequency" min="0.1" max="120" step="0.1" value="10" id="frequency" name="frequency">
<div class="frequency-view">10 (fps)</div>
<div id=filmstrip></div>
</div>
<div class=waveform-demo>
<label for="width">width:</label>
<input class="width" id="width" name="width" type="range" min="100" max="1000000" value="1000" />
</div>
</section>
</body>
</html>