<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Header Param Extractor</title>
<style>
body { font-family: Arial, sans-serif; max-width: 800px; margin: auto; padding: 20px; }
textarea { width: 100%; height: 150px; margin-bottom: 10px; }
button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
#output { width: 100%; height: 150px; }
</style>
</head>
<body>
<h2>Header Parameter Extractor</h2>
<textarea id="headerInput" placeholder="Paste your header here..."></textarea>
<br>
<button onclick="extractParams()">Extract Parameters</button>
<h3>Extracted Parameters:</h3>
<textarea id="output" readonly></textarea>
<script>
function extractParams() {
let text = document.getElementById("headerInput").value;
let matches = [...text.matchAll(/\[([^\[\]]+)\]/g)].map(m => m[1]);
document.getElementById("output").value = matches.length ? matches.join("\n") : "No parameters found.";
}
</script>
</body>
</html>