reaper-arcade-hub 2.3.0 → 2.4.0

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.
Files changed (8) hide show
  1. package/css/styles.css +209 -0
  2. package/index.html +43 -35
  3. package/js/app.js +46 -27
  4. package/main/css/styles.css +209 -0
  5. package/main/index.html +43 -35
  6. package/main/js/app.js +46 -27
  7. package/package.json +1 -1
  8. package/verify/css/styles.css +209 -0
package/css/styles.css CHANGED
@@ -1150,3 +1150,212 @@ body.turbo-mode-active #bg-canvas {
1150
1150
  to { box-shadow: 0 0 35px rgba(255, 215, 0, 0.5); }
1151
1151
  }
1152
1152
 
1153
+ /* ==========================================
1154
+ RECODED NEXT-GEN CYBER BOOT SPLASH LOADER
1155
+ ========================================== */
1156
+ .splash-v2-container {
1157
+ max-width: 520px;
1158
+ width: 92%;
1159
+ background: rgba(4, 12, 28, 0.9);
1160
+ backdrop-filter: blur(24px);
1161
+ -webkit-backdrop-filter: blur(24px);
1162
+ border: 1.5px solid rgba(0, 210, 255, 0.4);
1163
+ border-radius: 18px;
1164
+ padding: 2.5rem 2rem;
1165
+ box-shadow: 0 0 60px rgba(0, 136, 255, 0.35), inset 0 0 30px rgba(0, 210, 255, 0.08);
1166
+ position: relative;
1167
+ overflow: hidden;
1168
+ text-align: center;
1169
+ }
1170
+
1171
+ .splash-v2-container::before {
1172
+ content: '';
1173
+ position: absolute;
1174
+ top: -50%;
1175
+ left: -50%;
1176
+ width: 200%;
1177
+ height: 200%;
1178
+ background: radial-gradient(circle, rgba(0, 210, 255, 0.08) 0%, transparent 60%);
1179
+ animation: rotateOrbital 12s linear infinite;
1180
+ pointer-events: none;
1181
+ }
1182
+
1183
+ @keyframes rotateOrbital {
1184
+ 0% { transform: rotate(0deg); }
1185
+ 100% { transform: rotate(360deg); }
1186
+ }
1187
+
1188
+ .splash-emblem-wrapper {
1189
+ position: relative;
1190
+ width: 80px;
1191
+ height: 80px;
1192
+ margin: 0 auto 1.25rem;
1193
+ display: flex;
1194
+ align-items: center;
1195
+ justify-content: center;
1196
+ }
1197
+
1198
+ .splash-emblem-ring {
1199
+ position: absolute;
1200
+ inset: 0;
1201
+ border-radius: 50%;
1202
+ border: 2px dashed rgba(0, 210, 255, 0.6);
1203
+ animation: spinRing 8s linear infinite;
1204
+ }
1205
+
1206
+ .splash-emblem-ring-inner {
1207
+ position: absolute;
1208
+ inset: 8px;
1209
+ border-radius: 50%;
1210
+ border: 2px solid rgba(0, 255, 170, 0.4);
1211
+ border-top-color: #00ffaa;
1212
+ animation: spinRingRev 4s linear infinite;
1213
+ }
1214
+
1215
+ @keyframes spinRing {
1216
+ from { transform: rotate(0deg); }
1217
+ to { transform: rotate(360deg); }
1218
+ }
1219
+
1220
+ @keyframes spinRingRev {
1221
+ from { transform: rotate(360deg); }
1222
+ to { transform: rotate(0deg); }
1223
+ }
1224
+
1225
+ .splash-emblem-core {
1226
+ width: 50px;
1227
+ height: 50px;
1228
+ border-radius: 50%;
1229
+ background: linear-gradient(135deg, #0088ff, #00ffaa);
1230
+ display: flex;
1231
+ align-items: center;
1232
+ justify-content: center;
1233
+ font-size: 1.6rem;
1234
+ box-shadow: 0 0 25px rgba(0, 210, 255, 0.8);
1235
+ animation: pulseCore 2s ease-in-out infinite alternate;
1236
+ }
1237
+
1238
+ @keyframes pulseCore {
1239
+ from { transform: scale(0.94); box-shadow: 0 0 15px rgba(0, 210, 255, 0.6); }
1240
+ to { transform: scale(1.06); box-shadow: 0 0 32px rgba(0, 255, 170, 0.9); }
1241
+ }
1242
+
1243
+ .splash-terminal-log {
1244
+ background: #020612;
1245
+ border: 1px solid rgba(0, 136, 255, 0.25);
1246
+ border-radius: 8px;
1247
+ padding: 0.65rem 1rem;
1248
+ font-family: var(--font-mono);
1249
+ font-size: 0.72rem;
1250
+ color: #88ffcc;
1251
+ text-align: left;
1252
+ min-height: 48px;
1253
+ display: flex;
1254
+ align-items: center;
1255
+ gap: 0.5rem;
1256
+ margin-bottom: 1.25rem;
1257
+ }
1258
+
1259
+ /* ==========================================
1260
+ RECODED KEY GATEKEEPER TERMINAL (NEXT-GEN)
1261
+ ========================================== */
1262
+ .key-terminal-card {
1263
+ max-width: 480px;
1264
+ width: 92%;
1265
+ background: rgba(4, 12, 28, 0.92);
1266
+ backdrop-filter: blur(28px);
1267
+ -webkit-backdrop-filter: blur(28px);
1268
+ border: 2px solid transparent;
1269
+ border-image: linear-gradient(135deg, #00d2ff, #7928ca, #ff0055) 1;
1270
+ border-radius: 20px;
1271
+ padding: 2.75rem 2.25rem;
1272
+ box-shadow: 0 0 70px rgba(0, 210, 255, 0.35), inset 0 0 35px rgba(121, 40, 202, 0.2);
1273
+ text-align: center;
1274
+ position: relative;
1275
+ animation: keyCardEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
1276
+ }
1277
+
1278
+ @keyframes keyCardEnter {
1279
+ from { opacity: 0; transform: scale(0.93) translateY(10px); }
1280
+ to { opacity: 1; transform: scale(1) translateY(0); }
1281
+ }
1282
+
1283
+ .key-input-wrapper {
1284
+ position: relative;
1285
+ display: flex;
1286
+ align-items: center;
1287
+ margin-bottom: 1rem;
1288
+ }
1289
+
1290
+ .key-input-field {
1291
+ width: 100%;
1292
+ background: #020714;
1293
+ border: 1.5px solid rgba(0, 210, 255, 0.4);
1294
+ border-radius: 10px;
1295
+ color: #fff;
1296
+ font-family: var(--font-mono);
1297
+ font-size: 0.95rem;
1298
+ font-weight: 700;
1299
+ padding: 0.85rem 5.5rem 0.85rem 1rem;
1300
+ letter-spacing: 0.06em;
1301
+ transition: all 0.25s ease;
1302
+ }
1303
+
1304
+ .key-input-field:focus {
1305
+ outline: none;
1306
+ border-color: #00ffaa;
1307
+ box-shadow: 0 0 20px rgba(0, 255, 170, 0.4);
1308
+ background: #030b1e;
1309
+ }
1310
+
1311
+ .btn-paste-key {
1312
+ position: absolute;
1313
+ right: 8px;
1314
+ background: rgba(0, 136, 255, 0.2);
1315
+ border: 1px solid rgba(0, 210, 255, 0.4);
1316
+ color: #00d2ff;
1317
+ border-radius: 6px;
1318
+ padding: 0.35rem 0.65rem;
1319
+ font-size: 0.72rem;
1320
+ font-weight: 800;
1321
+ font-family: var(--font-heading);
1322
+ cursor: pointer;
1323
+ transition: all 0.2s ease;
1324
+ }
1325
+
1326
+ .btn-paste-key:hover {
1327
+ background: #00d2ff;
1328
+ color: #02050a;
1329
+ box-shadow: 0 0 10px #00d2ff;
1330
+ }
1331
+
1332
+ .btn-unlock-hub {
1333
+ width: 100%;
1334
+ background: linear-gradient(135deg, #00d2ff, #0088ff);
1335
+ border: none;
1336
+ color: #000;
1337
+ font-family: var(--font-heading);
1338
+ font-size: 0.95rem;
1339
+ font-weight: 900;
1340
+ letter-spacing: 0.08em;
1341
+ padding: 0.95rem;
1342
+ border-radius: 10px;
1343
+ cursor: pointer;
1344
+ transition: all 0.25s ease;
1345
+ box-shadow: 0 0 25px rgba(0, 210, 255, 0.5);
1346
+ display: flex;
1347
+ align-items: center;
1348
+ justify-content: center;
1349
+ gap: 0.5rem;
1350
+ }
1351
+
1352
+ .btn-unlock-hub:hover {
1353
+ transform: translateY(-2px);
1354
+ background: linear-gradient(135deg, #00ffaa, #00d2ff);
1355
+ box-shadow: 0 0 35px rgba(0, 255, 170, 0.8);
1356
+ }
1357
+
1358
+ .btn-unlock-hub:active {
1359
+ transform: translateY(1px);
1360
+ }
1361
+
package/index.html CHANGED
@@ -18,58 +18,66 @@
18
18
  </head>
19
19
  <body>
20
20
 
21
- <!-- 10-Second Initial Splash Screen -->
22
- <div id="app-splash-screen" style="position: fixed; inset: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #061630 0%, #01040a 100%); display: flex; align-items: center; justify-content: center; z-index: 999999; flex-direction: column; padding: 1.5rem;">
23
- <div class="splash-content" style="max-width: 580px; width: 100%; text-align: center; background: rgba(3, 10, 24, 0.85); backdrop-filter: blur(16px); border: 1.5px solid rgba(0, 136, 255, 0.4); border-radius: 16px; padding: 2.5rem 2rem; box-shadow: 0 0 50px rgba(0, 136, 255, 0.25), inset 0 0 30px rgba(0, 136, 255, 0.1);">
21
+ <!-- Recoded Next-Gen Cyber Boot Splash Screen -->
22
+ <div id="app-splash-screen" style="position: fixed; inset: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #061633 0%, #010308 100%); display: flex; align-items: center; justify-content: center; z-index: 999999; flex-direction: column; padding: 1.5rem;">
23
+ <div class="splash-v2-container">
24
24
 
25
- <!-- Glowing Logo -->
26
- <div style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #0088ff, #00d2ff); box-shadow: 0 0 25px #0088ff; margin-bottom: 1rem;">
27
- <span style="font-size: 2rem;">⚡</span>
25
+ <!-- Pulsing Orbital Emblem -->
26
+ <div class="splash-emblem-wrapper">
27
+ <div class="splash-emblem-ring"></div>
28
+ <div class="splash-emblem-ring-inner"></div>
29
+ <div class="splash-emblem-core">⚡</div>
28
30
  </div>
29
31
 
30
- <h1 class="splash-logo" style="font-family: var(--font-logo); font-size: 3.2rem; font-weight: 900; color: #fff; letter-spacing: 0.12em; margin-bottom: 0.2rem; text-shadow: 0 0 20px rgba(0, 210, 255, 0.6);">reaper</h1>
31
- <div class="splash-sub" style="font-family: var(--font-heading); font-size: 0.8rem; font-weight: 800; color: #00d2ff; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.25rem;">788-GAME CORE ARCADE ENGINE</div>
32
+ <h1 class="splash-logo" style="font-family: var(--font-logo); font-size: 3.4rem; font-weight: 900; color: #fff; letter-spacing: 0.12em; margin-bottom: 0.15rem; text-shadow: 0 0 25px rgba(0, 210, 255, 0.8);">reaper</h1>
33
+ <div class="splash-sub" style="font-family: var(--font-heading); font-size: 0.78rem; font-weight: 800; color: #00d2ff; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.25rem;">TURBO ARCADE ENGINE • 788 GAMES</div>
32
34
 
33
- <!-- Live System Diagnostic Pills -->
34
- <div style="display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem;">
35
- <span style="font-size: 0.65rem; color: #00ffaa; background: #020814; border: 1px solid #00ffaa; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;">⚡ FASTLY CDN: ONLINE</span>
36
- <span style="font-size: 0.65rem; color: #00d2ff; background: #020814; border: 1px solid #00d2ff; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;">🛡️ SPY SHIELD: ARMED</span>
37
- <span style="font-size: 0.65rem; color: #ffd700; background: #020814; border: 1px solid #ffd700; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;">🎮 788 GAMES: READY</span>
35
+ <!-- Live Terminal Kernel Log -->
36
+ <div class="splash-terminal-log" id="splash-terminal-box">
37
+ <span style="color: #00ffaa; font-weight: 900;">❯</span>
38
+ <span id="splash-terminal-text" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">[BOOT] Initializing high-speed core kernel...</span>
38
39
  </div>
39
40
 
40
- <!-- Dynamic Rotating Cyber Feel-Good Quotes -->
41
- <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.3); border-radius: 8px; padding: 0.75rem 1.2rem; margin-bottom: 1.5rem;">
42
- <div id="splash-quote-text" class="splash-quote-text" style="font-size: 0.88rem; color: #e2f1ff; font-style: italic; font-weight: 500; transition: opacity 0.2s ease, transform 0.2s ease; line-height: 1.4;">"You are capable of more than you know. Lock in and dominate today."</div>
41
+ <!-- Dynamic Rotating Motivational Quotes -->
42
+ <div class="splash-quote-wrapper" style="min-height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(2, 6, 18, 0.85); border: 1px solid rgba(0, 136, 255, 0.3); border-radius: 10px; padding: 0.65rem 1rem; margin-bottom: 1.25rem;">
43
+ <div id="splash-quote-text" class="splash-quote-text" style="font-size: 0.84rem; color: #e2f1ff; font-style: italic; font-weight: 500; transition: all 0.25s ease; line-height: 1.4;">"Lock in and dominate today. 788 games ready with zero lag."</div>
43
44
  </div>
44
45
 
45
- <div class="splash-progress-track" style="height: 8px; background: #020714; border: 1px solid var(--blue-border); border-radius: 6px; overflow: hidden; margin-bottom: 0.75rem;">
46
- <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>
46
+ <!-- Progress Track -->
47
+ <div class="splash-progress-track" style="height: 9px; background: #020714; border: 1px solid rgba(0, 210, 255, 0.4); border-radius: 8px; overflow: hidden; margin-bottom: 0.75rem; box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);">
48
+ <div id="splash-progress-bar" class="splash-progress-bar" style="height: 100%; width: 0%; background: linear-gradient(90deg, #0088ff, #00d2ff, #00ffaa); border-radius: 8px; transition: width 0.08s linear; box-shadow: 0 0 16px #00d2ff;"></div>
47
49
  </div>
48
50
  <div id="splash-status-text" class="splash-status-text" style="font-family: var(--font-mono); font-size: 0.75rem; color: #88aacc; font-weight: 700;">[0%] INITIALIZING REAPER CORE...</div>
49
51
  </div>
50
52
  </div>
51
53
 
52
- <!-- Key Gatekeeper Modal (In-Page Clean UI) -->
53
- <div id="key-gate-modal" class="admin-modal" style="z-index: 99998; background: radial-gradient(circle at center, #07152b 0%, #02050a 100%);">
54
- <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;">
55
- <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>
56
- <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>
57
- <p style="color: #adc4e2; font-size: 0.88rem; margin-bottom: 1.5rem; line-height: 1.6;">
58
- To protect server stability, Reaper requires an active access key or session token. Enter your key directly below or verify on the gateway.
54
+ <!-- Recoded Next-Gen Key Gatekeeper Terminal -->
55
+ <div id="key-gate-modal" class="admin-modal" style="z-index: 99998; background: radial-gradient(circle at center, rgba(6, 20, 48, 0.95) 0%, rgba(1, 3, 8, 0.98) 100%);">
56
+ <div class="key-terminal-card">
57
+ <div style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #00d2ff, #7928ca); box-shadow: 0 0 25px rgba(0, 210, 255, 0.7); margin-bottom: 0.85rem;">
58
+ <span style="font-size: 1.8rem;">🔒</span>
59
+ </div>
60
+
61
+ <div style="font-family: var(--font-logo); font-size: 3.2rem; color: #fff; font-weight: 900; margin-bottom: 0.15rem; letter-spacing: 0.1em; text-shadow: 0 0 25px rgba(0, 210, 255, 0.6);">reaper</div>
62
+ <div style="color: #00ffaa; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1.25rem;">ACCESS AUTHORIZATION REQUIRED</div>
63
+
64
+ <p style="color: #adc4e2; font-size: 0.86rem; margin-bottom: 1.5rem; line-height: 1.6;">
65
+ Enter your session key or master owner token (<code style="color: #ffd700; background: #020714; padding: 2px 6px; border-radius: 4px; font-weight: 800;">679-102</code>) to unlock the full 788-game core hub.
59
66
  </p>
60
67
 
61
- <!-- In-Page Direct Key & Master Token Input Box -->
62
- <div style="background: #040c18; border: 1.5px solid var(--blue-border); border-radius: 8px; padding: 1.2rem; text-align: left; margin-bottom: 1.25rem;">
63
- <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>
64
- <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()">
65
- <button class="btn-primary" style="width: 100%; justify-content: center; padding: 0.75rem;" onclick="app.submitGateToken()">
66
- UNLOCK & ENTER REAPER
67
- </button>
68
+ <!-- Key Input Box with Built-In Paste Button -->
69
+ <div class="key-input-wrapper">
70
+ <input type="text" id="gate-token-input" class="key-input-field" placeholder="REAPER-KEY OR 679-102" autocomplete="off" onkeydown="if(event.key==='Enter') app.submitGateToken()">
71
+ <button type="button" class="btn-paste-key" onclick="app.pasteKeyFromClipboard()">📋 PASTE</button>
68
72
  </div>
69
73
 
70
- <div>
71
- <button class="btn-stealth" style="width: 100%; justify-content: center; font-size: 0.8rem;" onclick="app.redirectToVerify()">
72
- OPEN VERIFICATION GATEWAY PAGE ➔
74
+ <button class="btn-unlock-hub" onclick="app.submitGateToken()">
75
+ <span>⚡ UNLOCK CORE HUB</span>
76
+ </button>
77
+
78
+ <div style="margin-top: 1.25rem; display: flex; justify-content: center; gap: 0.75rem;">
79
+ <button class="btn-stealth" style="font-size: 0.78rem; color: #88ccff;" onclick="app.redirectToVerify()">
80
+ 🔑 Need an access key? Verify at Gateway ➔
73
81
  </button>
74
82
  </div>
75
83
  </div>
package/js/app.js CHANGED
@@ -1,6 +1,6 @@
1
- // REAPER HUB - Core Engine (v2.3.0 Turbo Edition)
2
- window.REAPER_VERSION = "2.3.0";
3
- window.REAPER_LATEST_URL = "https://unpkg.com/reaper-arcade-hub@2.3.0/main/index.html";
1
+ // REAPER HUB - Core Engine (v2.4.0 Next-Gen UI & Instant Auto-Redirect)
2
+ window.REAPER_VERSION = "2.4.0";
3
+ window.REAPER_LATEST_URL = "https://unpkg.com/reaper-arcade-hub@2.4.0/main/index.html";
4
4
 
5
5
  class ReaperHubApp {
6
6
  constructor() {
@@ -530,6 +530,21 @@ class ReaperHubApp {
530
530
  alert("[ACCESS DENIED]\nInvalid, exhausted, or expired Key/Token. Please obtain a valid key from the Owner.");
531
531
  }
532
532
 
533
+ async pasteKeyFromClipboard() {
534
+ const input = document.getElementById('gate-token-input');
535
+ if (!input) return;
536
+ try {
537
+ const text = await navigator.clipboard.readText();
538
+ if (text) {
539
+ input.value = text.trim();
540
+ this.submitGateToken();
541
+ }
542
+ } catch (e) {
543
+ input.focus();
544
+ this.showToast("Paste manually or press Enter.");
545
+ }
546
+ }
547
+
533
548
  // ==========================================
534
549
  // CUSTOM KEY CREATION WITH MAX USES & DELETION
535
550
  // ==========================================
@@ -956,30 +971,27 @@ class ReaperHubApp {
956
971
  if (!modal) {
957
972
  modal = document.createElement('div');
958
973
  modal.id = 'version-upgrade-modal';
959
- modal.style.cssText = 'position: fixed; inset: 0; background: rgba(2, 5, 10, 0.97); z-index: 9999999999; display: flex; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; font-family: var(--font-heading); backdrop-filter: blur(12px);';
974
+ modal.style.cssText = 'position: fixed; inset: 0; background: rgba(2, 5, 10, 0.98); z-index: 9999999999; display: flex; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; font-family: var(--font-heading); backdrop-filter: blur(20px);';
960
975
  document.body.appendChild(modal);
961
976
  }
962
977
 
963
978
  modal.innerHTML = `
964
- <div style="max-width: 500px; background: #040e1c; border: 2px solid #00d2ff; border-radius: 12px; padding: 2.5rem 2rem; box-shadow: 0 0 50px rgba(0, 210, 255, 0.4);">
965
- <div style="font-size: 3rem; margin-bottom: 0.5rem;">⚡</div>
966
- <div style="font-size: 1.4rem; font-weight: 900; color: #00d2ff; letter-spacing: 0.08em; margin-bottom: 0.5rem;">NEW VERSION ACTIVE</div>
979
+ <div style="max-width: 480px; background: #040e1c; border: 2px solid #00ffaa; border-radius: 16px; padding: 2.5rem 2rem; box-shadow: 0 0 60px rgba(0, 255, 170, 0.5);">
980
+ <div style="font-size: 3.5rem; margin-bottom: 0.5rem;">⚡</div>
981
+ <div style="font-size: 1.5rem; font-weight: 900; color: #00ffaa; letter-spacing: 0.08em; margin-bottom: 0.5rem;">UPGRADING TO NEW VERSION</div>
967
982
  <p style="color: #adc4e2; font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.25rem;">
968
- You are currently visiting an older version of Reaper Hub (<strong style="color: #ff5555;">v${currentVer}</strong>).<br>
969
- The new upgraded site is live at <strong style="color: #00ffaa;">v${latestVer}</strong> with zero lag and fixes.
983
+ You were on an older site build (<strong style="color: #ff5555;">v${currentVer}</strong>).<br>
984
+ Bringing you to the new high-speed version <strong style="color: #00ffaa;">v${latestVer}</strong> right now...
970
985
  </p>
971
- <div style="color: #00ffaa; font-size: 0.85rem; font-weight: 800; margin-bottom: 1.5rem; font-family: var(--font-mono);">
972
- 🚀 BRINGING YOU TO THE NEW SITE IN 2 SECONDS...
986
+ <div style="color: #00d2ff; font-size: 0.88rem; font-weight: 800; font-family: var(--font-mono);">
987
+ 🚀 REDIRECTING NOW...
973
988
  </div>
974
- <button class="btn-primary" style="width: 100%; justify-content: center; padding: 0.85rem; font-size: 0.9rem; background: #00d2ff; color: #000; font-weight: 900;" onclick="window.location.replace('${latestUrl}')">
975
- OPEN NEW SITE NOW ➔
976
- </button>
977
989
  </div>
978
990
  `;
979
991
 
980
992
  setTimeout(() => {
981
993
  window.location.replace(latestUrl);
982
- }, 2000);
994
+ }, 400);
983
995
  }
984
996
 
985
997
  // Root Owner Version Control Broadcast
@@ -1227,31 +1239,38 @@ class ReaperHubApp {
1227
1239
  }
1228
1240
  }, 1100);
1229
1241
 
1242
+ const terminalText = document.getElementById('splash-terminal-text');
1243
+
1230
1244
  let progress = 0;
1231
- const interval = 100;
1245
+ const interval = 18; // Super snappy 1.8-second cyber boot sequence
1232
1246
 
1233
1247
  const timer = setInterval(() => {
1234
1248
  progress += 1;
1235
1249
  bar.style.width = `${progress}%`;
1236
1250
 
1237
- if (progress < 20) {
1238
- if (status) status.textContent = `[${progress}%] INITIALIZING REAPER CORE...`;
1239
- } else if (progress < 45) {
1251
+ if (progress < 25) {
1252
+ if (status) status.textContent = `[${progress}%] INITIALIZING REAPER KERNEL...`;
1253
+ if (terminalText) terminalText.textContent = "[KERNEL] WebGL 2.0 & Canvas Accelerator Active";
1254
+ } else if (progress < 50) {
1240
1255
  if (status) status.textContent = `[${progress}%] CONNECTING REALTIME FIREBASE DB...`;
1241
- } else if (progress < 70) {
1242
- if (status) status.textContent = `[${progress}%] UNBLOCKING FASTLY CDN ASSETS...`;
1243
- } else if (progress < 90) {
1244
- if (status) status.textContent = `[${progress}%] DECRYPTING 788 GAME MANIFESTS...`;
1245
- } else if (progress < 100) {
1246
- if (status) status.textContent = `[${progress}%] PREPARING STARFIELD ENGINE...`;
1256
+ if (terminalText) terminalText.textContent = "[DATABASE] Firebase Realtime Sync Established";
1257
+ } else if (progress < 75) {
1258
+ if (status) status.textContent = `[${progress}%] UNBLOCKING GITHUB PAGES CDN...`;
1259
+ if (terminalText) terminalText.textContent = "[CDN] High-Speed GitHub Pages Stream Ready";
1260
+ } else if (progress < 95) {
1261
+ if (status) status.textContent = `[${progress}%] TURBO PRE-CACHING 788 GAMES...`;
1262
+ if (terminalText) terminalText.textContent = "[TURBO ENGINE] 788 Games Cached & Ready (60 FPS)";
1247
1263
  } else {
1248
1264
  if (status) status.textContent = `[100%] ALL SYSTEMS ONLINE`;
1265
+ if (terminalText) terminalText.textContent = "[BOOT] Core Online. Welcome to Reaper Hub!";
1249
1266
  clearInterval(timer);
1250
1267
  clearInterval(quoteInterval);
1251
1268
  setTimeout(() => {
1269
+ splash.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
1252
1270
  splash.style.opacity = '0';
1253
- setTimeout(() => { splash.style.display = 'none'; }, 600);
1254
- }, 400);
1271
+ splash.style.transform = 'scale(1.03)';
1272
+ setTimeout(() => { splash.style.display = 'none'; }, 400);
1273
+ }, 200);
1255
1274
  }
1256
1275
  }, interval);
