-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
354 lines (332 loc) · 19.4 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
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta name="description" content="What is an Incognito Window/Private Browsing and how do I use it?" />
<meta name="keywords" content="web, browser, settings, code, tracking, analytics, js, developer" />
<meta name="author" content="Leo Herzog | herzog.tech" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.purple.min.css" />
<script async src="https://kit.fontawesome.com/24afb12102.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bowser@2/bundled.min.js"></script>
<title>What is Private Browsing?</title>
<style>
html {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
header > h1,
header > h2 {
margin: 0;
}
mark {
white-space: nowrap;
}
#source {
position: absolute;
top: 16px;
right: 16px;
}
.instructions {
display: none;
padding: 0 10rem;
}
</style>
</head>
<body>
<main class="container">
<article>
<header>
<h1 id="supported">Loading...</h1>
</header>
<p>
<span class="featurename">Private Browsing mode</span> (sometimes called “<span class="othername">Incognito Mode</span>”) is a window that you can open in
<select id="browser" style="width: fit-content; padding: 2px 48px 2px 8px; margin: 0px" aria-label="Choose your browser">
<option disabled>Mobile</option>
<option id="mobile-safari" data-icon="fa-brands fa-safari">Safari for iOS</option>
<option id="mobile-chrome" data-icon="fa-brands fa-chrome">Google Chrome</option>
<option id="mobile-firefox" data-icon="fa-brands fa-firefox-browser">Mozilla Firefox</option>
<option id="mobile-other" data-icon="fa-regular fa-mobile">Other Mobile Browsers</option>
<option disabled>Tablet</option>
<option id="tablet-safari" data-icon="fa-brands fa-safari">Safari for iPad</option>
<option id="tablet-chrome" data-icon="fa-brands fa-chrome">Google Chrome</option>
<option id="tablet-firefox" data-icon="fa-brands fa-firefox-browser">Mozilla Firefox</option>
<option id="tablet-silk" data-icon="fa-brands fa-amazon">Silk Browser for Kindle</option>
<option id="tablet-other" data-icon="fa-regular fa-tablet">Other Tablet Browsers</option>
<option disabled>Desktop</option>
<option id="desktop-chrome" data-icon="fa-brands fa-chrome">Google Chrome</option>
<option id="desktop-firefox" data-icon="fa-brands fa-firefox-browser">Mozilla Firefox</option>
<option id="desktop-safari" data-icon="fa-brands fa-safari">Safari</option>
<option id="desktop-microsoft-edge" data-icon="fa-brands fa-edge">Microsoft Edge</option>
<option id="desktop-other" data-icon="fa-regular fa-laptop">Other Desktop Browsers</option>
</select>
where you're not logged into any websites. It's as if that window is a brand new computer, every time you open it! When you close that window, all of your history and cookies from that browsing session are immediately deleted. This is great for things like secret shopping for gifts,
quickly checking on another email account, or when using a public computer.
</p>
<p>
Learn more about <a id="moreinfo" target="_blank">what <span class="featurename">Private Browsing mode</span> can and cannot do</a>.
</p>
</article>
<article>
<header>
<h2 id="instructionsheader"></h2>
</header>
<section class="instructions" id="instructions-desktop-chrome">
<p>
Click the <mark><span class="fa-solid fa-ellipsis-vertical">⋮</span></mark> three-dots menu in the top right corner of your browser and click <mark>New Incognito Window</mark>
</p>
<p>or press <kbd class="modifier">Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>N</kbd> on your keyboard. That's it!</p>
<p>The Incognito Window will have a <span class="fa-solid fa-user-secret">🕵️</span> secret agent icon in the top left, plus a different, dark color to distinguish it from your other windows.</p>
</section>
<section class="instructions" id="instructions-desktop-firefox">
<p>
Click the <mark><span class="fa-solid fa-bars">☰</span></mark> hamburger menu in the top right corner of your browser and click <mark>New private window</mark>
</p>
<p>or press <kbd class="modifier">Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> on your keyboard. That's it!</p>
<p>The Private Browsing window will have a <span class="fa-solid fa-mask" style="color: purple">🎭</span> purple mask icon in the top right to distinguish it from your other windows.</p>
</section>
<section class="instructions" id="instructions-desktop-safari">
<p>Click <mark>File</mark> in the top left corner of your screen and click <mark>New Private Window</mark></p>
<p>or press <kbd class="modifier">⌘</kbd> + <kbd>Shift</kbd> + <kbd>N</kbd> on your keyboard. That's it!</p>
<p>The Private Browsing window will have a dark grey address bar to distinguish it from your other windows.</p>
</section>
<section class="instructions" id="instructions-desktop-microsoft-edge">
<p>
Click the <mark><span class="fa-solid fa-ellipsis">…</span></mark> three-dots menu in the top right corner of your browser and click <mark><span class="fa-solid fa-browser">🗔</span> New InPrivate window</mark>
</p>
<p>or press <kbd class="modifier">Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> on your keyboard. That's it!</p>
<p>The InPrivate window will say "InPrivate" in the top right, and will have a different, dark color distinguish it from your other windows.</p>
</section>
<section class="instructions" id="instructions-desktop-other">
<p>Instructions may vary depending on your web browser.</p>
<p>
Look around for a feature called "Private Browsing" in your browser's <mark><span class="fa-solid fa-bars">☰</span></mark> hamburger menu or <mark><span class="fa-solid fa-ellipsis-vertical">⋮</span></mark> three-dots menu.
</p>
<a class="browserhowtosearchquery" target="_blank"
><button>Search for Instructions for <span class="browsername"></span></button
></a>
</section>
<section class="instructions" id="instructions-tablet-safari">
<p>
Tap the <mark><span class="fa-solid fa-square-dashed-circle-plus">⧉</span></mark> overlapping squares icon in the top right corner of your screen and tap <mark>New Private Tab</mark>
</p>
<p>or press <kbd class="modifier">⌘</kbd> + <kbd>Shift</kbd> + <kbd>N</kbd> on a connected keyboard. That's it!</p>
<p>The Private Browsing window will have a dark grey address bar and black buttons instead of blue to distinguish it from your other windows.</p>
</section>
<section class="instructions" id="instructions-tablet-chrome">
<p>
Tap the <mark><span class="fa-solid fa-ellipsis-vertical">⋮</span></mark> three-dots menu in the top right corner of your browser and tap <mark>New Incognito Tab</mark>
</p>
<p>or press <kbd class="modifier">Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>N</kbd> on a connected keyboard. That's it!</p>
<p>The Incognito Window will have a <span class="fa-solid fa-user-secret">🕵️</span> secret agent icon in the top left, plus a different, dark color to distinguish it from your other windows.</p>
</section>
<section class="instructions" id="instructions-tablet-firefox">
<p>Open a <span class="fa-solid fa-circle-plus">⊕</span> New Tab and tap the <span class="fa-solid fa-mask">🎭</span> mask icon in the top right corner</p>
<p>or press <kbd class="modifier">Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> on a connected keyboard. That's it!</p>
<p>The the whole app will have a purple background to distinguish it from the normal mode.</p>
</section>
<section class="instructions" id="instructions-tablet-silk">
<p>
Tap the <mark><span class="fa-solid fa-ellipsis-vertical">⋮</span></mark> three-dots menu in the bottom right corner of your browser and tap <mark><span class="fa-solid fa-eye">👁</span> Enter Private Browsing</mark>
</p>
<p>or press <kbd class="modifier">Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>N</kbd> on a connected keyboard. That's it!</p>
<p>The the whole app will have a purple background to distinguish it from the normal mode.</p>
</section>
<section class="instructions" id="instructions-tablet-other">
<p>Instructions may vary depending on your web browser.</p>
<p>
Look around for a feature called "Private Browsing" in your browser's <mark><span class="fa-solid fa-bars">☰</span></mark> hamburger menu or <mark><span class="fa-solid fa-ellipsis-vertical">⋮</span></mark> three-dots menu.
</p>
<a class="browserhowtosearchquery" target="_blank"
><button>Search for Instructions for <span class="browsername"></span></button
></a>
</section>
<section class="instructions" id="instructions-mobile-safari">
<p>
Tap the <mark><span class="fa-solid fa-square-dashed-circle-plus">⧉</span></mark> overlapping squares icon in the bottom right corner of your screen and tap <mark>New Private Tab</mark>
</p>
<p>or press <kbd class="modifier">⌘</kbd> + <kbd>Shift</kbd> + <kbd>N</kbd> on your keyboard. That's it!</p>
<p>The Private Browsing window will have a dark grey address bar and black buttons instead of blue to distinguish it from your other windows.</p>
</section>
<section class="instructions" id="instructions-mobile-chrome">
<p>
Tap the <mark><span class="fa-solid fa-ellipsis-vertical">⋮</span></mark> three-dots menu in the top right corner of your browser and tap <mark>New Incognito Tab</mark>
</p>
<p>or press <kbd class="modifier">Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>N</kbd> on your keyboard. That's it!</p>
<p>The Incognito Window will have a <span class="fa-solid fa-user-secret">🕵️</span> secret agent icon in the top left, plus a different, dark color to distinguish it from your other windows.</p>
</section>
<section class="instructions" id="instructions-mobile-firefox">
<p>Open a <span class="fa-solid fa-circle-plus">⊕</span> New Tab and tap the <span class="fa-solid fa-mask">🎭</span> mask icon in the top right corner</p>
<p>or press <kbd class="modifier">Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> on your keyboard. That's it!</p>
<p>The the whole app will have a purple background to distinguish it from the normal mode.</p>
</section>
<section class="instructions" id="instructions-mobile-other">
<p>Instructions may vary depending on your web browser.</p>
<p>
Look around for a feature called "Private Browsing" in your browser's <mark><span class="fa-solid fa-bars">☰</span></mark> hamburger menu or <mark><span class="fa-solid fa-ellipsis-vertical">⋮</span></mark> three-dots menu.
</p>
<a class="browserhowtosearchquery" target="_blank"
><button>Search for Instructions for <span class="browsername"></span></button
></a>
</section>
</article>
</main>
<div>
<a href="https://github.com/leoherzog/PrivateBrowsing" target="_blank" aria-label="View source code">
<svg id="source" height="32" viewBox="0 0 16 16" version="1.1" width="32">
<path
fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>
</a>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const browser = bowser.getParser(window.navigator.userAgent);
let supported = browser.satisfies({
chrome: '>=0.3',
firefox: '>=3.5',
safari: '>=4',
opera: '>=22',
edge: '>=0',
ie: '>=8',
vivaldi: '>=1.0',
amazon_silk: '>=3.0',
});
console.log(browser);
let browsername = browser.parsedResult?.browser?.name;
if (window.navigator.brave) browsername = 'Brave'; // ugh
let browserversion = browser.parsedResult?.browser?.version;
let browsericon;
switch (browsername) {
case 'Chrome':
case 'Chromium':
case 'Electron':
browsericon = 'fa-brands fa-chrome';
break;
case 'Firefox':
browsericon = 'fa-brands fa-firefox-browser';
break;
case 'Safari':
browsericon = 'fa-brands fa-safari';
break;
case 'Opera':
browsericon = 'fa-brands fa-opera';
break;
case 'Microsoft Edge':
browsericon = 'fa-brands fa-edge';
break;
case 'Internet Explorer':
browsericon = 'fa-brands fa-internet-explorer';
break;
default:
browsericon = 'fa-duotone fa-browser';
}
let browserstring = browsername + ' ' + browserversion;
let featurename, othernames;
switch (browsername) {
case 'Chrome':
case 'Chromium':
case 'Electron':
featurename = 'Incognito Mode';
othername = 'Private Browsing Mode';
break;
case 'Firefox':
case 'Safari':
case 'Opera':
case 'Amazon Silk':
featurename = 'Private Browsing Mode';
othername = 'Incognito Mode';
break;
case 'Microsoft Edge':
case 'Internet Explorer':
featurename = 'InPrivate Mode';
othername = 'Private Browsing Mode” or “Incognito Mode';
break;
case 'Vivaldi':
featurename = 'Private Window';
othername = 'Incognito Window';
default:
featurename = 'Private Browsing Mode';
othername = 'Incognito Mode';
}
switch (browsername) {
case 'Chrome':
case 'Chromium':
case 'Electron':
document.getElementById('moreinfo').href = 'https://support.google.com/chrome/answer/9845881';
break;
case 'Firefox':
document.getElementById('moreinfo').href = 'https://support.mozilla.org/en-US/kb/common-myths-about-private-browsing';
break;
case 'Safari':
document.getElementById('moreinfo').href = 'https://support.apple.com/guide/safari/browse-privately-ibrw1069/mac';
break;
case 'Opera':
document.getElementById('moreinfo').href = 'https://help.opera.com/en/touch/private-mode/';
break;
case 'Microsoft Edge':
case 'Internet Explorer':
document.getElementById('moreinfo').href = 'https://www.microsoft.com/en-us/edge/learning-center/private-browsing';
break;
default:
document.getElementById('moreinfo').href = 'https://en.wikipedia.org/wiki/Privacy_mode';
}
Array.from(document.getElementsByClassName('browsername')).forEach(function (element) {
element.innerText = browsername;
});
Array.from(document.getElementsByClassName('featurename')).forEach(function (element) {
element.innerText = featurename;
});
Array.from(document.getElementsByClassName('othername')).forEach(function (element) {
element.innerText = othername;
});
let browserhowtosearchquery = 'https://www.google.com/search?q=' + browsername.replaceAll(' ', '+') + '+' + browserversion + '+How+to+Private+Browse';
Array.from(document.getElementsByClassName('browserhowtosearchquery')).forEach(function (element) {
element.href = browserhowtosearchquery;
});
if (supported) {
document.getElementById('supported').innerHTML = '<abbr title="' + browserstring + '" data-tooltip="' + browserstring + '">Your web browser</abbr> supports ' + featurename;
} else {
document.getElementById('supported').innerHTML = 'It is unknown if your web browser (<strong>' + browserstring + '</strong>) supports ' + featurename + '. <a href="' + browserhowtosearchquery + '" target="_blank">Search for more information</a>.';
}
let os = browser.parsedResult?.os?.name;
let platform = browser.parsedResult?.platform?.type;
if (os && os === 'Chrome OS') platform = 'desktop'; // https://github.com/bowser-js/bowser/issues/357
Array.from(document.getElementsByClassName('modifier')).forEach(function (element) {
element.innerText = os === 'macOS' ? '⌘' : 'Ctrl';
});
let platformplusbrowser = platform + '-' + browsername.replaceAll(' ', '-').toLowerCase();
let browserbutton = document.getElementById(platformplusbrowser);
if (browserbutton) {
browserbutton.selected = true;
} else {
document.getElementById(platform + '-other').selected = true;
}
document.getElementById('instructionsheader').innerHTML = '<span class="' + browserbutton.dataset.icon + '"></span> ' + browserbutton.value;
document.getElementById('instructions-' + platformplusbrowser).style.display = 'block';
document.getElementById('browser').addEventListener('change', function (e) {
let selection = e.srcElement.selectedOptions[0];
document.getElementById('instructionsheader').innerHTML = '<span class="' + selection.dataset.icon + '"></span> ' + selection.value;
Array.from(document.getElementsByClassName('instructions')).forEach(function (element) {
element.style.display = 'none';
});
document.getElementById('instructions-' + selection.id).style.display = 'block';
});
});
if (!String.prototype.replaceAll) {
String.prototype.replaceAll = function (str, newStr) {
if (Object.prototype.toString.call(str).toLowerCase() === '[object regexp]') {
return this.replace(str, newStr);
}
return this.replace(new RegExp(str, 'g'), newStr);
};
}
</script>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon='{"token": "a16441ca7eec4c49bf874fb5b97874fe"}'></script>
</body>
</html>