apps
/
ytdl-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

Clean up html formatting

This commit is contained in:
Evan Fiordeliso 2023-04-14 22:01:36 -04:00
parent 733a8f4d7a
commit 53a24c4726
4 changed files with 76 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
web/views/download.html
View File

@ -2,37 +2,29 @@
<h1>Download Video</h1> <h1>Download Video</h1>
<h2 class="fs-4 text-muted">{{.Meta.Title}}</h2> <h2 class="fs-4 text-muted">{{.Meta.Title}}</h2>
<p style="font-size: 0.85rem">{{.Url}}</p> <p style="font-size: 0.85rem">{{.Url}}</p>
<img <img src="{{.Meta.Thumbnail}}" alt="{{.Meta.Title}}" style="max-height: 25rem; max-width: 100%" />
src="{{.Meta.Thumbnail}}" <a href="{{.BasePath}}/" class="btn btn-secondary btn-sm mt-3" style="width: 30rem; max-width: 100%">
alt="{{.Meta.Title}}" Download Another Video
style="max-height: 25rem; max-width: 100%" </a>
/>
<a
href="{{.BasePath}}/"
class="btn btn-secondary btn-sm mt-3"
style="width: 30rem; max-width: 100%"
>Download Another Video</a
>
</div> </div>
{{$id := .Meta.ID}} {{$url := .Url}} {{$basePath := .BasePath}} {{range
.Formats}} {{$id := .Meta.ID}}
<div class="d-flex gap-3 mt-5 align-items-center"> {{$url := .Url}}
{{$basePath := .BasePath}}
<div class="d-flex flex-column gap-4 mt-5">
{{range .Formats}}
<div class="d-flex gap-3 align-items-center">
<div style="width: 10rem">{{.Format}}</div> <div style="width: 10rem">{{.Format}}</div>
<div class="flex-grow-1 d-flex gap-3"> <div class="flex-grow-1 d-flex gap-3">
<a <a class="btn btn-primary flex-grow-1" download="{{$id}}-{{.Resolution}}.{{.Ext}}" P href="{{.Url}}">
class="btn btn-primary flex-grow-1"
download="{{$id}}-{{.Resolution}}.{{.Ext}}"
href="{{.Url}}"
>
Download (direct) Download (direct)
</a> </a>
<a <a class="btn btn-primary flex-grow-1" download="{{$id}}-{{.Resolution}}.{{.Ext}}"
class="btn btn-primary flex-grow-1" href="{{$basePath}}/download/proxy?url={{queryEscape $url}}&format={{.FormatID}}">
download="{{$id}}-{{.Resolution}}.{{.Ext}}"
href="{{$basePath}}/download/proxy?url={{queryEscape $url}}&format={{.FormatID}}"
>
Download (proxied) Download (proxied)
</a> </a>
</div> </div>
</div> </div>
{{end}} {{end}}
</div>

24
web/views/index.html
View File

@ -8,25 +8,11 @@
<label for="url" class="form-label visually-hidden">Url</label> <label for="url" class="form-label visually-hidden">Url</label>
<div class="input-group"> <div class="input-group">
<input type="url" name="url" id="url" class="form-control" required /> <input type="url" name="url" id="url" class="form-control" required />
<button <button id="paste-button" class="btn btn-outline-secondary" type="button" title="Paste">
id="paste-button" <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="btn btn-outline-secondary" style="width: 1.5rem; height: 1.5rem">
type="button" <path stroke-linecap="round" stroke-linejoin="round"
title="Paste" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
style="width: 1.5rem; height: 1.5rem"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
/>
</svg> </svg>
</button> </button>
</div> </div>

41
web/views/layouts/main.html
View File

@ -1,38 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>YTDL Web</title> <title>YTDL Web</title>
<link <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous" />
rel="stylesheet" <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastr@2.1.4/build/toastr.min.css"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" integrity="sha256-R91pD48xW+oHbpJYGn5xR0Q7tMhH4xOrWn1QqMRINtA=" crossorigin="anonymous" />
crossorigin="anonymous" <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
/> integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"
<link defer></script>
rel="stylesheet" <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js" defer></script>
href="https://cdn.jsdelivr.net/npm/toastr@2.1.4/build/toastr.min.css" <script src="https://cdn.jsdelivr.net/npm/toastr@2.1.4/build/toastr.min.js"
integrity="sha256-R91pD48xW+oHbpJYGn5xR0Q7tMhH4xOrWn1QqMRINtA=" integrity="sha256-Hgwq1OBpJ276HUP9H3VJkSv9ZCGRGQN+JldPJ8pNcUM=" crossorigin="anonymous" defer></script>
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
crossorigin="anonymous"
defer
></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"
defer
></script>
<script
src="https://cdn.jsdelivr.net/npm/toastr@2.1.4/build/toastr.min.js"
integrity="sha256-Hgwq1OBpJ276HUP9H3VJkSv9ZCGRGQN+JldPJ8pNcUM="
crossorigin="anonymous"
defer
></script>
<style> <style>
#toast-container>div { #toast-container>div {
-moz-box-shadow: none !important; -moz-box-shadow: none !important;
@ -44,6 +27,7 @@
} }
</style> </style>
</head> </head>
<body data-bs-theme="dark"> <body data-bs-theme="dark">
{{template "views/partials/navbar" .}} {{template "views/partials/navbar" .}}
<main class="container my-5">{{embed}}</main> <main class="container my-5">{{embed}}</main>
@ -60,4 +44,5 @@
}); });
</script> </script>
</body> </body>
</html> </html>