75 lines
4.1 KiB
HTML
75 lines
4.1 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" aria-label="上一页">◀</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" aria-label="下一页">▶</button>
|
|
<button class="view-btn" id="btn-view" data-view="binder" aria-label="切换视图">
|
|
<svg class="v-icon v-binder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="1.5"/><line x1="8" y1="3" x2="8" y2="21"/><circle cx="11.5" cy="8" r="0.6" fill="currentColor"/><circle cx="11.5" cy="12" r="0.6" fill="currentColor"/><circle cx="11.5" cy="16" r="0.6" fill="currentColor"/></svg>
|
|
<svg class="v-icon v-timeline" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15.5 14"/></svg>
|
|
<svg class="v-icon v-globe" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><ellipse cx="12" cy="12" rx="4" ry="9"/><line x1="3" y1="12" x2="21" y2="12"/></svg>
|
|
</button>
|
|
</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>
|
|
|
|
<!-- 加载界面：OS1 3D 加载环 -->
|
|
<div id="loading" aria-hidden="true">
|
|
<div id="loading-canvas"></div>
|
|
<div class="loading-text">加载中，约等待六秒…</div>
|
|
</div>
|
|
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html>
|