Hugging Face's logo

Spaces:
jaehyunshin
/
mod
Running

App Files Community
jaehyunshin commited on
Commit
811ca99
·
verified ·
1 Parent(s): f79e12f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +931 -19
index.html CHANGED
@@ -1,19 +1,931 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MOD Crisis Control Center</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&display=swap');
11
+
12
+ :root {
13
+ --neon-blue: #0ff0fc;
14
+ --neon-pink: #ff2ced;
15
+ --neon-purple: #9600ff;
16
+ --neon-green: #00ff41;
17
+ --dark-bg: #0a0a12;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Share Tech Mono', monospace;
22
+ background-color: var(--dark-bg);
23
+ color: var(--neon-green);
24
+ overflow-x: hidden;
25
+ }
26
+
27
+ .cyberpunk-font {
28
+ font-family: 'VT323', monospace;
29
+ }
30
+
31
+ .glow-blue {
32
+ text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue);
33
+ }
34
+
35
+ .glow-pink {
36
+ text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink);
37
+ }
38
+
39
+ .glow-green {
40
+ text-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green);
41
+ }
42
+
43
+ .cyber-border {
44
+ border: 1px solid var(--neon-blue);
45
+ box-shadow: 0 0 10px var(--neon-blue), inset 0 0 10px var(--neon-blue);
46
+ }
47
+
48
+ .cyber-button {
49
+ background: linear-gradient(45deg, var(--neon-purple), var(--neon-blue));
50
+ color: white;
51
+ border: none;
52
+ transition: all 0.3s;
53
+ }
54
+
55
+ .cyber-button:hover {
56
+ transform: translateY(-2px);
57
+ box-shadow: 0 0 15px var(--neon-blue);
58
+ }
59
+
60
+ .scanline {
61
+ position: relative;
62
+ overflow: hidden;
63
+ }
64
+
65
+ .scanline::after {
66
+ content: "";
67
+ position: absolute;
68
+ top: 0;
69
+ left: 0;
70
+ right: 0;
71
+ height: 100%;
72
+ background: linear-gradient(
73
+ to bottom,
74
+ transparent 0%,
75
+ rgba(0, 255, 65, 0.1) 50%,
76
+ transparent 100%
77
+ );
78
+ animation: scan 8s linear infinite;
79
+ pointer-events: none;
80
+ }
81
+
82
+ @keyframes scan {
83
+ 0% { transform: translateY(-100%); }
84
+ 100% { transform: translateY(100%); }
85
+ }
86
+
87
+ .terminal-text {
88
+ animation: blink 1s step-end infinite;
89
+ }
90
+
91
+ @keyframes blink {
92
+ from, to { opacity: 1; }
93
+ 50% { opacity: 0; }
94
+ }
95
+
96
+ .password-meter {
97
+ height: 5px;
98
+ background: #333;
99
+ margin-top: 5px;
100
+ position: relative;
101
+ }
102
+
103
+ .password-meter::before {
104
+ content: '';
105
+ position: absolute;
106
+ left: 0;
107
+ top: 0;
108
+ bottom: 0;
109
+ width: 0;
110
+ background: var(--neon-green);
111
+ transition: width 0.3s;
112
+ }
113
+
114
+ .password-meter.weak::before {
115
+ width: 30%;
116
+ background: #ff0000;
117
+ }
118
+
119
+ .password-meter.medium::before {
120
+ width: 60%;
121
+ background: #ffcc00;
122
+ }
123
+
124
+ .password-meter.strong::before {
125
+ width: 90%;
126
+ background: var(--neon-green);
127
+ }
128
+
129
+ .password-meter.very-strong::before {
130
+ width: 100%;
131
+ background: var(--neon-blue);
132
+ }
133
+
134
+ .phishing-email {
135
+ border-left: 3px solid var(--neon-pink);
136
+ padding-left: 10px;
137
+ margin-bottom: 15px;
138
+ transition: all 0.3s;
139
+ }
140
+
141
+ .phishing-email:hover {
142
+ background-color: rgba(255, 44, 237, 0.1);
143
+ }
144
+
145
+ .risk-meter {
146
+ height: 20px;
147
+ background: linear-gradient(to right, #00ff41, #ffcc00, #ff0000);
148
+ margin-top: 10px;
149
+ position: relative;
150
+ }
151
+
152
+ .risk-pointer {
153
+ position: absolute;
154
+ top: -5px;
155
+ width: 2px;
156
+ height: 30px;
157
+ background-color: white;
158
+ transform: translateX(-50%);
159
+ }
160
+
161
+ .neon-pulse {
162
+ animation: pulse 2s infinite;
163
+ }
164
+
165
+ @keyframes pulse {
166
+ 0% { opacity: 1; }
167
+ 50% { opacity: 0.5; }
168
+ 100% { opacity: 1; }
169
+ }
170
+
171
+ .grid-overlay {
172
+ background-image:
173
+ linear-gradient(rgba(0, 255, 65, 0.1) 1px, transparent 1px),
174
+ linear-gradient(90deg, rgba(0, 255, 65, 0.1) 1px, transparent 1px);
175
+ background-size: 20px 20px;
176
+ }
177
+ </style>
178
+ </head>
179
+ <body class="grid-overlay">
180
+ <div class="container mx-auto px-4 py-8">
181
+ <!-- Header -->
182
+ <header class="mb-10 text-center">
183
+ <h1 class="cyberpunk-font text-5xl md:text-6xl mb-4 glow-pink">MOD CRISIS CONTROL CENTER</h1>
184
+ <p class="text-xl glow-blue">DEFEND AGAINST PUDDING INTRUSION</p>
185
+ <div class="flex justify-center mt-4">
186
+ <div class="w-full max-w-4xl h-1 bg-gradient-to-r from-purple-900 via-blue-500 to-pink-500"></div>
187
+ </div>
188
+ </header>
189
+
190
+ <!-- Status Board -->
191
+ <div class="bg-black bg-opacity-80 cyber-border p-6 mb-10 rounded-lg scanline">
192
+ <h2 class="text-2xl mb-4 glow-green flex items-center">
193
+ <i class="fas fa-terminal mr-2"></i> ANALYTICS STATUS BOARD
194
+ </h2>
195
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
196
+ <div class="bg-gray-900 p-3 rounded">
197
+ <h3 class="text-lg text-blue-400 mb-2">PASSWORD SECURITY</h3>
198
+ <p class="text-sm" id="password-status">Last password: <span class="text-green-400">Secure</span></p>
199
+ <p class="text-sm" id="pudding-progress">PUDDING progress: <span class="text-yellow-400">35%</span></p>
200
+ </div>
201
+ <div class="bg-gray-900 p-3 rounded">
202
+ <h3 class="text-lg text-blue-400 mb-2">2FA STATUS</h3>
203
+ <p class="text-sm" id="2fa-status">Last attempt: <span class="text-green-400">Successful</span></p>
204
+ <p class="text-sm" id="2fa-time">Next code in: <span class="text-yellow-400">42s</span></p>
205
+ </div>
206
+ <div class="bg-gray-900 p-3 rounded">
207
+ <h3 class="text-lg text-blue-400 mb-2">PHISHING DEFENSE</h3>
208
+ <p class="text-sm" id="phishing-status">Detected: <span class="text-green-400">3/5</span></p>
209
+ <p class="text-sm" id="pudding-hints">PUDDING hints: <span class="text-yellow-400">1 active</span></p>
210
+ </div>
211
+ <div class="bg-gray-900 p-3 rounded">
212
+ <h3 class="text-lg text-blue-400 mb-2">RISK ASSESSMENT</h3>
213
+ <p class="text-sm" id="risk-status">Current risk: <span class="text-yellow-400">Medium</span></p>
214
+ <p class="text-sm" id="policy-strength">Policy strength: <span class="text-green-400">68%</span></p>
215
+ </div>
216
+ </div>
217
+ <div class="mt-4 p-3 bg-gray-900 rounded">
218
+ <h3 class="text-lg text-blue-400 mb-2">PUDDING ACTIVITY</h3>
219
+ <div class="h-20 overflow-y-auto font-mono text-sm" id="pudding-activity">
220
+ <p>> PUDDING scanning Workstation 1...</p>
221
+ <p>> PUDDING attempting to bypass 2FA...</p>
222
+ </div>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- Workstations -->
227
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10">
228
+ <!-- Workstation 1 -->
229
+ <div class="cyber-border p-6 rounded-lg bg-black bg-opacity-80 relative scanline">
230
+ <div class="absolute top-2 right-2 text-xs bg-purple-900 px-2 py-1 rounded">SECURITY ENGINEER</div>
231
+ <h2 class="text-2xl mb-4 glow-blue flex items-center">
232
+ <i class="fas fa-key mr-2"></i> WORKSTATION 1: PASSWORD FORTRESS
233
+ </h2>
234
+ <p class="mb-4 text-sm">Create a password stronger than the last. PUDDING learns from each attempt.</p>
235
+
236
+ <div class="mb-4">
237
+ <label class="block text-sm mb-2">New Password</label>
238
+ <div class="relative">
239
+ <input type="password" id="password-input" class="w-full bg-gray-900 border border-blue-500 text-white p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Type faster than PUDDING...">
240
+ <button id="toggle-password" class="absolute right-2 top-2 text-gray-400 hover:text-white">
241
+ <i class="fas fa-eye"></i>
242
+ </button>
243
+ </div>
244
+ <div id="password-meter" class="password-meter"></div>
245
+ <div id="password-feedback" class="text-xs mt-1"></div>
246
+ </div>
247
+
248
+ <div class="mb-4">
249
+ <label class="block text-sm mb-2">Password Strength Tools</label>
250
+ <div class="grid grid-cols-3 gap-2">
251
+ <button class="cyber-button py-1 px-2 rounded text-xs" onclick="addSpecialChar()">Add Symbol</button>
252
+ <button class="cyber-button py-1 px-2 rounded text-xs" onclick="addNumber()">Add Number</button>
253
+ <button class="cyber-button py-1 px-2 rounded text-xs" onclick="addUpperCase()">Add Uppercase</button>
254
+ </div>
255
+ </div>
256
+
257
+ <div class="flex justify-between items-center">
258
+ <div>
259
+ <p class="text-xs">Last password: <span id="last-password" class="font-mono">P@ssw0rd123!</span></p>
260
+ <p class="text-xs">PUDDING crack time: <span id="crack-time" class="text-yellow-400">12 hours</span></p>
261
+ </div>
262
+ <button id="set-password" class="cyber-button px-4 py-2 rounded">SET PASSWORD</button>
263
+ </div>
264
+
265
+ <div id="pudding-interference" class="mt-4 hidden">
266
+ <div class="bg-red-900 bg-opacity-50 p-2 rounded text-xs">
267
+ <p class="flex items-center"><i class="fas fa-exclamation-triangle mr-1"></i> WARNING: PUDDING INTERFERENCE DETECTED</p>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- Workstation 2 -->
273
+ <div class="cyber-border p-6 rounded-lg bg-black bg-opacity-80 relative scanline">
274
+ <div class="absolute top-2 right-2 text-xs bg-purple-900 px-2 py-1 rounded">IDENTITY SPECIALIST</div>
275
+ <h2 class="text-2xl mb-4 glow-pink flex items-center">
276
+ <i class="fas fa-shield-alt mr-2"></i> WORKSTATION 2: 2FA GATEWAY
277
+ </h2>
278
+ <p class="mb-4 text-sm">Complete two-factor authentication to gain capabilities against PUDDING.</p>
279
+
280
+ <div class="mb-4 bg-gray-900 p-3 rounded">
281
+ <div class="flex justify-between items-center mb-2">
282
+ <span class="text-sm">2FA CODE:</span>
283
+ <span id="2fa-timer" class="text-xs bg-blue-900 px-2 py-1 rounded">00:30</span>
284
+ </div>
285
+ <div class="bg-black p-3 rounded text-center font-mono text-xl" id="2fa-code">7 9 2 4 8 1</div>
286
+ </div>
287
+
288
+ <div class="mb-4">
289
+ <label class="block text-sm mb-2">Enter 2FA Code</label>
290
+ <div class="grid grid-cols-3 gap-2 mb-2">
291
+ <input type="text" maxlength="1" class="2fa-digit bg-gray-900 border border-pink-500 text-white p-2 rounded text-center" oninput="moveToNext(this)">
292
+ <input type="text" maxlength="1" class="2fa-digit bg-gray-900 border border-pink-500 text-white p-2 rounded text-center" oninput="moveToNext(this)">
293
+ <input type="text" maxlength="1" class="2fa-digit bg-gray-900 border border-pink-500 text-white p-2 rounded text-center" oninput="moveToNext(this)">
294
+ <input type="text" maxlength="1" class="2fa-digit bg-gray-900 border border-pink-500 text-white p-2 rounded text-center" oninput="moveToNext(this)">
295
+ <input type="text" maxlength="1" class="2fa-digit bg-gray-900 border border-pink-500 text-white p-2 rounded text-center" oninput="moveToNext(this)">
296
+ <input type="text" maxlength="1" class="2fa-digit bg-gray-900 border border-pink-500 text-white p-2 rounded text-center" oninput="moveToNext(this)">
297
+ </div>
298
+ </div>
299
+
300
+ <div class="mb-4">
301
+ <label class="block text-sm mb-2">Additional Verification</label>
302
+ <div class="grid grid-cols-2 gap-2">
303
+ <button class="cyber-button py-2 px-2 rounded text-sm flex items-center justify-center" onclick="verifyBiometric()">
304
+ <i class="fas fa-fingerprint mr-1"></i> Biometric
305
+ </button>
306
+ <button class="cyber-button py-2 px-2 rounded text-sm flex items-center justify-center" onclick="verifyPhysical()">
307
+ <i class="fas fa-usb mr-1"></i> Hardware Key
308
+ </button>
309
+ </div>
310
+ </div>
311
+
312
+ <button id="verify-2fa" class="w-full cyber-button px-4 py-2 rounded mb-2">VERIFY IDENTITY</button>
313
+
314
+ <div id="2fa-feedback" class="text-xs text-center"></div>
315
+
316
+ <div id="2fa-rewards" class="mt-4 hidden">
317
+ <div class="bg-blue-900 bg-opacity-50 p-2 rounded text-xs">
318
+ <p class="flex items-center"><i class="fas fa-unlock-alt mr-1"></i> ACCESS GRANTED: PUDDING VULNERABILITY DATA UNLOCKED</p>
319
+ </div>
320
+ </div>
321
+ </div>
322
+
323
+ <!-- Workstation 3 -->
324
+ <div class="cyber-border p-6 rounded-lg bg-black bg-opacity-80 relative scanline">
325
+ <div class="absolute top-2 right-2 text-xs bg-purple-900 px-2 py-1 rounded">INCIDENT RESPONDER</div>
326
+ <h2 class="text-2xl mb-4 glow-green flex items-center">
327
+ <i class="fas fa-fish mr-2"></i> WORKSTATION 3: PHISHING HUNTER
328
+ </h2>
329
+ <p class="mb-4 text-sm">Identify phishing attempts to gain tools against PUDDING.</p>
330
+
331
+ <div class="mb-4 bg-gray-900 p-4 rounded">
332
+ <div class="flex justify-between items-center mb-3">
333
+ <div>
334
+ <span class="text-sm bg-blue-900 px-2 py-1 rounded mr-2">From: "MOD IT Support"</span>
335
+ <span class="text-sm bg-blue-900 px-2 py-1 rounded">Subject: Urgent: Password Reset Required</span>
336
+ </div>
337
+ <span class="text-xs bg-pink-900 px-2 py-1 rounded">NEW</span>
338
+ </div>
339
+
340
+ <div class="phishing-email">
341
+ <p class="text-sm mb-2">Dear Employee,</p>
342
+ <p class="text-sm mb-2">Our systems have detected unusual activity on your account. To prevent unauthorized access, you must reset your password immediately by clicking the link below:</p>
343
+ <p class="text-sm mb-2"><a href="#" class="text-blue-400 hover:underline">https://mod-support-reset.com/secure</a></p>
344
+ <p class="text-sm mb-2">Failure to reset within 24 hours will result in account suspension.</p>
345
+ <p class="text-sm">Sincerely,<br>MOD IT Security Team</p>
346
+ </div>
347
+
348
+ <div class="flex justify-between mt-3">
349
+ <button class="text-xs bg-green-900 hover:bg-green-800 px-3 py-1 rounded" onclick="markLegitimate(this)">Legitimate</button>
350
+ <button class="text-xs bg-red-900 hover:bg-red-800 px-3 py-1 rounded" onclick="markPhishing(this)">Phishing</button>
351
+ </div>
352
+ </div>
353
+
354
+ <div class="grid grid-cols-2 gap-4">
355
+ <div class="bg-gray-900 p-3 rounded">
356
+ <h3 class="text-sm mb-2">PUDDING HINTS</h3>
357
+ <ul class="text-xs space-y-1">
358
+ <li class="flex items-start">
359
+ <span class="text-yellow-400 mr-1">></span>
360
+ <span>Check sender email address</span>
361
+ </li>
362
+ <li class="flex items-start">
363
+ <span class="text-yellow-400 mr-1">></span>
364
+ <span>Hover over links before clicking</span>
365
+ </li>
366
+ </ul>
367
+ </div>
368
+ <div class="bg-gray-900 p-3 rounded">
369
+ <h3 class="text-sm mb-2">PHISHING INDICATORS</h3>
370
+ <ul class="text-xs space-y-1">
371
+ <li class="flex items-start">
372
+ <span class="text-green-400 mr-1">✓</span>
373
+ <span>Urgent language</span>
374
+ </li>
375
+ <li class="flex items-start">
376
+ <span class="text-green-400 mr-1">✓</span>
377
+ <span>Suspicious link</span>
378
+ </li>
379
+ <li class="flex items-start">
380
+ <span class="text-red-400 mr-1">✗</span>
381
+ <span>Personalized greeting</span>
382
+ </li>
383
+ </ul>
384
+ </div>
385
+ </div>
386
+
387
+ <div id="phishing-rewards" class="mt-4 hidden">
388
+ <div class="bg-green-900 bg-opacity-50 p-2 rounded text-xs">
389
+ <p class="flex items-center"><i class="fas fa-shield-virus mr-1"></i> PHISHING DETECTED: PUDDING TRACKING TOOLS ACQUIRED</p>
390
+ </div>
391
+ </div>
392
+ </div>
393
+
394
+ <!-- Workstation 4 -->
395
+ <div class="cyber-border p-6 rounded-lg bg-black bg-opacity-80 relative scanline">
396
+ <div class="absolute top-2 right-2 text-xs bg-purple-900 px-2 py-1 rounded">POLICY MANAGER</div>
397
+ <h2 class="text-2xl mb-4 glow-blue flex items-center">
398
+ <i class="fas fa-chess mr-2"></i> WORKSTATION 4: RISK STRATEGIST
399
+ </h2>
400
+ <p class="mb-4 text-sm">Create security policies to prevent future PUDDING attacks.</p>
401
+
402
+ <div class="mb-4 bg-gray-900 p-4 rounded">
403
+ <h3 class="text-sm font-bold mb-2">SCENARIO #PUD-4872</h3>
404
+ <p class="text-xs mb-3">PUDDING has compromised an employee's credentials through a phishing attack. The employee has access to sensitive but not classified systems. PUDDING is attempting lateral movement through the network.</p>
405
+
406
+ <div class="mb-3">
407
+ <label class="block text-xs mb-1">Assess the risk level:</label>
408
+ <div class="risk-meter">
409
+ <div class="risk-pointer" id="risk-pointer" style="left: 40%;"></div>
410
+ </div>
411
+ <div class="flex justify-between text-xs mt-1">
412
+ <span>Low</span>
413
+ <span>Medium</span>
414
+ <span>High</span>
415
+ <span>Critical</span>
416
+ </div>
417
+ </div>
418
+
419
+ <input type="range" min="0" max="100" value="40" class="w-full mb-3" id="risk-slider" oninput="updateRiskPointer(this.value)">
420
+
421
+ <div class="grid grid-cols-2 gap-2 mb-3">
422
+ <button class="text-xs bg-blue-900 hover:bg-blue-800 px-2 py-1 rounded" onclick="adjustRisk(-10)">-10%</button>
423
+ <button class="text-xs bg-blue-900 hover:bg-blue-800 px-2 py-1 rounded" onclick="adjustRisk(10)">+10%</button>
424
+ </div>
425
+
426
+ <div class="mb-3">
427
+ <label class="block text-xs mb-1">Recommended actions:</label>
428
+ <div class="space-y-1">
429
+ <label class="flex items-center text-xs">
430
+ <input type="checkbox" class="mr-2" checked>
431
+ Reset compromised credentials
432
+ </label>
433
+ <label class="flex items-center text-xs">
434
+ <input type="checkbox" class="mr-2">
435
+ Isolate affected systems
436
+ </label>
437
+ <label class="flex items-center text-xs">
438
+ <input type="checkbox" class="mr-2">
439
+ Deploy network segmentation
440
+ </label>
441
+ <label class="flex items-center text-xs">
442
+ <input type="checkbox" class="mr-2">
443
+ Notify senior leadership
444
+ </label>
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+ <button id="submit-policy" class="w-full cyber-button px-4 py-2 rounded mb-2">SUBMIT POLICY</button>
450
+
451
+ <div id="policy-feedback" class="text-xs text-center"></div>
452
+
453
+ <div id="policy-rewards" class="mt-4 hidden">
454
+ <div class="bg-purple-900 bg-opacity-50 p-2 rounded text-xs">
455
+ <p class="flex items-center"><i class="fas fa-chess-queen mr-1"></i> POLICY ACCEPTED: PUDDING COUNTERMEASURES DEPLOYED</p>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+
461
+ <!-- Footer -->
462
+ <footer class="text-center text-xs text-gray-500 mt-10">
463
+ <p>MOD CRISIS CONTROL CENTER © 2042 | SECURITY CLEARANCE LEVEL: OMEGA</p>
464
+ <p class="mt-1">PUDDING THREAT LEVEL: <span class="text-yellow-400">ELEVATED</span></p>
465
+ </footer>
466
+ </div>
467
+
468
+ <script>
469
+ // Workstation 1: Password Fortress
470
+ let lastPasswordStrength = 50;
471
+ let puddingInterference = false;
472
+ let puddingProgress = 35;
473
+
474
+ document.getElementById('toggle-password').addEventListener('click', function() {
475
+ const passwordInput = document.getElementById('password-input');
476
+ if (passwordInput.type === 'password') {
477
+ passwordInput.type = 'text';
478
+ this.innerHTML = '<i class="fas fa-eye-slash"></i>';
479
+ } else {
480
+ passwordInput.type = 'password';
481
+ this.innerHTML = '<i class="fas fa-eye"></i>';
482
+ }
483
+ });
484
+
485
+ document.getElementById('password-input').addEventListener('input', function() {
486
+ const password = this.value;
487
+ const strength = calculatePasswordStrength(password);
488
+ updatePasswordMeter(strength);
489
+
490
+ // Random PUDDING interference
491
+ if (Math.random() > 0.95 && password.length > 8) {
492
+ triggerPuddingInterference();
493
+ }
494
+ });
495
+
496
+ function calculatePasswordStrength(password) {
497
+ let strength = 0;
498
+
499
+ // Length
500
+ strength += Math.min(password.length * 5, 50);
501
+
502
+ // Character variety
503
+ if (/[A-Z]/.test(password)) strength += 10;
504
+ if (/[0-9]/.test(password)) strength += 10;
505
+ if (/[^A-Za-z0-9]/.test(password)) strength += 15;
506
+
507
+ // Avoid common patterns
508
+ if (!/(password|123|qwerty)/i.test(password)) strength += 15;
509
+
510
+ return Math.min(strength, 100);
511
+ }
512
+
513
+ function updatePasswordMeter(strength) {
514
+ const meter = document.getElementById('password-meter');
515
+ const feedback = document.getElementById('password-feedback');
516
+
517
+ meter.className = 'password-meter';
518
+
519
+ if (strength < 30) {
520
+ meter.classList.add('weak');
521
+ feedback.textContent = 'Weak - PUDDING will crack this instantly';
522
+ feedback.className = 'text-xs mt-1 text-red-400';
523
+ } else if (strength < 60) {
524
+ meter.classList.add('medium');
525
+ feedback.textContent = 'Medium - PUDDING might take a few hours';
526
+ feedback.className = 'text-xs mt-1 text-yellow-400';
527
+ } else if (strength < 80) {
528
+ meter.classList.add('strong');
529
+ feedback.textContent = 'Strong - PUDDING will need days';
530
+ feedback.className = 'text-xs mt-1 text-green-400';
531
+ } else {
532
+ meter.classList.add('very-strong');
533
+ feedback.textContent = 'Very Strong - PUDDING will struggle';
534
+ feedback.className = 'text-xs mt-1 text-blue-400';
535
+ }
536
+
537
+ meter.style.setProperty('--width', strength + '%');
538
+ }
539
+
540
+ function triggerPuddingInterference() {
541
+ if (puddingInterference) return;
542
+
543
+ puddingInterference = true;
544
+ document.getElementById('pudding-interference').classList.remove('hidden');
545
+
546
+ const input = document.getElementById('password-input');
547
+ let originalValue = input.value;
548
+
549
+ // PUDDING starts messing with the input
550
+ let backspaceInterval = setInterval(() => {
551
+ if (input.value.length > 0) {
552
+ input.value = input.value.slice(0, -1);
553
+ } else {
554
+ clearInterval(backspaceInterval);
555
+
556
+ // After clearing, PUDDING types nonsense
557
+ const nonsense = "PUDDING_WAS_HERE_" + Math.random().toString(36).slice(2, 8);
558
+ let i = 0;
559
+ let typeInterval = setInterval(() => {
560
+ if (i < nonsense.length) {
561
+ input.value += nonsense[i];
562
+ i++;
563
+ } else {
564
+ clearInterval(typeInterval);
565
+ setTimeout(() => {
566
+ input.value = originalValue;
567
+ puddingInterference = false;
568
+ document.getElementById('pudding-interference').classList.add('hidden');
569
+ }, 1000);
570
+ }
571
+ }, 100);
572
+ }
573
+ }, 100);
574
+ }
575
+
576
+ document.getElementById('set-password').addEventListener('click', function() {
577
+ const password = document.getElementById('password-input').value;
578
+ const strength = calculatePasswordStrength(password);
579
+
580
+ if (password.length < 8) {
581
+ document.getElementById('password-feedback').textContent = 'Password too short - minimum 8 characters';
582
+ document.getElementById('password-feedback').className = 'text-xs mt-1 text-red-400';
583
+ return;
584
+ }
585
+
586
+ if (strength <= lastPasswordStrength) {
587
+ document.getElementById('password-feedback').textContent = 'Password not stronger than last - PUDDING is catching up!';
588
+ document.getElementById('password-feedback').className = 'text-xs mt-1 text-red-400';
589
+ return;
590
+ }
591
+
592
+ // Success
593
+ lastPasswordStrength = strength;
594
+ puddingProgress = Math.max(0, puddingProgress - 5);
595
+ updateStatusBoard();
596
+
597
+ document.getElementById('last-password').textContent = '*'.repeat(password.length);
598
+ document.getElementById('crack-time').textContent = getCrackTime(strength);
599
+ document.getElementById('password-feedback').textContent = 'Password set successfully - PUDDING pushed back!';
600
+ document.getElementById('password-feedback').className = 'text-xs mt-1 text-green-400';
601
+
602
+ // Add to activity log
603
+ addPuddingActivity(`> New password set - strength: ${strength}/100`);
604
+ });
605
+
606
+ function getCrackTime(strength) {
607
+ if (strength < 30) return 'instantly';
608
+ if (strength < 50) return 'minutes';
609
+ if (strength < 70) return 'hours';
610
+ if (strength < 90) return 'days';
611
+ return 'months';
612
+ }
613
+
614
+ function addSpecialChar() {
615
+ const specialChars = "!@#$%^&*()_+-=[]{}|;:,.<>?";
616
+ const randomChar = specialChars[Math.floor(Math.random() * specialChars.length)];
617
+ document.getElementById('password-input').value += randomChar;
618
+ document.getElementById('password-input').dispatchEvent(new Event('input'));
619
+ }
620
+
621
+ function addNumber() {
622
+ const randomNum = Math.floor(Math.random() * 10);
623
+ document.getElementById('password-input').value += randomNum;
624
+ document.getElementById('password-input').dispatchEvent(new Event('input'));
625
+ }
626
+
627
+ function addUpperCase() {
628
+ const randomLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
629
+ document.getElementById('password-input').value += randomLetter;
630
+ document.getElementById('password-input').dispatchEvent(new Event('input'));
631
+ }
632
+
633
+ // Workstation 2: 2FA Gateway
634
+ let current2FACode = generate2FACode();
635
+ let timeLeft = 30;
636
+ let verificationAttempts = 0;
637
+
638
+ function generate2FACode() {
639
+ let code = '';
640
+ for (let i = 0; i < 6; i++) {
641
+ code += Math.floor(Math.random() * 10) + ' ';
642
+ }
643
+ return code.trim();
644
+ }
645
+
646
+ function start2FATimer() {
647
+ document.getElementById('2fa-code').textContent = current2FACode;
648
+ timeLeft = 30;
649
+ update2FATimer();
650
+
651
+ const timer = setInterval(() => {
652
+ timeLeft--;
653
+ update2FATimer();
654
+
655
+ if (timeLeft <= 0) {
656
+ clearInterval(timer);
657
+ document.getElementById('2fa-code').textContent = 'EXPIRED';
658
+ document.getElementById('2fa-code').className = 'bg-black p-3 rounded text-center font-mono text-xl text-red-400';
659
+
660
+ // Generate new code after short delay
661
+ setTimeout(() => {
662
+ current2FACode = generate2FACode();
663
+ start2FATimer();
664
+ addPuddingActivity('> 2FA code expired - new code generated');
665
+ }, 2000);
666
+ }
667
+
668
+ // PUDDING interference when time is running out
669
+ if (timeLeft === 10 && Math.random() > 0.7) {
670
+ obscure2FACode();
671
+ }
672
+ }, 1000);
673
+ }
674
+
675
+ function update2FATimer() {
676
+ const minutes = Math.floor(timeLeft / 60);
677
+ const seconds = timeLeft % 60;
678
+ document.getElementById('2fa-timer').textContent =
679
+ `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
680
+
681
+ if (timeLeft < 10) {
682
+ document.getElementById('2fa-timer').classList.add('bg-red-900');
683
+ document.getElementById('2fa-timer').classList.remove('bg-blue-900');
684
+ } else {
685
+ document.getElementById('2fa-timer').classList.add('bg-blue-900');
686
+ document.getElementById('2fa-timer').classList.remove('bg-red-900');
687
+ }
688
+ }
689
+
690
+ function obscure2FACode() {
691
+ const codeElement = document.getElementById('2fa-code');
692
+ const originalCode = codeElement.textContent;
693
+
694
+ // Replace some digits with underscores
695
+ let obscuredCode = originalCode.split('').map(char => {
696
+ return Math.random() > 0.5 ? char : '_';
697
+ }).join('');
698
+
699
+ codeElement.textContent = obscuredCode;
700
+ codeElement.className = 'bg-black p-3 rounded text-center font-mono text-xl text-yellow-400';
701
+
702
+ addPuddingActivity('> PUDDING interfering with 2FA code display');
703
+
704
+ // Restore after delay
705
+ setTimeout(() => {
706
+ codeElement.textContent = originalCode;
707
+ codeElement.className = 'bg-black p-3 rounded text-center font-mono text-xl';
708
+ }, 3000);
709
+ }
710
+
711
+ function moveToNext(input) {
712
+ if (input.value.length === 1) {
713
+ const next = input.nextElementSibling;
714
+ if (next && next.classList.contains('2fa-digit')) {
715
+ next.focus();
716
+ }
717
+ }
718
+ }
719
+
720
+ document.getElementById('verify-2fa').addEventListener('click', function() {
721
+ const digits = Array.from(document.getElementsByClassName('2fa-digit'));
722
+ const enteredCode = digits.map(d => d.value).join('');
723
+ const correctCode = current2FACode.replace(/\s/g, '');
724
+
725
+ verificationAttempts++;
726
+
727
+ if (enteredCode === correctCode) {
728
+ // Success
729
+ document.getElementById('2fa-feedback').textContent = '2FA verification successful!';
730
+ document.getElementById('2fa-feedback').className = 'text-xs text-center text-green-400';
731
+ document.getElementById('2fa-rewards').classList.remove('hidden');
732
+
733
+ puddingProgress = Math.max(0, puddingProgress - 10);
734
+ updateStatusBoard();
735
+
736
+ addPuddingActivity('> 2FA bypass attempt failed - access secured');
737
+
738
+ // Reset attempts
739
+ verificationAttempts = 0;
740
+ } else {
741
+ // Failure
742
+ document.getElementById('2fa-feedback').textContent = 'Verification failed - try again';
743
+ document.getElementById('2fa-feedback').className = 'text-xs text-center text-red-400';
744
+
745
+ // Increase difficulty after multiple attempts
746
+ if (verificationAttempts >= 2) {
747
+ addPuddingActivity('> Multiple failed 2FA attempts - increasing security');
748
+ obscure2FACode();
749
+ }
750
+ }
751
+ });
752
+
753
+ function verifyBiometric() {
754
+ // Simulate biometric verification
755
+ setTimeout(() => {
756
+ const success = Math.random() > 0.3; // 70% success rate
757
+ if (success) {
758
+ document.getElementById('2fa-feedback').textContent = 'Biometric verification successful!';
759
+ document.getElementById('2fa-feedback').className = 'text-xs text-center text-green-400';
760
+ } else {
761
+ document.getElementById('2fa-feedback').textContent = 'Biometric verification failed';
762
+ document.getElementById('2fa-feedback').className = 'text-xs text-center text-red-400';
763
+ }
764
+ }, 1000);
765
+ }
766
+
767
+ function verifyPhysical() {
768
+ // Simulate hardware key verification
769
+ setTimeout(() => {
770
+ const success = Math.random() > 0.2; // 80% success rate
771
+ if (success) {
772
+ document.getElementById('2fa-feedback').textContent = 'Hardware key verified!';
773
+ document.getElementById('2fa-feedback').className = 'text-xs text-center text-green-400';
774
+ } else {
775
+ document.getElementById('2fa-feedback').textContent = 'Hardware key not recognized';
776
+ document.getElementById('2fa-feedback').className = 'text-xs text-center text-red-400';
777
+ }
778
+ }, 1500);
779
+ }
780
+
781
+ // Workstation 3: Phishing Hunter
782
+ function markPhishing(button) {
783
+ const emailContainer = button.closest('.bg-gray-900');
784
+ emailContainer.classList.add('border', 'border-red-500');
785
+
786
+ document.getElementById('phishing-rewards').classList.remove('hidden');
787
+ puddingProgress = Math.max(0, puddingProgress - 8);
788
+ updateStatusBoard();
789
+
790
+ addPuddingActivity('> Phishing attempt detected and blocked');
791
+
792
+ // Change button to show success
793
+ button.textContent = 'Confirmed Phishing';
794
+ button.className = 'text-xs bg-red-700 px-3 py-1 rounded cursor-default';
795
+ button.onclick = null;
796
+
797
+ // Disable the other button
798
+ const otherButton = emailContainer.querySelector('button:not(.bg-red-900)');
799
+ otherButton.className = 'text-xs bg-gray-700 px-3 py-1 rounded cursor-default';
800
+ otherButton.onclick = null;
801
+ }
802
+
803
+ function markLegitimate(button) {
804
+ const emailContainer = button.closest('.bg-gray-900');
805
+ emailContainer.classList.add('border', 'border-green-500');
806
+
807
+ // In this case, it's actually phishing, so PUDDING gains advantage
808
+ puddingProgress = Math.min(100, puddingProgress + 15);
809
+ updateStatusBoard();
810
+
811
+ addPuddingActivity('> User fell for phishing attempt - PUDDING gains access');
812
+
813
+ // Change button to show mistake
814
+ button.textContent = 'Incorrect - Phishing';
815
+ button.className = 'text-xs bg-gray-700 px-3 py-1 rounded cursor-default';
816
+ button.onclick = null;
817
+
818
+ // Disable the other button
819
+ const otherButton = emailContainer.querySelector('button:not(.bg-green-900)');
820
+ otherButton.className = 'text-xs bg-gray-700 px-3 py-1 rounded cursor-default';
821
+ otherButton.onclick = null;
822
+ }
823
+
824
+ // Workstation 4: Risk Strategist
825
+ function updateRiskPointer(value) {
826
+ document.getElementById('risk-pointer').style.left = value + '%';
827
+ }
828
+
829
+ function adjustRisk(amount) {
830
+ const slider = document.getElementById('risk-slider');
831
+ let newValue = parseInt(slider.value) + amount;
832
+ newValue = Math.max(0, Math.min(100, newValue));
833
+ slider.value = newValue;
834
+ updateRiskPointer(newValue);
835
+ }
836
+
837
+ document.getElementById('submit-policy').addEventListener('click', function() {
838
+ const riskValue = parseInt(document.getElementById('risk-slider').value);
839
+ let feedback = document.getElementById('policy-feedback');
840
+
841
+ // For this scenario, the "correct" risk is between 60-80
842
+ if (riskValue >= 60 && riskValue <= 80) {
843
+ feedback.textContent = 'Policy accepted - optimal risk assessment';
844
+ feedback.className = 'text-xs text-center text-green-400';
845
+ document.getElementById('policy-rewards').classList.remove('hidden');
846
+
847
+ puddingProgress = Math.max(0, puddingProgress - 7);
848
+ updateStatusBoard();
849
+
850
+ addPuddingActivity('> Effective policy deployed - PUDDING countermeasures active');
851
+ } else if (riskValue < 60) {
852
+ feedback.textContent = 'Risk underestimated - policy too lenient';
853
+ feedback.className = 'text-xs text-center text-yellow-400';
854
+
855
+ puddingProgress = Math.min(100, puddingProgress + 5);
856
+ updateStatusBoard();
857
+
858
+ addPuddingActivity('> Weak policy detected - PUDDING exploiting vulnerabilities');
859
+ } else {
860
+ feedback.textContent = 'Risk overestimated - policy too restrictive';
861
+ feedback.className = 'text-xs text-center text-yellow-400';
862
+
863
+ // Less impact than underestimating
864
+ puddingProgress = Math.min(100, puddingProgress + 3);
865
+ updateStatusBoard();
866
+
867
+ addPuddingActivity('> Restrictive policy detected - reduced efficiency');
868
+ }
869
+ });
870
+
871
+ // Status Board and PUDDING Activity
872
+ function updateStatusBoard() {
873
+ document.getElementById('pudding-progress').innerHTML =
874
+ `PUDDING progress: <span class="${getProgressColorClass()}">${puddingProgress}%</span>`;
875
+
876
+ // Update other statuses based on puddingProgress
877
+ if (puddingProgress < 30) {
878
+ document.getElementById('password-status').innerHTML = 'Last password: <span class="text-green-400">Secure</span>';
879
+ document.getElementById('2fa-status').innerHTML = 'Last attempt: <span class="text-green-400">Successful</span>';
880
+ document.getElementById('phishing-status').innerHTML = 'Detected: <span class="text-green-400">3/5</span>';
881
+ document.getElementById('risk-status').innerHTML = 'Current risk: <span class="text-green-400">Low</span>';
882
+ } else if (puddingProgress < 60) {
883
+ document.getElementById('password-status').innerHTML = 'Last password: <span class="text-yellow-400">Compromised</span>';
884
+ document.getElementById('2fa-status').innerHTML = 'Last attempt: <span class="text-yellow-400">Partial</span>';
885
+ document.getElementById('phishing-status').innerHTML = 'Detected: <span class="text-yellow-400">2/5</span>';
886
+ document.getElementById('risk-status').innerHTML = 'Current risk: <span class="text-yellow-400">Medium</span>';
887
+ } else {
888
+ document.getElementById('password-status').innerHTML = 'Last password: <span class="text-red-400">Breached</span>';
889
+ document.getElementById('2fa-status').innerHTML = 'Last attempt: <span class="text-red-400">Failed</span>';
890
+ document.getElementById('phishing-status').innerHTML = 'Detected: <span class="text-red-400">1/5</span>';
891
+ document.getElementById('risk-status').innerHTML = 'Current risk: <span class="text-red-400">High</span>';
892
+ }
893
+ }
894
+
895
+ function getProgressColorClass() {
896
+ if (puddingProgress < 30) return 'text-green-400';
897
+ if (puddingProgress < 60) return 'text-yellow-400';
898
+ return 'text-red-400';
899
+ }
900
+
901
+ function addPuddingActivity(message) {
902
+ const activityLog = document.getElementById('pudding-activity');
903
+ const newEntry = document.createElement('p');
904
+ newEntry.textContent = message;
905
+ activityLog.appendChild(newEntry);
906
+ activityLog.scrollTop = activityLog.scrollHeight;
907
+ }
908
+
909
+ // Initialize
910
+ document.addEventListener('DOMContentLoaded', function() {
911
+ start2FATimer();
912
+ updateStatusBoard();
913
+
914
+ // Random PUDDING activity
915
+ setInterval(() => {
916
+ const activities = [
917
+ '> PUDDING scanning network for vulnerabilities...',
918
+ '> PUDDING attempting brute force attack...',
919
+ '> PUDDING probing firewall defenses...',
920
+ '> PUDDING analyzing previous password patterns...',
921
+ '> PUDDING generating phishing templates...'
922
+ ];
923
+
924
+ if (Math.random() > 0.7) {
925
+ addPuddingActivity(activities[Math.floor(Math.random() * activities.length)]);
926
+ }
927
+ }, 10000);
928
+ });
929
+ </script>
930
+ </body>
931
+ </html>