<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word-Based Byte Encryption and Decryption</title>
    <style>
        /* General Reset and Body Styling */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #headerText {
            text-align: center;
        }
        body {
            font-family: 'Arial', sans-serif;
            background-color: #e3f2fd;
            color: #333;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 20px;
            transition: background-color 0.3s ease;
        }

        /* Header Styling */
        h1 {
            color: #1976d2;
            margin-bottom: 20px;
            font-size: 2.5rem;
            text-transform: uppercase;
            animation: fadeIn 1s ease-in-out;
        }

        /* Input and Textarea Styling */
        textarea, input, button {
            padding: 15px;
            font-size: 16px;
            margin: 10px 0;
            width: 80%;
            max-width: 500px;
            border-radius: 10px;
            border: 2px solid #1976d2;
            outline: none;
            transition: all 0.3s ease;
        }

        /* Button Styling */
        button {
            background-color: #1976d2;
            color: white;
            cursor: pointer;
            border: none;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        }

        /* Hover Effects */
        button:hover {
            background-color: #1565c0;
            transform: scale(1.05);
            box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
        }

        /* Textarea and Input Focus Effects */
        textarea:focus, input:focus {
            border-color: #0d47a1;
            box-shadow: 0px 0px 10px rgba(13, 71, 161, 0.3);
        }

        /* Output Section */
        .output {
            margin-top: 40px;
            background-color: #ffffff;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            animation: slideUp 1s ease-in-out;
            width: 100%;
            max-width: 700px;
        }

        .output h3 {
            color: #1976d2;
            font-size: 1.5rem;
        }

        .output p {
            font-size: 1.2rem;
            color: #0288d1;
            font-weight: bold;
        }

        .key {
            background-color: #bbdefb;
            padding: 5px;
            border-radius: 5px;
        }

        /* Key Animation */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Flexbox Containers */
        .form-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 600px;
        }

        .form-container label,
        .form-container button {
            width: 100%;
            margin-bottom: 20px;
        }

        /* Mobile Responsiveness */
        @media (max-width: 768px) {
            .output {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <h1>Word-Based Byte Encryption and Decryption</h1>

    <div class="form-container">
        <label id="headerText" for="inputText">Enter Text to Encrypt:</label>
        <textarea id="inputText" rows="4" placeholder="Type your text here..."></textarea>

        <label id="headerText" for="encryptionKey">Enter Encryption Key:</label>
        <input type="password" id="encryptionKey" placeholder="Enter your key (any word or phrase)">

        <div class="buttons">
            <button onclick="encryptText()">Encrypt Text</button>
            <button onclick="decryptText()">Decrypt Text</button>
        </div>
    </div>

    <div class="output">
        <h3>Encrypted Message:</h3>
        <p id="encryptedText"></p>
        <h3>Decrypted Message:</h3>
        <p id="decryptedText"></p>
    </div>

    <script>
          // Complete unique mapping of byte values (0-255) to random words
          const encodeMap = {
    0: 'dinosaur', 1: 'telescope', 2: 'parachute', 3: 'lightbulb', 4: 'penguin',
    5: 'moonlight', 6: 'sunflower', 7: 'notebook', 8: 'whistle', 9: 'guitar',
    10: 'robot', 11: 'octopus', 12: 'jellyfish', 13: 'vampire', 14: 'firetruck',
    15: 'snowstorm', 16: 'keyboard', 17: 'basketball', 18: 'airplane', 19: 'helicopter',
    20: 'swordfish', 21: 'beachball', 22: 'mushroom', 23: 'treasure', 24: 'strawberry',
    25: 'bicycle', 26: 'vacuum', 27: 'button', 28: 'anchor', 29: 'fountain',
    30: 'frost', 31: 'paradise', 32: 'dawn', 33: 'zipper', 34: 'cloud', 35: 'crayon',
    36: 'forest', 37: 'diamond', 38: 'carpet', 39: 'windmill', 40: 'balloon',
    41: 'teapot', 42: 'coffin', 43: 'tiger', 44: 'hurricane', 45: 'whale',
    46: 'garden', 47: 'castle', 48: 'comet', 49: 'galaxy', 50: 'puzzle',
    51: 'quilt', 52: 'electricity', 53: 'crimson', 54: 'butterfly', 55: 'storm',
    56: 'angel', 57: 'solar', 58: 'mermaid', 59: 'lighthouse', 60: 'shadow',
    61: 'angelic', 62: 'flame', 63: 'electric', 64: 'eagle', 65: 'blackberry',
    66: 'harbor', 67: 'sunbeam', 68: 'parrot', 69: 'lunar', 70: 'glimmer',
    71: 'cactus', 72: 'raven', 73: 'cheetah', 74: 'meadow', 75: 'firefly',
    76: 'flamingo', 77: 'mirage', 78: 'voyage', 79: 'frosty', 80: 'tornado',
    81: 'iceberg', 82: 'sparkle', 83: 'cherry', 84: 'sunrise', 85: 'pearl',
    86: 'shimmer', 87: 'blaze', 88: 'plasma', 89: 'volcano', 90: 'glow',
    91: 'reflect', 92: 'sky', 93: 'star', 94: 'moon', 95: 'rainbow',
    96: 'echo', 97: 'lullaby', 98: 'mist', 99: 'crystal', 100: 'wave',
    101: 'dragon', 102: 'night', 103: 'ocean', 104: 'twilight', 105: 'mercury',
    106: 'sun', 107: 'zenith', 108: 'harmony', 109: 'eclipse', 110: 'stormy',
    111: 'sunshine', 112: 'velocity', 113: 'glacier', 114: 'crater', 115: 'aurora',
    116: 'moonlit', 117: 'stellar', 118: 'quake', 119: 'pluto', 120: 'mars',
    121: 'nebula', 122: 'satellite', 123: 'explosion', 124: 'meteoric', 125: 'calm',
    126: 'blizzard', 127: 'stair', 128: 'clouds', 129: 'sunset', 130: 'rain',
    131: 'starlight', 132: 'horizon', 133: 'cosmic', 134: 'equinox', 135: 'orbit',
    136: 'cascade', 137: 'flair', 138: 'journey', 139: 'spectrum', 140: 'spark',
    141: 'pulse', 142: 'moonrise', 143: 'spirit', 144: 'volcanic', 145: 'mystic',
    146: 'sparkling', 147: 'skyline', 148: 'phoenix', 149: 'whisper', 150: 'rising',
    151: 'flames', 152: 'turbine', 153: 'shiver', 154: 'quartz', 155: 'haze',
    156: 'gravity', 157: 'freeze', 158: 'valley', 159: 'rush', 160: 'light',
    161: 'prism', 162: 'twist', 163: 'torrent', 164: 'mystery', 165: 'oasis',
    166: 'vortex', 167: 'nova', 168: 'reflection', 169: 'lightning', 170: 'starfall',
    171: 'apple', 172: 'shitter', 173: 'radiant', 174: 'celestial', 175: 'twinkle',
    176: 'flicker', 177: 'quicksilver', 178: 'shine', 179: 'nightfall', 180: 'meteor',
    181: 'crab', 182: 'bright', 183: 'halo', 184: 'dream', 185: 'flash',
    186: 'illusion', 187: 'shroud', 188: 'flare', 189: 'summit', 190: 'twin',
    191: 'serenity', 192: 'skyfall', 193: 'heaven', 194: 'black', 195: 'aura',
    196: 'save', 197: 'zoo', 198: 'game', 199: 'arc', 200: 'lemonade',
    201: 'clash', 202: 'expression', 203: 'calypse', 204: 'sweets', 205: 'trance',
    206: 'candy', 207: 'apples', 208: 'bowls', 209: 'whirl', 210: 'rainbows',
    211: 'blast', 212: 'strawberries', 213: 'zoos', 214: 'saves', 215: 'games',
    216: 'radiate', 217: 'storms', 218: 'glare', 219: 'climate', 220: 'day',
    221: 'strike', 222: 'nighttime', 223: 'infinity', 224: 'daylight', 225: 'burn',
    226: 'mango', 227: 'vaccum', 228: 'xbox', 229: 'milk', 230: 'ink',
    231: 'shining', 232: 'everything', 233: 'tide', 234: 'fire', 235: 'beatle',
    236: 'default', 237: 'burning', 238: 'tattoo', 239: 'clay', 240: 'crown',
    241: 'whirlpool', 242: 'brick', 243: 'red', 244: 'chime', 245: 'blue',
    246: 'solstice', 247: 'green', 248: 'ice', 249: 'ripple', 250: 'bore',
    251: 'swirl', 252: 'board', 253: 'shudder', 254: 'glint', 255: 'switch',
};

// , , , , , , , , , , , , , , season, , sand, diamond, gold, layer, message, wet, dirty, clean, burnt, cooked, laundry, grass, dirt

function findDuplicates(encodeMap) {
    // Create an object to store the frequency of each word
    let wordCount = [];
    let duplicates = [];

    // Loop over each entry in the encodeMap
    for (let key in encodeMap) {
        const word = encodeMap[key];
        if (wordCount.includes(word)) {
            duplicates.push(key);
            console.log(key);
        } else {
            wordCount.push(word)
        }
    }
    return duplicates;
}


    findDuplicates(encodeMap);

           // Reverse mapping for decoding
           const decodeMap = Object.fromEntries(
            Object.entries(encodeMap).map(([key, value]) => [value, Number(key)])
        );

        // Convert text to bytes (UTF-8 encoding)
        function textToBytes(text) {
            const encoder = new TextEncoder();
            return Array.from(encoder.encode(text));
        }

        // Convert bytes to words
        function bytesToWords(bytes) {
            return bytes.map(byte => encodeMap[byte] || `UNKNOWN_${byte}`);
        }

        // Convert words back to bytes
        function wordsToBytes(words) {
            return words.map(word => decodeMap[word] || -1);  // -1 is for any unknown word
        }

        // Encrypt function
        function encryptText() {
            const inputText = document.getElementById('inputText').value;
            const key = document.getElementById('encryptionKey').value;

            if (inputText === '' || key === '') {
                alert("Please provide both text and a key for encryption.");
                return;
            }

            // Convert text to bytes
            let bytes = textToBytes(inputText);

            // Simple encryption: shift bytes by the length of the key
            const keyLength = key.length;
            let encryptedBytes = bytes.map((byte, index) => byte ^ keyLength); // XOR with key length for simplicity

            // Convert encrypted bytes to words
            const encryptedWords = bytesToWords(encryptedBytes);

            // Reverse word order for extra complexity
            encryptedWords.reverse();

            // Display the encrypted message
            document.getElementById('encryptedText').textContent = encryptedWords.join(' ');
        }

        // Decrypt function
        function decryptText() {
            const encryptedText = document.getElementById('inputText').value;
            const key = document.getElementById('encryptionKey').value;

            if (encryptedText === '' || key === '') {
                alert("Please provide both encrypted text and a key for decryption.");
                return;
            }

            // Convert words to bytes
            let encryptedWords = encryptedText.split(' ');
            let encryptedBytes = wordsToBytes(encryptedWords);

            // Reverse the encrypted words to original order before decoding
            encryptedBytes.reverse();

            // Simple decryption: XOR with key length
            const keyLength = key.length;
            let decryptedBytes = encryptedBytes.map(byte => byte ^ keyLength); // XOR with key length for simplicity

            // Convert decrypted bytes back to text
            const decoder = new TextDecoder();
            const decodedText = decoder.decode(new Uint8Array(decryptedBytes.filter(byte => byte !== -1)));

            // Display the decrypted message
            document.getElementById('decryptedText').textContent = decodedText;
        }
    </script>
</body>
</html>