1257
1276
  }
package/main/css/styles.css CHANGED
@@ -1150,3 +1150,212 @@ body.turbo-mode-active #bg-canvas {
1150
1150
  to { box-shadow: 0 0 35px rgba(255, 215, 0, 0.5); }
1151
1151
  }
1152
1152
 
1153
+ /* ==========================================
1154
+ RECODED NEXT-GEN CYBER BOOT SPLASH LOADER
1155
+ ========================================== */
1156
+ .splash-v2-container {
1157
+ max-width: 520px;
1158
+ width: 92%;
1159
+ background: rgba(4, 12, 28, 0.9);
1160
+ backdrop-filter: blur(24px);
1161
+ -webkit-backdrop-filter: blur(24px);
1162
+ border: 1.5px solid rgba(0, 210, 255, 0.4);
1163
+ border-radius: 18px;
1164
+ padding: 2.5rem 2rem;
1165
+ box-shadow: 0 0 60px rgba(0, 136, 255, 0.35), inset 0 0 30px rgba(0, 210, 255, 0.08);
1166
+ position: relative;
1167
+ overflow: hidden;
1168
+ text-align: center;
1169
+ }
1170
+
1171
+ .splash-v2-container::before {
1172
+ content: '';
1173
+ position: absolute;
1174
+ top: -50%;
1175
+ left: -50%;
1176
+ width: 200%;
1177
+ height: 200%;
1178
+ background: radial-gradient(circle, rgba(0, 210, 255, 0.08) 0%, transparent 60%);
1179
+ animation: rotateOrbital 12s linear infinite;
1180
+ pointer-events: none;
1181
+ }
1182
+
1183
+ @keyframes rotateOrbital {
1184
+ 0% { transform: rotate(0deg); }
1185
+ 100% { transform: rotate(360deg); }
1186
+ }
1187
+
1188
+ .splash-emblem-wrapper {
1189
+ position: relative;
1190
+ width: 80px;
1191
+ height: 80px;
1192
+ margin: 0 auto 1.25rem;
1193
+ display: flex;
1194
+ align-items: center;
1195
+ justify-content: center;
1196
+ }
1197
+
1198
+ .splash-emblem-ring {
1199
+ position: absolute;
1200
+ inset: 0;
1201
+ border-radius: 50%;
1202
+ border: 2px dashed rgba(0, 210, 255, 0.6);
1203
+ animation: spinRing 8s linear infinite;
1204
+ }
1205
+
1206
+ .splash-emblem-ring-inner {
1207
+ position: absolute;
1208
+ inset: 8px;
1209
+ border-radius: 50%;
1210
+ border: 2px solid rgba(0, 255, 170, 0.4);
1211
+ border-top-color: #00ffaa;
1212
+ animation: spinRingRev 4s linear infinite;
1213
+ }
1214
+
1215
+ @keyframes spinRing {
1216
+ from { transform: rotate(0deg); }
1217
+ to { transform: rotate(360deg); }
1218
+ }
1219
+
1220
+ @keyframes spinRingRev {
1221
+ from { transform: rotate(360deg); }
1222
+ to { transform: rotate(0deg); }
1223
+ }
1224
+
1225
+ .splash-emblem-core {
1226
+ width: 50px;
1227
+ height: 50px;
1228
+ border-radius: 50%;
1229
+ background: linear-gradient(135deg, #0088ff, #00ffaa);
1230
+ display: flex;
1231
+ align-items: center;
1232
+ justify-content: center;
1233
+ font-size: 1.6rem;
1234
+ box-shadow: 0 0 25px rgba(0, 210, 255, 0.8);
1235
+ animation: pulseCore 2s ease-in-out infinite alternate;
1236
+ }
1237
+
1238
+ @keyframes pulseCore {
1239
+ from { transform: scale(0.94); box-shadow: 0 0 15px rgba(0, 210, 255, 0.6); }
1240
+ to { transform: scale(1.06); box-shadow: 0 0 32px rgba(0, 255, 170, 0.9); }
1241
+ }
1242
+
1243
+ .splash-terminal-log {
1244
+ background: #020612;
1245
+ border: 1px solid rgba(0, 136, 255, 0.25);
1246
+ border-radius: 8px;
1247
+ padding: 0.65rem 1rem;
1248
+ font-family: var(--font-mono);
1249
+ font-size: 0.72rem;
1250
+ color: #88ffcc;
1251
+ text-align: left;
1252
+ min-height: 48px;
1253
+ display: flex;
1254
+ align-items: center;
1255
+ gap: 0.5rem;
1256
+ margin-bottom: 1.25rem;
1257
+ }
1258
+
1259
+ /* ==========================================
1260
+ RECODED KEY GATEKEEPER TERMINAL (NEXT-GEN)
1261
+ ========================================== */
1262
+ .key-terminal-card {
1263
+ max-width: 480px;
1264
+ width: 92%;
1265
+ background: rgba(4, 12, 28, 0.92);
1266
+ backdrop-filter: blur(28px);
1267
+ -webkit-backdrop-filter: blur(28px);
1268
+ border: 2px solid transparent;
1269
+ border-image: linear-gradient(135deg, #00d2ff, #7928ca, #ff0055) 1;
1270
+ border-radius: 20px;
1271
+ padding: 2.75rem 2.25rem;
1272
+ box-shadow: 0 0 70px rgba(0, 210, 255, 0.35), inset 0 0 35px rgba(121, 40, 202, 0.2);
1273
+ text-align: center;
1274
+ position: relative;
1275
+ animation: keyCardEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
1276
+ }
1277
+
1278
+ @keyframes keyCardEnter {
1279
+ from { opacity: 0; transform: scale(0.93) translateY(10px); }
1280
+ to { opacity: 1; transform: scale(1) translateY(0); }
1281
+ }
1282
+
1283
+ .key-input-wrapper {
1284
+ position: relative;
1285
+ display: flex;
1286
+ align-items: center;
1287
+ margin-bottom: 1rem;
1288
+ }
1289
+
1290
+ .key-input-field {
1291
+ width: 100%;
1292
+ background: #020714;
1293
+ border: 1.5px solid rgba(0, 210, 255, 0.4);
1294
+ border-radius: 10px;
1295
+ color: #fff;
1296
+ font-family: var(--font-mono);
1297
+ font-size: 0.95rem;
1298
+ font-weight: 700;
1299
+ padding: 0.85rem 5.5rem 0.85rem 1rem;
1300
+ letter-spacing: 0.06em;
1301
+ transition: all 0.25s ease;
1302
+ }
1303
+
1304
+ .key-input-field:focus {
1305
+ outline: none;
1306
+ border-color: #00ffaa;
1307
+ box-shadow: 0 0 20px rgba(0, 255, 170, 0.4);
1308
+ background: #030b1e;
1309
+ }
1310
+
1311
+ .btn-paste-key {
1312
+ position: absolute;
1313
+ right: 8px;
1314
+ background: rgba(0, 136, 255, 0.2);
1315
+ border: 1px solid rgba(0, 210, 255, 0.4);
1316
+ color: #00d2ff;
1317
+ border-radius: 6px;
1318
+ padding: 0.35rem 0.65rem;
1319
+ font-size: 0.72rem;
1320
+ font-weight: 800;
1321
+ font-family: var(--font-heading);
1322
+ cursor: pointer;
1323
+ transition: all 0.2s ease;
1324
+ }
1325
+
1326
+ .btn-paste-key:hover {
1327
+ background: #00d2ff;
1328
+ color: #02050a;
1329
+ box-shadow: 0 0 10px #00d2ff;
1330
+ }
1331
+
1332
+ .btn-unlock-hub {
1333
+ width: 100%;
1334
+ background: linear-gradient(135deg, #00d2ff, #0088ff);
1335
+ border: none;
1336
+ color: #000;
1337
+ font-family: var(--font-heading);
1338
+ font-size: 0.95rem;
1339
+ font-weight: 900;
1340
+ letter-spacing: 0.08em;
1341
+ padding: 0.95rem;
1342
+ border-radius: 10px;
1343
+ cursor: pointer;
1344
+ transition: all 0.25s ease;
1345
+ box-shadow: 0 0 25px rgba(0, 210, 255, 0.5);
1346
+ display: flex;
1347
+ align-items: center;
1348
+ justify-content: center;
1349
+ gap: 0.5rem;
1350
+ }
1351
+
1352
+ .btn-unlock-hub:hover {
1353
+ transform: translateY(-2px);
1354
+ background: linear-gradient(135deg, #00ffaa, #00d2ff);
1355
+ box-shadow: 0 0 35px rgba(0, 255, 170, 0.8);
1356
+ }
1357
+
1358
+ .btn-unlock-hub:active {
1359
+ transform: translateY(1px);
1360
+ }
1361
+
package/main/index.html CHANGED
@@ -18,58 +18,66 @@
18
18
  </head>
19
19
  <body>
20
20
 
21
- <!-- 10-Second Initial Splash Screen -->
22
- <div id="app-splash-screen" style="position: fixed; inset: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #061630 0%, #01040a 100%); display: flex; align-items: center; justify-content: center; z-index: 999999; flex-direction: column; padding: 1.5rem;">
23
- <div class="splash-content" style="max-width: 580px; width: 100%; text-align: center; background: rgba(3, 10, 24, 0.85); backdrop-filter: blur(16px); border: 1.5px solid rgba(0, 136, 255, 0.4); border-radius: 16px; padding: 2.5rem 2rem; box-shadow: 0 0 50px rgba(0, 136, 255, 0.25), inset 0 0 30px rgba(0, 136, 255, 0.1);">
21
+ <!-- Recoded Next-Gen Cyber Boot Splash Screen -->
22
+ <div id="app-splash-screen" style="position: fixed; inset: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #061633 0%, #010308 100%); display: flex; align-items: center; justify-content: center; z-index: 999999; flex-direction: column; padding: 1.5rem;">
23
+ <div class="splash-v2-container">
24
24
 
25
- <!-- Glowing Logo -->
26
- <div style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #0088ff, #00d2ff); box-shadow: 0 0 25px #0088ff; margin-bottom: 1rem;">
27
- <span style="font-size: 2rem;">⚡</span>
25
+ <!-- Pulsing Orbital Emblem -->
26
+ <div class="splash-emblem-wrapper">
27
+ <div class="splash-emblem-ring"></div>
28
+ <div class="splash-emblem-ring-inner"></div>
29
+ <div class="splash-emblem-core">⚡</div>
28
30
  </div>
29
31
 
30
- <h1 class="splash-logo" style="font-family: var(--font-logo); font-size: 3.2rem; font-weight: 900; color: #fff; letter-spacing: 0.12em; margin-bottom: 0.2rem; text-shadow: 0 0 20px rgba(0, 210, 255, 0.6);">reaper</h1>
31
- <div class="splash-sub" style="font-family: var(--font-heading); font-size: 0.8rem; font-weight: 800; color: #00d2ff; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.25rem;">788-GAME CORE ARCADE ENGINE</div>
32
+ <h1 class="splash-logo" style="font-family: var(--font-logo); font-size: 3.4rem; font-weight: 900; color: #fff; letter-spacing: 0.12em; margin-bottom: 0.15rem; text-shadow: 0 0 25px rgba(0, 210, 255, 0.8);">reaper</h1>
33
+ <div class="splash-sub" style="font-family: var(--font-heading); font-size: 0.78rem; font-weight: 800; color: #00d2ff; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.25rem;">TURBO ARCADE ENGINE • 788 GAMES</div>
32
34
 
33
- <!-- Live System Diagnostic Pills -->
34
- <div style="display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem;">
35
- <span style="font-size: 0.65rem; color: #00ffaa; background: #020814; border: 1px solid #00ffaa; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;">⚡ FASTLY CDN: ONLINE</span>
36
- <span style="font-size: 0.65rem; color: #00d2ff; background: #020814; border: 1px solid #00d2ff; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;">🛡️ SPY SHIELD: ARMED</span>
37
- <span style="font-size: 0.65rem; color: #ffd700; background: #020814; border: 1px solid #ffd700; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;">🎮 788 GAMES: READY</span>
35
+ <!-- Live Terminal Kernel Log -->
36
+ <div class="splash-terminal-log" id="splash-terminal-box">
37
+ <span style="color: #00ffaa; font-weight: 900;">❯</span>
38
+ <span id="splash-terminal-text" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">[BOOT] Initializing high-speed core kernel...</span>
38
39
  </div>
39
40
 
40
- <!-- Dynamic Rotating Cyber Feel-Good Quotes -->
41
- <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.3); border-radius: 8px; padding: 0.75rem 1.2rem; margin-bottom: 1.5rem;">
42
- <div id="splash-quote-text" class="splash-quote-text" style="font-size: 0.88rem; color: #e2f1ff; font-style: italic; font-weight: 500; transition: opacity 0.2s ease, transform 0.2s ease; line-height: 1.4;">"You are capable of more than you know. Lock in and dominate today."</div>
41
+ <!-- Dynamic Rotating Motivational Quotes -->
42
+ <div class="splash-quote-wrapper" style="min-height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(2, 6, 18, 0.85); border: 1px solid rgba(0, 136, 255, 0.3); border-radius: 10px; padding: 0.65rem 1rem; margin-bottom: 1.25rem;">
43
+ <div id="splash-quote-text" class="splash-quote-text" style="font-size: 0.84rem; color: #e2f1ff; font-style: italic; font-weight: 500; transition: all 0.25s ease; line-height: 1.4;">"Lock in and dominate today. 788 games ready with zero lag."</div>
43
44
  </div>
44
45
 
45
- <div class="splash-progress-track" style="height: 8px; background: #020714; border: 1px solid var(--blue-border); border-radius: 6px; overflow: hidden; margin-bottom: 0.75rem;">
46
- <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>
46
+ <!-- Progress Track -->
47
+ <div class="splash-progress-track" style="height: 9px; background: #020714; border: 1px solid rgba(0, 210, 255, 0.4); border-radius: 8px; overflow: hidden; margin-bottom: 0.75rem; box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);">
48
+ <div id="splash-progress-bar" class="splash-progress-bar" style="height: 100%; width: 0%; background: linear-gradient(90deg, #0088ff, #00d2ff, #00ffaa); border-radius: 8px; transition: width 0.08s linear; box-shadow: 0 0 16px #00d2ff;"></div>
47
49
  </div>
48
50
  <div id="splash-status-text" class="splash-status-text" style="font-family: var(--font-mono); font-size: 0.75rem; color: #88aacc; font-weight: 700;">[0%] INITIALIZING REAPER CORE...</div>
49
51
  </div>
50
52
  </div>
51
53
 
52
- <!-- Key Gatekeeper Modal (In-Page Clean UI) -->
53
- <div id="key-gate-modal" class="admin-modal" style="z-index: 99998; background: radial-gradient(circle at center, #07152b 0%, #02050a 100%);">
54
- <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;">
55
- <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>
56
- <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>
57
- <p style="color: #adc4e2; font-size: 0.88rem; margin-bottom: 1.5rem; line-height: 1.6;">
58
- To protect server stability, Reaper requires an active access key or session token. Enter your key directly below or verify on the gateway.
54
+ <!-- Recoded Next-Gen Key Gatekeeper Terminal -->
55
+ <div id="key-gate-modal" class="admin-modal" style="z-index: 99998; background: radial-gradient(circle at center, rgba(6, 20, 48, 0.95) 0%, rgba(1, 3, 8, 0.98) 100%);">
56
+ <div class="key-terminal-card">
57
+ <div style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #00d2ff, #7928ca); box-shadow: 0 0 25px rgba(0, 210, 255, 0.7); margin-bottom: 0.85rem;">
58
+ <span style="font-size: 1.8rem;">🔒</span>
59
+ </div>
60
+
61
+ <div style="font-family: var(--font-logo); font-size: 3.2rem; color: #fff; font-weight: 900; margin-bottom: 0.15rem; letter-spacing: 0.1em; text-shadow: 0 0 25px rgba(0, 210, 255, 0.6);">reaper</div>
62
+ <div style="color: #00ffaa; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1.25rem;">ACCESS AUTHORIZATION REQUIRED</div>
63
+
64
+ <p style="color: #adc4e2; font-size: 0.86rem; margin-bottom: 1.5rem; line-height: 1.6;">
65
+ Enter your session key or master owner token (<code style="color: #ffd700; background: #020714; padding: 2px 6px; border-radius: 4px; font-weight: 800;">679-102</code>) to unlock the full 788-game core hub.
59
66
  </p>
60
67
 
61
- <!-- In-Page Direct Key & Master Token Input Box -->
62
- <div style="background: #040c18; border: 1.5px solid var(--blue-border); border-radius: 8px; padding: 1.2rem; text-align: left; margin-bottom: 1.25rem;">
63
- <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>
64
- <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()">
65
- <button class="btn-primary" style="width: 100%; justify-content: center; padding: 0.75rem;" onclick="app.submitGateToken()">
66
- UNLOCK & ENTER REAPER
67
- </button>
68
+ <!-- Key Input Box with Built-In Paste Button -->
69
+ <div class="key-input-wrapper">
70
+ <input type="text" id="gate-token-input" class="key-input-field" placeholder="REAPER-KEY OR 679-102" autocomplete="off" onkeydown="if(event.key==='Enter') app.submitGateToken()">
71
+ <button type="button" class="btn-paste-key" onclick="app.pasteKeyFromClipboard()">📋 PASTE</button>
68
72
  </div>
69
73
 
70
- <div>
71
- <button class="btn-stealth" style="width: 100%; justify-content: center; font-size: 0.8rem;" onclick="app.redirectToVerify()">
72
- OPEN VERIFICATION GATEWAY PAGE ➔
74
+ <button class="btn-unlock-hub" onclick="app.submitGateToken()">
75
+ <span>⚡ UNLOCK CORE HUB</span>
76
+ </button>
77
+
78
+ <div style="margin-top: 1.25rem; display: flex; justify-content: center; gap: 0.75rem;">
79
+ <button class="btn-stealth" style="font-size: 0.78rem; color: #88ccff;" onclick="app.redirectToVerify()">
80
+ 🔑 Need an access key? Verify at Gateway ➔
73
81
  </button>
74
82
  </div>
75
83
  </div>
package/main/js/app.js CHANGED
@@ -1,6 +1,6 @@
1
- // REAPER HUB - Core Engine (v2.3.0 Turbo Edition)
2
- window.REAPER_VERSION = "2.3.0";
3
- window.REAPER_LATEST_URL = "https://unpkg.com/reaper-arcade-hub@2.3.0/main/index.html";
1
+ // REAPER HUB - Core Engine (v2.4.0 Next-Gen UI & Instant Auto-Redirect)
2
+ window.REAPER_VERSION = "2.4.0";
3
+ window.REAPER_LATEST_URL = "https://unpkg.com/reaper-arcade-hub@2.4.0/main/index.html";
4
4
 
5
5
  class ReaperHubApp {
6
6
  constructor() {
@@ -530,6 +530,21 @@ class ReaperHubApp {
530
530
  alert("[ACCESS DENIED]\nInvalid, exhausted, or expired Key/Token. Please obtain a valid key from the Owner.");
531
531
  }
532
532
 
533
+ async pasteKeyFromClipboard() {
534
+ const input = document.getElementById('gate-token-input');
535
+ if (!input) return;
536
+ try {
537
+ const text = await navigator.clipboard.readText();
538
+ if (text) {
539
+ input.value = text.trim();
540
+ this.submitGateToken();
541
+ }
542
+ } catch (e) {
543
+ input.focus();
544
+ this.showToast("Paste manually or press Enter.");
545
+ }
546
+ }
547
+
533
548
  // ==========================================
534
549
  // CUSTOM KEY CREATION WITH MAX USES & DELETION
535
550
  // ==========================================
@@ -956,30 +971,27 @@ class ReaperHubApp {
956
971
  if (!modal) {
957
972
  modal = document.createElement('div');
958
973
  modal.id = 'version-upgrade-modal';
959
- modal.style.cssText = 'position: fixed; inset: 0; background: rgba(2, 5, 10, 0.97); z-index: 9999999999; display: flex; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; font-family: var(--font-heading); backdrop-filter: blur(12px);';
974
+ modal.style.cssText = 'position: fixed; inset: 0; background: rgba(2, 5, 10, 0.98); z-index: 9999999999; display: flex; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; font-family: var(--font-heading); backdrop-filter: blur(20px);';
960
975
  document.body.appendChild(modal);
961
976
  }
962
977
 
963
978
  modal.innerHTML = `
964
- <div style="max-width: 500px; background: #040e1c; border: 2px solid #00d2ff; border-radius: 12px; padding: 2.5rem 2rem; box-shadow: 0 0 50px rgba(0, 210, 255, 0.4);">
965
- <div style="font-size: 3rem; margin-bottom: 0.5rem;">⚡</div>
966
- <div style="font-size: 1.4rem; font-weight: 900; color: #00d2ff; letter-spacing: 0.08em; margin-bottom: 0.5rem;">NEW VERSION ACTIVE</div>
979
+ <div style="max-width: 480px; background: #040e1c; border: 2px solid #00ffaa; border-radius: 16px; padding: 2.5rem 2rem; box-shadow: 0 0 60px rgba(0, 255, 170, 0.5);">
980
+ <div style="font-size: 3.5rem; margin-bottom: 0.5rem;">⚡</div>
981
+ <div style="font-size: 1.5rem; font-weight: 900; color: #00ffaa; letter-spacing: 0.08em; margin-bottom: 0.5rem;">UPGRADING TO NEW VERSION</div>
967
982
  <p style="color: #adc4e2; font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.25rem;">
968
- You are currently visiting an older version of Reaper Hub (<strong style="color: #ff5555;">v${currentVer}</strong>).<br>
969
- The new upgraded site is live at <strong style="color: #00ffaa;">v${latestVer}</strong> with zero lag and fixes.
983
+ You were on an older site build (<strong style="color: #ff5555;">v${currentVer}</strong>).<br>
984
+ Bringing you to the new high-speed version <strong style="color: #00ffaa;">v${latestVer}</strong> right now...
970
985
  </p>
971
- <div style="color: #00ffaa; font-size: 0.85rem; font-weight: 800; margin-bottom: 1.5rem; font-family: var(--font-mono);">
972
- 🚀 BRINGING YOU TO THE NEW SITE IN 2 SECONDS...
986
+ <div style="color: #00d2ff; font-size: 0.88rem; font-weight: 800; font-family: var(--font-mono);">
987
+ 🚀 REDIRECTING NOW...
973
988
  </div>
974
- <button class="btn-primary" style="width: 100%; justify-content: center; padding: 0.85rem; font-size: 0.9rem; background: #00d2ff; color: #000; font-weight: 900;" onclick="window.location.replace('${latestUrl}')">
975
- OPEN NEW SITE NOW ➔
976
- </button>
977
989
  </div>
978
990
  `;
979
991
 
980
992
  setTimeout(() => {
981
993
  window.location.replace(latestUrl);
982
- }, 2000);
994
+ }, 400);
983
995
  }
984
996
 
985
997
  // Root Owner Version Control Broadcast
@@ -1227,31 +1239,38 @@ class ReaperHubApp {
1227
1239
  }
1228
1240
  }, 1100);
1229
1241
 
1242
+ const terminalText = document.getElementById('splash-terminal-text');
1243
+
1230
1244
  let progress = 0;
1231
- const interval = 100;
1245
+ const interval = 18; // Super snappy 1.8-second cyber boot sequence
1232
1246
 
1233
1247
  const timer = setInterval(() => {
1234
1248
  progress += 1;
1235
1249
  bar.style.width = `${progress}%`;
1236
1250
 
1237
- if (progress < 20) {
1238
- if (status) status.textContent = `[${progress}%] INITIALIZING REAPER CORE...`;
1239
- } else if (progress < 45) {
1251
+ if (progress < 25) {
1252
+ if (status) status.textContent = `[${progress}%] INITIALIZING REAPER KERNEL...`;
1253
+ if (terminalText) terminalText.textContent = "[KERNEL] WebGL 2.0 & Canvas Accelerator Active";
1254
+ } else if (progress < 50) {
1240
1255
  if (status) status.textContent = `[${progress}%] CONNECTING REALTIME FIREBASE DB...`;
1241
- } else if (progress < 70) {
1242
- if (status) status.textContent = `[${progress}%] UNBLOCKING FASTLY CDN ASSETS...`;
1243
- } else if (progress < 90) {
1244
- if (status) status.textContent = `[${progress}%] DECRYPTING 788 GAME MANIFESTS...`;
1245
- } else if (progress < 100) {
1246
- if (status) status.textContent = `[${progress}%] PREPARING STARFIELD ENGINE...`;
1256
+ if (terminalText) terminalText.textContent = "[DATABASE] Firebase Realtime Sync Established";
1257
+ } else if (progress < 75) {
1258
+ if (status) status.textContent = `[${progress}%] UNBLOCKING GITHUB PAGES CDN...`;
1259
+ if (terminalText) terminalText.textContent = "[CDN] High-Speed GitHub Pages Stream Ready";
1260
+ } else if (progress < 95) {
1261
+ if (status) status.textContent = `[${progress}%] TURBO PRE-CACHING 788 GAMES...`;
1262
+ if (terminalText) terminalText.textContent = "[TURBO ENGINE] 788 Games Cached & Ready (60 FPS)";
1247
1263
  } else {
1248
1264
  if (status) status.textContent = `[100%] ALL SYSTEMS ONLINE`;
1265
+ if (terminalText) terminalText.textContent = "[BOOT] Core Online. Welcome to Reaper Hub!";
1249
1266
  clearInterval(timer);
1250
1267
  clearInterval(quoteInterval);
1251
1268
  setTimeout(() => {
1269
+ splash.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
1252
1270
  splash.style.opacity = '0';
1253
- setTimeout(() => { splash.style.display = 'none'; }, 600);
1254
- }, 400);
1271
+ splash.style.transform = 'scale(1.03)';
1272
+ setTimeout(() => { splash.style.display = 'none'; }, 400);
1273
+ }, 200);
1255
1274
  }
1256
1275
  }, interval);
