<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown Escaper</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #121212;
            color: #e0e0e0;
            font-family: Arial, sans-serif;
        }

        .container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 90%;
            max-width: 600px;
        }

        .textbox, .output {
            width: 100%;
            padding: 15px;
            border-radius: 5px;
            font-size: 16px;
            font-family: monospace;
            white-space: pre-wrap;
        }

        .textbox {
            border: 1px solid #444;
            background-color: #1e1e1e;
            color: #e0e0e0;
        }

        .textbox:focus {
            outline: none;
            border-color: #0078d4;
        }

        .output {
            border: 1px solid #444;
            background-color: #333;
            color: #ffcc00;
            word-wrap: break-word;
        }

        .title {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="title">Markdown Escaper</h1>
        <label for="inputTextbox" class="sr-only">Input your markdown or ASCII art:</label>
        <textarea class="textbox" id="inputTextbox" rows="10" placeholder="Type your markdown or ASCII art here..."></textarea>
        <div class="output" id="outputField" aria-live="polite">Escaped output will appear here...</div>
    </div>

    <script>
        function escapeMarkdown(text) {
            return text.replace(/[\\`*{}\[\]()#+\-.!_>~|]/g, '\\$&');
        }

        function processInput(text) {
            return escapeMarkdown(text);
        }

        const inputTextbox = document.getElementById('inputTextbox');
        const outputField = document.getElementById('outputField');

        inputTextbox.addEventListener('input', () => {
            const userInput = inputTextbox.value;
            const processedText = processInput(userInput);
            outputField.textContent = processedText || 'Escaped output will appear here...';
        });
    </script>
</body>
</html>
