ContextScriptTest.html

<!-- /ContextScriptTest.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ContextScript - Test</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background: #17181c;
      color: #e0e0e0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding: 40px;
      min-height: 200vh;
    }

    h1 {
      margin-bottom: 20px;
      color: #fff;
    }

    .section {
      margin-bottom: 40px;
    }

    .section h2 {
      margin-bottom: 16px;
      color: #9ca3af;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .test-area {
      background: #1f2127;
      border: 1px solid #2a2d35;
      border-radius: 8px;
      padding: 20px;
    }

    button {
      background: #2563eb;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      margin-right: 10px;
      margin-bottom: 10px;
    }

    button:hover {
      background: #1d4ed8;
    }

    button.secondary {
      background: #2a2d35;
      border: 1px solid #3a3d45;
    }

    button.secondary:hover {
      background: #3a3d45;
    }

    input, textarea {
      background: #0d0e10;
      border: 1px solid #2a2d35;
      color: #e0e0e0;
      padding: 10px;
      border-radius: 4px;
      font-size: 14px;
      width: 100%;
      margin-bottom: 10px;
    }

    input:focus, textarea:focus {
      outline: none;
      border-color: #4a9eff;
    }

    label {
      display: block;
      margin-bottom: 6px;
      color: #9ca3af;
      font-size: 13px;
    }

    .form-group {
      margin-bottom: 16px;
    }

    .button-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .nav {
      display: flex;
      gap: 20px;
      padding: 10px 0;
      border-bottom: 1px solid #2a2d35;
      margin-bottom: 20px;
    }

    .nav a {
      color: #9ca3af;
      text-decoration: none;
    }

    .nav a:hover {
      color: #fff;
    }

    .card {
      background: #1f2127;
      border: 1px solid #2a2d35;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 16px;
    }

    .card h3 {
      margin-bottom: 8px;
    }

    .instructions {
      background: #1a1b1f;
      border-left: 3px solid #2563eb;
      padding: 16px;
      margin-bottom: 30px;
      border-radius: 0 8px 8px 0;
    }

    .instructions p {
      margin-bottom: 8px;
      line-height: 1.6;
    }

    .instructions code {
      background: #0d0e10;
      padding: 2px 6px;
      border-radius: 3px;
      font-family: "SF Mono", Monaco, monospace;
    }
  </style>
</head>
<body>
  <h1>ContextScript</h1>

  <div class="instructions">
    <p>Open the browser console and type <code>ContextScript</code> to start/stop recording.</p>
    <p>Interact with the elements below to generate a transcript.</p>
    <p>You can also press <code>Command+Escape</code> to stop recording.</p>
  </div>

  <nav class="nav" id="main-nav">
    <a href="#" id="nav-home">Home</a>
    <a href="#" id="nav-products">Products</a>
    <a href="#" id="nav-about">About</a>
    <a href="#" id="nav-contact">Contact</a>
  </nav>

  <div class="section">
    <h2>Buttons</h2>
    <div class="test-area">
      <div class="button-grid">
        <button id="btn-primary">Primary Action</button>
        <button id="btn-submit">Submit</button>
        <button class="secondary" id="btn-cancel">Cancel</button>
        <button class="secondary" id="btn-reset">Reset</button>
      </div>
    </div>
  </div>

  <div class="section">
    <h2>Form Inputs</h2>
    <div class="test-area">
      <form id="test-form">
        <div class="form-group">
          <label for="email">Email Address</label>
          <input type="email" id="email" name="email" placeholder="you@example.com">
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" id="password" name="password" placeholder="Enter password">
        </div>
        <div class="form-group">
          <label for="message">Message</label>
          <textarea id="message" name="message" rows="3" placeholder="Type your message..."></textarea>
        </div>
        <button type="submit" id="form-submit">Send Message</button>
      </form>
    </div>
  </div>

  <div class="section">
    <h2>Nested Elements</h2>
    <div class="test-area">
      <div class="card" id="card-1">
        <h3>Card Title</h3>
        <p>Click anywhere in this card to test hierarchy detection.</p>
        <button id="card-btn">Card Button</button>
      </div>
      <div class="card" id="card-2">
        <h3>Another Card</h3>
        <p>This card has different nesting for testing.</p>
        <div class="button-grid">
          <button id="nested-btn-1">Nested 1</button>
          <button id="nested-btn-2">Nested 2</button>
        </div>
      </div>
    </div>
  </div>

  <div class="section">
    <h2>Scroll Area</h2>
    <div class="test-area" style="height: 400px;">
      <p>Scroll down to see more content and test scroll detection.</p>
      <div style="height: 800px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 200px;">
        <p>Middle section</p>
        <button id="deep-btn">Deep Button</button>
        <p>Keep scrolling...</p>
      </div>
      <p>End of scroll area.</p>
    </div>
  </div>

  <script type="module" src="/ContextScript.js"></script>
  <script type="module" src="/ContextScriptTest.js"></script>
</body>
</html>