Clean up html formatting
This commit is contained in:
parent
733a8f4d7a
commit
53a24c4726
|
|
@ -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">
|
||||
<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}}"
|
||||
>
|
||||
Download (direct)
|
||||
</a>
|
||||
<a
|
||||
class="btn btn-primary flex-grow-1"
|
||||
download="{{$id}}-{{.Resolution}}.{{.Ext}}"
|
||||
href="{{$basePath}}/download/proxy?url={{queryEscape $url}}&format={{.FormatID}}"
|
||||
>
|
||||
Download (proxied)
|
||||
</a>
|
||||
|
||||
{{$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}}" 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}}">
|
||||
Download (proxied)
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
</div>
|
||||
|
|
@ -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>
|
||||
|
|
@ -37,4 +23,4 @@
|
|||
{{if .Flash}}
|
||||
<div class="alert alert-danger mt-4" role="" alert>{{.Flash.message}}</div>
|
||||
{{end}}
|
||||
</form>
|
||||
</form>
|
||||
|
|
@ -1,63 +1,48 @@
|
|||
<!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" />
|
||||
<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>
|
||||
<style>
|
||||
#toast-container > div {
|
||||
-moz-box-shadow: none !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
-ms-filter: none;
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
|
||||
<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>
|
||||
<style>
|
||||
#toast-container>div {
|
||||
-moz-box-shadow: none !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
-ms-filter: none;
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body data-bs-theme="dark">
|
||||
{{template "views/partials/navbar" .}}
|
||||
<main class="container my-5">{{embed}}</main>
|
||||
<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.");
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body data-bs-theme="dark">
|
||||
{{template "views/partials/navbar" .}}
|
||||
<main class="container my-5">{{embed}}</main>
|
||||
<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>
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -2,4 +2,4 @@
|
|||
<div class="container">
|
||||
<a href="/" class="navbar-brand">YTDL Web</a>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
Loading…
Reference in New Issue