{% extends "base.html" %}
{% block title %}Overlay Test{% endblock %}
{% block extra_css %}
    #veil { display: none; position: fixed; inset: 0; z-index: 100;
      background: rgba(30, 30, 30, 0.75); color: #fff; padding: 20px; }
    #skin-label { position: relative; display: inline-block; }
    #skin-check { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
      opacity: 0.01; margin: 0; }
    #skin-face { display: inline-block; padding: 8px 16px; border: 1px solid #888; }
    #clipped { position: fixed; top: -400px; left: 0; width: 200px; height: 200px; }
{% endblock %}
{% block content %}
<h1>Overlay Test</h1>

<!-- Deliberately NOT named after a cookie banner: the bundled content blocker
     hides anything that looks like one, which would silently defuse these tests. -->
<div id="veil" class="page-veil">
  Interstitial
  <button id="dismiss" onclick="document.getElementById('veil').style.display='none'">Continue</button>
</div>

<div class="section">
  <h2>Target</h2>
  <button id="target-btn" onclick="document.getElementById('click-output').textContent = 'target clicked'">Target</button>
  <div id="click-output" class="output">nothing clicked</div>
</div>

<div class="section">
  <h2>Nested Child</h2>
  <button id="span-btn" onclick="document.getElementById('span-output').textContent = 'span button clicked'"><span>Send</span></button>
  <div id="span-output" class="output">not clicked</div>
</div>

<div class="section">
  <h2>Label Over Input</h2>
  <label id="skin-label" for="skin-check">
    <input type="checkbox" id="skin-check" onchange="document.getElementById('skin-output').textContent = 'checkbox ' + (this.checked ? 'on' : 'off')">
    <span id="skin-face">Accept terms</span>
  </label>
  <div id="skin-output" class="output">untouched</div>
</div>

<div class="section">
  <h2>Degenerate Boxes</h2>
  <button id="shrinker">Shrink me</button>
  <button id="clipped">Clipped away</button>
</div>
{% endblock %}