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
373
374
375
376
377
378
379
380 | {% block css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
{% endblock css %}
<h2 class="text-2xl font-bold text-center mt-8 flex gap-2 items-center">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" class="text-purple-500" height="1.4rem" width="1.4rem" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path></svg>
<span>Appearance</span>
</h2>
<div class="w-full py-4 flex flex-row justify-between items-center border-b border-white border-opacity-10">
<div>
<h3 class="text-xl">Accent Colour</h3>
<small class="text-gray-400 text-sm">Change the accent colour for various UI elements.</small>
</div>
<div class="relative w-64 custom-select text-sm" data-select="accent_colour">
<div class="select-none cursor-pointer bg-neutral-900 py-2 px-4 pr-8 rounded leading-tight focus:outline-none capitalize" id="accent_colour">
{{ user.preferences.accent_colour }}
</div>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-white">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
</svg>
</div>
<div class="absolute z-10 w-full mt-1 bg-neutral-900 rounded shadow-lg hidden" id="accent_colour_options">
<div class="py-1">
<div class="font-bold cursor-pointer px-4 py-2 text-purple-600 hover:bg-purple-600 hover:text-white capitalize" data-value="purple">purple</div>
<div class="font-bold cursor-pointer px-4 py-2 text-blue-600 hover:bg-blue-600 hover:text-white capitalize" data-value="blue">blue</div>
<div class="font-bold cursor-pointer px-4 py-2 text-green-600 hover:bg-green-600 hover:text-white capitalize" data-value="green">green</div>
<div class="font-bold cursor-pointer px-4 py-2 text-yellow-600 hover:bg-yellow-600 hover:text-white capitalize" data-value="yellow">yellow</div>
<div class="font-bold cursor-pointer px-4 py-2 text-red-600 hover:bg-red-600 hover:text-white capitalize" data-value="red">red</div>
<div class="font-bold cursor-pointer px-4 py-2 text-pink-600 hover:bg-pink-600 hover:text-white capitalize" data-value="pink">pink</div>
<div class="font-bold cursor-pointer px-4 py-2 text-indigo-600 hover:bg-indigo-600 hover:text-white capitalize" data-value="indigo">indigo</div>
<div class="font-bold cursor-pointer px-4 py-2 text-cyan-600 hover:bg-cyan-600 hover:text-white capitalize" data-value="cyan">cyan</div>
<div class="font-bold cursor-pointer px-4 py-2 text-orange-600 hover:bg-orange-600 hover:text-white capitalize" data-value="orange">orange</div>
<div class="font-bold cursor-pointer px-4 py-2 text-teal-600 hover:bg-teal-600 hover:text-white capitalize" data-value="teal">teal</div>
<div class="font-bold cursor-pointer px-4 py-2 text-lime-600 hover:bg-lime-600 hover:text-white capitalize" data-value="lime">lime</div>
<div class="font-bold cursor-pointer px-4 py-2 text-amber-600 hover:bg-amber-600 hover:text-white capitalize" data-value="amber">amber</div>
</div>
</div>
</div>
</div>
<div class="w-full py-4 flex flex-row justify-between items-center border-b border-white border-opacity-10">
<div>
<h3 class="text-xl">Card Appearance</h3>
<small class="text-gray-400 text-sm">Change the appearance of the cards in the anime list.</small>
</div>
<div class="relative w-64 custom-select text-sm" data-select="card_layout">
<div class="select-none cursor-pointer bg-neutral-900 py-2 px-4 pr-8 rounded leading-tight focus:outline-none capitalize" id="card_layout">
{{ user.preferences.card_layout }}
</div>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-white">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
</svg>
</div>
<div class="absolute z-10 w-full mt-1 bg-neutral-900 rounded shadow-lg hidden" id="card_layout_options">
<div class="py-1">
<div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="classic">classic</div>
<div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="wide">wide</div>
<div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="compact">compact</div>
</div>
</div>
</div>
</div>
<h2 class="text-2xl font-bold text-center mt-8 flex gap-2 items-center">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" class="text-blue-500" height="1.75rem" width="1.75rem" xmlns="http://www.w3.org/2000/svg"><path d="M152.1 236.2c-3.5-12.1-7.8-33.2-7.8-33.2h-.5s-4.3 21.1-7.8 33.2l-11.1 37.5H163zM616 96H336v320h280c13.3 0 24-10.7 24-24V120c0-13.3-10.7-24-24-24zm-24 120c0 6.6-5.4 12-12 12h-11.4c-6.9 23.6-21.7 47.4-42.7 69.9 8.4 6.4 17.1 12.5 26.1 18 5.5 3.4 7.3 10.5 4.1 16.2l-7.9 13.9c-3.4 5.9-10.9 7.8-16.7 4.3-12.6-7.8-24.5-16.1-35.4-24.9-10.9 8.7-22.7 17.1-35.4 24.9-5.8 3.5-13.3 1.6-16.7-4.3l-7.9-13.9c-3.2-5.6-1.4-12.8 4.2-16.2 9.3-5.7 18-11.7 26.1-18-7.9-8.4-14.9-17-21-25.7-4-5.7-2.2-13.6 3.7-17.1l6.5-3.9 7.3-4.3c5.4-3.2 12.4-1.7 16 3.4 5 7 10.8 14 17.4 20.9 13.5-14.2 23.8-28.9 30-43.2H412c-6.6 0-12-5.4-12-12v-16c0-6.6 5.4-12 12-12h64v-16c0-6.6 5.4-12 12-12h16c6.6 0 12 5.4 12 12v16h64c6.6 0 12 5.4 12 12zM0 120v272c0 13.3 10.7 24 24 24h280V96H24c-13.3 0-24 10.7-24 24zm58.9 216.1L116.4 167c1.7-4.9 6.2-8.1 11.4-8.1h32.5c5.1 0 9.7 3.3 11.4 8.1l57.5 169.1c2.6 7.8-3.1 15.9-11.4 15.9h-22.9a12 12 0 0 1-11.5-8.6l-9.4-31.9h-60.2l-9.1 31.8c-1.5 5.1-6.2 8.7-11.5 8.7H70.3c-8.2 0-14-8.1-11.4-15.9z"></path></svg>
<span>Display Language</span>
</h2>
<div class="w-full py-4 flex flex-row justify-between items-center border-b border-white border-opacity-10">
<div>
<h3 class="text-xl">Title Language</h3>
<small class="text-gray-400 text-sm">Change the language in which the titles are displayed.</small>
</div>
<div class="relative w-64 custom-select text-sm" data-select="title_language">
<div class="select-none cursor-pointer bg-neutral-900 py-2 px-4 pr-8 rounded leading-tight focus:outline-none capitalize" id="title_language">
{{ user.preferences.title_language }}
</div>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-white">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
</svg>
</div>
<div class="absolute z-10 w-full mt-1 bg-neutral-900 rounded shadow-lg hidden" id="title_language_options">
<div class="py-1">
<div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="english">english (Attack on Titan)</div>
<div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="romaji">romaji (Shingeki no Kyojin)</div>
<div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="native">native (進撃の巨人)</div>
</div>
</div>
</div>
</div>
<div class="w-full py-4 flex flex-row justify-between items-center border-b border-white border-opacity-10">
<div>
<h3 class="text-xl">Character Name Language</h3>
<small class="text-gray-400 text-sm">Change the language in which the character names are displayed.</small>
</div>
<div class="relative w-64 custom-select text-sm" data-select="character_name_language">
<div class="select-none cursor-pointer bg-neutral-900 py-2 px-4 pr-8 rounded leading-tight focus:outline-none capitalize" id="character_name_language">
{{ user.preferences.character_name_language }}
</div>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-white">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
</svg>
</div>
<div class="absolute z-10 w-full mt-1 bg-neutral-900 rounded shadow-lg hidden" id="character_name_language_options">
<div class="py-1">
<div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="romaji">romaji</div>
<div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="native">native</div>
</div>
</div>
</div>
</div>
<h2 class="text-2xl font-bold text-center mt-8 flex gap-2 items-center">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="text-red-500" height="1.4rem" width="1.4rem" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M13.05 9.79 10 7.5v9l3.05-2.29L16 12l-2.95-2.21zm0 0L10 7.5v9l3.05-2.29L16 12l-2.95-2.21zm0 0L10 7.5v9l3.05-2.29L16 12l-2.95-2.21zM11 4.07V2.05c-2.01.2-3.84 1-5.32 2.21L7.1 5.69A7.941 7.941 0 0 1 11 4.07zM5.69 7.1 4.26 5.68A9.949 9.949 0 0 0 2.05 11h2.02c.18-1.46.76-2.79 1.62-3.9zM4.07 13H2.05c.2 2.01 1 3.84 2.21 5.32l1.43-1.43A7.868 7.868 0 0 1 4.07 13zm1.61 6.74A9.981 9.981 0 0 0 11 21.95v-2.02a7.941 7.941 0 0 1-3.9-1.62l-1.42 1.43zM22 12c0 5.16-3.92 9.42-8.95 9.95v-2.02C16.97 19.41 20 16.05 20 12s-3.03-7.41-6.95-7.93V2.05C18.08 2.58 22 6.84 22 12z"></path></svg>
<span>Media Settings</span>
</h2>
<div class="w-full py-4 flex flex-row justify-between items-center border-b border-white border-opacity-10">
<div>
<h3 class="text-xl">Playback Language</h3>
<small class="text-gray-400 text-sm">Change the default language for media playback.</small>
</div>
<div class="relative w-64 custom-select text-sm" data-select="default_language">
<div class="select-none cursor-pointer bg-neutral-900 py-2 px-4 pr-8 rounded leading-tight focus:outline-none capitalize" id="default_language">
{{ user.preferences.default_language }}
</div>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-white">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
</svg>
</div>
<div class="absolute z-10 w-full mt-1 bg-neutral-900 rounded shadow-lg hidden" id="default_language_options">
<div class="py-1">
<div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="sub">sub</div>
<div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="dub">dub</div>
</div>
</div>
</div>
</div>
<div class="w-full py-4 flex flex-row justify-between items-center border-b border-white border-opacity-10">
<div>
<h3 class="text-xl">Default Provider</h3>
<small class="text-gray-400 text-sm">Change the preferred media provider.</small>
</div>
<div class="relative w-64 custom-select text-sm" data-select="default_provider">
<div class="select-none cursor-pointer bg-neutral-900 py-2 px-4 pr-8 rounded leading-tight focus:outline-none capitalize" id="default_provider">
{{ user.preferences.default_provider }}
</div>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-white">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
</svg>
</div>
<div class="absolute z-10 w-full mt-1 bg-neutral-900 rounded shadow-lg hidden" id="default_provider_options">
<div class="py-1">
<div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="zoro">zoro</div>
<div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="gogoanime">gogoanime</div>
</div>
</div>
</div>
</div>
<div class="w-full py-4 flex flex-row justify-between items-center border-b border-white border-opacity-10">
<div>
<h3 class="text-xl">Default Media Page</h3>
<small class="text-gray-400 text-sm">Choose whether to go to the watch page or the anime detail page when clicking on a card.</small>
</div>
<div class="relative w-64 custom-select text-sm" data-select="default_watch_page">
<div class="select-none cursor-pointer bg-neutral-900 py-2 px-4 pr-8 rounded leading-tight focus:outline-none capitalize" id="default_watch_page">
{{ user.preferences.default_watch_page }}
</div>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-white">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
</svg>
</div>
<div class="absolute z-10 w-full mt-1 bg-neutral-900 rounded shadow-lg hidden" id="default_watch_page_options">
<div class="py-1">
<div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="watch">watch</div>
<div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="detail">detail</div>
</div>
</div>
</div>
</div>
<div class="w-full py-4 flex flex-row justify-between items-center border-b border-white border-opacity-10">
<div>
<h3 class="text-xl">Show History on Home</h3>
<small class="text-gray-400 text-sm">Display your watch history on the home page.</small>
</div>
<div class="relative">
<label class="flex items-center cursor-pointer">
<input type="checkbox" class="hidden peer" id="show_history_on_home_checkbox" {% if user.preferences.show_history_on_home %}checked{% endif %}>
<div class="w-10 h-6 bg-neutral-700 rounded-full p-1 flex items-center peer-checked:bg-{{ user.preferences.accent_colour }}-600 transition-colors duration-100">
<div class="toggle-dot w-4 h-4 bg-white rounded-full shadow-md transform duration-100 ease-in-out"></div>
</div>
</label>
</div>
</div>
<div class="w-full py-4 flex flex-row justify-between items-center border-b border-white border-opacity-10">
<div>
<h3 class="text-xl">Automatically Skip Intro</h3>
<small class="text-gray-400 text-sm">Automatically skip the intro and outro of episodes.</small>
</div>
<div class="relative">
<label class="flex items-center cursor-pointer">
<input type="checkbox" class="hidden peer" id="auto_skip_intro_checkbox" {% if user.preferences.auto_skip_intro %}checked{% endif %}>
<div class="w-10 h-6 bg-neutral-700 rounded-full p-1 flex items-center peer-checked:bg-{{ user.preferences.accent_colour }}-600 transition-colors duration-100">
<div class="toggle-dot w-4 h-4 bg-white rounded-full shadow-md transform duration-100 ease-in-out"></div>
</div>
</label>
</div>
</div>
<div class="w-full py-4 flex flex-row justify-between items-center border-b border-white border-opacity-10">
<div>
<h3 class="text-xl">Automatically Play Video</h3>
<small class="text-gray-400 text-sm">Automatically start the media playback when opening the watch page.</small>
</div>
<div class="relative">
<label class="flex items-center cursor-pointer">
<input type="checkbox" class="hidden peer" id="auto_play_video_checkbox" {% if user.preferences.auto_play_video %}checked{% endif %}>
<div class="w-10 h-6 bg-neutral-700 rounded-full p-1 flex items-center peer-checked:bg-{{ user.preferences.accent_colour }}-600 transition-colors duration-100">
<div class="toggle-dot w-4 h-4 bg-white rounded-full shadow-md transform duration-100 ease-in-out"></div>
</div>
</label>
</div>
</div>
<div class="w-full py-4 flex flex-row justify-between items-center border-b border-white border-opacity-10">
<div>
<h3 class="text-xl">Automatically Play Next Episode</h3>
<small class="text-gray-400 text-sm">Automatically start the next episode when the current one ends.</small>
</div>
<div class="relative">
<label class="flex items-center cursor-pointer">
<input type="checkbox" class="hidden peer" id="auto_next_episode_checkbox" {% if user.preferences.auto_next_episode %}checked{% endif %}>
<div class="w-10 h-6 bg-neutral-700 rounded-full p-1 flex items-center peer-checked:bg-{{ user.preferences.accent_colour }}-600 transition-colors duration-100">
<div class="toggle-dot w-4 h-4 bg-white rounded-full shadow-md transform duration-100 ease-in-out"></div>
</div>
</label>
</div>
</div>
<div class="w-full py-4 flex flex-row justify-between items-center border-b border-white border-opacity-10">
<div>
<h3 class="text-xl">Ingrain Sub Subtitle in Dub</h3>
<small class="text-gray-400 text-sm">Experimental: Display the sub subtitles in the dub media if dub subtitles are not available.</small>
</div>
<div class="relative">
<label class="flex items-center cursor-pointer">
<input type="checkbox" class="hidden peer" id="ingrain_sub_subtitles_in_dub_checkbox" {% if user.preferences.ingrain_sub_subtitles_in_dub %}checked{% endif %}>
<div class="w-10 h-6 bg-neutral-700 rounded-full p-1 flex items-center peer-checked:bg-{{ user.preferences.accent_colour }}-600 transition-colors duration-100">
<div class="toggle-dot w-4 h-4 bg-white rounded-full shadow-md transform duration-100 ease-in-out"></div>
</div>
</label>
</div>
</div>
<h2 class="text-2xl font-bold text-center mt-8 flex gap-2 items-center">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="text-orange-500" height="1.4rem" width="1.4rem" xmlns="http://www.w3.org/2000/svg"><path d="M5.32943 3.27152C6.56252 2.83314 7.9923 3.10743 8.97927 4.0944C9.96652 5.08165 10.2407 6.51196 9.80178 7.74529L20.6465 18.5901L18.5252 20.7114L7.67936 9.86703C6.44627 10.3054 5.01649 10.0311 4.02952 9.04415C3.04227 8.0569 2.7681 6.62659 3.20701 5.39326L5.44373 7.62994C6.02952 8.21572 6.97927 8.21572 7.56505 7.62994C8.15084 7.04415 8.15084 6.0944 7.56505 5.50862L5.32943 3.27152ZM15.6968 5.15506L18.8788 3.38729L20.293 4.80151L18.5252 7.98349L16.7574 8.33704L14.6361 10.4584L13.2219 9.04415L15.3432 6.92283L15.6968 5.15506ZM8.62572 12.9332L10.747 15.0546L5.79729 20.0043C5.2115 20.5901 4.26175 20.5901 3.67597 20.0043C3.12464 19.453 3.09221 18.5792 3.57867 17.99L3.67597 17.883L8.62572 12.9332Z"></path></svg>
<span>Site Settings</span>
</h2>
<div class="w-full py-4 flex flex-row justify-between items-center border-b border-white border-opacity-10">
<div>
<h3 class="text-xl">Display Guild Nickname Instead of Username</h3>
<small class="text-gray-400 text-sm">Display your guild nickname instead of your username in profile and other places.</small>
</div>
<div class="relative">
<label class="flex items-center cursor-pointer">
<input type="checkbox" class="hidden peer" id="display_guild_name_instead_of_username_checkbox" {% if user.preferences.display_guild_name_instead_of_username %}checked{% endif %}>
<div class="w-10 h-6 bg-neutral-700 rounded-full p-1 flex items-center peer-checked:bg-{{ user.preferences.accent_colour }}-600 transition-colors duration-100">
<div class="toggle-dot w-4 h-4 bg-white rounded-full shadow-md transform duration-100 ease-in-out"></div>
</div>
</label>
</div>
</div>
<div class="w-full py-4 flex flex-row justify-between items-center border-b border-white border-opacity-10">
<div>
<h3 class="text-xl">Smart MAL Sync</h3>
<small class="text-gray-400 text-sm">Experimental: Your MAL list will be automatically updated as you watch anime on the site.</small>
</div>
<div class="relative">
<label class="flex items-center cursor-pointer">
<input type="checkbox" class="hidden peer" id="smart_mal_sync_checkbox" {% if user.preferences.smart_mal_sync %}checked{% endif %}>
<div class="w-10 h-6 bg-neutral-700 rounded-full p-1 flex items-center peer-checked:bg-{{ user.preferences.accent_colour }}-600 transition-colors duration-100">
<div class="toggle-dot w-4 h-4 bg-white rounded-full shadow-md transform duration-100 ease-in-out"></div>
</div>
</label>
</div>
</div>
<!-- Save Button -->
<div class="w-full py-4 flex flex-row justify-start items-center">
<button id="saveButton" class="bg-{{ user.preferences.accent_colour }}-600 hover:bg-{{ user.preferences.accent_colour }}-700 text-white font-bold py-2 px-4 rounded-full focus:outline-none flex items-center transition-colors duration-100 ease-in-out" onclick="handleSave()">
<svg id="spinner" class="hidden animate-spin mr-2 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" class="opacity-25 fill-current"/>
<path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" class="fill-current"/>
</svg>
<span id="buttonText">Save Preferences</span>
</button>
</div>
<div id="toastContainer" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50 flex flex-col space-y-2"></div>
{% block scripts %}
<script>
// show toastMessage if it exists in sessionStorage
document.addEventListener('DOMContentLoaded', () => {
const toastMessage = sessionStorage.getItem('toastMessage');
if (toastMessage) {
showToast(toastMessage, true);
sessionStorage.removeItem('toastMessage');
}
});
function handleSave() {
const button = document.getElementById('saveButton');
const spinner = document.getElementById('spinner');
const buttonText = document.getElementById('buttonText');
// Show the spinner and disable the button
spinner.classList.remove('hidden');
buttonText.textContent = 'Saving...';
button.classList.add('bg-white', 'bg-opacity-20', 'cursor-not-allowed');
button.classList.remove('bg-{{ user.preferences.accent_colour }}-600', 'hover:bg-{{ user.preferences.accent_colour }}-700');
button.disabled = true;
// Gather preferences
const accentColour = document.getElementById('accent_colour').textContent.trim().toLowerCase();
const cardLayout = document.getElementById('card_layout').textContent.trim().toLowerCase();
const titleLanguage = document.getElementById('title_language').textContent.trim().toLowerCase();
const characterNameLanguage = document.getElementById('character_name_language').textContent.trim().toLowerCase();
const defaultLanguage = document.getElementById('default_language').textContent.trim().toLowerCase();
const defaultProvider = document.getElementById('default_provider').textContent.trim().toLowerCase();
const defaultWatchPage = document.getElementById('default_watch_page').textContent.trim().toLowerCase();
const showHistoryOnHome = document.getElementById('show_history_on_home_checkbox').checked;
const autoSkipIntro = document.getElementById('auto_skip_intro_checkbox').checked;
const autoPlayVideo = document.getElementById('auto_play_video_checkbox').checked;
const autoNextEpisode = document.getElementById('auto_next_episode_checkbox').checked;
const ingrainSubSubtitlesInDub = document.getElementById('ingrain_sub_subtitles_in_dub_checkbox').checked;
const displayGuildNameInsteadOfUsername = document.getElementById('display_guild_name_instead_of_username_checkbox').checked;
const smartMALSync = document.getElementById('smart_mal_sync_checkbox').checked;
const body = {
accentColour,
cardLayout,
titleLanguage,
characterNameLanguage,
defaultLanguage,
defaultProvider,
defaultWatchPage,
showHistoryOnHome,
autoSkipIntro,
autoPlayVideo,
autoNextEpisode,
ingrainSubSubtitlesInDub,
displayGuildNameInsteadOfUsername,
smartMALSync
};
// Send a POST request to save the preferences
fetch('{% url "user_profile:save_user_preferences" %}', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': '{{ csrf_token }}'
},
body: JSON.stringify(body)
}).then(response => {
if (response.ok) {
sessionStorage.setItem('toastMessage', 'Preferences saved successfully!');
window.location.reload();
} else {
showToast('An error occurred while saving preferences.', false);
}
}).catch(error => {
showToast('An error occurred while saving preferences.', false);
}).finally(() => {
// Hide the spinner and enable the button
/*spinner.classList.add('hidden');
buttonText.textContent = 'Save Preferences';
button.classList.remove('bg-white', 'bg-opacity-20', 'cursor-not-allowed');
button.classList.add('bg-{{ user.preferences.accent_colour }}-600', 'hover:bg-{{ user.preferences.accent_colour }}-700');
button.disabled = false;*/
});
}
</script>
{% endblock scripts %}
|
