From 3fb59b9c8983b06c5b02dbb7b60922c74962a770 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Thu, 16 Apr 2026 01:39:30 -0600
Subject: [PATCH] add theme
---
CLAUDE.md | 34 ++
i18n.js | 11 +
index.html | 3 +
package-lock.json | 1355 ++++++++++++++++++++++++++++-----------------
package.json | 4 +-
style.css | 175 ++++++
theme.js | 2 +-
7 files changed, 1059 insertions(+), 525 deletions(-)
create mode 100644 CLAUDE.md
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..e0c1476
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,34 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+
+```bash
+npm start # Dev server (production mode)
+npm run build # Production build
+npm run build:staging # Staging build
+npm run fmt # Format with Prettier (*.js, style.css, index.html)
+```
+
+No test suite exists. Prettier is the only code quality tool.
+
+## Architecture
+
+This is a static IoT learning portal — a single-page app built with vanilla JS and Vite. No framework.
+
+**Module responsibilities:**
+- `main.js` — entry point, calls `initApp()`
+- `app.js` — application lifecycle: reads localStorage, wires event listeners, orchestrates everything
+- `data.js` — registry of external learning platform links (OJ, code runners, books, etc.)
+- `render.js` — generates HTML for site cards and pins from `data.js` entries
+- `i18n.js` — translation system with a `t()` function; supports 11 language variants (Chinese variants, EN, JA, KO, plus joke languages: wenyan, mars, garbled, binary, meow, emoji)
+- `theme.js` — manages 4 design themes (Fluent, Material You, Terminal, Cyberpunk) and dark/light toggle
+
+**Data flow:** `app.js` → reads prefs from `localStorage` → calls `render.js` to build the card grid from `data.js` → applies theme via `theme.js` → uses `i18n.js` for all UI strings.
+
+**State persistence:** language, design theme, and dark/light preference are all stored in `localStorage`.
+
+**Site URLs** are injected at build time via `import.meta.env.VITE_*` environment variables.
+
+**Themes:** Terminal and Cyberpunk force dark mode; the light/dark toggle is disabled for those themes.
diff --git a/i18n.js b/i18n.js
index b26bc34..90a0b96 100644
--- a/i18n.js
+++ b/i18n.js
@@ -139,66 +139,77 @@ export const DESIGN_THEME_LABELS = {
"material-you": "Material You",
terminal: "终端",
cyberpunk: "赛博朋克",
+ nord: "Nord",
},
"zh-Hant": {
fluent: "Fluent",
"material-you": "Material You",
terminal: "終端",
cyberpunk: "賽博龐克",
+ nord: "Nord",
},
en: {
fluent: "Fluent",
"material-you": "Material You",
terminal: "Terminal",
cyberpunk: "Cyberpunk",
+ nord: "Nord",
},
ja: {
fluent: "Fluent",
"material-you": "Material You",
terminal: "ターミナル",
cyberpunk: "サイバーパンク",
+ nord: "Nord",
},
ko: {
fluent: "Fluent",
"material-you": "Material You",
terminal: "터미널",
cyberpunk: "사이버펑크",
+ nord: "Nord",
},
wenyan: {
fluent: "流光",
"material-you": "物材",
terminal: "终端",
cyberpunk: "赛博",
+ nord: "清寒",
},
mars: {
fluent: "流↗光",
"material-you": "材↘質",
terminal: "終↗★端",
cyberpunk: "賽↘！博",
+ nord: "清↗寒★",
},
garbled: {
fluent: "◼è▦",
"material-you": "拷▤屯ä锟◽",
terminal: "¥¬▤▨¿¿",
cyberpunk: "◼çæ¥烫¥",
+ nord: "æ◽屯¿",
},
bin: {
fluent: "0101",
"material-you": "010101",
terminal: "01010101",
cyberpunk: "0101010101",
+ nord: "0101010",
},
meow: {
fluent: "喵喵",
"material-you": "喵喵喵",
terminal: "喵喵",
cyberpunk: "喵喵喵喵",
+ nord: "喵喵喵",
},
emoji: {
fluent: "💧",
"material-you": "🧱",
terminal: "⌨️",
cyberpunk: "⚡",
+ nord: "❄️",
},
}
diff --git a/index.html b/index.html
index 2d76297..b77b089 100644
--- a/index.html
+++ b/index.html
@@ -42,6 +42,9 @@
Cyberpunk
+
+ Nord
+