fukunee
71750e5dad
Add a generator script that produces the entries dataset, dedupe entries sharing coordinates, and ship world city and country GeoJSON assets for the globe view. Make the timeline card spacing derive from entry count, move the view switcher into the bottom bar, and align card and label fonts with the timeline titles.
69 lines
3.2 KiB
HTML
69 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>人类文明里程碑 · 活页编年史</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%2316110c'/%3E%3Crect x='8' y='5' width='16' height='22' rx='2' fill='%23c9a227'/%3E%3Cline x1='12' y1='10' x2='20' y2='10' stroke='%2316110c' stroke-width='1.6'/%3E%3Cline x1='12' y1='15' x2='20' y2='15' stroke='%2316110c' stroke-width='1.6'/%3E%3Cline x1='12' y1='20' x2='17' y2='20' stroke='%2316110c' stroke-width='1.6'/%3E%3C/svg%3E" />
|
|
<meta name="description" content="以活页本、时间轴与地理视图，艺术化地呈现世界历史中里程碑式的人、事、物。" />
|
|
<link rel="stylesheet" href="/src/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<canvas id="scene"></canvas>
|
|
<div id="cesium-container" aria-hidden="true"></div>
|
|
|
|
<!-- 气氛遮罩：暗角 + 颗粒 -->
|
|
<div class="vignette" aria-hidden="true"></div>
|
|
<div class="grain" aria-hidden="true"></div>
|
|
|
|
<!-- 转场淡入遮罩 -->
|
|
<div id="iris" aria-hidden="true"></div>
|
|
|
|
<!-- 顶部：标题 -->
|
|
<header class="hud top-left">
|
|
<h1 class="title">人类文明里程碑</h1>
|
|
<p class="subtitle">活页编年史 · The Loose-leaf Chronicle of Civilisation</p>
|
|
</header>
|
|
|
|
<!-- 底部：导航 -->
|
|
<footer class="hud bottom-bar">
|
|
<button class="nav-btn" id="btn-prev" title="上一页 (←)">◀</button>
|
|
<div class="page-indicator">
|
|
<span id="page-num">01</span><span class="sep">/</span><span id="page-total">20</span>
|
|
<span class="page-name" id="page-name">露西 · 南方古猿</span>
|
|
</div>
|
|
<button class="nav-btn" id="btn-next" title="下一页 (→)">▶</button>
|
|
<div class="view-switch" aria-label="视图切换">
|
|
<button class="view-btn active" data-view="binder">活页本</button>
|
|
<button class="view-btn" data-view="timeline">时间轴</button>
|
|
<button class="view-btn" data-view="globe">地理</button>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- 右侧：登记卡详情 -->
|
|
<aside class="hud detail-card" id="detail-card">
|
|
<div class="detail-head">
|
|
<span class="detail-no" id="detail-no">No.001</span>
|
|
</div>
|
|
<h2 class="detail-name" id="detail-name">露西 · 南方古猿</h2>
|
|
<dl class="detail-fields">
|
|
<div class="field"><dt>时间</dt><dd id="detail-time">约公元前320万年</dd></div>
|
|
<div class="field"><dt>地区</dt><dd id="detail-region">东非 · 埃塞俄比亚</dd></div>
|
|
</dl>
|
|
<p class="detail-desc" id="detail-desc"></p>
|
|
<div class="detail-sketch">
|
|
<canvas id="detail-sketch-canvas" width="360" height="200"></canvas>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- 提示 -->
|
|
<div class="hud hint" id="hint">拖动旋转 · 滚轮缩放 · 时间轴视图拖拽左右滑动 · 点击选中 · ← → 翻页</div>
|
|
</div>
|
|
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html>
|