2023-09-11 01:46:14 +02:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
2023-09-13 10:18:54 +02:00
< meta name = "robots" content = "follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2023-09-14 21:26:06 +02:00
< meta name = "description" content = "Viddl is the fastest tool for you Download videos and music in full quality for free. Save your memories and your favorite videos and clips from online platforms" >
2023-09-13 10:18:54 +02:00
< meta name = "keywords" content = "Download, Youtube, yt-dlp, MP3, Convert" >
2023-09-13 11:02:45 +02:00
< link rel = "stylesheet" href = "/static/static/css/pico.min.css" >
2023-09-14 21:26:06 +02:00
< link rel = "icon" type = "image/x-icon" href = "/assets/images/favicon.ico" >
2023-09-16 12:49:54 +02:00
< link rel = "canonical" href = "https://viddl.cc" / >
2023-09-11 01:46:14 +02:00
< script src = "https://unpkg.com/htmx.org@1.9.5" > < / script >
2023-09-13 10:37:28 +02:00
< title > Viddle your fiddle< / title >
2023-09-11 01:46:14 +02:00
< / head >
< main class = "container" >
2023-09-16 04:23:18 +02:00
< article class = "grid" >
< div >
< hgroup >
< h3 >
Viddle your fiddle
< h4 > Grab your videos for safe keeping!< / h4 >
< / h3 >
< / hgroup >
2023-09-11 01:46:14 +02:00
< form hx-post = "/download" hx-target = "#get-btn" hx-swap = "outerHTML" hx-indicator = "#progress" >
< div class = "grid" >
2023-09-13 12:13:13 +02:00
< div hx-target = "this" hx-swap = "outerHTML" >
2023-09-21 15:03:42 +02:00
< label > Link
2023-09-13 12:13:13 +02:00
< input
type="url" id="URL" name="URL"
2023-09-13 15:16:29 +02:00
hx-post="/valid-link"
hx-indicator="#url-validation-progress" required>
2023-09-13 12:13:13 +02:00
< / label >
< progress class = "htmx-indicator" id = "url-validation-progress" > < / progress >
< / div >
< label > Format
< select required >
{{ range .Formats }} < option > {{ .VideoRes }}< / option > {{ end }}
< / select >
< / label >
2023-09-11 01:46:14 +02:00
< / div >
2023-09-13 15:16:29 +02:00
<!-- Checkboxes -->
< fieldset >
< label for = "terms" >
< input type = "checkbox" id = "toaudio" name = "toaudio" disabled >
Convert to MP3 audio
< / label >
< / fieldset >
2023-09-21 15:03:42 +02:00
< button class = "outline" id = "get-btn" role = "button" > Get
2023-09-11 01:46:14 +02:00
<!-- <a class="htmx - indicator" href="#" aria - busy="true"></a> -->
< / button >
2023-09-13 15:16:29 +02:00
2023-09-11 01:46:14 +02:00
< / form >
< progress class = "htmx-indicator" id = "progress" > < / progress >
2023-09-16 04:23:18 +02:00
< / div >
2023-09-11 01:46:14 +02:00
< / main >
< / html >
