RC4-EnDecoder

Running

App Files Files Community

kolaslab commited on Nov 30, 2024

Commit

629c95c

verified ·

1 Parent(s): 815e811

Update index.html

Browse files

Files changed (1) hide show

index.html +212 -261

index.html CHANGED Viewed

@@ -1,315 +1,266 @@
 <!DOCTYPE html>
-<html>
 <head>
     <meta charset="UTF-8">
-    <title>Space Shooter</title>
     <style>
-        body {
             margin: 0;
-            overflow: hidden;
-            background: black;
             display: flex;
             justify-content: center;
             align-items: center;
-            height: 100vh;
-            font-family: Arial;
-            color: white;
         }
-        #gameCanvas {
-            border: 2px solid white;
-            background-image:
-                radial-gradient(white 1px, transparent 0),
-                radial-gradient(white 1px, transparent 0);
-            background-size: 50px 50px;
-            background-position: 0 0, 25px 25px;
-            display: none;
         }
-        #menu {
             text-align: center;
         }
-        .difficulty-btn {
-            padding: 10px 20px;
-            margin: 10px;
-            font-size: 18px;
-            cursor: pointer;
-            background: #333;
-            color: white;
-            border: 2px solid white;
-            border-radius: 5px;
         }
-        .difficulty-btn:hover {
-            background: #555;
         }
-        #score {
-            position: absolute;
-            top: 20px;
-            left: 20px;
-            font-size: 24px;
         }
-        #gameOver {
-            position: absolute;
-            font-size: 48px;
-            text-align: center;
-            display: none;
         }
-    </style>
-</head>
-<body>
-    <div id="menu">
-        <h1>Space Shooter</h1>
-        <h2>Select Difficulty:</h2>
-        <button class="difficulty-btn" onclick="startGame('easy')">Easy</button>
-        <button class="difficulty-btn" onclick="startGame('medium')">Medium</button>
-        <button class="difficulty-btn" onclick="startGame('hard')">Hard</button>
-    </div>
-    <div id="score">Score: <span id="scoreValue">0</span></div>
-    <canvas id="gameCanvas" width="800" height="600"></canvas>
-    <div id="gameOver">Game Over!<br>Press R to Restart</div>
-    <script>
-        const canvas = document.getElementById('gameCanvas');
-        const ctx = canvas.getContext('2d');
-        const scoreEl = document.getElementById('scoreValue');
-        const gameOverEl = document.getElementById('gameOver');
-        const menuEl = document.getElementById('menu');
-        let audioCtx;
-        let player = {
-            x: canvas.width/2,
-            y: 500,
-            speed: 5,
-            size: 30
-        };
-        let bullets = [];
-        let enemies = [];
-        let score = 0;
-        let gameOver = false;
-        let keys = {
-            left: false,
-            right: false
-        };
-        let gameConfig = {
-            easy: {
-                enemySpeed: 2,
-                spawnRate: 0.01,
-                playerSpeed: 5
-            },
-            medium: {
-                enemySpeed: 3,
-                spawnRate: 0.02,
-                playerSpeed: 6
-            },
-            hard: {
-                enemySpeed: 4,
-                spawnRate: 0.03,
-                playerSpeed: 7
-            }
-        };
-        let currentConfig;
-        function startGame(difficulty) {
-            menuEl.style.display = 'none';
-            canvas.style.display = 'block';
-            currentConfig = gameConfig[difficulty];
-            player.speed = currentConfig.playerSpeed;
-            resetGame();
-            if (!audioCtx) {
-                audio = setupAudio();
-            }
         }
-        function setupAudio() {
-            audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-            function playNote(freq, startTime, duration) {
-                const osc = audioCtx.createOscillator();
-                const gain = audioCtx.createGain();
-                osc.connect(gain);
-                gain.connect(audioCtx.destination);
-                osc.type = 'square';
-                osc.frequency.setValueAtTime(freq, startTime);
-                gain.gain.setValueAtTime(0.1, startTime);
-                gain.gain.exponentialRampToValueAtTime(0.01, startTime + duration);
-                osc.start(startTime);
-                osc.stop(startTime + duration);
-            }
-            function playBGM() {
-                const notes = [440, 523, 659, 784];
-                setInterval(() => {
-                    if (!gameOver) {
-                        playNote(notes[Math.floor(Math.random() * notes.length)],
-                                audioCtx.currentTime,
-                                0.1);
-                    }
-                }, 200);
-            }
-            function playShoot() {
-                playNote(880, audioCtx.currentTime, 0.1);
-            }
-            playBGM();
-            return { playShoot };
         }
