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

    <meta content="Univerter" property="og:title" />
    <meta content="Univerter is a web video downloader & converter for Youtube, TikTok, Twitter, and more." 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">
            <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</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 value="mkv">.mkv</option>
                        <option disabled>Audio Formats</option>
                        <option value="mp3" selected>.mp3</option>
                        <option value="wav">.wav</option>
                        <option value="opus">.ogx</option>
                    </select>
                </div>
            </div>
            <!-- <br> -->
            <!-- <input style="display: inline-block" type="checkbox" id="adv"> -->
            <!-- <p style="display: inline-block" for="adv">Enable Advanced options? (Beta)</p> -->
    
            <br>
            <input type="submit">
        </form>
        <br>
        
        <p>
                Powered by <a target="_blank" href="https://github.com/yt-dlp/yt-dlp/">yt-dlp</a>
                <br>
                Inspired by <a href="https://cobalt.tools">Cobalt</a><br>
            </p>
    </div>
</body>

</html>