-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
49 lines (46 loc) · 2.88 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thumbnail Downloader</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css">
</head>
<body>
<div class="container wrapper">
<h3>Youtube Thumbnails Downloader</h3>
<p>Copy youtube Video url. Paste it in text field showing Down. Click Get Thumbnail</p>
<div class="input-group">
<input id="url" type="url" placeholder="Enter youtube url">
<svg width="20px" height="20px" stroke-width="1.1" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" color="#000000">
<path
d="M14 11.9976C14 9.5059 11.683 7 8.85714 7C8.52241 7 7.41904 7.00001 7.14286 7.00001C4.30254 7.00001 2 9.23752 2 11.9976C2 14.376 3.70973 16.3664 6 16.8714C6.36756 16.9525 6.75006 16.9952 7.14286 16.9952"
stroke="#000000" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"></path>
<path
d="M10 11.9976C10 14.4893 12.317 16.9952 15.1429 16.9952C15.4776 16.9952 16.581 16.9952 16.8571 16.9952C19.6975 16.9952 22 14.7577 22 11.9976C22 9.6192 20.2903 7.62884 18 7.12383C17.6324 7.04278 17.2499 6.99999 16.8571 6.99999"
stroke="#000000" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<label for="">Resolution</label>
<select name="" id="resolutionSelect">
<option value="maxresdefault">Max Resolution</option>
<option value="sddefault">Standard Definition</option>
<option value="hqdefault">High Quality</option>
<option value="mqdefault">Medium Quality</option>
</select>
<!-- Component: Base primary elevated button -->
<button id="Download_btn" class="inline-flex items-center justify-center h-10 gap-2 px-5 text-sm font-medium tracking-wide text-white transition duration-300 rounded shadow-md focus-visible:outline-none whitespace-nowrap bg-emerald-500 shadow-emerald-200 hover:bg-emerald-600 hover:shadow-sm hover:shadow-emerald-200 focus:bg-emerald-700 focus:shadow-sm focus:shadow-emerald-200 disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
<span>Get Thumbnail</span>
</button>
<!-- End Base primary elevated button -->
<div id="output" class="output">
</div>
</div>
<script src="main.js"></script>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
</body>
</html>