[READ-ONLY] Mirror of https://github.com/aaronateataco/robloxbanwave. Real-time Roblox ban wave tracker powered by community reports from r/robloxhackers.
robloxbanwave.vercel.app
feat: update favicon and CSS styles for improved visual consistency and branding
Fascinating Pistachio
(May 27, 2026, 5:21 PM +0100)
4948ef8d
0cf379c4
+29
-29
+8
-8
favicon.svg
+8
-8
favicon.svg
···
1
1
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
2
2
<rect width="32" height="32" rx="6" fill="#060a14"/>
3
-
<line x1="16" y1="2" x2="16" y2="30" stroke="#ef4444" stroke-width="0.4" opacity="0.18"/>
4
-
<line x1="2" y1="16" x2="30" y2="16" stroke="#ef4444" stroke-width="0.4" opacity="0.18"/>
5
-
<circle cx="16" cy="16" r="12.5" fill="none" stroke="#ef4444" stroke-width="0.7" stroke-dasharray="3 2.5" opacity="0.3"/>
6
-
<circle cx="16" cy="16" r="7.5" fill="none" stroke="#ef4444" stroke-width="0.8" stroke-dasharray="2 2" opacity="0.55"/>
7
-
<circle cx="16" cy="16" r="3.5" fill="none" stroke="#ef4444" stroke-width="1" opacity="0.8"/>
8
-
<line x1="16" y1="16" x2="27" y2="7.5" stroke="#ef4444" stroke-width="1.6" stroke-linecap="round" opacity="0.95"/>
9
-
<circle cx="26.5" cy="8" r="1.8" fill="#ef4444" opacity="0.8"/>
10
-
<circle cx="16" cy="16" r="2.2" fill="#ef4444"/>
3
+
<line x1="16" y1="2" x2="16" y2="30" stroke="#f0ece6" stroke-width="0.4" opacity="0.18"/>
4
+
<line x1="2" y1="16" x2="30" y2="16" stroke="#f0ece6" stroke-width="0.4" opacity="0.18"/>
5
+
<circle cx="16" cy="16" r="12.5" fill="none" stroke="#f0ece6" stroke-width="0.7" stroke-dasharray="3 2.5" opacity="0.3"/>
6
+
<circle cx="16" cy="16" r="7.5" fill="none" stroke="#f0ece6" stroke-width="0.8" stroke-dasharray="2 2" opacity="0.55"/>
7
+
<circle cx="16" cy="16" r="3.5" fill="none" stroke="#f0ece6" stroke-width="1" opacity="0.8"/>
8
+
<line x1="16" y1="16" x2="27" y2="7.5" stroke="#f0ece6" stroke-width="1.6" stroke-linecap="round" opacity="0.95"/>
9
+
<circle cx="26.5" cy="8" r="1.8" fill="#f0ece6" opacity="0.8"/>
10
+
<circle cx="16" cy="16" r="2.2" fill="#f0ece6"/>
11
11
</svg>
+21
-21
index.html
+21
-21
index.html
···
22
22
--text:#f0ece6;--text2:#9ebdd6;--text3:#5e88aa;
23
23
--accent:#4e8cc8;--accent-dim:rgba(78,140,200,.12);
24
24
--accent-glow:rgba(78,140,200,.25);--accent-border:rgba(78,140,200,.4);
25
-
--green:#4aab8a;--red:#d4554c;--amber:#c4913a;
25
+
--green:#4aab8a;--red:#f0ece6;--amber:#c4913a;
26
26
--sans:'Inter',system-ui,sans-serif;
27
27
--display:'Syne',sans-serif;
28
28
--mono:'JetBrains Mono',monospace;
29
29
--r:14px;--t:.2s cubic-bezier(.4,0,.2,1);
30
30
}
31
-
body.active {--accent:#d4554c;--accent-dim:rgba(212,85,76,.1);--accent-glow:rgba(212,85,76,.28);--accent-border:rgba(212,85,76,.44);--surface:rgba(212,85,76,.07);--surface-h:rgba(212,85,76,.13);--border:rgba(212,85,76,.18);--border-h:rgba(212,85,76,.32);}
31
+
body.active {--accent:#f0ece6;--accent-dim:rgba(240,236,230,.1);--accent-glow:rgba(240,236,230,.22);--accent-border:rgba(240,236,230,.4);--surface:rgba(240,236,230,.07);--surface-h:rgba(240,236,230,.13);--border:rgba(240,236,230,.18);--border-h:rgba(240,236,230,.3);}
32
32
body.warning {--accent:#c4913a;--accent-dim:rgba(196,145,58,.08);--accent-glow:rgba(196,145,58,.22);--accent-border:rgba(196,145,58,.38);--surface:rgba(196,145,58,.06);--surface-h:rgba(196,145,58,.11);--border:rgba(196,145,58,.17);--border-h:rgba(196,145,58,.3);}
33
33
body.clear {--accent:#4aab8a;--accent-dim:rgba(74,171,138,.08);--accent-glow:rgba(74,171,138,.2);--accent-border:rgba(74,171,138,.35);--surface:rgba(74,171,138,.07);--surface-h:rgba(74,171,138,.13);--border:rgba(74,171,138,.18);--border-h:rgba(74,171,138,.3);}
34
34
35
35
body{background-color:#0b1c36;background-image:radial-gradient(circle,rgba(78,140,200,.04) 1px,transparent 1px),linear-gradient(180deg,#0d2040 0%,#0b1c36 55%,#091830 100%);background-size:28px 28px,100% 100%;color:var(--text);font-family:var(--sans);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased}
36
36
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 100% 35% at 50% -5%,rgba(11,44,120,.15) 0%,transparent 60%);pointer-events:none;z-index:0;transition:background 1.4s}
37
-
body.active::before{background:radial-gradient(ellipse 100% 35% at 50% -5%,rgba(180,40,40,.13) 0%,transparent 60%)}
37
+
body.active::before{background:radial-gradient(ellipse 100% 35% at 50% -5%,rgba(240,236,230,.06) 0%,transparent 60%)}
38
38
body.warning::before{background:radial-gradient(ellipse 100% 35% at 50% -5%,rgba(150,100,20,.11) 0%,transparent 60%)}
39
-
body.active::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(212,85,76,.012) 3px,rgba(212,85,76,.012) 4px);pointer-events:none;z-index:90;animation:scanlines 7s linear infinite}
39
+
body.active::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(240,236,230,.01) 3px,rgba(240,236,230,.01) 4px);pointer-events:none;z-index:90;animation:scanlines 7s linear infinite}
40
40
@keyframes scanlines{0%{background-position:0 0}100%{background-position:0 80px}}
41
41
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
42
42
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
···
86
86
87
87
88
88
/* Per-state headline color — no glow */
89
-
body.active .status-headline{color:#d4554c}
89
+
body.active .status-headline{color:#f0ece6}
90
90
body.warning .status-headline{color:#c4913a}
91
91
body.clear .status-headline{color:#4aab8a}
92
92
/* Status-aware live pill */
93
-
body.active .live-pill{border-color:rgba(212,85,76,.5);background:rgba(212,85,76,.1);color:#d4554c}
93
+
body.active .live-pill{border-color:rgba(240,236,230,.4);background:rgba(240,236,230,.08);color:#f0ece6}
94
94
body.warning .live-pill{border-color:rgba(196,145,58,.42);background:rgba(196,145,58,.08);color:#c4913a}
95
95
body.clear .live-pill{border-color:rgba(74,171,138,.42);background:rgba(74,171,138,.08);color:#4aab8a}
96
96
/* Card elevation */
···
100
100
.post-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.5),0 0 0 1px var(--border-h);transform:translateX(3px)}
101
101
/* Button glow on hover */
102
102
.wh-btn:hover,.report-btn:hover,.modal-submit:hover,.bn-btn:hover{box-shadow:0 4px 20px rgba(78,140,200,.25)}
103
-
body.active .wh-btn:hover,body.active .report-btn:hover,body.active .modal-submit:hover{box-shadow:0 4px 20px rgba(212,85,76,.28)}
103
+
body.active .wh-btn:hover,body.active .report-btn:hover,body.active .modal-submit:hover{box-shadow:0 4px 20px rgba(240,236,230,.2)}
104
104
/* Alert post left border glow */
105
105
.post-card[data-type="alert"]{border-left-width:3px}
106
-
body.active .recent-post{border-color:rgba(212,85,76,.5);box-shadow:0 0 30px rgba(212,85,76,.12)}
106
+
body.active .recent-post{border-color:rgba(240,236,230,.4);box-shadow:0 0 30px rgba(240,236,230,.08)}
107
107
108
108
.live-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 14px;border-radius:100px;border:1px solid var(--accent-border);background:var(--accent-dim);color:var(--accent);margin-bottom:20px;transition:all var(--t)}
109
109
.live-pill-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
···
167
167
.g-bar{flex:1;border-radius:3px 3px 0 0;background:rgba(255,255,255,.05);min-height:2px;cursor:pointer;transition:background var(--t)}
168
168
.g-bar.has-data{background:rgba(78,140,200,.3)}
169
169
.g-bar.has-data:hover{background:rgba(78,140,200,.65)}
170
-
body.active .g-bar.has-data{background:rgba(212,85,76,.32)}
171
-
body.active .g-bar.has-data:hover{background:rgba(212,85,76,.7)}
170
+
body.active .g-bar.has-data{background:rgba(240,236,230,.28)}
171
+
body.active .g-bar.has-data:hover{background:rgba(240,236,230,.6)}
172
172
body.warning .g-bar.has-data{background:rgba(196,145,58,.3)}
173
173
body.warning .g-bar.has-data:hover{background:rgba(196,145,58,.65)}
174
174
.g-bar.cur{outline:1px solid rgba(255,255,255,.15)}
···
217
217
.wh-btn-sm:hover{background:var(--surface-h);border-color:var(--border-h);color:var(--text)}
218
218
.wh-btn-sm:disabled{opacity:.4;cursor:not-allowed}
219
219
.wh-btn-danger{background:transparent;border:1px solid var(--border);color:var(--text2)}
220
-
.wh-btn-danger:hover{border-color:#d4554c;color:#d4554c}
220
+
.wh-btn-danger:hover{border-color:#f0ece6;color:#f0ece6}
221
221
.wh-active-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
222
222
.wh-active-indicator{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--text2)}
223
223
.wh-dot{width:7px;height:7px;border-radius:50%;background:#4aab8a;box-shadow:0 0 6px rgba(74,171,138,.7);animation:dot-pulse 2s ease-in-out infinite}
···
225
225
.wh-id code{background:var(--bg2);border:1px solid var(--border);padding:2px 8px;border-radius:4px;font-size:10px;color:var(--text2)}
226
226
.wh-msg{margin-top:10px;font-family:var(--mono);font-size:11px;padding:7px 11px;border-radius:7px;display:none}
227
227
.wh-msg.ok {background:rgba(74,171,138,.1); color:#4aab8a;border:1px solid rgba(74,171,138,.25);display:block}
228
-
.wh-msg.err{background:rgba(212,85,76,.1); color:#d4554c;border:1px solid rgba(212,85,76,.25);display:block}
228
+
.wh-msg.err{background:rgba(240,236,230,.07);color:#f0ece6;border:1px solid rgba(240,236,230,.2);display:block}
229
229
.wh-update-form{margin-top:12px;display:none}
230
230
.wh-update-form.open{display:block}
231
231
.wh-privacy{margin-top:14px;font-family:var(--mono);font-size:10px;color:var(--text3);line-height:1.6;display:flex;gap:8px;align-items:flex-start;border-top:1px solid var(--border);padding-top:14px}
···
280
280
.ocr-status{font-family:var(--mono);font-size:11px;padding:8px 12px;border-radius:8px;margin-bottom:14px;display:none}
281
281
.ocr-status.scanning{background:rgba(196,145,58,.08);color:#c4913a;border:1px solid rgba(196,145,58,.22);display:block}
282
282
.ocr-status.pass{background:rgba(74,171,138,.08);color:#4aab8a;border:1px solid rgba(74,171,138,.22);display:block}
283
-
.ocr-status.fail{background:rgba(212,85,76,.08);color:#d4554c;border:1px solid rgba(212,85,76,.22);display:block}
283
+
.ocr-status.fail{background:rgba(240,236,230,.07);color:#f0ece6;border:1px solid rgba(240,236,230,.2);display:block}
284
284
.ocr-bar{height:3px;background:var(--border);border-radius:100px;margin-top:6px;overflow:hidden;display:none}
285
285
.ocr-bar.show{display:block}
286
286
.ocr-bar-fill{height:100%;background:#c4913a;border-radius:100px;width:0;transition:width .2s}
···
334
334
.tag-info{background:rgba(148,163,184,.1);color:#7a9ab5;border:1px solid rgba(148,163,184,.2)}
335
335
336
336
/* Ban report nudge */
337
-
.ban-nudge{position:fixed;bottom:28px;left:28px;z-index:400;background:#081828;border:1px solid rgba(212,85,76,.35);border-radius:16px;padding:18px 20px 16px;max-width:260px;box-shadow:0 8px 40px rgba(0,0,0,.55),0 0 0 1px rgba(212,85,76,.08);animation:nudgeIn .45s cubic-bezier(.34,1.56,.64,1) both}
337
+
.ban-nudge{position:fixed;bottom:28px;left:28px;z-index:400;background:#081828;border:1px solid rgba(240,236,230,.22);border-radius:16px;padding:18px 20px 16px;max-width:260px;box-shadow:0 8px 40px rgba(0,0,0,.55),0 0 0 1px rgba(240,236,230,.06);animation:nudgeIn .45s cubic-bezier(.34,1.56,.64,1) both}
338
338
.ban-nudge.hidden{display:none}
339
339
@keyframes nudgeIn{from{opacity:0;transform:translateY(18px) scale(.93)}to{opacity:1;transform:translateY(0) scale(1)}}
340
-
body.active .ban-nudge{border-color:rgba(212,85,76,.6);box-shadow:0 8px 40px rgba(212,85,76,.2),0 0 0 1px rgba(212,85,76,.14)}
340
+
body.active .ban-nudge{border-color:rgba(240,236,230,.45);box-shadow:0 8px 40px rgba(240,236,230,.08),0 0 0 1px rgba(240,236,230,.12)}
341
341
.bn-close{position:absolute;top:10px;right:10px;background:none;border:none;color:var(--text3);cursor:pointer;padding:4px;border-radius:4px;font-size:13px;line-height:1;transition:color var(--t)}
342
342
.bn-close:hover{color:var(--text)}
343
343
.bn-icon{display:block;margin-bottom:8px}
344
344
.bn-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:5px;padding-right:18px;line-height:1.3}
345
345
.bn-sub{font-size:11px;color:var(--text2);line-height:1.6;margin-bottom:13px}
346
-
.bn-btn{display:block;width:100%;background:#d4554c;color:#fff;border:none;padding:10px 14px;border-radius:9px;font-family:var(--mono);font-size:11px;font-weight:700;cursor:pointer;transition:opacity var(--t);letter-spacing:.03em;text-align:center}
346
+
.bn-btn{display:block;width:100%;background:#f0ece6;color:#0b1c36;border:none;padding:10px 14px;border-radius:9px;font-family:var(--mono);font-size:11px;font-weight:700;cursor:pointer;transition:opacity var(--t);letter-spacing:.03em;text-align:center}
347
347
.bn-btn:hover{opacity:.85}
348
-
.hdr-report-btn{background:rgba(212,85,76,.08);border:1px solid rgba(212,85,76,.24);color:#d4554c;padding:4px 12px;border-radius:100px;font-family:var(--mono);font-size:10px;font-weight:700;cursor:pointer;transition:all var(--t);white-space:nowrap;display:flex;align-items:center;gap:5px}
349
-
.hdr-report-btn:hover{background:rgba(212,85,76,.16);border-color:rgba(212,85,76,.44)}
348
+
.hdr-report-btn{background:rgba(240,236,230,.07);border:1px solid rgba(240,236,230,.22);color:#f0ece6;padding:4px 12px;border-radius:100px;font-family:var(--mono);font-size:10px;font-weight:700;cursor:pointer;transition:all var(--t);white-space:nowrap;display:flex;align-items:center;gap:5px}
349
+
.hdr-report-btn:hover{background:rgba(240,236,230,.14);border-color:rgba(240,236,230,.38)}
350
350
.hdr-report-btn svg{width:12px;height:12px;flex-shrink:0}
351
351
352
352
/* Per-post vote buttons (alert cards only) */
···
354
354
.pc-vote-btn{background:var(--bg2);border:1px solid var(--border);color:var(--text3);padding:2px 8px;border-radius:5px;font-family:var(--mono);font-size:10px;font-weight:700;cursor:pointer;transition:all var(--t);display:inline-flex;align-items:center;gap:3px;line-height:1.6}
355
355
.pc-vote-btn:hover:not(:disabled){background:var(--surface-h);border-color:var(--border-h);color:var(--text2)}
356
356
.pc-vote-btn.voted-up{background:rgba(74,171,138,.1);border-color:rgba(74,171,138,.36);color:#4aab8a}
357
-
.pc-vote-btn.voted-down{background:rgba(212,85,76,.08);border-color:rgba(212,85,76,.3);color:#d4554c}
357
+
.pc-vote-btn.voted-down{background:rgba(240,236,230,.07);border-color:rgba(240,236,230,.28);color:#f0ece6}
358
358
.pc-vote-btn:disabled{opacity:.55;cursor:not-allowed}
359
359
.pc-vote-lbl{font-family:var(--mono);font-size:10px;color:var(--text3)}
360
360
···
365
365
.contact-char-count{font-family:var(--mono);font-size:10px;color:var(--text3);text-align:right;margin-top:4px}
366
366
.contact-msg{margin-top:10px;font-family:var(--mono);font-size:11px;padding:7px 11px;border-radius:7px;display:none}
367
367
.contact-msg.ok{background:rgba(74,171,138,.1);color:#4aab8a;border:1px solid rgba(74,171,138,.25);display:block}
368
-
.contact-msg.err{background:rgba(212,85,76,.1);color:#d4554c;border:1px solid rgba(212,85,76,.25);display:block}
368
+
.contact-msg.err{background:rgba(240,236,230,.07);color:#f0ece6;border:1px solid rgba(240,236,230,.2);display:block}
369
369
370
370
/* Footer */
371
371
footer{padding:18px 24px 14px;border-top:1px solid var(--border);font-family:var(--mono);font-size:10px;color:var(--text3)}
···
899
899
<!-- Sticky ban report nudge -->
900
900
<div class="ban-nudge hidden" id="banNudge">
901
901
<button class="bn-close" onclick="dismissBanNudge()" aria-label="Dismiss">✕</button>
902
-
<svg class="bn-icon" viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:22px;height:22px;display:block;margin-bottom:8px;color:#d4554c"><path d="M11,2 L18,5 L18,11 C18,15.5 15,18.5 11,20 C7,18.5 4,15.5 4,11 L4,5 Z"/><line x1="11" y1="8" x2="11" y2="12"/><circle cx="11" cy="14.5" r=".8" fill="currentColor" stroke="none"/></svg>
902
+
<svg class="bn-icon" viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:22px;height:22px;display:block;margin-bottom:8px;color:#f0ece6"><path d="M11,2 L18,5 L18,11 C18,15.5 15,18.5 11,20 C7,18.5 4,15.5 4,11 L4,5 Z"/><line x1="11" y1="8" x2="11" y2="12"/><circle cx="11" cy="14.5" r=".8" fill="currentColor" stroke="none"/></svg>
903
903
<div class="bn-title">Just got banned for exploiting?</div>
904
904
<div class="bn-sub">Submit a screenshot to help track the wave. Anonymous, verified by OCR, takes 30 seconds.</div>
905
905
<button class="bn-btn" onclick="dismissBanNudge();openReportModal()">Report Your Ban →</button>