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;
    }
    label {
      display: block;
      margin: 1rem 0 0.5rem;
      font-weight: bold;
    }
    textarea {
      width: 100%;
      box-sizing: border-box;
      font-family: monospace;
      margin-bottom: 1rem;
    }
    #payloadInput {
      height: 200px;
    }
    #output {
      height: 300px;
      white-space: pre;
      overflow: auto;
    }
    #description {
      margin-top: 1.5rem;
      font-weight: bold;
    }
    button {
      padding: 0.5rem 1rem;
      margin-top: 0.5rem;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Encrypted Page Generator</h1>

  <label for="payloadInput">Paste full HTML page here:</label>
  <textarea id="payloadInput" placeholder="&lt;!DOCTYPE html&gt;&#10;&lt;html&gt;…"></textarea>

  <button id="generateBtn">Generate Page</button>

  <div id="description">
    Below is the HTML for your standalone runner page:
  </div>
  <textarea id="output" readonly placeholder="Generated runner page code…"></textarea>

  <script>
    // Derive a 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) {
      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...