-
Notifications
You must be signed in to change notification settings - Fork 15
/
index.html
280 lines (235 loc) · 13.1 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
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="We check for and encourage the use of an ad blocker.">
<meta name="author" content="fivefilters.org">
<!--link rel="icon" href="favicon.ico"-->
<meta property="og:image" content="ff-logo.png" />
<title>Block Ads! Adblock test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="css/cover.css">
<style>
#no-blocking, #partial-blocking, #all-good {
display: none;
}
#partial-blocking p.main-warning {
font-size: 40px;
color: orange;
font-weight: bold;
letter-spacing: -1.2px;
}
#no-blocking p.main-warning {
font-size: 40px;
color: #999;
font-weight: bold;
letter-spacing: -1.2px;
}
#all-good, #no-js {
color: lightgreen;
}
#all-good p { font-size: 30px; }
#no-js p { font-size: 25px; }
@media (min-width: 768px) {
#all-good p { font-size: 40px; }
#no-js p { font-size: 35px; }
}
.github, .chrome, .firefox, .safari, .opera, .ios, .edge, .pihole {
display: none;
}
/* Browser logos from https://github.com/alrra/browser-logos */
</style>
</head>
<body>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand"><a href="index.html">Block Ads!</a></h3>
<nav>
<ul class="nav masthead-nav">
<!--<li><a href="shorten.html">URL Shortener</a></li>-->
<!-- <li><a href="#">Promote ad blocking</a></li> -->
<li><a href="why.html">Why?</a></li>
<li><a href="acceptable.html">'Acceptable' Ads?</a></li>
</ul>
</nav>
</div>
</div>
<div class="inner cover">
<!-- Loading image -->
<p class="lead" id="testing" style="display: none;"><img src="images/testing.gif" alt="testing" /></p>
<!-- Ad blocking tests (requests for these images should be blocked by your ad blocker) -->
<div id="image-tests">
<img id="test-ad" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="visibility: hidden; width:1px; height:1px;" alt="test-ad" />
<img id="test-whitelist" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="visibility: hidden; width:1px; height:1px;" alt="test-whitelist" />
</div>
<!-- No JS -->
<noscript>
<div id="no-js">
<p class="lead"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> You're advanced! (No JS)</p>
</div>
</noscript>
<!-- Evertying okay? -->
<div id="all-good">
<p class="lead"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Ad blocking enabled!</p>
</div>
<!-- No ad blocking -->
<div id="no-blocking">
<p class="lead main-warning">No ad blocking detected</p>
<p class="lead">We suggest you install an ad blocker</p>
<p class="lead">
<a href="https://github.com/gorhill/uBlock#installation" class="btn btn-lg btn-success github"><img src="images/chrome_32x32.png" alt="chrome" /> Get uBlock Origin</a>
<a href="https://microsoftedge.microsoft.com/addons/detail/ublock-origin/odfafepnkmbhccpbejgmiehpchacaeak" class="btn btn-lg btn-success edge"><img src="images/edge_32x32.png" alt="edge" /> Get uBlock Origin</a>
<a href="https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm" class="btn btn-lg btn-success chrome"><img src="images/chrome_32x32.png" alt="chrome" /> Get uBlock Origin</a>
<a href="https://addons.mozilla.org/firefox/addon/ublock-origin/" class="btn btn-lg btn-success firefox"><img src="images/firefox_32x32.png" alt="firefox" /> Get uBlock Origin</a>
<a href="https://better.fyi/" class="btn btn-lg btn-success safari"><img src="images/safari_32x32.png" alt="safari" /> Get Better Blocker</a>
<a href="https://addons.opera.com/extensions/details/ublock/" class="btn btn-lg btn-success opera"><img src="images/opera_32x32.png" alt="opera" /> Get uBlock Origin</a>
<a href="https://better.fyi/" class="btn btn-lg btn-success ios"><img src="images/safari-ios_32x32.png" alt="ios" /> Get Better Blocker</a>
<a href="https://discourse.pi-hole.net/t/how-do-i-configure-my-devices-to-use-pi-hole-as-their-dns-server/245" class="btn btn-lg btn-default pihole"><img src="images/pihole_32x32.png" alt="ios" /> Set up Pi-hole</a>
</p>
</div>
<!-- Partial blocking -->
<div id="partial-blocking">
<p class="lead main-warning">Only partial blocking detected</p>
<p class="lead">We suggest you install a better ad blocker <a href="acceptable.html">(why?)</a></p>
<p class="lead">
<a href="https://github.com/gorhill/uBlock#installation" class="btn btn-lg btn-success github"><img src="images/chrome_32x32.png" alt="chrome" /> Get uBlock Origin</a>
<a href="https://microsoftedge.microsoft.com/addons/detail/ublock-origin/odfafepnkmbhccpbejgmiehpchacaeak" class="btn btn-lg btn-success edge"><img src="images/edge_32x32.png" alt="edge" /> Get uBlock Origin</a>
<a href="https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm" class="btn btn-lg btn-success chrome"><img src="images/chrome_32x32.png" alt="chrome" /> Get uBlock Origin</a>
<a href="https://addons.mozilla.org/firefox/addon/ublock-origin/" class="btn btn-lg btn-success firefox"><img src="images/firefox_32x32.png" alt="firefox" /> Get uBlock Origin</a>
<a href="https://better.fyi/" class="btn btn-lg btn-success safari"><img src="images/safari_32x32.png" alt="safari" /> Get Better Blocker</a>
<a href="https://addons.opera.com/extensions/details/ublock/" class="btn btn-lg btn-success opera"><img src="images/opera_32x32.png" alt="opera" /> Get uBlock Origin</a>
<a href="https://better.fyi/" class="btn btn-lg btn-success ios"><img src="images/safari-ios_32x32.png" alt="ios" /> Get Better Blocker</a>
<a href="https://discourse.pi-hole.net/t/how-do-i-configure-my-devices-to-use-pi-hole-as-their-dns-server/245" class="btn btn-lg btn-default pihole"><img src="images/pihole_32x32.png" alt="ios" /> Set up Pi-hole</a>
</p>
</div>
<div class="mastfoot">
<div class="inner" style="font-size: 1.3em;">
<p>Made by <a href="https://www.fivefilters.org">FiveFilters.org</a> • <a href="https://github.com/fivefilters/block-ads">Source</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/imagesloaded.min.js"></script>
<script>
// function to check if image has loaded, taken from http://stackoverflow.com/a/1977898
function isImageOk(img) {
// Image was removed from the page code (issue #1)
if (typeof img === 'undefined') {
return false;
}
// During the onload event, IE correctly identifies any images that
// weren’t downloaded as not complete. Others should too. Gecko-based
// browsers act like NS4 in that they report this incorrectly.
// NOTE: This check doesn't seem to be needed - and doesn't work
// reliably in MS Edge in my tests. So disabling for now.
//if (!img.complete) {
// return false;
//}
// However, they do have two very useful properties: naturalWidth and
// naturalHeight. These give the true size of the image. If it failed
// to load, either of these should be zero.
if (typeof img.naturalWidth !== "undefined" && img.naturalWidth <= 1) {
return false;
}
// No other way of checking: assume it’s ok.
return true;
}
var isMobile = /Mobile|mini|Fennec|Android|iP(ad|od|hone)/.test(navigator.appVersion);
var isPiHole = (window.location.search.substring(1) == 'pihole');
$(document).ready(function() {
$("#testing").fadeIn('fast');
$("img#test-ad").attr('src', 'https://widgets.outbrain.com/images/widgetIcons/ob_logo_16x16.png?advertiser=1&' + escape(new Date()));
$("img#test-whitelist").attr('src', 'https://gstatic.com/webp/gallery3/1.png?ads=1&' + escape(new Date()));
// browser detect code from http://stackoverflow.com/a/13480430
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "Other";
this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
},
searchString: function (data) {
for (var i = 0; i < data.length; i++) {
var dataString = data[i].string;
this.versionSearchString = data[i].subString;
if (dataString.indexOf(data[i].subString) !== -1) {
return data[i].identity;
}
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index === -1) {
return;
}
var rv = dataString.indexOf("rv:");
if (this.versionSearchString === "Trident" && rv !== -1) {
return parseFloat(dataString.substring(rv + 3));
} else {
return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
}
},
dataBrowser: [
{string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
{string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
{string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
{string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
{string: navigator.userAgent, subString: "Opera", identity: "Opera"},
{string: navigator.userAgent, subString: "OPR", identity: "Opera"},
{string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
{string: navigator.userAgent, subString: "iPad", identity: "iOS"},
{string: navigator.userAgent, subString: "iPhone", identity: "iOS"},
{string: navigator.userAgent, subString: "iPod", identity: "iOS"},
{string: navigator.userAgent, subString: "Safari", identity: "Safari"}
]
};
if (isPiHole) {
$(".pihole").show();
} else {
BrowserDetect.init();
if (BrowserDetect.browser === "Firefox") {
$(".firefox").show();
} else if (BrowserDetect.browser === "Chrome") {
$(".chrome").show();
} else if (BrowserDetect.browser === "Safari") {
$(".safari").show();
} else if (BrowserDetect.browser === "Opera") {
$(".opera").show();
} else if (BrowserDetect.browser === "MS Edge") {
$(".edge").show();
} else if (BrowserDetect.browser === "iOS" && !window.MSStream) {
$(".ios").show();
} else {
$(".github").show();
}
}
$('#image-tests').imagesLoaded(function() {
var adLoaded = isImageOk($("img#test-ad")[0]);
var whitelistAdLoaded = isImageOk($("img#test-whitelist")[0]);
$("#testing").hide();
// all-good if both ads failed
// Unless we're testing on mobile, or for Pi-hole.net users.
if (!adLoaded && (!whitelistAdLoaded || (isMobile || isPiHole || (BrowserDetect.browser === "Safari")))) {
$("#all-good").fadeIn();
} else if (adLoaded) {
$("#no-blocking").fadeIn();
} else if (whitelistAdLoaded) {
//TODO: The check for whitelist needs to be updated (need something that Adblock Plus, and those with 'acceptable ads' programs, will load but not uBlock Origin).
//$("#partial-blocking").fadeIn();
$("#all-good").fadeIn();
}
});
});
//document.write("You are using <strong>" + BrowserDetect.browser + "</strong> with version <strong>" + BrowserDetect.version + "</strong>");
</script>
</body>
</html>