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

42
web/views/download.html
View File

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

24
web/views/index.html
View File

@ -8,25 +8,11 @@
<label for="url" class="form-label visually-hidden">Url</label>
<div class="input-group">
<input type="url" name="url" id="url" class="form-control" required />
<button
id="paste-button"
class="btn btn-outline-secondary"
type="button"
title="Paste"
>
<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"
/>
<button id="paste-button" class="btn btn-outline-secondary" type="button" title="Paste">
<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>
</button>
</div>

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

@ -1,40 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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" />
<title>YTDL Web</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/toastr@2.1.4/build/toastr.min.css"
integrity="sha256-R91pD48xW+oHbpJYGn5xR0Q7tMhH4xOrWn1QqMRINtA="
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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastr@2.1.4/build/toastr.min.css"
integrity="sha256-R91pD48xW+oHbpJYGn5xR0Q7tMhH4xOrWn1QqMRINtA=" 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>
#toast-container > div {
#toast-container>div {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
@ -43,8 +26,9 @@
opacity: 1;
}
</style>
</head>
<body data-bs-theme="dark">
</head>
<body data-bs-theme="dark">
{{template "views/partials/navbar" .}}
<main class="container my-5">{{embed}}</main>
<script>
@ -59,5 +43,6 @@
}
});
</script>
</body>
</body>
</html>