-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
372 lines (356 loc) · 10.7 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
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="Mastodon De-Mob">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Mastodon De-Mob">
<meta name="twitter:image:src" content="https://www.codesections.com/codesections_logo.png">
<meta property="og:type" content="article">
<meta property="og:url" content="www.codesections.com">
<meta property="og:site_name" content="CodeSections">
<meta property="article:section" content="Article Section">
<meta property="og:image" itemprop="image primaryImageOfPage" content="https://www.codesections.com/codesections_logo_large.png"><meta name="og:description" content="A tool to allow Mastodon users to better protect themselves from harassment">
<meta name="description" content="A tool to allow Mastodon users to better protect themselves from harassment">
<meta name="twitter:description" content="A tool to allow Mastodon users to better protect themselves from harassment">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#d9d9d9">
<link rel="canonical" href="https://mastodon-de-mob.codesections.com">
<title>
Mastodon De-Mob
</title>
<style>
/* The CSS and JavaScript for this page are both entirely inline because,
* even with that added content, the compressed page is under 14KB and thus
* fits in the initial TCP window (1 round trip). Comments remain in for
* the same reason.
*
* The CSS follows the BEM style, which is a nice fit for a project of
* this size. http://getbem.com/ The colors and general look/feel
* are heavily modeled on the Mastodon default theme, since many visitors
* will likely come directly from there.
*/
/*
* Page-Global Styles
*/
.body__defaults {
margin: 20px auto;
max-width: 650px;
line-height: 1.6;
font-size: 18px;
color: #fff;
background-color: #444b5d;
padding: 0 10px;
font-family: -apple-system, /* Use system fonts to save page-weight */
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial, sans-serif
}
.header--main {
margin-top: 1em;
line-height: 1em;
margin-bottom: 0;
}
.header--secondary {
margin-top: 2em;
}
.link {
color: #2b90d9; /* blue that matches buttons from Mastodon */
text-decoration: none;
}
.link--dark {
color: #0071F0; /* Slightly darker blue for light backgrounds */
}
.tagline {
margin-top: 0;
}
.inline-code {
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
word-break: break-all;
}
.button {
border: 10px none;
border-radius: 4px;
color: #fff;
cursor: pointer;
display: inline-block;
font-weight: 500;
line-height: 36px;
padding: 0 16px;
text-align: center;
font-size: 1em;
margin-top: 1em;
font-size: 1.25em;
}
.button--good {
background-color: #2b90d9; /* Blue, matching Mastodon "Toot!" button */
float: right;
margin-right: 15%;
}
.button--error {
background-color: #c00;
float: left;
margin-left: 15%;
}
/*
* Styles for forms
*/
.form {
width: 50%;
width: fit-content;
margin: auto;
margin-top: 3em;
text-align: center;
}
.form--pick-toot,
.login__pick-toot {
display: none;
}
.form__label {
font-size: 2em;
}
.form__input {
font-size: 1em;
}
.form__button {
background-color: #2b90d9; /* Blue, matching Mastodon "Toot!" button */
border: 10px none;
border-radius: 4px;
color: #fff;
cursor: pointer;
display: inline-block;
font-weight: 500;
line-height: 36px;
padding: 0 16px;
text-align: center;
font-size: 1em;
margin-top: 1em;
}
/*
* Styles for the Results section (shown once loaded)
*/
.content__results {
display: none; /* Initially hidden, show by JavaScript */
}
.results--target-toot {
overflow: hidden;
border-spacing: 0;
margin: auto;
border-radius: 12px;
text-align: left;
padding: 6px 13px;
border-bottom: 1px solid #393f4f; /* grey, same as used in Mastodon*/
max-width: 63vw; /* to ensure table doesn't overflow on mobile */
background-color: #282c37; /* Dark grey; same as Mastodon timelines */
}
.results--target-toot a {
color: #2b90d9; /* blue that matches buttons from Mastodon */
text-decoration: none;
}
.results--target-toot .invisible {
display: inline-block;
width: 0;
height: 0;
font-size: 0;
line-height: 0;
}
.results--target-toot .ellipsis:after{
content: "\2026";
}
.toot-header__img {
width: 48px;
height: 48px;
padding-right: 1em;
float: left;
}
.account-name {
color: #606984; /* Light grey; same as used in Mastodon */
}
/*
* Styles for the loading screen
*/
.content__loading {
display: none; /* initially hidden, revealed by JavaScript */
text-align: center;
}
.loading--done {
display: none;
}
.error--unknown {
display: none;
}
.error--toot-not-found {
display: none;
}
@-webkit-keyframes blink {
50% {
color: transparent;
}
}
@keyframes blink {
50% {
color: transparent;
}
}
.loader__dot {
-webkit-animation: 1s blink infinite;
animation: 2s blink infinite;
}
.loader__dot:nth-child(2) {
-webkit-animation-delay: 250ms;
animation-delay: 250ms;
}
.loader__dot:nth-child(3) {
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
/*
* Alert styles
*/
.alert {
padding: .5em;
border-radius: 6px;
margin-top: 1em;
}
.alert__warning {
background-color: #ffc107;
color: #000;
}
.alert__error {
background-color: #c00;
display: none;
}
.header--alert {
display: block;
margin: auto;
width: -moz-fit-content;
width: fit-content;
}
.paragraph--alert {
margin: 1em;
line-height: 1.25em;
}
</style>
<body lang="en" class="body__defaults">
<h1 class="header--main" id="add-an-instance-h1">
Mastodon De-Mob
</h1>
<p class="tagline">
A <a class="link" href="https://www.codesections.com">codesections</a> project |
<a class="link" href="https://github.com/codesections/mastodon-de-mob">source code</a>
</p>
<noscript>
<div class="alert alert__warning">
<strong class="header--alert">JavaScript Required</strong>
<p class="paragraph--alert">Ok, yes, I know you probably have
JavaScript disabled for good reasons—I also value my privacy and
don't like the bloat of the modern web. But look, this app is
neither bloated nor spying on you. If you don't believe me, check
out the <a class="link" href="https://github.com/codesections/mastodon-de-mob">source</a>.
In fact, just read the source for this page—I didn't even minify
anything or take out the comments. You can see for yourself that
there aren't any trackers; just simple http requests to your mastodon
instance. This is one to add to your whitelist.
</p>
</div>
</noscript>
<div class="content__login">
<p class="login__auth">
A tool for
<a class="link" href="https://joinmastodon.org">Mastodon</a>
users designed to help prevent harassment. Using this tool, you can
block all the users who boosted or favorited a harassing toot.
This tool will simultaneously report the harassing toot to your
instance moderators and send them the following message:
</p>
<blockquote class="login__auth">
This toot is harassment, and I have blocked all the users who
boosted or favorited it using the Mastodon De-Mob tool.
</blockquote>
<p class="login__auth">
To get started, enter your instance below.
</p>
<form class="form form--auth">
<label class="form__label" for="instanceInput">
Instance:
</label>
<br>
<input class="form__input input--auth" type="text" id="instanceInput" placeholder="Enter instance name" required="">
<br>
<button class="form__button"type="submit" id="submitButton">
Authorize
</button>
<div class="alert alert__error">
<strong>Error</strong>: Could not load instance. Please check the name and try again.
</div>
</form>
<p class="login__pick-toot">
Now paste the URL of the toot. This can be the URL from when you view
the toot in your instance (e.g.,
<code class="inline-code">
https://fosstodon.org/web/statuses/100736935090837256</code>)
or the URL
from public page for the toot—the page you get by clicking on the
timestamp for the toot on the user's public profile page (e.g.,
<code class="inline-code">
https://fosstodon.org/@codesections/100736935090837256</code>).
</p>
<form class="form form--pick-toot">
<label class="form__label" for="instanceInput">
Toot URL:
</label>
<br>
<input class="form__input input--pick-toot" type="text" id="instanceInput" placeholder="Enter toot URL" required="">
<br>
<button class="form__button"type="submit" id="submitButton">
Get Toot
</button>
<div class="alert alert__error">
<strong>Error</strong>: Could not load instance. Please check the name and try again.
</div>
</form>
</div>
<div class="content__loading">
<div class="loading--in-progress">
<h2 class="header--secondary">
Blocking <span class="js-number-of-blocked-accounts">a number of
accounts </span><span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span>
</h2>
<p>
(this could take a minute or two; please do not close the page
while blocking is in progress.)
</p>
</div>
<div class="loading--done">
<h2 class="header--secondary">All accounts blocked!</h2>
</div>
</div>
<div class="alert alert__error error--toot-not-found">
<strong>Error</strong>: Could not find toot. Please check the URL and try again.
</div>
<div class="alert alert__error error--unknown">
<strong class="header--alert">Sever error</strong>
<p>
Something went wrong. Sorry about that!
</p>
</div>
<div class="content__results">
<h2 class="header--secondary">
You are about to block everyone who favorited or boosted this toot:
</h2>
<div class="results--target-toot">
</div>
<button class="button button--error button--abort">Abort</button>
<button class="button button--good button--block-all">Block All</button>
</div>
<script src="main.js"></script>
</body>
</html>