Akkariin/youtube-dl
1
0
Fork 0
mirror of https://github.com/l1ving/youtube-dl synced 2025-03-09 19:57:18 +08:00
Code Issues Releases Wiki Activity

WIP Redesign youtube-dl website

Browse Source
This commit is contained in:
Tomas 2020-03-20 12:39:55 -03:00
parent 26725aae4e
commit b3375c7816
4 changed files with 171 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
80x15.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 475 B

61
index.html
View File

@ -1,39 +1,48 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>youtube-dl</title> <title>youtube-dl</title>
<link rel="stylesheet" href="style.css" type="text/css" /> <meta name="description" content="youtube-dl is a command-line program to download videos from YouTube and a few more sites">
<link rel="alternate" type="application/atom+xml" title="youtube-dl releases" href="update/releases.atom" /> <link rel="alternate" type="application/atom+xml" title="youtube-dl releases" href="update/releases.atom" />
<link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="header">
<table class="heading"><tr> <h1><a href="index.html">youtube-dl</a></h1>
<td class="title"><a href="index.html">youtube-dl</a></td> <h2>Download videos from YouTube (and <a href="supportedsites.html">more sites</a>)</h2>
<td class="subtitle">Download videos from YouTube <hr>
(and <a href="supportedsites.html" style="color: blue; text-decoration: underline;">more sites</a>)</td> </div>
</tr></table> <div class="container">
<div class="download">
<p><em>youtube-dl</em> is a command-line program to download videos from YouTube.com and a few <a href="supportedsites.html" style="color: blue; text-decoration: underline;">more sites</a>. It requires the <a href="http://www.python.org/">Python interpreter</a> (2.6, 2.7, or 3.2+), and it is not platform specific. We also provide a <a href="https://yt-dl.org/latest/youtube-dl.exe">Windows executable</a> that includes Python. youtube-dl should work in your Unix box, in Windows or in Mac OS X. It is released to the public domain, which means you can modify it, redistribute it or use it however you like.</p> <div class="terminal">
<p># Latest version</p>
<table border="0" id="rgb"> <p>$ youtube-dl --version</p>
<tr><td><a class="button" id="r" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#readme">Documentation</a></td></tr> <p>2020.03.08</p></div>
<tr><td><a class="button" id="g" href="download.html">Download</a></td></tr> <p><a class="download-button" id="g" href="download.html">Download</a><p>
<tr><td><a class="button" id="main-support" href="https://github.com/ytdl-org/youtube-dl/issues/new/choose">Support</a></td></tr> </div>
<tr><td><a class="button" id="y" href="https://github.com/ytdl-org/youtube-dl/">Develop</a></td></tr> <h3>Description:</h3>
<tr><td><a class="button" id="b" href="about.html">About</a></td></tr> <p><em>youtube-dl</em> is a command-line program to download videos from YouTube.com and a few <a href="supportedsites.html">more sites</a>. It requires the <a href="http://www.python.org/">Python interpreter</a> (2.6, 2.7, or 3.2+), and it is not platform specific. We also provide a <a href="https://yt-dl.org/latest/youtube-dl.exe">Windows executable</a> that includes Python. youtube-dl should work in your Unix box, in Windows or in Mac OS X. It is released to the public domain, which means you can modify it, redistribute it or use it however you like.</p>
</table> <div class="terminal">
<p># Usage</p>
<p>$ youtube-dl [OPTIONS] URL [URL...]</p>
</div>
<p>You can also contact us on the irc channel <a href="irc://chat.freenode.net/#youtube-dl">#youtube-dl</a> (<a href="http://webchat.freenode.net/?randomnick=1&amp;channels=youtube-dl">webchat</a>) on freenode.</p> <p>You can also contact us on the irc channel <a href="irc://chat.freenode.net/#youtube-dl">#youtube-dl</a> (<a href="http://webchat.freenode.net/?randomnick=1&amp;channels=youtube-dl">webchat</a>) on freenode.</p>
<p>If you like this project, you may donate <a href="donations.html">here</a>.</p> <p>If you like this project, you may donate <a href="donations.html">here</a>.</p>
<div class="bottom-navbar">
<a class="button" id="doc" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#readme">Documentation</a>
<a class="button" id="support" href="https://github.com/ytdl-org/youtube-dl/issues/new/choose">Support</a>
<a class="button" id="dev" href="https://github.com/ytdl-org/youtube-dl/">Develop</a>
<a class="button" id="about" href="about.html">About</a>
</div>
</div>
<div class="note"> <div class="note">
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.en_US"> <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.en_US">
<img alt="Creative Commons License" style="border-width:0" <img alt="Creative Commons License" src="80x15.png" />
src="https://i.creativecommons.org/l/by-sa/3.0/80x15.png" /></a><br /> </a>
Copyright © 2006-2011 Ricardo Garcia Gonzalez<br /> <p>Copyright © 2006-2011 Ricardo Garcia Gonzalez</p>
Copyright © 2011-2020 youtube-dl developers <p>Copyright © 2011-2020 youtube-dl developers</p>
</div> </div>
</body> </body>
</html> </html>

