Mucha Exhibition · Open Source Edition

A single-page digital art exhibition on Alphonse Mucha — zero-dependency, PWA-ready, fully open source. Fork it, swap in your art, ship a private digital gallery in an afternoon.

⚠ AI 生成内容声明 / AI-assisted content notice

本项目的部分内容（包括代码结构、文案润色、辅助设计决策）的实现由 AI 生成。原作者提供了灵感、关键创作抉择、最终审核与发布授权。AI 输出虽经人工核验，但原作者不为 AI 生成可能引入的错误承担责任。

重要信息（如版权归属、第三方引用、技术细节）请务必自行检查核实。

本项目及任何由 AI 协助生成的内容均不可用于任何商用行为。 代码部分遵循 MIT（允许商用），但内容部分遵循 CC BY-NC 4.0（禁止商用）。如需商用，请联系作者并取得书面授权。

---

Some parts of this project (code structure, copy refinements, design decisions) were implemented with assistance from an AI coding agent. The original author provided the inspiration, key creative choices, final review, and publishing authorization. AI output has been reviewed for accuracy, but the author is not responsible for any errors that may have been introduced by AI generation.

Important information (copyright attribution, third-party references, technical details) must be independently verified by the user.

This project and any AI-assisted content within it is NOT for commercial use. Code is MIT (commercial allowed); content is CC BY-NC 4.0 (commercial prohibited). For commercial use, contact the author for written permission.

春之物语 · Awakening
_{A year through four seasons, told in 130-year-old gilded tongues.}

中文版 · English · Demo · Screenshots · 5-Line Install · License · Roadmap

---

English

Why I built this

我也没想到，我可以把它们发到这里来。最开始，我只是喜欢某个游戏里的皮肤，迷恋上了这种美术风格。当时我在想——我为什么不自己 vibe coding 一个展示网页呢？网页做出来后，我个人真觉得非常非常惊艳（可惜的是那些素材无法开源）。这时，我又想：为什么我不尝试一下发到 GitHub 上呢？所以，我来了。

I didn't expect to ever share it here. It started with me falling for a skin in some game — I got completely hooked on the art style. Then the thought hit me: why not vibe-code my own showcase page? When it came out, I was genuinely blown away (in my humble opinion, at least — unfortunately, the original assets couldn't be open-sourced). A second thought followed: why not try posting it on GitHub? So here I am.

What is this?

A hand-crafted, single-page HTML exhibition themed on the late-19th-century Art Nouveau master Alphonse Mucha (1860—1939). Twelve sections, twenty-one sub-modules, a hand-drawn SVG visual system, and a four-season palette that re-tells a 130-year-old story through a contemporary lens.

It is also a template:

• ✅ Fork it
• ✅ Replace assets/ with your own public-domain art
• ✅ Update js/i18n.js to your own text
• ✅ Ship a private digital exhibition in an afternoon

No build step. No npm. No backend. No dependencies. Just open index.html in a browser, or git clone and serve with any static HTTP server.

Features

• 14 sections · 21 sub-modules — Brief, Curatorial, Hero, About Mucha, Aesthetic, Masterpieces, Four Seasons, Game-Art Translation, Similar Art, End, Code, Reference, Strategy, Context.
• Bilingual — Chinese (default) and English, 335 i18n keys, with a language toggle that is fully decoupled from the theme.
• Light + Dark mode — 60-30-10 color split, hardcoded season palette that stays identical across themes.
• PWA-ready — service worker, manifest, installable icon, cache-first strategy.
• Performance — particle caps, visibilitychange pause, lazy images, prefers-reduced-motion support, target FCP < 1.5s.
• Accessibility — semantic HTML5, ARIA labels, keyboard navigation, touch swipe, WCAG AA contrast in both themes.
• Modular — 26 CSS files (by responsibility, not by section) + 13 JS files (by module). No bundler. No transpiler.

A year through four seasons

春之苏醒 · 夏之盛放 · 秋之丰收 · 冬之静谧
_{Spring · Awakening · Summer · Bloom · Autumn · Harvest · Winter · Slumber}

