-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (103 loc) · 6.03 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Thumb Fetch • Get YouTube thumbnails at full resolution</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Fetch thumbnails from any YouTube video. It's simple.">
<meta property="og:title" content="Thumb Fetch • Get YouTube Thumbnails">
<meta property="og:type" content="webapp" />
<meta name="keywords"
content="youtube thumbnails fetch, save youtube thumbnail, youtube thumbnail full resolution, youtube thumbnail download">
<meta property="og:image" content="assets/cover.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:url" content="https://thumbnails.pages.dev">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Dosis:500" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/Primer/20.3.0-rc.a7df1fad/primer.css" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
</head>
<body data-color-mode="auto" data-light-theme="light" data-dark-theme="dark">
<div class="container-lg px-4 py-4 flex-justify-between">
<nav class="text-bold text-right">
<a class="text-inherit d-inline-block color-fg-default" href="https://github.com/priyam-raj/thumb-fetch"
target="_blank">GitHub</a>
<a class="text-inherit d-inline-block color-fg-default pl-4" href="https://playlistdata.com"
target="_blank">Fetch Playlists</a>
</nav>
</div>
<div class="main-body text-center container-lg" id="main">
<div class="main-text">
<h2 class="h1 text-uppercase red-colored">YouTube Thumb Fetch</h1>
<p class="f3-light">Tool to fetch thumbnails in multiple qualities of any Youtube video</p>
</div>
<div id="result" class="hidden text-center">
<div class="fetch-area container-sm p-3">
<form id="formSubmitted">
<div class="input-group">
<input class="form-control width-full input-monospace" type="text" id="ytlink"
placeholder="Enter a YouTube video URL" onsubmit="fetchThumbnail(ytlink.value);ShowMain()"
autocomplete="off" />
<span class="input-group-button">
<button class="btn" type="button" id="fetchButton"
onclick="fetchThumbnail(ytlink.value);ShowMain()">
Fetch</button>
</span>
</div>
<p class="note">e.g. https://www.youtube.com/watch?v=Ogcd-etnFLw</p>
</form>
</div>
<!-- Download Buttons -->
<div class="result pt-5" id="downloadButtons">
<img id="preview" style="max-width:480px">
<div class="resolutions pb-4 pt-3">
<span><a target="_blank" id="maxres" download><button class="btn p-1">Highest
Quality</button></a></span>
<span><a target="_blank" id="midres" download><button class="btn p-1">Medium