48
index.html.in Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>youtube-dl</title>
<meta name="description" content="youtube-dl is a command-line program to download videos from YouTube and a few more sites">
<link rel="alternate" type="application/atom+xml" title="youtube-dl releases" href="update/releases.atom" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<h1><a href="index.html">youtube-dl</a></h1>
<h2>Download videos from YouTube (and <a href="supportedsites.html">more sites</a>)</h2>
<hr>
</div>
<div class="container">
<div class="download">
<div class="terminal">
<p># Latest version</p>
<p>$ youtube-dl --version</p>
<p>@PROGRAM_VERSION@</p></div>
<p><a class="download-button" id="g" href="download.html">Download</a><p>
</div>
<h3>Description:</h3>
<p><em>youtube-dl</em> is a command-line program to download videos from YouTube.com and a few <a href="supportedsites.html">more sites</a>. It requires the <a href="http://www.python.org/">Python interpreter</a> (2.6, 2.7, or 3.2+), and it is not platform specific. We also provide a <a href="https://yt-dl.org/latest/youtube-dl.exe">Windows executable</a> that includes Python. youtube-dl should work in your Unix box, in Windows or in Mac OS X. It is released to the public domain, which means you can modify it, redistribute it or use it however you like.</p>
<div class="terminal">
<p># Usage</p>
<p>$ youtube-dl [OPTIONS] URL [URL...]</p>
</div>
<p>You can also contact us on the irc channel <a href="irc://chat.freenode.net/#youtube-dl">#youtube-dl</a> (<a href="http://webchat.freenode.net/?randomnick=1&amp;channels=youtube-dl">webchat</a>) on freenode.</p>
<p>If you like this project, you may donate <a href="donations.html">here</a>.</p>
<div class="bottom-navbar">
<a class="button" id="doc" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#readme">Documentation</a>
<a class="button" id="support" href="https://github.com/ytdl-org/youtube-dl/issues/new/choose">Support</a>
<a class="button" id="dev" href="https://github.com/ytdl-org/youtube-dl/">Develop</a>
<a class="button" id="about" href="about.html">About</a>
</div>
</div>
<div class="note">
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.en_US">
<img alt="Creative Commons License" src="80x15.png" />
</a>
<p>Copyright © 2006-2011 Ricardo Garcia Gonzalez</p>
<p>Copyright © 2011-2020 youtube-dl developers</p>
</div>
</body>
</html>

209
style.css
View File

