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
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 524 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 421 KiB |
@@ -1,373 +0,0 @@
|
||||
/*!
|
||||
* OSGKeyboard hero beams — vanilla Three.js recreation inspired by
|
||||
* React Bits "Beams" (https://reactbits.dev/backgrounds/beams).
|
||||
* Parameters match the shared demo preset.
|
||||
* three.js is MIT; this file is project code.
|
||||
*/
|
||||
(function (global) {
|
||||
"use strict";
|
||||
|
||||
const NOISE = `
|
||||
float random (in vec2 st) {
|
||||
return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
|
||||
}
|
||||
float noise (in vec2 st) {
|
||||
vec2 i = floor(st);
|
||||
vec2 f = fract(st);
|
||||
float a = random(i);
|
||||
float b = random(i + vec2(1.0, 0.0));
|
||||
float c = random(i + vec2(0.0, 1.0));
|
||||
float d = random(i + vec2(1.0, 1.0));
|
||||
vec2 u = f * f * (3.0 - 2.0 * f);
|
||||
return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
|
||||
}
|
||||
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
|
||||
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
|
||||
vec3 fade(vec3 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
|
||||
float cnoise(vec3 P){
|
||||
vec3 Pi0 = floor(P);
|
||||
vec3 Pi1 = Pi0 + vec3(1.0);
|
||||
Pi0 = mod(Pi0, 289.0);
|
||||
Pi1 = mod(Pi1, 289.0);
|
||||
vec3 Pf0 = fract(P);
|
||||
vec3 Pf1 = Pf0 - vec3(1.0);
|
||||
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
|
||||
vec4 iy = vec4(Pi0.yy, Pi1.yy);
|
||||
vec4 iz0 = Pi0.zzzz;
|
||||
vec4 iz1 = Pi1.zzzz;
|
||||
vec4 ixy = permute(permute(ix) + iy);
|
||||
vec4 ixy0 = permute(ixy + iz0);
|
||||
vec4 ixy1 = permute(ixy + iz1);
|
||||
vec4 gx0 = ixy0 / 7.0;
|
||||
vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;
|
||||
gx0 = fract(gx0);
|
||||
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
|
||||
vec4 sz0 = step(gz0, vec4(0.0));
|
||||
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
|
||||
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
|
||||
vec4 gx1 = ixy1 / 7.0;
|
||||
vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;
|
||||
gx1 = fract(gx1);
|
||||
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
|
||||
vec4 sz1 = step(gz1, vec4(0.0));
|
||||
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
|
||||
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
|
||||
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
|
||||
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
|
||||
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
|
||||
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
|
||||
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
|
||||
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
|
||||
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
|
||||
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
|
||||
vec4 norm0 = taylorInvSqrt(vec4(dot(g000,g000),dot(g010,g010),dot(g100,g100),dot(g110,g110)));
|
||||
g000 *= norm0.x; g010 *= norm0.y; g100 *= norm0.z; g110 *= norm0.w;
|
||||
vec4 norm1 = taylorInvSqrt(vec4(dot(g001,g001),dot(g011,g011),dot(g101,g101),dot(g111,g111)));
|
||||
g001 *= norm1.x; g011 *= norm1.y; g101 *= norm1.z; g111 *= norm1.w;
|
||||
float n000 = dot(g000, Pf0);
|
||||
float n100 = dot(g100, vec3(Pf1.x,Pf0.yz));
|
||||
float n010 = dot(g010, vec3(Pf0.x,Pf1.y,Pf0.z));
|
||||
float n110 = dot(g110, vec3(Pf1.xy,Pf0.z));
|
||||
float n001 = dot(g001, vec3(Pf0.xy,Pf1.z));
|
||||
float n101 = dot(g101, vec3(Pf1.x,Pf0.y,Pf1.z));
|
||||
float n011 = dot(g011, vec3(Pf0.x,Pf1.yz));
|
||||
float n111 = dot(g111, Pf1);
|
||||
vec3 fade_xyz = fade(Pf0);
|
||||
vec4 n_z = mix(vec4(n000,n100,n010,n110),vec4(n001,n101,n011,n111),fade_xyz.z);
|
||||
vec2 n_yz = mix(n_z.xy,n_z.zw,fade_xyz.y);
|
||||
float n_xyz = mix(n_yz.x,n_yz.y,fade_xyz.x);
|
||||
return 2.2 * n_xyz;
|
||||
}
|
||||
`;
|
||||
|
||||
function hexToNormalizedRGB(hex) {
|
||||
const clean = String(hex).replace("#", "");
|
||||
const full = clean.length === 3
|
||||
? clean.split("").map((c) => c + c).join("")
|
||||
: clean;
|
||||
return [
|
||||
parseInt(full.substring(0, 2), 16) / 255,
|
||||
parseInt(full.substring(2, 4), 16) / 255,
|
||||
parseInt(full.substring(4, 6), 16) / 255
|
||||
];
|
||||
}
|
||||
|
||||
function extendMaterial(THREE, BaseMaterial, cfg) {
|
||||
const physical = THREE.ShaderLib.physical;
|
||||
const { vertexShader: baseVert, fragmentShader: baseFrag, uniforms: baseUniforms } = physical;
|
||||
const baseDefines = physical.defines || {};
|
||||
const uniforms = THREE.UniformsUtils.clone(baseUniforms);
|
||||
const defaults = new BaseMaterial(cfg.material || {});
|
||||
|
||||
if (defaults.color) uniforms.diffuse.value = defaults.color;
|
||||
if ("roughness" in defaults) uniforms.roughness.value = defaults.roughness;
|
||||
if ("metalness" in defaults) uniforms.metalness.value = defaults.metalness;
|
||||
if ("envMap" in defaults) uniforms.envMap.value = defaults.envMap;
|
||||
if ("envMapIntensity" in defaults) uniforms.envMapIntensity.value = defaults.envMapIntensity;
|
||||
|
||||
Object.entries(cfg.uniforms || {}).forEach(([key, u]) => {
|
||||
uniforms[key] = u !== null && typeof u === "object" && "value" in u ? u : { value: u };
|
||||
});
|
||||
|
||||
let vert = `${cfg.header}\n${cfg.vertexHeader || ""}\n${baseVert}`;
|
||||
let frag = `${cfg.header}\n${cfg.fragmentHeader || ""}\n${baseFrag}`;
|
||||
for (const [inc, code] of Object.entries(cfg.vertex || {})) {
|
||||
vert = vert.replace(inc, `${inc}\n${code}`);
|
||||
}
|
||||
for (const [inc, code] of Object.entries(cfg.fragment || {})) {
|
||||
frag = frag.replace(inc, `${inc}\n${code}`);
|
||||
}
|
||||
|
||||
return new THREE.ShaderMaterial({
|
||||
defines: { ...baseDefines },
|
||||
uniforms,
|
||||
vertexShader: vert,
|
||||
fragmentShader: frag,
|
||||
lights: true,
|
||||
fog: !!(cfg.material && cfg.material.fog)
|
||||
});
|
||||
}
|
||||
|
||||
function createStackedPlanesBufferGeometry(THREE, n, width, height, spacing, heightSegments) {
|
||||
const geometry = new THREE.BufferGeometry();
|
||||
const numVertices = n * (heightSegments + 1) * 2;
|
||||
const numFaces = n * heightSegments * 2;
|
||||
const positions = new Float32Array(numVertices * 3);
|
||||
const indices = new Uint32Array(numFaces * 3);
|
||||
const uvs = new Float32Array(numVertices * 2);
|
||||
|
||||
let vertexOffset = 0;
|
||||
let indexOffset = 0;
|
||||
let uvOffset = 0;
|
||||
const totalWidth = n * width + (n - 1) * spacing;
|
||||
const xOffsetBase = -totalWidth / 2;
|
||||
|
||||
for (let i = 0; i < n; i++) {
|
||||
const xOffset = xOffsetBase + i * (width + spacing);
|
||||
const uvXOffset = Math.random() * 300;
|
||||
const uvYOffset = Math.random() * 300;
|
||||
|
||||
for (let j = 0; j <= heightSegments; j++) {
|
||||
const y = height * (j / heightSegments - 0.5);
|
||||
positions.set([xOffset, y, 0, xOffset + width, y, 0], vertexOffset * 3);
|
||||
const uvY = j / heightSegments;
|
||||
uvs.set([uvXOffset, uvY + uvYOffset, uvXOffset + 1, uvY + uvYOffset], uvOffset);
|
||||
|
||||
if (j < heightSegments) {
|
||||
const a = vertexOffset;
|
||||
const b = vertexOffset + 1;
|
||||
const c = vertexOffset + 2;
|
||||
const d = vertexOffset + 3;
|
||||
indices.set([a, b, c, c, b, d], indexOffset);
|
||||
indexOffset += 6;
|
||||
}
|
||||
vertexOffset += 2;
|
||||
uvOffset += 4;
|
||||
}
|
||||
}
|
||||
|
||||
geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
|
||||
geometry.setAttribute("uv", new THREE.BufferAttribute(uvs, 2));
|
||||
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
|
||||
geometry.computeVertexNormals();
|
||||
return geometry;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} canvas
|
||||
* @param {object} options
|
||||
*/
|
||||
function create(canvas, options) {
|
||||
const THREE = global.THREE;
|
||||
if (!THREE || !canvas) throw new Error("THREE or canvas missing");
|
||||
|
||||
const {
|
||||
beamWidth = 4.5,
|
||||
beamHeight = 6,
|
||||
beamNumber = 26,
|
||||
lightColor = "#7CFFB2",
|
||||
speed = 4.5,
|
||||
noiseIntensity = 2.65,
|
||||
scale = 0.62,
|
||||
rotation = 208,
|
||||
background = "#000000",
|
||||
reduceMotion = false,
|
||||
heightSegments = 100
|
||||
} = options || {};
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(background);
|
||||
|
||||
const camera = new THREE.PerspectiveCamera(30, 1, 0.1, 100);
|
||||
camera.position.set(0, 0, 20);
|
||||
|
||||
const renderer = new THREE.WebGLRenderer({
|
||||
canvas,
|
||||
antialias: true,
|
||||
alpha: false,
|
||||
powerPreference: "low-power"
|
||||
});
|
||||
renderer.setClearColor(background, 1);
|
||||
renderer.outputColorSpace = THREE.SRGBColorSpace;
|
||||
|
||||
const material = extendMaterial(THREE, THREE.MeshStandardMaterial, {
|
||||
header: `
|
||||
varying vec3 vEye;
|
||||
varying float vNoise;
|
||||
varying vec2 vUv;
|
||||
varying vec3 vPosition;
|
||||
uniform float time;
|
||||
uniform float uSpeed;
|
||||
uniform float uNoiseIntensity;
|
||||
uniform float uScale;
|
||||
${NOISE}`,
|
||||
vertexHeader: `
|
||||
float getPos(vec3 pos) {
|
||||
vec3 noisePos =
|
||||
vec3(pos.x * 0., pos.y - uv.y, pos.z + time * uSpeed * 3.) * uScale;
|
||||
return cnoise(noisePos);
|
||||
}
|
||||
vec3 getCurrentPos(vec3 pos) {
|
||||
vec3 newpos = pos;
|
||||
newpos.z += getPos(pos);
|
||||
return newpos;
|
||||
}
|
||||
vec3 getNormal(vec3 pos) {
|
||||
vec3 curpos = getCurrentPos(pos);
|
||||
vec3 nextposX = getCurrentPos(pos + vec3(0.01, 0.0, 0.0));
|
||||
vec3 nextposZ = getCurrentPos(pos + vec3(0.0, -0.01, 0.0));
|
||||
vec3 tangentX = normalize(nextposX - curpos);
|
||||
vec3 tangentZ = normalize(nextposZ - curpos);
|
||||
return normalize(cross(tangentZ, tangentX));
|
||||
}`,
|
||||
vertex: {
|
||||
"#include <begin_vertex>": "transformed.z += getPos(transformed.xyz);",
|
||||
"#include <beginnormal_vertex>": "objectNormal = getNormal(position.xyz);"
|
||||
},
|
||||
fragment: {
|
||||
"#include <dithering_fragment>": `
|
||||
float randomNoise = noise(gl_FragCoord.xy);
|
||||
gl_FragColor.rgb -= randomNoise / 15. * uNoiseIntensity;`
|
||||
},
|
||||
material: { fog: true },
|
||||
uniforms: {
|
||||
diffuse: new THREE.Color(...hexToNormalizedRGB("#000000")),
|
||||
time: { value: 0 },
|
||||
roughness: 0.3,
|
||||
metalness: 0.3,
|
||||
uSpeed: { value: speed },
|
||||
envMapIntensity: 10,
|
||||
uNoiseIntensity: { value: noiseIntensity },
|
||||
uScale: { value: scale }
|
||||
}
|
||||
});
|
||||
|
||||
const geometry = createStackedPlanesBufferGeometry(
|
||||
THREE,
|
||||
beamNumber,
|
||||
beamWidth,
|
||||
beamHeight,
|
||||
0,
|
||||
heightSegments
|
||||
);
|
||||
const mesh = new THREE.Mesh(geometry, material);
|
||||
|
||||
const group = new THREE.Group();
|
||||
group.rotation.z = THREE.MathUtils.degToRad(rotation);
|
||||
group.add(mesh);
|
||||
|
||||
const dir = new THREE.DirectionalLight(lightColor, 1);
|
||||
dir.position.set(0, 3, 10);
|
||||
group.add(dir);
|
||||
|
||||
scene.add(group);
|
||||
scene.add(new THREE.AmbientLight(0xffffff, 1));
|
||||
|
||||
let playing = !reduceMotion;
|
||||
let visible = true;
|
||||
let raf = 0;
|
||||
let last = performance.now();
|
||||
let disposed = false;
|
||||
|
||||
function resize() {
|
||||
const parent = canvas.parentElement || canvas;
|
||||
const rect = parent.getBoundingClientRect();
|
||||
const w = Math.max(1, Math.floor(rect.width));
|
||||
const h = Math.max(1, Math.floor(rect.height));
|
||||
const dpr = Math.min(window.devicePixelRatio || 1, reduceMotion ? 1 : 1.75);
|
||||
renderer.setPixelRatio(dpr);
|
||||
renderer.setSize(w, h, false);
|
||||
camera.aspect = w / h;
|
||||
camera.updateProjectionMatrix();
|
||||
}
|
||||
|
||||
function frame(now) {
|
||||
if (disposed) return;
|
||||
raf = requestAnimationFrame(frame);
|
||||
if (!playing || !visible || document.hidden) return;
|
||||
const delta = Math.min(0.05, (now - last) / 1000);
|
||||
last = now;
|
||||
material.uniforms.time.value += 0.1 * delta;
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
function renderOnce() {
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
resize();
|
||||
// Seed a bit of displacement so the first frame isn't flat
|
||||
material.uniforms.time.value = reduceMotion ? 2.4 : 0.2;
|
||||
renderOnce();
|
||||
|
||||
if (!reduceMotion) {
|
||||
last = performance.now();
|
||||
raf = requestAnimationFrame(frame);
|
||||
}
|
||||
|
||||
const ro = new ResizeObserver(() => {
|
||||
resize();
|
||||
renderOnce();
|
||||
});
|
||||
ro.observe(canvas.parentElement || canvas);
|
||||
|
||||
return {
|
||||
setPlaying(next) {
|
||||
playing = !!next && !reduceMotion;
|
||||
if (playing && !raf) {
|
||||
last = performance.now();
|
||||
raf = requestAnimationFrame(frame);
|
||||
}
|
||||
},
|
||||
setVisible(next) {
|
||||
visible = !!next;
|
||||
if (visible && playing && !raf) {
|
||||
last = performance.now();
|
||||
raf = requestAnimationFrame(frame);
|
||||
}
|
||||
if (visible) renderOnce();
|
||||
},
|
||||
setLightColor(hex) {
|
||||
dir.color.set(hex);
|
||||
renderOnce();
|
||||
},
|
||||
setBackground(hex) {
|
||||
scene.background = new THREE.Color(hex);
|
||||
renderer.setClearColor(hex, 1);
|
||||
renderOnce();
|
||||
},
|
||||
resize,
|
||||
destroy() {
|
||||
disposed = true;
|
||||
cancelAnimationFrame(raf);
|
||||
raf = 0;
|
||||
ro.disconnect();
|
||||
geometry.dispose();
|
||||
material.dispose();
|
||||
renderer.dispose();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
global.OSGBeamsHero = { create };
|
||||
})(typeof window !== "undefined" ? window : globalThis);
|
||||
@@ -1,21 +0,0 @@
|
||||
The MIT License
|
||||
|
||||
Copyright © 2010-2023 three.js authors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
Vendored
-7
File diff suppressed because one or more lines are too long
@@ -1,9 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="36 367 952 291" fill="none" aria-hidden="true">
|
||||
<g fill="currentColor">
|
||||
<path d="M627.511 512.419C627.511 448.783 576.127 397.197 512.741 397.197C449.355 397.197 397.971 448.783 397.971 512.419C397.971 576.054 449.355 627.641 512.741 627.641V637.837C443.746 637.837 387.814 581.686 387.814 512.419C387.814 443.152 443.746 387 512.741 387C581.736 387 637.668 443.152 637.668 512.419C637.668 581.686 581.736 637.837 512.741 637.837V627.641C576.127 627.641 627.511 576.054 627.511 512.419Z"/>
|
||||
<path d="M56.2632 512.419C56.2632 581.686 112.195 637.837 181.19 637.837C250.185 637.837 306.117 581.686 306.117 512.419C306.117 443.152 250.185 387 181.19 387C112.195 387 56.2632 443.152 56.2632 512.419Z"/>
|
||||
<path d="M399.618 562.094L399.618 552.257L512.74 552.257L512.74 562.094L399.618 562.094Z"/>
|
||||
<path d="M512.741 483.398V473.561H625.864V483.398H512.741Z"/>
|
||||
<path d="M843.308 387.981C910.987 387.981 966.093 441.8 968.171 508.975H843.308V518.812H968.096C965.014 585.066 910.324 637.836 843.308 637.836C774.313 637.836 718.381 581.904 718.381 512.909C718.381 443.914 774.312 387.981 843.308 387.981ZM968.234 518.812H968.096C968.187 516.855 968.234 514.888 968.234 512.909C968.234 511.593 968.211 510.281 968.171 508.975H968.234V518.812Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
+939
-1695
File diff suppressed because it is too large
Load Diff
+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