Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MOD Crisis Control Center</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&display=swap'); | |
| :root { | |
| --neon-blue: #0ff0fc; | |
| --neon-pink: #ff2ced; | |
| --neon-purple: #9600ff; | |
| --neon-green: #00ff41; | |
| --dark-bg: #0a0a12; | |
| } | |
| body { | |
| font-family: 'Share Tech Mono', monospace; | |
| background-color: var(--dark-bg); | |
| color: var(--neon-green); | |
| overflow-x: hidden; | |
| } | |
| .cyberpunk-font { | |
| font-family: 'VT323', monospace; | |
| } | |
| .glow-blue { | |
| text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue); | |
| } | |
| .glow-pink { | |
| text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink); | |
| } | |
| .glow-green { | |
| text-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green); | |
| } | |
| .cyber-border { | |
| border: 1px solid var(--neon-blue); | |
| box-shadow: 0 0 10px var(--neon-blue), inset 0 0 10px var(--neon-blue); | |
| } | |
| .cyber-button { | |
| background: linear-gradient(45deg, var(--neon-purple), var(--neon-blue)); | |
| color: white; | |
| border: none; | |
| transition: all 0.3s; | |
| } | |
| .cyber-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 0 15px var(--neon-blue); | |
| } | |
| .scanline { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .scanline::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 100%; | |
| background: linear-gradient( | |
| to bottom, | |
| transparent 0%, | |
| rgba(0, 255, 65, 0.1) 50%, | |
| transparent 100% | |
| ); | |
| animation: scan 8s linear infinite; | |
| pointer-events: none; | |
| } | |
| @keyframes scan { | |
| 0% { transform: translateY(-100%); } | |
| 100% { transform: translateY(100%); } | |
| } | |
| .terminal-text { | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes blink { | |
| from, to { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .password-meter { | |
| height: 5px; | |
| background: #333; | |
| margin-top: 5px; | |
| position: relative; | |
| } | |
| .password-meter::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: 0; | |
| background: var(--neon-green); | |
| transition: width 0.3s; | |
| } | |
| .password-meter.weak::before { | |
| width: 30%; | |
| background: #ff0000; | |
| } | |
| .password-meter.medium::before { | |
| width: 60%; | |
| background: #ffcc00; | |
| } | |
| .password-meter.strong::before { | |
| width: 90%; | |
| background: var(--neon-green); | |
| } | |
| .password-meter.very-strong::before { | |
| width: 100%; | |
| background: var(--neon-blue); | |
| } | |
| .phishing-email { | |
| border-left: 3px solid var(--neon-pink); | |
| padding-left: 10px; | |
| margin-bottom: 15px; | |
| transition: all 0.3s; | |
| } | |
| .phishing-email:hover { | |
| background-color: rgba(255, 44, 237, 0.1); | |
| } | |
| .risk-meter { | |
| height: 20px; | |
| background: linear-gradient(to right, #00ff41, #ffcc00, #ff0000); | |
| margin-top: 10px; | |
| position: relative; | |
| } | |
| .risk-pointer { | |
| position: absolute; | |
| top: -5px; | |
| width: 2px; | |
| height: 30px; | |
| background-color: white; | |
| transform: translateX(-50%); | |
| } | |
| .neon-pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .grid-overlay { | |
| background-image: | |
| linear-gradient(rgba(0, 255, 65, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 255, 65, 0.1) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| </style> | |
| </head> | |
| <body class="grid-overlay"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-10 text-center"> | |
| <h1 class="cyberpunk-font text-5xl md:text-6xl mb-4 glow-pink">MOD CRISIS CONTROL CENTER</h1> | |
| <p class="text-xl glow-blue">DEFEND AGAINST PUDDING INTRUSION</p> | |
| <div class="flex justify-center mt-4"> | |
| <div class="w-full max-w-4xl h-1 bg-gradient-to-r from-purple-900 via-blue-500 to-pink-500"></div> | |
| </div> | |
| </header> | |
| <!-- Status Board --> | |
| <div class="bg-black bg-opacity-80 cyber-border p-6 mb-10 rounded-lg scanline"> | |
| <h2 class="text-2xl mb-4 glow-green flex items-center"> | |
| <i class="fas fa-terminal mr-2"></i> ANALYTICS STATUS BOARD | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div class="bg-gray-900 p-3 rounded"> | |
| <h3 class="text-lg text-blue-400 mb-2">PASSWORD SECURITY</h3> | |
| <p class="text-sm" id="password-status">Last password: <span class="text-green-400">Secure</span></p> | |
| <p class="text-sm" id="pudding-progress">PUDDING progress: <span class="text-yellow-400">35%</span></p> | |
| </div> | |
| <div class="bg-gray-900 p-3 rounded"> | |
| <h3 class="text-lg text-blue-400 mb-2">2FA STATUS</h3> | |
| <p class="text-sm" id="2fa-status">Last attempt: <span class="text-green-400">Successful</span></p> | |
| <p class="text-sm" id="2fa-time">Next code in: <span class="text-yellow-400">42s</span></p> | |
| </div> | |
| <div class="bg-gray-900 p-3 rounded"> | |
| <h3 class="text-lg text-blue-400 mb-2">PHISHING DEFENSE</h3> | |
| <p class="text-sm" id="phishing-status">Detected: <span class="text-green-400">3/5</span></p> | |
| <p class="text-sm" id="pudding-hints">PUDDING hints: <span class="text-yellow-400">1 active</span></p> | |
| </div> | |
| <div class="bg-gray-900 p-3 rounded"> | |
| <h3 class="text-lg text-blue-400 mb-2">RISK ASSESSMENT</h3> | |
| <p class="text-sm" id="risk-status">Current risk: <span class="text-yellow-400">Medium</span></p> | |
| <p class="text-sm" id="policy-strength">Policy strength: <span class="text-green-400">68%</span></p> | |
| </div> | |
| </div> | |
| <div class="mt-4 p-3 bg-gray-900 rounded"> | |
| <h3 class="text-lg text-blue-400 mb-2">PUDDING ACTIVITY</h3> | |
| <div class="h-20 overflow-y-auto font-mono text-sm" id="pudding-activity"> | |
| <p>> PUDDING scanning Workstation 1...</p> | |
| <p>> PUDDING attempting to bypass 2FA...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Workstations --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10"> | |
| <!-- Workstation 1 --> | |
| <div class="cyber-border p-6 rounded-lg bg-black bg-opacity-80 relative scanline"> | |
| <div class="absolute top-2 right-2 text-xs bg-purple-900 px-2 py-1 rounded">SECURITY ENGINEER</div> | |
| <h2 class="text-2xl mb-4 glow-blue flex items-center"> | |
| <i class="fas fa-key mr-2"></i> WORKSTATION 1: PASSWORD FORTRESS | |
| </h2> | |
| <p class="mb-4 text-sm">Create a password stronger than the last. PUDDING learns from each attempt.</p> | |
| <div class="mb-4"> | |
| <label class="block text-sm mb-2">New Password</label> | |
| <div class="relative"> | |
| <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..."> | |
| <button id="toggle-password" class="absolute right-2 top-2 text-gray-400 hover:text-white"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| <div id="password-meter" class="password-meter"></div> | |
| <div id="password-feedback" class="text-xs mt-1"></div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm mb-2">Password Strength Tools</label> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <button class="cyber-button py-1 px-2 rounded text-xs" onclick="addSpecialChar()">Add Symbol</button> | |
| <button class="cyber-button py-1 px-2 rounded text-xs" onclick="addNumber()">Add Number</button> | |
| <button class="cyber-button py-1 px-2 rounded text-xs" onclick="addUpperCase()">Add Uppercase</button> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-xs">Last password: <span id="last-password" class="font-mono">P@ssw0rd123!</span></p> | |
| <p class="text-xs">PUDDING crack time: <span id="crack-time" class="text-yellow-400">12 hours</span></p> | |
| </div> | |
| <button id="set-password" class="cyber-button px-4 py-2 rounded">SET PASSWORD</button> | |
| </div> | |
| <div id="pudding-interference" class="mt-4 hidden"> | |
| <div class="bg-red-900 bg-opacity-50 p-2 rounded text-xs"> | |
| <p class="flex items-center"><i class="fas fa-exclamation-triangle mr-1"></i> WARNING: PUDDING INTERFERENCE DETECTED</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Workstation 2 --> | |
| <div class="cyber-border p-6 rounded-lg bg-black bg-opacity-80 relative scanline"> | |
| <div class="absolute top-2 right-2 text-xs bg-purple-900 px-2 py-1 rounded">IDENTITY SPECIALIST</div> | |
| <h2 class="text-2xl mb-4 glow-pink flex items-center"> | |
| <i class="fas fa-shield-alt mr-2"></i> WORKSTATION 2: 2FA GATEWAY | |
| </h2> | |
| <p class="mb-4 text-sm">Complete two-factor authentication to gain capabilities against PUDDING.</p> | |
| <div class="mb-4 bg-gray-900 p-3 rounded"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm">2FA CODE:</span> | |
| <span id="2fa-timer" class="text-xs bg-blue-900 px-2 py-1 rounded">00:30</span> | |
| </div> | |
| <div class="bg-black p-3 rounded text-center font-mono text-xl" id="2fa-code">7 9 2 4 8 1</div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm mb-2">Enter 2FA Code</label> | |
| <div class="grid grid-cols-3 gap-2 mb-2"> | |
| <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)"> | |
| <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)"> | |
| <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)"> | |
| <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)"> | |
| <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)"> | |
| <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)"> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm mb-2">Additional Verification</label> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="cyber-button py-2 px-2 rounded text-sm flex items-center justify-center" onclick="verifyBiometric()"> | |
| <i class="fas fa-fingerprint mr-1"></i> Biometric | |
| </button> | |
| <button class="cyber-button py-2 px-2 rounded text-sm flex items-center justify-center" onclick="verifyPhysical()"> | |
| <i class="fas fa-usb mr-1"></i> Hardware Key | |
| </button> | |
| </div> | |
| </div> | |
| <button id="verify-2fa" class="w-full cyber-button px-4 py-2 rounded mb-2">VERIFY IDENTITY</button> | |
| <div id="2fa-feedback" class="text-xs text-center"></div> | |
| <div id="2fa-rewards" class="mt-4 hidden"> | |
| <div class="bg-blue-900 bg-opacity-50 p-2 rounded text-xs"> | |
| <p class="flex items-center"><i class="fas fa-unlock-alt mr-1"></i> ACCESS GRANTED: PUDDING VULNERABILITY DATA UNLOCKED</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Workstation 3 --> | |
| <div class="cyber-border p-6 rounded-lg bg-black bg-opacity-80 relative scanline"> | |
| <div class="absolute top-2 right-2 text-xs bg-purple-900 px-2 py-1 rounded">INCIDENT RESPONDER</div> | |
| <h2 class="text-2xl mb-4 glow-green flex items-center"> | |
| <i class="fas fa-fish mr-2"></i> WORKSTATION 3: PHISHING HUNTER | |
| </h2> | |
| <p class="mb-4 text-sm">Identify phishing attempts to gain tools against PUDDING.</p> | |
| <div class="mb-4 bg-gray-900 p-4 rounded"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <div> | |
| <span class="text-sm bg-blue-900 px-2 py-1 rounded mr-2">From: "MOD IT Support"</span> | |
| <span class="text-sm bg-blue-900 px-2 py-1 rounded">Subject: Urgent: Password Reset Required</span> | |
| </div> | |
| <span class="text-xs bg-pink-900 px-2 py-1 rounded">NEW</span> | |
| </div> | |
| <div class="phishing-email"> | |
| <p class="text-sm mb-2">Dear Employee,</p> | |
| <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> | |
| <p class="text-sm mb-2"><a href="#" class="text-blue-400 hover:underline">https://mod-support-reset.com/secure</a></p> | |
| <p class="text-sm mb-2">Failure to reset within 24 hours will result in account suspension.</p> | |
| <p class="text-sm">Sincerely,<br>MOD IT Security Team</p> | |
| </div> | |
| <div class="flex justify-between mt-3"> | |
| <button class="text-xs bg-green-900 hover:bg-green-800 px-3 py-1 rounded" onclick="markLegitimate(this)">Legitimate</button> | |
| <button class="text-xs bg-red-900 hover:bg-red-800 px-3 py-1 rounded" onclick="markPhishing(this)">Phishing</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-gray-900 p-3 rounded"> | |
| <h3 class="text-sm mb-2">PUDDING HINTS</h3> | |
| <ul class="text-xs space-y-1"> | |
| <li class="flex items-start"> | |
| <span class="text-yellow-400 mr-1">></span> | |
| <span>Check sender email address</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-yellow-400 mr-1">></span> | |
| <span>Hover over links before clicking</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-900 p-3 rounded"> | |
| <h3 class="text-sm mb-2">PHISHING INDICATORS</h3> | |
| <ul class="text-xs space-y-1"> | |
| <li class="flex items-start"> | |
| <span class="text-green-400 mr-1">✓</span> | |
| <span>Urgent language</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-green-400 mr-1">✓</span> | |
| <span>Suspicious link</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-red-400 mr-1">✗</span> | |
| <span>Personalized greeting</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div id="phishing-rewards" class="mt-4 hidden"> | |
| <div class="bg-green-900 bg-opacity-50 p-2 rounded text-xs"> | |
| <p class="flex items-center"><i class="fas fa-shield-virus mr-1"></i> PHISHING DETECTED: PUDDING TRACKING TOOLS ACQUIRED</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Workstation 4 --> | |
| <div class="cyber-border p-6 rounded-lg bg-black bg-opacity-80 relative scanline"> | |
| <div class="absolute top-2 right-2 text-xs bg-purple-900 px-2 py-1 rounded">POLICY MANAGER</div> | |
| <h2 class="text-2xl mb-4 glow-blue flex items-center"> | |
| <i class="fas fa-chess mr-2"></i> WORKSTATION 4: RISK STRATEGIST | |
| </h2> | |
| <p class="mb-4 text-sm">Create security policies to prevent future PUDDING attacks.</p> | |
| <div class="mb-4 bg-gray-900 p-4 rounded"> | |
| <h3 class="text-sm font-bold mb-2">SCENARIO #PUD-4872</h3> | |
| <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> | |
| <div class="mb-3"> | |
| <label class="block text-xs mb-1">Assess the risk level:</label> | |
| <div class="risk-meter"> | |
| <div class="risk-pointer" id="risk-pointer" style="left: 40%;"></div> | |
| </div> | |
| <div class="flex justify-between text-xs mt-1"> | |
| <span>Low</span> | |
| <span>Medium</span> | |
| <span>High</span> | |
| <span>Critical</span> | |
| </div> | |
| </div> | |
| <input type="range" min="0" max="100" value="40" class="w-full mb-3" id="risk-slider" oninput="updateRiskPointer(this.value)"> | |
| <div class="grid grid-cols-2 gap-2 mb-3"> | |
| <button class="text-xs bg-blue-900 hover:bg-blue-800 px-2 py-1 rounded" onclick="adjustRisk(-10)">-10%</button> | |
| <button class="text-xs bg-blue-900 hover:bg-blue-800 px-2 py-1 rounded" onclick="adjustRisk(10)">+10%</button> | |
| </div> | |
| <div class="mb-3"> | |
| <label class="block text-xs mb-1">Recommended actions:</label> | |
| <div class="space-y-1"> | |
| <label class="flex items-center text-xs"> | |
| <input type="checkbox" class="mr-2" checked> | |
| Reset compromised credentials | |
| </label> | |
| <label class="flex items-center text-xs"> | |
| <input type="checkbox" class="mr-2"> | |
| Isolate affected systems | |
| </label> | |
| <label class="flex items-center text-xs"> | |
| <input type="checkbox" class="mr-2"> | |
| Deploy network segmentation | |
| </label> | |
| <label class="flex items-center text-xs"> | |
| <input type="checkbox" class="mr-2"> | |
| Notify senior leadership | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="submit-policy" class="w-full cyber-button px-4 py-2 rounded mb-2">SUBMIT POLICY</button> | |
| <div id="policy-feedback" class="text-xs text-center"></div> | |
| <div id="policy-rewards" class="mt-4 hidden"> | |
| <div class="bg-purple-900 bg-opacity-50 p-2 rounded text-xs"> | |
| <p class="flex items-center"><i class="fas fa-chess-queen mr-1"></i> POLICY ACCEPTED: PUDDING COUNTERMEASURES DEPLOYED</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="text-center text-xs text-gray-500 mt-10"> | |
| <p>MOD CRISIS CONTROL CENTER © 2042 | SECURITY CLEARANCE LEVEL: OMEGA</p> | |
| <p class="mt-1">PUDDING THREAT LEVEL: <span class="text-yellow-400">ELEVATED</span></p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Workstation 1: Password Fortress | |
| let lastPasswordStrength = 50; | |
| let puddingInterference = false; | |
| let puddingProgress = 35; | |
| document.getElementById('toggle-password').addEventListener('click', function() { | |
| const passwordInput = document.getElementById('password-input'); | |
| if (passwordInput.type === 'password') { | |
| passwordInput.type = 'text'; | |
| this.innerHTML = '<i class="fas fa-eye-slash"></i>'; | |
| } else { | |
| passwordInput.type = 'password'; | |
| this.innerHTML = '<i class="fas fa-eye"></i>'; | |
| } | |
| }); | |
| document.getElementById('password-input').addEventListener('input', function() { | |
| const password = this.value; | |
| const strength = calculatePasswordStrength(password); | |
| updatePasswordMeter(strength); | |
| // Random PUDDING interference | |
| if (Math.random() > 0.95 && password.length > 8) { | |
| triggerPuddingInterference(); | |
| } | |
| }); | |
| function calculatePasswordStrength(password) { | |
| let strength = 0; | |
| // Length | |
| strength += Math.min(password.length * 5, 50); | |
| // Character variety | |
| if (/[A-Z]/.test(password)) strength += 10; | |
| if (/[0-9]/.test(password)) strength += 10; | |
| if (/[^A-Za-z0-9]/.test(password)) strength += 15; | |
| // Avoid common patterns | |
| if (!/(password|123|qwerty)/i.test(password)) strength += 15; | |
| return Math.min(strength, 100); | |
| } | |
| function updatePasswordMeter(strength) { | |
| const meter = document.getElementById('password-meter'); | |
| const feedback = document.getElementById('password-feedback'); | |
| meter.className = 'password-meter'; | |
| if (strength < 30) { | |
| meter.classList.add('weak'); | |
| feedback.textContent = 'Weak - PUDDING will crack this instantly'; | |
| feedback.className = 'text-xs mt-1 text-red-400'; | |
| } else if (strength < 60) { | |
| meter.classList.add('medium'); | |
| feedback.textContent = 'Medium - PUDDING might take a few hours'; | |
| feedback.className = 'text-xs mt-1 text-yellow-400'; | |
| } else if (strength < 80) { | |
| meter.classList.add('strong'); | |
| feedback.textContent = 'Strong - PUDDING will need days'; | |
| feedback.className = 'text-xs mt-1 text-green-400'; | |
| } else { | |
| meter.classList.add('very-strong'); | |
| feedback.textContent = 'Very Strong - PUDDING will struggle'; | |
| feedback.className = 'text-xs mt-1 text-blue-400'; | |
| } | |
| meter.style.setProperty('--width', strength + '%'); | |
| } | |
| function triggerPuddingInterference() { | |
| if (puddingInterference) return; | |
| puddingInterference = true; | |
| document.getElementById('pudding-interference').classList.remove('hidden'); | |
| const input = document.getElementById('password-input'); | |
| let originalValue = input.value; | |
| // PUDDING starts messing with the input | |
| let backspaceInterval = setInterval(() => { | |
| if (input.value.length > 0) { | |
| input.value = input.value.slice(0, -1); | |
| } else { | |
| clearInterval(backspaceInterval); | |
| // After clearing, PUDDING types nonsense | |
| const nonsense = "PUDDING_WAS_HERE_" + Math.random().toString(36).slice(2, 8); | |
| let i = 0; | |
| let typeInterval = setInterval(() => { | |
| if (i < nonsense.length) { | |
| input.value += nonsense[i]; | |
| i++; | |
| } else { | |
| clearInterval(typeInterval); | |
| setTimeout(() => { | |
| input.value = originalValue; | |
| puddingInterference = false; | |
| document.getElementById('pudding-interference').classList.add('hidden'); | |
| }, 1000); | |
| } | |
| }, 100); | |
| } | |
| }, 100); | |
| } | |
| document.getElementById('set-password').addEventListener('click', function() { | |
| const password = document.getElementById('password-input').value; | |
| const strength = calculatePasswordStrength(password); | |
| if (password.length < 8) { | |
| document.getElementById('password-feedback').textContent = 'Password too short - minimum 8 characters'; | |
| document.getElementById('password-feedback').className = 'text-xs mt-1 text-red-400'; | |
| return; | |
| } | |
| if (strength <= lastPasswordStrength) { | |
| document.getElementById('password-feedback').textContent = 'Password not stronger than last - PUDDING is catching up!'; | |
| document.getElementById('password-feedback').className = 'text-xs mt-1 text-red-400'; | |
| return; | |
| } | |
| // Success | |
| lastPasswordStrength = strength; | |
| puddingProgress = Math.max(0, puddingProgress - 5); | |
| updateStatusBoard(); | |
| document.getElementById('last-password').textContent = '*'.repeat(password.length); | |
| document.getElementById('crack-time').textContent = getCrackTime(strength); | |
| document.getElementById('password-feedback').textContent = 'Password set successfully - PUDDING pushed back!'; | |
| document.getElementById('password-feedback').className = 'text-xs mt-1 text-green-400'; | |
| // Add to activity log | |
| addPuddingActivity(`> New password set - strength: ${strength}/100`); | |
| }); | |
| function getCrackTime(strength) { | |
| if (strength < 30) return 'instantly'; | |
| if (strength < 50) return 'minutes'; | |
| if (strength < 70) return 'hours'; | |
| if (strength < 90) return 'days'; | |
| return 'months'; | |
| } | |
| function addSpecialChar() { | |
| const specialChars = "!@#$%^&*()_+-=[]{}|;:,.<>?"; | |
| const randomChar = specialChars[Math.floor(Math.random() * specialChars.length)]; | |
| document.getElementById('password-input').value += randomChar; | |
| document.getElementById('password-input').dispatchEvent(new Event('input')); | |
| } | |
| function addNumber() { | |
| const randomNum = Math.floor(Math.random() * 10); | |
| document.getElementById('password-input').value += randomNum; | |
| document.getElementById('password-input').dispatchEvent(new Event('input')); | |
| } | |
| function addUpperCase() { | |
| const randomLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26)); | |
| document.getElementById('password-input').value += randomLetter; | |
| document.getElementById('password-input').dispatchEvent(new Event('input')); | |
| } | |
| // Workstation 2: 2FA Gateway | |
| let current2FACode = generate2FACode(); | |
| let timeLeft = 30; | |
| let verificationAttempts = 0; | |
| function generate2FACode() { | |
| let code = ''; | |
| for (let i = 0; i < 6; i++) { | |
| code += Math.floor(Math.random() * 10) + ' '; | |
| } | |
| return code.trim(); | |
| } | |
| function start2FATimer() { | |
| document.getElementById('2fa-code').textContent = current2FACode; | |
| timeLeft = 30; | |
| update2FATimer(); | |
| const timer = setInterval(() => { | |
| timeLeft--; | |
| update2FATimer(); | |
| if (timeLeft <= 0) { | |
| clearInterval(timer); | |
| document.getElementById('2fa-code').textContent = 'EXPIRED'; | |
| document.getElementById('2fa-code').className = 'bg-black p-3 rounded text-center font-mono text-xl text-red-400'; | |
| // Generate new code after short delay | |
| setTimeout(() => { | |
| current2FACode = generate2FACode(); | |
| start2FATimer(); | |
| addPuddingActivity('> 2FA code expired - new code generated'); | |
| }, 2000); | |
| } | |
| // PUDDING interference when time is running out | |
| if (timeLeft === 10 && Math.random() > 0.7) { | |
| obscure2FACode(); | |
| } | |
| }, 1000); | |
| } | |
| function update2FATimer() { | |
| const minutes = Math.floor(timeLeft / 60); | |
| const seconds = timeLeft % 60; | |
| document.getElementById('2fa-timer').textContent = | |
| `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; | |
| if (timeLeft < 10) { | |
| document.getElementById('2fa-timer').classList.add('bg-red-900'); | |
| document.getElementById('2fa-timer').classList.remove('bg-blue-900'); | |
| } else { | |
| document.getElementById('2fa-timer').classList.add('bg-blue-900'); | |
| document.getElementById('2fa-timer').classList.remove('bg-red-900'); | |
| } | |
| } | |
| function obscure2FACode() { | |
| const codeElement = document.getElementById('2fa-code'); | |
| const originalCode = codeElement.textContent; | |
| // Replace some digits with underscores | |
| let obscuredCode = originalCode.split('').map(char => { | |
| return Math.random() > 0.5 ? char : '_'; | |
| }).join(''); | |
| codeElement.textContent = obscuredCode; | |
| codeElement.className = 'bg-black p-3 rounded text-center font-mono text-xl text-yellow-400'; | |
| addPuddingActivity('> PUDDING interfering with 2FA code display'); | |
| // Restore after delay | |
| setTimeout(() => { | |
| codeElement.textContent = originalCode; | |
| codeElement.className = 'bg-black p-3 rounded text-center font-mono text-xl'; | |
| }, 3000); | |
| } | |
| function moveToNext(input) { | |
| if (input.value.length === 1) { | |
| const next = input.nextElementSibling; | |
| if (next && next.classList.contains('2fa-digit')) { | |
| next.focus(); | |
| } | |
| } | |
| } | |
| document.getElementById('verify-2fa').addEventListener('click', function() { | |
| const digits = Array.from(document.getElementsByClassName('2fa-digit')); | |
| const enteredCode = digits.map(d => d.value).join(''); | |
| const correctCode = current2FACode.replace(/\s/g, ''); | |
| verificationAttempts++; | |
| if (enteredCode === correctCode) { | |
| // Success | |
| document.getElementById('2fa-feedback').textContent = '2FA verification successful!'; | |
| document.getElementById('2fa-feedback').className = 'text-xs text-center text-green-400'; | |
| document.getElementById('2fa-rewards').classList.remove('hidden'); | |
| puddingProgress = Math.max(0, puddingProgress - 10); | |
| updateStatusBoard(); | |
| addPuddingActivity('> 2FA bypass attempt failed - access secured'); | |
| // Reset attempts | |
| verificationAttempts = 0; | |
| } else { | |
| // Failure | |
| document.getElementById('2fa-feedback').textContent = 'Verification failed - try again'; | |
| document.getElementById('2fa-feedback').className = 'text-xs text-center text-red-400'; | |
| // Increase difficulty after multiple attempts | |
| if (verificationAttempts >= 2) { | |
| addPuddingActivity('> Multiple failed 2FA attempts - increasing security'); | |
| obscure2FACode(); | |
| } | |
| } | |
| }); | |
| function verifyBiometric() { | |
| // Simulate biometric verification | |
| setTimeout(() => { | |
| const success = Math.random() > 0.3; // 70% success rate | |
| if (success) { | |
| document.getElementById('2fa-feedback').textContent = 'Biometric verification successful!'; | |
| document.getElementById('2fa-feedback').className = 'text-xs text-center text-green-400'; | |
| } else { | |
| document.getElementById('2fa-feedback').textContent = 'Biometric verification failed'; | |
| document.getElementById('2fa-feedback').className = 'text-xs text-center text-red-400'; | |
| } | |
| }, 1000); | |
| } | |
| function verifyPhysical() { | |
| // Simulate hardware key verification | |
| setTimeout(() => { | |
| const success = Math.random() > 0.2; // 80% success rate | |
| if (success) { | |
| document.getElementById('2fa-feedback').textContent = 'Hardware key verified!'; | |
| document.getElementById('2fa-feedback').className = 'text-xs text-center text-green-400'; | |
| } else { | |
| document.getElementById('2fa-feedback').textContent = 'Hardware key not recognized'; | |
| document.getElementById('2fa-feedback').className = 'text-xs text-center text-red-400'; | |
| } | |
| }, 1500); | |
| } | |
| // Workstation 3: Phishing Hunter | |
| function markPhishing(button) { | |
| const emailContainer = button.closest('.bg-gray-900'); | |
| emailContainer.classList.add('border', 'border-red-500'); | |
| document.getElementById('phishing-rewards').classList.remove('hidden'); | |
| puddingProgress = Math.max(0, puddingProgress - 8); | |
| updateStatusBoard(); | |
| addPuddingActivity('> Phishing attempt detected and blocked'); | |
| // Change button to show success | |
| button.textContent = 'Confirmed Phishing'; | |
| button.className = 'text-xs bg-red-700 px-3 py-1 rounded cursor-default'; | |
| button.onclick = null; | |
| // Disable the other button | |
| const otherButton = emailContainer.querySelector('button:not(.bg-red-900)'); | |
| otherButton.className = 'text-xs bg-gray-700 px-3 py-1 rounded cursor-default'; | |
| otherButton.onclick = null; | |
| } | |
| function markLegitimate(button) { | |
| const emailContainer = button.closest('.bg-gray-900'); | |
| emailContainer.classList.add('border', 'border-green-500'); | |
| // In this case, it's actually phishing, so PUDDING gains advantage | |
| puddingProgress = Math.min(100, puddingProgress + 15); | |
| updateStatusBoard(); | |
| addPuddingActivity('> User fell for phishing attempt - PUDDING gains access'); | |
| // Change button to show mistake | |
| button.textContent = 'Incorrect - Phishing'; | |
| button.className = 'text-xs bg-gray-700 px-3 py-1 rounded cursor-default'; | |
| button.onclick = null; | |
| // Disable the other button | |
| const otherButton = emailContainer.querySelector('button:not(.bg-green-900)'); | |
| otherButton.className = 'text-xs bg-gray-700 px-3 py-1 rounded cursor-default'; | |
| otherButton.onclick = null; | |
| } | |
| // Workstation 4: Risk Strategist | |
| function updateRiskPointer(value) { | |
| document.getElementById('risk-pointer').style.left = value + '%'; | |
| } | |
| function adjustRisk(amount) { | |
| const slider = document.getElementById('risk-slider'); | |
| let newValue = parseInt(slider.value) + amount; | |
| newValue = Math.max(0, Math.min(100, newValue)); | |
| slider.value = newValue; | |
| updateRiskPointer(newValue); | |
| } | |
| document.getElementById('submit-policy').addEventListener('click', function() { | |
| const riskValue = parseInt(document.getElementById('risk-slider').value); | |
| let feedback = document.getElementById('policy-feedback'); | |
| // For this scenario, the "correct" risk is between 60-80 | |
| if (riskValue >= 60 && riskValue <= 80) { | |
| feedback.textContent = 'Policy accepted - optimal risk assessment'; | |
| feedback.className = 'text-xs text-center text-green-400'; | |
| document.getElementById('policy-rewards').classList.remove('hidden'); | |
| puddingProgress = Math.max(0, puddingProgress - 7); | |
| updateStatusBoard(); | |
| addPuddingActivity('> Effective policy deployed - PUDDING countermeasures active'); | |
| } else if (riskValue < 60) { | |
| feedback.textContent = 'Risk underestimated - policy too lenient'; | |
| feedback.className = 'text-xs text-center text-yellow-400'; | |
| puddingProgress = Math.min(100, puddingProgress + 5); | |
| updateStatusBoard(); | |
| addPuddingActivity('> Weak policy detected - PUDDING exploiting vulnerabilities'); | |
| } else { | |
| feedback.textContent = 'Risk overestimated - policy too restrictive'; | |
| feedback.className = 'text-xs text-center text-yellow-400'; | |
| // Less impact than underestimating | |
| puddingProgress = Math.min(100, puddingProgress + 3); | |
| updateStatusBoard(); | |
| addPuddingActivity('> Restrictive policy detected - reduced efficiency'); | |
| } | |
| }); | |
| // Status Board and PUDDING Activity | |
| function updateStatusBoard() { | |
| document.getElementById('pudding-progress').innerHTML = | |
| `PUDDING progress: <span class="${getProgressColorClass()}">${puddingProgress}%</span>`; | |
| // Update other statuses based on puddingProgress | |
| if (puddingProgress < 30) { | |
| document.getElementById('password-status').innerHTML = 'Last password: <span class="text-green-400">Secure</span>'; | |
| document.getElementById('2fa-status').innerHTML = 'Last attempt: <span class="text-green-400">Successful</span>'; | |
| document.getElementById('phishing-status').innerHTML = 'Detected: <span class="text-green-400">3/5</span>'; | |
| document.getElementById('risk-status').innerHTML = 'Current risk: <span class="text-green-400">Low</span>'; | |
| } else if (puddingProgress < 60) { | |
| document.getElementById('password-status').innerHTML = 'Last password: <span class="text-yellow-400">Compromised</span>'; | |
| document.getElementById('2fa-status').innerHTML = 'Last attempt: <span class="text-yellow-400">Partial</span>'; | |
| document.getElementById('phishing-status').innerHTML = 'Detected: <span class="text-yellow-400">2/5</span>'; | |
| document.getElementById('risk-status').innerHTML = 'Current risk: <span class="text-yellow-400">Medium</span>'; | |
| } else { | |
| document.getElementById('password-status').innerHTML = 'Last password: <span class="text-red-400">Breached</span>'; | |
| document.getElementById('2fa-status').innerHTML = 'Last attempt: <span class="text-red-400">Failed</span>'; | |
| document.getElementById('phishing-status').innerHTML = 'Detected: <span class="text-red-400">1/5</span>'; | |
| document.getElementById('risk-status').innerHTML = 'Current risk: <span class="text-red-400">High</span>'; | |
| } | |
| } | |
| function getProgressColorClass() { | |
| if (puddingProgress < 30) return 'text-green-400'; | |
| if (puddingProgress < 60) return 'text-yellow-400'; | |
| return 'text-red-400'; | |
| } | |
| function addPuddingActivity(message) { | |
| const activityLog = document.getElementById('pudding-activity'); | |
| const newEntry = document.createElement('p'); | |
| newEntry.textContent = message; | |
| activityLog.appendChild(newEntry); | |
| activityLog.scrollTop = activityLog.scrollHeight; | |
| } | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', function() { | |
| start2FATimer(); | |
| updateStatusBoard(); | |
| // Random PUDDING activity | |
| setInterval(() => { | |
| const activities = [ | |
| '> PUDDING scanning network for vulnerabilities...', | |
| '> PUDDING attempting brute force attack...', | |
| '> PUDDING probing firewall defenses...', | |
| '> PUDDING analyzing previous password patterns...', | |
| '> PUDDING generating phishing templates...' | |
| ]; | |
| if (Math.random() > 0.7) { | |
| addPuddingActivity(activities[Math.floor(Math.random() * activities.length)]); | |
| } | |
| }, 10000); | |
| }); | |
| </script> | |
| </body> | |
| </html> |