forked from manbearwiz/youtube-dl-server
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(styling): upgrade to bootstrap 4
- Loading branch information
1 parent
98bc4fa
commit 2344f44
Showing
2 changed files
with
42 additions
and
192 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,56 +1,56 @@ | ||
| <!DOCTYPE html> | ||
| <!doctype html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <!-- Required meta tags --> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | ||
| <meta name="Description" content="Web frontend for youtube-dl"> | ||
|
|
||
| <meta name="description" content=""> | ||
| <meta name="author" content=""> | ||
| <link rel="icon" href="../../favicon.ico"> | ||
| <!-- Bootstrap CSS --> | ||
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" | ||
| crossorigin="anonymous"> | ||
| <link href="youtube-dl/static/style.css" rel="stylesheet"> | ||
|
|
||
| <title>youtube-dl</title> | ||
|
|
||
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> | ||
| <link href="youtube-dl/static/style.css" rel="stylesheet"> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <div class="site-wrapper"> | ||
| <div class="site-wrapper-inner"> | ||
| <div class="cover-container"> | ||
|
|
||
| <div class="inner cover"> | ||
| <h1 class="cover-heading">youtube-dl</h1> | ||
| <p class="lead">Enter a video url to download the video to the server. Url can be to YouTube or <a href="https://rg3.github.io/youtube-dl/supportedsites.html">any other supported site</a>. The server will automatically download the highest quality version available.</p> | ||
| <div class="row"> | ||
| <form action="/youtube-dl/q" method="POST"> | ||
| <div class="input-group"> | ||
| <input name="url" type="url" class="form-control" placeholder="URL"> | ||
| <span class="input-group-btn"> | ||
| <button class="btn btn-primary" type="submit" > | ||
| <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> Submit | ||
| </button> | ||
| </span> | ||
| <div class="container d-flex flex-column text-light text-center"> | ||
| <div class="flex-grow-1"></div> | ||
| <div class="jumbotron bg-transparent flex-grow-1"> | ||
| <h1 class="display-4">youtube-dl</h1> | ||
| <p class="lead">Enter a video url to download the video to the server. Url can be to YouTube or <a class="text-info" | ||
| href="https://rg3.github.io/youtube-dl/supportedsites.html">any | ||
| other supported site</a>. The server will automatically download the highest quality version available.</p> | ||
| <hr class="my-4"> | ||
| <div> | ||
| <form action="/youtube-dl/q" method="POST"> | ||
| <div class="input-group"> | ||
| <input name="url" type="url" class="form-control" placeholder="URL" aria-label="URL" aria-describedby="button-submit"> | ||
| <div class="input-group-append"> | ||
| <button class="btn btn-primary" type="submit" id="button-submit">Submit</button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="mastfoot"> | ||
| <div class="inner"> | ||
| <p>Web frontend for <a href="https://rg3.github.io/youtube-dl/">youtube-dl</a>, by <a href="https://twitter.com/manbearwiz">@manbearwiz</a>.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| </form> | ||
| </div> | ||
| </div> | ||
| <footer> | ||
| <div> | ||
| <p class="text-muted">Web frontend for <a class="text-light" href="https://rg3.github.io/youtube-dl/">youtube-dl</a>, | ||
| by <a class="text-light" href="https://twitter.com/manbearwiz">@manbearwiz</a>.</p> | ||
| </div> | ||
| </footer> | ||
| </div> | ||
|
|
||
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> | ||
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | ||
| <!-- Optional JavaScript --> | ||
| <!-- jQuery first, then Popper.js, then Bootstrap JS --> | ||
| <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" | ||
| crossorigin="anonymous"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" | ||
| crossorigin="anonymous"></script> | ||
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" | ||
| crossorigin="anonymous"></script> | ||
| </body> | ||
|
|
||
| </html> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,157 +1,7 @@ | ||
| /* | ||
| * Globals | ||
| */ | ||
|
|
||
|
|
||
| /* Links */ | ||
|
|
||
| a, a:focus, a:hover { | ||
| color: #fff; | ||
| } | ||
| .lead a { | ||
| color: #268bd2; | ||
| } | ||
|
|
||
| /* Custom default button */ | ||
|
|
||
| .btn-default, .btn-default:hover, .btn-default:focus { | ||
| color: #333; | ||
| text-shadow: none; | ||
| /* Prevent inheritence from `body` */ | ||
| background-color: #fff; | ||
| border: 1px solid #fff; | ||
| } | ||
|
|
||
| /* | ||
| * Base structure | ||
| */ | ||
|
|
||
| html, body { | ||
| height: 100%; | ||
| background-color: #002b36; | ||
| } | ||
| body { | ||
| color: #fff; | ||
| text-align: center; | ||
| text-shadow: 0 1px 3px rgba(0, 0, 0, .5); | ||
| } | ||
|
|
||
| /* Extra markup and styles for table-esque vertical and horizontal centering */ | ||
|
|
||
| .site-wrapper { | ||
| display: table; | ||
| width: 100%; | ||
| height: 100%; | ||
| /* For at least Firefox */ | ||
| min-height: 100%; | ||
| -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, .5); | ||
| box-shadow: inset 0 0 100px rgba(0, 0, 0, .5); | ||
| } | ||
| .site-wrapper-inner { | ||
| display: table-cell; | ||
| vertical-align: top; | ||
| } | ||
| .cover-container { | ||
| margin-right: auto; | ||
| margin-left: auto; | ||
| } | ||
|
|
||
| /* Padding for spacing */ | ||
|
|
||
| .inner { | ||
| padding: 30px; | ||
| } | ||
|
|
||
| /* | ||
| * Header | ||
| */ | ||
|
|
||
| .masthead-brand { | ||
| margin-top: 10px; | ||
| margin-bottom: 10px; | ||
| } | ||
| .masthead-nav > li { | ||
| display: inline-block; | ||
| } | ||
| .masthead-nav > li + li { | ||
| margin-left: 20px; | ||
| } | ||
| .masthead-nav > li > a { | ||
| padding-right: 0; | ||
| padding-left: 0; | ||
| font-size: 16px; | ||
| font-weight: bold; | ||
| color: #fff; | ||
| /* IE8 proofing */ | ||
| color: rgba(255, 255, 255, .75); | ||
| border-bottom: 2px solid transparent; | ||
| } | ||
| .masthead-nav > li > a:hover, .masthead-nav > li > a:focus { | ||
| background-color: transparent; | ||
| border-bottom-color: #a9a9a9; | ||
| border-bottom-color: rgba(255, 255, 255, .25); | ||
| } | ||
| .masthead-nav > .active > a, .masthead-nav > .active > a:hover, .masthead-nav > .active > a:focus { | ||
| color: #fff; | ||
| border-bottom-color: #fff; | ||
| } | ||
| @media (min-width: 768px) { | ||
| .masthead-brand { | ||
| float: left; | ||
| } | ||
| .masthead-nav { | ||
| float: right; | ||
| } | ||
| } | ||
|
|
||
| /* | ||
| * Cover | ||
| */ | ||
|
|
||
| .cover { | ||
| padding: 0 20px; | ||
| } | ||
| .cover .btn-lg { | ||
| padding: 10px 20px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| /* | ||
| * Footer | ||
| */ | ||
|
|
||
| .mastfoot { | ||
| color: #999; | ||
| /* IE8 proofing */ | ||
| color: rgba(255, 255, 255, .5); | ||
| background-color: #002b36; | ||
| } | ||
|
|
||
| /* | ||
| * Affix and center | ||
| */ | ||
|
|
||
| @media (min-width: 768px) { | ||
| /* Pull out the header and footer */ | ||
| .masthead { | ||
| position: fixed; | ||
| top: 0; | ||
| } | ||
| .mastfoot { | ||
| position: fixed; | ||
| bottom: 0; | ||
| } | ||
| /* Start the vertical centering */ | ||
| .site-wrapper-inner { | ||
| vertical-align: middle; | ||
| } | ||
| /* Handle the widths */ | ||
| .masthead, .mastfoot, .cover-container { | ||
| width: 100%; | ||
| /* Must be percentage or pixels for horizontal alignment */ | ||
| } | ||
| } | ||
| @media (min-width: 992px) { | ||
| .masthead, .mastfoot, .cover-container { | ||
| width: 700px; | ||
| } | ||
| } | ||
| .container { | ||
| height: 100vh; | ||
| } |