55 lines
2.6 KiB
HTML
55 lines
2.6 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>d2web · DS1/DT1 地图场景（M1）</title>
|
||
<style>
|
||
:root { color-scheme: dark; }
|
||
* { box-sizing: border-box; }
|
||
body { margin: 0; background: #0d0b09; color: #e8dcc8;
|
||
font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
|
||
header { padding: 10px 16px; border-bottom: 1px solid #33291f;
|
||
display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
|
||
h1 { font-size: 14px; margin: 0; color: #c8a15a; letter-spacing: .06em; }
|
||
a { color: #c8a15a; }
|
||
#hud { color: #9c8d78; }
|
||
#drop { margin: 10px 16px 6px; padding: 8px 12px; border: 1px dashed #6d5a34;
|
||
border-radius: 6px; color: #9c8d78; cursor: pointer; }
|
||
#drop.hot { border-color: #c8a15a; color: #c8a15a; }
|
||
#controls { margin: 0 16px 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
|
||
#controls label { color: #9c8d78; }
|
||
select { background: #1c1813; color: #e8dcc8; border: 1px solid #33291f;
|
||
border-radius: 4px; padding: 3px 6px; max-width: 340px; font: inherit; }
|
||
button { background: #241d16; color: #e8dcc8; border: 1px solid #33291f;
|
||
border-radius: 4px; padding: 4px 10px; font: inherit; cursor: pointer; }
|
||
#status { margin: 0 16px 10px; color: #9c8d78; }
|
||
#dialog { margin: 0 16px 10px; padding: 10px 12px; max-width: 720px;
|
||
background: #1c1813; border: 1px solid #6d5a34; border-radius: 6px;
|
||
color: #e8dcc8; white-space: pre-wrap; }
|
||
canvas { display: block; margin: 0 16px; background: #000; border: 1px solid #33291f;
|
||
width: 960px; height: 560px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>d2web · DS1 + DT1 地图</h1>
|
||
<a href="/">资源检查器</a>
|
||
<a href="/walk.html?sample=samples/spawn.mpq">暗黑1 走动演示</a>
|
||
<span id="hud">—</span>
|
||
</header>
|
||
<div id="drop">拖入 .mpq 打开你的归档；或用 ?mpq=<url> / ?data=<fixture 目录></div>
|
||
<input id="picker" type="file" accept=".mpq,.MPQ" hidden />
|
||
<div id="controls" hidden>
|
||
<label>关卡 DS1 <select id="ds1"></select></label>
|
||
<label>瓦片 DT1 <select id="dt1"></select></label>
|
||
<label>调色板 <select id="pal"></select></label>
|
||
<button id="reload">重新加载</button>
|
||
</div>
|
||
<p id="status">正在加载地图…</p>
|
||
<div id="dialog" hidden></div>
|
||
<canvas id="view" width="960" height="560"></canvas>
|
||
<script type="module" src="/src/scene/map-scene.ts"></script>
|
||
</body>
|
||
</html>
|