<!DOCTYPE html>
<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>