From a733ff04aa389400c7fb905c3f212b65f4de22c1 Mon Sep 17 00:00:00 2001 From: Rocky <72559939+hkgood@users.noreply.github.com> Date: Sun, 12 Jul 2026 17:18:28 +0800 Subject: [PATCH] docs(landing): redesign diff explorer and tune section washes Replace the five-card stack with a pill tab bar and elevated detail stage, use a white band for the competitor matrix, and a soft gray band for the three-step setup section. --- CHANGELOG.md | 2 +- docs/index.html | 224 +++++++++++++++++++++++++++++------------------- 2 files changed, 136 insertions(+), 90 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0008b99..c536fbf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,7 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - **DEBUG demo seed URL**: `osgkeyboard://seed-demo` fills Home stats, History, and Dictionary with placeholder data and turns iCloud sync off (script: `scripts/seed_demo_data.py`). / **DEBUG 演示数据**：`osgkeyboard://seed-demo` 填充首页统计、历史与词库占位数据并关闭 iCloud 同步（脚本：`scripts/seed_demo_data.py`）。 ### Changed -- **Landing section copy**: richer interactive pillars (hover/tap detail stage; BYOK panel absorbs former BYOK block) plus competitor matrix; titles →「开源，尽是不同」/ setup「开箱可用，只要三步」。 / **落地页文案**：差异柱改为悬停/点按展开详情（BYOK 面板吸收原独立 BYOK 区）并加竞品对照表；标题含「开源，尽是不同」与「开箱可用，只要三步」。 +- **Landing section copy**: interactive pill-tab differentiator explorer (elevated detail stage; BYOK absorbed) plus competitor matrix and section bands; titles →「开源，尽是不同」/「开箱可用，只要三步」。 / **落地页文案**：差异区改为胶囊 Tab + 抬升详情台（BYOK 并入）；含竞品对照与分区底色带；标题含「开源，尽是不同」「开箱可用，只要三步」。 - **Unified welcome slogan**: iPad Home now reuses the iOS onboarding brand line, and macOS onboarding shows the same “Speak it. It’s typed.” welcome slogan. / **统一欢迎口号**：iPad 首页复用 iOS 引导页品牌句，macOS 引导页也显示同一句「开口即文字。」欢迎口号。 - **GitHub Pages landing**: redesign as a commercial product page with zh/en, light/dark, brand mark, scroll motion, and App Store screenshots; emphasizes free, cross-platform, open source, privacy, and BYOK. / **GitHub Pages 落地页**：改版为商业产品页，支持中英与日夜模式、品牌标、滚动动效与 App Store 截图；突出免费、跨端、开源、隐私与 BYOK。 - **Landing hero device family**: Mac + iPad + iPhone nested in one mockup cluster (no outer card stroke); screens swap with language/theme. / **落地页 Hero 设备组**：Mac、iPad、iPhone 叠放在同一组设备框内（无外卡片描边）；截图随语言/主题切换。 diff --git a/docs/index.html b/docs/index.html index dd68b4d..6d8e087 100644 --- a/docs/index.html +++ b/docs/index.html @@ -319,6 +319,12 @@ border-block: 1px solid var(--line); padding: 4.25rem 0; } + /* Comparison section: white / elevated surface */ + section.block.block-band-white { + background: var(--bg-elevated); + border-block: 1px solid var(--line); + padding: 4.25rem 0; + } /* Alternate wash so consecutive bands don’t read as one slab */ section.block.block-band-wash { background: var(--hero-wash); @@ -342,90 +348,129 @@ font-size: 1.05rem; } - /* —— Diff pillars (hover / tap → detail stage) —— */ + /* —— Diff explorer (pill tabs + elevated stage) —— */ + .diff-explorer { + display: flex; + flex-direction: column; + gap: 1.75rem; + } .pillars { - display: grid; - grid-template-columns: repeat(5, 1fr); - gap: 0.75rem; - } - @media (max-width: 960px) { - .pillars { grid-template-columns: repeat(3, 1fr); } - } - @media (max-width: 620px) { - .pillars { grid-template-columns: 1fr 1fr; } + display: flex; + flex-wrap: nowrap; + justify-content: center; + gap: 0.25rem; + margin: 0 auto; + padding: 0.3rem; + width: fit-content; + max-width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + border: 1px solid var(--line); + border-radius: 999px; + background: var(--bg-elevated); + box-shadow: 0 1px 0 rgba(18, 18, 20, 0.04); + scrollbar-width: none; } + .pillars::-webkit-scrollbar { display: none; } .pillar { appearance: none; - width: 100%; - text-align: left; + flex: 0 0 auto; + display: inline-flex; + align-items: center; + gap: 0.45rem; + padding: 0.65rem 1.05rem; + border: 0; + border-radius: 999px; + background: transparent; + color: var(--text-2); font: inherit; - color: inherit; + font-size: 0.9rem; + font-weight: 600; + letter-spacing: -0.015em; cursor: pointer; - padding: 1.15rem 1rem; - border: 1px solid var(--line); - border-radius: var(--radius); - background: var(--bg-elevated); - transition: border-color 0.22s, transform 0.22s, background 0.22s, box-shadow 0.22s; + white-space: nowrap; + transition: color 0.2s, background 0.2s, box-shadow 0.2s; + } + .pillar .material-symbols-outlined { + font-size: 18px; + color: currentColor; + opacity: 0.85; } .pillar:hover { - transform: translateY(-2px); - border-color: var(--line-strong); + color: var(--text); + background: var(--bg-soft); } .pillar.is-active, .pillar:focus-visible { - border-color: var(--accent); - background: var(--accent-soft); - box-shadow: 0 0 0 1px var(--accent); + color: #fff; + background: var(--accent); + box-shadow: 0 8px 22px var(--accent-glow); outline: none; - transform: translateY(-2px); } - .pillar .material-symbols-outlined { - font-size: 24px; - color: var(--accent); - margin-bottom: 0.65rem; - display: block; + .pillar.is-active .material-symbols-outlined, + .pillar:focus-visible .material-symbols-outlined { + opacity: 1; + color: #fff; } - .pillar h3 { - margin: 0 0 0.3rem; - font-size: 1rem; - letter-spacing: -0.015em; - } - .pillar .pillar-lead { - margin: 0; - font-size: 0.82rem; - color: var(--text-2); - line-height: 1.4; - } - .pillar-hint { - display: inline-block; - margin-top: 0.7rem; - font-size: 0.72rem; - font-weight: 600; - letter-spacing: 0.02em; - color: var(--accent); - opacity: 0.75; - } - .pillar.is-active .pillar-hint { opacity: 1; } .pillar-stage { - margin-top: 1rem; - border-radius: calc(var(--radius) + 4px); + position: relative; + border-radius: 28px; border: 1px solid var(--line); - background: var(--hero-wash); - padding: 1.5rem 1.35rem; - min-height: 9.5rem; + background: var(--bg-elevated); + box-shadow: + 0 1px 0 rgba(255, 255, 255, 0.55) inset, + 0 24px 60px rgba(18, 18, 20, 0.08); + padding: clamp(1.5rem, 3.5vw, 2.35rem); + overflow: hidden; + min-height: 12rem; + } + .pillar-stage::before { + content: ""; + position: absolute; + inset: 0 auto auto 0; + width: min(52%, 420px); + height: 180px; + background: radial-gradient(ellipse at 20% 0%, var(--accent-soft), transparent 70%); + pointer-events: none; + } + html[data-theme="dark"] .pillar-stage { + box-shadow: + 0 1px 0 rgba(255, 255, 255, 0.04) inset, + 0 24px 60px rgba(0, 0, 0, 0.35); + } + @media (prefers-color-scheme: dark) { + html[data-theme="system"] .pillar-stage { + box-shadow: + 0 1px 0 rgba(255, 255, 255, 0.04) inset, + 0 24px 60px rgba(0, 0, 0, 0.35); + } + } + .pillar-panel { + position: relative; + z-index: 1; } .pillar-panel[hidden] { display: none !important; } + .pillar-panel:not([hidden]) { + animation: panel-in 0.38s cubic-bezier(0.22, 1, 0.36, 1); + } + @keyframes panel-in { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: none; } + } .pillar-panel-kicker { - margin: 0 0 1rem; - font-size: 0.9rem; - color: var(--text-2); - max-width: 42rem; + margin: 0 0 1.5rem; + max-width: 38rem; + font-size: clamp(1.05rem, 2.2vw, 1.25rem); + font-weight: 600; + letter-spacing: -0.025em; + line-height: 1.35; + color: var(--text); } .pillar-points { display: grid; grid-template-columns: repeat(4, 1fr); - gap: 1.1rem; + gap: 1.15rem 1.35rem; } @media (max-width: 900px) { .pillar-points { grid-template-columns: 1fr 1fr; } @@ -433,22 +478,31 @@ @media (max-width: 520px) { .pillar-points { grid-template-columns: 1fr; } } + .pillar-point { + padding: 1rem 0.15rem 0.15rem; + border-top: 1px solid var(--line); + } .pillar-point .material-symbols-outlined { - font-size: 22px; + width: 2.1rem; + height: 2.1rem; + display: grid; + place-items: center; + margin-bottom: 0.7rem; + border-radius: 10px; + font-size: 18px; color: var(--accent); - margin-bottom: 0.45rem; - display: block; + background: var(--accent-soft); } .pillar-point h4 { - margin: 0 0 0.28rem; - font-size: 0.95rem; + margin: 0 0 0.35rem; + font-size: 0.98rem; letter-spacing: -0.015em; } .pillar-point p { margin: 0; - font-size: 0.86rem; + font-size: 0.88rem; color: var(--text-2); - line-height: 1.45; + line-height: 1.5; } /* —— Competitor matrix —— */ @@ -664,42 +718,33 @@

