minimal-agent 0.8.2 → 0.10.0

package/skills/ui-design/tests/e2e/runs/ember-prism-screenshot-check-1/outputs/homepage.html

@@ -0,0 +1,373 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>棱焰智能测试：首页</title>
+  <style>
+    :root {
+      --ink: #101014;
+      --ink-soft: #2b2b33;
+      --muted: #636574;
+      --paper: #fffdfb;
+      --paper-cool: #f7f9ff;
+      --surface: #ffffff;
+      --surface-warm: #fff0ed;
+      --line: rgba(16, 16, 20, 0.10);
+      --line-warm: rgba(255, 92, 56, 0.22);
+      --accent: #ff3f3a;
+      --accent-orange: #e21d2f;
+      --accent-gold: #ff8a00;
+      --blue: #2563eb;
+      --violet: #7c3aed;
+      --cyan: #14b8c8;
+      --shadow: rgba(255, 63, 58, 0.18);
+      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Inter, sans-serif;
+      color: var(--ink);
+      background: var(--paper);
+    }
+
+    * { box-sizing: border-box; }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      overflow-x: hidden;
+      background:
+        radial-gradient(circle at 18% 18%, rgba(255, 138, 31, 0.18), transparent 28%),
+        radial-gradient(circle at 78% 20%, rgba(37, 99, 235, 0.12), transparent 24%),
+        linear-gradient(180deg, #fffdfb 0%, #fffaf6 48%, #f7f9ff 100%);
+    }
+
+    .page {
+      position: relative;
+      width: min(1440px, 100%);
+      margin: 0 auto;
+      padding: 24px clamp(18px, 4vw, 64px) 70px;
+    }
+
+    .nav {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 18px;
+      min-height: 64px;
+      padding: 12px 0;
+      border-bottom: 1px solid rgba(16, 16, 20, 0.08);
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      min-width: 0;
+      font-weight: 850;
+    }
+
+    .mark {
+      width: 42px;
+      height: 42px;
+      border-radius: 14px;
+      background:
+        conic-gradient(from 220deg, var(--accent), var(--accent-orange), var(--accent), var(--blue), var(--violet), var(--accent)),
+        linear-gradient(135deg, #fff, transparent);
+      box-shadow: 0 16px 34px rgba(240, 68, 47, 0.18);
+    }
+
+    .links {
+      display: flex;
+      align-items: center;
+      gap: 24px;
+      color: var(--muted);
+      font-size: 14px;
+    }
+
+    .nav .cta {
+      min-height: 46px;
+      padding: 0 18px;
+      border: 0;
+      border-radius: 999px;
+      color: #fff;
+      background: linear-gradient(135deg, var(--accent), var(--accent-orange));
+      box-shadow: 0 14px 28px var(--shadow);
+      font-weight: 780;
+    }
+
+    .hero {
+      display: grid;
+      grid-template-columns: minmax(0, 0.92fr) minmax(430px, 1.08fr);
+      align-items: center;
+      gap: clamp(24px, 5vw, 74px);
+      padding: 72px 0 44px;
+    }
+
+    .eyebrow {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      min-height: 34px;
+      padding: 0 12px;
+      border: 1px solid var(--line-warm);
+      border-radius: 999px;
+      color: var(--accent);
+      background: rgba(255, 245, 239, 0.72);
+      font-size: 13px;
+      font-weight: 760;
+    }
+
+    h1 {
+      margin: 22px 0 18px;
+      max-width: 720px;
+      font-size: clamp(46px, 6.4vw, 78px);
+      line-height: 1.04;
+      letter-spacing: 0;
+    }
+
+    .gradient-word {
+      display: inline-block;
+      white-space: nowrap;
+      background: linear-gradient(90deg, var(--accent), var(--accent-orange) 62%, var(--blue));
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+    }
+
+    .lead {
+      max-width: 610px;
+      color: var(--muted);
+      font-size: clamp(16px, 1.5vw, 19px);
+      line-height: 1.72;
+    }
+
+    .actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      margin-top: 32px;
+    }
+
+    button {
+      min-height: 48px;
+      border-radius: 14px;
+      font: inherit;
+      font-weight: 780;
+    }
+
+    .primary {
+      border: 0;
+      padding: 0 22px;
+      color: #fff;
+      background: linear-gradient(135deg, var(--accent), var(--accent-orange));
+      box-shadow: 0 18px 36px var(--shadow);
+    }
+
+    .secondary {
+      padding: 0 20px;
+      border: 1px solid var(--line);
+      color: var(--ink);
+      background: #fff;
+    }
+
+    .visual {
+      position: relative;
+      min-height: 560px;
+      border: 1px solid rgba(16, 16, 20, 0.08);
+      border-radius: 34px;
+      overflow: hidden;
+      background:
+        radial-gradient(circle at 22% 20%, rgba(255, 63, 58, 0.22), transparent 24%),
+        radial-gradient(circle at 78% 18%, rgba(37, 99, 235, 0.14), transparent 23%),
+        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 245, 239, 0.84));
+      box-shadow: 0 30px 80px rgba(16, 16, 20, 0.10);
+    }
+
+    .prism {
+      position: absolute;
+      inset: 32px;
+      border-radius: 28px;
+      background:
+        linear-gradient(115deg, transparent 0 28%, rgba(255, 63, 58, 0.22) 28% 39%, transparent 39%),
+        linear-gradient(132deg, transparent 0 54%, rgba(37, 99, 235, 0.16) 54% 66%, transparent 66%),
+        linear-gradient(156deg, transparent 0 72%, rgba(124, 58, 237, 0.14) 72% 82%, transparent 82%);
+    }
+
+    .model-card {
+      position: absolute;
+      width: min(430px, 82%);
+      left: 8%;
+      top: 70px;
+      padding: 24px;
+      border: 1px solid var(--line);
+      border-radius: 24px;
+      background: rgba(255, 255, 255, 0.88);
+      box-shadow: 0 28px 56px rgba(16, 16, 20, 0.12);
+      backdrop-filter: blur(16px);
+    }
+
+    .model-card.dark {
+      left: auto;
+      right: 8%;
+      top: 242px;
+      color: #fff;
+      background: #101014;
+      border-color: rgba(255, 255, 255, 0.12);
+    }
+
+    .model-card h2 {
+      margin: 0 0 8px;
+      font-size: 28px;
+      line-height: 1.16;
+    }
+
+    .model-card p {
+      margin: 0;
+      color: var(--muted);
+      line-height: 1.6;
+    }
+
+    .model-card.dark p { color: rgba(255, 255, 255, 0.66); }
+
+    .tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 18px;
+    }
+
+    .tag {
+      min-height: 30px;
+      padding: 6px 10px;
+      border-radius: 999px;
+      background: var(--paper-cool);
+      color: var(--blue);
+      font-size: 12px;
+      font-weight: 760;
+    }
+
+    .dark .tag {
+      background: rgba(255, 255, 255, 0.10);
+      color: #fff;
+    }
+
+    .matrix {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 16px;
+      margin-top: 24px;
+    }
+
+    .tile {
+      min-height: 190px;
+      padding: 20px;
+      border: 1px solid var(--line);
+      border-radius: 20px;
+      background: #fff;
+      box-shadow: 0 18px 46px rgba(16, 16, 20, 0.06);
+    }
+
+    .tile i {
+      display: block;
+      width: 38px;
+      height: 6px;
+      margin-bottom: 20px;
+      border-radius: 999px;
+      background: var(--accent);
+    }
+
+    .tile:nth-child(2) i { background: var(--blue); }
+    .tile:nth-child(3) i { background: var(--violet); }
+    .tile:nth-child(4) i { background: var(--cyan); }
+
+    .tile h3 {
+      margin: 0 0 10px;
+      font-size: 20px;
+      line-height: 1.25;
+    }
+
+    .tile p {
+      margin: 0;
+      color: var(--muted);
+      font-size: 14px;
+      line-height: 1.65;
+    }
+
+    @media (max-width: 980px) {
+      .links { display: none; }
+      .hero { grid-template-columns: 1fr; padding-top: 44px; }
+      .visual { min-height: 520px; }
+      .matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    }
+
+    @media (max-width: 560px) {
+      .page { padding: 18px 14px 42px; }
+      h1 { font-size: clamp(40px, 12vw, 52px); line-height: 1.08; }
+      .lead { font-size: 15px; }
+      .actions { flex-direction: column; }
+      button { width: 100%; }
+      .visual { min-height: 560px; border-radius: 24px; }
+      .model-card { left: 16px; right: 16px; top: 42px; width: auto; }
+      .model-card.dark { left: 16px; right: 16px; top: 278px; }
+      .matrix { grid-template-columns: 1fr; }
+      .tile { min-height: 160px; }
+    }
+  </style>
+</head>
+<body>
+  <main class="page" data-screen-label="01 棱焰智能首页">
+    <nav class="nav" aria-label="主导航">
+      <div class="brand"><span class="mark" aria-hidden="true"></span><span>棱焰智能</span></div>
+      <div class="links"><span>模型</span><span>多模态</span><span>开发者</span><span>价格</span></div>
+      <button class="cta">申请试用</button>
+    </nav>
+
+    <section class="hero">
+      <div>
+        <span class="eyebrow">新一代多模态模型平台</span>
+        <h1>模型能力，变成<span class="gradient-word">产品矩阵</span>。</h1>
+        <p class="lead">面向团队的生成式 AI 平台，统一管理文本、图像、语音和代码能力，让原型验证、接口接入和上线评估都在一个清晰页面完成。</p>
+        <div class="actions">
+          <button class="primary">进入模型广场</button>
+          <button class="secondary">查看接口文档</button>
+        </div>
+      </div>
+
+      <div class="visual" aria-label="产品矩阵视觉">
+        <div class="prism"></div>
+        <article class="model-card">
+          <h2>语言模型</h2>
+          <p>长上下文、结构化输出、企业知识问答和 Agent 编排。</p>
+          <div class="tags"><span class="tag">上下文 256K</span><span class="tag">低延迟</span><span class="tag">可观测</span></div>
+        </article>
+        <article class="model-card dark">
+          <h2>开发者控制台</h2>
+          <p>用黑色面板呈现 API、用量和延迟，增强工程可信度。</p>
+          <div class="tags"><span class="tag">API</span><span class="tag">Token</span><span class="tag">评测集</span></div>
+        </article>
+      </div>
+    </section>
+
+    <section class="matrix" aria-label="能力矩阵">
+      <article class="tile"><i></i><h3>文本推理</h3><p>适合客服、写作、知识库和自动化流程，支持稳定的结构化结果。</p></article>
+      <article class="tile"><i></i><h3>开发者 API</h3><p>统一鉴权、调用统计、错误追踪和延迟分析，便于团队接入。</p></article>
+      <article class="tile"><i></i><h3>多模态创作</h3><p>覆盖图像理解、语音摘要和视频脚本，让创作链路更完整。</p></article>
+      <article class="tile"><i></i><h3>上线评测</h3><p>内置对比、灰度、质量报告和风险提示，减少上线前盲区。</p></article>
+    </section>
+  </main>
+  <script>
+    window.addEventListener("message", (event) => {
+      if (event.data && event.data.type === "__edit_mode_set_keys") {
+        const edits = event.data.edits || {};
+        if (edits.accent) document.documentElement.style.setProperty("--accent", edits.accent);
+        if (edits.orange) document.documentElement.style.setProperty("--accent-orange", edits.orange);
+        if (edits.blue) document.documentElement.style.setProperty("--blue", edits.blue);
+      }
+    });
+    const UI_DESIGN_TWEAKS = /*EDITMODE-BEGIN*/{
+      "accent": "#ff3f3a",
+      "orange": "#e21d2f",
+      "blue": "#2563eb"
+    }/*EDITMODE-END*/;
+    window.parent.postMessage({ type: "__edit_mode_available", edits: UI_DESIGN_TWEAKS }, "*");
+  </script>
+</body>
+</html>