JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Firestore Database Editor v05</title>
  <style>body{margin:0;padding:0;font-family:sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;text-align:center;}.message{padding:1em;border-radius:5px;}.error{background-color:#ffe0e0;color:#d00;border:1px solid #d00;}.info{background-color:#e0f0ff;color:#0050a0;border:1px solid #0050a0;}}</style>
</head>
<body>
  <div id="content-wrapper"></div>
  <script>
    function customHash(str, rounds) {
      let h = [...str].reduce((sum, ch) => sum + ch.charCodeAt(0), 0);
      for (let i = 0; i < rounds; i++) {
        h = ((h << 5) - h) + (h >>> 2) + i;
        h ^= (h << 7) | (h >>> 3);
        h = Math.abs(h);
      }
      return h;
    }
    
    function base64ToBytes(base64) {
      const binString = atob(base64);
      return Uint8Array.from(binString, m => m.charCodeAt(0));
    }

    async function decompressData(inputBytes, format) {
      const blob = new Blob([inputBytes]);
      const ds = blob.stream().pipeThrough(new DecompressionStream(format));
      const reader = ds.getReader();
      const chunks = [];
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        chunks.push(value);
      }
      const decompressedBlob = new Blob(chunks);
      return new Uint8Array(await decompressedBlob.arrayBuffer());
    }

    function xorCrypt(inputBytes, keyBytes) {
      const outputBytes = new Uint8Array(inputBytes.length);
      for (let i = 0; i < inputBytes.length; i++) {
        outputBytes[i] = inputBytes[i] ^ keyBytes[i % keyBytes.length];
      }
      return outputBytes;
    }

    async function processAndRenderPage(base64EncodedData, keyGenText, finalCompressionFmt) {
      const finalCompressedBytes = base64ToBytes(base64EncodedData); // Base64 decode
      const encryptedBytes = await...