fukunee
13d3ef180a
Migrate the globe view to a Cesium viewer with Esri satellite imagery and terrain, dropping the custom blue-marble texture and dot-bead rendering. Add vite-plugin-cesium and a container element for the viewer. Also rework the binder leather and suede materials with dedicated normal maps, and refine timeline labels and page hole sizing.
74 lines
3.5 KiB
HTML
74 lines
3.5 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>
|
|
|
|
<!-- 视图切换 -->
|
|
<nav class="hud 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>
|
|
</nav>
|
|
|
|
<!-- 底部：导航 -->
|
|
<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>
|
|
<button class="nav-btn flip-hint" id="btn-flip" title="翻面查看素描">翻面</button>
|
|
</footer>
|
|
|
|
<!-- 右侧：登记卡详情 -->
|
|
<aside class="hud detail-card" id="detail-card">
|
|
<div class="detail-head">
|
|
<span class="detail-no" id="detail-no">No.001</span>
|
|
<span class="detail-cat" id="detail-cat">人</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>
|
|
<div class="field"><dt>名称</dt><dd id="detail-name2">露西 · 南方古猿</dd></div>
|
|
</dl>
|
|
<p class="detail-desc" id="detail-desc"></p>
|
|
<div class="detail-sketch">
|
|
<canvas id="detail-sketch-canvas" width="560" height="320"></canvas>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- 提示 -->
|
|
<div class="hud hint" id="hint">拖动旋转 · 滚轮缩放 · 时间轴视图拖拽左右滑动 · 点击选中 · ← → 翻页</div>
|
|
</div>
|
|
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html>
|