-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1180 lines (1010 loc) · 83.5 KB
/
Copy pathindex.html
File metadata and controls
1180 lines (1010 loc) · 83.5 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
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<!-- build: 2026-06-04 -->
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Car-E-Pool User Manual</title>
<style>
:root{--bg:#0D1117;--surface:#161B22;--card:#1C2128;--border:#30363D;--accent:#FF7043;--accent-dim:rgba(255,112,67,.12);--text:#E6EDF3;--muted:#8B949E;--code:#21262D;--success:#3FB950;--warn:#D29922;--info:#58A6FF;--danger:#F85149;--purple:#BC8CFF;--sw:268px}
[data-theme="light"]{--bg:#F6F8FA;--surface:#fff;--card:#F0F2F4;--border:#D0D7DE;--text:#1F2328;--muted:#656D76;--code:#E8EAED}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);display:flex;min-height:100vh;font-size:15px}
a{color:var(--info);text-decoration:none}a:hover{text-decoration:underline}
/* ── Sidebar ── */
.sidebar{width:var(--sw);background:var(--surface);border-right:1px solid var(--border);position:fixed;top:0;left:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;z-index:100;transition:transform .25s ease}
.sb-logo{padding:1.25rem 1rem .75rem;border-bottom:1px solid var(--border)}
.sb-logo h1{font-size:.85rem;font-weight:800;color:var(--accent);letter-spacing:.07em;text-transform:uppercase}
.sb-logo p{font-size:.72rem;color:var(--muted);margin-top:.2rem}
.sb-nav{padding:.75rem .5rem;flex:1}
.nav-lbl{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:.5rem .5rem .2rem}
.nav-item{display:flex;align-items:center;gap:.45rem;padding:.42rem .65rem;border-radius:6px;cursor:pointer;font-size:.82rem;color:var(--muted);transition:all .12s;margin-bottom:.1rem;user-select:none}
.nav-item:hover,.nav-item.active{background:var(--accent-dim);color:var(--accent)}
.sb-footer{padding:.75rem 1rem;border-top:1px solid var(--border)}
/* ── Main ── */
.main{margin-left:var(--sw);flex:1;padding:2rem;max-width:calc(100vw - var(--sw))}
.section{display:none}.section.active{display:block}
/* ── Page header ── */
.pg-hdr{background:linear-gradient(135deg,var(--card) 0%,var(--surface) 100%);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:8px;padding:1.4rem 1.5rem;margin-bottom:1.5rem}
.pg-hdr h2{font-size:1.2rem;font-weight:800;margin-bottom:.35rem}
.pg-hdr p{color:var(--muted);font-size:.875rem;line-height:1.65}
/* ── Section title ── */
.stitle{font-size:.95rem;font-weight:800;margin:1.5rem 0 .7rem;padding-bottom:.45rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.4rem}
/* ── Card ── */
.card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:1.1rem 1.25rem;margin-bottom:1rem}
.card h3{font-size:.88rem;font-weight:700;margin-bottom:.65rem}
.card p,.card li{font-size:.83rem;color:var(--muted);line-height:1.65}
.card ul,.card ol{padding-left:1.1rem;margin-top:.4rem}
.card li{margin-bottom:.25rem}
/* ── Step cards ── */
.step{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:1.1rem 1.25rem;margin-bottom:.75rem;display:flex;gap:1rem}
.step-num{background:var(--accent);color:#fff;font-size:.78rem;font-weight:800;min-width:1.75rem;height:1.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.05rem}
.step-body{flex:1}
.step-body h4{font-size:.87rem;font-weight:700;margin-bottom:.4rem}
.step-body p,.step-body li{font-size:.83rem;color:var(--muted);line-height:1.65}
.step-body ul,.step-body ol{padding-left:1.1rem;margin-top:.35rem}
.step-body li{margin-bottom:.2rem}
/* ── Callouts ── */
.callout{border-radius:8px;padding:.9rem 1.1rem;margin:.9rem 0;display:flex;gap:.7rem;align-items:flex-start}
.callout-icon{font-size:1.1rem;flex-shrink:0;margin-top:.05rem}
.callout .cb{flex:1}
.callout h4{font-size:.82rem;font-weight:700;margin-bottom:.25rem}
.callout p,.callout li{font-size:.82rem;line-height:1.6}
.callout ul{padding-left:1rem;margin-top:.3rem}
.callout li{margin-bottom:.15rem}
.callout.tip{background:rgba(63,185,80,.1);border:1px solid rgba(63,185,80,.3)}.callout.tip h4{color:var(--success)}
.callout.warn{background:rgba(210,153,34,.1);border:1px solid rgba(210,153,34,.3)}.callout.warn h4{color:var(--warn)}
.callout.info{background:rgba(88,166,255,.1);border:1px solid rgba(88,166,255,.3)}.callout.info h4{color:var(--info)}
.callout.danger{background:rgba(248,81,73,.1);border:1px solid rgba(248,81,73,.3)}.callout.danger h4{color:var(--danger)}
/* ── Grid ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.25rem}
/* ── Table ── */
.tbl-wrap{overflow-x:auto;margin:1rem 0}
table{width:100%;border-collapse:collapse;font-size:.82rem}
th{background:var(--card);padding:.55rem .9rem;text-align:left;font-weight:700;font-size:.75rem;color:var(--muted);border:1px solid var(--border)}
td{padding:.55rem .9rem;border:1px solid var(--border);vertical-align:top;line-height:1.55}
tr:nth-child(even) td{background:rgba(255,255,255,.02)}
td code,th code{font-size:.8em}
/* ── Inline code ── */
code{background:var(--code);border:1px solid var(--border);border-radius:4px;padding:.08em .38em;font-family:'JetBrains Mono',Consolas,monospace;font-size:.84em}
pre{background:var(--code);border:1px solid var(--border);border-radius:8px;padding:.9rem 1rem;overflow-x:auto;font-family:'JetBrains Mono',Consolas,monospace;font-size:.78rem;line-height:1.65;margin:.75rem 0}
/* ── Flow / Status diagrams ── */
.flow{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:.9rem 0;padding:.9rem;background:var(--code);border:1px solid var(--border);border-radius:8px}
.flow-step{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:.35rem .65rem;font-size:.77rem;font-weight:600;white-space:nowrap}
.flow-step.a{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.flow-step.s{background:rgba(63,185,80,.15);border-color:var(--success);color:var(--success)}
.flow-step.i{background:rgba(88,166,255,.15);border-color:var(--info);color:var(--info)}
.flow-step.w{background:rgba(210,153,34,.15);border-color:var(--warn);color:var(--warn)}
.flow-step.d{background:rgba(248,81,73,.15);border-color:var(--danger);color:var(--danger)}
.flow-arrow{color:var(--muted);padding:0 .4rem;font-size:.85rem}
/* ── Accordion (FAQ) ── */
.acc{border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:.7rem}
.acc-hdr{background:var(--card);padding:.85rem 1.1rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:.87rem;transition:background .12s;user-select:none}
.acc-hdr:hover{background:var(--surface)}
.acc-hdr .chev{transition:transform .2s;color:var(--muted);font-size:.75rem}
.acc-hdr.open .chev{transform:rotate(180deg)}
.acc-body{display:none;padding:1rem 1.25rem;background:var(--surface);border-top:1px solid var(--border)}
.acc-body.open{display:block}
.acc-body p,.acc-body li{font-size:.83rem;color:var(--muted);line-height:1.65}
.acc-body ul{padding-left:1.1rem;margin-top:.35rem}
.acc-body li{margin-bottom:.2rem}
/* ── Tags ── */
.tag{display:inline-block;padding:.18rem .55rem;border-radius:4px;font-size:.72rem;font-weight:700;margin:.15rem}
.tag.a{background:var(--accent-dim);color:var(--accent)}
.tag.s{background:rgba(63,185,80,.15);color:var(--success)}
.tag.i{background:rgba(88,166,255,.15);color:var(--info)}
.tag.w{background:rgba(210,153,34,.15);color:var(--warn)}
.tag.d{background:rgba(248,81,73,.15);color:var(--danger)}
/* ── Highlight strip ── */
.hl{background:var(--accent-dim);border-left:3px solid var(--accent);padding:.65rem .9rem;border-radius:0 6px 6px 0;margin:.65rem 0;font-size:.84rem;line-height:1.6}
/* ── Toggle button ── */
.toggle-btn{background:var(--card);border:1px solid var(--border);color:var(--text);padding:.3rem .7rem;border-radius:6px;cursor:pointer;font-size:.8rem;font-family:inherit;transition:all .12s}
.toggle-btn:hover{border-color:var(--accent);color:var(--accent)}
/* ── Scrollbar ── */
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
/* ── Mobile top bar ── */
.mob-bar{display:none;position:fixed;top:0;left:0;right:0;height:52px;background:var(--surface);border-bottom:1px solid var(--border);align-items:center;padding:0 1rem;gap:.75rem;z-index:200}
.mob-title{font-size:.85rem;font-weight:800;color:var(--accent);flex:1;letter-spacing:.05em;text-transform:uppercase}
.ham-btn{background:none;border:none;color:var(--text);cursor:pointer;font-size:1.4rem;line-height:1;padding:.2rem .3rem}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99;opacity:0;pointer-events:none;transition:opacity .25s}
.overlay.show{opacity:1;pointer-events:all}
/* ── Responsive ── */
@media(max-width:1024px){.g2,.g3{grid-template-columns:1fr}}
@media(max-width:768px){
.mob-bar{display:flex}
.overlay{display:block}
.sidebar{transform:translateX(-100%)}
.sidebar.open{transform:translateX(0)}
.main{margin-left:0;max-width:100vw;padding:1rem;padding-top:4.5rem}
.pg-hdr{padding:1rem 1.1rem}
.pg-hdr h2{font-size:1rem}
.stitle{font-size:.88rem}
pre{font-size:.72rem;padding:.75rem}
.card{padding:.9rem 1rem}
table{font-size:.75rem}
th,td{padding:.45rem .65rem}
.step{gap:.65rem}
.sb-footer{display:none}
}
</style>
</head>
<body>
<!-- Mobile top bar -->
<div class="mob-bar">
<button class="ham-btn" onclick="toggleSidebar()">☰</button>
<span class="mob-title">Car-E-Pool Manual</span>
<button class="toggle-btn" onclick="toggleTheme()">🌙</button>
</div>
<div class="overlay" id="overlay" onclick="closeSidebar()"></div>
<!-- ═══════════════ SIDEBAR ═══════════════ -->
<aside class="sidebar" id="sidebar">
<div class="sb-logo">
<h1>Car-E-Pool</h1>
<p>User Manual — Version 1.8</p>
<p style="margin-top:.2rem;font-size:.68rem;color:var(--muted)">© aspect;</p>
</div>
<nav class="sb-nav">
<div class="nav-lbl">Reference</div>
<div class="nav-item active" onclick="show('s-intro',this)">📖 Introduction</div>
<div class="nav-item" onclick="show('s-start',this)">🚀 Getting Started</div>
<div class="nav-lbl" style="margin-top:.5rem">Driver</div>
<div class="nav-item" onclick="show('s-post',this)">🚗 Post a Ride</div>
<div class="nav-item" onclick="show('s-manage',this)">🎛️ Manage Your Ride</div>
<div class="nav-lbl" style="margin-top:.5rem">Passenger</div>
<div class="nav-item" onclick="show('s-find',this)">🔍 Find & Book</div>
<div class="nav-item" onclick="show('s-bookings',this)">📜 My Bookings</div>
<div class="nav-lbl" style="margin-top:.5rem">Features</div>
<div class="nav-item" onclick="show('s-ratings',this)">⭐ Ratings & Favorites</div>
<div class="nav-item" onclick="show('s-hubs',this)">📍 Hubs</div>
<div class="nav-item" onclick="show('s-profile',this)">👤 Profile & Vehicles</div>
<div class="nav-lbl" style="margin-top:.5rem">Rules</div>
<div class="nav-item" onclick="show('s-rules',this)">📋 Business Rules</div>
<div class="nav-item" onclick="show('s-roles',this)">🔑 Roles & Permissions</div>
<div class="nav-lbl" style="margin-top:.5rem">Help</div>
<div class="nav-item" onclick="show('s-faq',this)">❓ Troubleshooting</div>
</nav>
<div class="sb-footer">
<button class="toggle-btn" onclick="toggleTheme()">🌙 Toggle Theme</button>
</div>
</aside>
<!-- ═══════════════ MAIN ═══════════════ -->
<main class="main">
<!-- ══════ 1. INTRODUCTION ══════ -->
<section id="s-intro" class="section active">
<div class="pg-hdr">
<h2>📖 Introduction</h2>
<p>Welcome to the Car-E-Pool User Manual — the complete reference for every feature, rule, and workflow in the platform.</p>
</div>
<div class="stitle">What Is Car-E-Pool?</div>
<div class="card">
<p>Car-E-Pool is a <strong>Telegram-based carpooling coordination system</strong> for daily commuters sharing a common corridor (e.g., South Metro Manila ↔ BGC / Makati). It connects drivers who have empty seats with passengers looking for a comfortable, shared ride.</p>
<p style="margin-top:.6rem">The entire experience operates through a <strong>Telegram bot</strong> (private chat). There is no separate app to download or website to visit — booking, rating, and notifications all happen inside Telegram.</p>
</div>
<div class="stitle">How It Works</div>
<div class="flow">
<span class="flow-step a">Driver posts ride</span><span class="flow-arrow">→</span>
<span class="flow-step">Announced in group</span><span class="flow-arrow">→</span>
<span class="flow-step i">Passenger searches</span><span class="flow-arrow">→</span>
<span class="flow-step i">Sends booking request</span><span class="flow-arrow">→</span>
<span class="flow-step a">Driver accepts</span><span class="flow-arrow">→</span>
<span class="flow-step s">Both confirmed</span><span class="flow-arrow">→</span>
<span class="flow-step s">Ride completes → Rate each other</span>
</div>
<div class="stitle">Join the Community</div>
<div class="card" style="border-color:var(--accent);background:var(--accent-dim)">
<p style="font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:.65rem">Two steps to get started:</p>
<div style="display:flex;flex-direction:column;gap:.75rem">
<div style="display:flex;align-items:flex-start;gap:.75rem">
<span style="background:var(--accent);color:#fff;font-size:.75rem;font-weight:800;min-width:1.6rem;height:1.6rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.05rem">1</span>
<div>
<p style="font-size:.85rem;font-weight:700;color:var(--text);margin-bottom:.2rem">Join the Car-E-Pool Telegram Group</p>
<p style="font-size:.83rem;color:var(--muted);margin-bottom:.4rem">This is where ride announcements are posted. You'll see new rides from drivers in real time.</p>
<a href="https://t.me/southispoolofcare/229117" target="_blank" style="display:inline-flex;align-items:center;gap:.4rem;background:var(--accent);color:#fff;padding:.45rem .9rem;border-radius:6px;font-size:.82rem;font-weight:700;text-decoration:none">📣 Join the Community Group</a>
</div>
</div>
<div style="display:flex;align-items:flex-start;gap:.75rem">
<span style="background:var(--info);color:#fff;font-size:.75rem;font-weight:800;min-width:1.6rem;height:1.6rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.05rem">2</span>
<div>
<p style="font-size:.85rem;font-weight:700;color:var(--text);margin-bottom:.2rem">Open the Car-E-Pool Bot in Private Chat</p>
<p style="font-size:.83rem;color:var(--muted);margin-bottom:.4rem">This is where you post rides, search, book, and manage everything. Send <code>/start</code> to register instantly.</p>
<a href="https://t.me/car_e_poolPH_bot" target="_blank" style="display:inline-flex;align-items:center;gap:.4rem;background:var(--info);color:#fff;padding:.45rem .9rem;border-radius:6px;font-size:.82rem;font-weight:700;text-decoration:none">🤖 Open @car_e_poolPH_bot</a>
</div>
</div>
</div>
<p style="font-size:.77rem;color:var(--muted);margin-top:.85rem">Both are required — the group is for announcements, the bot is for everything else.</p>
</div>
<div class="stitle">Key Concepts</div>
<div class="tbl-wrap">
<table>
<thead><tr><th>Term</th><th>Meaning</th></tr></thead>
<tbody>
<tr><td><strong>Ride</strong></td><td>A trip offered by a driver with available seats</td></tr>
<tr><td><strong>Booking</strong></td><td>A passenger's request to join a ride</td></tr>
<tr><td><strong>Hub</strong></td><td>A named pickup/dropoff landmark (e.g., "SM Southmall", "BGC High Street")</td></tr>
<tr><td><strong>Gas Contribution</strong></td><td>The per-passenger cost share for fuel, set by the driver</td></tr>
<tr><td><strong>Favorite Driver</strong></td><td>A driver you follow to receive alerts when they post new rides</td></tr>
<tr><td><strong>Group Announcement</strong></td><td>An automatic post in the community Telegram group when a ride is published</td></tr>
<tr><td><strong>Direction</strong></td><td>HOME → WORK (morning) or WORK → HOME (evening)</td></tr>
</tbody>
</table>
</div>
<div class="callout info"><span class="callout-icon">ℹ️</span><div class="cb"><h4>Bot — Private Chat Only</h4><p>The bot only responds to private chat messages. Group posts (ride announcements) are one-way; the bot never replies to group messages.</p></div></div>
</section>
<!-- ══════ 2. GETTING STARTED ══════ -->
<section id="s-start" class="section">
<div class="pg-hdr">
<h2>🚀 Getting Started</h2>
<p>Everything you need to register and navigate the bot for the first time.</p>
</div>
<div class="stitle">System Requirements</div>
<div class="tbl-wrap">
<table>
<thead><tr><th>Requirement</th><th>Details</th></tr></thead>
<tbody>
<tr><td>Device</td><td>Any smartphone, tablet, or computer</td></tr>
<tr><td>App</td><td>Telegram (any version supporting bots)</td></tr>
<tr><td>Internet</td><td>Active internet connection</td></tr>
<tr><td>Account</td><td>A Telegram account</td></tr>
</tbody>
</table>
</div>
<div class="stitle">Registration</div>
<p style="font-size:.85rem;color:var(--muted);margin-bottom:.75rem">Registration is <strong>automatic</strong> — no sign-up form needed.</p>
<div class="step"><div class="step-num">1</div><div class="step-body"><h4>Open the bot</h4><p>Search for <a href="https://t.me/car_e_poolPH_bot" target="_blank"><strong>@car_e_poolPH_bot</strong></a> in Telegram, or tap the link directly. Tap <strong>START</strong> or send <code>/start</code>.</p></div></div>
<div class="step"><div class="step-num">2</div><div class="step-body"><h4>Auto-registration</h4><p>The bot verifies your Telegram identity. If this is your first time, an account is created instantly using your Telegram full name, username (if set), and profile photo.</p></div></div>
<div class="step"><div class="step-num">3</div><div class="step-body"><h4>Accept Terms & Conditions</h4><p>On first login the bot presents Community Terms. <strong>Accept</strong> to use all features. <strong>Decline</strong> keeps your account active but you'll be re-prompted after 7 days.</p></div></div>
<div class="stitle">Navigating the Bot</div>
<div class="card">
<p>The bot uses <strong>inline keyboard buttons</strong> — tappable options beneath messages. Most actions are button-driven; you rarely type manually.</p>
<ul style="margin-top:.65rem">
<li><strong>🔵 Blue (Primary)</strong> — Navigation or neutral: 🏠 Menu, ◀️ Back</li>
<li><strong>🟢 Green (Success)</strong> — Confirm or positive: ✅ Post Ride, ✅ Book This Ride</li>
<li><strong>🔴 Red (Danger)</strong> — Cancel or destructive: ❌ Cancel, ❌ Decline</li>
</ul>
</div>
<div class="stitle">Main Menu States</div>
<p style="font-size:.83rem;color:var(--muted);margin-bottom:.75rem">The main menu is context-aware — it changes based on whether you have an active ride.</p>
<div class="g2">
<div class="card">
<h3>No Active Ride</h3>
<ul>
<li>🏠 Home to Work | 🏢 Work to Home</li>
<li>📜 My Bookings (N) — when you have active bookings</li>
<li>🔄 Repost a Ride — when you have past rides</li>
<li>👤 My Profile</li>
<li>⭐ My Ratings</li>
</ul>
</div>
<div class="card">
<h3>One Active Ride Posted</h3>
<ul>
<li>Ride card summary</li>
<li>👥 My Passengers | 🚀 Start Ride</li>
<li>⏳ Pending (N) | ❌ Cancel Ride</li>
<li>📢 Re-announce (N left)</li>
<li>✏️ Edit Time</li>
<li>📜 My Bookings (N) — if you also have passenger bookings</li>
<li>🚗 Post a Ride | 🔄 Repost [other direction] — when you have fewer than 2 active rides</li>
</ul>
</div>
</div>
<div class="callout tip"><span class="callout-icon">💡</span><div class="cb"><h4>Button distinction</h4><p><strong>👥 My Passengers</strong> shows passengers booked on <em>your</em> ride (driver view). <strong>📜 My Bookings</strong> shows your bookings as a passenger on someone else's ride. Both can appear at the same time.</p></div></div>
<div class="callout info"><span class="callout-icon">🧭</span><div class="cb"><h4>Two or more active rides → ride picker</h4><p>If you have <strong>2+ active rides</strong> at once (e.g. one Home→Work and one Work→Home, or a DEPARTED ride alongside a new ACTIVE one), the menu shows a picker — one button per ride with its direction and a live pending-request count — instead of opening a card directly. See <strong>🎛️ Manage Your Ride</strong> for details.</p></div></div>
<div class="stitle">Available Commands</div>
<div class="tbl-wrap">
<table>
<thead><tr><th>Command</th><th>Action</th></tr></thead>
<tbody>
<tr><td><code>/start</code></td><td>Open main menu & authenticate</td></tr>
<tr><td><code>/postride</code></td><td>Shortcut to post a ride</td></tr>
<tr><td><code>/findride</code></td><td>Shortcut to search for a ride</td></tr>
<tr><td><code>/myrides</code></td><td>View your driver rides</td></tr>
<tr><td><code>/mybookings</code></td><td>View your passenger bookings</td></tr>
<tr><td><code>/profile</code></td><td>View your profile & stats</td></tr>
<tr><td><code>/vehicle</code></td><td>Manage your saved vehicles</td></tr>
<tr><td><code>/help</code></td><td>Help center</td></tr>
</tbody>
</table>
</div>
<div class="callout warn"><span class="callout-icon">⏱️</span><div class="cb"><h4>Session Timeout</h4><p>The bot maintains your conversation step for <strong>30 minutes</strong> of inactivity. After 30 minutes idle, your session resets. Buttons from old messages remain visible in Telegram but show a "session expired" prompt if tapped after a reset.</p></div></div>
</section>
<!-- ══════ 3. POST A RIDE ══════ -->
<section id="s-post" class="section">
<div class="pg-hdr">
<h2>🚗 Post a Ride</h2>
<p>For users with a <strong>Driver</strong> or <strong>Both</strong> role who have a registered vehicle.</p>
</div>
<div class="step"><div class="step-num">1</div><div class="step-body"><h4>Select Direction</h4>
<div class="flow" style="margin-top:.5rem"><span class="flow-step a">🏠 Home → Work</span><span class="flow-arrow" style="padding:0 1rem">or</span><span class="flow-step i">🏢 Work → Home</span></div>
</div></div>
<div class="step"><div class="step-num">2</div><div class="step-body"><h4>Select Departure Date & Time</h4>
<p>A <strong>calendar picker</strong> appears — tap your departure day. Then an <strong>inline time picker</strong> shows up to 20 slots in 15-minute increments. Use <strong>◀️ Earlier</strong> or <strong>Later ▶️</strong> to shift the window by 5 hours.</p>
<ul>
<li>HOME → WORK defaults to a 5:00 AM window; WORK → HOME to a 3:00 PM window</li>
<li>When today is selected, the picker auto-opens on the first page with future slots</li>
<li>To enter a time not shown, type it as <code>MM/DD HH:MM</code> (e.g., <code>05/15 07:30</code>)</li>
<li>Departure time must be in the future — past times are rejected</li>
</ul>
</div></div>
<div class="step"><div class="step-num">3</div><div class="step-body"><h4>Select Origin Hub (Pickup Point)</h4>
<p>Type at least <strong>3 characters</strong> of a landmark name. The bot suggests matching hubs. Tap to select, or tap <strong>"Use '[your text]'"</strong> to save a custom location as a pending hub.</p>
<p style="margin-top:.4rem">The bot also shows your <strong>5 most recently used</strong> pickup points for quick reselection.</p>
</div></div>
<div class="step"><div class="step-num">4</div><div class="step-body"><h4>Select Destination Hub (Drop-off Point)</h4>
<p>Same as Step 3. The origin hub is excluded from suggestions. <strong>Origin and destination cannot be the same location.</strong></p>
</div></div>
<div class="step"><div class="step-num">5</div><div class="step-body"><h4>Number of Seats</h4>
<p>Enter how many passenger seats you are offering. <strong>Minimum: 1 | Maximum: 7</strong></p>
</div></div>
<div class="step"><div class="step-num">6</div><div class="step-body"><h4>Gas Contribution Amount</h4>
<p>Enter the per-passenger fuel contribution in ₱. <strong>Minimum: ₱0.00 (free ride)</strong> — no upper limit.</p>
</div></div>
<div class="step"><div class="step-num">7</div><div class="step-body"><h4>Add Notes (Optional)</h4>
<p>Up to <strong>300 characters</strong>. Share pickup spot details, stops, or reminders. If you've used notes before, they appear as quick-select buttons (📌). Tap <strong>⏭️ Skip</strong> to post without a note.</p>
</div></div>
<div class="step"><div class="step-num">8</div><div class="step-body"><h4>Select Vehicle</h4>
<p>Your saved vehicles appear as buttons. Tap the one you're using. If you have fewer than 3 saved vehicles, <strong>➕ Add New Vehicle</strong> also appears. If no vehicle is saved yet, the bot goes straight to vehicle registration.</p>
</div></div>
<div class="step"><div class="step-num">9</div><div class="step-body"><h4>Review & Confirm</h4>
<p>A summary of all ride details is shown. Tap <strong>✅ Post Ride</strong> to publish or <strong>❌ Cancel</strong> to discard.</p>
</div></div>
<div class="stitle">After Posting</div>
<div class="card">
<ul>
<li>An announcement is posted to the community Telegram group in the correct topic (Home→Work or Work→Home) with two buttons: <code>🚘#N - Request 💺</code> and <code>✚ Follow</code>.</li>
<li>All users who have saved you as a <strong>Favorite Driver</strong> receive a private alert.</li>
<li>Your ride status becomes <strong>ACTIVE</strong> and is searchable by passengers.</li>
</ul>
</div>
<div class="callout info"><span class="callout-icon">🔒</span><div class="cb"><h4>Plate Number Privacy</h4><p>Your vehicle's plate number is <strong>not</strong> shown in the group announcement. It is shared privately only with passengers whose booking you accept.</p></div></div>
</section>
<!-- ══════ 4. MANAGE YOUR RIDE ══════ -->
<section id="s-manage" class="section">
<div class="pg-hdr">
<h2>🎛️ Manage Your Ride</h2>
<p>All management options appear on the main menu when you have an active ride. Tap <strong>👥 My Passengers</strong> to see your confirmed and pending passengers.</p>
</div>
<div class="stitle">🧭 Managing Multiple Active Rides (Ride Picker)</div>
<div class="card">
<p>You can run rides in <strong>both directions</strong> at once (e.g. a morning Home→Work ride and an evening Work→Home ride), and a ride that has <strong>DEPARTED</strong> still counts as active until you complete it. Whenever you have <strong>2 or more</strong> active rides, opening the menu shows a picker instead of a single card:</p>
<pre>🚗 You have 2 active rides. Which one would you like to manage?
[🏠 Home → Work · ⏳ 2 pending]
[🏢 Work → Home · ✅ 0 pending]
[📜 My Bookings (1)]
[👤 My Profile]</pre>
<p style="margin-top:.6rem">Each button shows the ride's direction plus a <strong>live pending-request count</strong>. Tap one to open its full management card — scoped entirely to that ride. Pending requests, "◀️ Back to Pending" navigation, and all counts stay scoped to the ride you opened; actions on one never affect the other.</p>
<div class="callout info" style="margin-top:.7rem"><span class="callout-icon">ℹ️</span><div class="cb"><h4>One active ride? No picker.</h4><p>With exactly one active ride, the bot skips the picker and opens that ride's management card directly — unchanged from before.</p></div></div>
</div>
<div class="stitle">🚗 Posting a Second Ride While One Is Active</div>
<div class="card">
<p>The "one active ride per direction" rule (see Business Rules) only blocks a <em>second</em> ride in the <em>same</em> direction — it doesn't stop you from posting the return leg. With fewer than 2 active rides, your ride's management card shows two extra shortcuts:</p>
<ul style="margin-top:.5rem">
<li><strong>🚗 Post a Ride</strong> — starts the normal post-ride flow from direction selection</li>
<li><strong>🔄 Repost [other direction]</strong> — skips direction selection entirely and jumps straight into posting a ride in the <em>opposite</em> direction (e.g. tapping it on a Home→Work ride takes you straight into posting Work→Home)</li>
</ul>
<div class="callout warn" style="margin-top:.7rem"><span class="callout-icon">⚠️</span><div class="cb"><h4>Hidden for "Other" direction</h4><p>🔄 Repost only appears for Home↔Work rides — there's no clear "opposite" for an "Other" direction ride. Both shortcuts disappear once you have 2 active rides; use the ride picker above to manage them instead.</p></div></div>
</div>
<div class="stitle">Responding to Booking Requests</div>
<div class="g2">
<div class="card">
<h3>✅ Accept</h3>
<ul>
<li>Booking → <span class="tag s">CONFIRMED</span></li>
<li>Passenger gets your vehicle details (color, model, plate)</li>
<li>Seat count decreases; if last seat filled → ride → <span class="tag w">FULL</span></li>
<li>All other PENDING requests on the same ride are auto-cancelled</li>
</ul>
</div>
<div class="card">
<h3>❌ Decline</h3>
<p style="margin-bottom:.5rem">Select a preset reason:</p>
<ul>
<li>🚗 Fully booked already</li>
<li>📍 Route change</li>
<li>🔧 Vehicle issue</li>
<li>❌ Other reason</li>
</ul>
<p style="margin-top:.5rem">Passenger is notified with the reason; seat is freed.</p>
</div>
</div>
<div class="stitle">Ride Lifecycle Actions</div>
<div class="acc">
<div class="acc-hdr" onclick="toggleAcc(this)"><span>🚀 Start Ride</span><span class="chev">▼</span></div>
<div class="acc-body">
<p>Tap <strong>🚀 Start Ride</strong> when you are physically beginning the journey.</p>
<ul style="margin-top:.5rem">
<li>You can only start up to <strong>1 hour before</strong> the scheduled departure time — tapping too early shows a countdown</li>
<li>Ride status → <span class="tag a">DEPARTED</span></li>
<li>No new bookings can be accepted</li>
<li>All confirmed passengers receive a departure notification</li>
<li>The group announcement is deleted</li>
</ul>
</div>
</div>
<div class="acc">
<div class="acc-hdr" onclick="toggleAcc(this)"><span>✅ Complete Ride</span><span class="chev">▼</span></div>
<div class="acc-body">
<p>Tap <strong>✅ Complete Ride</strong> after arriving at the destination.</p>
<ul style="margin-top:.5rem">
<li>Ride status → <span class="tag s">COMPLETED</span></li>
<li>All confirmed passengers' bookings → COMPLETED</li>
<li>Both you and all confirmed passengers receive a <strong>rating prompt</strong></li>
<li>The bot asks: "Would you like to post another ride?" — tap 🚗 Yes or ❌ No, Thanks</li>
</ul>
</div>
</div>
<div class="acc">
<div class="acc-hdr" onclick="toggleAcc(this)"><span>❌ Cancel Ride</span><span class="chev">▼</span></div>
<div class="acc-body">
<p>Available at any point before departing. If you have passengers, select a reason:</p>
<ul style="margin-top:.35rem">
<li>🔧 Vehicle issue | 📍 Route change | 🏠 Personal reason | ❌ Other reason</li>
</ul>
<p style="margin-top:.5rem">All pending and confirmed passengers are notified. Their bookings → CANCELLED BY DRIVER. Group announcement is deleted.</p>
<div class="callout warn" style="margin-top:.7rem"><span class="callout-icon">⚠️</span><div class="cb"><h4>Please cancel promptly</h4><p>Passengers are holding a seat and may have turned down alternatives.</p></div></div>
</div>
</div>
<div class="stitle">✏️ Edit Departure Time</div>
<div class="card">
<p>Available on <span class="tag a">ACTIVE</span> or <span class="tag w">FULL</span> rides. Tap <strong>✏️ Edit Time</strong> from the main menu.</p>
<ul style="margin-top:.6rem">
<li>A calendar → time picker flow opens (same as posting a ride)</li>
<li>A <strong>confirmation screen</strong> shows the current and new time — tap <strong>✅ Confirm Update</strong> to apply</li>
<li>New time must be <strong>≥ 15 minutes in the future</strong> and must differ from the current time</li>
</ul>
<p style="margin-top:.65rem;font-size:.83rem;color:var(--muted)"><strong>After confirming:</strong> (1) ride time is updated, (2) all confirmed passengers receive a DM with <strong>✅ Keep Booking</strong> / <strong>❌ Cancel Booking</strong> buttons, (3) the group announcement is deleted and reposted with the new time — no re-announce slot is consumed.</p>
</div>
<div class="stitle">📢 Re-Announce</div>
<div class="card">
<p>Tap <strong>📢 Re-announce</strong> to bump your ride back to the top of the group channel.</p>
<ul style="margin-top:.6rem">
<li>The bot asks: <em>"How many available seats do you want to show?"</em></li>
<li><strong>Enter ≥ 1:</strong> seat count updated, fresh announcement posted. Bot confirms seats remaining and re-announces left.</li>
<li><strong>Enter 0:</strong> ride → <span class="tag w">FULL</span>, group post removed. Closes bookings without cancelling the ride.</li>
<li>Maximum <strong>9 re-announces</strong> after the initial post (10 group posts total). Button disappears once the limit is reached.</li>
<li>Follower alerts are <strong>not</strong> re-sent on re-announces.</li>
</ul>
</div>
<div class="stitle">🗑️ Remove a Confirmed Passenger</div>
<div class="card">
<p>In <strong>My Passengers</strong>, each confirmed passenger has a <strong>🗑️ Remove</strong> button.</p>
<ul style="margin-top:.5rem">
<li>Removed passenger is notified immediately</li>
<li>Their seat is freed (FULL ride reverts to ACTIVE)</li>
<li>Group announcement auto-refreshed with updated seat count</li>
</ul>
</div>
<div class="stitle">🔄 Repost a Recent Ride</div>
<div class="card">
<p>Your last 3 completed or cancelled rides appear under <strong>My Rides</strong> with a <strong>🔄 Repost</strong> button. Tapping it opens an edit screen pre-filled with the original details:</p>
<pre>🔄 Edit Ride for Repost
↔️ Direction: 🏠 Home → Work
📍 From: SM Southmall 🏁 To: BGC High Street
🪑 Seats: 3 ⛽ Gas share: ₱80/seat
📝 Note: Cash only
[📍 Edit Start] [🏁 Edit End] [🪑 Edit Seats] [⛽ Edit Share] [📝 Edit Note]
[✅ Continue] [❌ Cancel]</pre>
<p>Tap any field to change it, then <strong>✅ Continue</strong> to pick a new date/time, select your vehicle, and confirm.</p>
<div class="callout warn" style="margin-top:.75rem"><span class="callout-icon">⚠️</span><div class="cb"><h4>Active ride guard</h4><p>If you already have an ACTIVE or FULL ride in the same direction, Repost is blocked: "You already have an active ride post for this direction. Please cancel it first."</p></div></div>
</div>
</section>
<!-- ══════ 5. FIND & BOOK ══════ -->
<section id="s-find" class="section">
<div class="pg-hdr">
<h2>🔍 Find & Book a Ride</h2>
<p>For users with a <strong>Passenger</strong> or <strong>Both</strong> role.</p>
</div>
<div class="step"><div class="step-num">1</div><div class="step-body"><h4>Choose Direction</h4>
<p>Tap <strong>🔍 Find a Ride</strong> from the main menu, then select your commute direction.</p>
</div></div>
<div class="step"><div class="step-num">2</div><div class="step-body"><h4>Select Date</h4>
<p>A calendar picker appears — choose your travel date.</p>
</div></div>
<div class="step"><div class="step-num">3</div><div class="step-body"><h4>Select Time Window</h4>
<div class="tbl-wrap" style="margin-top:.5rem">
<table>
<thead><tr><th>Option</th><th>Time Range</th></tr></thead>
<tbody>
<tr><td>🌙 Early Bird</td><td>1:00 AM – 4:00 AM</td></tr>
<tr><td>🌙 Early Morning</td><td>4:00 AM – 6:00 AM</td></tr>
<tr><td>🌅 Morning Rush</td><td>6:00 AM – 9:00 AM</td></tr>
<tr><td>☀️ Late Morning</td><td>9:00 AM – 12:00 PM</td></tr>
<tr><td>🌤️ Noon</td><td>12:00 PM – 3:00 PM</td></tr>
<tr><td>🌇 Afternoon</td><td>3:00 PM – 6:00 PM</td></tr>
<tr><td>🌆 Evening</td><td>6:00 PM – 12:00 AM</td></tr>
<tr><td>🔍 Show All</td><td>All times for the selected date</td></tr>
<tr><td>📅 Custom Date & Time</td><td>Enter your own date and time as text</td></tr>
</tbody>
</table>
</div>
</div></div>
<div class="step"><div class="step-num">4</div><div class="step-body"><h4>Browse Results</h4>
<p>Results show 3 rides per page. Use <strong>◀️ Prev / Next ▶️</strong> to navigate. Tap <strong>🔧 Adjust Filters</strong> to narrow by:</p>
<ul>
<li><strong>Max Price (₱)</strong> — rides at or below this contribution</li>
<li><strong>Min Seats</strong> — rides with at least this many available seats</li>
<li><strong>Sort by</strong> — Earliest departure (default) | Cheapest | Most seats available</li>
</ul>
</div></div>
<div class="step"><div class="step-num">5</div><div class="step-body"><h4>View Ride Details</h4>
<p>Tap <strong>View #N</strong> to see the full ride card: route, time, seats, gas share, driver name & rating, member badge, and any ride notes.</p>
<p style="margin-top:.45rem">Tap <strong>⭐ See Ratings</strong> on the ride card to open the driver's ratings wall — all reviews they have received, paginated.</p>
</div></div>
<div class="step"><div class="step-num">6</div><div class="step-body"><h4>Send Booking Request</h4>
<p>Tap <strong>✅ Book This Ride</strong>. The bot asks for an optional message to the driver (max 300 characters) — share your pickup spot, companions, or any question. Tap <strong>⏭️ Skip</strong> if nothing to add.</p>
<p style="margin-top:.5rem">Your booking is sent with status <span class="tag w">PENDING</span>.</p>
</div></div>
<div class="stitle">What Happens Next</div>
<div class="tbl-wrap">
<table>
<thead><tr><th>Event</th><th>Your Notification</th></tr></thead>
<tbody>
<tr><td>Driver accepts</td><td>✅ Booking confirmed — DM includes vehicle details and a 📋 View My Booking button</td></tr>
<tr><td>Driver declines</td><td>❌ Booking declined with reason</td></tr>
<tr><td>Ride fills up while pending</td><td>ℹ️ Booking request withdrawn — you are free to book another ride</td></tr>
<tr><td>No response after reminders</td><td>Booking stays PENDING — cancel manually and find another ride if needed</td></tr>
</tbody>
</table>
</div>
<div class="callout info"><span class="callout-icon">🔔</span><div class="cb"><h4>Driver reminders</h4><p>If the driver does not respond, they receive automatic reminders at <strong>15, 30, and 45 minutes</strong>. After 3 reminders there is no further automatic action — the booking stays pending indefinitely until the driver responds or you cancel it manually.</p></div></div>
</section>
<!-- ══════ 6. MY BOOKINGS ══════ -->
<section id="s-bookings" class="section">
<div class="pg-hdr">
<h2>📜 My Bookings</h2>
<p>Access from <strong>📜 My Bookings (N)</strong> in the main menu — shown when you have active bookings.</p>
</div>
<div class="stitle">Viewing Active Bookings</div>
<div class="card">
<p>Each booking shows:</p>
<ul style="margin-top:.5rem">
<li>Ride details (origin → destination, departure time)</li>
<li>Driver name and rating</li>
<li>Your booking status (PENDING / CONFIRMED / COMPLETED)</li>
<li>Contribution amount owed</li>
<li><strong>Vehicle details (color, model, plate)</strong> — shown for CONFIRMED and COMPLETED bookings only</li>
</ul>
</div>
<div class="stitle">Driver Changes Departure Time</div>
<div class="card">
<p>If the driver updates the ride's departure time, you receive a notification with two inline buttons:</p>
<div class="tbl-wrap" style="margin-top:.65rem">
<table>
<thead><tr><th>Button</th><th>Action</th></tr></thead>
<tbody>
<tr><td>✅ Keep Booking</td><td>Your booking remains confirmed at the new time — no further action needed</td></tr>
<tr><td>❌ Cancel Booking</td><td>Your booking is cancelled immediately; seat is freed; you can search for another ride</td></tr>
</tbody>
</table>
</div>
<p style="font-size:.82rem;color:var(--muted);margin-top:.5rem">No deadline — you can tap either button at any time before the ride departs.</p>
</div>
<div class="stitle">Cancelling a Booking</div>
<div class="card">
<p>You may cancel a booking that is <span class="tag w">PENDING</span> or <span class="tag s">CONFIRMED</span>, as long as the ride has not yet departed.</p>
<ul style="margin-top:.5rem">
<li>Your seat is freed back to the driver</li>
<li>The driver is notified</li>
<li>If the ride was FULL it reopens to ACTIVE and becomes bookable again</li>
</ul>
<div class="callout warn" style="margin-top:.75rem"><span class="callout-icon">⚠️</span><div class="cb"><h4>Cannot cancel after departure</h4><p>Once the ride has departed, bookings are locked and cannot be cancelled.</p></div></div>
</div>
</section>
<!-- ══════ 7. RATINGS & FAVORITES ══════ -->
<section id="s-ratings" class="section">
<div class="pg-hdr">
<h2>⭐ Ratings & Favorites</h2>
<p>Rate your experience after every completed ride and follow drivers to get notified of their future rides.</p>
</div>
<div class="stitle">Rating After a Completed Ride</div>
<div class="card">
<p>After a ride is marked <span class="tag s">COMPLETED</span>, both the driver and all confirmed passengers receive a rating prompt.</p>
<ul style="margin-top:.6rem">
<li><strong>Scale:</strong> ⭐ 1 (Poor) to ⭐⭐⭐⭐⭐ 5 (Excellent)</li>
<li><strong>Optional comment:</strong> up to 1,000 characters</li>
<li>Passengers rate the driver (one rating per ride)</li>
<li>The driver rates each passenger individually (one per passenger per ride)</li>
<li>Ratings are per-ride — the same pair may rate each other again on each separate completed ride</li>
</ul>
</div>
<div class="stitle">Saving a Driver as Favorite</div>
<div class="card">
<p>After rating a driver, the bot asks: <em>"Would you like to save [Driver Name] as a Favorite?"</em></p>
<p style="margin-top:.5rem">Tap <strong>⭐ Save as Favorite</strong> to follow this driver. Tap <strong>Skip</strong> to pass. If the driver is already in your favorites, no duplicate is created.</p>
</div>
<div class="stitle">Ratings Wall</div>
<div class="card">
<p>View all ratings received by any user — yours or a driver you are considering booking.</p>
<div class="tbl-wrap" style="margin-top:.75rem">
<table>
<thead><tr><th>Entry point</th><th>What opens</th></tr></thead>
<tbody>
<tr><td><strong>⭐ My Ratings</strong> — main menu (inactive-ride)</td><td>Your own ratings wall</td></tr>
<tr><td><strong>⭐ See Ratings</strong> — ride detail card</td><td>That driver's ratings wall</td></tr>
</tbody>
</table>
</div>
<p style="margin-top:.75rem">Each entry shows the star score (⭐⭐⭐⭐⭐) and the reviewer's comment, if one was left. Ratings are listed newest-first, <strong>5 per page</strong>.</p>
<div class="flow" style="margin-top:.75rem">
<span class="flow-step">⭐ My Ratings / See Ratings</span><span class="flow-arrow">→</span>
<span class="flow-step i">Ratings wall opens</span><span class="flow-arrow">→</span>
<span class="flow-step">« Prev / Next »</span><span class="flow-arrow">→</span>
<span class="flow-step d">✕ Close</span>
</div>
<ul style="margin-top:.75rem">
<li>Viewing your own ratings: header reads <em>"Your Ratings (N total)"</em></li>
<li>Viewing another user's ratings: header reads <em>"Ratings for [Name] (N total)"</em></li>
<li>No ratings yet: shows <em>"No ratings yet."</em> with a Close button</li>
<li><strong>✕ Close</strong> dismisses the ratings message entirely</li>
</ul>
</div>
<div class="stitle">Following a Driver from the Community Group</div>
<div class="card">
<p>Every ride announcement in the community group has two inline buttons:</p>
<ul style="margin-top:.6rem">
<li><code>🚘#N - Request 💺</code> — opens the bot privately and shows the full ride card with a Book button</li>
<li><code>✚ Follow</code> — opens the bot privately and follows the driver + shows the ride card in one tap</li>
</ul>
<div class="tbl-wrap" style="margin-top:.75rem">
<table>
<thead><tr><th>Scenario (tapping ✚ Follow)</th><th>What You See</th></tr></thead>
<tbody>
<tr><td>First time following this driver</td><td>"⭐ You're now following [Driver Name]!" + ride card + Unfollow button</td></tr>
<tr><td>Already following this driver</td><td>Ride card only — no duplicate follow action</td></tr>
<tr><td>You are the driver</td><td>Your driver ride card with My Passengers button</td></tr>
</tbody>
</table>
</div>
</div>
<div class="stitle">Receiving Favorite Driver Alerts</div>
<div class="card">
<p>When a driver you follow posts a new ride, you receive a private DM:</p>
<pre>🔔 Your favorite driver just posted a ride!
👤 Juan dela Cruz
📍 SM Southmall → BGC High Street
📅 Thu, May 15 🕐 Pickup: 7:30 AM
[👀 View Ride] [🎫 Book Ride] [🔕 Unfollow]</pre>
<p>Tap <strong>🔕 Unfollow</strong> directly from the alert — the notification updates in-place to confirm the unfollow. No menu navigation needed.</p>
<div class="callout info" style="margin-top:.75rem"><span class="callout-icon">ℹ️</span><div class="cb"><h4>One alert per ride</h4><p>You receive only one DM per ride posting. Re-announces of the same ride do not trigger additional alerts to followers.</p></div></div>
</div>
</section>
<!-- ══════ 8. HUBS ══════ -->
<section id="s-hubs" class="section">
<div class="pg-hdr">
<h2>📍 Hubs</h2>
<p>Hubs are named pickup and dropoff landmarks shared across the community.</p>
</div>
<div class="stitle">Searching for a Hub</div>
<div class="card">
<p>Type at least <strong>3 characters</strong> of a landmark name. The bot suggests matching hubs using fuzzy matching — small typos are handled automatically.</p>
<ul style="margin-top:.6rem">
<li>Typing <code>south</code> → suggests "SM Southmall", "Southmall Terminal"</li>
<li>Typing <code>bgc high</code> → suggests "BGC High Street"</li>
</ul>
</div>
<div class="stitle">Suggesting a Custom Hub</div>
<div class="card">
<p>If your landmark is not in the system:</p>
<ol style="margin-top:.6rem;padding-left:1.1rem">
<li>Type the location name when prompted</li>
<li>The bot shows: <strong>"Use '[your text]'"</strong></li>
<li>Tap it — your location is saved as a <span class="tag w">PENDING</span> hub and is immediately usable on your ride</li>
<li>An admin reviews and approves or rejects it for the wider community</li>
</ol>
</div>
<div class="stitle">Hub Status</div>
<div class="tbl-wrap">
<table>
<thead><tr><th>Status</th><th>Meaning</th></tr></thead>
<tbody>
<tr><td><span class="tag s">ACTIVE</span></td><td>Admin-approved — visible to all users in searches</td></tr>
<tr><td><span class="tag w">PENDING</span></td><td>User-suggested — usable immediately but not yet in the main list</td></tr>
<tr><td><span class="tag d">REJECTED</span></td><td>Admin declined the suggestion</td></tr>
</tbody>
</table>
</div>
<div class="callout tip"><span class="callout-icon">💡</span><div class="cb"><h4>Re-suggesting a rejected hub</h4><p>Suggesting a previously rejected hub bumps it back to PENDING for re-review — no duplicate is created.</p></div></div>
</section>
<!-- ══════ 9. PROFILE & VEHICLES ══════ -->
<section id="s-profile" class="section">
<div class="pg-hdr">
<h2>👤 Profile & Vehicles</h2>
<p>Access from <strong>👤 My Profile</strong> in the main menu.</p>
</div>
<div class="stitle">Your Profile</div>
<pre>👤 Juan dela Cruz (@juandc)
🚗 Driver & 🧳 Passenger — Member since: January 2025
🎨 Silver 🚘 Toyota Vios | 🔢 ABC1234
── Driver Stats ──
⭐ 4.8 (24 ratings) ✅ 87% Completion Rate
🚗 Rides posted: 30 ✅ Completed: 26 👥 Passengers served: 78
── Passenger Stats ──
⭐ 4.9 (18 ratings) ✅ 95% Completion Rate
📦 Bookings made: 20 ✅ Completed: 19 ❌ Cancelled by me: 1</pre>
<div class="stitle">My Followers</div>
<div class="card">
<p>Drivers see a <strong>👥 My Followers (N)</strong> button on their profile screen. Tap it to see the list of passengers following you.</p>
<ul style="margin-top:.6rem">
<li>Shows follower name, Telegram handle, and the date they started following</li>
<li>Paginated at 8 per page — use ◀️ Prev / Next ▶️ to navigate</li>
<li>Read-only — followers can only unfollow themselves via the 🔕 Unfollow button on alerts</li>
<li>Button only appears for Driver or Both roles</li>
</ul>
</div>
<div class="stitle">Managing Vehicles</div>
<div class="card">
<p>Go to <strong>My Profile → 🚘 My Vehicle</strong>. You can save up to <strong>3 vehicles</strong>.</p>
<div class="tbl-wrap" style="margin-top:.75rem">
<table>
<thead><tr><th>Field</th><th>Required</th><th>Example</th></tr></thead>
<tbody>
<tr><td>Car Color</td><td>❌ Optional</td><td>Silver</td></tr>
<tr><td>Car Model</td><td>✅ Yes</td><td>Toyota Vios</td></tr>
<tr><td>Plate Number</td><td>✅ Yes</td><td>ABC1234</td></tr>
<tr><td>Seat Capacity</td><td>✅ Yes (1–7)</td><td>4</td></tr>
</tbody>
</table>
</div>
<ul style="margin-top:.75rem">
<li>Plate numbers must be unique across all users</li>
<li>To edit a vehicle: remove it and add a corrected entry</li>
<li>If you add a 4th vehicle, the <strong>oldest</strong> is automatically replaced</li>
<li>Removing a vehicle does not affect rides already posted with it</li>
</ul>
</div>
</section>
<!-- ══════ 10. BUSINESS RULES ══════ -->
<section id="s-rules" class="section">
<div class="pg-hdr">
<h2>📋 Business Rules</h2>
<p>System-enforced rules that cannot be bypassed.</p>
</div>
<div class="stitle">Ride Status Flow</div>
<div class="flow">
<span class="flow-step i">DRAFT</span><span class="flow-arrow">→ publish →</span>
<span class="flow-step a">ACTIVE</span><span class="flow-arrow">⇄</span>
<span class="flow-step w">FULL</span><span class="flow-arrow">→ depart →</span>
<span class="flow-step">DEPARTED</span><span class="flow-arrow">→ complete / 2h auto →</span>
<span class="flow-step s">COMPLETED</span>
</div>
<p style="font-size:.8rem;color:var(--muted);margin-bottom:.75rem">DRAFT, ACTIVE, and FULL rides can be CANCELLED at any time.</p>
<div class="stitle">Booking Status Flow</div>
<div class="flow" style="flex-direction:column;align-items:flex-start;gap:.5rem">
<div style="display:flex;align-items:center;flex-wrap:wrap;gap:.35rem"><span class="flow-step w">PENDING</span><span class="flow-arrow">→ driver accepts →</span><span class="flow-step s">CONFIRMED</span><span class="flow-arrow">→ ride completes →</span><span class="flow-step s">COMPLETED</span></div>
<div style="display:flex;align-items:center;flex-wrap:wrap;gap:.35rem"><span class="flow-step w">PENDING</span><span class="flow-arrow">→ driver declines →</span><span class="flow-step d">DECLINED</span></div>
<div style="display:flex;align-items:center;flex-wrap:wrap;gap:.35rem"><span class="flow-step s">CONFIRMED</span><span class="flow-arrow">→ passenger cancels →</span><span class="flow-step d">CANCELLED_BY_PASSENGER</span></div>
<div style="display:flex;align-items:center;flex-wrap:wrap;gap:.35rem"><span class="flow-step s">CONFIRMED</span><span class="flow-arrow">→ driver cancels/removes →</span><span class="flow-step d">CANCELLED_BY_DRIVER</span></div>
</div>
<p style="font-size:.8rem;color:var(--muted);margin-bottom:.75rem">No auto-expiry — PENDING bookings stay open until the driver responds or you cancel manually.</p>
<div class="stitle">Ride Rules</div>
<div class="tbl-wrap">
<table>
<thead><tr><th>Rule</th><th>Detail</th></tr></thead>
<tbody>
<tr><td>One active ride per direction</td><td>A driver cannot have more than one ACTIVE or FULL ride in the same direction. A DEPARTED ride does not block a new post.</td></tr>
<tr><td>Direction-scoped conflict</td><td>Cannot post a ride in a direction while holding a PENDING or CONFIRMED passenger booking in the same direction. The two directions are independent.</td></tr>
<tr><td>Future departure only</td><td>Departure time must be in the future (Manila time)</td></tr>
<tr><td>Origin ≠ Destination</td><td>Cannot select the same hub for both pickup and drop-off</td></tr>
<tr><td>Seat range</td><td>Minimum 1, maximum 7 per ride</td></tr>
<tr><td>Contribution amount</td><td>Minimum ₱0.00 (free); no maximum</td></tr>
<tr><td>Notes length</td><td>Maximum 300 characters</td></tr>
<tr><td>Departure time edit</td><td>ACTIVE or FULL rides only; new time ≥ 15 min from now, must differ from current time</td></tr>
<tr><td>Start ride guard</td><td>Can only mark DEPARTED within 60 minutes of scheduled departure</td></tr>
</tbody>
</table>
</div>
<div class="stitle">Booking Rules</div>
<div class="tbl-wrap">
<table>
<thead><tr><th>Rule</th><th>Detail</th></tr></thead>
<tbody>
<tr><td>Active ride only</td><td>Can only book rides with status ACTIVE</td></tr>
<tr><td>No self-booking</td><td>A driver cannot book their own ride</td></tr>
<tr><td>No duplicate booking</td><td>Cannot have two active bookings on the same ride</td></tr>
<tr><td>Seat availability</td><td>Cannot book if no seats are available</td></tr>
<tr><td>Driver conflict</td><td>A passenger who has an ACTIVE, FULL, or DEPARTED driver ride in the same direction cannot book a passenger seat in that direction</td></tr>
<tr><td>Booking message</td><td>Optional, maximum 300 characters</td></tr>
<tr><td>Response reminders</td><td>3 automatic reminders to the driver at 15, 30, and 45 min after the request</td></tr>
<tr><td>No auto-expiry</td><td>Booking stays PENDING indefinitely after 3 reminders — cancel manually if needed</td></tr>
</tbody>
</table>
</div>
<div class="stitle">Rating Rules</div>
<div class="tbl-wrap">
<table>
<thead><tr><th>Rule</th><th>Detail</th></tr></thead>
<tbody>
<tr><td>Eligible rides</td><td>Rating available for COMPLETED rides only</td></tr>
<tr><td>Passenger rating</td><td>One rating per ride per passenger (for the driver)</td></tr>
<tr><td>Driver rating</td><td>One rating per passenger per ride</td></tr>
<tr><td>Star range</td><td>1 (minimum) to 5 (maximum)</td></tr>
<tr><td>Comment</td><td>Optional, maximum 1,000 characters</td></tr>
<tr><td>Per-ride scope</td><td>Same driver and passenger may rate each other again on each separate completed ride</td></tr>
</tbody>
</table>
</div>
<div class="stitle">Automatic Scheduler Actions</div>
<div class="tbl-wrap">
<table>
<thead><tr><th>Scheduler</th><th>Frequency</th><th>What It Does</th></tr></thead>
<tbody>
<tr><td>Ride Expiry</td><td>Every 30 min</td><td>Marks ACTIVE/FULL rides whose departure time has passed as CANCELLED</td></tr>
<tr><td>Ride Auto-Complete</td><td>Every 30 min</td><td>Marks rides that departed 2+ hours ago as COMPLETED</td></tr>
<tr><td>Booking Reminders</td><td>Every 60 sec</td><td>Sends driver reminders at 15, 30, and 45 min for unanswered requests</td></tr>
<tr><td>Departure Reminder</td><td>Every 5 min</td><td>Notifies driver and confirmed passengers 30 min before departure (once per ride)</td></tr>
<tr><td>Announcement Refresh</td><td>Every 4 hours</td><td>Re-posts group announcements live for 36+ hours — stays within Telegram's 48-hour deletion window</td></tr>
</tbody>
</table>
</div>
<div class="stitle">Group Announcement Rules</div>
<div class="tbl-wrap">
<table>
<thead><tr><th>Rule</th><th>Detail</th></tr></thead>
<tbody>
<tr><td>Auto-post</td><td>Posted to community group when ride becomes ACTIVE</td></tr>
<tr><td>Topic routing</td><td>HOME→WORK → morning topic; WORK→HOME → evening topic</td></tr>
<tr><td>Auto-refresh on booking</td><td>Group post refreshed automatically when driver accepts a booking (updated seat count)</td></tr>
<tr><td>Auto-delete on FULL</td><td>Group post deleted when last seat is filled</td></tr>
<tr><td>Re-announce limit</td><td>Maximum 9 re-announces after initial post (10 total). Slot consumed only when newSeats ≥ 1.</td></tr>
<tr><td>Auto-refresh on seat freed</td><td>Group post refreshed when a confirmed passenger is removed or cancels</td></tr>
<tr><td>Auto-delete</td><td>Announcement deleted when ride is DEPARTED, COMPLETED, or CANCELLED</td></tr>
<tr><td>48-hour safety</td><td>Active announcements live for 36+ hours are auto-reposted — prevents Telegram's 48-hour deletion limit from removing them</td></tr>
<tr><td>Plate privacy</td><td>Group announcements show vehicle color and model only — plate is shared only in the booking confirmation DM to confirmed passengers</td></tr>
</tbody>
</table>
</div>
<div class="stitle">Field Validation Reference</div>
<div class="tbl-wrap">
<table>
<thead><tr><th>Field</th><th>Min</th><th>Max</th><th>Required</th></tr></thead>
<tbody>
<tr><td>Ride — Total Seats</td><td>1</td><td>7</td><td>✅</td></tr>
<tr><td>Ride — Contribution Amount</td><td>₱0.00</td><td>—</td><td>✅</td></tr>
<tr><td>Ride — Notes</td><td>—</td><td>300 chars</td><td>❌</td></tr>
<tr><td>Booking — Passenger Message</td><td>—</td><td>300 chars</td><td>❌</td></tr>
<tr><td>Rating — Stars</td><td>1</td><td>5</td><td>✅</td></tr>
<tr><td>Rating — Comment</td><td>—</td><td>1,000 chars</td><td>❌</td></tr>
<tr><td>Vehicle — Car Model</td><td>—</td><td>100 chars</td><td>✅ (driver)</td></tr>
<tr><td>Vehicle — Plate Number</td><td>—</td><td>20 chars</td><td>✅ (driver) — unique across all users</td></tr>
<tr><td>Vehicle — Car Color</td><td>—</td><td>50 chars</td><td>❌</td></tr>
<tr><td>Vehicle — Seat Capacity</td><td>1</td><td>7</td><td>✅ (driver) — max 3 vehicles per user</td></tr>
<tr><td>Hub — Name</td><td>—</td><td>150 chars</td><td>✅</td></tr>
<tr><td>Hub — Area</td><td>—</td><td>100 chars</td><td>✅</td></tr>
</tbody>
</table>
</div>
</section>
<!-- ══════ 11. ROLES & PERMISSIONS ══════ -->
<section id="s-roles" class="section">
<div class="pg-hdr">
<h2>🔑 Roles & Permissions</h2>
<p>Your role determines what features are available to you. Roles are set by a community administrator.</p>
</div>
<div class="stitle">Role Overview</div>
<div class="tbl-wrap">
<table>
<thead><tr><th>Role</th><th>Can Post Rides</th><th>Can Book Rides</th><th>Can Approve Hubs</th></tr></thead>
<tbody>
<tr><td><strong>Passenger</strong></td><td style="text-align:center">❌</td><td style="text-align:center">✅</td><td style="text-align:center">❌</td></tr>
<tr><td><strong>Driver</strong></td><td style="text-align:center">✅</td><td style="text-align:center">❌</td><td style="text-align:center">❌</td></tr>
<tr><td><strong>Both</strong></td><td style="text-align:center">✅</td><td style="text-align:center">✅</td><td style="text-align:center">❌</td></tr>
<tr><td><strong>Admin</strong></td><td style="text-align:center">✅</td><td style="text-align:center">✅</td><td style="text-align:center">✅</td></tr>