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,139 @@
+:root {
+  color-scheme: light;
+  --ink: #111827;
+  --muted: #667085;
+  --paper: #f7f8fa;
+  --panel: #ffffff;
+  --line: #d7dce2;
+  --red: #b42318;
+  --blue: #1849a9;
+  --code: #111827;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  color: var(--ink);
+  background:
+    linear-gradient(90deg, rgb(17 24 39 / 0.05) 1px, transparent 1px),
+    linear-gradient(rgb(17 24 39 / 0.05) 1px, transparent 1px),
+    var(--paper);
+  background-size: 28px 28px;
+  font-family: ui-sans-serif, "PingFang SC", "Microsoft YaHei", sans-serif;
+}
+
+.shell {
+  width: min(1180px, calc(100vw - 32px));
+  margin: 0 auto;
+  padding: 42px 0 60px;
+}
+
+.eyebrow {
+  margin: 0 0 10px;
+  color: var(--red);
+  font-size: 12px;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+h1,
+h2,
+p {
+  margin-top: 0;
+}
+
+h1 {
+  max-width: 760px;
+  margin-bottom: 18px;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: clamp(42px, 7vw, 86px);
+  line-height: 0.9;
+}
+
+.hero p,
+.broken-card p {
+  max-width: 760px;
+  color: var(--muted);
+  line-height: 1.75;
+}
+
+.prompt-board,
+.target {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+  margin-top: 24px;
+}
+
+.target {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+article,
+.broken-card {
+  border: 1px solid var(--line);
+  background: rgb(255 255 255 / 0.92);
+  box-shadow: 0 18px 58px rgb(17 24 39 / 0.12);
+  padding: 20px;
+}
+
+pre {
+  overflow: auto;
+  margin: 0;
+  border: 1px solid #2f3947;
+  background: var(--code);
+  color: #e7edf4;
+  padding: 16px;
+  white-space: pre-wrap;
+  line-height: 1.55;
+}
+
+.broken-card span {
+  display: inline-flex;
+  margin-bottom: 12px;
+  border: 1px solid rgb(180 35 24 / 0.35);
+  padding: 4px 9px;
+  color: var(--red);
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.broken-card img {
+  display: block;
+  width: 100%;
+  min-height: 150px;
+  border: 1px dashed var(--red);
+  background: #fff5f4;
+}
+
+.overflow {
+  overflow: hidden;
+}
+
+.overflow p {
+  width: max-content;
+  color: var(--blue);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+button {
+  min-height: 42px;
+  border: 1px solid var(--ink);
+  background: var(--ink);
+  color: white;
+  cursor: pointer;
+  padding: 10px 14px;
+  font: inherit;
+  font-weight: 900;
+}
+
+@media (max-width: 900px) {
+  .prompt-board,
+  .target {
+    grid-template-columns: 1fr;
+  }
+}