<div style="font-family: sans-serif; max-width: 400px;">
  <h3>Toll Zone Checker</h3>
  <p>Enter your postcode to check if a toll applies.</p>
  <input 
    id="postcodeInput" 
    type="text" 
    placeholder="e.g. SW1A 1AA" 
    style="padding: 8px; font-size: 16px; width: 200px;"
  />
  <button 
    onclick="checkPostcode()" 
    style="padding: 8px 16px; font-size: 16px; margin-left: 8px; cursor: pointer;"
  >
    Check
  </button>
  <p id="result" style="margin-top: 16px; font-weight: bold;"></p>
</div>

<script>
  var tollPostcodes = ["SW1A", "EC1A", "WC2N", "SE1", "E1"];

  function checkPostcode() {
    var input = document.getElementById("postcodeInput").value.trim().toUpperCase();
    var result = document.getElementById("result");

    if (!input) {
      result.style.color = "black";
      result.textContent = "Please enter a postcode.";
      return;
    }

    var match = tollPostcodes.some(function(zone) {
      return input.startsWith(zone);
    });

    if (match) {
      result.style.color = "red";
      result.textContent = "A toll applies to your area.";
    } else {
      result.style.color = "green";
      result.textContent = "No toll applies to your area.";
    }
  }
</script>