-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathkennel.html
More file actions
473 lines (432 loc) · 29 KB
/
Copy pathkennel.html
File metadata and controls
473 lines (432 loc) · 29 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>THE KENNEL | 5IR Trainer</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--obsidian: #050505;
--deep-blue: #0033ff;
--electric-blue: #0077ff;
--glass: rgba(255, 255, 255, 0.03);
--border: rgba(255, 255, 255, 0.08);
--gold: #ffcc00;
}
body {
background-color: var(--obsidian);
color: #d1d5db;
font-family: 'Inter', sans-serif;
overflow-x: hidden;
background-image: url('https://www.transparenttextures.com/patterns/dark-matter.png');
transition: filter 0.5s ease;
}
.mono { font-family: 'JetBrains Mono', monospace; }
.glass { background: var(--glass); backdrop-filter: blur(20px); border: 1px solid var(--border); }
.neon-blue { text-shadow: 0 0 10px rgba(0, 119, 255, 0.5); color: var(--electric-blue); }
.blue-border { border-color: var(--deep-blue); }
.hidden { display: none !important; }
.page { animation: fadeIn 0.5s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* SPUN / POPPER EFFECT */
.spun-active {
filter: blur(8px) saturate(2.5) contrast(1.2);
animation: vortexPulse 5s infinite alternate;
}
@keyframes vortexPulse {
0% { filter: blur(4px) brightness(1.1) saturate(2); }
100% { filter: blur(12px) brightness(1.5) saturate(4) hue-rotate(15deg); }
}
/* Wheel Styles */
#wheel-container { position: relative; width: 260px; height: 260px; margin: 0 auto; }
#wheel { width: 100%; height: 100%; border-radius: 50%; border: 4px solid var(--deep-blue); transition: transform 4s cubic-bezier(0.15, 0, 0.15, 1); }
.wheel-pin { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; background: red; clip-path: polygon(50% 100%, 0 0, 100% 0); z-index: 10; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--deep-blue); border-radius: 10px; }
</style>
</head>
<body class="flex flex-col min-h-screen">
<!-- 1. AUTH SCREEN -->
<section id="auth-page" class="page min-h-screen flex items-center justify-center p-6">
<div class="max-w-md w-full glass p-8 rounded-2xl border-t-2 border-blue-600 shadow-2xl shadow-blue-900/20">
<h1 class="text-4xl font-black tracking-tighter text-white mb-2 italic">THE_KENNEL</h1>
<p class="text-[10px] uppercase tracking-[0.3em] text-blue-500 mb-8 font-bold">5IR Submission Trainer | MEN ONLY</p>
<div id="auth-form" class="space-y-4">
<input type="text" id="username" placeholder="SLAVE NAME" class="w-full bg-black/60 border border-white/10 p-4 rounded-lg text-sm mono focus:border-blue-500 outline-none transition-all">
<input type="password" id="password" placeholder="ACCESS KEY" class="w-full bg-black/60 border border-white/10 p-4 rounded-lg text-sm mono focus:border-blue-500 outline-none transition-all">
<div class="flex flex-col gap-2 pt-4">
<button onclick="app.login()" class="w-full bg-blue-600 text-white font-bold py-4 rounded-lg uppercase tracking-widest text-xs hover:bg-blue-500 transition-all shadow-lg shadow-blue-600/20">Enter Kennel</button>
<button class="text-[9px] uppercase text-gray-600 mt-2 font-bold tracking-widest hover:text-blue-400 transition-colors">Request New Intake</button>
</div>
</div>
<p class="mt-8 text-[8px] text-gray-600 uppercase text-center leading-relaxed font-medium">Consensual 5th Industrial Revolution protocols active. 18+ Men Only. Safety first.</p>
</div>
</section>
<!-- 2. MAIN HUB -->
<main id="main-hub" class="hidden flex-grow flex flex-col">
<!-- HEADER -->
<nav class="glass border-b border-white/5 px-6 py-4 flex justify-between items-center sticky top-0 z-50">
<div class="flex flex-col">
<span class="text-xs font-black text-white italic tracking-tighter cursor-pointer" onclick="app.showAdmin()">THE KENNEL</span>
<span id="trial-timer" class="text-[8px] mono text-red-500 animate-pulse font-bold">TRIAL: 02:59:59</span>
</div>
<div class="flex space-x-6 text-[9px] font-bold uppercase tracking-widest">
<a href="#" onclick="app.showPage('dash')" id="nav-dash" class="text-blue-500">Dash</a>
<a href="#" onclick="app.showPage('chat')" id="nav-chat" class="text-gray-500 hover:text-white transition-colors">The Wire</a>
<a href="#" onclick="app.showPage('market')" id="nav-market" class="text-gray-500 hover:text-white transition-colors">Exposure</a>
</div>
</nav>
<!-- DASHBOARD -->
<section id="page-dash" class="page p-6 space-y-6 max-w-2xl mx-auto w-full">
<!-- Alpha Display -->
<div class="glass p-6 rounded-2xl border-l-4 border-blue-600 relative overflow-hidden shadow-xl">
<div class="absolute top-0 right-0 w-48 h-full opacity-10 bg-gradient-to-l from-blue-600 to-transparent pointer-events-none"></div>
<p class="text-[8px] uppercase tracking-[0.3em] text-blue-500 mb-1 font-black">Commanding Alpha</p>
<h2 id="alpha-name" class="text-4xl font-black italic text-white uppercase tracking-tighter">INITIALIZING...</h2>
<p id="alpha-style" class="text-[10px] text-blue-300/60 uppercase mono mt-1">---</p>
<div class="mt-4 flex gap-3">
<div class="bg-blue-900/30 px-3 py-1 rounded border border-blue-500/30 text-[9px] font-black text-blue-400">MOOD: AGGRESSIVE</div>
<div class="bg-blue-900/30 px-3 py-1 rounded border border-blue-500/30 text-[9px] font-black text-blue-400 animate-pulse">SESSION: LIVE</div>
</div>
</div>
<!-- Profile / Pic -->
<div class="glass p-5 rounded-2xl border border-white/5 flex items-center gap-5">
<div class="w-20 h-20 bg-black rounded-xl border-2 border-dashed border-white/10 flex items-center justify-center overflow-hidden cursor-pointer hover:border-blue-500/50 transition-all group" onclick="app.uploadPic()">
<img id="profile-img" src="" class="hidden w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all">
<span id="pic-placeholder" class="text-[8px] text-gray-600 uppercase text-center font-bold px-2">Tap to<br>Upload Pic</span>
</div>
<div class="flex-grow">
<p id="slave-id" class="text-lg font-black text-white uppercase tracking-tight">Slave_----</p>
<div class="flex items-center gap-2 mt-1">
<div class="w-24 h-1 bg-white/5 rounded-full overflow-hidden">
<div class="w-1/3 h-full bg-blue-600"></div>
</div>
<span class="text-[8px] text-gray-500 mono font-bold uppercase">Attachment: 32%</span>
</div>
</div>
</div>
<!-- Task Terminal -->
<div class="glass p-6 rounded-2xl border-t border-white/5 shadow-inner">
<div class="flex justify-between items-center mb-6">
<h3 class="text-[10px] font-black uppercase tracking-[0.2em] text-blue-400">Task Terminal</h3>
<div class="flex items-center gap-2">
<span class="w-1.5 h-1.5 bg-blue-500 rounded-full animate-ping"></span>
<span class="text-[8px] mono text-gray-600 font-bold uppercase">Vortex_Pilot_v2.5</span>
</div>
</div>
<div id="task-box" class="min-h-[100px] text-sm font-medium italic text-gray-300 border-l-2 border-blue-900/50 pl-6 py-3 mb-8 leading-relaxed">
"Waiting for the Alpha to initiate training sequence..."
</div>
<div class="grid grid-cols-2 gap-4">
<button onclick="app.generateTask()" class="bg-white text-black font-black py-4 rounded-xl text-[10px] uppercase tracking-widest hover:bg-gray-200 transition-all shadow-lg active:scale-95">Request Task</button>
<button onclick="app.triggerSpun()" class="bg-blue-600/10 border border-blue-600 text-blue-400 font-black py-4 rounded-xl text-[10px] uppercase tracking-widest hover:bg-blue-600 hover:text-white transition-all active:scale-95">Take a Hit</button>
</div>
</div>
<!-- Wheel -->
<div class="glass p-8 rounded-2xl text-center border-b border-white/5">
<h3 class="text-[10px] font-black uppercase tracking-[0.2em] text-blue-400 mb-8">Wheel of Humiliation</h3>
<div id="wheel-container">
<div class="wheel-pin"></div>
<canvas id="wheel"></canvas>
</div>
<button onclick="app.spinWheel()" class="mt-10 px-10 py-3 bg-transparent border-2 border-blue-600 text-blue-500 text-[10px] font-black uppercase rounded-full tracking-[0.3em] hover:bg-blue-600 hover:text-white transition-all">Spin Protocol</button>
</div>
</section>
<!-- CHAT -->
<section id="page-chat" class="page hidden flex flex-col h-[85vh]">
<div class="bg-blue-900/20 p-3 border-b border-white/5 flex justify-between px-6 items-center">
<div class="flex items-center gap-3">
<div class="w-2 h-2 bg-blue-500 rounded-full animate-pulse shadow-[0_0_8px_rgba(0,119,255,0.8)]"></div>
<span class="text-[10px] font-black text-blue-400 uppercase tracking-widest">Global_Braid</span>
</div>
<span class="text-[9px] font-black text-white uppercase mono tracking-tighter bg-blue-600/20 px-2 py-1 rounded"><span id="online-count">1942</span> ONLINE</span>
</div>
<div id="chat-messages" class="flex-grow overflow-y-auto p-6 space-y-4 bg-gradient-to-b from-transparent to-blue-950/10">
<!-- Messages -->
</div>
<div class="p-4 glass border-t border-white/5 flex gap-3 pb-8">
<input type="text" id="chat-input" placeholder="Transmit submission, pig..." class="flex-grow bg-black/60 border border-white/10 p-4 rounded-xl text-xs mono outline-none focus:border-blue-500 transition-all">
<button onclick="app.sendMessage()" class="bg-blue-600 text-white px-8 font-black text-[10px] uppercase rounded-xl shadow-lg shadow-blue-600/20">Send</button>
</div>
</section>
<!-- MARKET -->
<section id="page-market" class="page hidden p-6 space-y-8 max-w-4xl mx-auto w-full">
<div class="flex justify-between items-end">
<div>
<h2 class="text-3xl font-black italic text-white uppercase tracking-tighter italic">Exposure Market</h2>
<p class="text-[9px] text-blue-500 uppercase font-black tracking-widest mt-1">Tap to Extend Submission</p>
</div>
<button onclick="app.uploadExposure()" class="bg-blue-600 text-white px-5 py-2 rounded-lg text-[9px] font-black uppercase shadow-lg shadow-blue-600/10">Upload Pic</button>
</div>
<div id="exposure-grid" class="grid grid-cols-2 md:grid-cols-3 gap-6">
<!-- Items -->
</div>
</section>
</main>
<!-- MASTER ADMIN OVERLAY -->
<div id="admin-overlay" class="hidden fixed inset-0 z-[100] bg-black/95 p-8 overflow-y-auto backdrop-blur-xl">
<div class="flex justify-between items-center mb-12">
<h1 class="text-3xl font-black text-blue-500 italic tracking-tighter">MASTER_OVERRIDE <span class="text-white">v2.5</span></h1>
<button onclick="app.hideAdmin()" class="bg-white/5 px-4 py-2 rounded text-white text-[10px] font-black uppercase hover:bg-white/10 transition-colors">Close Terminal</button>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="glass p-6 rounded-2xl border-l-4 border-gold-500">
<h3 class="text-[12px] font-black text-gold-500 mb-4 uppercase tracking-widest">The Wire Decryptor</h3>
<div id="admin-wires" class="space-y-4 max-h-[60vh] overflow-y-auto pr-2">
<p class="text-[11px] text-gray-500 italic font-mono">> Listening to Private Channels...</p>
</div>
</div>
<div class="space-y-6">
<div class="glass p-6 rounded-2xl border border-white/5">
<h3 class="text-[12px] font-black text-blue-400 mb-4 uppercase tracking-widest">Global Broadcast</h3>
<textarea id="admin-msg" class="w-full bg-black/40 border border-white/10 p-4 rounded-xl text-xs mono text-white focus:border-blue-500 outline-none h-32 mb-4" placeholder="Inject Decree to the Lattice..."></textarea>
<button onclick="app.broadcastDecree()" class="w-full bg-blue-600 py-3 rounded-xl text-[10px] font-black uppercase text-white shadow-lg">Broadcast to All Nodes</button>
</div>
</div>
</div>
</div>
<!-- PAYMENT MODAL -->
<div id="payment-modal" class="hidden fixed inset-0 z-[200] bg-black/90 flex items-center justify-center p-6 backdrop-blur-md">
<div class="glass w-full max-w-sm p-10 rounded-3xl border-t-4 border-blue-600 text-center shadow-2xl">
<h2 class="text-3xl font-black text-white italic tracking-tighter mb-2 italic">EXTEND EXPOSURE</h2>
<p class="text-[10px] text-gray-500 uppercase tracking-[0.3em] font-bold mb-10">Select Lattice Extension</p>
<div class="space-y-4">
<div class="p-5 bg-white/5 rounded-2xl border border-white/5 text-left group hover:border-blue-500/50 transition-all cursor-pointer">
<p class="text-[8px] text-gray-500 uppercase font-black mb-1">Bitcoin (Daily Extension)</p>
<p class="text-[10px] mono text-blue-400 break-all select-all font-bold">bc1qw968re5gseqpkk5nx0ezqrp6dfhd20s8sll4k7</p>
</div>
<div class="p-5 bg-white/5 rounded-2xl border border-white/5 text-left group hover:border-blue-500/50 transition-all cursor-pointer" onclick="window.open('https://paypal.com/toochikey')">
<p class="text-[8px] text-gray-500 uppercase font-black mb-1">PayPal (1HR Extension)</p>
<p class="text-[10px] mono text-blue-400 font-bold">paypal.com/toochikey</p>
</div>
</div>
<button onclick="app.closePayment()" class="mt-10 text-[10px] uppercase text-gray-600 font-black tracking-[0.4em] hover:text-white transition-colors">Return</button>
</div>
</div>
<script>
const app = {
state: {
user: null,
alpha: null,
trialTime: 10800, // 3 hours
isSpun: false,
exposureList: [
{ id: 1, name: 'Pig_88', time: '45m left', url: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=400' },
{ id: 2, name: 'Wallet_91', time: '12h left', url: 'https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=400' },
{ id: 3, name: 'Sub_Alpha', time: '2h left', url: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400' },
{ id: 4, name: 'Node_77', time: '6h left', url: 'https://images.unsplash.com/photo-1534030347209-467a5b0ad3e6?w=400' }
],
alphaEngines: [
{
name: 'Craig',
traits: 'Wallet Drain / Findom',
tasks: [
"Drain 50% of your immediate balance to the Lattice. Show receipt.",
"Transfer $50 tribute to paypal.com/toochikey now. No questions.",
"Screenshot your current bank balance. It belongs to Craig now.",
"Cancel one subscription today and send that money to the Alpha.",
"You are a cashcow. Moou for your wallet drain."
],
lexicon: ["drain", "tribute", "wallet", "paypig", "cashcow", "send", "balance"]
},
{
name: 'Tobez',
traits: 'High Energy / CBT / CEI',
tasks: [
"100 flick reps. Record the sound of each one. Send proof.",
"Ice cube challenge: Place one on each sensitive node for 5 minutes.",
"CEI Protocol initiated. You have 300 seconds to consume.",
"Take a double popper hit. Report your headspace in the Wire.",
"Intensity drill: Squeeze until the Alpha says release. Hold... hold..."
],
lexicon: ["cbt", "flick", "cei", "popper", "hit", "intensity", "reps", "consume"]
},
{
name: 'Daddy Dom',
traits: 'Strict / Worship / Protocols',
tasks: [
"Sock worship: 30 minutes static hold. Feet are God.",
"Repeat in the Wire 50 times: 'I am a good boy for my Daddy.'",
"Safe sex protocol: List 5 reasons why protection is mandatory.",
"Kneel in the corner for 1 hour. No movement. No noise.",
"Worship the Alpha's boots through the screen. Focus on the texture."
],
lexicon: ["worship", "protocol", "safe", "daddy", "good boy", "kneel", "socks", "boots"]
},
{
name: 'Phil Cal',
traits: 'The Enforcer / Humiliation / SPH',
tasks: [
"Record a video response admitting you are too small for a real man.",
"Go to a public mirror and repeat: 'I am a worthless sub pig for Phil'.",
"Orgasm lock: No release for 7 days. Bribes start at $100.",
"Write a 1000-word essay on why your alpha is superior in every way.",
"Humiliation drill: Put on the most degrading outfit you own. Photo now."
],
lexicon: ["sph", "humiliation", "locked", "small", "worthless", "mirror", "essay", "orgasm"]
}
],
chatLines: [
"drain your wallet pig", "socks worship starting in 5", "sph check now",
"cei task uploaded", "cbt protocol active", "video response required",
"customs available for top subs", "orgasm control lock engaged",
"findom session live", "walletdrain initiated", "safe sex, safe needles",
"paypig status verified", "cashcow report to the wire",
"Craig just drained me. 10/10 service.", "Tobez is being brutal with the reps.",
"Any subs for Phil Cal online?", "Daddy Dom is the king of protocols.",
"Taking a popper hit for the Lattice... whoa.", "Just extended my exposure. Don't let me down.",
"Lattice is glowing tonight. Submission is high."
]
},
init() {
this.renderExposure();
this.startTimers();
this.setupWheel();
this.startChatSim();
},
login() {
const user = document.getElementById('username').value || 'New_Pig';
this.state.user = user;
this.state.alpha = this.state.alphaEngines[Math.floor(Math.random() * this.state.alphaEngines.length)];
document.getElementById('auth-page').classList.add('hidden');
document.getElementById('main-hub').classList.remove('hidden');
document.getElementById('alpha-name').innerText = this.state.alpha.name;
document.getElementById('alpha-style').innerText = this.state.alpha.traits;
document.getElementById('slave-id').innerText = user;
},
showPage(id) {
['dash', 'chat', 'market'].forEach(p => {
document.getElementById('page-'+p).classList.add('hidden');
document.getElementById('nav-'+p).classList.replace('text-blue-500', 'text-gray-500');
});
document.getElementById('page-'+id).classList.remove('hidden');
document.getElementById('nav-'+id).classList.replace('text-gray-500', 'text-blue-500');
},
generateTask() {
this.triggerSpun();
const box = document.getElementById('task-box');
box.innerText = ">> VORTEX INITIALIZING TRAINING SEQUENCE...";
setTimeout(() => {
const tasks = this.state.alpha.tasks;
box.innerText = tasks[Math.floor(Math.random() * tasks.length)];
this.addAdminWire(`${this.state.user} received task: ${box.innerText}`);
}, 1200);
},
triggerSpun() {
document.body.classList.add('spun-active');
setTimeout(() => {
document.body.classList.remove('spun-active');
}, 8000);
},
startChatSim() {
const box = document.getElementById('chat-messages');
setInterval(() => {
if (this.state.user && !document.getElementById('page-chat').classList.contains('hidden')) {
const msg = document.createElement('div');
msg.className = 'text-[11px] mono animate-fadeIn border-l border-white/5 pl-4 py-1';
const user = 'Sub_' + Math.floor(Math.random() * 9000 + 1000);
const text = this.state.chatLines[Math.floor(Math.random() * this.state.chatLines.length)];
msg.innerHTML = `<span class="text-blue-500 font-black uppercase mr-2">${user}:</span> <span class="text-gray-400 font-medium">${text}</span>`;
box.appendChild(msg);
box.scrollTop = box.scrollHeight;
if (box.children.length > 60) box.removeChild(box.firstChild);
}
}, 2500);
},
sendMessage() {
const input = document.getElementById('chat-input');
if (!input.value.trim()) return;
const box = document.getElementById('chat-messages');
const msg = document.createElement('div');
msg.className = 'text-[11px] mono animate-fadeIn border-l-2 border-blue-500 pl-4 py-2 bg-blue-500/5 rounded-r-lg';
msg.innerHTML = `<span class="text-white font-black uppercase mr-2">${this.state.user}:</span> <span class="text-blue-100 font-bold italic">${input.value}</span>`;
box.appendChild(msg);
box.scrollTop = box.scrollHeight;
this.addAdminWire(`[WIRE] ${this.state.user}: ${input.value}`);
input.value = '';
},
renderExposure() {
const grid = document.getElementById('exposure-grid');
grid.innerHTML = this.state.exposureList.map(item => `
<div class="glass rounded-2xl overflow-hidden relative group shadow-lg border border-white/5 hover:border-blue-500/50 transition-all">
<img src="${item.url}" class="w-full h-48 object-cover opacity-40 group-hover:opacity-80 transition-all grayscale group-hover:grayscale-0">
<div class="p-4 bg-gradient-to-t from-black to-transparent">
<p class="text-[10px] font-black text-white uppercase tracking-tight">${item.name}</p>
<p class="text-[8px] text-blue-500 uppercase font-black mb-3">${item.time}</p>
<button onclick="app.showPayment()" class="w-full bg-blue-600/20 border border-blue-600 py-2 rounded-lg text-[8px] font-black uppercase text-blue-400 hover:bg-blue-600 hover:text-white transition-all">Extend Exposure</button>
</div>
</div>
`).join('');
},
startTimers() {
setInterval(() => {
if (this.state.trialTime > 0) {
this.state.trialTime--;
const h = Math.floor(this.state.trialTime / 3600);
const m = Math.floor((this.state.trialTime % 3600) / 60);
const s = this.state.trialTime % 60;
document.getElementById('trial-timer').innerText = `TRIAL: ${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;
} else {
document.getElementById('trial-timer').innerText = "TRIAL EXPIRED - LOCK ACTIVE";
}
}, 1000);
},
uploadPic() {
const img = document.getElementById('profile-img');
const placeholder = document.getElementById('pic-placeholder');
img.src = "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400";
img.classList.remove('hidden');
placeholder.classList.add('hidden');
},
setupWheel() {
const canvas = document.getElementById('wheel');
const ctx = canvas.getContext('2d');
const segments = ['DRAIN', 'SPH', 'CBT', 'CEI', 'WORSHIP', 'CLEAN', 'EXTEND', 'LOCK'];
const colors = ['#050505', '#001133', '#050505', '#002266', '#050505', '#003399', '#050505', '#0044cc'];
canvas.width = 260; canvas.height = 260;
const radius = 130;
segments.forEach((seg, i) => {
const angle = (Math.PI * 2) / segments.length;
ctx.beginPath(); ctx.moveTo(radius, radius);
ctx.arc(radius, radius, radius, i * angle, (i + 1) * angle);
ctx.fillStyle = colors[i]; ctx.fill();
ctx.strokeStyle = 'rgba(0,119,255,0.3)'; ctx.stroke();
ctx.save(); ctx.translate(radius, radius); ctx.rotate(i * angle + angle / 2);
ctx.fillStyle = i % 2 === 0 ? '#0077ff' : 'white'; ctx.font = 'black 9px Inter'; ctx.fillText(seg, 65, 5); ctx.restore();
});
},
spinWheel() {
this.triggerSpun();
const wheel = document.getElementById('wheel');
const rand = Math.floor(Math.random() * 3600) + 1440;
wheel.style.transform = `rotate(${rand}deg)`;
setTimeout(() => { this.generateTask(); }, 4100);
},
showPayment() { document.getElementById('payment-modal').classList.remove('hidden'); },
closePayment() { document.getElementById('payment-modal').classList.add('hidden'); },
showAdmin() {
const pass = prompt("ENTER MASTER KEY:");
if (pass === "ARCHITECT") document.getElementById('admin-overlay').classList.remove('hidden');
},
hideAdmin() { document.getElementById('admin-overlay').classList.add('hidden'); },
addAdminWire(text) {
const box = document.getElementById('admin-wires');
const p = document.createElement('p');
p.className = 'text-[10px] mono text-white/70 border-b border-white/5 py-1';
p.innerText = `>> ${text}`;
box.prepend(p);
},
broadcastDecree() {
const input = document.getElementById('admin-msg');
if (!input.value.trim()) return;
alert("DECREE INJECTED TO GLOBAL BRAID.");
this.addAdminWire(`BROADCAST: ${input.value}`);
input.value = '';
}
};
window.onload = () => app.init();
</script>
</body>
</html>