The Soul of Art Nouveau — Day and night as two aesthetic languages

我对于白天和夜晚模式的理解不单单只是变亮变暗，而是要把这种色调的切换自然的表现为两种不同的美学体现，将白天和黑夜之美体现在网页的每一处。

My understanding of light and dark mode goes beyond simply brightening or dimming. I see the theme switch as a natural way to express two distinct aesthetic languages — letting the beauty of day and night breathe through every corner of the page.

审美内涵 · 鎏金满溢 / 静水深流
_{The Soul of Art Nouveau · Light / Dark}

Four Seasons — the heart of the exhibition

四季展厅 · Ⅰ 春 / Ⅱ 夏 / Ⅲ 秋 / Ⅳ 冬
_{Four Seasons · I · Spring · II · Summer · III · Autumn · IV · Winter}

Mobile — one exhibition, every screen

移动端 · 汉堡菜单 · 白天 / 黑夜
_{Mobile · Hamburger Menu · Light / Dark}

PWA — install it, keep it

PWA · 加到主屏 · 白天 / 黑夜（iOS app 切换器视图）
_{PWA · Installed on Home Screen · Light / Dark (iOS app switcher view)}

5-line install

git clone https://github.com/Toreinm/mucha-exhibition.git
cd muchai-exhibition
python3 -m http.server 8000
# Open http://localhost:8000

That's it. The whole project is ~250KB of source code (HTML + CSS + JS), and you bring your own assets.

Project structure

muchai-exhibition/
├── index.html              Entry point (14 sections)
├── README.md               This file
├── LICENSE                 MIT (code)
├── NOTICE                  CC BY-NC 4.0 + asset notice
├── CODE_OF_CONDUCT.md      Contributor Covenant 2.1
├── SECURITY.md             Security policy
├── sw.js                   PWA service worker
├── manifest.json           PWA manifest
├── apple-touch-icon.png    PWA icon
│
├── css/                    26 modular CSS files
├── js/                     13 modular JS files
│   └── i18n.js             Bilingual text dictionary (335 keys)
├── assets/                 Your public-domain art (replace before publishing)
├── scripts/                Maintenance scripts
│   ├── build.py            info / verify / webp / picture
│   ├── convert_webp.py     Bulk jpg/png → WebP
│   └── patch_picture.py    Auto-wrap <img> with <picture>
└── .github/                GitHub community files
    ├── ISSUE_TEMPLATE/
    └── PULL_REQUEST_TEMPLATE.md

Customization checklist

1. Replace assets — Drop your own public-domain artwork into assets/. See assets_replacement.md for guidance. Sources of public-domain art: Web Gallery of Art, Library of Congress, Mucha Museum.
2. Update text — Edit js/i18n.js. Each key has zh and en values.
3. Tune colors — Edit css/tokens.css. Five gilded gold tokens drive the entire visual system. Change them carefully — see CONTRIBUTING.md for the "do not modify" list.
4. Verify — Run python3 scripts/build.py verify to run 10 checks (HTML structure, CSS validity, JS load order, asset references, etc.).
5. Deploy — Push to GitHub Pages / Netlify / Vercel / Cloudflare Pages / any static host. No build step required.

Browser support

Browser	Status
Chrome (latest 2)	✅ Full
Safari (latest 2)	✅ Full
Firefox (latest 2)	✅ Full
Edge (latest 2)	✅ Full
iOS Safari 14+	✅ Full
IE 11	❌ Not supported

Demo

• 🇨🇳 国内可访问: mucha-exhibition.pages.dev（Cloudflare Pages，国内稳定）
• 🌍 全球 / 备份: toreinm.github.io/mucha-exhibition/（GitHub Pages）

License

This project uses a dual license:

• Code (HTML / CSS / JS / SVG) — MIT
• Content (text, translations) — CC BY-NC 4.0
• Images — not shipped; see NOTICE for the takedown policy on commercial game IP that was removed from the original private version.

Contributing

