-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
147 lines (121 loc) · 5.89 KB
/
index.html
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; img-src 'self' https://*.dzcdn.net/images/cover/">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Youtube to MP3 Downloader</title>
<link href="tailwind.css" rel="stylesheet">
<style>
.modal {
transition: opacity 0.25s ease;
}
body.modal-active {
overflow-x: hidden;
overflow-y: visible !important;
}
</style>
</head>
<body class="bg-gray-100 dark:bg-gray-700">
<div class="container mx-auto flex flex-col">
<div class="flex flex-row">
<div class="flex-auto w-2/3 relative py-16 px-10">
<div class="text-2xl">
<p class="font-bold dark:text-blue-200">Youtube to</p>
<p><span class="text-purple-700 dark:text-purple-400">MP3</span> <span class="font-extralight dark:text-blue-200">downloader</span></p>
</div>
<p class="my-5 text-gray-500 text-sm dark:text-gray-400">
Enter Youtube URL and start downloading as .mp3 files! You can also mark option to search for MP3 tags
by given search criteria.
</p>
<div class="flex-auto">
<form class="relative">
<svg width="20" height="20" fill="currentColor" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" />
</svg>
<input class="focus:border-light-blue-500 focus:ring-1 focus:ring-light-blue-500 focus:outline-none w-full text-sm text-black placeholder-gray-500 border border-gray-200 rounded-md py-2 pl-10"
type="text"
aria-label="URL placeholder"
placeholder="https://youtube.com"
id="url-input" />
</form>
<div>
<button class="hover:bg-purple-400 hover:text-light-purple-800 focus:outline-none rounded-md bg-purple-500 text-white text-sm font-medium px-4 py-2 my-5"
id="download-button">
Download
</button>
</div>
<div class="flex mt-4 text-sm">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox" id="cover-search">
<span class="ml-2 dark:text-blue-200">Search for MP3 tags</span>
</label>
</div>
<div id="cover-search-input" class="mt-2 w-56 hidden">
<input class="focus:border-light-blue-500 focus:ring-1 focus:ring-light-blue-500 focus:outline-none w-full text-sm text-black placeholder-gray-500 border border-gray-200 rounded-md py-2 pl-5"
type="text"
aria-label="Album artwork search"
placeholder="Search"
id="cover-search-url" />
</div>
</div>
</div>
<div class="flex-auto w-1/3 py-16 px-5">
<div>
<img src="./assets/app-icon/png/256.png"
alt="Cover"
id="song-artwork">
</div>
<div class="text-center my-5 dark:text-blue-200">
<h2 class="font-extralight" id="song-artist"></h2>
<h1 class="font-semibold text-lg" id="song-title"></h1>
</div>
<div class="relative mb-5 pt-1">
<div class="mb-4 flex h-2 overflow-hidden rounded bg-gray-100 dark:bg-gray-700 text-xs">
<div id="progress" class="progress-bar bg-green-500 h-2"></div>
</div>
<div class="mb-2 flex items-center justify-between text-xs">
<div id="progress-title" class="text-gray-500 dark:text-blue-200"></div>
<div id="progress-label" class="text-gray-500 dark:text-blue-200"></div>
</div>
</div>
<div id="playlist" class="text-center text-sm dark:text-blue-200"></div>
</div>
</div>
</div>
<!--Modal-->
<div class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
<div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
<div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
<!-- <div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">-->
<!-- <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">-->
<!-- <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>-->
<!-- </svg>-->
<!-- <span class="text-sm">(Esc)</span>-->
<!-- </div>-->
<div class="modal-content py-4 text-left px-6">
<!--Title-->
<div class="flex justify-between items-center pb-3">
<p class="text-2xl font-bold">New update found</p>
<div class="modal-close cursor-pointer z-50">
<svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
</svg>
</div>
</div>
<!--Body-->
<h4 id="update-version"></h4>
<div id="changelog" class="mt-4"></div>
<!--Footer-->
<div class="flex justify-end pt-2">
<button id="ignore-update" class="modal-close px-4 bg-transparent p-3 rounded-lg text-indigo-500 hover:bg-gray-100 hover:text-indigo-400 mr-2">Ignore</button>
<button id="accept-update" class="px-4 bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400">Update</button>
</div>
</div>
</div>
</div>
<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
</body>
</html>