-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
303 lines (274 loc) · 10.3 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
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
<html lang="en"><head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WZJ7ZNQT');</script>
<!-- End Google Tag Manager -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Clear YouTube recommendations, suggestions, shorts, homepage, and turn off autoplay.">
<meta name="google-site-verification" content="FdUecuLgBo0Fz5qeak3X6f8OR_MU6ZbWh-skl7WRBmA" />
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QKXJ7STL3H"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-QKXJ7STL3H');
</script>
<title>YouShield - Remove Youtube Shorts</title>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
html {
scrollbar-width: thin;
scrollbar-color: #444 #2e2e2e;
}
body {
background-color: #121212;
margin: 0px;
color: #eee;
overflow-x: hidden;
font-family: "IBM Plex Mono";
}
h1 {
font-weight: 300;
font-size: 4.7vw;
margin: 1vw 0px;
}
b {
font-weight: 900;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #444;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.button {
font-size: 1.3vw;
background-color: #00695c;
border-radius: 6px;
padding: 0.8vw 1.3vw;
outline: none;
border: none;
text-align: center;
cursor: pointer;
display: inline-block;
margin-top: 1.5vw;
transition: background-color 0.2s ease;
}
.button.light {
background-color: #263238;
display: inline-flex;
color: #80cbc4;
}
.button>img {
width: 1.3vw;
margin-left: 0.4vw;
margin-bottom: -0.1vw;
}
.button.dark:hover {
background-color: #1a5a4a;
}
.button.light:hover {
background-color: #1a2a2f;
}
#top {
background-color: #121212;
width: 170vw;
display: flex;
padding-top: 4.8vw;
margin-bottom: 6vw;
justify-content: flex-end;
}
#left {
width: 100%;
padding-left: 10.4vw;
padding-top: 1.5vw;
}
#left>p {
color: #777;
font-size: 1.3vw;
width: 35vw;
margin: 2vw 0px;
}
#rightVid {
width: 70vw;
position: absolute;
top: 4vw;
left: 60vw;
}
.stat {
background-image: linear-gradient(145deg, #263238 0%, #2A3D4D 100%);
display: flex;
justify-content: center;
align-items: center;
padding: 7vw;
}
.stat>h1 {
font-weight: 700;
font-size: 7vw;
margin-right: 8vw;
color: #80cbc4
}
.stat>div {
width: 40%;
height: 14vw;
justify-content: center;
display: flex;
flex-direction: column;
}
.stat>div>.button {
width: 11vw;
font-size: 1vw;
font-weight: 600;
}
.stat>div>h3 {
font-size: 1.3vw;
margin: 0.3vw 0px;
}
.stat>div>p {
margin: 0px;
font-size: 1.1vw;
color: #b0bec5;
}
.feature {
text-align: center;
padding: 2.3vw 0;
background-color: #121212;
color: #eee;
margin-bottom: 1vw;
}
.feature h2 {
margin: 0px;
font-size: 2.75vw;
margin-bottom: 3vw;
}
.feature img {
max-width: 60%;
height: auto;
}
.feature video {
width: 50%;
}
.faq-item {
margin: 1.1vw 0;
}
.faq-question {
display: flex;
justify-content: space-between;
width: 60%;
margin: 0 auto;
}
.faq-answer {
font-size: 1.1vw;
color: #b0bec5;
text-align: left;
width: 60%;
margin: 0.6vw auto;
display: none;
}
.arrow {
transition: transform 0.3s ease;
}
</style>
<link rel="shortcut icon" type="image/x-icon" href="website-resources/favicon.png">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WZJ7ZNQT"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id="top">
<div id="left">
<h1>Stay <b>Focused</b></h1>
<h1>Cut <b>Distractions</b></h1>
<h1>on <b>YouTube</b></h1>
<p>A browser extension that Removes YouTube recommendations, suggestions, shorts and homepage.</p>
<div>
<div class="button dark" onclick="location.href='https://chromewebstore.google.com/detail/youshield-remove-youtube/iohilpdcenclcjbjbebbjgpiimobkpje'">Add to Chrome</div>
<div class="button light" onclick="location.href='https://addons.mozilla.org/en-US/firefox/addon/youshield-remove-youtube-short/?utm_source=zxtube.github.io/YouShield&utm_medium=referral'">Add to Firefox <img src="website-resources/arrow.svg"></div>
</div>
</div>
</div>
<video id="rightVid" src="website-resources/removesHomepageRecommendations.mp4" alt="Showcasing how youshield removes all video recommendations in the homepage" autoplay muted loop></video>
<div class="stat">
<h1>3.7M</h1>
<div>
<h3>Daily uploads on YouTube</h3>
<p>With 3.7 million videos uploaded daily, it's hard to focus on what matters to you.</p>
<div class="button dark" onclick="location.href='https://chromewebstore.google.com/detail/youshield-remove-youtube/iohilpdcenclcjbjbebbjgpiimobkpje'">Find What Matters</div>
</div>
</div>
<div class="feature" id="remove-shorts">
<h2>Break Free from Shorts' Endless Scroll</h2>
<video src="website-resources/removesSearchShorts.mp4" alt="How YouShield removes YouTube Shorts" autoplay muted loop></video>
</div>
<div class="feature blue" id="remove-sidebar">
<h2>Stop Sidetracks, More Immersive Watching</h2>
<video src="website-resources/removesSidebarRecommendations.mp4" alt="How YouShield removes the sidebar" autoplay muted loop></video>
</div>
<div class="feature" id="set-time-limit">
<h2>Control Watching, Keep Time Promises</h2>
<video src="website-resources/limitWatchingRandomVideos.mp4" alt="How YouShield sets a time limit on YouTube usage" autoplay muted loop></video>
</div>
<div id="faq" class="feature">
<h2>Frequently Asked Questions</h2>
<div class="faq-item">
<div class="faq-question button light" onclick="toggleFaq(this)">
How do I install YouShield?<span class="arrow">▼</span>
</div>
<div class="faq-answer">You can install YouShield by visiting the <a href="https://chromewebstore.google.com/detail/youshield-remove-youtube/iohilpdcenclcjbjbebbjgpiimobkpje">Chrome Web Store</a> or <a href="https://addons.mozilla.org/en-US/firefox/addon/youshield-remove-youtube-short/?utm_source=zxtube.github.io/YouShield&utm_medium=referral">Firefox Add-ons</a> page
and clicking "Add to Browser".</div>
</div>
<div class="faq-item">
<div class="faq-question button light" onclick="toggleFaq(this)">
What is the 'Consume' button?<span class="arrow">▼</span>
</div>
<div class="faq-answer">The consume button in the homepage makes you enter consume mode, which means that all recommendations won't be removed. There's a consume limit that you set everyday, it decides how long you can spend watching videos in consume mode. To set the consume limit watch <a href="#set-time-limit">the video above</a></div>
</div>
<div class="faq-item">
<div class="faq-question button light" onclick="toggleFaq(this)">
How do I set the consume limit?<span class="arrow">▼</span>
</div>
<div class="faq-answer">After installing YouShield, in the top right click the extensions icon then find YouShield in the list, click it and set the consume limit to whatever you want, then in youtube.com click the consume button, and you'll enter consume mode</div>
</div>
<div class="faq-item">
<div class="faq-question button light" onclick="toggleFaq(this)">
How do I take a rest and watch fun videos?<span class="arrow">▼</span>
</div>
<div class="faq-answer">After installing YouShield, in the top right click the extensions icon then find YouShield in the list, click it and set the consume limit to whatever you want, then in youtube.com click the consume button, and you'll enter consume mode. You need to set the consume limit everyday</div>
</div>
<div class="faq-item">
<div class="faq-question button light" onclick="toggleFaq(this)">
What is the 'For You' button?<span class="arrow">▼</span>
</div>
<div class="faq-answer">The 'For You' button sends you to the subscriptions page so that you can enjoy watching some videos but also benefit and learn. This of course means that you need to unsubscribe from all channels that are just for fun and only keep the quality channels</div>
</div>
</div>
<footer style="background-color: #121212; color: #eee; font-family: 'IBM Plex Mono'; text-align: center;">
<p style="color: #777; font-size: 1.2vw;">Published by YouShield, 2024.</p>
<p style="font-size: 1vw; margin-top: 1vw;">
<a href="https://zxtube.github.io/YouShield/privacypolicy" style="color: #80cbc4; text-decoration: none;">Privacy Policy</a> |
<a href="https://zxtube.github.io/YouShield/termsofservice" style="color: #80cbc4; text-decoration: none;">Terms of Service</a>
</p>
</footer>
<script>
function toggleFaq(questionElem) {
let answer = questionElem.nextElementSibling;
var arrow = questionElem.querySelector('.arrow');
answer.style.display = answer.style.display !== 'block' ? 'block' : 'none';
arrow.style.transform = answer.style.display === 'block' ? 'rotate(180deg)' : 'rotate(0deg)';
}
</script>
</body>
</html>