node.ytpd/index.html at main · NotLeonid/node.ytpd · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
<title>node.ytpd - YouTube Playlist Downloader</title>
<style>
*{outline:none;transition:.3s;user-select:none;}
body{background-color:#333;color:white;font-family:arial;display:flex;flex-direction:column;overflow:hidden;}
::-webkit-scrollbar{display:none;}
input,button,#progress{width:90%;background-color:#555;font-size:1.3em;color:white;padding:3px;border-radius:3px;border:2px white solid;}
#progress{height:1.5em;padding:0;text-align:left;display:inline-block;}
#progress div{position:relative;top:0;left:0;height:100%;background-color:#0a0;border-radius:3px;width:50%;transition:0.5s;}
#progress h3{font-size:1em;position:relative;top:50%;left:50%;margin:0;z-index:1;transform:translate(-50%,-175%);width:100%;text-align:center;}
input::placeholder{text-align:center;}
input:hover,button:hover{background-color:#777;}
legend{text-align:center;}
#songs{border-radius:5px;border:2px solid #555;overflow:auto;height:300px;}
.song{text-align:left;margin:0;margin-bottom:4px;border:2px solid white;padding:8px;border-radius:3px;background-color:#555;font-size:1em;overflow:hidden;}
.song:hover{background-color:#a00;transition:.2s;}
.song>span{float:right;color:#999;}
#download{border-color:#0a0;}
#download:hover{background-color:#0a0;}
#download:disabled{background-color:#0a0;opacity:.4;}
input:disabled{border-color:#a00;opacity:.4;}
</style>
</head>
<body>
<center>
<h1>YouTube Playlist Downloader</h1>
<input type="text" id="downloadPath" placeholder="Download folder path">
<br><br>
<input type="text" id="playlistUrl" placeholder="Playlist URL">
<br><br>
<input type="url" id="singleUrl" placeholder="Add single">
<div>
<fieldset id="songs">
<legend><h4 id="details">-</h4></legend>
</fieldset>
</div>
<br>
<button id="download">Download</button>
<br><br>
<div id="progress"><div style="width:0%;"></div><h3>-</h3></div>
</center>
</body>
</html>