reaper-arcade-hub 2.0.2 โ†’ 2.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.html CHANGED
@@ -3,824 +3,202 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>REAPER // Games & Leaderboard</title>
7
- <meta name="description" content="Reaper Hub - 788 unblocked games with instant HTML5 player, Chat, and Playtime Leaderboard.">
8
-
9
- <!-- Security Shield & Anti-Extension Defense -->
10
- <script src="js/security-shield.js"></script>
11
-
12
- <!-- Styles -->
13
- <link rel="stylesheet" href="css/styles.css">
14
-
15
- <!-- Firebase SDKs -->
16
- <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
17
- <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-database-compat.js"></script>
6
+ <title>REAPER // UPDATING</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&family=JetBrains+Mono:wght@500;700;800&family=Orbitron:wght@700;900&display=swap" rel="stylesheet">
10
+ <style>
11
+ *, *::before, *::after {
12
+ box-sizing: border-box;
13
+ margin: 0;
14
+ padding: 0;
15
+ }
16
+
17
+ body {
18
+ background-color: #02050b;
19
+ color: #ffffff;
20
+ font-family: 'Inter', -apple-system, sans-serif;
21
+ min-height: 100vh;
22
+ display: flex;
23
+ align-items: center;
24
+ justify-content: center;
25
+ padding: 1.5rem;
26
+ overflow: hidden;
27
+ position: relative;
28
+ }
29
+
30
+ .bg-glow {
31
+ position: absolute;
32
+ width: 500px;
33
+ height: 500px;
34
+ background: radial-gradient(circle, rgba(0, 210, 255, 0.12) 0%, rgba(0, 100, 255, 0.05) 50%, transparent 70%);
35
+ top: 50%;
36
+ left: 50%;
37
+ transform: translate(-50%, -50%);
38
+ pointer-events: none;
39
+ z-index: 1;
40
+ }
41
+
42
+ .maintenance-card {
43
+ position: relative;
44
+ z-index: 10;
45
+ max-width: 520px;
46
+ width: 100%;
47
+ background: rgba(6, 14, 28, 0.92);
48
+ border: 1.5px solid rgba(0, 210, 255, 0.35);
49
+ border-radius: 16px;
50
+ padding: 3.5rem 2.5rem;
51
+ text-align: center;
52
+ box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95), 0 0 40px rgba(0, 210, 255, 0.2);
53
+ backdrop-filter: blur(16px);
54
+ -webkit-backdrop-filter: blur(16px);
55
+ }
56
+
57
+ .spinner-box {
58
+ position: relative;
59
+ width: 72px;
60
+ height: 72px;
61
+ margin: 0 auto 1.75rem auto;
62
+ display: flex;
63
+ align-items: center;
64
+ justify-content: center;
65
+ }
66
+
67
+ .spinner-ring-1 {
68
+ position: absolute;
69
+ inset: 0;
70
+ border: 2.5px solid transparent;
71
+ border-top-color: #00d2ff;
72
+ border-right-color: #0088ff;
73
+ border-radius: 50%;
74
+ animation: spinClockwise 1.2s linear infinite;
75
+ }
76
+
77
+ .spinner-ring-2 {
78
+ position: absolute;
79
+ inset: 8px;
80
+ border: 2px dashed rgba(0, 210, 255, 0.45);
81
+ border-radius: 50%;
82
+ animation: spinCounter 4s linear infinite;
83
+ }
84
+
85
+ .spinner-core {
86
+ width: 36px;
87
+ height: 36px;
88
+ border-radius: 50%;
89
+ background: linear-gradient(135deg, #0088ff, #00d2ff);
90
+ display: flex;
91
+ align-items: center;
92
+ justify-content: center;
93
+ font-family: 'Orbitron', sans-serif;
94
+ font-weight: 900;
95
+ color: #000;
96
+ font-size: 0.95rem;
97
+ box-shadow: 0 0 20px rgba(0, 210, 255, 0.8);
98
+ }
99
+
100
+ @keyframes spinClockwise {
101
+ 0% { transform: rotate(0deg); }
102
+ 100% { transform: rotate(360deg); }
103
+ }
104
+
105
+ @keyframes spinCounter {
106
+ 0% { transform: rotate(360deg); }
107
+ 100% { transform: rotate(0deg); }
108
+ }
109
+
110
+ .main-logo {
111
+ font-family: 'Orbitron', sans-serif;
112
+ font-size: 3rem;
113
+ font-weight: 900;
114
+ color: #fff;
115
+ letter-spacing: 0.15em;
116
+ text-transform: uppercase;
117
+ line-height: 1;
118
+ margin-bottom: 0.35rem;
119
+ text-shadow: 0 0 30px rgba(0, 210, 255, 0.6);
120
+ }
121
+
122
+ .status-badge {
123
+ display: inline-block;
124
+ font-family: 'JetBrains Mono', monospace;
125
+ font-size: 0.78rem;
126
+ font-weight: 800;
127
+ color: #ffd700;
128
+ background: rgba(255, 215, 0, 0.12);
129
+ border: 1px solid rgba(255, 215, 0, 0.4);
130
+ padding: 0.35rem 0.85rem;
131
+ border-radius: 6px;
132
+ letter-spacing: 0.15em;
133
+ text-transform: uppercase;
134
+ margin-bottom: 1.5rem;
135
+ box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
136
+ }
137
+
138
+ .description-text {
139
+ color: #b0ccf0;
140
+ font-size: 0.95rem;
141
+ line-height: 1.65;
142
+ margin-bottom: 2rem;
143
+ }
144
+
145
+ .pulse-bar-wrapper {
146
+ height: 6px;
147
+ background: #020714;
148
+ border: 1px solid rgba(0, 210, 255, 0.3);
149
+ border-radius: 6px;
150
+ overflow: hidden;
151
+ margin-bottom: 1.25rem;
152
+ }
153
+
154
+ .pulse-bar {
155
+ height: 100%;
156
+ width: 40%;
157
+ background: linear-gradient(90deg, #0088ff, #00d2ff, #00ffaa);
158
+ border-radius: 6px;
159
+ box-shadow: 0 0 15px #00d2ff;
160
+ animation: pulseMove 1.8s ease-in-out infinite;
161
+ }
162
+
163
+ @keyframes pulseMove {
164
+ 0% { transform: translateX(-100%); }
165
+ 100% { transform: translateX(300%); }
166
+ }
167
+
168
+ .footer-meta {
169
+ font-family: 'JetBrains Mono', monospace;
170
+ font-size: 0.75rem;
171
+ color: #607d9f;
172
+ letter-spacing: 0.05em;
173
+ }
174
+ </style>
18
175
  </head>
19
176
  <body>
20
177
 
21
- <!-- Sleek Modern Cyber Loader (No Clutter / Smooth Glowing Rings) -->
22
- <div id="app-splash-screen" style="position: fixed; inset: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #07152b 0%, #01040a 100%); display: flex; align-items: center; justify-content: center; z-index: 999999; flex-direction: column; padding: 1.5rem; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);">
23
- <div class="splash-content" style="max-width: 520px; width: 100%; text-align: center; background: rgba(4, 12, 28, 0.9); backdrop-filter: blur(20px); border: 1px solid rgba(0, 150, 255, 0.35); border-radius: 16px; padding: 2.75rem 2.25rem; box-shadow: 0 0 60px rgba(0, 136, 255, 0.2), inset 0 0 20px rgba(0, 136, 255, 0.08);">
24
-
25
- <!-- Futuristic Glowing Dual-Ring Orbit Spinner -->
26
- <div style="position: relative; width: 72px; height: 72px; margin: 0 auto 1.5rem auto; display: flex; align-items: center; justify-content: center;">
27
- <div style="position: absolute; inset: 0; border: 2.5px solid transparent; border-top-color: #00d2ff; border-right-color: #0088ff; border-radius: 50%; animation: reaperSpin 1s linear infinite;"></div>
28
- <div style="position: absolute; inset: 6px; border: 2px dashed rgba(0, 210, 255, 0.4); border-radius: 50%; animation: reaperSpinRev 3s linear infinite;"></div>
29
- <div style="width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #0088ff, #00d2ff); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(0, 210, 255, 0.8);">
30
- <div style="width: 14px; height: 14px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px #fff;"></div>
31
- </div>
32
- </div>
33
-
34
- <style>
35
- @keyframes reaperSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
36
- @keyframes reaperSpinRev { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }
37
- </style>
38
-
39
- <h1 class="splash-logo" style="font-family: var(--font-logo); font-size: 2.8rem; font-weight: 900; color: #ffffff; letter-spacing: 0.15em; margin: 0 0 0.25rem 0; text-shadow: 0 0 25px rgba(0, 180, 255, 0.6);">REAPER</h1>
40
- <div class="splash-sub" style="font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: #00d2ff; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.5rem;">HIGH-SPEED ARCADE ENGINE โ€ข 788 TITLES</div>
41
-
42
- <!-- Clean Minimalist Diagnostic Status Badges -->
43
- <div style="display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem;">
44
- <span style="font-size: 0.65rem; color: #00ffaa; background: #020712; border: 1px solid rgba(0, 255, 170, 0.4); padding: 0.25rem 0.6rem; border-radius: 4px; font-weight: 700; letter-spacing: 0.05em;">CDN: CONNECTED</span>
45
- <span style="font-size: 0.65rem; color: #00d2ff; background: #020712; border: 1px solid rgba(0, 210, 255, 0.4); padding: 0.25rem 0.6rem; border-radius: 4px; font-weight: 700; letter-spacing: 0.05em;">SHIELD: ARMED</span>
46
- <span style="font-size: 0.65rem; color: #ffd700; background: #020712; border: 1px solid rgba(255, 215, 0, 0.4); padding: 0.25rem 0.6rem; border-radius: 4px; font-weight: 700; letter-spacing: 0.05em;">CORE: READY</span>
47
- </div>
48
-
49
- <!-- Rotating Feel-Good Cyber Quotes Card -->
50
- <div class="splash-quote-wrapper" style="min-height: 52px; display: flex; align-items: center; justify-content: center; background: #020612; border: 1px solid rgba(0, 136, 255, 0.25); border-radius: 8px; padding: 0.85rem 1.25rem; margin-bottom: 1.5rem;">
51
- <div id="splash-quote-text" class="splash-quote-text" style="font-size: 0.86rem; color: #e2f1ff; font-style: italic; font-weight: 500; transition: opacity 0.2s ease, transform 0.2s ease; line-height: 1.45;">"You are capable of more than you know. Lock in and dominate today."</div>
52
- </div>
53
-
54
- <div class="splash-progress-track" style="height: 6px; background: #020714; border: 1px solid rgba(0, 136, 255, 0.3); border-radius: 6px; overflow: hidden; margin-bottom: 0.75rem;">
55
- <div id="splash-progress-bar" class="splash-progress-bar" style="height: 100%; width: 0%; background: linear-gradient(90deg, #0088ff, #00d2ff, #00ffaa); border-radius: 6px; transition: width 0.1s linear; box-shadow: 0 0 12px #00d2ff;"></div>
56
- </div>
57
- <div id="splash-status-text" class="splash-status-text" style="font-family: var(--font-mono); font-size: 0.72rem; color: #88aacc; font-weight: 700; letter-spacing: 0.05em;">[0%] INITIALIZING REAPER CORE...</div>
58
- </div>
59
- </div>
60
-
61
- <!-- Key Gatekeeper Modal (In-Page Clean UI) -->
62
- <div id="key-gate-modal" class="admin-modal" style="z-index: 99998; background: radial-gradient(circle at center, #07152b 0%, #02050a 100%);">
63
- <div class="admin-window" style="max-width: 480px; text-align: center; border-color: var(--blue-primary); box-shadow: 0 0 45px var(--blue-glow); padding: 2.5rem 2rem;">
64
- <div style="font-family: var(--font-logo); font-size: 3.5rem; color: #fff; font-weight: 900; margin-bottom: 0.25rem; letter-spacing: 0.1em;">reaper</div>
65
- <div style="color: #00d2ff; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.25rem;">AUTHENTICATION REQUIRED</div>
66
- <p style="color: #adc4e2; font-size: 0.88rem; margin-bottom: 1.5rem; line-height: 1.6;">
67
- To protect server stability, Reaper requires an active access key or session token. Enter your key directly below or verify on the gateway.
68
- </p>
69
-
70
- <!-- In-Page Direct Key & Master Token Input Box -->
71
- <div style="background: #040c18; border: 1.5px solid var(--blue-border); border-radius: 8px; padding: 1.2rem; text-align: left; margin-bottom: 1.25rem;">
72
- <div style="font-size: 0.78rem; color: #88aacc; font-weight: 700; margin-bottom: 0.5rem; text-transform: uppercase;">ENTER ACCESS KEY OR MASTER TOKEN:</div>
73
- <input type="text" id="gate-token-input" class="red-chat-input" placeholder="ENTER KEY (E.G. REAPER-123)" autocomplete="off" style="margin-bottom: 0.75rem; font-family: var(--font-mono); font-size: 0.88rem; padding: 0.75rem 1rem;" onkeydown="if(event.key==='Enter') app.submitGateToken()">
74
- <button class="btn-primary" style="width: 100%; justify-content: center; padding: 0.75rem;" onclick="app.submitGateToken()">
75
- UNLOCK & ENTER REAPER
76
- </button>
77
- </div>
78
-
79
- <div>
80
- <button class="btn-stealth" style="width: 100%; justify-content: center; font-size: 0.8rem;" onclick="app.redirectToVerify()">
81
- OPEN VERIFICATION GATEWAY PAGE โž”
82
- </button>
83
- </div>
84
- </div>
85
- </div>
86
-
87
- <!-- Human Update Logs Modal -->
88
- <div id="update-logs-modal" class="admin-modal" style="z-index: 700;">
89
- <div class="admin-window" style="max-width: 620px;">
90
- <div class="admin-header">
91
- <h2 style="font-size: 1.3rem; color: #00d2ff;">PATCH NOTES & UPDATES</h2>
92
- <button onclick="app.closeUpdateLogsModal()" class="btn-primary">CLOSE</button>
93
- </div>
94
-
95
- <div style="font-size: 0.88rem; line-height: 1.7; color: #d0e4ff; display: flex; flex-direction: column; gap: 1rem;">
96
- <div>
97
- <strong style="color: #00d2ff; font-size: 1.15rem;">๐Ÿ”ฅ Reaper Hub v1.0.9 is Live!</strong>
98
- <p style="color: #88aacc; font-size: 0.82rem;">Latest Global Cyber Deployment</p>
99
- </div>
100
-
101
- <p style="color: #ffffff; font-weight: 600;">
102
- Welcome to Reaper Hub! Here are the latest additions and improvements:
103
- </p>
104
-
105
- <ul style="padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.55rem; color: #e5f0ff;">
106
- <li><strong>๐Ÿ”ฅ TOP PLAYS Counter &amp; Sort:</strong> Real-time tracking of total plays for every game! Every card displays live play counts (e.g. <code>๐Ÿ”ฅ 1.4k Plays</code>). Click the new <strong>TOP PLAYS</strong> filter pill to see the most popular games ranked!</li>
107
- <li><strong>๐Ÿ›ก๏ธ Surveillance Spy Honeypot:</strong> If GoGuardian, Securly, or a teacher screen grabber scans your tab, Reaper automatically halts games and cloaks your screen with clean educational study notes.</li>
108
- <li><strong>๐Ÿ’ฌ Realtime Private DMs &amp; Global Chat:</strong> Start encrypted 1-on-1 direct messages with any player on the network. Press <code>Enter</code> to instantly send messages.</li>
109
- <li><strong>๐ŸŽฎ Perfect Game Centering &amp; Auto-Clean:</strong> Stripped all ad overlays so games are perfectly centered in full 60 FPS with instant WASD/click focus.</li>
110
- <li><strong>๐ŸŒŸ 100 Feel-Good Splash Quotes:</strong> Over 100 motivating, funny, and uplifting quotes rotating smoothly on the cyber startup loader.</li>
111
- </ul>
112
- </div>
113
- </div>
114
- </div>
115
-
116
- <!-- Starfield Space Canvas -->
117
- <canvas id="bg-canvas"></canvas>
118
-
119
- <!-- Global Live Broadcast Alert Banner -->
120
- <div id="global-broadcast-banner" style="display: none; background: linear-gradient(90deg, #ff0055, #ff8800); color: #fff; padding: 0.55rem 1rem; text-align: center; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.05em; z-index: 99990; position: sticky; top: 0; box-shadow: 0 4px 15px rgba(255, 0, 85, 0.5);">
121
- <span id="global-broadcast-text">๐Ÿšจ SYSTEM ALERT</span>
122
- </div>
123
-
124
- <!-- App Header -->
125
- <header class="app-header">
126
- <div class="nav-container">
127
- <div class="brand-logo" onclick="app.switchTab('home')">
128
- <span>reaper</span>
129
- </div>
130
-
131
- <!-- Nav Tabs -->
132
- <nav class="nav-tabs-pill">
133
- <button class="nav-tab-btn active" data-tab="home" onclick="app.switchTab('home')">Home</button>
134
- <button class="nav-tab-btn" data-tab="games" onclick="app.switchTab('games')">Games (788)</button>
135
- <button class="nav-tab-btn" data-tab="leaderboard" onclick="app.switchTab('leaderboard')">Leaderboard</button>
136
- <button class="nav-tab-btn" id="nav-tab-mod" style="display: none; color: #00ffaa;" data-tab="mod" onclick="app.switchTab('mod')">Mod</button>
137
- <button class="nav-tab-btn" id="nav-tab-admin" style="display: none; color: #ffd700;" data-tab="admin" onclick="app.switchTab('admin')">Admin</button>
138
- </nav>
139
-
140
- <div class="header-right">
141
- <button class="btn-stealth" id="btn-turbo-toggle" onclick="app.togglePerformanceMode()" style="color: #00ffaa; border-color: #00ffaa; font-weight: 800;" title="Toggle Potato PC Turbo Performance Mode (Auto ON)">
142
- โšก TURBO: ON
143
- </button>
144
-
145
- <button class="btn-stealth" id="btn-sfx-toggle" onclick="app.toggleSoundFX()" title="Toggle Sci-Fi SFX">
146
- ๐Ÿ”Š SFX
147
- </button>
148
-
149
- <button class="btn-stealth" onclick="if(window.reaperShield) window.reaperShield.togglePanicDisguise()" title="Emergency Panic Cloak (Hotkey: ~)">
150
- ๐Ÿšจ Panic (~)
151
- </button>
152
-
153
- <button class="btn-stealth" onclick="app.openUpdateLogsModal()" title="View update logs">
154
- Updates
155
- </button>
156
-
157
- <button class="btn-stealth" onclick="app.openSiteAboutBlank()" title="Cloak entire site in an about:blank tab">
158
- Cloak
159
- </button>
160
-
161
- <div class="user-badge">
162
- <span class="bind-username" id="header-username-display">Reaper</span>
163
- <span class="bind-rank rank-pill rank-member" id="header-rank-badge">MEMBER</span>
164
- </div>
165
-
166
- <button class="btn-stealth" id="btn-settings-toggle" onclick="app.openSettingsModal()" style="border-color: var(--blue-bright); color: #00d2ff; font-weight: 800;" title="Settings & Security Shield">
167
- โš™๏ธ Settings
168
- </button>
169
- </div>
170
- </div>
171
- </header>
172
-
173
- <!-- Main App Layout (Chat Always Visible) -->
174
- <div class="app-layout">
175
-
176
- <!-- Center Content Area -->
177
- <main class="content-area">
178
-
179
- <!-- ========================================== -->
180
- <!-- TAB 1: REAPER HOME SCREEN -->
181
- <!-- ========================================== -->
182
- <section id="section-home" class="tab-section">
183
- <div class="opium-home-container">
184
- <h1 class="opium-logo-title">reaper</h1>
185
- <div class="opium-subtitle">788 High-Speed Unblocked Games &amp; Live Leaderboard</div>
186
-
187
- <!-- Recently Played Bar -->
188
- <div id="recent-games-container" class="recent-bar-container" style="display: none;">
189
- <div style="display: flex; justify-content: space-between; align-items: center;">
190
- <span style="font-size: 0.78rem; font-weight: 800; color: #00d2ff; letter-spacing: 0.05em; text-transform: uppercase;">โšก RECENTLY PLAYED</span>
191
- <button onclick="app.clearRecentlyPlayed()" class="btn-stealth" style="font-size: 0.68rem; padding: 0.2rem 0.5rem;">CLEAR</button>
192
- </div>
193
- <div class="recent-grid" id="recent-games-grid"></div>
194
- </div>
195
-
196
- <!-- Pill Search Bar -->
197
- <div class="opium-search-wrapper">
198
- <span style="color: #0088ff; font-weight: 700; font-size: 0.95rem;">SEARCH</span>
199
- <input type="text" id="opium-search-input" class="opium-search-input" placeholder="Search 780+ games or topics..." autocomplete="off" onkeydown="if(event.key==='Enter') app.handleOpiumSearch()">
200
- </div>
201
-
202
- <!-- Quick Navigation Tiles -->
203
- <div style="display: flex; gap: 0.85rem; flex-wrap: wrap; justify-content: center; max-width: 580px; margin-bottom: 1.25rem;">
204
- <button class="btn-primary" style="padding: 0.75rem 1.4rem; font-size: 0.88rem;" onclick="app.switchTab('games')">
205
- BROWSE 788 GAMES
206
- </button>
207
- <button class="btn-stealth" style="padding: 0.75rem 1.4rem; font-size: 0.88rem;" onclick="app.switchTab('leaderboard')">
208
- PLAYTIME LEADERBOARD
209
- </button>
210
- </div>
211
- </div>
212
- </section>
213
-
214
- <!-- ========================================== -->
215
- <!-- TAB 2: 788 GAMES CATALOGUE -->
216
- <!-- ========================================== -->
217
- <section id="section-games" class="tab-section" style="display: none;">
218
- <div class="hero-banner" style="margin-bottom: 1.25rem;">
219
- <h2 class="hero-title" style="font-size: 1.6rem; font-family: var(--font-heading);">GAMES CATALOGUE</h2>
220
- <p class="hero-desc" style="color: var(--text-sub); font-size: 0.85rem;">788 High-Speed HTML5 Games with instant in-site player & active playtime tracker.</p>
221
- </div>
222
-
223
- <div class="controls-bar">
224
- <div class="search-box">
225
- <span style="color: #0088ff; font-size: 0.75rem; font-weight: 700;">FILTER</span>
226
- <input type="text" id="search-games-input" placeholder="Search 780+ games, series, or authors..." autocomplete="off">
227
- </div>
228
-
229
- <div class="filter-pills">
230
- <button class="filter-btn active" data-cat="all">ALL</button>
231
- <button class="filter-btn" data-cat="featured">FEATURED</button>
232
- <button class="filter-btn" data-cat="favorites">FAVORITES</button>
233
- <button class="filter-btn" data-cat="fnf">FNF (50+)</button>
234
- <button class="filter-btn" data-cat="port">PORTS</button>
235
- <button class="filter-btn" data-cat="flash">FLASH</button>
236
- <button class="filter-btn" data-cat="emulator">EMULATOR</button>
237
- <button class="filter-btn" data-cat="tools">TOOLS</button>
238
- </div>
239
- </div>
240
-
241
- <div class="games-grid" id="games-grid">
242
- <!-- Rendered dynamically -->
243
- </div>
244
- </section>
245
-
246
- <!-- ========================================== -->
247
- <!-- TAB 3: PLAYTIME LEADERBOARD -->
248
- <!-- ========================================== -->
249
- <section id="section-leaderboard" class="tab-section" style="display: none;">
250
- <div class="leaderboard-container">
251
- <div class="leaderboard-header">
252
- <div>
253
- <h2 style="font-size: 1.6rem; color: #fff; margin-bottom: 0.25rem; font-family: var(--font-heading);">PLAYTIME LEADERBOARD</h2>
254
- <p style="color: var(--text-sub); font-size: 0.85rem;">Rankings based on active in-game playtime. Inactivity for 1 minute pauses your counter.</p>
255
- </div>
256
- <div style="text-align: right;">
257
- <div style="font-size: 0.72rem; color: #88aacc; text-transform: uppercase;">YOUR RECORDED TIME</div>
258
- <div id="stat-my-playtime" style="font-family: var(--font-mono); font-size: 1.25rem; font-weight: 900; color: #00d2ff;">0m 0s</div>
259
- </div>
260
- </div>
261
-
262
- <div class="leaderboard-list" id="leaderboard-rows-container">
263
- <!-- Leaderboard rankings rendered dynamically -->
264
- </div>
265
- </div>
266
- </section>
267
-
268
- <!-- ========================================== -->
269
- <!-- TAB 4: CHAT MOD TAB (MOD ONLY) -->
270
- <!-- ========================================== -->
271
- <section id="section-mod" class="tab-section" style="display: none;">
272
- <div class="mod-tab-container">
273
- <div class="mod-window">
274
- <div class="mod-header">
275
- <h2 style="font-size: 1.3rem; color: #00ffaa; font-family: var(--font-heading);">CHAT MODERATOR DESK</h2>
276
- <span class="rank-pill rank-mod">CHAT MOD ACCESS</span>
277
- </div>
278
-
279
- <!-- Slow Mode Toggle for Mods -->
280
- <div class="mod-section" style="display: flex; justify-content: space-between; align-items: center;">
281
- <div>
282
- <strong style="color: #fff; font-size: 0.92rem;">CHAT SLOW-MODE (5 SECONDS)</strong>
283
- <p style="color: #88aacc; font-size: 0.78rem;">Enforces a 5-second cooldown between messages to prevent spamming.</p>
284
- </div>
285
- <input type="checkbox" id="mod-slowmode-toggle" style="width: 22px; height: 22px; cursor: pointer; accent-color: #00ffaa;" onchange="app.toggleSlowMode(this.checked)">
286
- </div>
287
-
288
- <!-- Timeout User Box -->
289
- <div class="mod-section">
290
- <h3 style="font-size: 0.95rem; color: #fff; margin-bottom: 0.35rem;">TIMEOUT / MUTE USER</h3>
291
- <p style="color: #88aacc; font-size: 0.8rem; margin-bottom: 0.75rem;">Apply a temporary chat timeout to any user by name.</p>
292
- <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
293
- <input type="text" id="mod-timeout-username" class="red-chat-input" placeholder="Enter username to timeout" autocomplete="off" style="max-width: 260px;">
294
- <button class="btn-primary" style="background: #0088ff;" onclick="app.modApplyTimeout(5)">5 MIN TIMEOUT</button>
295
- <button class="btn-primary" style="background: #ff8800;" onclick="app.modApplyTimeout(15)">15 MIN TIMEOUT</button>
296
- <button class="btn-primary" style="background: #ff3333;" onclick="app.modApplyTimeout(60)">1 HOUR TIMEOUT</button>
297
- </div>
298
- </div>
299
-
300
- <!-- Live Chat Logs with Quick Actions -->
301
- <div class="mod-section">
302
- <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
303
- <h3 style="font-size: 0.95rem; color: #fff;">LIVE CHAT LOGS &amp; MESSAGE PURGE</h3>
304
- </div>
305
- <p style="color: #88aacc; font-size: 0.8rem; margin-bottom: 0.75rem;">Click DEL to remove rulebreaking messages or TIMEOUT to mute the user.</p>
306
- <div id="mod-chat-logs" style="max-height: 280px; overflow-y: auto; background: #040912; border: 1px solid var(--blue-border); border-radius: 4px;"></div>
307
- </div>
308
- </div>
309
- </div>
310
- </section>
311
-
312
- <!-- ========================================== -->
313
- <!-- TAB 5: ROOT OWNER ADMIN TAB (OWNER ONLY) -->
314
- <!-- ========================================== -->
315
- <section id="section-admin" class="tab-section" style="display: none;">
316
- <div class="admin-tab-container">
317
- <div class="admin-window">
318
- <div class="admin-header">
319
- <h2 style="font-size: 1.3rem; color: #ffd700; font-family: var(--font-heading);">ROOT OWNER ADMINISTRATION</h2>
320
- <div style="display: flex; gap: 0.5rem;">
321
- <button onclick="app.logoutAdmin()" class="btn-stealth" style="color: #ff4444; border-color: #ff4444;">LOGOUT</button>
322
- </div>
323
- </div>
178
+ <div class="bg-glow"></div>
324
179
 
325
- <!-- Superpower: Global Live Broadcast Alert -->
326
- <div class="admin-section" style="border-color: #ff0055; background: #18030c;">
327
- <h3 style="font-size: 0.95rem; color: #ff3377; margin-bottom: 0.4rem;">๐Ÿ‘‘ GLOBAL LIVE BROADCAST BANNER</h3>
328
- <p style="color: #ff99bb; font-size: 0.8rem; margin-bottom: 0.75rem;">Display an instant sticky banner across all players' screens in real time.</p>
329
- <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
330
- <input type="text" id="admin-broadcast-msg" class="red-chat-input" placeholder="Type global announcement message..." autocomplete="off" style="flex: 1; min-width: 250px;">
331
- <button class="btn-primary" style="background: #ff0055; border-color: #ff3377;" onclick="app.sendGlobalAlert()">BROADCAST TO ALL PLAYERS</button>
332
- <button class="btn-stealth" onclick="app.clearGlobalAlert()" style="color: #ff8888;">CLEAR BANNER</button>
333
- </div>
334
- </div>
335
-
336
- <!-- Superpower: Chat Slow-Mode Switch -->
337
- <div class="admin-section" style="display: flex; justify-content: space-between; align-items: center;">
338
- <div>
339
- <strong style="color: #fff; font-size: 0.95rem;">CHAT SLOW-MODE (5-SECOND COOLDOWN)</strong>
340
- <p style="color: #88aacc; font-size: 0.8rem;">Enforces a 5-second interval between chat messages for non-owner players.</p>
341
- </div>
342
- <input type="checkbox" id="admin-slowmode-toggle" style="width: 22px; height: 22px; cursor: pointer; accent-color: #00d2ff;" onchange="app.toggleSlowMode(this.checked)">
343
- </div>
344
-
345
- <!-- Connected Players Directory (With Promote/Demote/Kick/Ban) -->
346
- <div class="admin-section">
347
- <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
348
- <h3 style="font-size: 0.95rem; color: #fff;">LIVE PLAYERS DIRECTORY &amp; ROLES</h3>
349
- <button onclick="app.renderAdminUsersDirectory()" class="btn-stealth" style="font-size: 0.75rem;">REFRESH LIST</button>
350
- </div>
351
- <p style="color: #88aacc; font-size: 0.8rem; margin-bottom: 0.65rem;">Manage connected users, promote to Chat Mod, de-rank, kick, or permanently ban.</p>
352
- <div id="admin-users-directory" style="max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem;"></div>
353
- </div>
354
-
355
- <!-- Custom Access Key Generator -->
356
- <div class="admin-section">
357
- <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
358
- <h3 style="font-size: 0.95rem; color: #fff;">CUSTOM ACCESS KEY GENERATOR</h3>
359
- <button onclick="app.clearAllKeys()" class="btn-stealth" style="color: #ff5555; border-color: #771111; font-size: 0.75rem;">PURGE ALL KEYS</button>
360
- </div>
361
- <p style="color: #88aacc; font-size: 0.8rem; margin-bottom: 0.65rem;">Generate keys with custom durations (e.g. 3 Days, 5 Days, Lifetime) and usage limits.</p>
362
-
363
- <!-- Custom Key Creation Input -->
364
- <div style="display: flex; gap: 0.5rem; margin-bottom: 0.85rem; flex-wrap: wrap; align-items: center;">
365
- <input type="text" id="admin-custom-key-input" class="red-chat-input" placeholder="Blank for REAPER-$$$ (or custom name)" autocomplete="off" style="max-width: 250px;">
366
-
367
- <select id="admin-custom-key-rank" style="background: #040912; color: #fff; border: 1px solid var(--blue-border); border-radius: 6px; padding: 0.45rem 0.65rem; font-size: 0.8rem; font-weight: 700;">
368
- <option value="member">Rank: Member</option>
369
- <option value="chat_mod">Rank: Chat Mod</option>
370
- </select>
371
-
372
- <select id="admin-custom-key-duration" style="background: #040912; color: #fff; border: 1px solid var(--blue-border); border-radius: 6px; padding: 0.45rem 0.65rem; font-size: 0.8rem;">
373
- <option value="24">Duration: 24 Hours (1 Day)</option>
374
- <option value="72">Duration: 3 Days</option>
375
- <option value="120">Duration: 5 Days</option>
376
- <option value="168">Duration: 7 Days (1 Week)</option>
377
- <option value="720">Duration: 30 Days (1 Month)</option>
378
- <option value="87600">Duration: Lifetime</option>
379
- </select>
380
-
381
- <select id="admin-custom-key-maxuses" style="background: #040912; color: #fff; border: 1px solid var(--blue-border); border-radius: 6px; padding: 0.45rem 0.65rem; font-size: 0.8rem;">
382
- <option value="1">Uses: 1 Use (Single-Use)</option>
383
- <option value="3">Uses: 3 Uses</option>
384
- <option value="5">Uses: 5 Uses</option>
385
- <option value="10">Uses: 10 Uses</option>
386
- <option value="25">Uses: 25 Uses</option>
387
- <option value="50">Uses: 50 Uses</option>
388
- <option value="999999">Uses: Unlimited Uses</option>
389
- </select>
390
-
391
- <button class="btn-primary" style="padding: 0.5rem 1.15rem;" onclick="app.createCustomKey()">GENERATE KEY</button>
392
- </div>
393
-
394
- <div style="font-size: 0.78rem; color: #88aacc; margin-bottom: 0.3rem;">ACTIVE KEYS &amp; REMAINING USES:</div>
395
- <div id="admin-keys-list" style="max-height: 180px; overflow-y: auto;"></div>
396
- </div>
397
-
398
- <!-- Admin AI Bypass Switch -->
399
- <div class="admin-section">
400
- <div style="display: flex; justify-content: space-between; align-items: center;">
401
- <div>
402
- <strong style="color: #fff; font-size: 0.95rem;">OWNER AI FILTER BYPASS</strong>
403
- <p style="color: #88aacc; font-size: 0.8rem;">Allow Owner to bypass AI content filtering in Chat.</p>
404
- </div>
405
- <input type="checkbox" id="admin-bypass-toggle" style="width: 22px; height: 22px; cursor: pointer;" onchange="app.toggleAiBypass(this.checked)">
406
- </div>
407
- </div>
408
-
409
- <!-- Chat Lock Switch -->
410
- <div class="admin-section">
411
- <div style="display: flex; justify-content: space-between; align-items: center;">
412
- <div>
413
- <strong style="color: #fff; font-size: 0.95rem;">LOCK CHAT</strong>
414
- <p style="color: #88aacc; font-size: 0.8rem;">Prevent lower ranks from sending messages in Chat.</p>
415
- </div>
416
- <input type="checkbox" id="admin-chatlock-toggle" style="width: 22px; height: 22px; cursor: pointer;" onchange="app.toggleChatLock(this.checked)">
417
- </div>
418
- </div>
419
-
420
- <!-- Emergency Google Redirect Lock (Panic Mode) -->
421
- <div class="admin-section" style="border-color: #ff0055; background: #1a000d;">
422
- <div style="display: flex; justify-content: space-between; align-items: center;">
423
- <div>
424
- <strong style="color: #ff3377; font-size: 0.95rem;">EMERGENCY GOOGLE REDIRECT LOCK (PANIC MODE)</strong>
425
- <p style="color: #ff99bb; font-size: 0.8rem;">When enabled, ANY user opening the Main Portal or Verification Gateway is INSTANTLY redirected to google.com.</p>
426
- </div>
427
- <input type="checkbox" id="admin-redirect-google-toggle" style="width: 24px; height: 24px; cursor: pointer; accent-color: #ff0055;" onchange="app.toggleRedirectGoogle(this.checked)">
428
- </div>
429
- </div>
430
-
431
- <!-- Pause / Freeze All Access Keys -->
432
- <div class="admin-section" style="border-color: #ffaa00; background: #140d02;">
433
- <div style="display: flex; justify-content: space-between; align-items: center;">
434
- <div>
435
- <strong style="color: #ffbb33; font-size: 0.95rem;">PAUSE / FREEZE ALL ACCESS KEYS</strong>
436
- <p style="color: #ffe099; font-size: 0.8rem;">When paused, no new key logins can occur on the gateway. Key durations &amp; remaining uses are frozen and preserved.</p>
437
- </div>
438
- <input type="checkbox" id="admin-keys-locked-toggle" style="width: 24px; height: 24px; cursor: pointer; accent-color: #ffaa00;" onchange="app.toggleKeysLocked(this.checked)">
439
- </div>
440
- </div>
441
-
442
- <!-- Verify Gateway Lockdown Switch -->
443
- <div class="admin-section" style="border-color: #00d2ff; background: #020f1e;">
444
- <div style="display: flex; justify-content: space-between; align-items: center;">
445
- <div>
446
- <strong style="color: #00d2ff; font-size: 0.95rem;">LOCK VERIFICATION GATEWAY (VERIFY SITE LOCKDOWN)</strong>
447
- <p style="color: #88ccff; font-size: 0.8rem;">When enabled, the Verification site (verifyreaper.neocities.org) is locked down with a maintenance screen.</p>
448
- </div>
449
- <input type="checkbox" id="admin-verify-lockdown-toggle" style="width: 24px; height: 24px; cursor: pointer; accent-color: #00d2ff;" onchange="app.toggleVerifyLockdown(this.checked)">
450
- </div>
451
- </div>
452
-
453
- <!-- Permanent Shutdown Mode Switch -->
454
- <div class="admin-section" style="border-color: #ff3333; background: #140303;">
455
- <div style="display: flex; justify-content: space-between; align-items: center;">
456
- <div>
457
- <strong style="color: #ff5555; font-size: 0.95rem;">PERMANENT SHUTDOWN MODE ("WE ARE SHUTTING DOWN FOR GOOD")</strong>
458
- <p style="color: #ffaaaa; font-size: 0.8rem;">When enabled, all lower ranks see a permanent blackout screen saying 'We are shutting down for good'.</p>
459
- </div>
460
- <input type="checkbox" id="admin-shutdown-toggle" style="width: 24px; height: 24px; cursor: pointer; accent-color: #ff2222;" onchange="app.toggleShutdownMode(this.checked)">
461
- </div>
462
- </div>
463
-
464
- <!-- Site Lockdown Switch -->
465
- <div class="admin-section">
466
- <div style="display: flex; justify-content: space-between; align-items: center;">
467
- <div>
468
- <strong style="color: #fff; font-size: 0.95rem;">SHUT DOWN PORTAL FOR LOWER RANKS (MAIN PORTAL LOCKDOWN)</strong>
469
- <p style="color: #88aacc; font-size: 0.8rem;">When enabled, all non-owner users on the main site will be locked out with a maintenance screen.</p>
470
- </div>
471
- <input type="checkbox" id="admin-lockdown-toggle" style="width: 22px; height: 22px; cursor: pointer;" onchange="app.toggleSiteLockdown(this.checked)">
472
- </div>
473
- </div>
474
-
475
- <!-- Server Data Purge -->
476
- <div class="admin-section" style="border-color: #ffaa00;">
477
- <div style="display: flex; justify-content: space-between; align-items: center;">
478
- <div>
479
- <strong style="color: #ffaa00; font-size: 0.95rem;">PURGE ALL SERVER DATA</strong>
480
- <p style="color: #88aacc; font-size: 0.8rem;">Instantly reset all chat messages, playtime leaderboard scores, and generated keys across Firebase.</p>
481
- </div>
482
- <button onclick="app.purgeAllServerData()" class="btn-primary" style="background: #ff4400; border-color: #ff8800; font-size: 0.78rem;">PURGE ALL</button>
483
- </div>
484
- </div>
485
-
486
- <!-- User Moderation & Ban Tools -->
487
- <div class="admin-section">
488
- <h3 style="font-size: 0.95rem; margin-bottom: 0.5rem; color: #fff;">PERMANENT BAN TOOLS</h3>
489
- <p style="color: #88aacc; font-size: 0.8rem; margin-bottom: 0.65rem;">Banning a user immediately wipes all their playtime progress, clears their chat history, and permanently blacklists their identity across all domains.</p>
490
- <div style="display: flex; gap: 0.5rem; margin-bottom: 0.85rem;">
491
- <input type="text" id="admin-ban-username-input" class="red-chat-input" placeholder="Username to permanently ban" autocomplete="off" style="max-width: 260px;">
492
- <button onclick="app.permLocalBan()" class="btn-primary" style="background: #ff2222; font-size: 0.78rem;">PERM BAN & WIPE USER</button>
493
- </div>
494
- <div style="font-size: 0.78rem; color: #88aacc; margin-bottom: 0.3rem;">BANNED IDENTITIES (BLACKLISTED):</div>
495
- <div id="admin-banned-list"></div>
496
- </div>
497
-
498
- <!-- Live Chat Logs & Purge -->
499
- <div class="admin-section">
500
- <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
501
- <h3 style="font-size: 0.95rem; color: #fff;">LIVE CHAT LOGS</h3>
502
- <button onclick="app.clearAllChat()" class="btn-stealth" style="color: #ff5555; border-color: #771111; font-size: 0.75rem;">CLEAR CHAT</button>
503
- </div>
504
- <div id="admin-chat-logs" style="max-height: 160px; overflow-y: auto; background: #040912; border: 1px solid var(--blue-border); border-radius: 4px;"></div>
505
- </div>
506
- </div>
507
- </div>
508
- </section>
509
-
510
- </main>
511
-
512
- <!-- Side-Docked Chat & Private DMs -->
513
- <aside class="side-chat-panel" id="side-chat-panel">
514
- <!-- Chat Channel Tabs -->
515
- <div style="display: flex; border-bottom: 1px solid var(--blue-border); background: #020712;">
516
- <button class="nav-tab-btn active" id="chat-channel-btn-global" onclick="app.switchChatChannel('global')" style="flex: 1; padding: 0.55rem 0.5rem; font-size: 0.78rem; font-weight: 800; border-radius: 0;">๐ŸŒ GLOBAL</button>
517
- <button class="nav-tab-btn" id="chat-channel-btn-dms" onclick="app.switchChatChannel('dms')" style="flex: 1; padding: 0.55rem 0.5rem; font-size: 0.78rem; font-weight: 800; border-radius: 0; color: #00d2ff;">๐Ÿ’ฌ PRIVATE DMs</button>
518
- </div>
519
-
520
- <!-- CHANNEL 1: GLOBAL CHAT -->
521
- <div id="chat-channel-global" style="display: flex; flex-direction: column; flex: 1; min-height: 0;">
522
- <div class="red-chat-header">
523
- <div class="red-chat-title">
524
- <span>GLOBAL LOBBY</span>
525
- <span class="chat-lock-indicator" id="chat-lock-indicator">LOCKED</span>
526
- </div>
527
- <span style="font-size: 0.68rem; color: #00d2ff;">AI FILTER ACTIVE</span>
528
- </div>
529
-
530
- <!-- Messages Stream -->
531
- <div class="red-chat-messages" id="red-chat-messages">
532
- <!-- Messages stream -->
533
- </div>
534
-
535
- <!-- Input Bar -->
536
- <div class="red-chat-input-bar">
537
- <div class="timeout-warning-bar" id="chat-timeout-bar"></div>
538
- <div class="chat-input-row">
539
- <input type="text" id="red-chat-input" class="red-chat-input" placeholder="Send message in Global Chat..." autocomplete="off">
540
- <button class="btn-primary" id="red-chat-send-btn" onclick="app.handleSendChatMessage()">SEND</button>
541
- </div>
542
- </div>
543
- </div>
544
-
545
- <!-- CHANNEL 2: PRIVATE DIRECT MESSAGES (DMs) -->
546
- <div id="chat-channel-dms" style="display: none; flex-direction: column; flex: 1; min-height: 0;">
547
- <!-- DMs List View -->
548
- <div id="dm-list-view" style="display: flex; flex-direction: column; flex: 1; min-height: 0;">
549
- <div style="padding: 0.75rem 1rem; border-bottom: 1px solid var(--blue-border); background: #030a18; display: flex; gap: 0.5rem;">
550
- <input type="text" id="dm-new-user-input" class="red-chat-input" placeholder="Username to DM..." autocomplete="off" style="font-size: 0.78rem; padding: 0.35rem 0.65rem;">
551
- <button class="btn-primary" onclick="app.startNewDMFromInput()" style="padding: 0.35rem 0.75rem; font-size: 0.75rem;">+ DM</button>
552
- </div>
553
- <div id="dm-threads-container" style="flex: 1; overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem;">
554
- <!-- Threads list rendered dynamically -->
555
- </div>
556
- </div>
557
-
558
- <!-- DM Conversation Active View -->
559
- <div id="dm-conversation-view" style="display: none; flex-direction: column; flex: 1; min-height: 0;">
560
- <div style="padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--blue-border); background: #030814; display: flex; justify-content: space-between; align-items: center;">
561
- <button onclick="app.backToDMList()" class="btn-stealth" style="padding: 0.2rem 0.5rem; font-size: 0.75rem;">&larr; BACK</button>
562
- <div style="display: flex; align-items: center; gap: 0.4rem;">
563
- <span style="color: #88aacc; font-size: 0.75rem;">DM:</span>
564
- <strong id="dm-active-recipient-name" style="color: #00d2ff; font-size: 0.85rem;">User</strong>
565
- </div>
566
- <span style="font-size: 0.65rem; color: #00ffaa;">ENCRYPTED</span>
567
- </div>
568
-
569
- <div class="red-chat-messages" id="dm-messages-stream" style="flex: 1; overflow-y: auto;">
570
- <!-- DM messages stream -->
571
- </div>
572
-
573
- <div class="red-chat-input-bar">
574
- <div class="chat-input-row">
575
- <input type="text" id="dm-chat-input" class="red-chat-input" placeholder="Send private message..." autocomplete="off">
576
- <button class="btn-primary" id="dm-chat-send-btn" onclick="app.handleSendDMMessage()">SEND</button>
577
- </div>
578
- </div>
579
- </div>
580
- </div>
581
- </aside>
582
-
583
- </div>
584
-
585
- <!-- In-Site Game Player Modal (Chat hidden while playing) -->
586
- <div id="game-player-modal" class="game-player-modal">
587
- <div class="player-toolbar">
588
- <div style="display: flex; align-items: center; gap: 0.85rem;">
589
- <button class="btn-stealth" onclick="app.closePlayer()">EXIT GAME</button>
590
- <span id="player-game-name" style="font-weight: 800; font-size: 1.1rem; color: #fff;">Game Player</span>
591
- <span id="player-status-badge" style="font-size: 0.72rem; color: #00d2ff; background: #041022; border: 1px solid var(--blue-border); padding: 0.2rem 0.5rem; border-radius: 4px;">Loading...</span>
592
- <span id="player-playtime-counter" style="font-family: var(--font-mono); font-size: 0.82rem; font-weight: 800; color: #00d2ff; margin-left: 0.5rem;">PLAYTIME: 0m 0s</span>
593
- </div>
594
- <div style="display: flex; align-items: center; gap: 0.5rem;">
595
- <span id="player-fps-hud" style="font-family: var(--font-mono); font-size: 0.75rem; color: #00ffaa; background: #020712; padding: 0.25rem 0.55rem; border: 1px solid var(--blue-border); border-radius: 4px; font-weight: bold;">60 FPS โ€ข 12ms</span>
596
- <button class="btn-stealth" style="border-color: var(--blue-border); color: #88ccff;" onclick="app.openGameAboutBlank()" title="Play in a disguised about:blank tab">
597
- OPEN IN ABOUT:BLANK
598
- </button>
599
- <button class="btn-stealth" onclick="app.reloadPlayer()">RELOAD</button>
600
- <button class="btn-primary" onclick="app.togglePlayerFullscreen()">FULLSCREEN</button>
601
- </div>
180
+ <div class="maintenance-card">
181
+ <div class="spinner-box">
182
+ <div class="spinner-ring-1"></div>
183
+ <div class="spinner-ring-2"></div>
184
+ <div class="spinner-core">R</div>
602
185
  </div>
603
- <div class="player-frame-wrapper">
604
- <iframe id="player-iframe" class="player-iframe" src="about:blank" allowfullscreen="true" allow="autoplay; fullscreen; gamepad; focus-without-user-activation; pointer-lock"></iframe>
605
- <div class="reaper-watermark">REAPER HUB</div>
606
- </div>
607
- </div>
608
186
 
609
- <!-- Emergency Google Classroom Panic Disguise Overlay -->
610
- <div id="panic-disguise-overlay" style="position: fixed; inset: 0; width: 100vw; height: 100vh; background: #f8f9fa; color: #3c4043; font-family: 'Roboto', -apple-system, BlinkMacSystemFont, Arial, sans-serif; z-index: 999999; display: none; overflow-y: auto;">
611
- <!-- Classroom Top Bar -->
612
- <div style="height: 64px; background: #ffffff; border-bottom: 1px solid #dadce0; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem;">
613
- <div style="display: flex; align-items: center; gap: 1rem;">
614
- <span style="font-size: 1.5rem; cursor: pointer; color: #5f6368;">โ˜ฐ</span>
615
- <div style="display: flex; align-items: center; gap: 0.5rem;">
616
- <img src="https://ssl.gstatic.com/classroom/favicon.png" width="24" height="24" alt="Google Classroom">
617
- <span style="font-size: 1.25rem; font-weight: 500; color: #3c4043;">Google Classroom</span>
618
- </div>
619
- </div>
620
- <div style="display: flex; align-items: center; gap: 1rem;">
621
- <span style="font-size: 0.85rem; color: #5f6368;">Period 4 โ€ข Mathematics</span>
622
- <button onclick="if(window.reaperShield) window.reaperShield.togglePanicDisguise()" style="background: #e8f0fe; border: 1px solid #d2e3fc; color: #1a73e8; border-radius: 4px; padding: 0.35rem 0.75rem; font-size: 0.75rem; font-weight: 600; cursor: pointer;">Exit Disguise (Press ~)</button>
623
- <div style="width: 32px; height: 32px; border-radius: 50%; background: #1a73e8; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600;">S</div>
624
- </div>
625
- </div>
187
+ <h1 class="main-logo">REAPER</h1>
188
+ <div class="status-badge">SYSTEM STATUS: UPDATING</div>
626
189
 
627
- <!-- Classroom Stream -->
628
- <div style="max-width: 1000px; margin: 2rem auto; padding: 0 1.5rem;">
629
- <div style="height: 180px; background: linear-gradient(135deg, #1e8e3e, #137333); border-radius: 8px; padding: 1.5rem; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.12);">
630
- <h1 style="font-size: 1.8rem; margin: 0;">AP Calculus &amp; Analytical Geometry</h1>
631
- <p style="margin: 0.25rem 0 0 0; opacity: 0.9; font-size: 0.95rem;">Instructor: Dr. Harrison โ€ข Room 302</p>
632
- </div>
190
+ <p class="description-text">
191
+ Reaper Hub is currently undergoing scheduled updates and infrastructure maintenance. All services will be back online shortly.
192
+ </p>
633
193
 
634
- <div style="display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem;">
635
- <div style="background: #fff; border: 1px solid #dadce0; border-radius: 8px; padding: 1rem; height: fit-content;">
636
- <h3 style="font-size: 0.95rem; margin-bottom: 0.75rem;">Upcoming</h3>
637
- <p style="font-size: 0.85rem; color: #5f6368; margin-bottom: 0.5rem;">Due Friday, 11:59 PM</p>
638
- <a href="#" style="color: #1a73e8; font-size: 0.88rem; text-decoration: none;">Unit 4 Practice: Derivative Applications</a>
639
- </div>
640
-
641
- <div style="display: flex; flex-direction: column; gap: 1rem;">
642
- <div style="background: #fff; border: 1px solid #dadce0; border-radius: 8px; padding: 1.25rem;">
643
- <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;">
644
- <div style="width: 36px; height: 36px; border-radius: 50%; background: #137333; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold;">H</div>
645
- <div>
646
- <strong style="font-size: 0.9rem;">Dr. Harrison</strong>
647
- <div style="font-size: 0.75rem; color: #5f6368;">Posted Yesterday at 8:45 AM</div>
648
- </div>
649
- </div>
650
- <p style="font-size: 0.88rem; line-height: 1.5; color: #3c4043;">Please review Section 4.2 in the digital textbook before tomorrow's lecture. Completed problem sets 1-15 will be collected at the start of class.</p>
651
- </div>
652
- </div>
653
- </div>
194
+ <div class="pulse-bar-wrapper">
195
+ <div class="pulse-bar"></div>
654
196
  </div>
655
- </div>
656
-
657
- <!-- Settings & Security Suite Modal -->
658
- <div id="settings-modal" style="position: fixed; inset: 0; background: rgba(0, 4, 10, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 99995; display: none; align-items: center; justify-content: center; padding: 1.5rem;">
659
- <div style="background: linear-gradient(145deg, #061124 0%, #030814 100%); border: 1.5px solid var(--blue-border); border-radius: 14px; width: 100%; max-width: 850px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 0 45px rgba(0, 136, 255, 0.35);">
660
-
661
- <!-- Settings Header -->
662
- <div style="padding: 1rem 1.4rem; border-bottom: 1px solid var(--blue-border); display: flex; justify-content: space-between; align-items: center; background: #020712;">
663
- <div style="display: flex; align-items: center; gap: 0.6rem;">
664
- <span style="font-size: 1.2rem;">โš™๏ธ</span>
665
- <span style="font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; color: #fff;">SETTINGS &amp; SECURITY SUITE</span>
666
- </div>
667
- <button onclick="app.closeSettingsModal()" class="btn-stealth" style="padding: 0.3rem 0.65rem; font-size: 0.9rem; font-weight: bold;">โœ•</button>
668
- </div>
669
-
670
- <!-- Settings Sub-Tabs -->
671
- <div style="display: flex; border-bottom: 1px solid var(--blue-border); background: #030a18; padding: 0.5rem 1.4rem; gap: 0.5rem; overflow-x: auto;">
672
- <button class="nav-tab-btn active" id="st-tab-btn-shield" onclick="app.switchSettingsTab('shield')" style="padding: 0.45rem 1rem; font-size: 0.82rem;">๐Ÿ›ก๏ธ Security Shield</button>
673
- <button class="nav-tab-btn" id="st-tab-btn-prefs" onclick="app.switchSettingsTab('prefs')" style="padding: 0.45rem 1rem; font-size: 0.82rem;">โšก Preferences &amp; Audio</button>
674
- <button class="nav-tab-btn" id="st-tab-btn-identity" onclick="app.switchSettingsTab('identity')" style="padding: 0.45rem 1rem; font-size: 0.82rem;">๐Ÿ”‘ Device &amp; Rank</button>
675
- </div>
676
-
677
- <!-- Settings Content Body -->
678
- <div style="padding: 1.4rem; overflow-y: auto; flex: 1;">
679
-
680
- <!-- SUBTAB 1: SECURITY SHIELD -->
681
- <div id="st-content-shield">
682
- <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 1rem;">
683
- <div>
684
- <h3 style="font-size: 1.15rem; color: #00d2ff; font-family: var(--font-heading); margin-bottom: 0.2rem;">
685
- ๐Ÿ›ก๏ธ BROWSER EXTENSION FIREWALL &amp; SPY DEFENDER
686
- </h3>
687
- <p style="color: var(--text-sub); font-size: 0.82rem;">
688
- Scans, isolates, and terminates school surveillance hooks, screen snipers, and keyloggers.
689
- </p>
690
- </div>
691
- <button class="btn-primary" onclick="app.purgeAllExtensionHooks()" style="background: #ff0055; border-color: #ff3377; padding: 0.6rem 1.2rem; font-size: 0.82rem;">
692
- โšก DISABLE &amp; PURGE ALL HOOKS
693
- </button>
694
- </div>
695
-
696
- <div style="display: flex; justify-content: space-between; align-items: center; background: #040e1e; border: 1px solid var(--blue-border); padding: 0.85rem 1.15rem; border-radius: 8px; margin-bottom: 1rem; flex-wrap: wrap; gap: 1rem;">
697
- <div style="display: flex; gap: 1.5rem; align-items: center;">
698
- <div>
699
- <span style="font-size: 0.7rem; color: #88aacc; text-transform: uppercase; display: block;">SHIELD STATUS</span>
700
- <strong style="color: #00ffaa; font-size: 0.92rem;">ACTIVE &amp; ENFORCING</strong>
701
- </div>
702
- <div>
703
- <span style="font-size: 0.7rem; color: #88aacc; text-transform: uppercase; display: block;">ISOLATION INTEGRITY</span>
704
- <strong style="color: #00d2ff; font-size: 0.92rem;">100% SECURE</strong>
705
- </div>
706
- </div>
707
197
 
708
- <div style="display: flex; gap: 1rem; align-items: center;">
709
- <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; color: #fff; font-size: 0.8rem; font-weight: 700;">
710
- <input type="checkbox" id="auto-shield-toggle" style="width: 18px; height: 18px; accent-color: #0088ff;" onchange="app.toggleAutoShield(this.checked)" checked>
711
- AUTO-PURGE ON VISIT
712
- </label>
713
- <button class="btn-stealth" onclick="app.refreshExtensionScan()" style="padding: 0.35rem 0.75rem; font-size: 0.75rem;">
714
- ๐Ÿ”„ RESCAN BROWSER
715
- </button>
716
- </div>
717
- </div>
718
-
719
- <!-- Surveillance Honeypot Trap -->
720
- <div style="background: #040e1e; border: 1.5px solid rgba(255, 170, 0, 0.4); padding: 0.85rem 1.15rem; border-radius: 8px; margin-bottom: 1.25rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem;">
721
- <div>
722
- <strong style="color: #ffd700; font-size: 0.92rem;">๐Ÿšจ Surveillance Trap &amp; Clean Notes Honeypot</strong>
723
- <p style="color: #88aacc; font-size: 0.78rem; margin-top: 0.2rem;">If GoGuardian, Securly, or a teacher screen grabber probes this tab, immediately halts games and swaps to educational biology notes.</p>
724
- </div>
725
- <div style="display: flex; gap: 0.75rem; align-items: center;">
726
- <label style="display: flex; align-items: center; gap: 0.4rem; cursor: pointer; color: #fff; font-size: 0.78rem; font-weight: 700;">
727
- <input type="checkbox" id="auto-decoy-toggle" style="width: 18px; height: 18px; accent-color: #ffd700;" onchange="if(window.reaperShield) window.reaperShield.setAutoDecoy(this.checked)" checked>
728
- AUTO-SWAP ON PROBE
729
- </label>
730
- <button class="btn-stealth" onclick="if(window.reaperShield) window.reaperShield.triggerSurveillanceHoneypot('GoGuardian Live Screen Sniper');" style="padding: 0.35rem 0.75rem; font-size: 0.72rem; color: #ffd700; border-color: #ffaa00;">
731
- ๐Ÿงช TEST HONEYPOT
732
- </button>
733
- </div>
734
- </div>
735
-
736
- <div style="font-size: 0.78rem; color: #88aacc; font-weight: 800; margin-bottom: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase;">
737
- DETECTED EXTENSIONS &amp; SPY PROBES:
738
- </div>
739
- <div id="shield-extensions-list" style="display: flex; flex-direction: column; gap: 0.55rem;"></div>
740
- </div>
741
-
742
- <!-- SUBTAB 2: PREFERENCES & AUDIO -->
743
- <div id="st-content-prefs" style="display: none;">
744
- <div style="display: flex; flex-direction: column; gap: 1.2rem;">
745
-
746
- <!-- Performance Turbo Mode toggle -->
747
- <div style="background: #040e1e; border: 1.5px solid rgba(0, 255, 170, 0.4); padding: 1rem 1.25rem; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
748
- <div>
749
- <strong style="color: #00ffaa; font-size: 0.95rem;">โšก Potato PC &amp; Old Laptop Turbo Mode (Auto ON)</strong>
750
- <p style="color: #88aacc; font-size: 0.8rem; margin-top: 0.2rem;">Disables 3D space particles, heavy blur filters, and 3D card tilt for max 60 FPS on Chromebooks &amp; old laptops.</p>
751
- </div>
752
- <input type="checkbox" id="perf-mode-toggle" style="width: 22px; height: 22px; cursor: pointer; accent-color: #00ffaa;" onchange="app.togglePerformanceMode()" checked>
753
- </div>
754
-
755
- <!-- Auto about:blank toggle -->
756
- <div style="background: #040e1e; border: 1px solid var(--blue-border); padding: 1rem 1.25rem; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
757
- <div>
758
- <strong style="color: #fff; font-size: 0.95rem;">๐ŸŒ Auto-Cloak in about:blank on Visit</strong>
759
- <p style="color: #88aacc; font-size: 0.8rem;">Automatically opens Reaper Hub in an undetectable about:blank tab every time you visit.</p>
760
- </div>
761
- <input type="checkbox" id="auto-aboutblank-toggle" style="width: 22px; height: 22px; cursor: pointer; accent-color: #00d2ff;" onchange="app.toggleAutoAboutBlank(this.checked)">
762
- </div>
763
-
764
- <!-- Launch in about:blank button -->
765
- <div style="background: #040e1e; border: 1px solid var(--blue-border); padding: 1rem 1.25rem; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
766
- <div>
767
- <strong style="color: #00d2ff; font-size: 0.95rem;">๐Ÿš€ Launch Site in about:blank Tab</strong>
768
- <p style="color: #88aacc; font-size: 0.8rem;">Spawn this entire portal inside a clean Google Classroom disguised about:blank window.</p>
769
- </div>
770
- <button class="btn-primary" onclick="app.openSiteAboutBlank()" style="font-size: 0.82rem; padding: 0.5rem 1.2rem;">LAUNCH CLOAK</button>
771
- </div>
772
-
773
- <!-- SFX toggle -->
774
- <div style="background: #040e1e; border: 1px solid var(--blue-border); padding: 1rem 1.25rem; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
775
- <div>
776
- <strong style="color: #fff; font-size: 0.95rem;">๐Ÿ”Š Sci-Fi Synthesizer Sound FX</strong>
777
- <p style="color: #88aacc; font-size: 0.8rem;">Play high-tech audio blips on card hover, tab clicks, and game launch.</p>
778
- </div>
779
- <button class="btn-primary" onclick="app.toggleSoundFX()" style="font-size: 0.82rem; padding: 0.5rem 1.2rem;">TOGGLE SFX</button>
780
- </div>
781
-
782
- <div style="background: #040e1e; border: 1px solid var(--blue-border); padding: 1rem 1.25rem; border-radius: 8px;">
783
- <strong style="color: #00d2ff; font-size: 0.95rem;">๐Ÿšจ Emergency Panic Cloak Hotkey</strong>
784
- <p style="color: #88aacc; font-size: 0.8rem; margin-top: 0.35rem; line-height: 1.4;">
785
- Press the <kbd style="background: #000; border: 1px solid var(--blue-bright); color: #00d2ff; padding: 0.15rem 0.45rem; border-radius: 4px; font-weight: bold;">~</kbd> (Tilde / Backquote) key at any moment to instantly disguise the site as <strong>Google Classroom</strong> with authentic assignments. Press <kbd style="background: #000; border: 1px solid var(--blue-bright); color: #00d2ff; padding: 0.15rem 0.45rem; border-radius: 4px; font-weight: bold;">~</kbd> again to exit disguise.
786
- </p>
787
- </div>
788
- </div>
789
- </div>
790
-
791
- <!-- SUBTAB 3: IDENTITY & HWID -->
792
- <div id="st-content-identity" style="display: none;">
793
- <div style="display: flex; flex-direction: column; gap: 1rem;">
794
- <div style="background: #040e1e; border: 1px solid var(--blue-border); padding: 1rem 1.25rem; border-radius: 8px;">
795
- <div style="font-size: 0.72rem; color: #88aacc; text-transform: uppercase; margin-bottom: 0.25rem;">CURRENT USERNAME</div>
796
- <div id="st-display-username" style="font-size: 1.1rem; font-weight: 800; color: #fff;">-</div>
797
- </div>
798
-
799
- <div style="background: #040e1e; border: 1px solid var(--blue-border); padding: 1rem 1.25rem; border-radius: 8px;">
800
- <div style="font-size: 0.72rem; color: #88aacc; text-transform: uppercase; margin-bottom: 0.25rem;">SECURITY ROLE / RANK</div>
801
- <div id="st-display-rank" style="font-size: 1rem; font-weight: 800; color: #00d2ff;">MEMBER</div>
802
- </div>
803
-
804
- <div style="background: #040e1e; border: 1px solid var(--blue-border); padding: 1rem 1.25rem; border-radius: 8px;">
805
- <div style="font-size: 0.72rem; color: #88aacc; text-transform: uppercase; margin-bottom: 0.25rem;">DEVICE HARDWARE ID (HWID HASH)</div>
806
- <div id="st-display-hwid" style="font-family: var(--font-mono); font-size: 0.85rem; color: #88aacc;">-</div>
807
- </div>
808
- </div>
809
- </div>
810
-
811
- </div>
198
+ <div class="footer-meta">
199
+ [MAINTENANCE ACTIVE] โ€ข PLEASE CHECK BACK SOON
812
200
  </div>
813
201
  </div>
814
202
 
815
- <!-- Toast -->
816
- <div id="toast-box" class="toast-box"></div>
817
-
818
- <!-- Scripts -->
819
- <script src="js/usernames.js"></script>
820
- <script src="js/games-data.js"></script>
821
- <script src="js/moderator.js"></script>
822
- <script src="js/visuals.js"></script>
823
- <script src="js/firebase-client.js"></script>
824
- <script src="js/app.js"></script>
825
203
  </body>
826
204
  </html>