| <!DOCTYPE html>
|
| <html lang="zh">
|
| <head>
|
| <meta charset="UTF-8" />
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| <title>易經六十四卦 · I Ching 64 Hexagrams</title>
|
| <link rel="preconnect" href="https://fonts.googleapis.com" />
|
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
| <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600&family=Cinzel:wght@500;700&display=swap" rel="stylesheet" />
|
| <link rel="stylesheet" href="css/style.css" />
|
|
|
|
|
| <script type="importmap">
|
| {
|
| "imports": {
|
| "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
|
| "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
|
| }
|
| }
|
| </script>
|
| </head>
|
| <body>
|
|
|
| <div id="scene-container"></div>
|
|
|
|
|
| <div id="loader">
|
| <div class="taiji" aria-hidden="true"></div>
|
| <p class="loader-text">易 經 · I Ching</p>
|
| </div>
|
|
|
|
|
| <header id="topbar">
|
| <div class="brand">
|
| <span class="brand-symbol">☯</span>
|
| <span class="brand-title">
|
| <span class="cn-only">易經六十四卦</span>
|
| <span class="en-only">I Ching · 64 Hexagrams</span>
|
| </span>
|
| </div>
|
| <div class="controls">
|
| <input id="search" type="search"
|
| placeholder="搜尋卦名 / Search…"
|
| autocomplete="off" spellcheck="false" />
|
| <button id="pick-one" class="btn" title="隨機抽一卦 / Random hexagram">Pick one</button>
|
| <button id="lang-toggle" class="btn" title="切換語言 / Switch language">中 / EN</button>
|
| </div>
|
| </header>
|
|
|
|
|
| <div id="hint">
|
| <span class="cn-only">拖曳旋轉 · 滾輪縮放 · 點擊卦象查看解說</span>
|
| <span class="en-only">Drag to rotate · Scroll to zoom · Click a hexagram to read it</span>
|
| </div>
|
|
|
|
|
| <aside id="panel" class="hidden" aria-hidden="true">
|
| <button id="panel-close" aria-label="Close">×</button>
|
| <div id="panel-content"></div>
|
| </aside>
|
|
|
|
|
| <div id="modal" class="hidden" aria-hidden="true">
|
| <div class="modal-backdrop"></div>
|
| <div class="modal-box" role="dialog" aria-modal="true">
|
| <button id="modal-close" aria-label="Close">×</button>
|
| <div id="modal-content"></div>
|
| </div>
|
| </div>
|
|
|
| <footer id="credit">
|
| <span class="cn-only">以 three.js 打造 · 六十四卦互動</span>
|
| <span class="en-only">Built with three.js · interactive I Ching</span>
|
| </footer>
|
|
|
| <div id="author">Created by Andy Kong</div>
|
|
|
| <script type="module" src="js/main.js"></script>
|
| </body>
|
| </html>
|
|
|
