54 lines
1.6 KiB
JavaScript
54 lines
1.6 KiB
JavaScript
const DEFAULT_BRAND_LANGUAGE = "zh";
|
|
|
|
const BRANDS = {
|
|
zh: {
|
|
ariaLabel: "智能星球计划品牌标识",
|
|
titleAlt: "智能星球计划",
|
|
titleSrc: "assets/brand/title-zh.png",
|
|
subtitle: "现实层宇宙全息感知系统",
|
|
description: "卫星 · 海底光缆 · 算力基础设施",
|
|
},
|
|
en: {
|
|
ariaLabel: "Intelligent Planet Program brand banner",
|
|
titleAlt: "Intelligent Planet Program",
|
|
titleSrc: "assets/brand/title-en.png",
|
|
subtitle: "Physical-Universe Holography",
|
|
description: "Satellites · Cables · Compute Infra",
|
|
},
|
|
};
|
|
|
|
function getBrandConfig(variant = DEFAULT_BRAND_LANGUAGE) {
|
|
return BRANDS[variant] ?? BRANDS[DEFAULT_BRAND_LANGUAGE];
|
|
}
|
|
|
|
export function renderBrand(variant = DEFAULT_BRAND_LANGUAGE) {
|
|
const config = getBrandConfig(variant);
|
|
|
|
return `
|
|
<div class="earth-brand earth-brand--${variant}" aria-label="${config.ariaLabel}">
|
|
<img
|
|
class="earth-brand__logo"
|
|
src="assets/brand/earth-logo.png"
|
|
alt=""
|
|
aria-hidden="true"
|
|
>
|
|
<div class="earth-brand__copy">
|
|
<img
|
|
class="earth-brand__title"
|
|
src="${config.titleSrc}"
|
|
alt="${config.titleAlt}"
|
|
>
|
|
<div class="earth-brand__meta">
|
|
<span class="earth-brand__subtitle">${config.subtitle}</span>
|
|
<span class="earth-brand__description">${config.description}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`.trim();
|
|
}
|
|
|
|
export function mountBrand(target, variant = DEFAULT_BRAND_LANGUAGE) {
|
|
if (!target) return;
|
|
target.innerHTML = renderBrand(variant);
|
|
}
|