<!DOCTYPE html>
<html>
<head>
  <title>HTML Encoder/Decoder</title>
  <style>
    /* Define TeX RGB Colors */
    :root {
      --red: rgb(255, 0, 0);
      --green: rgb(0, 255, 0);
      --blue: rgb(0, 0, 255);
      --cyan: rgb(0, 255, 255);
      --magenta: rgb(255, 0, 255);
      --yellow: rgb(255, 255, 0);
      --black: rgb(0, 0, 0);
      --white: rgb(255, 255, 255);
      --gray: rgb(128, 128, 128);
      --light-gray: rgb(211, 211, 211);
      --dark-gray: rgb(169, 169, 169);
      --lime: rgb(50, 205, 50);
      --orange: rgb(255, 165, 0);
      --purple: rgb(128, 0, 128);
      --brown: rgb(165, 42, 42);
      --pink: rgb(255, 192, 203);
    }

    body {
      background-image: url('https://i.ibb.co.com/VB93zFP/1000003039.png'); /* Replace with your image URL */
      background-size: cover; /* Makes the image cover the entire background */
      background-repeat: no-repeat; /* Prevents the image from repeating */
      background-position: center; /* Centers the image */
      color: var(--cyan); /* Cyan text */
      font-family: 'Courier New', monospace;
      text-align: center;
    }

    textarea {
      width: 90%;
      height: 100px;
      margin: 10px;
      padding: 10px;
      font-family: 'Courier New', monospace;
      font-size: 16px;
      background-color: var(--black); /* Black background */
      color: var(--cyan); /* Cyan text */
      border: 2px solid var(--red); /* Red border */
      outline: none;
    }

    button {
      width: 100px;
      padding: 10px;
      margin: 10px;
      font-family: 'Courier New', monospace;
      font-size: 16px;
      color: var(--cyan); /* Cyan text */
      background-color: var(--black); /* Black background */
      border: 2px solid var(--red); /* Red border */
      cursor: pointer;
    }

    button:hover {
      background-color: var(--cyan); /* Cyan on hover */
      color: var(--black); /* Black text */
    }

    .encode-btn {
      background-color: var(--lime); /* Lime button */
      color: var(--red); /* Red text */
    }

    .decode-btn {
      background-color: var(--lime); /* Lime button */
      color: var(--green); /* Green text */
    }

    .clear-btn {
      color: var(--yellow); /* Yellow text */
    }
  </style>
</head>
<body>
  <h1>HTML Encoder/Decoder</h1>
  <textarea id="inputText" placeholder="Enter text here"></textarea><br>
  <button class="clear-btn" onclick="clearText()">CLEAR</button>
  <button onclick="copyText()">COPY</button>
  <button onclick="pasteText()">PASTE</button><br><br>

  <button class="encode-btn" onclick="encodeText()">ENCODE</button>
  <button class="decode-btn" onclick="decodeText()">DECODE</button><br><br>

  <textarea id="outputText" readonly></textarea><br>
  <button class="clear-btn" onclick="clearOutput()">CLEAR</button>
  <button onclick="copyOutput()">COPY</button>

  <script>
    function encodeText() {
      const input = document.getElementById('inputText').value;
      const encoded = input
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
      document.getElementById('outputText').value = encoded;
    }

    function decodeText() {
      const input = document.getElementById('inputText').value;
      const textarea = document.createElement('textarea');
      textarea.innerHTML = input;
      document.getElementById('outputText').value = textarea.value;
    }

    function clearText() {
      document.getElementById('inputText').value = '';
    }

    function clearOutput() {
      document.getElementById('outputText').value = '';
    }

    function copyText() {
      const input = document.getElementById('inputText');
      input.select();
      document.execCommand('copy');
    }

    function copyOutput() {
      const output = document.getElementById('outputText');
      output.select();
      document.execCommand('copy');
    }

    function pasteText() {
      navigator.clipboard.readText().then((text) => {
        document.getElementById('inputText').value = text;
      });
    }
  </script>
</body>
</html>