docs(pages): redesign home as dark product stage with real footage
- Render the new Icon Composer app icon for favicon, nav, and og:image - Hero uses the three-device visual on a dark stage; hand-drawn mockups replaced with on-device videos and real UI cards - Add 2.1 selling points: personal style, three-tone replies, monthly usage calendar, EventKit skills export, guided trials, credit rewards - Restructure service paths with on-device as the primary trust card - Self-hosted inline SVG icons; remove dead Three.js assets and logo.svg - Bump page version references to 2.1.0 (Mac source at 2.2)
This commit is contained in:
Rocky
+92
-25
@@ -1,22 +1,28 @@
|
||||
/*!
|
||||
* OSGKeyboard website interactions.
|
||||
* The page remains useful without JavaScript; this file adds language,
|
||||
* theme, and compact mobile navigation controls.
|
||||
* OSGKeyboard 主页交互。
|
||||
* 无 JavaScript 时页面内容完整可读；本文件负责：
|
||||
* 1. 中 / 英双语切换（data-zh / data-en 系列属性，含视频源）
|
||||
* 2. 深浅色主题（默认跟随系统，手动选择后持久化）
|
||||
* 3. 移动端导航开合
|
||||
* 4. 导航栏滚动状态、滚动显现动效、离屏视频暂停
|
||||
*/
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
const root = document.documentElement;
|
||||
const siteNav = document.getElementById("siteNav");
|
||||
const languageButton = document.getElementById("languageToggle");
|
||||
const themeButton = document.getElementById("themeToggle");
|
||||
const themeIcon = themeButton?.querySelector(".material-symbols-rounded");
|
||||
const themeIconUse = document.getElementById("themeIconUse");
|
||||
const menuButton = document.getElementById("menuToggle");
|
||||
const menuIcon = menuButton?.querySelector(".material-symbols-rounded");
|
||||
const menuIconUse = document.getElementById("menuIconUse");
|
||||
const mobileNav = document.getElementById("mobileNav");
|
||||
const themeColor = document.querySelector('meta[name="theme-color"]');
|
||||
const themeMedia = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
const supportedLanguages = new Set(["zh", "en"]);
|
||||
|
||||
/* ---------------- 语言 ---------------- */
|
||||
|
||||
function preferredLanguage() {
|
||||
const query = new URLSearchParams(window.location.search).get("lang");
|
||||
if (supportedLanguages.has(query)) return query;
|
||||
@@ -42,6 +48,7 @@
|
||||
element.alt = element.dataset[`${lang}Alt`] || "";
|
||||
});
|
||||
|
||||
// 同时覆盖 <img> 与 <video>：切换语言后视频自动重新加载播放
|
||||
document.querySelectorAll("[data-zh-src][data-en-src]").forEach((element) => {
|
||||
element.src = element.dataset[`${lang}Src`] || "";
|
||||
});
|
||||
@@ -58,14 +65,15 @@
|
||||
element.setAttribute("content", element.dataset[`${lang}Content`] || "");
|
||||
});
|
||||
|
||||
// 实机截图按 语言 + 主题 组合切换
|
||||
document.querySelectorAll("[data-shot]").forEach((image) => {
|
||||
const theme = root.dataset.theme || "light";
|
||||
image.src = `assets/screenshots/${lang}/${theme}/${image.dataset.shot}`;
|
||||
});
|
||||
|
||||
document.title = lang === "zh"
|
||||
? "OSGKeyboard — 语音输入、中英打字与 AI 助手"
|
||||
: "OSGKeyboard — Voice input, bilingual typing, and an AI assistant";
|
||||
? "OSGKeyboard — 开口即文字"
|
||||
: "OSGKeyboard — Say it. It’s typed.";
|
||||
|
||||
if (languageButton) {
|
||||
languageButton.textContent = lang === "zh" ? "EN" : "中文";
|
||||
@@ -97,33 +105,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------- 主题 ---------------- */
|
||||
|
||||
function storedTheme() {
|
||||
const saved = localStorage.getItem("osg-site-theme");
|
||||
return saved === "light" || saved === "dark" ? saved : null;
|
||||
}
|
||||
|
||||
function setMenuOpen(isOpen) {
|
||||
if (!menuButton || !mobileNav) return;
|
||||
const open = Boolean(isOpen);
|
||||
menuButton.setAttribute("aria-expanded", String(open));
|
||||
mobileNav.hidden = !open;
|
||||
if (menuIcon) menuIcon.textContent = open ? "close" : "menu";
|
||||
const lang = root.dataset.lang || "zh";
|
||||
menuButton.setAttribute(
|
||||
"aria-label",
|
||||
lang === "zh"
|
||||
? (open ? "关闭导航" : "打开导航")
|
||||
: (open ? "Close navigation" : "Open navigation")
|
||||
);
|
||||
}
|
||||
|
||||
function applyTheme(theme, persist) {
|
||||
const resolved = theme === "dark" ? "dark" : "light";
|
||||
root.dataset.theme = resolved;
|
||||
root.style.colorScheme = resolved;
|
||||
|
||||
if (themeIcon) {
|
||||
themeIcon.textContent = resolved === "dark" ? "light_mode" : "dark_mode";
|
||||
// 图标指向「点击后切换到的目标主题」
|
||||
if (themeIconUse) {
|
||||
themeIconUse.setAttribute("href", resolved === "dark" ? "#i-sun" : "#i-moon");
|
||||
}
|
||||
|
||||
if (themeButton) {
|
||||
@@ -134,7 +130,8 @@
|
||||
themeButton.setAttribute("aria-label", label);
|
||||
}
|
||||
|
||||
themeColor?.setAttribute("content", resolved === "dark" ? "#0c0e0f" : "#eef2f6");
|
||||
// 深色舞台在各主题下配色一致，theme-color 跟随舞台色
|
||||
themeColor?.setAttribute("content", "#0e1013");
|
||||
|
||||
document.querySelectorAll("[data-shot]").forEach((image) => {
|
||||
const lang = root.dataset.lang || "zh";
|
||||
@@ -144,6 +141,25 @@
|
||||
if (persist) localStorage.setItem("osg-site-theme", resolved);
|
||||
}
|
||||
|
||||
/* ---------------- 移动端导航 ---------------- */
|
||||
|
||||
function setMenuOpen(isOpen) {
|
||||
if (!menuButton || !mobileNav) return;
|
||||
const open = Boolean(isOpen);
|
||||
menuButton.setAttribute("aria-expanded", String(open));
|
||||
mobileNav.hidden = !open;
|
||||
if (menuIconUse) menuIconUse.setAttribute("href", open ? "#i-close" : "#i-menu");
|
||||
const lang = root.dataset.lang || "zh";
|
||||
menuButton.setAttribute(
|
||||
"aria-label",
|
||||
lang === "zh"
|
||||
? (open ? "关闭导航" : "打开导航")
|
||||
: (open ? "Close navigation" : "Open navigation")
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------------- 初始化 ---------------- */
|
||||
|
||||
const initialLanguage = preferredLanguage();
|
||||
const initialTheme = storedTheme() || (themeMedia.matches ? "dark" : "light");
|
||||
applyLanguage(initialLanguage, false);
|
||||
@@ -173,4 +189,55 @@
|
||||
themeMedia.addEventListener("change", (event) => {
|
||||
if (!storedTheme()) applyTheme(event.matches ? "dark" : "light", false);
|
||||
});
|
||||
|
||||
/* ---------------- 导航栏滚动状态 ---------------- */
|
||||
|
||||
function updateNavState() {
|
||||
siteNav?.classList.toggle("is-scrolled", window.scrollY > 24);
|
||||
}
|
||||
updateNavState();
|
||||
window.addEventListener("scroll", updateNavState, { passive: true });
|
||||
|
||||
/* ---------------- 滚动显现与离屏视频暂停 ---------------- */
|
||||
|
||||
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
|
||||
if (reduceMotion || !("IntersectionObserver" in window)) {
|
||||
document.querySelectorAll(".reveal").forEach((element) => {
|
||||
element.classList.add("is-visible");
|
||||
});
|
||||
} else {
|
||||
const revealObserver = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add("is-visible");
|
||||
revealObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
|
||||
);
|
||||
document.querySelectorAll(".reveal").forEach((element) => {
|
||||
revealObserver.observe(element);
|
||||
});
|
||||
|
||||
// 视频滚出视口时暂停，回来时恢复，省电且避免分散注意力
|
||||
const videoObserver = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
const video = entry.target;
|
||||
if (entry.isIntersecting) {
|
||||
video.play().catch(() => {});
|
||||
} else {
|
||||
video.pause();
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.15 }
|
||||
);
|
||||
document.querySelectorAll("video[autoplay]").forEach((video) => {
|
||||
videoObserver.observe(video);
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user