71 lines
3.5 KiB
HTML
71 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Oki.cx - Youtube Converter</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
|
|
<script src="https://unpkg.com/htmx.org@1.7.0" integrity="sha384-EzBXYPt0/T6gxNp0nuPtLkmRpmDBbjg6WmCUZRLXBBwYYmwAUxzlSGej0ARHX0Bo" crossorigin="anonymous" defer></script>
|
|
<script src="//code.iconify.design/1/1.0.6/iconify.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="padding p-4 has-text-centered">
|
|
<p class="title is-1">Oki.cx Youtube Converter</p>
|
|
<p class="subtitle is-4">Free and <a href="https://gitlab.oki.cx/mrpvtdagger/oki.cx-youtube-converter">Open Source <span class="iconify" data-icon="mdi-gitlab"></span> </a></br> With a <a href="/docs">API</a></br><strong>Personal use only!</strong></p>
|
|
</div>
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="columns is-centered">
|
|
<div class="column is-half">
|
|
<form id="form" action="/" method="post">
|
|
<div class="field has-addons has-addons-center pb pb-4">
|
|
<p class="control">
|
|
<span class="select">
|
|
<select name="media_format">
|
|
<option>MP4</option>
|
|
<option>MP3</option>
|
|
</select>
|
|
</span>
|
|
</p>
|
|
<p class="control is-expanded">
|
|
<input name="link" class="input" type="text" placeholder="URL to Youtube Video">
|
|
</p>
|
|
<p class="control">
|
|
<a id="convert" class="button is-link" onclick="document.getElementById('convert').classList.add('is-loading');document.getElementById('form').submit();">Convert</a>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="columns is-centered">
|
|
<div class="column is-two-fifths">
|
|
<div class="card {{is_hidden}}">
|
|
<div class="card-image">
|
|
<figure class="image is-4by3">
|
|
<img src="{{thumbnail}}">
|
|
</figure>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="content">
|
|
<div class="is-size-4">{{title}}</div>
|
|
<br>
|
|
<div class="is-size-7">{{filename}}</div>
|
|
</div>
|
|
</div>
|
|
<footer class="card-footer">
|
|
<a href="{{url}}" class="card-footer-item" target="_blank" download>Save</a>
|
|
<a href="delete/{{filename}}" class="card-footer-item has-text-danger">Delete from Server</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="padding p-4 subtitle is-7 has-text-centered">By clicking <strong>"Convert"</strong> you agree to using this for personal use only</a>.</p>
|
|
</section>
|
|
</body>
|
|
</html> |