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
|
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Who is at front?</title>
<script>
WiafConfig = [
{
system: "gdapd",
name: "raindrops",
samples: {
qbzxm: "l. hi i'm here again",
zajrk: "t. I kinda want to switch out now hehe, I'm really really tired",
rirgf: "Good morning sweetie!",
lllfw: "z. Okay she is done, sorry for the wait. We can talk now!",
pabmo: "b. cat!!",
tfbob: "v. eeeeeeeeeee~!",
qraku: "st. I really like you hehe ^c^",
khsbb: "po. apparently humans are not really nice",
ztfjz: "f. Anyway I'm going to let Scoots front now since you miss her",
hpwyq: "c. But for now, I'll see you later Twi!",
mhnqy: "d. She'll probably want to sleep in a bit"
}
},
{
system: "ynmuc",
name: "cloudburst",
samples: {
kkhbw: "i'll see u later hun",
vvsxf: "p. anyway i'll see you later",
gevde: "sb. i cuddle switch out go rest..",
erefx: "i. brain hears chainsaw and goes like \"aaaaaaa insect AAAAAAAAAAAAAAAAAAAA\"",
gfhsr: "f. it's just really up to you what you want",
mglyq: "v. anyway i should probably let twi front now",
xcjhj: "b. i'm sorry this went so downhill",
zhtzs: "pi. what's the \"ip\" and \"port\" as twi calls them",
zzise: "d. anyways i'm here just to.. i guess eat dinner and go on a bike ride if i want to",
erknz: "l. i should probably let plushie front now",
jnbae: "c. see you later hehe",
rpjok: "e. Affermative",
sehke: "w. probably will once i work out how",
xbvwt: "s. Twi kinda wants you to do something similar to what I've done",
vncoa: "m. anyway, i'mma honour what i originally said"
}
}
]
</script>
<style>
#app {
background-color: black;
}
#app > * {
filter: invert(1);
}
.btn, a, .progress {
filter: invert(1);
}
.progress {
background-color: #141414 !important;
}
body, html {
background-color: black;
}
img {
filter: invert(1);
}
.alert, .alert .btn {
filter: hue-rotate(180deg);
}
.card-title {
margin-bottom: 0 !important;
}
.card {
cursor: pointer;
}
.card:hover {
background-color: #eee !important;
}
.card:active {
background-color: #ddd !important;
}
</style>
<link href="bootstrap/bootstrap.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="bootstrap/bootstrap.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="app">
<div id="app-main">
<div id="online">
<br>
</div>
<div id="offline" class="container" style="display:none;">
<p class="text-muted">
<img src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M44.85 21.7q-4.4-4.2-9.625-6.7T24 12.5q-1.85 0-3.55.225-1.7.225-2.85.625L13.95 9.7q2.2-.8 4.775-1.25Q21.3 8 24 8q7 0 13.175 2.9Q43.35 13.8 48 18.55Zm-8.45 8.45q-1.65-1.6-3-2.575-1.35-.975-3.45-1.925L24.3 20q4.75.1 8.375 1.95Q36.3 23.8 39.55 27Zm3.85 14.4-19.7-19.7q-2.7.65-4.975 2.1-2.275 1.45-3.975 3.2L8.45 27q1.85-1.85 3.825-3.25T17 21.25l-5.55-5.55Q9.1 16.85 7 18.425 4.9 20 3.15 21.7L0 18.55q1.8-1.85 3.85-3.45t4.2-2.75l-4.6-4.6L5.6 5.6l36.8 36.8Zm-16.25-2-7.4-7.45q1.45-1.45 3.325-2.275Q21.8 32 24 32t4.075.825q1.875.825 3.325 2.275Z"/></svg>' alt="" style="width:24px;height:24px;vertical-align: middle;opacity: .5;">
<span style="vertical-align: middle;">
You are currently offline.
</span>
</p>
</div>
<div class="container">
<h1>Let's figure out who is at front</h1>
<div class="progress" id="progress" style="margin-bottom: 10px">
<div class="progress-bar" id="wiaf-progress" style="width:0;"></div>
</div>
<div id="loader" style=";text-align: center;">
Loading...
</div>
<div id="step1-outer" class="step-outer" style="display:none;">
<h3>Which name feels the most like your own?</h3>
<div class="card wiaf-grid-item" id="s1-default-card" style="display:none;">
<div class="card-body">
<h5 class="card-title" id="s1-default-card-name">Member name</h5>
</div>
</div>
<div id="step1" class="wiaf-grid"></div>
<a onclick="switchToStep(2); return false;" href="#" style="display:block;margin-top:10px;text-align:center;">None of the above</a>
</div>
<div id="step2-outer" class="step-outer" style="display:none;">
<h3>Who do you generally act like?</h3>
<div class="card wiaf-grid-item" id="s2-default-card" style="display:none;">
<div class="card-body">
<h5 class="card-title" id="s2-default-card-name">Member name</h5>
</div>
</div>
<div id="step2" class="wiaf-grid"></div>
<a onclick="switchToStep(3); return false;" href="#" style="display:block;margin-top:10px;text-align:center;">None of the above</a>
</div>
<div id="step3-outer" class="step-outer" style="display:none;">
<h3>What looks the most familiar to you?</h3>
<div class="card wiaf-grid-item" id="s3-default-card" style="display:none;">
<img class="card-img-top" id="s3-default-card-img" src="" alt="Card image">
</div>
<div id="step3" class="wiaf-grid wiaf-grid-small"></div>
<a onclick="switchToStep(4); return false;" href="#" style="display:block;margin-top:10px;text-align:center;">None of the above</a>
</div>
<div id="step4-outer" class="step-outer" style="display:none;">
<h3>Which of these images would qualify as your profile picture?</h3>
<div class="card wiaf-grid-item" id="s4-default-card" style="display:none;">
<img class="card-img-top" id="s4-default-card-img" src="" alt="Card image">
</div>
<div id="step4" class="wiaf-grid wiaf-grid-small"></div>
<a onclick="switchToStep(5); return false;" href="#" style="display:block;margin-top:10px;text-align:center;">None of the above</a>
</div>
<div id="step5-outer" class="step-outer" style="display:none;">
<h3>Which of these messages look like they could've been sent by you?</h3>
<div class="card wiaf-grid-item" id="s5-default-card" style="display:none;">
<div class="card-body">
<p class="card-text" id="s5-default-card-name">-</p>
</div>
</div>
<div id="step5" class="wiaf-grid"></div>
<a onclick="switchToStep(6); compute(); return false;" href="#" style="display:block;margin-top:10px;text-align:center;">None of the above</a>
</div>
<div id="step6-outer" class="step-outer" style="display:none;">
<h3>You're done</h3>
<div id="final-load" style="text-align: center;">
Loading...
</div>
<div id="final-newpony" style="display:none;">
<div class="alert alert-primary">
<strong>Front is clear, but</strong> you are probably a new headmate; welcome!<br>
<ul style="margin-bottom: 0;">
<li>Use the unknown proxy tags (<code>{...}</code>) where plurality is known until you found yourself a prefix;</li>
<li>Take some time to figure yourself out: your name, look, pronouns, ...</li>
</ul>
</div>
</div>
<div id="final-precise" style="display:none;">
<div class="alert alert-success">
<strong>Front is clear.</strong> Hey <span id="final-precise-member">Member</span>, hope you're doing great!<br>
<ul>
<li>Use your prefix (<code id="final-precise-proxy">???</code>) where plurality is known;</li>
<li id="final-precise-pk-register" style="display:none;">Register the switch on PluralKit: <code>pk;switch <span id="final-precise-pluralkit">???</span></code><span id="final-precise-pk-failed" style="display:none;">*</span></li>
<li id="final-precise-pk-already" style="display:none;">You already registered the switch on PluralKit</li>
<li id="final-precise-pk-waiting">Checking for registration on PluralKit...</li>
</ul>
<div class="btn-group">
<a type="button" href="#" id="final-precise-link1" target="_blank" class="btn btn-primary">Open Cold Haze page</a>
<a type="button" href="#" id="final-precise-link2" target="_blank" class="btn btn-primary">View on PluralKit</a>
</div>
</div>
</div>
<div id="final-blur" style="display:none;">
<div class="alert alert-warning">
<strong>Front is unclear.</strong> <span id="final-blur-m1">Member 1</span> and <span id="final-blur-m2">Member 2</span> are blurring.<br>
<ul>
<li>Take time to figure things out and don't strain you too much;</li>
<li>Use the unknown proxy tags (<code>{...}</code>) where plurality is known until front is clear</li>
</ul>
<div class="btn-group">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Open Cold Haze page</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="" id="final-blur-m1-link1">Member 1</a>
<a class="dropdown-item" href="" id="final-blur-m2-link1">Member 2</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">View on PluralKit</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="" id="final-blur-m1-link2">Member 1</a>
<a class="dropdown-item" href="" id="final-blur-m2-link2">Member 2</a>
</div>
</div>
</div>
</div>
</div>
<div id="final-unclear" style="display:none;">
<div class="alert alert-danger">
<strong>Front is very unclear.</strong> <span id="final-unclear-count">X</span> members are blurring together and front may be unmanageable.<br>
<ul>
<li>Take time to figure things out as soon as possible;</li>
<li>Use the unknown proxy tags (<code>{...}</code>) where plurality is known until front is clear</li>
</ul>
</div>
</div>
<div id="final-speed-fast" style="display:none;">
<div class="alert alert-danger">
<strong>You did not take enough time to figure out who you are.</strong> Take a few seconds to figure out who you are, and do not rush each question. Really ask yourself if that feels like you to make sure the results are as accurate as possible.
</div>
</div>
<div id="final-speed-medium" style="display:none;">
<div class="alert alert-warning">
<strong>You should have taken more time to figure out who you are.</strong> Although you may have figured out who you are, this would usually require more time. If you do not totally feel like yourself, try again and take more time.
</div>
</div>
<div id="final-speed-slow" style="display:none;">
<div class="alert alert-success">
<strong>These results are accurate.</strong> You took enough time to question your identity, the information provided above can be considered accurate and can be used.
</div>
</div>
<div id="final-speed-error">
<div class="alert alert-secondary">
Failed to calculate the accuracy of these results.
</div>
</div>
<p class="text-muted small" id="final-precise-pk-asterisk" style="display:none;">
*This switch may have already been registered; but it is not possible to check now since you are not connected to a network.
</p>
</div>
</div>
<br><br>
</div>
<div id="app-selector" style="display:none;">
<div class="container">
<br>
<h1>Select the configuration profile to use</h1>
<ul id="selector-profiles"></ul>
</div>
</div>
</div>
</body>
</html>
|
