diff --git a/docs/assets/screenshots/iphone-dictionary.png b/docs/assets/screenshots/iphone-dictionary.png index d9e580a..8267900 100644 Binary files a/docs/assets/screenshots/iphone-dictionary.png and b/docs/assets/screenshots/iphone-dictionary.png differ diff --git a/docs/assets/screenshots/iphone-home.png b/docs/assets/screenshots/iphone-home.png index 228b580..431dee6 100644 Binary files a/docs/assets/screenshots/iphone-home.png and b/docs/assets/screenshots/iphone-home.png differ diff --git a/docs/assets/screenshots/iphone-keyboard_idle.png b/docs/assets/screenshots/iphone-keyboard_idle.png index 7bf4d98..e5a9566 100644 Binary files a/docs/assets/screenshots/iphone-keyboard_idle.png and b/docs/assets/screenshots/iphone-keyboard_idle.png differ diff --git a/docs/assets/screenshots/iphone-keyboard_recording.png b/docs/assets/screenshots/iphone-keyboard_recording.png index ad54859..20e035c 100644 Binary files a/docs/assets/screenshots/iphone-keyboard_recording.png and b/docs/assets/screenshots/iphone-keyboard_recording.png differ diff --git a/docs/index.html b/docs/index.html index ff2fd9c..a184ee4 100644 --- a/docs/index.html +++ b/docs/index.html @@ -303,9 +303,7 @@ .hero-stage-frame img { width: 100%; height: auto; - aspect-ratio: 16 / 10; - object-fit: cover; - object-position: top center; + display: block; } .sonic-ring { position: absolute; @@ -403,21 +401,36 @@ } /* —— Story rows —— */ + /* Never force aspect-ratio + object-fit:cover on product shots — that crops/squashes. */ .story { display: grid; - grid-template-columns: 1fr 1.15fr; - gap: 3rem; + grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); + gap: clamp(1.5rem, 4vw, 3rem); align-items: center; - padding: 2.5rem 0; + padding: 2.75rem 0; } - .story.reverse { direction: rtl; } - .story.reverse > * { direction: ltr; } + .story.story--phone { + grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); + } + .story.story--media-first { + grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); + } + .story.story--media-first.story--phone { + grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); + } + .story.story--media-first .story-copy { order: 2; } + .story.story--media-first .story-media { order: 1; } @media (max-width: 860px) { - .story, .story.reverse { + .story, + .story.story--phone, + .story.story--media-first, + .story.story--media-first.story--phone { grid-template-columns: 1fr; - gap: 1.5rem; - direction: ltr; + gap: 1.35rem; } + .story.story--media-first .story-copy, + .story.story--media-first .story-media { order: initial; } + .story .story-media { order: -1; } } .story-copy .kicker { display: inline-flex; @@ -440,53 +453,76 @@ color: var(--text-2); font-size: 1.02rem; } - .story-media { - border-radius: 16px; - overflow: hidden; - border: 1px solid var(--line); - background: var(--bg-soft); - box-shadow: var(--shadow); - } - .story-media img { - width: 100%; - aspect-ratio: 16 / 10; - object-fit: cover; - object-position: top center; - } - .story-media.phone-media { - max-width: 280px; - margin-inline: auto; - border-radius: 28px; - aspect-ratio: auto; - } - .story-media.phone-media img { - aspect-ratio: 9 / 19.5; - object-fit: cover; - } - - /* —— Device strip —— */ - .device-strip { - display: grid; - grid-template-columns: 1.1fr 0.7fr 0.7fr; - gap: 1.1rem; - align-items: end; - } - @media (max-width: 800px) { - .device-strip { grid-template-columns: 1fr; } - } - .device-card { + .shot { + margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-elevated); box-shadow: var(--shadow); + line-height: 0; } - .device-card img { width: 100%; } - .device-card.phone { - max-width: 260px; + .shot img { + width: 100%; + height: auto; + display: block; + } + .shot--phone { + border-radius: 28px; + max-width: 300px; + width: 100%; margin-inline: auto; + } + + /* —— Device strip —— */ + .device-strip { + display: flex; + flex-wrap: wrap; + align-items: flex-end; + justify-content: center; + gap: 1.5rem 1.75rem; + } + .device-card { + margin: 0; + border-radius: 16px; + overflow: hidden; + border: 1px solid var(--line); + background: var(--bg-elevated); + box-shadow: var(--shadow); + line-height: 0; + } + .device-card img { + width: 100%; + height: auto; + display: block; + } + .device-card.mac { + flex: 1 1 520px; + max-width: 720px; + } + .device-card.phone { + flex: 0 0 auto; + width: min(260px, 46vw); border-radius: 26px; } + .device-caption { + margin-top: 0.65rem; + font-size: 0.8rem; + font-weight: 600; + color: var(--text-3); + text-align: center; + line-height: 1.3; + } + .device-item { + display: flex; + flex-direction: column; + align-items: center; + } + .device-item.mac { + flex: 1 1 520px; + max-width: 720px; + } + .device-item.mac .device-card { width: 100%; } /* —— Compare —— */ .compare { @@ -692,7 +728,7 @@
- OSGKeyboard Mac dashboard + OSGKeyboard Mac dashboard
@@ -749,25 +785,29 @@ macOS -

按住 Option，全局听写

-

菜单栏常驻，底部浮层实时反馈。本地 ASR 就绪时，文字直接落在当前光标处。

+

首页听写，边说边落字

+

红色录音态实时显示转写。本地 ASR 就绪时，文字出现在听写区，也可插入前台 App 光标处。

- Mac recording +
+ Mac dictation recording +
-
+
- iPhone / iPad + iPhone
-

任意 App 里的自定义键盘

-

点按麦克风说话。绿色就绪、红色录音，状态一目了然 — 不用离开正在写的东西。

+

自定义键盘：绿就绪，红录音

+

主 App 可试键盘；系统设置添加后，任意 App 切换到 OSGKeyboard 即可听写。「本地」标识默认不上云。

-
- iPhone keyboard recording +
+
+ iPhone keyboard recording +
@@ -775,27 +815,31 @@
- Personal dictionary + 个性词库

个性词库，让识别更懂你

-

人名、产品名、专业术语原样保留。AI 润色时不会被「改坏」，并可跨设备同步。

+

人名、产品名、专业术语按类整理。AI 润色时原样保留，避免被「改坏」。

- Dictionary +
+ Mac personal dictionary +
-
+
- - BYOK & engines + + 隐私 · 本地引擎
-

引擎与 Key，都由你决定

-

本地识别或云端引擎。DeepSeek、OpenAI 兼容端点 — 填入你的 Key，费用只付给你选的服务商。

+

默认本地识别，高隐私低延迟

+

设置里可选本地或云端引擎。截图中本地识别已勾选；云端与 API Key 仅在你主动配置时使用。

- Settings +
+ Mac settings local ASR +
@@ -805,18 +849,27 @@
-

同一套产品语言

-

桌面听写、手机键盘、统计与历史 — 一条体验线。

+

跨端同一套体验

+

Mac 历史归档，iPhone 用量与键盘 — 完整窗口，不做裁切。

-
- Mac history +
+
+ Mac history +
+
Mac · 听写历史
-
- iPhone home +
+
+ iPhone home +
+
iPhone · 首页统计
-
- iPhone keyboard idle +
+
+ iPhone keyboard idle +
+
iPhone · 键盘待机
@@ -946,19 +999,22 @@ "product.title": "After you speak, you stay in control", "product.subtitle": "From keyboard to desktop — real product UI.", "story.mac.k": "macOS", - "story.mac.t": "Hold Option. Dictate anywhere.", - "story.mac.b": "Menu-bar app with a live overlay. Local ASR ready — polished text lands at your cursor.", - "story.ios.k": "iPhone / iPad", - "story.ios.t": "A custom keyboard in every app", - "story.ios.b": "Tap the mic. Green ready, red recording — stay in whatever you were writing.", + "story.mac.t": "Dictate on the home screen — live transcript", + "story.mac.b": "Red recording state streams text into the dictation area. With local ASR ready, insert at the frontmost app cursor when you choose.", + "story.ios.k": "iPhone", + "story.ios.t": "Custom keyboard: green ready, red recording", + "story.ios.b": "Try it in the main app; after adding the keyboard in Settings, switch to OSGKeyboard in any app. The Local chip means audio stays on-device by default.", "story.dict.k": "Personal dictionary", "story.dict.t": "Terms the AI must never rewrite", - "story.dict.b": "Names, products, jargon stay verbatim — and can sync across devices.", - "story.settings.k": "BYOK & engines", - "story.settings.t": "You choose the engine and the key", - "story.settings.b": "Local or cloud ASR. DeepSeek / OpenAI-compatible endpoints — you pay only your provider.", - "gallery.title": "One product language", - "gallery.subtitle": "Desktop dictation, mobile keyboard, stats and history — one line.", + "story.dict.b": "Names, products, and jargon — grouped and preserved verbatim during polish.", + "story.settings.k": "Privacy · local engine", + "story.settings.t": "Local recognition by default", + "story.settings.b": "Choose local or cloud in Settings. This shot shows local ASR selected; cloud engines and API keys only when you opt in.", + "gallery.title": "One experience across devices", + "gallery.subtitle": "Mac history, iPhone stats and keyboard — full frames, never cropped.", + "gallery.cap.mac": "Mac · History", + "gallery.cap.home": "iPhone · Home stats", + "gallery.cap.kb": "iPhone · Keyboard idle", "compare.title": "Why BYOK matters", "compare.subtitle": "Many tools fold AI usage into a subscription. If you already have a key, you shouldn't pay again.", "compare.1.t": "No double billing", @@ -1011,19 +1067,22 @@ "product.title": "开口之后，全链路都在你掌控", "product.subtitle": "从键盘到桌面，从词库到设置 — 真实产品界面。", "story.mac.k": "macOS", - "story.mac.t": "按住 Option，全局听写", - "story.mac.b": "菜单栏常驻，底部浮层实时反馈。本地 ASR 就绪时，文字直接落在当前光标处。", - "story.ios.k": "iPhone / iPad", - "story.ios.t": "任意 App 里的自定义键盘", - "story.ios.b": "点按麦克风说话。绿色就绪、红色录音，状态一目了然 — 不用离开正在写的东西。", + "story.mac.t": "首页听写，边说边落字", + "story.mac.b": "红色录音态实时显示转写。本地 ASR 就绪时，文字出现在听写区，也可插入前台 App 光标处。", + "story.ios.k": "iPhone", + "story.ios.t": "自定义键盘：绿就绪，红录音", + "story.ios.b": "主 App 可试键盘；系统设置添加后，任意 App 切换到 OSGKeyboard 即可听写。「本地」标识默认不上云。", "story.dict.k": "个性词库", "story.dict.t": "个性词库，让识别更懂你", - "story.dict.b": "人名、产品名、专业术语原样保留。AI 润色时不会被「改坏」，并可跨设备同步。", - "story.settings.k": "BYOK & 引擎", - "story.settings.t": "引擎与 Key，都由你决定", - "story.settings.b": "本地识别或云端引擎。DeepSeek、OpenAI 兼容端点 — 填入你的 Key，费用只付给你选的服务商。", - "gallery.title": "同一套产品语言", - "gallery.subtitle": "桌面听写、手机键盘、统计与历史 — 一条体验线。", + "story.dict.b": "人名、产品名、专业术语按类整理。AI 润色时原样保留，避免被「改坏」。", + "story.settings.k": "隐私 · 本地引擎", + "story.settings.t": "默认本地识别，高隐私低延迟", + "story.settings.b": "设置里可选本地或云端引擎。截图中本地识别已勾选；云端与 API Key 仅在你主动配置时使用。", + "gallery.title": "跨端同一套体验", + "gallery.subtitle": "Mac 历史归档，iPhone 用量与键盘 — 完整窗口，不做裁切。", + "gallery.cap.mac": "Mac · 听写历史", + "gallery.cap.home": "iPhone · 首页统计", + "gallery.cap.kb": "iPhone · 键盘待机", "compare.title": "为什么选 BYOK", "compare.subtitle": "很多工具把 AI 用量包进订阅。你已经有 Key 时，不该再付一遍。", "compare.1.t": "避免重复消费",