diff --git a/.superpowers/brainstorm/73376-1779100666/content/approaches.html b/.superpowers/brainstorm/73376-1779100666/content/approaches.html new file mode 100644 index 0000000..b6209e1 --- /dev/null +++ b/.superpowers/brainstorm/73376-1779100666/content/approaches.html @@ -0,0 +1,135 @@ +

3 Concrete Approaches

+

All share: Dracula bg (#282a36), dot matrix texture, rounded soft cards. They differ in accent color strategy.

+ + + +
+
+
A
+
+

Purple Focus (recommended)

+

#bd93f9 mauve as the single accent. Gradient title (purple→pink). Clean card hover with purple glow. Cohesive and refined.

+
+
IoT Learning
+
+
OJ Platform

Online judge

+
Code Runner

Run snippets

+
Textbooks

Reference books

+
+
+
+
+ +
+
B
+
+

Cyan Dev

+

#8be9fd cyan as accent. Glowing title, left-border accent on cards. Closer to the old terminal vibe — just upgraded. More "code editor", less "app".

+
+
IoT Learning
+
+
OJ Platform

Online judge

+
Code Runner

Run snippets

+
Textbooks

Reference books

+
+
+
+
+ +
+
C
+
+

Multi-Accent Rainbow

+

Each card gets a different Dracula color top border (pink, purple, cyan…). Title uses all colors. Most colorful — looks like syntax highlighting applied to the UI.

+
+
IoT Learning
+
+
OJ Platform

Online judge

+
Code Runner

Run snippets

+
Textbooks

Reference books

+
+
+
+
+
diff --git a/.superpowers/brainstorm/73376-1779100666/content/background.html b/.superpowers/brainstorm/73376-1779100666/content/background.html new file mode 100644 index 0000000..40785fc --- /dev/null +++ b/.superpowers/brainstorm/73376-1779100666/content/background.html @@ -0,0 +1,98 @@ +

Background Treatment

+

The background sets the whole mood. All options use Dracula's base color (#282a36) as the foundation.

+ + + +
+
+
A
+
+

Flat & Clean

+

Pure #282a36, no texture. Maximum focus on content. Closest to how most Dracula apps look.

+
+ #282a36 — pure +
+
+
+ +
+
B
+
+

Aurora Glow

+

Subtle radial gradients using Dracula's purple, pink, and cyan — like a soft aurora bleeding through the dark. Gives depth without noise.

+
+ radial glows — purple / pink / cyan +
+
+
+ +
+
C
+
+

Subtle Grid

+

Faint 24px grid overlay on the dark background. Keeps a technical/terminal feel while the cards are soft. Nod to graph paper or circuit boards.

+
+ 24px grid — #44475a lines +
+
+
+ +
+
D
+
+

Dot Matrix

+

Subtle dot pattern — evokes old terminal screens and LED matrices. Quiet texture, doesn't compete with content.

+
+ 20px dot grid — comment color dots +
+
+
+
diff --git a/.superpowers/brainstorm/73376-1779100666/content/direction.html b/.superpowers/brainstorm/73376-1779100666/content/direction.html new file mode 100644 index 0000000..61a91b6 --- /dev/null +++ b/.superpowers/brainstorm/73376-1779100666/content/direction.html @@ -0,0 +1,36 @@ +

Terminal Theme — Redesign Direction

+

The current theme is functional but sparse: green-on-black, square borders, blinking cursor. Which direction feels right?

+ +
+
+
A
+
+

CRT Phosphor Glow

+

Keep the green palette but push the retro CRT aesthetic much further — stronger scanlines, phosphor bloom on text, vignette darkening at corners, subtle screen curvature illusion. Very nostalgic, visually rich.

+
+
+ +
+
B
+
+

Retro BIOS / DOS Amber

+

Shift the palette from green to amber/orange (#ffb000) — the classic monochrome phosphor of early PCs. Or go full IBM-BIOS blue (dark blue bg, bright white text, cyan highlights). A completely different retro personality.

+
+
+ +
+
C
+
+

Modern Terminal (Dracula / Catppuccin)

+

Inspired by popular terminal themes (Dracula, Catppuccin Mocha, One Dark). Multiple accent colors, not just green — purple, cyan, pink, yellow all used. Clean, developer-aesthetic, but rich with color. Less "retro", more "everyday dev tool".

+
+
+ +
+
D
+
+

Matrix / Hacker Aesthetic

+

Stay green but add drama — cascading character rain animation in the background (subtle, faint), stronger glow effects, maybe ASCII art borders on cards. Very cinematic, very "movie hacker screen".

+
+
+
diff --git a/.superpowers/brainstorm/73376-1779100666/content/full-mockup.html b/.superpowers/brainstorm/73376-1779100666/content/full-mockup.html new file mode 100644 index 0000000..49d8fbc --- /dev/null +++ b/.superpowers/brainstorm/73376-1779100666/content/full-mockup.html @@ -0,0 +1,232 @@ + + + + + +Terminal Theme — Full Mockup + + + + +
+ + +
+ +
+

IoT Learning ▌

+

// your gateway to embedded systems & IoT resources

+ +
+ +

OJ Platform

+

Online judge — submit and test your code against real problems

+ + +

Code Runner

+

Instant code execution in-browser for quick experiments

+ + +

Reference Books

+

Curated textbooks and documentation for IoT & embedded dev

+ + +

Video Lectures

+

Course recordings and tutorials from the lab

+ + +

Arduino Docs

+

Official Arduino reference and community guides

+ + +

Forum

+

Ask questions, share projects with classmates

+ +
+ +
+ 备案号 12345678  ·  粤ICP备XXXXXXXX号 +
+
+ + +
+
bg #282a36
+
card #313244
+
border #44475a
+
accent #bd93f9
+
pink #ff79c6
+
muted #6272a4
+
fg #f8f8f2
+
hover a card to preview interaction →
+
+ + + diff --git a/.superpowers/brainstorm/73376-1779100666/content/palette.html b/.superpowers/brainstorm/73376-1779100666/content/palette.html new file mode 100644 index 0000000..9608c7c --- /dev/null +++ b/.superpowers/brainstorm/73376-1779100666/content/palette.html @@ -0,0 +1,86 @@ +

Which Palette?

+

Modern terminal themes each have a distinct personality. Which palette should drive the redesign?

+ + + +
+
+
A
+
+

Dracula

+

Dark purple background, vibrant pink/cyan/green accents. The most iconic dark theme — moody yet colorful.

+
+ + + + + + + + +
+
+ fn visit(url: str) {
+   // navigate to resource
+ } +
+
+
+ +
+
B
+
+

Catppuccin Mocha

+

Warm, desaturated dark background with soft pastel accents. Gentle on the eyes, cozy and modern.

+
+ + + + + + + + +
+
+ fn visit(url: str) {
+   // navigate to resource
+ } +
+
+
+ +
+
C
+
+

Tokyo Night

+

Deep blue-navy background, electric blue and magenta highlights. Calm, cool, city-at-night aesthetic.

+
+ + + + + + + + +
+
+ fn visit(url: str) {
+   // navigate to resource
+ } +
+
+
+
diff --git a/.superpowers/brainstorm/73376-1779100666/content/vibe.html b/.superpowers/brainstorm/73376-1779100666/content/vibe.html new file mode 100644 index 0000000..7328d79 --- /dev/null +++ b/.superpowers/brainstorm/73376-1779100666/content/vibe.html @@ -0,0 +1,106 @@ +

Dracula — How Far to Lean Into "Terminal"?

+

Same palette, different personality. Which card style feels right?

+ + + +
+
+
A
+
+

Still Terminal

+

Square corners, transparent cards, Dracula green as primary accent. Same structural DNA as today — just a better palette and more glow.

+
+
# IoT Learning Portal
+
+

▶ OJ Platform

+

Online judge for practice

+
+
+
+
+ +
+
B
+
+

Soft Modern

+

Rounded cards with Dracula surface colors, purple accent, subtle shadows. Feels like a polished app — less "green terminal", more "Dracula theme everything".

+
+
# IoT Learning Portal
+
+

OJ Platform

+

Online judge for practice

+
+
+
+
+ +
+
C
+
+

Vibrant & Accented

+

Colored top border on cards (like Cyberpunk's treatment), pink/cyan/purple accents used actively, neon glow on hover. Most visually punchy of the three.

+
+
# IoT Learning Portal
+
+

OJ Platform

+

Online judge for practice

+
+
+
+
+
diff --git a/.superpowers/brainstorm/73376-1779100666/content/waiting.html b/.superpowers/brainstorm/73376-1779100666/content/waiting.html new file mode 100644 index 0000000..a43d4fe --- /dev/null +++ b/.superpowers/brainstorm/73376-1779100666/content/waiting.html @@ -0,0 +1,3 @@ +
+

Continuing in terminal…

+
diff --git a/.superpowers/brainstorm/73376-1779100666/state/server-stopped b/.superpowers/brainstorm/73376-1779100666/state/server-stopped new file mode 100644 index 0000000..134f091 --- /dev/null +++ b/.superpowers/brainstorm/73376-1779100666/state/server-stopped @@ -0,0 +1 @@ +{"reason":"owner process exited","timestamp":1779101686437} diff --git a/.superpowers/brainstorm/73376-1779100666/state/server.pid b/.superpowers/brainstorm/73376-1779100666/state/server.pid new file mode 100644 index 0000000..c1cdcde --- /dev/null +++ b/.superpowers/brainstorm/73376-1779100666/state/server.pid @@ -0,0 +1 @@ +73384 diff --git a/docs/superpowers/plans/2026-05-18-minecraft-theme.md b/docs/superpowers/plans/2026-05-18-minecraft-theme.md new file mode 100644 index 0000000..439d89d --- /dev/null +++ b/docs/superpowers/plans/2026-05-18-minecraft-theme.md @@ -0,0 +1,540 @@ +# Minecraft Theme Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Add a "minecraft" design theme — zero border-radius, Minecraft GUI bevel shadows, 16px pixel grid background, monospace font, dark (Stone & Cave) + light (Overworld Day) modes. + +**Architecture:** Four small file edits following the established theme pattern. Dark mode uses `html[data-theme="dark"][data-design-theme="minecraft"]` selectors (same specificity as the generic dark override rules, but placed later in the file so they win). Light mode uses `html[data-theme="light"][data-design-theme="minecraft"]`. No font imports — system monospace only. + +**Tech Stack:** Vanilla JS, Vite, CSS custom properties. No test suite — verification is manual via `npm start`. + +--- + +## Files Modified + +| File | Change | +|---|---| +| `theme.js:1` | Add `"minecraft"` to `DESIGN_THEMES` | +| `index.html:48` | Add `
  • ` after animal-crossing | +| `i18n.js:136–226` | Add `minecraft` key in all 11 language objects of `DESIGN_THEME_LABELS` | +| `style.css` | Append dark vars + light vars + body/grid/control/card overrides + reduced-motion | + +--- + +## Task 1: Register the theme slug + +**Files:** +- Modify: `theme.js:1` +- Modify: `index.html:48` + +- [ ] **Step 1: Add slug to DESIGN_THEMES in theme.js** + +Change line 1 from: +```js +const DESIGN_THEMES = ["fluent", "material-you", "terminal", "cyberpunk", "nord", "animal-crossing"] +``` +to: +```js +const DESIGN_THEMES = ["fluent", "material-you", "terminal", "cyberpunk", "nord", "animal-crossing", "minecraft"] +``` + +- [ ] **Step 2: Add dropdown option in index.html** + +After the animal-crossing `
  • ` (currently lines 46–48): +```html +
  • + Animal Crossing +
    • +``` +add immediately after: +```html +
  • + Minecraft +
    • +``` + +- [ ] **Step 3: Commit** + +```bash +git add theme.js index.html +git commit -m "feat: register minecraft theme slug" +``` + +--- + +## Task 2: Add i18n labels + +**Files:** +- Modify: `i18n.js:136–226` + +- [ ] **Step 1: Add `minecraft` key to every language object in DESIGN_THEME_LABELS** + +Replace the entire `DESIGN_THEME_LABELS` constant with: + +```js +export const DESIGN_THEME_LABELS = { + "zh-Hans": { + fluent: "Fluent", + "material-you": "Material You", + terminal: "终端", + cyberpunk: "赛博朋克", + nord: "Nord", + "animal-crossing": "动森", + minecraft: "我的世界", + }, + "zh-Hant": { + fluent: "Fluent", + "material-you": "Material You", + terminal: "終端", + cyberpunk: "賽博龐克", + nord: "Nord", + "animal-crossing": "動森", + minecraft: "我的世界", + }, + en: { + fluent: "Fluent", + "material-you": "Material You", + terminal: "Terminal", + cyberpunk: "Cyberpunk", + nord: "Nord", + "animal-crossing": "Animal Crossing", + minecraft: "Minecraft", + }, + ja: { + fluent: "Fluent", + "material-you": "Material You", + terminal: "ターミナル", + cyberpunk: "サイバーパンク", + nord: "Nord", + "animal-crossing": "どうぶつの森", + minecraft: "マインクラフト", + }, + ko: { + fluent: "Fluent", + "material-you": "Material You", + terminal: "터미널", + cyberpunk: "사이버펑크", + nord: "Nord", + "animal-crossing": "동물의 숲", + minecraft: "마인크래프트", + }, + wenyan: { + fluent: "流光", + "material-you": "物材", + terminal: "终端", + cyberpunk: "赛博", + nord: "清寒", + "animal-crossing": "森友", + minecraft: "方块世界", + }, + mars: { + fluent: "流↗光", + "material-you": "材↘質", + terminal: "終↗★端", + cyberpunk: "賽↘！博", + nord: "清↗寒★", + "animal-crossing": "动↗森★", + minecraft: "我↗的★世界", + }, + garbled: { + fluent: "◼è▦", + "material-you": "拷▤屯ä锟◽", + terminal: "¥¬▤▨¿¿", + cyberpunk: "◼çæ¥烫¥", + nord: "æ◽屯¿", + "animal-crossing": "ä◼▤è", + minecraft: "▤◼▦è屯", + }, + bin: { + fluent: "0101", + "material-you": "010101", + terminal: "01010101", + cyberpunk: "0101010101", + nord: "0101010", + "animal-crossing": "01010101", + minecraft: "0101010", + }, + meow: { + fluent: "喵喵", + "material-you": "喵喵喵", + terminal: "喵喵", + cyberpunk: "喵喵喵喵", + nord: "喵喵喵", + "animal-crossing": "喵喵喵喵", + minecraft: "喵喵喵", + }, + emoji: { + fluent: "💧", + "material-you": "🧱", + terminal: "⌨️", + cyberpunk: "⚡", + nord: "❄️", + "animal-crossing": "🌿", + minecraft: "⛏️", + }, +} +``` + +- [ ] **Step 2: Commit** + +```bash +git add i18n.js +git commit -m "feat: add minecraft labels for all 11 languages" +``` + +--- + +## Task 3: Add CSS — dark mode (Stone & Cave) + +**Files:** +- Modify: `style.css` (append after the `prefers-reduced-motion` block at end of file) + +- [ ] **Step 1: Append dark mode CSS block at end of style.css** + +```css +/* ─── Minecraft — Stone & Cave / Overworld Day ──────────────── */ +html[data-design-theme="minecraft"] { + color-scheme: dark; + + --accent: #5aaa3a; + --accent-rgb: 90, 170, 58; + --accent-2: #3d8a2a; + --accent-3: #2a6e1a; + --accent-secondary-rgb: 91, 191, 232; + + --page-gradient: #1a1a1a; + --page-texture: none; + --title-gradient: linear-gradient(135deg, #5bbfe8 0%, #5aaa3a 100%); + + --control-bg: rgba(62, 62, 62, 0.92); + --control-border: #1a1a1a; + --control-inset: rgba(255, 255, 255, 0.2); + --control-fg: #f0f0f0; +} + +html[data-theme="dark"][data-design-theme="minecraft"] { + color-scheme: dark; + + --accent: #5aaa3a; + --accent-rgb: 90, 170, 58; + --accent-2: #3d8a2a; + --accent-3: #2a6e1a; + --accent-secondary-rgb: 91, 191, 232; + + --page-gradient: #1a1a1a; + --page-texture: none; + --title-gradient: linear-gradient(135deg, #5bbfe8 0%, #5aaa3a 100%); + + --control-bg: rgba(62, 62, 62, 0.92); + --control-border: #1a1a1a; + --control-inset: rgba(255, 255, 255, 0.2); + --control-fg: #f0f0f0; +} + +html[data-design-theme="minecraft"] body { + font-family: ui-monospace, "Courier New", Courier, monospace; + letter-spacing: 0.04em; + color: #f0f0f0; +} + +html[data-theme="dark"][data-design-theme="minecraft"] body { + color: #f0f0f0; +} + +html[data-design-theme="minecraft"] body::before { + background-image: + linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); + background-size: 16px 16px; +} + +html[data-design-theme="minecraft"] .design-theme-button, +html[data-design-theme="minecraft"] .theme-toggle { + border-radius: 0; + backdrop-filter: none; + -webkit-backdrop-filter: none; + box-shadow: + inset 2px 2px 0 rgba(255, 255, 255, 0.25), + inset -2px -2px 0 rgba(0, 0, 0, 0.5); + transition: all 0.1s steps(2, end); +} + +html[data-design-theme="minecraft"] .design-theme-button:hover, +html[data-design-theme="minecraft"] .theme-toggle:hover { + background: rgba(82, 82, 82, 0.95); + box-shadow: + inset 2px 2px 0 rgba(255, 255, 255, 0.35), + inset -2px -2px 0 rgba(0, 0, 0, 0.4); + transform: none; + border-color: rgba(var(--accent-rgb), 0.7); +} + +html[data-design-theme="minecraft"] .design-theme-button:active, +html[data-design-theme="minecraft"] .theme-toggle:active { + box-shadow: + inset 2px 2px 0 rgba(0, 0, 0, 0.4), + inset -2px -2px 0 rgba(255, 255, 255, 0.12); +} + +html[data-design-theme="minecraft"] .design-theme-list { + border-radius: 0; + backdrop-filter: none; + -webkit-backdrop-filter: none; + background: rgba(30, 30, 30, 0.96); + border: 2px solid #111111; + box-shadow: + inset 2px 2px 0 rgba(255, 255, 255, 0.1), + inset -2px -2px 0 rgba(0, 0, 0, 0.6); +} + +html[data-design-theme="minecraft"] .design-theme-list [role="option"] { + border-radius: 0; +} + +html[data-design-theme="minecraft"] + .design-theme-list + [role="option"]:hover, +html[data-design-theme="minecraft"] + .design-theme-list + [role="option"][aria-selected="true"] { + background: rgba(var(--accent-rgb), 0.25); + color: var(--control-fg); +} + +html[data-theme="dark"][data-design-theme="minecraft"] .card { + background: #3c3c3c; + border: 2px solid #111111; + border-radius: 0; + backdrop-filter: none; + -webkit-backdrop-filter: none; + box-shadow: + inset 2px 2px 0 rgba(255, 255, 255, 0.2), + inset -2px -2px 0 rgba(0, 0, 0, 0.5); + transition: all 0.1s steps(2, end); + transform: none; +} + +html[data-theme="dark"][data-design-theme="minecraft"] .card::before { + display: none; +} + +html[data-theme="dark"][data-design-theme="minecraft"] .card.pin { + background: #454545; +} + +html[data-theme="dark"][data-design-theme="minecraft"] .card h2 { + color: #f0f0f0; +} + +html[data-theme="dark"][data-design-theme="minecraft"] .card p { + color: #c8c8c8; +} + +html[data-theme="dark"][data-design-theme="minecraft"] .card:hover, +html[data-theme="dark"][data-design-theme="minecraft"] .card:focus { + background: #484848; + transform: none; + border-color: #5aaa3a; + box-shadow: + inset 2px 2px 0 rgba(0, 0, 0, 0.35), + inset -2px -2px 0 rgba(255, 255, 255, 0.12); +} + +html[data-theme="dark"][data-design-theme="minecraft"] .card:hover h2, +html[data-theme="dark"][data-design-theme="minecraft"] .card:focus h2 { + color: #5aaa3a; +} + +html[data-theme="dark"][data-design-theme="minecraft"] .card:hover p, +html[data-theme="dark"][data-design-theme="minecraft"] .card:focus p { + color: #e0e0e0; +} + +html[data-theme="dark"][data-design-theme="minecraft"] .beian a { + color: #c8c8c8; +} + +html[data-theme="dark"][data-design-theme="minecraft"] .beian a:hover { + color: #5aaa3a; +} +``` + +- [ ] **Step 2: Verify dark mode in browser** + +Start dev server (`npm start`). Select "我的世界" in dark mode. Verify: +- Background is `#1a1a1a` dark stone (not generic dark gray) +- Title has blue-to-green gradient +- Cards are `#3c3c3c` with visible bevel (lighter top-left, darker bottom-right inset) +- Cards have NO rounded corners (sharp square edges) +- Card hover inverts the bevel and border turns green +- Controls have zero border-radius and bevel effect + +- [ ] **Step 3: Commit** + +```bash +git add style.css +git commit -m "feat: add minecraft dark mode CSS" +``` + +--- + +## Task 4: Add CSS — light mode (Overworld Day) + +**Files:** +- Modify: `style.css` (append after dark mode block from Task 3) + +- [ ] **Step 1: Append light mode CSS block** + +```css +html[data-theme="light"][data-design-theme="minecraft"] { + color-scheme: light; + + --accent: #5c9e40; + --accent-rgb: 92, 158, 64; + --accent-2: #4a8a30; + --accent-3: #8b6914; + --accent-secondary-rgb: 135, 206, 235; + + --page-gradient: linear-gradient(180deg, #87ceeb 0%, #c9e8f7 50%, #f0f8ff 100%); + --page-texture: none; + --title-gradient: linear-gradient(135deg, #5c9e40 0%, #8b6914 100%); + + --control-bg: rgba(198, 198, 198, 0.92); + --control-border: #555555; + --control-inset: rgba(255, 255, 255, 0.5); + --control-fg: #2a2a2a; +} + +html[data-theme="light"][data-design-theme="minecraft"] body { + color: #2a2a2a; +} + +html[data-theme="light"][data-design-theme="minecraft"] body::before { + background-image: + linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px), + linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px); + background-size: 16px 16px; +} + +html[data-theme="light"][data-design-theme="minecraft"] .design-theme-list { + background: rgba(210, 210, 210, 0.96); + border: 2px solid #555555; + box-shadow: + inset 2px 2px 0 rgba(255, 255, 255, 0.7), + inset -2px -2px 0 rgba(0, 0, 0, 0.2); +} + +html[data-theme="light"][data-design-theme="minecraft"] .card { + background: rgba(198, 198, 198, 0.85); + border: 2px solid #555555; + border-radius: 0; + backdrop-filter: none; + -webkit-backdrop-filter: none; + box-shadow: + inset 2px 2px 0 rgba(255, 255, 255, 0.6), + inset -2px -2px 0 rgba(0, 0, 0, 0.25); + transition: all 0.1s steps(2, end); + transform: none; +} + +html[data-theme="light"][data-design-theme="minecraft"] .card::before { + display: none; +} + +html[data-theme="light"][data-design-theme="minecraft"] .card.pin { + background: rgba(210, 210, 210, 0.88); +} + +html[data-theme="light"][data-design-theme="minecraft"] .card h2 { + color: #2a2a2a; +} + +html[data-theme="light"][data-design-theme="minecraft"] .card p { + color: #4a4a4a; +} + +html[data-theme="light"][data-design-theme="minecraft"] .card:hover, +html[data-theme="light"][data-design-theme="minecraft"] .card:focus { + background: rgba(212, 224, 198, 0.92); + transform: none; + border-color: #5c9e40; + box-shadow: + inset 2px 2px 0 rgba(0, 0, 0, 0.15), + inset -2px -2px 0 rgba(255, 255, 255, 0.5); +} + +html[data-theme="light"][data-design-theme="minecraft"] .card:hover h2, +html[data-theme="light"][data-design-theme="minecraft"] .card:focus h2 { + color: #5c9e40; +} + +html[data-theme="light"][data-design-theme="minecraft"] .card:hover p, +html[data-theme="light"][data-design-theme="minecraft"] .card:focus p { + color: #2a2a2a; +} + +html[data-theme="light"][data-design-theme="minecraft"] .beian a { + color: #4a4a4a; +} + +html[data-theme="light"][data-design-theme="minecraft"] .beian a:hover { + color: #5c9e40; +} + +@media (prefers-reduced-motion: reduce) { + html[data-design-theme="minecraft"] .card, + html[data-design-theme="minecraft"] .design-theme-button, + html[data-design-theme="minecraft"] .theme-toggle { + transition-duration: 0.01ms !important; + transform: none !important; + } +} +``` + +- [ ] **Step 2: Verify light mode in browser** + +Toggle to light mode with "我的世界" theme active. Verify: +- Background is sky blue gradient (top `#87ceeb` to near-white at bottom) +- Cards are stone gray `rgba(198,198,198)` with bevel (light top-left, darker bottom-right) +- Cards have NO rounded corners +- Card hover turns slightly green-tinted and border goes grass green +- 16px grid is faintly visible on the sky background + +- [ ] **Step 3: Commit** + +```bash +git add style.css +git commit -m "feat: add minecraft light mode CSS" +``` + +--- + +## Task 5: Final verification + +- [ ] **Step 1: Check `minecraft` is not in FORCED_DARK_DESIGN_THEMES** + +Read `theme.js` line 2. It must remain: +```js +const FORCED_DARK_DESIGN_THEMES = new Set(["terminal", "cyberpunk"]) +``` +"minecraft" must NOT appear here. + +- [ ] **Step 2: Verify theme cycles cleanly** + +Cycle through all 7 themes in the dropdown. No broken styles at any step. + +- [ ] **Step 3: Verify forced-dark restore** + +While on Minecraft (light mode), switch to Terminal (forces dark), then back to Minecraft — should restore light mode. + +- [ ] **Step 4: Run formatter** + +```bash +npm run fmt +``` + +If files changed, commit: +```bash +git add style.css index.html i18n.js theme.js +git commit -m "style: run prettier after minecraft theme" +``` diff --git a/style.css b/style.css index 9e7ddbb..e816ea3 100644 --- a/style.css +++ b/style.css @@ -51,32 +51,24 @@ body { html[data-design-theme="terminal"] { color-scheme: dark; - --accent: #33ff00; - --accent-rgb: 51, 255, 0; - --accent-2: #33ff00; - --accent-3: #33ff00; - --accent-secondary-rgb: 255, 176, 0; + --accent: #bd93f9; + --accent-rgb: 189, 147, 249; + --accent-2: #ff79c6; + --accent-3: #8be9fd; + --accent-secondary-rgb: 255, 121, 198; - --page-gradient: #0a0a0a; - --page-texture: - repeating-linear-gradient( - to bottom, - rgba(var(--accent-rgb), 0.035) 0px, - rgba(var(--accent-rgb), 0.035) 1px, - transparent 2px, - transparent 4px - ), - radial-gradient( - circle at 50% 50%, - rgba(var(--accent-rgb), 0.05) 0%, - transparent 60% - ); - --title-gradient: none; + --page-gradient: #282a36; + --page-texture: radial-gradient( + circle, + rgba(98, 114, 164, 0.55) 1px, + transparent 1px + ); + --title-gradient: linear-gradient(90deg, #bd93f9 0%, #ff79c6 100%); - --control-bg: rgba(10, 10, 10, 0.85); - --control-border: rgba(var(--accent-rgb), 0.35); + --control-bg: rgba(40, 42, 54, 0.92); + --control-border: #44475a; --control-inset: transparent; - --control-fg: var(--accent); + --control-fg: #f8f8f2; } html[data-design-theme="cyberpunk"] { @@ -704,7 +696,11 @@ html[data-design-theme="terminal"] body { ui-monospace, "JetBrains Mono", "Fira Code", "VT323", Menlo, Consolas, "Liberation Mono", monospace; letter-spacing: 0.01em; - color: var(--accent); + color: #f8f8f2; +} + +html[data-design-theme="terminal"] body::before { + background-size: 20px 20px; } html[data-design-theme="terminal"] .theme-controls { @@ -713,11 +709,11 @@ html[data-design-theme="terminal"] .theme-controls { html[data-design-theme="terminal"] .design-theme-button, html[data-design-theme="terminal"] .theme-toggle { - border-radius: 0; + border-radius: 8px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; - border: 1px solid rgba(var(--accent-rgb), 0.55); + border: 1px solid #44475a; } html[data-design-theme="terminal"] .theme-toggle { @@ -726,9 +722,9 @@ html[data-design-theme="terminal"] .theme-toggle { html[data-design-theme="terminal"] .design-theme-button:hover, html[data-design-theme="terminal"] .theme-toggle:hover { - background: var(--accent); - color: #0a0a0a; - border-color: var(--accent); + background: rgba(189, 147, 249, 0.08); + color: #bd93f9; + border-color: #bd93f9; transform: none; } @@ -737,12 +733,12 @@ html[data-design-theme="terminal"] .design-theme-button::after { } html[data-design-theme="terminal"] .design-theme-list { - border-radius: 0; + border-radius: 10px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; - background: rgba(10, 10, 10, 0.92); - border: 1px solid rgba(var(--accent-rgb), 0.55); + background: rgba(40, 42, 54, 0.96); + border: 1px solid #44475a; } html[data-design-theme="terminal"] .design-theme-list [role="option"] { @@ -754,15 +750,17 @@ html[data-design-theme="terminal"] .design-theme-list [role="option"]:hover, html[data-design-theme="terminal"] .design-theme-list [role="option"][aria-selected="true"] { - background: var(--accent); - color: #0a0a0a; + background: rgba(189, 147, 249, 0.15); + color: #bd93f9; } html[data-design-theme="terminal"] .title { - background: none; - -webkit-text-fill-color: currentColor; - color: var(--accent); - text-shadow: 0 0 5px rgba(var(--accent-rgb), 0.5); + background: var(--title-gradient); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + color: transparent; + text-shadow: none; text-transform: uppercase; letter-spacing: 0.04em; position: relative; @@ -772,44 +770,67 @@ html[data-design-theme="terminal"] .title::after { content: "\2588"; margin-left: 8px; animation: terminal-cursor-blink 1s step-end infinite; + -webkit-text-fill-color: #bd93f9; } html[data-design-theme="terminal"] .card { - border-radius: 0; - background: transparent; - border: 1px solid rgba(var(--accent-rgb), 0.35); - box-shadow: none; + border-radius: 10px; + background: #313244; + border: 1px solid #44475a; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); backdrop-filter: none; -webkit-backdrop-filter: none; - transform: none; + transform: translateY(0); + transition: all 0.2s ease; +} + +html[data-design-theme="terminal"] .card.pin { + background: #383a4a; } html[data-design-theme="terminal"] .card::before { display: none; } -html[data-design-theme="terminal"] .card h2, -html[data-design-theme="terminal"] .card p, -html[data-design-theme="terminal"] .beian a { - color: var(--accent); - text-shadow: 0 0 5px rgba(var(--accent-rgb), 0.25); +html[data-design-theme="terminal"] .card h2 { + color: #f8f8f2; + text-shadow: none; +} + +html[data-design-theme="terminal"] .card p { + color: #6272a4; + text-shadow: none; } html[data-design-theme="terminal"] .card:hover, html[data-design-theme="terminal"] .card:focus { - background: rgba(var(--accent-rgb), 0.06); - border-color: var(--accent); - box-shadow: none; + background: #313244; + border-color: #bd93f9; + box-shadow: + 0 0 0 1px rgba(189, 147, 249, 0.25), + 0 8px 28px rgba(189, 147, 249, 0.15), + 0 4px 12px rgba(0, 0, 0, 0.5); + transform: translateY(-2px); } html[data-design-theme="terminal"] .card:hover h2, html[data-design-theme="terminal"] .card:focus h2 { - color: var(--accent); + color: #bd93f9; +} + +html[data-design-theme="terminal"] .card:hover p, +html[data-design-theme="terminal"] .card:focus p { + color: #cdd6f4; +} + +html[data-design-theme="terminal"] .beian a { + color: #6272a4; + text-shadow: none; } html[data-design-theme="terminal"] .beian a:hover { - background: var(--accent); - color: #0a0a0a; + color: #bd93f9; + background: none; text-shadow: none; }