-        function drawPlayer() {
-            ctx.fillStyle = 'yellow';
-            ctx.beginPath();
-            for (let i = 0; i < 5; i++) {
-                const angle = (i * 4 * Math.PI) / 5 - Math.PI / 2;
-                const x = player.x + player.size * Math.cos(angle);
-                const y = player.y + player.size * Math.sin(angle);
-                i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
-            }
-            ctx.closePath();
-            ctx.fill();
         }
-        function createEnemy() {
-            if (Math.random() < currentConfig.spawnRate) {
-                enemies.push({
-                    x: Math.random() * (canvas.width - 30) + 15,
-                    y: -30,
-                    speed: currentConfig.enemySpeed
-                });
-            }
         }
-        function updatePlayer() {
-            if (keys.left) {
-                player.x = Math.max(player.size, player.x - player.speed);
-            }
-            if (keys.right) {
-                player.x = Math.min(canvas.width - player.size, player.x + player.speed);
-            }
         }
-        function updateGame() {
-            updatePlayer();
-            bullets = bullets.filter(bullet => {
-                bullet.y -= 8;
-                return bullet.y > 0;
-            });
-            enemies = enemies.filter(enemy => {
-                enemy.y += enemy.speed;
-                if (Math.abs(enemy.x - player.x) < 30 &&
-                    Math.abs(enemy.y - player.y) < 30) {
-                    gameOver = true;
-                    gameOverEl.style.display = 'block';
-                }
-                return enemy.y < canvas.height;
-            });
-            bullets.forEach((bullet, bi) => {
-                enemies.forEach((enemy, ei) => {
-                    if (Math.abs(bullet.x - enemy.x) < 30 &&
-                        Math.abs(bullet.y - enemy.y) < 30) {
-                        bullets.splice(bi, 1);
-                        enemies.splice(ei, 1);
-                        score += 100;
-                        scoreEl.textContent = score;
-                    }
-                });
-            });
-            createEnemy();
         }
-        function draw() {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            drawPlayer();
-            ctx.fillStyle = 'white';
-            bullets.forEach(bullet => {
-                ctx.fillRect(bullet.x - 2, bullet.y - 8, 4, 16);
-            });
-            ctx.font = '30px Arial';
-            enemies.forEach(enemy => {
-                ctx.fillText('🐱', enemy.x - 15, enemy.y + 10);
-            });
         }
-        function gameLoop() {
-            if (!gameOver) {
-                updateGame();
-                draw();
-                requestAnimationFrame(gameLoop);
             }
         }
-        function resetGame() {
-            player.x = canvas.width/2;
-            bullets = [];
-            enemies = [];
-            score = 0;
-            gameOver = false;
-            scoreEl.textContent = '0';
-            gameOverEl.style.display = 'none';
-            gameLoop();
-        }
-        function returnToMenu() {
-            canvas.style.display = 'none';
-            menuEl.style.display = 'block';
-            gameOverEl.style.display = 'none';
         }
-        let audio;
-        document.addEventListener('keydown', (e) => {
-            if (gameOver) {
-                if (e.key.toLowerCase() === 'r') {
-                    returnToMenu();
-                }
-                return;
-            }
-            switch(e.key) {
-                case 'ArrowLeft':
-                    keys.left = true;
-                    break;
-                case 'ArrowRight':
-                    keys.right = true;
-                    break;
-                case ' ':
-                    bullets.push({
-                        x: player.x,
-                        y: player.y - 20
-                    });
-                    if (audio) audio.playShoot();
-                    break;
             }
-        });
-        document.addEventListener('keyup', (e) => {
-            switch(e.key) {
-                case 'ArrowLeft':
-                    keys.left = false;
-                    break;
-                case 'ArrowRight':
-                    keys.right = false;
-                    break;
             }
-        });
     </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>

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