<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Haven Code Translator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
        }
        .container {
            width: 80%;
            margin: auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        textarea {
            width: 100%;
            height: 150px;
            padding: 10px;
            font-size: 16px;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            font-size: 16px;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        #output {
            margin-top: 20px;
            padding: 10px;
            background-color: #eee;
            border-radius: 4px;
            white-space: pre-wrap;
        }
        .reverse-container {
            margin-top: 40px;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>Haven Code Translator</h1>
    <textarea id="inputText" placeholder="Enter text to translate..."></textarea>
    <button onclick="translateText()">Translate</button>
    <div id="output"></div>
</div>

<div class="reverse-container">
    <h1>Haven Code Reverse Translator</h1>
    <textarea id="reverseInputText" placeholder="Enter translated code to reverse..."></textarea>
    <button onclick="reverseTranslateText()">Reverse Translate</button>
    <div id="reverseOutput"></div>
</div>

<script>
const translationMap = {
    "A": "+==",
    "B": "++==",
    "C": "=++===+=",
    "D": "+===+",
    "E": "=====+",
    "F": "===+",
    "G": "+=+",
    "H": "=+++",
    "I": "=+====",
    "J": "+=+===",
    "K": "=+==+",
    "L": "+=+=+=",
    "M": "=++",
    "N": "=++++",
    "O": "==+++",
    "P": "++=++=",
    "Q": "+====+===",
    "R": "++===+==",
    "S": "+==+=+++",
    "T": "++++",   // Uppercase T (no hyphen)
    "U": "=====",
    "V": "+===+=+=++",
    "W": "+=++++++++",
    "X": "+++===",
    "Y": "+==+=++",
    "Z": "+=+==========",

    "a": "+==-",  
    "b": "++==-",  
    "c": "=++===+=-",  
    "d": "+===+-",  
    "e": "=====+-",  
    "f": "===+-",  
    "g": "+=+-",  
    "h": "=+++-",  
    "i": "=+====-",  
    "j": "+=+===-",  
    "k": "=+==+-",  
    "l": "+=+=+=-",  
    "m": "=++-",  
    "n": "=++++-",  
    "o": "==+++-",  
    "p": "++=++=-",  
    "q": "+====+---",  
    "r": "++===+==-",  
    "s": "+==+=+++-",  
    "t": "++++-",   // Lowercase t (hyphen added)
    "u": "=====-",  
    "v": "+===+=+=++-",  
    "w": "+=++++++++-",  
    "x": "+++---",  
    "y": "+==+=++-",  
    "z": "+=+----------",

    "0": "+",
    "1": "=",
    "2": "==",
    "3": "===",
    "4": "====",
    "5": "++",
    "6": "+=",
    "7": "+===",
    "8": "+====",
    "9": "+=====",

    ".": "+++++",
    ",": "++++==",
    "?": "+++===+",
    "!": "++==++",
    "'": "+==++=",
    "\"": "++===+",
    ":": "==++==",
    ";": "=++===",
    "@": "+===+==",
    "#": "+=+=+=+",
    "$": "==+====",
    "%": "+===+==+",
    "&": "+==+===",
    "(": "+=+==+",
    ")": "+=+=++",
    "+": "+++++++",
    "-": "++==+",
    "=": "===+===",
    "/": "+=+=+=",
    "*": "+=+====",
    " ": " "
};

// Create reverse map by reversing the translation map
const reverseTranslationMap = Object.fromEntries(
    Object.entries(translationMap).map(([key, value]) => [value, key])
);

function translateText() {
    const inputText = document.getElementById('inputText').value;
    let translatedText = "";

    // Iterate through each character of the input text
    for (let char of inputText) {
        if (char === " ") {
            // If it's a space, simply add a space in the translated text
            translatedText += " ";
        } else {
            let charToTranslate = char.toUpperCase();
            let translatedChar = translationMap[charToTranslate];

            if (translatedChar) {
                // If character is lowercase, add "-" to the end of translation
                if (char !== charToTranslate) {
                    translatedText += translatedChar + "- ";
                } else {
                    translatedText += translatedChar + " ";  // Add a space after each translation
                }
            } else {
                // For non-mapped characters (e.g., punctuation), add them with space
                translatedText += char + " ";
            }
        }
    }

    // Display the translated text and trim trailing space
    document.getElementById('output').textContent = translatedText.trim();
}



function reverseTranslateText() {
    const reverseInputText = document.getElementById('reverseInputText').value;
    let reverseTranslatedText = "";

    // Split the reverse input by spaces to get individual blocks
    const reverseCodeParts = reverseInputText.split(" ");
    let currentBlock = "";

    // Loop through all the blocks in the reverse input
    for (let part of reverseCodeParts) {
        currentBlock += part;  // Build the block by concatenating parts

        // Check if the current block exists in the reverse translation map
        if (reverseTranslationMap[currentBlock]) {
            reverseTranslatedText += reverseTranslationMap[currentBlock];  // Add the decoded character
            currentBlock = "";  // Reset the block after a match
        } else {
            // If we have a space between words, just add it to the output
            if (part === "") {
                reverseTranslatedText += " ";  // Add space for word separation
            }
        }
    }

    // Ensure the text is trimmed to remove extra spaces
    reverseTranslatedText = reverseTranslatedText.trim();

    // Display the reverse translated text
    document.getElementById('reverseOutput').textContent = reverseTranslatedText;
}




</script>

</body>
</html>
