<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Security Algorithms Visualizer</title> <link rel="stylesheet" href="style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script> </head> <body> <div class="container"> <aside class="sidebar"> <h2>Algorithms</h2> <nav> <button onclick="showSection('hashing')">Hashing</button> <button onclick="showSection('encryption')">Encryption</button> <button onclick="showSection('jwt')">JWT</button> <button onclick="showSection('oauth")>OAuth 2.0</button> </nav> </aside> <main class="content"> <section id="hashing" class="algorithm-section"> <h3>Hash Functions</h3> <div class="demo-box"> <input type="text" id="hashInput" placeholder="Enter text to hash"> <select id="hashAlgorithm"> <option value="SHA256">SHA-256</option> <option value="MD5">MD5</option> </select> <button onclick="computeHash()">Hash</button> <div id="hashOutput" class="output"></div> </div> </section> <section id="encryption" class="algorithm-section hidden"> <h3>Symmetric Encryption (AES)</h3> <div class="demo-box"> <input type="text" id="encryptInput" placeholder="Enter text to encrypt"> <input type="password" id="encryptKey" placeholder="Enter secret key"> <button onclick="encryptText()">Encrypt</button> <div id="encryptOutput" class="output"></div> </div> </section> <section id="jwt" class="algorithm-section hidden"> <h3>JSON Web Tokens</h3> <div class="demo-box"> <textarea id="jwtPayload" placeholder='{"user": "admin", "role": "superuser"}'></textarea> <button onclick="generateJWT()">Generate Token</button> <div id="jwtOutput" class="output"></div> </div> </section> <section id="oauth" class="algorithm-section hidden"> <h3>OAuth 2.0 Flow</h3> <div class="flow-diagram"> <div class="step" id="step1">User Requests Access</div> <div class="step" id="step2">Authorization Server</div> <div class="step" id="step3">Access Token</div> <div class="step" id="step4">Resource Server</div> </div> <button onclick="startOAuthFlow()">Start OAuth Flow</button> </section> </main> </div> <script src="script.js"></script> </body> </html> </jitFile> * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Arial', sans-serif; background-color: #1a1a1a; color: #fff; } .container { display: flex; min-height: 100vh; } .sidebar { width: 250px; background-color: #2d2d2d; padding: 20px; } .sidebar button { display: block; width: 100%; padding: 10px; margin: 5px 0; background-color: #4CAF50; border: none; color: white; cursor: pointer; border-radius: 4px; } .content { flex: 1; padding: 20px; } .algorithm-section { margin-bottom: 30px; } .demo-box { background-color: #333; padding: 20px; border-radius: 8px; margin-top: 15px; } input, select, textarea { width: 100%; padding: 8px; margin: 8px 0; background-color: #444; border: 1px solid #555; color: #fff; border-radius: 4px; } button { background-color: #008CBA; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; margin: 5px 0; } .output { margin-top: 10px; padding: 10px; background-color: #222; border-radius: 4px; word-wrap: break-word; } .flow-diagram { display: flex; justify-content: space-between; margin: 20px 0; } .step { width: 23%; padding: 15px; text-align: center; background-color: #4CAF50; border-radius: 8px; opacity: 0.3; } .hidden { display: none; } function showSection(sectionId) { document.querySelectorAll('.algorithm-section').forEach(section => { section.classList.add('hidden'); }); document.getElementById(sectionId).classList.remove('hidden'); } function computeHash() { const input = document.getElementById('hashInput').value; const algorithm = document.getElementById('hashAlgorithm').value; let hash; if (algorithm === 'SHA256') { hash = CryptoJS.SHA256(input).toString(CryptoJS.enc.Hex); } else if (algorithm === 'MD5') { hash = CryptoJS.MD5(input).toString(CryptoJS.enc.Hex); } document.getElementById('hashOutput').innerHTML = ` ${algorithm} Hash:
${hash} `; } function encryptText() { const text = document.getElementById('encryptInput').value; const key = document.getElementById('encryptKey').value; const encrypted = CryptoJS.AES.encrypt(text, key).toString(); const decrypted = CryptoJS.AES.decrypt(encrypted, key).toString(CryptoJS.enc.Utf8); document.getElementById('encryptOutput').innerHTML = ` Encrypted: ${encrypted}
Decrypted: ${decrypted} `; } function generateJWT() { const payload = document.getElementById('jwtPayload').value; try { const parsedPayload = JSON.parse(payload); const header = { alg: 'HS256', typ: 'JWT' }; const encodedHeader = btoa(JSON.stringify(header)); const encodedPayload = btoa(JSON.stringify(parsedPayload)); const signature = CryptoJS.HmacSHA256( `${encodedHeader}.${encodedPayload}`, 'secret_key' ).toString(CryptoJS.enc.Base64); const jwt = `${encodedHeader}.${encodedPayload}.${signature}`; document.getElementById('jwtOutput').innerHTML = ` JWT:
${jwt} `; } catch (e) { alert('Invalid JSON payload'); } } function startOAuthFlow() { const steps = document.querySelectorAll('.step'); steps.forEach(step => step.style.opacity = '0.3'); let delay = 0; steps.forEach((step, index) => { setTimeout(() => { step.style.opacity = '1'; step.style.transform = 'scale(1.05)'; setTimeout(() => step.style.transform = 'scale(1)', 500); }, delay); delay += 1000; }); }