sareiodata · August 13, 2025 10:38
diff --git a/runner.html b/runner.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>PHP Runner</title>
 <style>
 body { margin:0; font-family:sans-serif; display:flex; flex-direction:column; height:100vh; }
 #editor, #output { flex:1; padding:8px; box-sizing:border-box; font-family:monospace; font-size:16px; width:100%; }
 #output { overflow:auto; background:#f9f9f9; }
 #tabs { display:flex; height:40px; }
 #tabs button { flex:1; border:none; background:#eee; font-size:16px; }
 #tabs button.active { background:#ddd; font-weight:bold; }
 .hidden { display:none; }
 </style>
 </head>
 <body>

 <textarea id="editor"><?php echo "Hello World!"; ?></textarea>
 <div id="output" class="hidden"></div>

 <div id="tabs">
  <button id="codeTab" class="active">Code</button>
  <button id="renderTab">Render</button>
 </div>

 <!-- Pako for gzip -->
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pako.min.js"></script>

 <!-- php-wasm from unpkg -->
 <script type="module">
 import { PhpWeb } from 'https://unpkg.com/[email protected]/PhpWeb.mjs';

 const php = new PhpWeb();

 const editor = document.getElementById('editor');
 const output = document.getElementById('output');
 const codeTab = document.getElementById('codeTab');
 const renderTab = document.getElementById('renderTab');

 function gzipBase64(str) {
  const compressed = pako.gzip(str);
  let binary = '';
  compressed.forEach(b => binary += String.fromCharCode(b));
  return btoa(binary);
 }

 function ungzipBase64(b64) {
  const binary = atob(b64);
  const bytes = Uint8Array.from(binary, c => c.charCodeAt(0));
  return pako.ungzip(bytes, { to: 'string' });
 }

 // Load from URL
 const params = location.search.substring(1).split('&');
 let phpParam = null;
 if(params.length > 1 && params[1].startsWith('php=')) {
  phpParam = params[1].substring(4);
  try { editor.value = ungzipBase64(phpParam); } catch(e){ console.error(e); }
 }

 // Update URL when typing
 editor.addEventListener('input', () => {
  const gistId = params[0];
  const encoded = gzipBase64(editor.value);
  history.replaceState(null,'',`?${gistId}&php=${encoded}`);
 });

 // Tabs
 codeTab.addEventListener('click', ()=>{
  editor.classList.remove('hidden');
  output.classList.add('hidden');
  codeTab.classList.add('active');
  renderTab.classList.remove('active');
 });

 renderTab.addEventListener('click', ()=>{
  php.addEventListener('ready', ()=>{
    php.run(editor.value).then(result=>{
      output.innerHTML = result;
    }).catch(e=>{
      output.textContent = "Error: "+e;
    });
  });
  editor.classList.add('hidden');
  output.classList.remove('hidden');
  renderTab.classList.add('active');
  codeTab.classList.remove('active');
 });

 // Auto-render if code in URL
 if(phpParam) renderTab.click();
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>PHP Runner</title>
	<style>
	body { margin:0; font-family:sans-serif; display:flex; flex-direction:column; height:100vh; }
	#editor, #output { flex:1; padding:8px; box-sizing:border-box; font-family:monospace; font-size:16px; width:100%; }
	#output { overflow:auto; background:#f9f9f9; }
	#tabs { display:flex; height:40px; }
	#tabs button { flex:1; border:none; background:#eee; font-size:16px; }
	#tabs button.active { background:#ddd; font-weight:bold; }
	.hidden { display:none; }
	</style>
	</head>
	<body>

	<textarea id="editor"><?php echo "Hello World!"; ?></textarea>
	<div id="output" class="hidden"></div>

	<div id="tabs">
	<button id="codeTab" class="active">Code</button>
	<button id="renderTab">Render</button>
	</div>

	<!-- Pako for gzip -->
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pako.min.js"></script>

	<!-- php-wasm from unpkg -->
	<script type="module">
	import { PhpWeb } from 'https://unpkg.com/[email protected]/PhpWeb.mjs';

	const php = new PhpWeb();

	const editor = document.getElementById('editor');
	const output = document.getElementById('output');
	const codeTab = document.getElementById('codeTab');
	const renderTab = document.getElementById('renderTab');

	function gzipBase64(str) {
	const compressed = pako.gzip(str);
	let binary = '';
	compressed.forEach(b => binary += String.fromCharCode(b));
	return btoa(binary);
	}

	function ungzipBase64(b64) {
	const binary = atob(b64);
	const bytes = Uint8Array.from(binary, c => c.charCodeAt(0));
	return pako.ungzip(bytes, { to: 'string' });
	}

	// Load from URL
	const params = location.search.substring(1).split('&');
	let phpParam = null;
	if(params.length > 1 && params[1].startsWith('php=')) {
	phpParam = params[1].substring(4);
	try { editor.value = ungzipBase64(phpParam); } catch(e){ console.error(e); }
	}

	// Update URL when typing
	editor.addEventListener('input', () => {
	const gistId = params[0];
	const encoded = gzipBase64(editor.value);
	history.replaceState(null,'',`?${gistId}&php=${encoded}`);
	});

	// Tabs
	codeTab.addEventListener('click', ()=>{
	editor.classList.remove('hidden');
	output.classList.add('hidden');
	codeTab.classList.add('active');
	renderTab.classList.remove('active');
	});

	renderTab.addEventListener('click', ()=>{
	php.addEventListener('ready', ()=>{
	php.run(editor.value).then(result=>{
	output.innerHTML = result;
	}).catch(e=>{
	output.textContent = "Error: "+e;
	});
	});
	editor.classList.add('hidden');
	output.classList.remove('hidden');
	renderTab.classList.add('active');
	codeTab.classList.remove('active');
	});

	// Auto-render if code in URL
	if(phpParam) renderTab.click();
	</script>

	</body>
	</html>