<!DOCTYPE html>
<html lang="en">

<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">

    <link rel="stylesheet" href="./style.css">

    <script src="./js/jquery.js"></script>
    <script src="./js/js-cookie.js"></script>
    <script src="./js/main.js"></script>

    <meta content="Univerter" property="og:title" />
    <meta content="Univerter is an extremely fast web downloader for Youtube videos." property="og:description" />
    <meta content="https://univerter.dev/Images/Univerter%20Logo.png" property="og:image" />
    <meta content="#a200ff" data-react-helmet="true" name="theme-color" />

    <title>Univerter</title>
</head>

<body>
    <div class="mainDiv">
        <h1>Univerter<hr></h1>

        <form action="/download" method="get" target="_blank">
            <p style="margin-bottom: 1px;">Video URL:</p>
            <input required type="url" id="url" placeholder="Enter URL" name="url">
    
            <div class="grid-container">
                <div class="grid-child">
                    <p>Quality:</p>
                    <select required id="quality" name="quality">
                        <option value="144">144p</option>
                        <option value="240">240p</option>
                        <option value="360">360p</option>
                        <option value="480">480p</option>
                        <option value="720" selected>720p</option>
                        <option value="1080">1080p</option>
                        <option value="1440">1440p (2k)</option>
                        <option value="2160">2160p (4k)</option>
                    </select>
                </div>
                
                <div class="grid-child">
                    <p>Format:</p>
                    <select required id="format" name="format">
                        <option disabled>Video Formats</option>
                        <option value="mp4">.mp4</option>
                        <option disabled>Audio Formats</option>
                        <option value="mp3" selected>.mp3</option>
                    </select>
                </div>
            </div>
            <div id="audioOnly">
                <input style="display: inline-block" type="checkbox" id="trim" name="trimAudio">
                <p style="display: inline-block" for="trim">Trim Silence (mp3)</p>
            </div>
            <div id="videoAndAudio">
                <!-- <input style="display: inline-block" type="checkbox" id="trim" checked>
                <p style="display: inline-block" for="trim">Trim BALLS (mp4 only)</p> -->
            </div>
            <div id="either">
                <input style="display: inline-block" type="checkbox" id="playInBrowers" name="playInBrowser">
                <p style="display: inline-block" for="trim">Play in browser</p>
            </div>
    
            <input type="submit" value="Begin Download">
        </form>
        <!-- <br> -->
        
        <p>Inspired by <a href="https://cobalt.tools">Cobalt</a></p>
        <p>Developed by <a href="https://violets-purgatory.dev">Violet</a></p>
    </div>
</body>

</html>