add official Chrome feature demos
This commit is contained in:
@@ -0,0 +1,16 @@
|
||||
const dialog = document.querySelector("#guided-dialog");
|
||||
const openDialog = document.querySelector("#open-dialog");
|
||||
const copyButton = document.querySelector("#copy");
|
||||
const commands = document.querySelector("#commands");
|
||||
|
||||
openDialog.addEventListener("click", () => {
|
||||
dialog.showModal();
|
||||
});
|
||||
|
||||
copyButton.addEventListener("click", async () => {
|
||||
await navigator.clipboard.writeText(commands.textContent.trim());
|
||||
copyButton.textContent = "已复制";
|
||||
setTimeout(() => {
|
||||
copyButton.textContent = "复制命令";
|
||||
}, 1200);
|
||||
});
|
||||
@@ -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><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>
|
||||
@@ -0,0 +1,222 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--ink: #17202a;
|
||||
--muted: #5f6f78;
|
||||
--paper: #fffef8;
|
||||
--panel: #eff4ef;
|
||||
--line: #cfd9cd;
|
||||
--green: #0b6b4f;
|
||||
--blue: #174ea6;
|
||||
--amber: #a46400;
|
||||
--code: #14202a;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
color: var(--ink);
|
||||
background:
|
||||
linear-gradient(90deg, rgb(23 32 42 / 0.05) 1px, transparent 1px),
|
||||
linear-gradient(rgb(23 32 42 / 0.05) 1px, transparent 1px),
|
||||
#edf4ef;
|
||||
background-size: 30px 30px;
|
||||
font-family: ui-sans-serif, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
button {
|
||||
min-height: 42px;
|
||||
border: 1px solid var(--ink);
|
||||
background: var(--ink);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
padding: 10px 14px;
|
||||
font: inherit;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(1180px, calc(100vw - 32px));
|
||||
margin: 0 auto;
|
||||
padding: 40px 0 64px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 10px;
|
||||
color: var(--green);
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 780px;
|
||||
margin-bottom: 14px;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: clamp(42px, 7vw, 86px);
|
||||
line-height: 0.9;
|
||||
}
|
||||
|
||||
.hero p,
|
||||
.demo p,
|
||||
.result li {
|
||||
color: var(--muted);
|
||||
line-height: 1.72;
|
||||
}
|
||||
|
||||
.grid,
|
||||
.demo {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
|
||||
gap: 20px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.terminal,
|
||||
.result,
|
||||
.demo {
|
||||
border: 1px solid var(--line);
|
||||
background: rgb(255 254 248 / 0.92);
|
||||
box-shadow: 0 18px 58px rgb(23 32 42 / 0.12);
|
||||
}
|
||||
|
||||
.terminal,
|
||||
.result {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.terminal {
|
||||
background: var(--code);
|
||||
color: #dfe8ef;
|
||||
}
|
||||
|
||||
.terminal-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.terminal-head span {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 999px;
|
||||
background: #e15c4f;
|
||||
}
|
||||
|
||||
.terminal-head span:nth-child(2) {
|
||||
background: #e5ad35;
|
||||
}
|
||||
|
||||
.terminal-head span:nth-child(3) {
|
||||
background: #42aa6d;
|
||||
}
|
||||
|
||||
.terminal-head strong {
|
||||
margin-left: 8px;
|
||||
color: #9fb0be;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
margin: 0 0 16px;
|
||||
white-space: pre-wrap;
|
||||
font-size: 14px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.result ul {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.demo {
|
||||
align-items: start;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
code {
|
||||
border: 1px solid rgb(23 32 42 / 0.13);
|
||||
background: #fff;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
.code {
|
||||
border: 1px solid #2d3944;
|
||||
background: var(--code);
|
||||
color: #dfe8ef;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
dialog {
|
||||
width: min(520px, calc(100vw - 36px));
|
||||
border: 1px solid var(--line);
|
||||
padding: 0;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
opacity: 0;
|
||||
transform: translateY(16px) scale(0.96);
|
||||
transition-property: opacity, transform, display, overlay;
|
||||
transition-duration: 220ms;
|
||||
transition-timing-function: ease-out;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
dialog::backdrop {
|
||||
background: rgb(12 18 24 / 0);
|
||||
transition:
|
||||
display 220ms allow-discrete,
|
||||
overlay 220ms allow-discrete,
|
||||
background-color 220ms ease-out;
|
||||
}
|
||||
|
||||
dialog[open]::backdrop {
|
||||
background: rgb(12 18 24 / 0.42);
|
||||
}
|
||||
|
||||
dialog form {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
dialog {
|
||||
transform: none;
|
||||
transition-duration: 80ms;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 880px) {
|
||||
.grid,
|
||||
.demo {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user