-
Notifications
You must be signed in to change notification settings - Fork 15
/
index.html
53 lines (48 loc) · 3.24 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🖼 Get YouTube Thumbnail</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<div class="main fw-light">
<header>
<h4 class="display-6 lh-1">🖼 Get YouTube Thumbnail</h4>
</header>
<hr>
<label for="url" class="form-label small">Enter YouTube video URL (supports .be, shorts, embed, with timestamps
and other clutter)</label>
<input name="url" type="search" id="url" class="form-control fw-light"
onfocus="if(this.value == 'https://www.youtube.com/watch?v=k8mOAV0KJLE') { this.value = ''; }"
onblur="if(this.value == '') { this.value = 'https://www.youtube.com/watch?v=k8mOAV0KJLE'; }"
value="https://www.youtube.com/watch?v=k8mOAV0KJLE" />
<div class="buttons">
<button class="btn btn-primary fw-light" onclick="dynamicUrl(0)">👁🗨 Get 🖼</button>
<button class="btn btn-info fw-light" onclick="dynamicUrl(1)">👀 Get Max 🖼</button>
<button class="btn btn-secondary fw-light" onclick="dynamicUrl(2)">👁 Get Max webp</button>
<button class="btn btn-success fw-light" onclick="download()">⏬ Download</button>
</div>
<img class="center-fit" id="img" onclick="fullPage()" title="Click to zoom in/out"
src="https://img.youtube.com/vi/k8mOAV0KJLE/maxresdefault.jpg" />
<footer>
<a class="text-decoration-none" href="https://github.com/rdavydov/get-yt-thumb" target="_blank"><img
src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='12 12 40 40'%3e%3cpath fill='%23333' d='M32 13.4c-10.5 0-19 8.5-19 19 0 8.4 5.5 15.5 13 18 1 .2 1.3-.4 1.3-.9v-3.2c-5.3 1.1-6.4-2.6-6.4-2.6-.9-2.1-2.1-2.7-2.1-2.7-1.7-1.2.1-1.1.1-1.1 1.9.1 2.9 2 2.9 2 1.7 2.9 4.5 2.1 5.5 1.6.2-1.2.7-2.1 1.2-2.6-4.2-.5-8.7-2.1-8.7-9.4 0-2.1.7-3.7 2-5.1-.2-.5-.8-2.4.2-5 0 0 1.6-.5 5.2 2 1.5-.4 3.1-.7 4.8-.7 1.6 0 3.3.2 4.7.7 3.6-2.4 5.2-2 5.2-2 1 2.6.4 4.6.2 5 1.2 1.3 2 3 2 5.1 0 7.3-4.5 8.9-8.7 9.4.7.6 1.3 1.7 1.3 3.5v5.2c0 .5.4 1.1 1.3.9 7.5-2.6 13-9.7 13-18.1 0-10.5-8.5-19-19-19z'/%3e%3c/svg%3e"
alt="GitHub" /> @rdavydov/get-yt-thumb</a>
</footer>
</div>
<div id="fullpage" title="Click to zoom in/out" onclick="this.style.display='none';"></div>
<script src="script.js"></script>
</body>
</html>