88 lines
3.0 KiB
HTML
88 lines
3.0 KiB
HTML
<!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><dialog></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>
|