<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>?!</title>
    <link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">
</head>
<body>

<header>
    <h1>
        i love you so much babi!! <img src="https://media.tenor.com/HoocNDDrUKgAAAAi/rexx.gif" style="margin-bottom:-2px;width: 41px;">
    </h1>
    <p style="color:rgb(136,136,136)">
        yea this site looks kinda boring because its pure black but i dont really do web development T_T
    </p>
</header>

<blockquote>
    "it takes 1h to go from manila to luzon by nyeeeeer nyeeer"<br><br>– chelpus
</blockquote>

<hr>

<div class="container">
    <h2>a stupidly simple custom encryption algorithm</h2>
    <p>
        this will surely look really suspicious especially to tita but u can say that our messages glitched or something.. 😭<br><br><i>the text box should be expandable btw</i>
    </p>
    <textarea id="inputText" placeholder="enter what u wanna say here :3"></textarea>
    <br>
    <button class="encrypt" onclick="encryptText()">magic</button>
    <button class="decrypt" onclick="decryptText()">unmagic</button>
</div>

<script>
    function caesarCipher(text, shift) {
        return text.split('').map(char => {
            if (char.match(/[a-z]/i)) {
                let code = char.charCodeAt(0);
                let base = code >= 65 && code <= 90 ? 65 : 97; 
                return String.fromCharCode(((code - base + shift) % 26 + 26) % 26 + base);
            }
            return char;
        }).join('');
    }

    function doubleBase64Encode(text) {
        return btoa(btoa(text));
    }

    function doubleBase64Decode(text) {
        return atob(atob(text));
    }

    function xorCipher(text, key) {
        return text.split('').map(char => 
            String.fromCharCode(char.charCodeAt(0) ^ key)
        ).join('');
    }

    function encryptText() {
        const input = document.getElementById('inputText').value;
        const caesarShift = 3; 
        const xorKey = 42; // You can change this key
        let encrypted = caesarCipher(input, caesarShift);
        encrypted = doubleBase64Encode(encrypted);
        encrypted = xorCipher(encrypted, xorKey);
        document.getElementById('inputText').value = encrypted;
    }

    function decryptText() {
        const input = document.getElementById('inputText').value;
        const caesarShift = 3; 
        const xorKey = 42; 
        let decrypted = xorCipher(input, xorKey);
        decrypted = doubleBase64Decode(decrypted);
        decrypted = caesarCipher(decrypted, -caesarShift);
        document.getElementById('inputText').value = decrypted;
    }
</script>


</body>
</html>
