-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathindex.html
259 lines (226 loc) · 9.26 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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Norepted</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./animations.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300&display=swap" rel="stylesheet">
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3CGTP12EEB"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-3CGTP12EEB');
</script>
<body>
<div id="particles-js"></div>
<nav>
<div class="heading fade-in">
<button onclick="home()" class="headinglink fade-in"> Norepted v1.5</button>
</div>
<header>
<button onclick="home()" class="animbutton fade-in">Home</button>
<button onclick="bookmarklets()" class="animbutton fade-in">Bookmarklets</button>
<button onclick="about()" class="animbutton fade-in">About</button>
<!-- <a href="/projects.html">Games</a>
<a href="/settings.html">Settings</a> -->
<button onclick="suggestions()" class="animbutton fade-in">Suggestions</button>
</header>
</nav>
<h1 id="title"class="fade-in"> Youtube Watcher </h1>
<div id="instructions"class="fade-in">
<h3 class="fade-in"> Directions: Paste your youtube video link in the box and press the LAUNCH button.</h3>
<h3 class="fade-in"> Press - and 0 at once to exit safely and quickly. </h3>
<h3 class="fade-in"> Press 1 to hide the tab. </h3>
<a id="aboutblank" onclick="aboutblank()" class="fade-in"><button id="aboutblank" class="fade-in homebutton">Open in
about:blank</button></a>
<h4 class="fade-in" id="copy_tip"> To save a video, press the "COPY" button and bookmark the copied link. </h4>
<h4 class="fade-in" id="tip"> Shortcut: Press 'Enter' on your keyboard to launch faster. </h4>
<button class="hide-button fade-in"> Hide Instructions </button>
</div>
<div>
<button class="show-button">Show Instructions</button>
</div>
<br>
<div class="input-container fade-in">
<input type="text" id="link" class="fade-in" placeholder="YouTube link here" />
<button id="clear-button" class="fade-in homebutton" onclick="document.getElementById('link').value = '';">Clear</button>
</div>
<br>
<button class="fade-in homebutton" id="launch" onclick="fix_link()"> LAUNCH </button>
<br>
<button class="fade-in homebutton" id="copy" onclick="copy_link()"> COPY </button>
<br>
<h3 class="fade-in"> The video will show down below </h3>
<!-- <h5 class="fade-in"> (It might take a few seconds, please be patient) </h5>
<div class="container fade-in"> -->
<div class="loading fade-in" id="loading"></div>
<iframe style="display:none;" class="fade-in" id="video" width="650" height="425" frameborder="0" src=" " allowfullscreen></iframe>
</div>
<div class="size-controls fade-in" style="display: none;">
Size: <button class="size-button" id="minus" onclick="decreaseSize()">-</button>
<button class="size-button" id="plus" onclick="increaseSize()">+</button>
<!-- <button class="size-button" id="default" onclick="defaultSize()"> Default </button> -->
</div>
<br>
<div class="fade-in" id="seperator">
<span> -------------------------------------------------- </span>
</div>
<div id="footer" class="fade-in">
<div class="visitor-counter">
<script type="text/javascript" src="https://www.stat-counter.org/count/d6u8"></script><br>
</div>
<div class="fade-in">
<script type="text/javascript" src="https://www.freevisitorcounters.com/en/home/counter/1086686/t/1"> </script>
</div>
</div>
<h5 class="fade-in" id="socials"> Made by the user <a href="https://codepen.io/weaF_z" target=”_blank”> WG563 on
codepen.io </a>, aka <a href="https://github.com/wea-f" target=”_blank”>wea-f on github </a>, aka <a
href="https://replit.com/@wea-F" target=”_blank”> wea-F on replit </a> <br> FOR MORE INFO AND LICENSE, GO <a
href="https://github.com/wea-f/Norepted" target="_blank"> HERE </a> <br>
<span class="fade-in" id="condition">!!! I am NOT responsible in anyway if you get in trouble related to Norepted,
it is YOUR device and YOU control it. !!! </span>
</h5>
</body>
<script>
function setFavicons(favImg) {
let headTitle = document.querySelector("head");
let setFavicon = document.createElement("link");
setFavicon.setAttribute("rel", "shortcut icon");
setFavicon.setAttribute("href", favImg);
headTitle.appendChild(setFavicon);
}
// Link Embed
function fix_link() {
var link = document.getElementById("link").value
const loadingEle = document.getElementById('loading');
const video = document.getElementById('video');
const sizeControls = document.querySelector('.size-controls');
loadingEle.style.display = "inline";
var video_id = link.replace(/^(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu.be\/)([\w-]+).*$/, "$1");
var final_link = "https://www.youtube-nocookie.com/embed/" + video_id;
video.src = final_link
video.style.border = "0.5px solid white";
video.style.display = "inline";
video.style.opacity = 1;
sizeControls.style.display = 'flex';
video.style.display = 'block';
// Wait for the iframe content to load completely:
video.onload = () => {
adjustIframeHeight();
};
}
// Size buttons
const video = document.getElementById('video');
const sizeControls = document.querySelector('.size-controls');
const minusButton = document.getElementById('minus');
const plusButton = document.getElementById('plus');
const currentWidth = video.offsetWidth; // Initial width (650px)
const currentHeight = video.offsetHeight; // Initial height (425px)
function decreaseSize() {
video.style.width = video.offsetWidth * 0.8 + "px";
adjustIframeHeight();
}
function increaseSize() {
video.style.width = video.offsetWidth * 1.2 + "px";
adjustIframeHeight();
}
// Default
// function defaultSize() {
// video.style.width = 72 + "%";
// video.style.height = 49.5 + "%";
// }
function adjustIframeHeight() {
// This will adjust the iframe's height to maintain aspect ratio:
video.style.height = ((425 / 650) * video.offsetWidth) + 'px';
}
// Hide/Show Instructions
const hideButton = document.querySelector('.hide-button');
const showButton = document.querySelector('.show-button');
const instructionsDiv = document.getElementById('instructions');
hideButton.addEventListener('click', () => {
instructionsDiv.style.display = 'none';
instructionsDiv.classList.remove('active');
// instructionsDiv.querySelectorAll("*").classList.remove('active');
hideButton.style.display = 'none';
showButton.style.display = 'block';
showButton.classList.add("active");
});
showButton.addEventListener('click', () => {
instructionsDiv.style.display = 'block';
instructionsDiv.classList.add('active');
// instructionsDiv.querySelectorAll("*").classList.add('active');
showButton.style.display = 'none';
// instructionsDiv.querySelector(".show-button").classList.remove('active');
hideButton.style.display = 'block';
hideButton.classList.add("active");
});
// Shortcuts
document.body.onkeyup = function (c) {
if (c.key == "Enter" ||
c.code == "Enter" ||
c.keyCode == 13
) {
fix_link()
}
// exit
else if (c.key == "0") {
c.preventDefault();
c.stopPropagation();
window.location.replace("https://www.google.com/webhp?igu=1");
}
else if (c.keyCode == 189 && c.keyCode == 48) {
c.preventDefault();
c.stopPropagation();
window.location.replace("https://www.google.com/webhp?igu=1");
}
// Hide tab
else if (c.key == "1") {
c.preventDefault();
c.stopPropagation();
document.title = "My Drive - Google Drive";
setFavicons("https://ssl.gstatic.com/images/branding/product/1x/drive_2020q4_32dp.png");
}
}
// Copy link
function copy_link() {
var link = document.getElementById("link").value
var link2 = link.replace(/ /gi, "")
var video_id = link.replace("https://www.youtube.com/watch?v=", "")
video_id = video_id.replace("https://youtu.be/", "")
video_id = video_id.replace("&feature=emb_rel_pause", "")
video_id = video_id.replace("&embeds_euri=https%3A%2F%2Fcdpn.io%2F&feature=emb_rel_end", "")
var final_link = "https://www.youtube-nocookie.com/embed/" + video_id
navigator.clipboard.writeText(final_link)
}
// About:Blank button loader
function aboutblank() {
let url = window.location.href;
var w = window.open("about:blank", "_blank");
w.document.write('<iframe style="position: absolute;top: 0px;bottom: 0px;right: 0px;width: 100%;border: none;margin: 0;padding: 0;overflow: hidden;z-index: 99999;height: 100%;" src="' + url + '"></iframe>');
window.close('', '_parent', '');
}
// Header Navigation
function suggestions() {
window.open("https://forms.gle/3TEjjsnqWUXgo5kQ7", '_blank').focus();
}
function home() {
window.location.assign("/");
}
function bookmarklets() {
window.location.assign("/bookmarklets");
}
function about() {
window.location.assign("/about");
}
</script>
<script rel="preload" src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="particles.js"></script>
<script src="animations.js"> </script>
</html>