minimal-agent 0.8.2 → 0.10.0

package/skills/ui-design/tests/e2e/runs/aqua-glass-volcano-refresh-1/outputs/index.html

@@ -0,0 +1,739 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Aqua Glass 活动页优化预览</title>
+  <style>
+    :root {
+      --ink: #0b1220;
+      --ink-soft: #1f2a3d;
+      --muted: #526173;
+      --paper: #f6fbff;
+      --paper-sky: #dff2ff;
+      --paper-lilac: #f3efff;
+      --surface: rgba(255, 255, 255, 0.72);
+      --surface-solid: #ffffff;
+      --line: rgba(11, 18, 32, 0.10);
+      --accent: #2f80ed;
+      --accent-deep: #1769ff;
+      --violet: #7c6dff;
+      --signal: #24b8a8;
+      --coral: #ff7a59;
+      --pink: #f58ad7;
+      --shadow: rgba(31, 85, 139, 0.16);
+      --rail-opacity: 0.88;
+      --spark-opacity: 0.82;
+      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 12% 6%, rgba(73, 190, 255, 0.24), transparent 32%),
+        radial-gradient(circle at 88% 4%, rgba(124, 109, 255, 0.16), transparent 30%),
+        linear-gradient(180deg, #ffffff 0%, #f6fbff 28%, #dff2ff 100%);
+    }
+
+    body::before {
+      content: "";
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      background-image:
+        linear-gradient(rgba(47,128,237,0.035) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(47,128,237,0.035) 1px, transparent 1px);
+      background-size: 52px 52px;
+      mask-image: linear-gradient(180deg, black, transparent 72%);
+    }
+
+    .page {
+      position: relative;
+      width: min(1440px, 100%);
+      min-height: 100vh;
+      margin: 0 auto;
+      padding: 0 clamp(16px, 4vw, 58px) 72px;
+    }
+
+    .nav {
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      gap: 28px;
+      align-items: center;
+      min-height: 58px;
+      border-bottom: 1px solid rgba(11,18,32,0.08);
+      background: rgba(246, 251, 255, 0.78);
+      backdrop-filter: blur(18px);
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-weight: 850;
+      color: var(--ink);
+      white-space: nowrap;
+    }
+
+    .logo {
+      position: relative;
+      width: 34px;
+      height: 30px;
+    }
+
+    .logo span {
+      position: absolute;
+      bottom: 0;
+      width: 9px;
+      border-radius: 999px 999px 3px 3px;
+      background: linear-gradient(180deg, #39d6ff, var(--accent-deep));
+    }
+
+    .logo span:nth-child(1) { left: 0; height: 18px; transform: skewX(-18deg); }
+    .logo span:nth-child(2) { left: 11px; height: 27px; transform: skewX(-14deg); background: linear-gradient(180deg, #8b7cff, #2f80ed); }
+    .logo span:nth-child(3) { left: 22px; height: 22px; transform: skewX(-16deg); background: linear-gradient(180deg, #24d0ff, #24b8a8); }
+
+    .nav-links {
+      display: flex;
+      align-items: center;
+      gap: clamp(14px, 2vw, 28px);
+      color: var(--ink-soft);
+      font-size: 14px;
+      font-weight: 720;
+    }
+
+    .nav-cta {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 38px;
+      padding: 0 15px;
+      border-radius: 999px;
+      color: var(--accent-deep);
+      background: rgba(255,255,255,0.76);
+      border: 1px solid rgba(47,128,237,0.16);
+      font-size: 13px;
+      font-weight: 780;
+      white-space: nowrap;
+    }
+
+    .hero {
+      position: relative;
+      min-height: 360px;
+      display: grid;
+      place-items: center;
+      text-align: center;
+      overflow: hidden;
+      border-radius: 0 0 34px 34px;
+      background:
+        radial-gradient(circle at 50% 30%, rgba(255,255,255,0.95), transparent 28%),
+        radial-gradient(circle at 78% 36%, rgba(73,212,255,0.28), transparent 22%),
+        linear-gradient(135deg, rgba(223,242,255,0.86), rgba(246,251,255,0.72) 48%, rgba(243,239,255,0.68));
+    }
+
+    .rail {
+      position: absolute;
+      width: 980px;
+      height: 210px;
+      border: 18px solid rgba(255,255,255,0.52);
+      border-top-color: rgba(74,182,255,0.32);
+      border-right-color: rgba(124,109,255,0.20);
+      border-bottom-color: rgba(255,255,255,0.62);
+      border-left-color: rgba(73,212,255,0.18);
+      border-radius: 50%;
+      transform: translateY(-34px) rotate(-8deg);
+      opacity: var(--rail-opacity);
+      box-shadow:
+        inset 0 0 36px rgba(47,128,237,0.14),
+        0 34px 90px rgba(47,128,237,0.12);
+    }
+
+    .rail::after {
+      content: "";
+      position: absolute;
+      right: 76px;
+      top: -20px;
+      width: 150px;
+      height: 18px;
+      border-radius: 999px;
+      background: linear-gradient(90deg, var(--coral), #ffc46b);
+      transform: rotate(8deg);
+      opacity: var(--spark-opacity);
+      box-shadow: 0 18px 38px rgba(255,122,89,0.24);
+    }
+
+    .cube,
+    .chip,
+    .bot {
+      position: absolute;
+      z-index: 1;
+      opacity: var(--spark-opacity);
+      filter: drop-shadow(0 18px 28px rgba(47,128,237,0.16));
+    }
+
+    .cube {
+      left: 18%;
+      top: 40%;
+      width: 46px;
+      height: 46px;
+      border-radius: 12px;
+      background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(74,182,255,0.34) 55%, rgba(124,109,255,0.34));
+      transform: rotate(-18deg);
+    }
+
+    .chip {
+      left: 35%;
+      top: 44%;
+      width: 48px;
+      height: 48px;
+      display: grid;
+      place-items: center;
+      border-radius: 12px;
+      color: #fff;
+      font-weight: 900;
+      background: linear-gradient(145deg, var(--coral), #ffb66e);
+      transform: rotate(-14deg);
+    }
+
+    .bot {
+      right: 10%;
+      top: 26%;
+      width: 58px;
+      height: 58px;
+      border-radius: 50%;
+      background:
+        radial-gradient(circle at 50% 42%, #16233b 0 22%, transparent 24%),
+        linear-gradient(145deg, #ffffff, #dff2ff 62%, #f3efff);
+      border: 1px solid rgba(255,255,255,0.8);
+    }
+
+    .hero-content {
+      position: relative;
+      z-index: 2;
+      padding: 48px 18px 80px;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: clamp(42px, 5.4vw, 76px);
+      line-height: 1.08;
+      letter-spacing: 0;
+      color: var(--ink);
+      text-wrap: balance;
+    }
+
+    .grad {
+      background: linear-gradient(90deg, var(--accent-deep), var(--violet));
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      white-space: nowrap;
+    }
+
+    .lead {
+      max-width: 760px;
+      margin: 18px auto 28px;
+      color: var(--muted);
+      font-size: clamp(16px, 1.55vw, 20px);
+      line-height: 1.6;
+    }
+
+    .primary {
+      min-height: 52px;
+      border: 0;
+      border-radius: 14px;
+      padding: 0 34px;
+      color: #fff;
+      background: linear-gradient(135deg, #4ab6ff 0%, var(--accent-deep) 52%, var(--violet) 100%);
+      box-shadow: 0 18px 42px rgba(23,105,255,0.26);
+      font: inherit;
+      font-size: 17px;
+      font-weight: 820;
+    }
+
+    .benefits {
+      position: relative;
+      z-index: 3;
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1.1fr;
+      gap: 1px;
+      min-height: 82px;
+      margin: -42px auto 74px;
+      width: min(1180px, calc(100% - 36px));
+      overflow: hidden;
+      border-radius: 18px;
+      background: rgba(11,18,32,0.08);
+      box-shadow: 0 24px 70px rgba(31,85,139,0.14);
+      border: 1px solid rgba(255,255,255,0.72);
+    }
+
+    .benefit {
+      padding: 20px 24px;
+      background: rgba(255,255,255,0.92);
+    }
+
+    .benefit.hot {
+      color: var(--ink);
+      background:
+        radial-gradient(circle at 86% 50%, rgba(73,212,255,0.28), transparent 32%),
+        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(223,242,255,0.88));
+    }
+
+    .benefit strong {
+      display: block;
+      font-size: 18px;
+      line-height: 1.2;
+    }
+
+    .benefit span {
+      display: block;
+      margin-top: 6px;
+      color: var(--muted);
+      font-size: 13px;
+      line-height: 1.45;
+    }
+
+    .section-head {
+      text-align: center;
+      margin-bottom: 44px;
+    }
+
+    .section-head h2 {
+      margin: 0;
+      font-size: clamp(34px, 4vw, 54px);
+      line-height: 1.12;
+      letter-spacing: 0;
+    }
+
+    .section-head p {
+      margin: 14px 0 0;
+      color: var(--muted);
+      font-size: 16px;
+    }
+
+    .tabs {
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+      gap: 18px;
+      margin-top: 28px;
+      color: var(--ink-soft);
+      font-weight: 760;
+    }
+
+    .tabs span {
+      min-height: 40px;
+      display: inline-flex;
+      align-items: center;
+      padding: 0 18px;
+      border-radius: 999px;
+    }
+
+    .tabs .active {
+      color: var(--accent-deep);
+      background: rgba(47,128,237,0.12);
+    }
+
+    .product-stage {
+      position: relative;
+      width: min(1180px, 100%);
+      margin: 0 auto;
+      padding-top: 236px;
+    }
+
+    .floating-preview {
+      position: absolute;
+      right: 46px;
+      top: 0;
+      display: flex;
+      gap: 18px;
+      align-items: flex-end;
+      pointer-events: none;
+    }
+
+    .poster {
+      width: 176px;
+      height: 210px;
+      border-radius: 20px;
+      color: #fff;
+      padding: 18px;
+      background:
+        radial-gradient(circle at 54% 72%, rgba(255,255,255,0.66), transparent 24%),
+        linear-gradient(155deg, #2f80ed 0%, #1769ff 46%, #9c7cff 100%);
+      box-shadow: 0 28px 56px rgba(23,105,255,0.24);
+      transform: rotate(5deg);
+    }
+
+    .poster:nth-child(2) {
+      transform: translateY(-18px) rotate(-3deg);
+      background:
+        radial-gradient(circle at 70% 76%, rgba(255,186,120,0.7), transparent 26%),
+        linear-gradient(155deg, #4ab6ff 0%, #5467ff 50%, #f3a6d8 100%);
+    }
+
+    .poster:nth-child(3) {
+      transform: translateY(12px) rotate(4deg);
+      background:
+        radial-gradient(circle at 74% 68%, rgba(255,255,255,0.72), transparent 25%),
+        linear-gradient(155deg, #2d74ff 0%, #856dff 48%, #ffd0a6 100%);
+    }
+
+    .poster b {
+      display: block;
+      font-size: 18px;
+      line-height: 1.28;
+    }
+
+    .poster span {
+      display: block;
+      margin-top: 10px;
+      color: rgba(255,255,255,0.78);
+      font-size: 12px;
+    }
+
+    .plans {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      overflow: hidden;
+      border-radius: 24px;
+      border: 1px solid rgba(255,255,255,0.76);
+      background: var(--surface-solid);
+      box-shadow: 0 30px 90px rgba(31,85,139,0.14);
+    }
+
+    .plan {
+      min-height: 420px;
+      padding: 36px 34px 32px;
+      border-right: 1px solid rgba(11,18,32,0.08);
+      background:
+        radial-gradient(circle at 78% 0%, rgba(124,109,255,0.08), transparent 34%),
+        #fff;
+    }
+
+    .plan:last-child { border-right: 0; }
+
+    .tag {
+      display: inline-flex;
+      align-items: center;
+      min-height: 28px;
+      padding: 0 10px;
+      border-radius: 999px;
+      color: var(--accent-deep);
+      background: rgba(47,128,237,0.10);
+      font-size: 12px;
+      font-weight: 800;
+    }
+
+    .tag.hot {
+      color: #f04f42;
+      background: rgba(255,122,89,0.12);
+    }
+
+    .plan h3 {
+      margin: 18px 0 20px;
+      font-size: clamp(23px, 2vw, 30px);
+      line-height: 1.2;
+      letter-spacing: 0;
+    }
+
+    .price {
+      display: flex;
+      align-items: baseline;
+      gap: 8px;
+      margin-bottom: 20px;
+    }
+
+    .price strong {
+      font-size: clamp(42px, 4vw, 58px);
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .price span {
+      color: var(--muted);
+      font-size: 15px;
+    }
+
+    .plan button {
+      width: 100%;
+      min-height: 50px;
+      margin: 8px 0 28px;
+      border: 0;
+      border-radius: 12px;
+      color: #fff;
+      background: linear-gradient(135deg, #65bfff, var(--accent-deep), #9b8cff);
+      font: inherit;
+      font-weight: 830;
+      box-shadow: 0 14px 30px rgba(23,105,255,0.20);
+    }
+
+    .features {
+      display: grid;
+      gap: 13px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      color: var(--muted);
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    .features li::before {
+      content: "✓";
+      margin-right: 10px;
+      color: var(--ink-soft);
+      font-weight: 900;
+    }
+
+    @media (max-width: 980px) {
+      .nav {
+        grid-template-columns: 1fr;
+        gap: 10px;
+        padding: 10px 0;
+      }
+      .nav-links {
+        overflow-x: auto;
+        padding-bottom: 4px;
+      }
+      .hero {
+        min-height: 430px;
+      }
+      .rail {
+        width: 680px;
+        height: 170px;
+      }
+      .benefits,
+      .plans {
+        grid-template-columns: 1fr;
+      }
+      .floating-preview {
+        position: static;
+        justify-content: center;
+        margin-bottom: 22px;
+      }
+      .product-stage {
+        padding-top: 0;
+      }
+      .plan {
+        min-height: auto;
+        border-right: 0;
+        border-bottom: 1px solid rgba(11,18,32,0.08);
+      }
+    }
+
+    @media (max-width: 640px) {
+      .page {
+        padding-inline: 14px;
+      }
+      .nav-links {
+        font-size: 13px;
+      }
+      .hero {
+        min-height: 500px;
+        border-radius: 0 0 24px 24px;
+      }
+      .hero-content {
+        padding-top: 76px;
+      }
+      h1 {
+        font-size: clamp(38px, 11vw, 52px);
+      }
+      .cube,
+      .chip,
+      .bot {
+        display: none;
+      }
+      .benefits {
+        width: 100%;
+        margin-bottom: 54px;
+      }
+      .poster {
+        width: 108px;
+        height: 138px;
+        padding: 12px;
+        border-radius: 16px;
+      }
+      .poster b {
+        font-size: 13px;
+      }
+      .poster span {
+        display: none;
+      }
+      .plan {
+        padding: 28px 22px;
+      }
+      .price strong {
+        font-size: 42px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="page" data-screen-label="01 浅蓝玻璃活动页">
+    <nav class="nav" aria-label="主导航">
+      <div class="brand">
+        <div class="logo" aria-hidden="true"><span></span><span></span><span></span></div>
+        <span>云启智能</span>
+      </div>
+      <div class="nav-links">
+        <span>最新活动</span>
+        <span>大模型</span>
+        <span>产品</span>
+        <span>解决方案</span>
+        <span>生态合作</span>
+        <span>开发者</span>
+      </div>
+      <div class="nav-cta">2026 智能资源季</div>
+    </nav>
+
+    <section class="hero">
+      <div class="rail" aria-hidden="true"></div>
+      <div class="cube" aria-hidden="true"></div>
+      <div class="chip" aria-hidden="true">%</div>
+      <div class="bot" aria-hidden="true"></div>
+      <div class="hero-content">
+        <h1><span class="grad">AI 资源包</span>，助力业务智能进阶</h1>
+        <p class="lead">方舟开发套餐 9.9 元/月起，精选模型额度、视频生成权益和团队协作工具限时开放。</p>
+        <button class="primary">立即领取</button>
+      </div>
+    </section>
+
+    <section class="benefits" aria-label="活动权益">
+      <div class="benefit">
+        <strong>开发者首购</strong>
+        <span>轻量模型额度，适合快速验证产品想法。</span>
+      </div>
+      <div class="benefit">
+        <strong>旗舰模型包</strong>
+        <span>长上下文、代码生成和多模态任务统一计费。</span>
+      </div>
+      <div class="benefit">
+        <strong>热门场景推荐</strong>
+        <span>写作、营销、视频和客服场景快速接入。</span>
+      </div>
+      <div class="benefit hot">
+        <strong>2500 万智能额度</strong>
+        <span>注册即可领取，支持团队共享和用量追踪。</span>
+      </div>
+    </section>
+
+    <section>
+      <div class="section-head">
+        <h2><span class="grad">精选产品</span>，助力千行百业 AI 创新</h2>
+        <p>透明光轨负责氛围，白色大卡负责阅读，蓝紫按钮负责行动。</p>
+        <div class="tabs">
+          <span>AI 编程</span>
+          <span>电商营销</span>
+          <span class="active">视频生成</span>
+          <span>内容创意</span>
+          <span>智能助手</span>
+        </div>
+      </div>
+
+      <div class="product-stage">
+        <div class="floating-preview" aria-hidden="true">
+          <div class="poster"><b>剧情场景生成</b><span>短片预告 · 分镜生成</span></div>
+          <div class="poster"><b>素材灵活组合</b><span>图片 · 视频 · 音频</span></div>
+          <div class="poster"><b>角色风格实现</b><span>多风格一致性</span></div>
+        </div>
+        <div class="plans">
+          <article class="plan">
+            <span class="tag hot">新客首单</span>
+          <h3>方舟编程套餐</h3>
+            <div class="price"><strong>¥9.90</strong><span>/ 月</span></div>
+            <button>立即订阅</button>
+            <ul class="features">
+              <li>集合主流优秀国产编程模型</li>
+              <li>多生态兼容，无缝融入工具链</li>
+              <li>团队用量看板和权限管理</li>
+            </ul>
+          </article>
+          <article class="plan">
+            <span class="tag">影级质感</span>
+            <h3>灵境视频生成包</h3>
+            <div class="price"><strong>¥196</strong><span>/ 700 万额度</span></div>
+            <button>立即购买</button>
+            <ul class="features">
+              <li>图片、视频、音频素材可灵活组合</li>
+              <li>视频延长、衔接补全和精细编辑</li>
+              <li>支持团队素材库和审核流</li>
+            </ul>
+          </article>
+          <article class="plan">
+            <span class="tag">旗舰模型</span>
+            <h3>全能臻享包</h3>
+            <div class="price"><strong>¥280</strong><span>/ 1000 万额度</span></div>
+            <button>立即购买</button>
+            <ul class="features">
+              <li>长上下文推理与多模态任务统一接入</li>
+              <li>按量折扣和团队共享额度</li>
+              <li>日志审计、成本提醒和质量评估</li>
+            </ul>
+          </article>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <script>
+    (() => {
+      const applyEdits = (edits = {}) => {
+        const root = document.documentElement;
+        if (edits.primaryBlue) root.style.setProperty("--accent-deep", edits.primaryBlue);
+        if (edits.railOpacity) root.style.setProperty("--rail-opacity", String(edits.railOpacity));
+        if (edits.sparkOpacity) root.style.setProperty("--spark-opacity", String(edits.sparkOpacity));
+      };
+
+      window.addEventListener("message", (event) => {
+        const data = event.data || {};
+        if (data.type === "__edit_mode_set_keys") applyEdits(data.edits || data.keys || {});
+      });
+
+      window.parent?.postMessage({
+        type: "__edit_mode_available",
+        edits: {
+          primaryBlue: "#1769ff",
+          railOpacity: 0.88,
+          sparkOpacity: 0.82
+        }
+      }, "*");
+    })();
+  </script>
+  <script type="application/json" id="editmode-config">
+    /*EDITMODE-BEGIN*/
+    {
+      "primaryBlue": {
+        "label": "主蓝色",
+        "type": "color",
+        "value": "#1769ff"
+      },
+      "railOpacity": {
+        "label": "光轨强度",
+        "type": "range",
+        "min": 0.34,
+        "max": 1,
+        "step": 0.02,
+        "value": 0.88
+      },
+      "sparkOpacity": {
+        "label": "活力点强度",
+        "type": "range",
+        "min": 0.28,
+        "max": 1,
+        "step": 0.02,
+        "value": 0.82
+      }
+    }
+    /*EDITMODE-END*/
+  </script>
+</body>
+</html>