1257
1276
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "reaper-arcade-hub",
3
- "version": "2.3.0",
3
+ "version": "2.4.0",
4
4
  "description": "Private Core Hub",
5
5
  "main": "main/index.html",
6
6
  "unpkg": "main/index.html",
package/verify/css/styles.css CHANGED
@@ -1150,3 +1150,212 @@ body.turbo-mode-active #bg-canvas {
1150
1150
  to { box-shadow: 0 0 35px rgba(255, 215, 0, 0.5); }
1151
1151
  }
1152
1152
 
1153
+ /* ==========================================
1154
+ RECODED NEXT-GEN CYBER BOOT SPLASH LOADER
1155
+ ========================================== */
1156
+ .splash-v2-container {
1157
+ max-width: 520px;
1158
+ width: 92%;
1159
+ background: rgba(4, 12, 28, 0.9);
1160
+ backdrop-filter: blur(24px);
1161
+ -webkit-backdrop-filter: blur(24px);
1162
+ border: 1.5px solid rgba(0, 210, 255, 0.4);
1163
+ border-radius: 18px;
1164
+ padding: 2.5rem 2rem;
1165
+ box-shadow: 0 0 60px rgba(0, 136, 255, 0.35), inset 0 0 30px rgba(0, 210, 255, 0.08);
1166
+ position: relative;
1167
+ overflow: hidden;
1168
+ text-align: center;
1169
+ }
1170
+
1171
+ .splash-v2-container::before {
1172
+ content: '';
1173
+ position: absolute;
1174
+ top: -50%;
1175
+ left: -50%;
1176
+ width: 200%;
1177
+ height: 200%;
1178
+ background: radial-gradient(circle, rgba(0, 210, 255, 0.08) 0%, transparent 60%);
1179
+ animation: rotateOrbital 12s linear infinite;
1180
+ pointer-events: none;
1181
+ }
1182
+
1183
+ @keyframes rotateOrbital {
1184
+ 0% { transform: rotate(0deg); }
1185
+ 100% { transform: rotate(360deg); }
1186
+ }
1187
+
1188
+ .splash-emblem-wrapper {
1189
+ position: relative;
1190
+ width: 80px;
1191
+ height: 80px;
1192
+ margin: 0 auto 1.25rem;
1193
+ display: flex;
1194
+ align-items: center;
1195
+ justify-content: center;
1196
+ }
1197
+
1198
+ .splash-emblem-ring {
1199
+ position: absolute;
1200
+ inset: 0;
1201
+ border-radius: 50%;
1202
+ border: 2px dashed rgba(0, 210, 255, 0.6);
1203
+ animation: spinRing 8s linear infinite;
1204
+ }
1205
+
1206
+ .splash-emblem-ring-inner {
1207
+ position: absolute;
1208
+ inset: 8px;
1209
+ border-radius: 50%;
1210
+ border: 2px solid rgba(0, 255, 170, 0.4);
1211
+ border-top-color: #00ffaa;
1212
+ animation: spinRingRev 4s linear infinite;
1213
+ }
1214
+
1215
+ @keyframes spinRing {
1216
+ from { transform: rotate(0deg); }
1217
+ to { transform: rotate(360deg); }
1218
+ }
1219
+
1220
+ @keyframes spinRingRev {
1221
+ from { transform: rotate(360deg); }
1222
+ to { transform: rotate(0deg); }
1223
+ }
1224
+
1225
+ .splash-emblem-core {
1226
+ width: 50px;
1227
+ height: 50px;
1228
+ border-radius: 50%;
1229
+ background: linear-gradient(135deg, #0088ff, #00ffaa);
1230
+ display: flex;
1231
+ align-items: center;
1232
+ justify-content: center;
1233
+ font-size: 1.6rem;
1234
+ box-shadow: 0 0 25px rgba(0, 210, 255, 0.8);
1235
+ animation: pulseCore 2s ease-in-out infinite alternate;
1236
+ }
1237
+
1238
+ @keyframes pulseCore {
1239
+ from { transform: scale(0.94); box-shadow: 0 0 15px rgba(0, 210, 255, 0.6); }
1240
+ to { transform: scale(1.06); box-shadow: 0 0 32px rgba(0, 255, 170, 0.9); }
1241
+ }
1242
+
1243
+ .splash-terminal-log {
1244
+ background: #020612;
1245
+ border: 1px solid rgba(0, 136, 255, 0.25);
1246
+ border-radius: 8px;
1247
+ padding: 0.65rem 1rem;
1248
+ font-family: var(--font-mono);
1249
+ font-size: 0.72rem;
1250
+ color: #88ffcc;
1251
+ text-align: left;
1252
+ min-height: 48px;
1253
+ display: flex;
1254
+ align-items: center;
1255
+ gap: 0.5rem;
1256
+ margin-bottom: 1.25rem;
1257
+ }
1258
+
1259
+ /* ==========================================
1260
+ RECODED KEY GATEKEEPER TERMINAL (NEXT-GEN)
1261
+ ========================================== */
1262
+ .key-terminal-card {
1263
+ max-width: 480px;
1264
+ width: 92%;
1265
+ background: rgba(4, 12, 28, 0.92);
1266
+ backdrop-filter: blur(28px);
1267
+ -webkit-backdrop-filter: blur(28px);
1268
+ border: 2px solid transparent;
1269
+ border-image: linear-gradient(135deg, #00d2ff, #7928ca, #ff0055) 1;
1270
+ border-radius: 20px;
1271
+ padding: 2.75rem 2.25rem;
1272
+ box-shadow: 0 0 70px rgba(0, 210, 255, 0.35), inset 0 0 35px rgba(121, 40, 202, 0.2);
1273
+ text-align: center;
1274
+ position: relative;
1275
+ animation: keyCardEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
1276
+ }
1277
+
1278
+ @keyframes keyCardEnter {
1279
+ from { opacity: 0; transform: scale(0.93) translateY(10px); }
1280
+ to { opacity: 1; transform: scale(1) translateY(0); }
1281
+ }
1282
+
1283
+ .key-input-wrapper {
1284
+ position: relative;
1285
+ display: flex;
1286
+ align-items: center;
1287
+ margin-bottom: 1rem;
1288
+ }
1289
+
1290
+ .key-input-field {
1291
+ width: 100%;
1292
+ background: #020714;
1293
+ border: 1.5px solid rgba(0, 210, 255, 0.4);
1294
+ border-radius: 10px;
1295
+ color: #fff;
1296
+ font-family: var(--font-mono);
1297
+ font-size: 0.95rem;
1298
+ font-weight: 700;
1299
+ padding: 0.85rem 5.5rem 0.85rem 1rem;
1300
+ letter-spacing: 0.06em;
1301
+ transition: all 0.25s ease;
1302
+ }
1303
+
1304
+ .key-input-field:focus {
1305
+ outline: none;
1306
+ border-color: #00ffaa;
1307
+ box-shadow: 0 0 20px rgba(0, 255, 170, 0.4);
1308
+ background: #030b1e;
1309
+ }
1310
+
1311
+ .btn-paste-key {
1312
+ position: absolute;
1313
+ right: 8px;
1314
+ background: rgba(0, 136, 255, 0.2);
1315
+ border: 1px solid rgba(0, 210, 255, 0.4);
1316
+ color: #00d2ff;
1317
+ border-radius: 6px;
1318
+ padding: 0.35rem 0.65rem;
1319
+ font-size: 0.72rem;
1320
+ font-weight: 800;
1321
+ font-family: var(--font-heading);
1322
+ cursor: pointer;
1323
+ transition: all 0.2s ease;
1324
+ }
1325
+
1326
+ .btn-paste-key:hover {
1327
+ background: #00d2ff;
1328
+ color: #02050a;
1329
+ box-shadow: 0 0 10px #00d2ff;
1330
+ }
1331
+
1332
+ .btn-unlock-hub {
1333
+ width: 100%;
1334
+ background: linear-gradient(135deg, #00d2ff, #0088ff);
1335
+ border: none;
1336
+ color: #000;
1337
+ font-family: var(--font-heading);
1338
+ font-size: 0.95rem;
1339
+ font-weight: 900;
1340
+ letter-spacing: 0.08em;
1341
+ padding: 0.95rem;
1342
+ border-radius: 10px;
1343
+ cursor: pointer;
1344
+ transition: all 0.25s ease;
1345
+ box-shadow: 0 0 25px rgba(0, 210, 255, 0.5);
1346
+ display: flex;
1347
+ align-items: center;
1348
+ justify-content: center;
1349
+ gap: 0.5rem;
1350
+ }
1351
+
1352
+ .btn-unlock-hub:hover {
1353
+ transform: translateY(-2px);
1354
+ background: linear-gradient(135deg, #00ffaa, #00d2ff);
1355
+ box-shadow: 0 0 35px rgba(0, 255, 170, 0.8);
1356
+ }
1357
+
1358
+ .btn-unlock-hub:active {
1359
+ transform: translateY(1px);
1360
+ }
1361
+