Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>RC4 Encoder/Decoder</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: -apple-system, system-ui, sans-serif; | |
| } | |
| body { | |
| min-height: 100vh; | |
| background: linear-gradient(45deg, #1a1c20, #2d3436); | |
| color: #fff; | |
| padding: 20px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .container { | |
| width: 100%; | |
| max-width: 800px; | |
| background: rgba(255, 255, 255, 0.05); | |
| padding: 2rem; | |
| border-radius: 12px; | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); | |
| } | |
| h1 { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| color: #00ff9d; | |
| font-size: 2rem; | |
| } | |
| .tabs { | |
| display: flex; | |
| margin-bottom: 2rem; | |
| border-bottom: 2px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .tab { | |
| padding: 1rem 2rem; | |
| cursor: pointer; | |
| background: none; | |
| border: none; | |
| color: #fff; | |
| font-size: 1rem; | |
| opacity: 0.6; | |
| transition: all 0.3s; | |
| } | |
| .tab.active { | |
| opacity: 1; | |
| border-bottom: 2px solid #00ff9d; | |
| } | |
| .input-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| color: #00ff9d; | |
| } | |
| textarea, input { | |
| width: 100%; | |
| padding: 1rem; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 8px; | |
| color: #fff; | |
| font-size: 1rem; | |
| transition: all 0.3s; | |
| } | |
| textarea { | |
| min-height: 120px; | |
| resize: vertical; | |
| } | |
| textarea:focus, input:focus { | |
| outline: none; | |
| border-color: #00ff9d; | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| button { | |
| width: 100%; | |
| padding: 1rem; | |
| background: #00ff9d; | |
| border: none; | |
| border-radius: 8px; | |
| color: #1a1c20; | |
| font-size: 1rem; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| button:hover { | |
| background: #00cc7d; | |
| transform: translateY(-2px); | |
| } | |
| .result { | |
| margin-top: 1.5rem; | |
| padding: 1rem; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 8px; | |
| word-break: break-all; | |
| min-height: 60px; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .show { | |
| animation: fadeIn 0.3s ease-out; | |
| } | |
| @media (max-width: 600px) { | |
| .container { | |
| padding: 1rem; | |
| } | |
| .tab { | |
| padding: 0.8rem 1rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>RC4 Encoder/Decoder</h1> | |
| <div class="tabs"> | |
| <button class="tab active" onclick="switchTab('decode')" id="decodeTab">Decode</button> | |
| <button class="tab" onclick="switchTab('encode')" id="encodeTab">Encode</button> | |
| </div> | |
| <div id="decodeSection"> | |
| <div class="input-group"> | |
| <label>Base64 Encoded Text:</label> | |
| <textarea id="decodeInput" placeholder="Enter base64 encoded text..."></textarea> | |
| </div> | |
| <div class="input-group"> | |
| <label>RC4 Key:</label> | |
| <input type="text" id="decodeKey" placeholder="Enter RC4 key..."> | |
| </div> | |
| <button onclick="decode()">Decode</button> | |
| <div class="result" id="decodeResult"></div> | |
| </div> | |
| <div id="encodeSection" style="display: none;"> | |
| <div class="input-group"> | |
| <label>Text to Encode:</label> | |
| <textarea id="encodeInput" placeholder="Enter text to encode..."></textarea> | |
| </div> | |
| <div class="input-group"> | |
| <label>RC4 Key:</label> | |
| <input type="text" id="encodeKey" placeholder="Enter RC4 key..."> | |
| </div> | |
| <button onclick="encode()">Encode</button> | |
| <div class="result" id="encodeResult"></div> | |
| </div> | |
| </div> | |
| <script> | |
| function rc4(key, str) { | |
| let s = [], j = 0, x, res = ''; | |
| for (let i = 0; i < 256; i++) { | |
| s[i] = i; | |
| } | |
| for (let i = 0; i < 256; i++) { | |
| j = (j + s[i] + key.charCodeAt(i % key.length)) % 256; | |
| x = s[i]; | |
| s[i] = s[j]; | |
| s[j] = x; | |
| } | |
| let i = 0; | |
| j = 0; | |
| for (let y = 0; y < str.length; y++) { | |
| i = (i + 1) % 256; | |
| j = (j + s[i]) % 256; | |
| x = s[i]; | |
| s[i] = s[j]; | |
| s[j] = x; | |
| res += String.fromCharCode(str.charCodeAt(y) ^ s[(s[i] + s[j]) % 256]); | |
| } | |
| return res; | |
| } | |
| function decode() { | |
| const input = document.getElementById('decodeInput').value; | |
| const key = document.getElementById('decodeKey').value; | |
| const result = document.getElementById('decodeResult'); | |
| try { | |
| const decodedBase64 = atob(input); | |
| const decryptedText = rc4(key, decodedBase64); | |
| result.textContent = decryptedText; | |
| result.classList.remove('show'); | |
| void result.offsetWidth; | |
| result.classList.add('show'); | |
| } catch (e) { | |
| result.textContent = 'Error: Invalid input or key'; | |
| result.classList.add('show'); | |
| } | |
| } | |
| function encode() { | |
| const input = document.getElementById('encodeInput').value; | |
| const key = document.getElementById('encodeKey').value; | |
| const result = document.getElementById('encodeResult'); | |
| try { | |
| const encryptedText = rc4(key, input); | |
| const encodedBase64 = btoa(encryptedText); | |
| result.textContent = encodedBase64; | |
| result.classList.remove('show'); | |
| void result.offsetWidth; | |
| result.classList.add('show'); | |
| } catch (e) { | |
| result.textContent = 'Error: Invalid input or key'; | |
| result.classList.add('show'); | |
| } | |
| } | |
| function switchTab(tab) { | |
| const decodeSection = document.getElementById('decodeSection'); | |
| const encodeSection = document.getElementById('encodeSection'); | |
| const decodeTab = document.getElementById('decodeTab'); | |
| const encodeTab = document.getElementById('encodeTab'); | |
| if (tab === 'decode') { | |
| decodeSection.style.display = 'block'; | |
| encodeSection.style.display = 'none'; | |
| decodeTab.classList.add('active'); | |
| encodeTab.classList.remove('active'); | |
| } else { | |
| decodeSection.style.display = 'none'; | |
| encodeSection.style.display = 'block'; | |
| decodeTab.classList.remove('active'); | |
| encodeTab.classList.add('active'); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script> |