@ -1,156 +1,91 @@
html{
position: relative;
min-height: 100%;
}
body { body {
font-family: sans-serif; font-family: sans-serif;
margin-left: 10%; margin: 0;
margin-right: 10%;
margin-top: 2ex;
margin-bottom: 3ex; margin-bottom: 3ex;
background-color: white; background-color: #ffefdd;
color: black; color: #292929;
/*background-color: #fff1db;*/ margin-left: 10vw;
background-color: white; margin-right: 10vw;
/*
background-image: url("gradient.png");
background-repeat: repeat-x;
*/
/*
background-image: url("gradient2.png");
background-repeat: repeat-y;
*/
/*
background-image: url("gradient3.png");
background-repeat: repeat-x;
*/
/*
background-image: url("gradient4.png");
background-repeat: repeat-y;
*/
background-image: url("gradient5.png");
background-repeat: repeat-x;
} }
.heading {
border: 0; .header h1 a {
color: black;
font-size: xx-large;
font-weight: bold;
padding-bottom: 1ex;
border-bottom: 1px solid black;
margin-bottom: 2ex;
width: 100%;
}
.heading tr {
border: 0;
}
.heading td {
border: 0;
}
.heading a {
text-decoration: none; text-decoration: none;
color: black; color: black;
} }
.title { .header {
text-align: center;
line-height: 1.5em;
}
.container {
display: block;
margin: 0 0 120px;
}
.terminal {
margin-top: 25px;
background-color: #2d2d2d;
color: #5eff00;
text-align: left; text-align: left;
padding-bottom: 25px;
line-height: 0.5em;
padding-top: 1px;
padding-left: 10px;
border-radius: 5px;
margin-bottom: 20px;
} }
.subtitle { .download {
text-align: right; text-align: center;
} max-width: 50%;
.toc { margin-left: 25%;
padding-left: 2ex; margin-bottom: 50px;
border: 1px solid #aaaaaa;
background-color: white;
padding-bottom: 1ex;
border-radius: 10px;
-moz-border-radius: 10px;
}
.toc ul {
margin: 0; list-style-type: none;
}
hr {
margin-top: 3ex;
margin-bottom: 3ex;
width: 50%;
} }
.note { .note {
margin-top: 10ex; position: absolute;
left: 0;
bottom: 0;
text-align: center; text-align: center;
font-size: x-small; height: 85px;
width: 100%;
font-size: 12px;
line-height: 0.5em;
overflow: hidden;
} }
h1 {
font-size: x-large; .download-button {
margin-top: 2ex; padding: 10px 20px;
color: black; text-align: center;
margin-left: 2%; font-size: 20px;
margin-right: 2%; line-height: 15px;
} border-radius: 2px;
h2 {
font-size: large;
margin-left: 5%;
margin-right: 5%;
}
p {
margin-left: 5%;
margin-right: 5%;
}
ul {
margin-left: 5%;
margin-right: 5%;
}
li {
margin-left: 3%;
margin-top: 0.5ex;
margin-bottom: 0.5ex;
}
tt {
padding-left: 0.5ex;
padding-right: 0.5ex;
background: #dddddd;
}
#rgb {
width: 33%;
margin: 3ex auto;
}
.button {
color: white;
font-weight: bold;
font-size: x-large;
text-decoration: none; text-decoration: none;
color: white;
border: 1px solid #7d7d7d;
}
.bottom-navbar {
font-size: x-large;
text-align: center; text-align: center;
display: block; margin-top: 30px;
padding: 2ex; line-height: 2em;
border-radius: 10px;
-moz-border-radius: 10px;
} }
#r {
background-color: #884444; .bottom-navbar a{
border: 2px solid #880000; padding: 5px;
text-decoration: none;
color: #004687;
border: 2px solid #004687;
margin-left: 20px;
margin-right: 20px;
border-radius: 5px;
} }
#g { #g {
background-color: #448844; background-color: #007bff;
border: 2px solid #006600; border-color: #007bff;
}
#b {
background-color: #444488;
border: 2px solid #000088;
}
#y {
background-color: #888844;
border: 2px solid #666600;
}
#main-support {
background-color: #448888;
border: 2px solid #008888;
}
code.commands {
display:block;
margin-top: 0.4em;
padding: 0.7em;
background: #ccc;
background: rgba(200, 200, 200, 0.4);
white-space: pre;
}
code.fingerprint {
font-weight: bold;
font-size: 140%;
} }