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

        .converter {
          background-color: #1e1e1e;
          padding: 20px;
          border-radius: 12px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
          width: 100%;
          max-width: 360px;
          margin-bottom: 20px;
        }

        label {
          display: block;
          font-weight: bold;
          margin-bottom: 8px;
        }

        textarea, input[type="text"] {
          width: 100%;
          padding: 8px;
          border: 1px solid #4a4a4a;
          border-radius: 6px;
          background-color: #252525;
          color: #e0e0e0;
          margin-bottom: 12px;
          resize: none;
        }

        button {
          background-color: #00796b;
          color: white;
          padding: 8px 12px;
          border: none;
          border-radius: 6px;
          cursor: pointer;
          font-size: 14px;
        }

        button:hover {
          background-color: #004d40;
        }

        .output-container {
          display: flex;
          align-items: center;
        }

        #copy-button {
          background-color: #388e3c;
          color: white;
          padding: 8px;
          margin-left: 8px;
          border: none;
          border-radius: 6px;
          cursor: pointer;
        }

        #copy-button:hover {
          background-color: #2e7d32;
        }

        #clear-button {
          background-color: #d32f2f;
          color: white;
          padding: 8px;
          margin-top: 10px;
          border: none;
          border-radius: 6px;
          cursor: pointer;
        }

        #clear-button:hover {
          background-color: #c62828;
        }

        #paste-button, #paste-base64-button {
          background-color: #1976d2;
          color: white;
          padding: 8px;
          margin-left: 8px;
          border: none;
          border-radius: 6px;
          cursor: pointer;
        }

        #paste-button:hover, #paste-base64-button:hover {
          background-color: #1565c0;
        }

        .popup {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) scale(0.8);
          background-color: #388e3c;
          color: white;
          padding: 10px 15px;
          border-radius: 8px;
          font-size: 14px;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          z-index: 9999;
          opacity: 0;
          transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .popup.show {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
        }

        @media screen and (max-width: 480px) {
          .converter {
            max-width: 100%;
            padding: 15px;
          }

          textarea, input[type="text"] {
            font-size: 14px;
            padding: 6px;
          }

          button {
            font-size: 12px;
            padding: 6px;
          }
        }

        footer {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          background-color: #1e1e1e;
          color: #e0e0e0;
          text-align: center;
          padding: 10px 0;
          font-size: 14px;
          box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
        }

        footer a {
          color: #388e3c;
          text-decoration: none;
        }
      </style>
    </head>
    <body>
      <div class="converter">
        <h1>Base64 to Hex Converter</h1>
        <label for="json-input">JSON Input:</label>
        <div class="output-container">
          <textarea id="json-input" rows="4" placeholder='Enter JSON containing Base64 values...' oninput="autoConvertAndCopy()"></textarea>
          <button id="paste-button" onclick="pasteFromClipboard('json-input')">Paste</button>
        </div>

        <label for="base64-input">Base64 Input:</label>
        <div class="output-container">
          <textarea id="base64-input" rows="2" placeholder='Enter Base64 value here...' oninput="autoConvertAndCopy()"></textarea>
          <button id="paste-base64-button" onclick="pasteFromClipboard('base64-input')">Paste</button>
        </div>

        <button id="clear-button" onclick="clearAllFields()">Clear All</button>

        <label for="json-output">Converted JSON Output:</label>
        <div class="output-container">
          <textarea id="json-output" rows="4" placeholder="Converted JSON output will appear here..." readonly></textarea>
          <button id="copy-button" onclick="copyToClipboard()">Copy</button>
        </div>
      </div>

      <footer>
        <p>Made by <a href="https://t.me/sktechsports" target="_blank">SK TECH</a></p>
      </footer>

      <script>
        function base64ToHex(base64) {
          try {
            base64 = base64.replace(/_/g, '/').replace(/-/g, '+');
            const binaryString = atob(base64);
            return Array.from(binaryString).map(char => {
              const hex = char.charCodeAt(0).toString(16).padStart(2, '0');
              return hex;
            }).join('');
          } catch (e) {
            console.error('Invalid Base64 input:', e);
            return null;
          }
        }

        function autoConvertAndCopy() {
          const jsonInput = document.getElementById("json-input").value.trim();
          const base64Input = document.getElementById("base64-input").value.trim();

          if (base64Input) {
            if (base64Input.includes(':')) {
              const [firstPart, secondPart] = base64Input.split(':');
              const [firstHex, secondHex] = [firstPart, secondPart].map(base64ToHex);

              document.getElementById("json-output").value = firstHex && secondHex ? firstHex + ":" + secondHex : "Invalid Base64 input.";
              if (firstHex && secondHex) copyToClipboard();
              return;
            }

            const hexValue = base64ToHex(base64Input);
            if (hexValue) {
              document.getElementById("json-output").value = hexValue;
              copyToClipboard();
              return;
            }
          }

          if (jsonInput) {
            let jsonData;
            try {
              jsonData = JSON.parse(jsonInput);
            } catch {
              return;
            }

            const convertBase64InJson = obj => {
              if (Array.isArray(obj)) return obj.map(convertBase64InJson);
              if (typeof obj === 'object' && obj) {
                if (obj.kid && obj.k) {
                  const [kidHex, kHex] = [obj.kid, obj.k].map(base64ToHex);
                  return kidHex && kHex ? kidHex + ":" + kHex : obj;
                }

                for (const key in obj) {
                  if (obj.hasOwnProperty(key)) obj[key] = convertBase64InJson(obj[key]);
                }
              }
              return obj;
            };

            const convertedJson = convertBase64InJson(jsonData);
            if (convertedJson) {
              document.getElementById("json-output").value = JSON.stringify(convertedJson, null, 2);
              copyToClipboard();
            }
          }
        }

        function copyToClipboard() {
          const outputTextarea = document.getElementById("json-output");
          outputTextarea.select();
          navigator.clipboard.writeText(outputTextarea.value).then(() => {
            showCopySuccessPopup();
          }).catch(err => {
            alert('Failed to copy: ' + err);
          });
        }

        function showCopySuccessPopup() {
          const popup = document.createElement('div');
          popup.classList.add('popup');
          popup.textContent = "Copied successfully!";
          document.body.appendChild(popup);
          setTimeout(() => popup.classList.add('show'), 10);
          setTimeout(() => {
            popup.classList.remove('show');
            setTimeout(() => document.body.removeChild(popup), 300);
          }, 2000);
        }

        function clearAllFields() {
          document.getElementById("json-input").value = "";
          document.getElementById("json-output").value = "";
          document.getElementById("base64-input").value = "";
        }

        function pasteFromClipboard(targetId) {
          navigator.clipboard.readText().then(text => {
            document.getElementById(targetId).value = text;
            autoConvertAndCopy();
          }).catch(err => {
            alert("Failed to read clipboard contents: " + err);
          });
        }
      </script>
    </body>
    </html>