Adding logo credits Destiny.
This commit is contained in:
sergiotarxz
parent
1e25c9280e
commit
cf8a2655d7
GPG Key ID:
E5903508B6510AC2
|
|
@ -1,274 +0,0 @@
|
|||
body {
|
||||
height: 99.9%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
a:hover,a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#video {
|
||||
width: 100%;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
#modal-video-container {
|
||||
display: none;
|
||||
background: white;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: black 1px solid;
|
||||
}
|
||||
|
||||
#modal-video-container.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.video-container-bar {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
#close-and-reset-video-container {
|
||||
margin-top: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#close-and-reset-video-container:hover:#close-and-reset-video-container:focus {
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#download-video-container {
|
||||
margin: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#download-video-container a {
|
||||
display: none;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
width: 100%;
|
||||
background: #0a0;
|
||||
border-radius: 5px;
|
||||
font-size: 30px;
|
||||
color: white;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
#download-video-container a.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#download-video-container a embed {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
#video-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.application-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#download-form {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#download-form-button {
|
||||
margin-top: 5px;
|
||||
height: 50px;
|
||||
font-size: 1.5rem;
|
||||
background: #fff;
|
||||
color: black;
|
||||
border: none;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#modal-loading {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: black 1px solid;
|
||||
justify-content: right;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#modal-loading.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#modal-loading embed {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
#poping-notice {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: black 1px solid;
|
||||
width: 91%;
|
||||
background: white;
|
||||
padding: 10px;
|
||||
border-radius: 15px;
|
||||
max-height: 95%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#poping-notice.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#poping-notice-container-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
#close-poping-notice {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: #0f0;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#close-poping-notice:hover,#close-poping-notice:focus {
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#modal-format-selector {
|
||||
display: none;
|
||||
background: white;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: black 1px solid;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#modal-format-selector.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#modal-format-selector > h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#modal-format-selector > p {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
#modal-format-selector .format-list {
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
#close-modal-format-selector {
|
||||
margin-top: 0.50rem;
|
||||
margin-right: 0.50rem;
|
||||
border: 1px solid black;
|
||||
background: grey;
|
||||
color: white;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#close-modal-format-selector:hover,#close-modal-format-selector:focus {
|
||||
background: black;
|
||||
}
|
||||
|
||||
.format-list > div {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-auto-columns: 50%;
|
||||
grid-template-areas: "a a";
|
||||
}
|
||||
|
||||
.format-list > div > a {
|
||||
border: 1px solid black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
padding-right: 5%;
|
||||
padding-left: 5%;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
background: #eee;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.format-list > div > a:hover {
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.format-list > div > a:after {
|
||||
padding-bottom: 100%;
|
||||
display: block;
|
||||
content: "";
|
||||
}
|
||||
|
||||
div.video-formats a {
|
||||
background: #f00;
|
||||
}
|
||||
|
||||
@media (min-width: 668px) {
|
||||
#poping-notice {
|
||||
width: 629px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;display:block;" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
|
||||
<g>
|
||||
<g transform="translate(50 50)">
|
||||
<g transform="scale(0.8)">
|
||||
<g transform="translate(-50 -58)">
|
||||
<path fill="#f47e60" d="M27.1,79.4c-1.1,0.6-2.4,1-3.7,1c-2.6,0-5.1-1.4-6.4-3.7c-2-3.5-0.8-8,2.7-10.1c1.1-0.6,2.4-1,3.7-1c2.6,0,5.1,1.4,6.4,3.7 C31.8,72.9,30.6,77.4,27.1,79.4z"></path>
|
||||
<path fill="#f8b26a" d="M72.9,79.4c1.1,0.6,2.4,1,3.7,1c2.6,0,5.1-1.4,6.4-3.7c2-3.5,0.8-8-2.7-10.1c-1.1-0.6-2.4-1-3.7-1c-2.6,0-5.1,1.4-6.4,3.7 C68.2,72.9,69.4,77.4,72.9,79.4z"></path>
|
||||
<circle fill="#abbd81" cx="50" cy="27" r="7.4"></circle>
|
||||
<path fill="#8ebfc7" d="M86.5,57.5c-3.1-1.9-6.4-2.8-9.8-2.8c-0.5,0-0.9,0-1.4,0c-0.4,0-0.8,0-1.1,0c-2.1,0-4.2-0.4-6.2-1.2 c-0.8-3.6-2.8-6.9-5.4-9.3c0.4-2.5,1.3-4.8,2.7-6.9c2-2.9,3.2-6.5,3.2-10.4c0-10.2-8.2-18.4-18.4-18.4c-0.3,0-0.6,0-0.9,0 C39.7,9,32,16.8,31.6,26.2c-0.2,4.1,1,7.9,3.2,11c1.4,2.1,2.3,4.5,2.7,6.9c-2.6,2.5-4.6,5.7-5.4,9.3c-1.9,0.7-4,1.1-6.1,1.1 c-0.4,0-0.8,0-1.2,0c-0.5,0-0.9-0.1-1.4-0.1c-3.1,0-6.3,0.8-9.2,2.5c-9.1,5.2-12,17-6.3,25.9c3.5,5.4,9.5,8.4,15.6,8.4 c2.9,0,5.8-0.7,8.5-2.1c3.6-1.9,6.3-4.9,8-8.3c1.1-2.3,2.7-4.2,4.6-5.8c1.7,0.5,3.5,0.8,5.4,0.8c1.9,0,3.7-0.3,5.4-0.8 c1.9,1.6,3.5,3.5,4.6,5.7c1.5,3.2,4,6,7.4,8c2.9,1.7,6.1,2.5,9.2,2.5c6.6,0,13.1-3.6,16.4-10C97.3,73.1,94.4,62.5,86.5,57.5z M29.6,83.7c-1.9,1.1-4,1.6-6.1,1.6c-4.2,0-8.4-2.2-10.6-6.1c-3.4-5.9-1.4-13.4,4.5-16.8c1.9-1.1,4-1.6,6.1-1.6 c4.2,0,8.4,2.2,10.6,6.1C37.5,72.8,35.4,80.3,29.6,83.7z M50,39.3c-6.8,0-12.3-5.5-12.3-12.3S43.2,14.7,50,14.7 c6.8,0,12.3,5.5,12.3,12.3S56.8,39.3,50,39.3z M87.2,79.2c-2.3,3.9-6.4,6.1-10.6,6.1c-2.1,0-4.2-0.5-6.1-1.6 c-5.9-3.4-7.9-10.9-4.5-16.8c2.3-3.9,6.4-6.1,10.6-6.1c2.1,0,4.2,0.5,6.1,1.6C88.6,65.8,90.6,73.3,87.2,79.2z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="0 50 50;360 50 50"></animateTransform>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.1 KiB |
|
|
@ -1,68 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<script src="js/peertube-dl-web.js"></script>
|
||||
<link rel="stylesheet" href="css/index.css"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<div class="application-container">
|
||||
<h2>Peertube-dl Web Application</h2>
|
||||
<form id="download-form">
|
||||
<input class="block" type="text" id="download-form-url" placeholder="Introduce the url you want to download."/>
|
||||
<button class="block" id="download-form-button" >Fetch from api</button>
|
||||
</form>
|
||||
</div>
|
||||
<div id="modal-format-selector">
|
||||
<div class="video-container-bar">
|
||||
<a id="close-modal-format-selector">x</a>
|
||||
</div>
|
||||
<h2>Example video</h2>
|
||||
<p>Example description</p>
|
||||
<div class="format-list">
|
||||
<h3>Video Formats.</h3>
|
||||
<div class="video-formats">
|
||||
</div>
|
||||
<h3>Audio Formats.</h3>
|
||||
<div class="audio-formats">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="modal-loading">
|
||||
<embed src="img/spinner.svg"/>
|
||||
</div>
|
||||
<div id="modal-video-container">
|
||||
<div class="video-container-bar">
|
||||
<a id="close-and-reset-video-container">x</a>
|
||||
</div>
|
||||
<div id="video-container">
|
||||
<div class="block">
|
||||
<video id="video" controls="controls"></video>
|
||||
</div>
|
||||
<div id="download-video-container" class="block">
|
||||
<a id="download-video-prepare" class="active">Prepare download</a>
|
||||
<a id="download-video-loading"><embed src="img/spinner.svg"/></a>
|
||||
<a id="download-video">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="poping-notice">
|
||||
<div id="poping-notice-content">
|
||||
<p>This webpage is free as in freedom software, it is offered to you with the hope it will be useful, but without any warranty,
|
||||
you can find the source code at <a href="https://gitea.sergiotarxz.freemyip.com/sergiotarxz/Peertube-dl">my gitea</a> with docs to setup your own
|
||||
webpage like this, this software is licensed under the AGPLv3 license which means you MUST convey the source code in a human readable form
|
||||
if you distribute this software or use it as an service to users of service or distributees.<p>
|
||||
|
||||
<p>I hope that if you find a non supported url which should be supported, a bug, or a feature you would like this webpage to have you file an issue in
|
||||
<a href="https://gitea.sergiotarxz.freemyip.com/sergiotarxz/Peertube-dl/issues">https://gitea.sergiotarxz.freemyip.com/sergiotarxz/Peertube-dl/issues</a>
|
||||
to help this software improve since I find tracking users a pretty bad way to discover bugs and potential good features.</p>
|
||||
|
||||
<p>This webpage may load third party resources depending on the url you give to it which may put cookies in your browser, you are
|
||||
encouraged to frecuently delete your browser cookies to avoid those third parties tracking you on internet, Firefox offers you an
|
||||
option to delete cookies as soon as you close the browser which may be a good idea to enable in the orwellian internet of today.</p>
|
||||
</div>
|
||||
<div id="poping-notice-container-bar">
|
||||
<a id="close-poping-notice" href="#">X</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
|
|
@ -2,6 +2,7 @@
|
|||
<head>
|
||||
<script src="js/peertube-dl-web.js"></script>
|
||||
<link rel="stylesheet" href="css/index.css"></script>
|
||||
<link rel="icon" type="image/png" href="img/peertube-dl-logo.png"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue