-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsettings.html
350 lines (323 loc) · 16 KB
/
settings.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
<!-- SimpleCookie, a minimalist yet efficient cookie manager for Firefox -->
<!-- Made with ❤ by micka from Paris -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SimpleCookie</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.0/css/all.min.css">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
margin: 0;
padding: 0;
}
.settings-container {
max-width: 500px;
margin: 40px auto;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
padding: 20px 40px;
position: relative;
}
h3 {
font-weight: bold;
font-size: 20px;
margin: 5px 0 10px;
}
h3 i {
margin-left: 10px;
color: #04A65D;
}
.settings-section {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.settings-section i {
margin-right: 21px;
color: #04A65D;
}
.settings-section label {
margin-left: auto;
}
.settings-section input[type="checkbox"] {
margin-left: 10px;
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.settings-section input[type="checkbox"]:checked::before {
content: '';
display: block;
width: 12px;
height: 12px;
background-color: #04A65D;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
}
@media (prefers-color-scheme: light) {
.info-icon,
.footer-icons i {
color: black;
}
}
@media (prefers-color-scheme: dark) {
.info-icon,
.footer-icons i {
color: white;
}
}
#imagePopup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 10px;
z-index: 1000;
text-align: center;
border-radius: 8px;
}
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.settings-section a {
text-decoration: none;
color: inherit;
display: flex;
align-items: center;
width: 100%;
}
.settings-section a:hover {
color: #F7CA18;
}
.version-text {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 10px;
color: #666;
}
</style>
</head>
<body>
<div class="settings-container">
<!-- Insights -->
<div class="section-spacing">
<h3 title="Customize the details displayed in SimpleCookie by showing or hiding specific aspects of websites and their associated cookies.">
Insights <i class="fas fa-magnifying-glass"></i>
</h3>
<hr>
<div class="settings-section">
<div title="Display an eye indicator next to the website corresponding to the active tab when you run SimpleCookie so you can easily locate, view and delete the cookies for the current website." style="display: flex; align-items: center;">
<i class="fas fa-eye" style="margin-right: 18px;"></i>
<span>Highlight the active tab</span>
</div>
<label>
<input type="checkbox" id="enableActiveTabHighlight" aria-label="Highlight the active tab">
</label>
</div>
<div class="settings-section">
<div title="Display a ghost icon for known tracking sites using an internal list derived from the 'Ghostery Tracker Database' to identify organizations/websites known to track behavior. While this does not confirm the collection of data in requests and cookies from these sites, they are known for their impact on user privacy. These websites are always listed in SimpleCookie, only the icon is optional." style="display: flex; align-items: center;">
<i class="fas fa-ghost" style="margin-right: 24px;"></i>
<span>Highlight tracking websites</span>
</div>
<label>
<input type="checkbox" id="enableGhostIcon" aria-label="Highlight known tracking websites">
</label>
</div>
<div class="settings-section">
<div title="Highlight websites that store cookies in special containers. Useful if you use Firefox's special container feature. These websites are always listed in SimpleCookie, only the icon is optional." style="display: flex; align-items: center;">
<i class="fas fa-road-barrier" style="margin-right: 16px;"></i>
<span>Highlight websites from special containers</span>
</div>
<label>
<input type="checkbox" id="enableSpecialJarIcon" aria-label="Highlight special container websites">
</label>
</div>
<div class="settings-section">
<div title="Highlight websites that have partitioned cookies, also known as CHIPS (Cookies Having Independent Partitioned State). Without partitioning, third-party cookies can track users and combine their information with many unrelated websites. This is now restricted with CHIPS. These websites are always listed in SimpleCookie, only the icon is optional." style="display: flex; align-items: center;">
<i class="fas fa-code-branch" style="margin-right: 22px;"></i>
<span>Highlight websites with partitioned cookies</span>
</div>
<label>
<input type="checkbox" id="enablePartitionIcon" aria-label="Highlight partitioned cookie websites">
</label>
</div>
</div>
<br>
<!-- myCleaner -->
<div class="section-spacing">
<h3 title="myCleaner is your personalized cleaner shortcut to delete what you want (browsing and download history are enabled by default). Feel free to select or deselect any of the options below.">
myCleaner <i class="fas fa-hand-sparkles"></i>
</h3>
<hr>
<div class="settings-section">
<div title="Small files stored by websites to remember things like user preferences and login information. Checking this box will delete all cookies, regardless of their favorites status. If you want to delete everything except your favorite cookies, leave this checkbox unchecked and use the Trash can icon in the Dock, which intentionally does not override the Favorites status." style="display: flex; align-items: center;">
<i class="fas fa-cookie-bite" style="margin-right: 20px;"></i>
<span>Cookies <i class="fas fa-triangle-exclamation" style="color: #FE0179; margin-left: 10px;"></i></span>
</div>
<label>
<input type="checkbox" id="mycleanerCookies" aria-label="Clean cookies">
</label>
</div>
<div class="settings-section">
<div title="A record of websites you've visited, including dates and times." style="display: flex; align-items: center;">
<i class="fas fa-clock-rotate-left" style="margin-right: 20px;"></i>
<span>Browsing history</span>
</div>
<label>
<input type="checkbox" id="mycleanerBrowsingHistory" aria-label="Clean browsing history">
</label>
</div>
<div class="settings-section">
<div title="Temporary files stored by Firefox to speed up loading times for frequently visited websites." style="display: flex; align-items: center;">
<i class="fas fa-memory" style="margin-right: 18px;"></i>
<span>Cached images and files</span>
</div>
<label>
<input type="checkbox" id="mycleanerCache" aria-label="Clean cached images and files">
</label>
</div>
<div class="settings-section">
<div title="Saved information that automatically populates forms, such as names, addresses, and credit card details." style="display: flex; align-items: center;">
<i class="fas fa-rectangle-list" style="margin-right: 18px;"></i>
<span>Autofill form data</span>
</div>
<label>
<input type="checkbox" id="mycleanerAutofill" aria-label="Clean form data">
</label>
</div>
<div class="settings-section">
<div title="A log of files you've downloaded from the web, including their locations." style="display: flex; align-items: center;">
<i class="fas fa-download" style="margin-right: 20px;"></i>
<span>Download history</span>
</div>
<label>
<input type="checkbox" id="mycleanerDownloadHistory" aria-label="Clean download history">
</label>
</div>
<div class="settings-section">
<div title="Scripts that run in the background to manage caching and background tasks for web applications." style="display: flex; align-items: center;">
<i class="fas fa-cog" style="margin-right: 20px;"></i>
<span>Service workers</span>
</div>
<label>
<input type="checkbox" id="mycleanerService" aria-label="Clean service workers">
</label>
</div>
<div class="settings-section">
<div title="Information stored by browser extensions or plugins to enhance their functionality." style="display: flex; align-items: center;">
<i class="fas fa-plug" style="margin-right: 24px;"></i>
<span>Plugin data</span>
</div>
<label>
<input type="checkbox" id="mycleanerPlugin" aria-label="Clean plugin data">
</label>
</div>
<div class="settings-section">
<div title="Data stored by websites on your device for offline access and persistent state." style="display: flex; align-items: center;">
<i class="fas fa-box" style="margin-right: 22px;"></i>
<span>Local storage data</span>
</div>
<label>
<input type="checkbox" id="mycleanerLocal" aria-label="Clean local storage data">
</label>
</div>
<div class="settings-section">
<div title="A low-level API for storing large amounts of structured data in the browser, allowing for efficient retrieval." style="display: flex; align-items: center;">
<i class="fas fa-database" style="margin-right: 22px;"></i>
<span>IndexedDB data</span>
</div>
<label>
<input type="checkbox" id="mycleanerIndexed" aria-label="Clean indexedDB data">
</label>
</div>
<div class="settings-section">
<div title="Usernames and passwords stored in the Firefox password manager. You should be very careful here..." style="display: flex; align-items: center;">
<i class="fas fa-key" style="margin-right: 20px;"></i>
<span>Saved passwords <i class="fas fa-triangle-exclamation" style="color: #FE0179; margin-left: 10px;"></i></span>
</div>
<label>
<input type="checkbox" id="mycleanerPasswords" aria-label="Clean saved passwords">
</label>
</div>
</div>
<br>
<!-- Advanced settings -->
<div class="section-spacing">
<h3 title="Extra settings for advanced users.">
Advanced <i class="fas fa-wrench"></i>
</h3>
<hr>
<div class="settings-section">
<a href="#" id="resetButton" title="Clear all of your favorites (not the cookies, just the 'star' status) and reset all of the above settings back to their factory defaults.">
<i class="fas fa-undo" style="margin-right: 21px;"></i>Reset your favorites and settings
</a>
</div>
<div class="settings-section">
<a href="#" id="exportCookies" title="Export all cookies stored by Firefox to a JSON file. Be careful here, as all cookies will be stored in clear text in an unencrypted file, allowing anyone with the file to eventually log in to some sites using your stored credentials.">
<i class="fas fa-file-upload" style="margin-right: 25px;"></i>Export cookies
</a>
</div>
<div class="settings-section">
<a href="#" id="importCookies" title="Import cookies from a JSON file. Be careful what kind of cookies you are importing. Use this feature if you know what you are doing, or if you are importing your own JSON file that you have previously exported. Some cookies may not be imported if, for example, their expiry dates have been passed.">
<i class="fas fa-file-download" style="margin-right: 25px;"></i>Import cookies
</a>
</div>
</div>
<br>
<!-- Links -->
<div class="section-spacing">
<h3 title="Useful links (especially the last one!)">
Links <i class="fas fa-link"></i>
</h3>
<hr>
<div class="settings-section">
<a href="https://github.com/mickaphd/SimpleCookie" target="_blank" title="SimpleCookie repository on GitHub. Feel free to report any problems or requests there.">
<i class="fab fa-github"></i> GitHub repository
</a>
</div>
<div class="settings-section">
<a href="https://addons.mozilla.org/en-US/firefox/addon/simplecookie/" target="_blank" title="SimpleCookie in the Firefox Add-ons store.">
<i class="fab fa-firefox"></i> Firefox Add-ons store
</a>
</div>
<div class="settings-section">
<a href="#" id="tipIcon" title="Tip me with bitcoin over the Lightning network (Bolt12 invoice). Thank you!">
<i class="fas fa-bolt"></i>
<span>Tip me with ₿ on Lightning!</span>
</a>
</div>
</div>
<!-- Tip popup -->
<div id="imagePopup">
<p style="margin-top: 2px; font-size: 12px; color: #333;">
<b><i>Thank you for your support</i> ❤️</b>
</p>
<img src="resources/lightning_bolt12.jpeg" style="max-width: 220px; height: auto;">
<p style="margin-top: 2px; font-size: 12px; color: #333;">azuresync08@phoenixwallet.me</p>
</div>
<!-- SimpleCookie version -->
<div id="overlay"></div>
<div id="version-text" class="version-text">SimpleCookie v.</div>
<script src="settings.js"></script>
</div>
</body>
</html>