add official Chrome feature demos

2026-06-14 15:22:32 +08:00
parent 500217f2fd
commit de690f85fa
32 changed files with 2376 additions and 567 deletions
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Modern Web Guidance Demo</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main class="shell">
+      <section class="hero">
+        <p class="eyebrow">Official CLI demo</p>
+        <h1>Modern Web Guidance</h1>
+        <p>
+          这段演示直接使用 Chrome 官方 CLI：先搜索某个 Web 开发意图，再取回对应指南。
+          重点不是背 API，而是让开发者看到 AI coding agent 如何被现代 Web 知识和 Baseline 边界纠偏。
+        </p>
+      </section>
+
+      <section class="grid">
+        <article class="terminal">
+          <div class="terminal-head">
+            <span></span><span></span><span></span>
+            <strong>terminal</strong>
+          </div>
+          <pre><code id="commands">npx modern-web-guidance@latest search "animate a dialog modal backdrop"
+npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"</code></pre>
+          <button id="copy">复制命令</button>
+        </article>
+
+        <article class="result">
+          <p class="eyebrow">Expected official output</p>
+          <h2>搜索会返回 use case</h2>
+          <ul>
+            <li><strong>light-dismiss-a-dialog</strong>：用原生 dialog 处理 light dismiss。</li>
+            <li><strong>animate-to-from-top-layer</strong>：用现代 CSS 动画进入/离开 top layer。</li>
+            <li><strong>declarative-dialog-popover-control</strong>：用声明式控制 dialog / popover。</li>
+          </ul>
+        </article>
+      </section>
+
+      <section class="demo">
+        <div>
+          <p class="eyebrow">Guided implementation</p>
+          <h2>指南会把 Agent 拉回现代 Web 写法</h2>
+          <p>
+            这个页面用一个可运行的 dialog 动画做对应说明：优先使用原生 <code>&lt;dialog&gt;</code>、
+            <code>::backdrop</code>、<code>@starting-style</code> 和 <code>transition-behavior</code>，
+            而不是用大量 JavaScript 重新造弹层。
+          </p>
+          <button id="open-dialog">打开 dialog demo</button>
+        </div>
+
+        <pre class="code"><code>dialog {
+  opacity: 0;
+  transform: translateY(16px) scale(0.96);
+  transition-property: opacity, transform, display, overlay;
+  transition-duration: 220ms;
+  transition-behavior: allow-discrete;
+}
+
+dialog[open] {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+@starting-style {
+  dialog[open] {
+    opacity: 0;
+    transform: translateY(16px) scale(0.96);
+  }
+}</code></pre>
+      </section>
+
+      <dialog id="guided-dialog">
+        <form method="dialog">
+          <p class="eyebrow">Native top layer</p>
+          <h2>这是原生 dialog</h2>
+          <p>演示重点：Modern Web Guidance 让 Agent 找到现代 HTML/CSS 能力，并提醒兼容和降级边界。</p>
+          <button>关闭</button>
+        </form>
+      </dialog>
+    </main>
+
+    <script src="./app.js" type="module"></script>
+  </body>
+</html>