-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdocs.html
More file actions
executable file
·722 lines (650 loc) · 40.2 KB
/
docs.html
File metadata and controls
executable file
·722 lines (650 loc) · 40.2 KB
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
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>ChaosPrep Documentation</title>
<link rel="icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
rel="stylesheet">
<script src="https://unpkg.com/lucide@latest"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: { sans: ['Inter', 'sans-serif'] },
colors: {
brand: {
50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe',
300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6',
600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95',
}
}
}
}
}
</script>
<style>
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #e4e4e7;
border-radius: 10px;
}
.dark ::-webkit-scrollbar-thumb {
background: #3f3f46;
}
::-webkit-scrollbar-thumb:hover {
background: #d4d4d8;
}
.dark ::-webkit-scrollbar-thumb:hover {
background: #52525b;
}
.prose-custom p {
margin-bottom: 1.25em;
line-height: 1.75;
}
.prose-custom h2 {
font-size: 1.75rem;
font-weight: 800;
margin-top: 2.5em;
margin-bottom: 1em;
padding-bottom: 0.5em;
border-bottom: 1px solid;
scroll-margin-top: 6rem;
tracking: -0.025em;
}
.prose-custom h3 {
font-size: 1.25rem;
font-weight: 700;
margin-top: 2em;
margin-bottom: 0.75em;
scroll-margin-top: 6rem;
tracking: -0.025em;
}
.prose-custom ul {
list-style-type: none;
padding-left: 0;
margin-bottom: 1.5em;
}
.prose-custom ul li {
position: relative;
padding-left: 1.5rem;
margin-bottom: 0.75em;
}
.prose-custom ul li::before {
content: "•";
position: absolute;
left: 0;
color: #7c3aed;
font-weight: bold;
font-size: 1.2em;
line-height: 1;
top: 0.1em;
}
.prose-custom strong {
font-weight: 700;
}
.prose-custom code {
background-color: rgba(124, 58, 237, 0.1);
color: #7c3aed;
padding: 0.2em 0.4em;
border-radius: 0.375rem;
font-weight: 600;
font-size: 0.875em;
}
.nav-link.active {
color: #7c3aed;
font-weight: 700;
background-color: rgba(124, 58, 237, 0.1);
}
.glass-header {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.dark .glass-header {
background: rgba(9, 9, 11, 0.8);
}
</style>
</head>
<body
class="bg-zinc-50 dark:bg-[#09090b] text-zinc-800 dark:text-zinc-300 antialiased selection:bg-brand-500 selection:text-white transition-colors duration-300">
<!-- Mobile Header -->
<header
class="md:hidden sticky top-0 z-50 glass-header border-b border-zinc-200 dark:border-zinc-800 px-4 py-4 flex items-center justify-between shadow-sm">
<div class="flex items-center gap-2">
<a href="https://sval.tech/chaos"
class="p-2 text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors"
title="Back to App">
<i data-lucide="arrow-left" class="w-5 h-5"></i>
</a>
<img src="logo.png" alt="ChaosPrep Logo"
class="w-8 h-8 rounded-lg shadow-md shrink-0 object-contain bg-white">
<span class="font-black text-lg tracking-tight text-zinc-900 dark:text-white ml-1">ChaosPrep Docs</span>
</div>
<div class="flex items-center gap-2">
<button onclick="toggleTheme()"
class="p-2 text-zinc-500 hover:text-zinc-900 dark:hover:text-white bg-zinc-100 dark:bg-zinc-800 rounded-lg transition-colors">
<i data-lucide="moon" id="mobile-theme-icon" class="w-5 h-5"></i>
</button>
<button id="mobile-menu-btn"
class="p-2 text-zinc-500 hover:text-zinc-900 dark:hover:text-white bg-zinc-100 dark:bg-zinc-800 rounded-lg transition-colors">
<i data-lucide="menu" class="w-5 h-5"></i>
</button>
</div>
</header>
<div class="max-w-[1400px] mx-auto w-full flex relative">
<!-- Sidebar Navigation -->
<aside id="sidebar"
class="fixed inset-y-0 left-0 w-72 border-r border-zinc-200 dark:border-zinc-800 bg-white/50 dark:bg-[#18181b]/50 backdrop-blur-xl hidden md:block z-40 transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out md:sticky md:top-0 md:h-screen overflow-y-auto custom-scrollbar">
<div class="p-6">
<!-- Back Button -->
<a href="https://sval.tech/chaos"
class="mb-8 flex items-center gap-2 text-[10px] font-bold text-zinc-500 hover:text-brand-600 dark:hover:text-brand-400 uppercase tracking-widest transition-colors group">
<i data-lucide="arrow-left" class="w-3.5 h-3.5 group-hover:-translate-x-1 transition-transform"></i>
Back to App
</a>
<div class="flex items-center justify-between mb-8">
<div class="flex items-center gap-3">
<img src="logo.png" alt="ChaosPrep Logo"
class="w-10 h-10 rounded-xl shadow-lg shadow-brand-500/20 shrink-0 object-contain bg-white">
<div>
<h1 class="font-black text-xl tracking-tight leading-none text-zinc-900 dark:text-white">
ChaosPrep</h1>
<span
class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Documentation</span>
</div>
</div>
<button onclick="toggleTheme()"
class="p-2 text-zinc-400 hover:text-brand-500 bg-zinc-100 dark:bg-zinc-800/50 rounded-lg transition-colors hidden md:block"
title="Toggle Dark Mode">
<i data-lucide="moon" id="desktop-theme-icon" class="w-4 h-4"></i>
</button>
</div>
<nav class="space-y-8">
<div>
<h4
class="text-[10px] font-bold text-zinc-400 dark:text-zinc-500 uppercase tracking-widest mb-3 px-3">
Getting Started</h4>
<ul class="space-y-1 text-sm font-semibold text-zinc-600 dark:text-zinc-400">
<li><a href="#introduction"
class="nav-link block px-3 py-2 rounded-xl hover:bg-zinc-100 dark:hover:bg-zinc-800/50 hover:text-zinc-900 dark:hover:text-white transition-colors">Introduction</a>
</li>
<li><a href="#setup"
class="nav-link block px-3 py-2 rounded-xl hover:bg-zinc-100 dark:hover:bg-zinc-800/50 hover:text-zinc-900 dark:hover:text-white transition-colors">Initial
Setup</a></li>
</ul>
</div>
<div>
<h4
class="text-[10px] font-bold text-zinc-400 dark:text-zinc-500 uppercase tracking-widest mb-3 px-3">
Core Features</h4>
<ul class="space-y-1 text-sm font-semibold text-zinc-600 dark:text-zinc-400">
<li><a href="#planner"
class="nav-link block px-3 py-2 rounded-xl hover:bg-zinc-100 dark:hover:bg-zinc-800/50 hover:text-zinc-900 dark:hover:text-white transition-colors">Daily
Planner & Subtasks</a></li>
<li><a href="#timer"
class="nav-link block px-3 py-2 rounded-xl hover:bg-zinc-100 dark:hover:bg-zinc-800/50 hover:text-zinc-900 dark:hover:text-white transition-colors">Timer,
PiP & Radio</a></li>
<li><a href="#daily-qs"
class="nav-link block px-3 py-2 rounded-xl hover:bg-zinc-100 dark:hover:bg-zinc-800/50 hover:text-zinc-900 dark:hover:text-white transition-colors">Daily
Questions Tracker</a></li>
<li><a href="#analytics"
class="nav-link block px-3 py-2 rounded-xl hover:bg-zinc-100 dark:hover:bg-zinc-800/50 hover:text-zinc-900 dark:hover:text-white transition-colors">Mocks
& Error Analytics</a></li>
<li><a href="#syllabus"
class="nav-link block px-3 py-2 rounded-xl hover:bg-zinc-100 dark:hover:bg-zinc-800/50 hover:text-zinc-900 dark:hover:text-white transition-colors">Syllabus
Tracker</a></li>
</ul>
</div>
<div>
<h4
class="text-[10px] font-bold text-brand-600 dark:text-brand-400 uppercase tracking-widest mb-3 px-3 flex items-center gap-2">
<i data-lucide="users" class="w-3.5 h-3.5"></i> Squads (Multiplayer)
</h4>
<ul class="space-y-1 text-sm font-semibold text-zinc-600 dark:text-zinc-400">
<li><a href="#squads-intro"
class="nav-link block px-3 py-2 rounded-xl hover:bg-brand-50 dark:hover:bg-brand-500/10 hover:text-brand-700 dark:hover:text-brand-300 transition-colors">Accountability
Loop</a></li>
<li><a href="#squads-profile"
class="nav-link block px-3 py-2 rounded-xl hover:bg-brand-50 dark:hover:bg-brand-500/10 hover:text-brand-700 dark:hover:text-brand-300 transition-colors">Customizing
Your Identity</a></li>
<li><a href="#squads-privacy"
class="nav-link block px-3 py-2 rounded-xl hover:bg-brand-50 dark:hover:bg-brand-500/10 hover:text-brand-700 dark:hover:text-brand-300 transition-colors">Safety
& Privacy</a></li>
</ul>
</div>
<div>
<h4
class="text-[10px] font-bold text-zinc-400 dark:text-zinc-500 uppercase tracking-widest mb-3 px-3">
Advanced & Settings</h4>
<ul class="space-y-1 text-sm font-semibold text-zinc-600 dark:text-zinc-400">
<li><a href="#customization"
class="nav-link block px-3 py-2 rounded-xl hover:bg-zinc-100 dark:hover:bg-zinc-800/50 hover:text-zinc-900 dark:hover:text-white transition-colors">Themes
& Colors</a></li>
<li><a href="#rollover"
class="nav-link block px-3 py-2 rounded-xl hover:bg-zinc-100 dark:hover:bg-zinc-800/50 hover:text-zinc-900 dark:hover:text-white transition-colors">Day
Rollover (Night Owls)</a></li>
<li><a href="#data"
class="nav-link block px-3 py-2 rounded-xl hover:bg-zinc-100 dark:hover:bg-zinc-800/50 hover:text-zinc-900 dark:hover:text-white transition-colors">Backup
& Calendar (.ics)</a></li>
<li><a href="#reality"
class="nav-link block px-3 py-2 rounded-xl hover:bg-rose-50 dark:hover:bg-rose-500/10 hover:text-rose-600 dark:hover:text-rose-400 transition-colors">Reality
Check</a></li>
</ul>
</div>
</nav>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 min-w-0 px-6 py-12 md:px-12 lg:px-20 xl:px-32">
<div class="max-w-3xl prose-custom mx-auto">
<!-- Introduction -->
<section id="introduction">
<div
class="mb-6 inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-brand-50 dark:bg-brand-500/10 border border-brand-200 dark:border-brand-500/20 text-brand-700 dark:text-brand-400 text-[10px] font-black uppercase tracking-[0.15em] shadow-sm">
Official Documentation
</div>
<h1
class="text-4xl md:text-5xl lg:text-[56px] font-black tracking-tighter mb-6 text-zinc-900 dark:text-white leading-[1.1]">
Master your daily chaos.
</h1>
<p class="text-lg md:text-xl text-zinc-600 dark:text-zinc-400 font-medium mb-8 leading-relaxed">
ChaosPrep is a quiet, distraction-free tracking system designed specifically for JEE, NEET, and
competitive exam aspirants. No AI fluff, no social feeds—just raw productivity tools to help you
hit your targets and visualize your growth.
</p>
</section>
<section id="setup">
<h2
class="flex items-center gap-3 text-zinc-900 dark:text-white border-zinc-200 dark:border-zinc-800">
<i data-lucide="settings-2" class="w-7 h-7 text-brand-500"></i> Initial Setup
</h2>
<p class="text-zinc-600 dark:text-zinc-400">When you first sign in, configure your environment to
match your specific goals. ChaosPrep automatically adapts its interface based on your choices.
</p>
<div
class="bg-white dark:bg-[#18181b] p-6 rounded-[2rem] border border-zinc-200 dark:border-zinc-800 shadow-sm mt-6">
<ul class="space-y-4 text-zinc-700 dark:text-zinc-300 !mb-0">
<li><strong>Select your Exam Target:</strong> Open Settings (gear icon) and choose JEE Main,
JEE Advanced, NEET, or Custom. This automatically filters your Syllabus and configures
your Reality Check countdown.</li>
<li><strong>Add Custom Subjects:</strong> Studying for boards or a state exam? Use the
<code>+ Manage</code> button in the Quick Add Task menu to add subjects like
"English" or "CS".
</li>
<li><strong>Set your Target Year:</strong> Select the year you are appearing for the exam to
ensure accurate timeline tracking.</li>
</ul>
</div>
</section>
<hr class="my-16 border-zinc-200 dark:border-zinc-800/50">
<!-- Core Features -->
<section id="planner">
<h2
class="flex items-center gap-3 text-zinc-900 dark:text-white border-zinc-200 dark:border-zinc-800">
<i data-lucide="calendar" class="w-7 h-7 text-brand-500"></i> Daily Planner & Subtasks
</h2>
<p class="text-zinc-600 dark:text-zinc-400">The Planner transforms broad syllabus goals into
executable, bite-sized daily tasks.</p>
<h3 class="text-zinc-900 dark:text-white">Subtasks (Micro-Checklists)</h3>
<p class="text-zinc-600 dark:text-zinc-400">Complex chapters need breaking down. Inside the
<strong>Day View</strong>, click the <em>"Add subtask..."</em> input below any main task to
create a nested checklist. These subtasks also sync to your <strong>Squad</strong>, allowing
your
friends to see the exact grain of your progress.
</p>
<h3 class="text-zinc-900 dark:text-white">Smart Reordering</h3>
<p class="text-zinc-600 dark:text-zinc-400">To reorganize your day, click a specific Day Card to
open
the <strong>Day View</strong>. Grab the <i data-lucide="grip-vertical"
class="w-4 h-4 inline text-zinc-400"></i> handle to drag tasks into your preferred
execution order. This order is preserved across all your devices.</p>
</section>
<section id="timer">
<h2
class="flex items-center gap-3 text-zinc-900 dark:text-white border-zinc-200 dark:border-zinc-800">
<i data-lucide="timer" class="w-7 h-7 text-brand-500"></i> Timer, PiP & Focus Radio
</h2>
<p class="text-zinc-600 dark:text-zinc-400">Clock actual deep work hours. The Timer view prevents
you from lying to yourself about your productivity.</p>
<div class="grid md:grid-cols-2 gap-4 my-8">
<div
class="bg-white dark:bg-[#18181b] p-6 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-sm">
<h4 class="font-bold text-zinc-900 dark:text-white mb-2 flex items-center gap-2"><i
data-lucide="maximize" class="w-4 h-4 text-brand-500"></i> Full-Screen Zen Mode</h4>
<p class="text-sm text-zinc-600 dark:text-zinc-400">Click the expand icon. This locks your
device into a distraction-free <strong>landscape mode</strong>, hiding all navigation.
On mobile, it utilizes the Screen Wake Lock API to prevent your screen from dimming.</p>
</div>
<div
class="bg-white dark:bg-[#18181b] p-6 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-sm">
<h4 class="font-bold text-zinc-900 dark:text-white mb-2 flex items-center gap-2"><i
data-lucide="picture-in-picture-2" class="w-4 h-4 text-brand-500"></i>
Video PiP</h4>
<p class="text-sm text-zinc-600 dark:text-zinc-400">Click the PiP icon to pop the timer out
into a floating window. ChaosPrep generates a <strong>live video stream</strong> from a
canvas, so your focus time stays visible even while you read PDFs or watch YouTube
lectures.
</p>
</div>
</div>
<ul class="text-zinc-700 dark:text-zinc-300">
<li><strong>Task Linking:</strong> Use the dropdown below the timer to link a task for today.
When you finish studying, the app will ask if you completed that task and mark it for you
automatically.</li>
<li><strong>Anti-Throttling:</strong> Most browser timers pause when you switch tabs to save
battery. ChaosPrep uses an <strong>Inline Web Worker</strong> to ensure your timer never
loses a second, even in the background.</li>
<li><strong>Focus Radio:</strong> The music widget provides high-quality live streams (Lofi,
Classical, Synthwave) designed for focus. It works seamlessly behind the timer.</li>
</ul>
</section>
<section id="daily-qs">
<h2
class="flex items-center gap-3 text-zinc-900 dark:text-white border-zinc-200 dark:border-zinc-800">
<i data-lucide="check-square" class="w-7 h-7 text-emerald-500"></i> Daily Questions Tracker
</h2>
<p class="text-zinc-600 dark:text-zinc-400">Theory is useless without execution. The Daily Questions
tracker holds you accountable for your actual problem-solving volume.</p>
<ul class="text-zinc-700 dark:text-zinc-300">
<li><strong>Flame Streak:</strong> Hitting your daily target (default 50) extends your streak
<i data-lucide="flame" class="w-4 h-4 inline text-orange-500"></i>. The system calculates
this based on your <strong>Logical Today</strong> (respecting your Night Owl settings).
</li>
<li><strong>Subject Breakdown:</strong> Log exactly how many questions you solved per subject to
see where your practice effort is being spent.</li>
</ul>
</section>
<section id="analytics">
<h2
class="flex items-center gap-3 text-zinc-900 dark:text-white border-zinc-200 dark:border-zinc-800">
<i data-lucide="bar-chart-2" class="w-7 h-7 text-brand-500"></i> Mocks & Error Analytics
</h2>
<h3 class="text-zinc-900 dark:text-white">Performance Trajectory</h3>
<p class="text-zinc-600 dark:text-zinc-400">Log your mock scores by subject to unlock the
Performance Trajectory chart. You can filter the chart to view your growth in specific subjects
(e.g., just Physics) to see where you are peaking or plateauing.</p>
<h3 class="text-zinc-900 dark:text-white">The Error Log</h3>
<p class="text-zinc-600 dark:text-zinc-400">Don't just log the marks; log the <strong>Mistake
Profile</strong>.
Categorize every error into one of four types:</p>
<div
class="bg-zinc-50 dark:bg-zinc-900/50 p-6 rounded-3xl border border-zinc-200 dark:border-zinc-800 my-6">
<ul class="text-zinc-700 dark:text-zinc-300 !mb-0">
<li><strong class="text-rose-500">Conceptual:</strong> Misunderstood the core theory.</li>
<li><strong class="text-blue-500">Calculative:</strong> Knew the logic, but failed the math.
</li>
<li><strong class="text-amber-500">Silly Mistake:</strong> Misread the question or bubble.
</li>
<li><strong class="text-purple-500">Formula:</strong> Forgot or misapplied a formula.</li>
</ul>
</div>
</section>
<section id="syllabus">
<h2
class="flex items-center gap-3 text-zinc-900 dark:text-white border-zinc-200 dark:border-zinc-800">
<i data-lucide="book-open-check" class="w-7 h-7 text-brand-500"></i> Syllabus Tracker
</h2>
<p class="text-zinc-600 dark:text-zinc-400">A comprehensive, pre-loaded list of chapters. Use the
weighted phased approach (Doing → Done → Mastered) to visualize your coverage. Expand any
chapter to track <strong>Revisions</strong> (R1, R2...) and <strong>PYQ</strong> completion.
</p>
</section>
<hr class="my-16 border-zinc-200 dark:border-zinc-800/50">
<!-- SQUADS DEEP DIVE -->
<section id="squads-intro">
<div
class="bg-brand-50/50 dark:bg-brand-500/5 border border-brand-200 dark:border-brand-500/20 rounded-[2.5rem] p-8 md:p-10 mb-8 shadow-sm">
<h2 class="flex items-center gap-3 !mt-0 !mb-4 !border-none text-brand-900 dark:text-brand-300">
<i data-lucide="users" class="w-8 h-8 text-brand-500"></i> Squads (Multiplayer)
</h2>
<p class="text-brand-800 dark:text-brand-200/80 font-medium leading-relaxed mb-0">Squads is an
accountability feature designed to simulate studying in a library with your hardest-working
friends. It’s built on <strong>mutual connections</strong>—you only see the people who
have also added you.</p>
</div>
<h3 class="text-zinc-900 dark:text-white mt-12">The Live Focus Dot</h3>
<p class="text-zinc-600 dark:text-zinc-400">When someone in your squad starts their timer, their
avatar instantly glows with a pulsing ring. We track three states:</p>
<div class="grid sm:grid-cols-3 gap-4 my-8">
<div
class="border border-rose-200 dark:border-rose-900/50 bg-rose-50 dark:bg-rose-500/5 p-5 rounded-3xl">
<div class="flex items-center gap-2 mb-3">
<span class="w-2.5 h-2.5 rounded-full bg-rose-500 animate-pulse"></span>
<span
class="text-[10px] font-black text-rose-700 dark:text-rose-400 uppercase tracking-widest">Studying</span>
</div>
<p class="text-xs text-rose-600/80 dark:text-rose-300/80 font-medium leading-relaxed">Timer
is active. Deep focus.</p>
</div>
<div
class="border border-amber-200 dark:border-amber-900/50 bg-amber-50 dark:bg-amber-500/5 p-5 rounded-3xl">
<div class="flex items-center gap-2 mb-3">
<span class="w-2.5 h-2.5 rounded-full bg-amber-500"></span>
<span
class="text-[10px] font-black text-amber-700 dark:text-amber-400 uppercase tracking-widest">Idle</span>
</div>
<p class="text-xs text-amber-600/80 dark:text-amber-300/80 font-medium leading-relaxed">App
is open, but timer is off.</p>
</div>
<div
class="border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800/50 p-5 rounded-3xl">
<div class="flex items-center gap-2 mb-3">
<span class="w-2.5 h-2.5 rounded-full bg-zinc-400"></span>
<span
class="text-[10px] font-black text-zinc-500 uppercase tracking-widest">Offline</span>
</div>
<p class="text-xs text-zinc-500 font-medium leading-relaxed">App closed for >15 minutes.</p>
</div>
</div>
</section>
<section id="squads-profile">
<h3 class="text-zinc-900 dark:text-white">Customizing Your Squad Identity</h3>
<p class="text-zinc-600 dark:text-zinc-400">Express yourself within your squad. You can customize
these in <strong>Settings</strong>:</p>
<ul class="text-zinc-700 dark:text-zinc-300">
<li><strong>GIF Banners:</strong> Paste any direct <code>.gif</code> or <code>.jpg</code> URL
to set a custom profile background. (Must be an <code>https</code> link).</li>
<li><strong>Avatar Shapes:</strong> Choose between a classic <strong>Circle</strong> or a
modern <strong>Squircle</strong> frame for your avatar.</li>
<li><strong>Profile Quote:</strong> Set a short status (max 60 chars) like <em>"AIR 1 or
nothing"</em>
to motivate your squad.</li>
</ul>
</section>
<section id="squads-privacy">
<h3 class="text-zinc-900 dark:text-white">Safety & Privacy</h3>
<p class="text-zinc-600 dark:text-zinc-400">You are in full control of who sees your data:</p>
<ul class="text-zinc-700 dark:text-zinc-300">
<li><strong>Share Tasks Toggle:</strong> By default, your "Today" tasks sync to your friends.
Toggle this off in Settings to keep your to-do list private while still sharing focus
status.</li>
<li><strong>Blocking:</strong> If someone becomes distracting, click the <i data-lucide="ban"
class="w-3.5 h-3.5 inline"></i> Block button on their card. This permanently cuts the
mutual connection and prevents them from finding you again.</li>
</ul>
</section>
<hr class="my-16 border-zinc-200 dark:border-zinc-800/50">
<!-- Customization & Advanced -->
<section id="customization">
<h2
class="flex items-center gap-3 text-zinc-900 dark:text-white border-zinc-200 dark:border-zinc-800">
<i data-lucide="palette" class="w-7 h-7 text-brand-500"></i> Themes & Atmosphere
</h2>
<ul class="text-zinc-700 dark:text-zinc-300">
<li><strong>Accent Themes:</strong> Switch between Matcha (Green), Cobalt (Blue), Crimson (Red),
or Monochrome. These update your buttons, rings, and task tags.</li>
<li><strong>Lite Mode:</strong> Disables intensive CSS blurs and animations. Ideal for
improving battery life or speed on budget devices.</li>
</ul>
</section>
<section id="rollover">
<h2
class="flex items-center gap-3 text-zinc-900 dark:text-white border-zinc-200 dark:border-zinc-800">
<i data-lucide="moon" class="w-7 h-7 text-brand-500"></i> Day Rollover (Night Owls)
</h2>
<p class="text-zinc-600 dark:text-zinc-400">If you study until 3:00 AM, standard calendars breaking
your "Today" at midnight is annoying. Change your <strong>Day Rollover</strong> to 4:00 AM.
ChaosPrep will consider it "Today" until you actually go to sleep.</p>
</section>
<section id="data">
<h2
class="flex items-center gap-3 text-zinc-900 dark:text-white border-zinc-200 dark:border-zinc-800">
<i data-lucide="database" class="w-7 h-7 text-brand-500"></i> Backup & Calendar Export
</h2>
<ul class="text-zinc-700 dark:text-zinc-300">
<li><strong>Export to Calendar (.ics):</strong> Generates a calendar file of all your tasks.
Import this into Google or Apple Calendar to see your study schedule alongside life events.
</li>
<li><strong>JSON Backup:</strong> Your entire history (tasks, scores, syllabus) can be exported
as a single file for manual backup.</li>
</ul>
</section>
<section id="reality">
<div
class="bg-rose-50 dark:bg-rose-500/5 border border-rose-200 dark:border-rose-900/50 rounded-[2.5rem] p-8 md:p-10 my-12 shadow-sm">
<h2 class="flex items-center gap-3 !mt-0 !mb-4 !border-none text-rose-900 dark:text-rose-400"><i
data-lucide="alert-triangle" class="w-8 h-8 text-rose-500"></i> Reality Check</h2>
<p class="text-rose-800 dark:text-rose-300/80 font-medium leading-relaxed mb-0">It calculates
exactly how many "sleeps" and Sundays you have left until your exam. It also
shows your <strong>Wasted Potential</strong>—the total hours of prep time you lose if
you waste just 2 hours every day. Brutal honesty is the best motivator.</p>
</div>
</section>
<div class="mt-24 pb-20 text-center">
<img src="logo.png" alt="ChaosPrep"
class="w-12 h-12 mx-auto mb-6 rounded-2xl shadow-lg opacity-50 grayscale">
<p class="text-zinc-400 dark:text-zinc-500 text-[10px] font-black uppercase tracking-[0.2em]">End of
Documentation</p>
</div>
</div>
</main>
</div>
<!-- Mobile Menu Overlay -->
<div id="mobile-menu"
class="fixed inset-0 bg-white dark:bg-[#09090b] z-40 transform translate-x-full transition-transform duration-300 md:hidden overflow-y-auto pt-24 px-6 pb-6">
<nav class="space-y-8">
<div>
<h4 class="text-[10px] font-bold text-zinc-400 uppercase tracking-widest mb-3">Getting Started</h4>
<ul class="space-y-2 text-sm font-semibold text-zinc-700 dark:text-zinc-300">
<li><a href="#introduction" class="mobile-nav-link block py-2">Introduction</a></li>
<li><a href="#setup" class="mobile-nav-link block py-2">Initial Setup</a></li>
</ul>
</div>
<div>
<h4 class="text-[10px] font-bold text-zinc-400 uppercase tracking-widest mb-3">Core Features</h4>
<ul class="space-y-2 text-sm font-semibold text-zinc-700 dark:text-zinc-300">
<li><a href="#planner" class="mobile-nav-link block py-2">Daily Planner</a></li>
<li><a href="#timer" class="mobile-nav-link block py-2">Timer & Focus Radio</a></li>
<li><a href="#daily-qs" class="mobile-nav-link block py-2">Daily Questions</a></li>
<li><a href="#analytics" class="mobile-nav-link block py-2">Analytics</a></li>
<li><a href="#syllabus" class="mobile-nav-link block py-2">Syllabus Tracker</a></li>
</ul>
</div>
<div>
<h4 class="text-[10px] font-bold text-brand-500 uppercase tracking-widest mb-3">Squads</h4>
<ul class="space-y-2 text-sm font-semibold text-zinc-700 dark:text-zinc-300">
<li><a href="#squads-intro" class="mobile-nav-link block py-2">Accountability Loop</a></li>
<li><a href="#squads-profile" class="mobile-nav-link block py-2">Customizing Profile</a></li>
<li><a href="#squads-privacy" class="mobile-nav-link block py-2">Safety & Privacy</a></li>
</ul>
</div>
<div>
<h4 class="text-[10px] font-bold text-zinc-400 uppercase tracking-widest mb-3">Customization</h4>
<ul class="space-y-2 text-sm font-semibold text-zinc-700 dark:text-zinc-300">
<li><a href="#customization" class="mobile-nav-link block py-2">Themes & Settings</a></li>
<li><a href="#rollover" class="mobile-nav-link block py-2">Day Rollover</a></li>
<li><a href="#data" class="mobile-nav-link block py-2">Export Data</a></li>
</ul>
</div>
</nav>
</div>
<script>
lucide.createIcons();
// Dark Mode Logic
function toggleTheme() {
const html = document.documentElement;
const isDark = html.classList.contains('dark');
if (isDark) {
html.classList.remove('dark');
localStorage.setItem('docs-theme', 'light');
updateThemeIcons('moon');
} else {
html.classList.add('dark');
localStorage.setItem('docs-theme', 'dark');
updateThemeIcons('sun');
}
}
function updateThemeIcons(iconName) {
const dIcon = document.getElementById('desktop-theme-icon');
const mIcon = document.getElementById('mobile-theme-icon');
if (dIcon) { dIcon.setAttribute('data-lucide', iconName); }
if (mIcon) { mIcon.setAttribute('data-lucide', iconName); }
lucide.createIcons();
}
// Initialize Theme from LocalStorage or System Preference
const savedTheme = localStorage.getItem('docs-theme');
if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
updateThemeIcons('sun');
}
// Mobile Menu Toggle
const menuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
let isMenuOpen = false;
menuBtn.addEventListener('click', () => {
isMenuOpen = !isMenuOpen;
if (isMenuOpen) {
mobileMenu.classList.remove('translate-x-full');
menuBtn.innerHTML = '<i data-lucide="x" class="w-5 h-5"></i>';
} else {
mobileMenu.classList.add('translate-x-full');
menuBtn.innerHTML = '<i data-lucide="menu" class="w-5 h-5"></i>';
}
lucide.createIcons();
});
// Close mobile menu on link click
document.querySelectorAll('.mobile-nav-link').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('translate-x-full');
menuBtn.innerHTML = '<i data-lucide="menu" class="w-5 h-5"></i>';
isMenuOpen = false;
lucide.createIcons();
});
});
// Scrollspy for Sidebar Highlighting
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.nav-link');
const observerOptions = {
root: null,
rootMargin: '-20% 0px -70% 0px',
threshold: 0
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const id = entry.target.getAttribute('id');
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${id}`) {
link.classList.add('active');
}
});
}
});
}, observerOptions);
sections.forEach(section => observer.observe(section));
</script>
</body>
</html>