JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>GZIP Compression & Decompression Utility v1.0</title>
  <style>
    body { font-family: sans-serif; padding: 1rem; max-width: 800px; margin: auto; }
    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, #compressedInput, #decompressedOutput { height: 200px; }
    #output { height: 300px; white-space: pre; overflow: auto; }
    button { padding: 0.5rem 1rem; margin-top: 0.5rem; cursor: pointer; }
    .section { margin-top: 2rem; }
  </style>
</head>
<body>
  <h1>GZIP Compression & Decompression Utility v1.0</h1>

  <div class="section">
    <label for="payloadInput">Step 1: Enter HTML to Compress</label>
    <textarea id="payloadInput" placeholder="Paste full HTML page here..."></textarea>
    <button id="generateBtn">Compress HTML</button>
    <div id="stats"></div>
    <label for="output">Generated Compressed Runner Page</label>
    <textarea id="output" readonly placeholder="Generated runner page code..."></textarea>
  </div>

  <div class="section">
    <label for="compressedInput">Step 2: Paste Runner Page HTML</label>
    <textarea id="compressedInput" placeholder="Paste the entire generated runner page here..."></textarea>
    <button id="decompressBtn">Extract & Decompress</button>
    <label for="decompressedOutput">Restored Original Page</label>
    <textarea id="decompressedOutput" readonly placeholder="Original HTML will appear here..."></textarea>
  </div>

  <script>
  (function() {
    async function compress(input) {
      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);
 ...