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

56
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}}
<div style="width: 10rem">{{.Format}}</div> {{$basePath := .BasePath}}
<div class="flex-grow-1 d-flex gap-3">
<a <div class="d-flex flex-column gap-4 mt-5">
class="btn btn-primary flex-grow-1" {{range .Formats}}
download="{{$id}}-{{.Resolution}}.{{.Ext}}" <div class="d-flex gap-3 align-items-center">
href="{{.Url}}" <div style="width: 10rem">{{.Format}}</div>
> <div class="flex-grow-1 d-flex gap-3">
Download (direct) <a class="btn btn-primary flex-grow-1" download="{{$id}}-{{.Resolution}}.{{.Ext}}" P href="{{.Url}}">
</a> Download (direct)
<a </a>
class="btn btn-primary flex-grow-1" <a class="btn btn-primary flex-grow-1" download="{{$id}}-{{.Resolution}}.{{.Ext}}"
download="{{$id}}-{{.Resolution}}.{{.Ext}}" href="{{$basePath}}/download/proxy?url={{queryEscape $url}}&format={{.FormatID}}">
href="{{$basePath}}/download/proxy?url={{queryEscape $url}}&format={{.FormatID}}" Download (proxied)
> </a>
Download (proxied) </div>
</a>
</div> </div>
</div> {{end}}
{{end}} </div>

26
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>
@ -37,4 +23,4 @@
{{if .Flash}} {{if .Flash}}
<div class="alert alert-danger mt-4" role="" alert>{{.Flash.message}}</div> <div class="alert alert-danger mt-4" role="" alert>{{.Flash.message}}</div>
{{end}} {{end}}
</form> </form>

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

@ -1,63 +1,48 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" /> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>YTDL Web</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link <title>YTDL Web</title>
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous" />
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastr@2.1.4/build/toastr.min.css"
crossorigin="anonymous" integrity="sha256-R91pD48xW+oHbpJYGn5xR0Q7tMhH4xOrWn1QqMRINtA=" crossorigin="anonymous" />
/> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
<link integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"
rel="stylesheet" defer></script>
href="https://cdn.jsdelivr.net/npm/toastr@2.1.4/build/toastr.min.css" <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js" defer></script>
integrity="sha256-R91pD48xW+oHbpJYGn5xR0Q7tMhH4xOrWn1QqMRINtA=" <script src="https://cdn.jsdelivr.net/npm/toastr@2.1.4/build/toastr.min.js"
crossorigin="anonymous" integrity="sha256-Hgwq1OBpJ276HUP9H3VJkSv9ZCGRGQN+JldPJ8pNcUM=" crossorigin="anonymous" defer></script>
/> <style>
<script #toast-container>div {
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" -moz-box-shadow: none !important;
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" -webkit-box-shadow: none !important;
crossorigin="anonymous" box-shadow: none !important;
defer -ms-filter: none;
></script> filter: none;
<script opacity: 1;
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js" }
defer </style>
></script> </head>
<script
src="https://cdn.jsdelivr.net/npm/toastr@2.1.4/build/toastr.min.js" <body data-bs-theme="dark">
integrity="sha256-Hgwq1OBpJ276HUP9H3VJkSv9ZCGRGQN+JldPJ8pNcUM=" {{template "views/partials/navbar" .}}
crossorigin="anonymous" <main class="container my-5">{{embed}}</main>
defer <script>
></script> const pasteButton = document.getElementById("paste-button");
<style> const urlField = document.getElementById("url");
#toast-container > div { pasteButton.addEventListener("click", async () => {
-moz-box-shadow: none !important; try {
-webkit-box-shadow: none !important; const text = await navigator.clipboard.readText();
box-shadow: none !important; urlField.value = text;
-ms-filter: none; } catch (error) {
filter: none; toastr.error("Failed to paste url from clipboard.");
opacity: 1;
} }
</style> });
</head> </script>
<body data-bs-theme="dark"> </body>
{{template "views/partials/navbar" .}}
<main class="container my-5">{{embed}}</main> </html>
<script>
const pasteButton = document.getElementById("paste-button");
const urlField = document.getElementById("url");
pasteButton.addEventListener("click", async () => {
try {
const text = await navigator.clipboard.readText();
urlField.value = text;
} catch (error) {
toastr.error("Failed to paste url from clipboard.");
}
});
</script>
</body>
</html>

2
web/views/partials/navbar.html
View File

@ -2,4 +2,4 @@
<div class="container"> <div class="container">
<a href="/" class="navbar-brand">YTDL Web</a> <a href="/" class="navbar-brand">YTDL Web</a>
</div> </div>
</nav> </nav>