playwright-cli/examples/index.html

Version b85c7a736bb4.bb1 · Apache-2.0. This preview displays packaged text and does not execute code. Treat the contents as untrusted instructions.

← Return to resource and package checksum

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>BB Skills browser command fixture</title>
  <style>
    body{font:16px/1.55 system-ui,sans-serif;background:#f4faf8;color:#15372e;margin:0}
    main{max-width:740px;margin:40px auto;padding:24px;background:white;border:1px solid #c9dfd7;border-radius:18px}
    label{display:block;margin:15px 0 5px}input,select,button{font:inherit;padding:10px;border-radius:7px;border:1px solid #7c9990}
    input[type=text]{width:min(90%,420px)}button{background:#075f47;color:white;cursor:pointer;margin:12px 8px 12px 0}
    button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #dc9513;outline-offset:3px}
    .check{display:flex;align-items:center;gap:10px}.check label{margin:0}pre{white-space:pre-wrap;overflow-wrap:anywhere}
    .dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:#167c56;animation:pulse 1s infinite alternate}
    @keyframes pulse{to{opacity:.3;transform:scale(.8)}}@media(prefers-reduced-motion:reduce){.dot{animation:none}}
    @media(max-width:600px){main{margin:15px;padding:18px}}
  </style>
</head>
<body>
<main id="main">
  <h1>Browser command fixture</h1>
  <p>Synthetic local inputs only. This page does not create accounts, take payments or call external services.</p>
  <form id="local-form">
    <label for="name">Display name</label><input id="name" type="text" required>
    <label for="role">Review role</label><select id="role"><option>Developer</option><option>Reviewer</option><option>Designer</option></select>
    <div class="check"><input id="scope" type="checkbox" required><label for="scope">Use synthetic data only</label></div>
    <button type="submit">Save local example</button>
  </form>
  <p id="saved" role="status" aria-live="polite">No example saved.</p>
  <section aria-labelledby="ideas-heading"><h2 id="ideas-heading">Mockable request</h2>
    <button id="ideas">Load ideas</button><pre id="ideas-result">No request made.</pre>
  </section>
  <section aria-labelledby="motion-heading"><h2 id="motion-heading">Motion preference</h2><span class="dot" aria-hidden="true"></span> <span id="motion-label">Visual sample</span></section>
  <p><a href="/other.html">Open second local page</a></p>
</main>
<script>
document.getElementById('local-form').addEventListener('submit', event => {
  event.preventDefault();
  document.getElementById('saved').textContent = `Saved locally for ${document.getElementById('name').value} (${document.getElementById('role').value}).`;
});
document.getElementById('ideas').addEventListener('click', async () => {
  const output=document.getElementById('ideas-result');output.textContent='Loading…';
  try{const response=await fetch('/api/ideas');const value=await response.json();output.textContent=JSON.stringify(value)}
  catch{output.textContent='Local request failed.'}
});
</script>
</body>
</html>