fukunee
32bb48cc0b
- Show a spinner overlay that fades out once Cesium globe data is ready, with a 1s minimum and 8s timeout - Expose a ready promise on CesiumGlobe resolved after country and city data load - Remove temporary inspect script
77 lines
3.4 KiB
HTML
77 lines
3.4 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>
|
|
|
|
<!-- 加载界面 -->
|
|
<div id="loading" aria-hidden="true">
|
|
<div class="loading-box">
|
|
<div class="spinner"></div>
|
|
<div class="loading-text">载入中…</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html>
|