开源，尽是不同

-

悬停或点按下方卡片，展开每一项差异——内容写在产品里，不写在定价页。

+

差异写在产品里，不写在定价页。切换下方主题，看清每一项。

-
+
+
-
+

没有「基础版听写、进阶版解锁」——认真用也不用升级。

@@ -830,11 +875,12 @@
+
-
+

和常见听写工具比一比

@@ -909,7 +955,7 @@
-
+

开箱可用，只要三步

@@ -958,7 +1004,7 @@ "hero.meta2": "BYOK — no double pay", "hero.meta3": "iOS · iPad · Mac", "diff.title": "Open source. Built different.", - "diff.subtitle": "Hover or tap a card to expand each difference — designed into the product, not the pricing page.", + "diff.subtitle": "Designed into the product — not the pricing page. Switch a theme below to see each difference.", "diff.hint": "Show details", "diff.free.t": "Free", "diff.free.b": "Core open. No Pro wall.", @@ -1054,7 +1100,7 @@ "hero.meta2": "BYOK 不重复付费", "hero.meta3": "iOS · iPad · Mac", "diff.title": "开源，尽是不同", - "diff.subtitle": "悬停或点按下方卡片，展开每一项差异——内容写在产品里，不写在定价页。", + "diff.subtitle": "差异写在产品里，不写在定价页。切换下方主题，看清每一项。", "diff.hint": "展开详情", "diff.free.t": "免费", "diff.free.b": "核心全开，没有 Pro 墙。",