We welcome issues, PRs, and translations. See CONTRIBUTING.md for the do-not-modify list (opening animation, gilded gold tokens, font stack, anchor IDs, JS load order) and the style guide. By participating, you agree to the Contributor Covenant.

Credits

• Alphonse Mucha (1860—1939) — the master whose work inspired everything
• Web Gallery of Art (https://www.wga.hu) — public-domain archive
• Library of Congress (https://www.loc.gov) — public-domain archive
• Mucha Museum (https://www.mucha.cz) — primary archive

---

中文

为什么做这个

我也没想到，我可以把它们发到这里来。最开始，我只是喜欢某个游戏里的皮肤，迷恋上了这种美术风格。当时我在想——我为什么不自己 vibe coding 一个展示网页呢？网页做出来后，我个人真觉得非常非常惊艳（可惜的是那些素材无法开源）。这时，我又想：为什么我不尝试一下发到 GitHub 上呢？所以，我来了。

I didn't expect to ever share it here. It started with me falling for a skin in some game — I got completely hooked on the art style. Then the thought hit me: why not vibe-code my own showcase page? When it came out, I was genuinely blown away (in my humble opinion, at least — unfortunately, the original assets couldn't be open-sourced). A second thought followed: why not try posting it on GitHub? So here I am.

这是什么？

一座手工打造的、关于 19 世纪末新艺术运动大师阿尔丰斯·穆夏 (1860—1939) 的单页 HTML 展览。十二个章节、二十一个子模块、一套手绘 SVG 视觉系统、一套以 130 年时间为尺度的四季节气调色板。

它同时也是一个模板：

• ✅ Fork 它
• ✅ 把 assets/ 换成你自己的公版艺术作品
• ✅ 改 js/i18n.js 里的文字
• ✅ 一个下午，做出一座你自己的私人数字展览

没有构建步骤。没有 npm。没有后端。没有依赖。 直接用浏览器打开 index.html，或者 git clone 之后跑任何静态服务器就行。

特性

• 14 章节 · 21 子模块 — 简介、策展陈述、Hero、关于穆夏、审美、代表作、四季、游戏美术转译、相似艺术、尾声、代码、引用、策展思路、选题背景。
• 中英双语 — 中文（默认）+ 英文，335 个 i18n key，语言开关与主题完全解耦。
• 亮色 + 暗色双主题 — 60-30-10 配色，四季身份色在两个主题下保持 100% 一致。
• PWA-ready — service worker、manifest、可安装图标、cache-first 缓存策略。
• 性能 — 粒子上限、切屏暂停、loading="lazy"、prefers-reduced-motion、目标 FCP < 1.5s。
• 可访问性 — 语义化 HTML5、ARIA 标签、键盘导航、触屏滑动、两主题下均达 WCAG AA 对比度。
• 模块化 — 26 个 CSS（按职责域，非按章节）+ 13 个 JS（按模块）。零打包。零转译。

一年四时，以鎏金为舌

春之苏醒 · 夏之盛放 · 秋之丰收 · 冬之静谧
_{Spring · Awakening · Summer · Bloom · Autumn · Harvest · Winter · Slumber}

新艺术之魂 —— 白天与黑夜，两种美学语言

我对于白天和夜晚模式的理解不单单只是变亮变暗，而是要把这种色调的切换自然的表现为两种不同的美学体现，将白天和黑夜之美体现在网页的每一处。

My understanding of light and dark mode goes beyond simply brightening or dimming. I see the theme switch as a natural way to express two distinct aesthetic languages — letting the beauty of day and night breathe through every corner of the page.

审美内涵 · 鎏金满溢 / 静水深流
_{The Soul of Art Nouveau · Light / Dark}

四季展厅 —— 整座展的心脏

四季展厅 · Ⅰ 春 / Ⅱ 夏 / Ⅲ 秋 / Ⅳ 冬
_{Four Seasons · I · Spring · II · Summer · III · Autumn · IV · Winter}

移动端 —— 一座展，每个屏

移动端 · 汉堡菜单 · 白天 / 黑夜
_{Mobile · Hamburger Menu · Light / Dark}

PWA —— 装上，留着

PWA · 加到主屏 · 白天 / 黑夜（iOS app 切换器视图）
_{PWA · Installed on Home Screen · Light / Dark (iOS app switcher view)}

五行内跑起来

git clone https://github.com/Toreinm/mucha-exhibition.git
cd muchai-exhibition
python3 -m http.server 8000
# 打开 http://localhost:8000

就这样。整套源码（HTML + CSS + JS）约 250KB，资源由你自己填。

项目结构

muchai-exhibition/
├── index.html              入口（14 章节）
├── README.md               本文件
├── LICENSE                 MIT（代码）
├── NOTICE                  CC BY-NC 4.0 + 素材声明
├── CODE_OF_CONDUCT.md      贡献者公约 2.1
├── SECURITY.md             安全策略
├── sw.js                   PWA service worker
├── manifest.json           PWA manifest
├── apple-touch-icon.png    PWA 图标
│
├── css/                    26 个分文件 CSS
├── js/                     13 个分文件 JS
│   └── i18n.js             中英双语字典（335 keys）
├── assets/                 你的公版艺术作品（发布前替换）
├── scripts/                维护脚本
│   ├── build.py            info / verify / webp / picture
│   ├── convert_webp.py     批量 jpg/png → WebP
│   └── patch_picture.py    自动套 <picture> 包裹
└── .github/                GitHub 社区配置
    ├── ISSUE_TEMPLATE/
    └── PULL_REQUEST_TEMPLATE.md

定制清单

1. 替换资源 — 把你的公版艺术作品丢进 assets/。参考 assets_replacement.md。公版资源来源：Web Gallery of Art、Library of Congress、Mucha Museum。
2. 改文字 — 编辑 js/i18n.js，每个 key 有 zh 和 en 两个值。
3. 调色 — 编辑 css/tokens.css。五个鎏金 token 驱动整套视觉系统。改前请看 CONTRIBUTING.md 的"修改禁区"。
4. 验证 — 跑 python3 scripts/build.py verify，跑 10 条检查（HTML 结构、CSS 有效、JS 加载顺序、资源引用等）。
5. 部署 — 推到 GitHub Pages / Netlify / Vercel / Cloudflare Pages / 任何静态托管。无需构建。

浏览器支持

浏览器	状态
Chrome（最新 2 版）	✅ 完整支持
Safari（最新 2 版）	✅ 完整支持
Firefox（最新 2 版）	✅ 完整支持
Edge（最新 2 版）	✅ 完整支持
iOS Safari 14+	✅ 完整支持
IE 11	❌ 不支持

演示

• 🇨🇳 国内可访问: mucha-exhibition.pages.dev（Cloudflare Pages，国内稳定）
• 🌍 全球 / 备份: toreinm.github.io/mucha-exhibition/（GitHub Pages）

协议

本项目使用双协议：

• 代码（HTML / CSS / JS / SVG）— MIT
• 内容（文字、翻译）— CC BY-NC 4.0
• 图片 — 本仓库不打包；原版中曾引用的商业游戏 IP 素材已移除，详见 NOTICE 的下架政策。

贡献

欢迎提 issue、PR、翻译。看 CONTRIBUTING.md 的"修改禁区" （开场动画、鎏金 token、字体三件套、章节锚点 id、JS 加载顺序）和风格指南。 参与即同意 贡献者公约。

致谢

• 阿尔丰斯·穆夏 (1860—1939) — 一切鎏金的源头
• Web Gallery of Art (https://www.wga.hu) — 公版艺术档案
• Library of Congress (https://www.loc.gov) — 公版艺术档案
• Mucha Museum (https://www.mucha.cz) — 穆夏原作档案

---

Roadmap

• Bilingual (zh / en)
• Light + dark mode
• PWA-ready
• Modular CSS / JS
• License + contribution docs
• Theme variants (sepia, ink, high-contrast)
• Markdown-driven content (replace js/i18n.js with a build step that ingests .md files)
• Storybook for the design tokens

---

_{Open Source Edition v7.1.17 · Last updated: 2026-07-29 · Made for the public domain, with care.}