JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Generator</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 1rem;
    }
    #output {
      width: 100%;
      height: 300px;
      font-family: monospace;
      white-space: pre;
      overflow: auto;
    }
    #description {
      margin-top: 1.5rem;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <button id="generateBtn">Generate Page</button>

  <div id="description">
    Below is the generated HTML for the standalone runner page:
  </div>
  <textarea id="output" readonly placeholder="Your generated page code will appear here…"></textarea>

  <script>
    // Derive a stable numeric hash from the password
    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;
    }

    // Compress via gzip, then XOR encrypt the compressed bytes
    async function compressAndEncrypt(input, key) {
      // 1) compress
      const blobStream = new Blob([input]).stream();
      const gzipStream  = blobStream.pipeThrough(new CompressionStream('gzip'));
      const reader      = gzipStream.getReader();
      const chunks      = [];
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        chunks.push(value);
      }
      const compressedBlob  = new Blob(chunks);
      const compressedBytes = new Uint8Array(await compressedBlob.arrayBuffer());

      // 2) XOR against key bytes
      const keyBytes = new TextEncoder().encode(key);
      const out      = new Uint8Array(compressedBytes.length);
      for (let i = 0; i < compressedBytes.length; i++) {
        out[i] = compressedBytes[i] ^ keyBytes[i % keyBytes.length];
      }

      // 3) return as string of raw bytes
      return...