kissge · January 24, 2025 11:16
diff --git a/H4sI.html b/H4sI.html
 <!DOCTYPE html>
 <html lang="ja">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>H4sI</title>
 </head>
 <body>
  <textarea id="raw" autofocus placeholder="ここに平文を入力"></textarea>
  <div id="bottom">
    <div id="output"></div>
    <div id="count"></div>
  </div>
  <textarea id="encrypted" placeholder="ここに暗号文を入力"></textarea>

  <script type="module">
    import pako from 'https://esm.sh/[email protected]';

    document.getElementById('raw').addEventListener('input', () => {
      const raw = document.getElementById('raw').value;
      const compressed = pako.gzip(raw);
      const encoded = base64(compressed);
      document.getElementById('output').textContent = encoded;
      document.getElementById('count').textContent = encoded.length;
      document.getElementById('count').style.color = encoded.length > 280 ? 'red' : '';
    });

    document.getElementById('encrypted').addEventListener('input', () => {
      const encrypted = document.getElementById('encrypted').value;
      const decoded = Uint8Array.from(atob(encrypted).split('').map(c => c.charCodeAt()));
      const decompressed = pako.ungzip(decoded, { to: 'string' });
      document.getElementById('raw').value = decompressed;
    });

    function base64(bytes) {
      return btoa(
        bytes.reduce((acc, current) => acc + String.fromCharCode(current), "")
      );
    }
  </script>

  <style>
    body {
      padding: 1em;
    }

    textarea {
      width: 100%;
      height: 5em;
    }

    #bottom {
      display: flex;
      justify-content: space-between;
      gap: 1em;
      margin: 0.5em 0.25em 1em;
      font-family: monospace;
    }

    #output {
      user-select: all;
      white-space: nowrap;
      overflow-x: hidden;
      text-overflow: ellipsis;
    }
  </style>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>H4sI</title>
	</head>
	<body>
	<textarea id="raw" autofocus placeholder="ここに平文を入力"></textarea>
	<div id="bottom">
	<div id="output"></div>
	<div id="count"></div>
	</div>
	<textarea id="encrypted" placeholder="ここに暗号文を入力"></textarea>

	<script type="module">
	import pako from 'https://esm.sh/[email protected]';

	document.getElementById('raw').addEventListener('input', () => {
	const raw = document.getElementById('raw').value;
	const compressed = pako.gzip(raw);
	const encoded = base64(compressed);
	document.getElementById('output').textContent = encoded;
	document.getElementById('count').textContent = encoded.length;
	document.getElementById('count').style.color = encoded.length > 280 ? 'red' : '';
	});

	document.getElementById('encrypted').addEventListener('input', () => {
	const encrypted = document.getElementById('encrypted').value;
	const decoded = Uint8Array.from(atob(encrypted).split('').map(c => c.charCodeAt()));
	const decompressed = pako.ungzip(decoded, { to: 'string' });
	document.getElementById('raw').value = decompressed;
	});

	function base64(bytes) {
	return btoa(
	bytes.reduce((acc, current) => acc + String.fromCharCode(current), "")
	);
	}
	</script>

	<style>
	body {
	padding: 1em;
	}

	textarea {
	width: 100%;
	height: 5em;
	}

	#bottom {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	margin: 0.5em 0.25em 1em;
	font-family: monospace;
	}

	#output {
	user-select: all;
	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
	}
	</style>
	</body>
	</html>