113 lines
5.4 KiB
HTML
113 lines
5.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>d2web · Diablo II v1.13c</title>
|
|
<style>
|
|
:root { color-scheme: dark; }
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; height: 100%; background: #0b0906; color: #e8dcc8;
|
|
font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow: hidden; }
|
|
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: #000; cursor: none; }
|
|
.overlay { position: fixed; z-index: 2; background: rgba(11, 9, 6, .82); border: 1px solid #33291f;
|
|
border-radius: 6px; backdrop-filter: blur(3px); }
|
|
header { top: 0; left: 0; right: 0; padding: 6px 12px; border-radius: 0; border-width: 0 0 1px 0;
|
|
display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
|
|
h1 { font-size: 13px; margin: 0; color: #c8a15a; letter-spacing: .06em; }
|
|
a { color: #c8a15a; }
|
|
#hud { color: #9c8d78; }
|
|
#controls { top: 4px; right: 12px; padding: 3px 8px; display: flex; gap: 8px;
|
|
align-items: center; flex-wrap: wrap; max-width: 74vw; font-size: 12px; z-index: 4; }
|
|
#controls label { color: #9c8d78; }
|
|
select { background: #1c1813; color: #e8dcc8; border: 1px solid #33291f;
|
|
border-radius: 4px; padding: 2px 5px; font: inherit; max-width: 22vw; }
|
|
select.non-default, .non-default {
|
|
border: 1px solid #e74c3c !important;
|
|
color: #ff6b6b !important;
|
|
}
|
|
optgroup { background: #1c1813; color: #c8a15a; }
|
|
option { background: #1c1813; }
|
|
#status { left: 12px; top: 34px; padding: 3px 8px; max-width: 55vw; color: #9c8d78; font-size: 11px; opacity: 0.85; pointer-events: none; z-index: 3; }
|
|
#status:empty { display: none; }
|
|
#dialog { right: 12px; top: 42px; padding: 8px 12px; min-width: 240px; color: #e8dcc8; white-space: pre-wrap; font-size: 14px; background: rgba(30, 26, 21, .9); border-color: #c8a15a; z-index: 5; }
|
|
#d2-hud-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 6; pointer-events: none; image-rendering: pixelated; cursor: none; }
|
|
.hint { color: #6d5a34; }
|
|
.lang-btn {
|
|
display: inline-block;
|
|
padding: 2px 7px;
|
|
background: #1c1813;
|
|
color: #c8a15a;
|
|
border: 1px solid #5c4628;
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
}
|
|
.lang-btn:hover {
|
|
border-color: #e2be78;
|
|
color: #f0d596;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="overlay">
|
|
<h1>d2web · Diablo II</h1>
|
|
<span id="hud">—</span>
|
|
</header>
|
|
<div id="controls" class="overlay">
|
|
<label>Class <select id="hero" disabled>
|
|
<option value="so">Sorceress</option>
|
|
<option value="am">Amazon</option>
|
|
<option value="ne">Necromancer</option>
|
|
<option value="pa">Paladin</option>
|
|
<option value="ba">Barbarian</option>
|
|
<option value="dz">Druid</option>
|
|
<option value="ai">Assassin</option>
|
|
</select></label>
|
|
<label>Act <select id="act" disabled>
|
|
<option value="1">Act I</option>
|
|
<option value="2">Act II</option>
|
|
<option value="3">Act III</option>
|
|
<option value="4">Act IV</option>
|
|
<option value="5">Act V</option>
|
|
</select></label>
|
|
<label>Scene <select id="scene" disabled><option>Loading scenes…</option></select></label>
|
|
<label>Variant <select id="variant" disabled></select></label>
|
|
<label>Lighting <select id="lighting">
|
|
<option value="auto">Auto (1.13c Default)</option>
|
|
<option value="noon">Noon (Bright Daylight)</option>
|
|
<option value="morning">Morning (Warm Dawn)</option>
|
|
<option value="sunset">Sunset (Dusk Glow)</option>
|
|
<option value="night">Midnight (Blue Moonlight)</option>
|
|
<option value="cave">Abyssal Dungeon (Torchlight)</option>
|
|
<option value="hell">Blood Moon (Act IV Crimson)</option>
|
|
<option value="eclipse">Solar Eclipse (Dark Curse)</option>
|
|
<option value="off">Unlit (Full Brightness)</option>
|
|
</select></label>
|
|
<label>Density <select id="density">
|
|
<option value="0.5">0.5x</option>
|
|
<option value="1" selected>Density: 1x (1.13c)</option>
|
|
<option value="2">2x</option>
|
|
<option value="4">4x</option>
|
|
<option value="8">8x</option>
|
|
</select></label>
|
|
<label>Elite <select id="elite">
|
|
<option value="0.5">0.5x</option>
|
|
<option value="1" selected>Elite: 1x (1.13c)</option>
|
|
<option value="2">2x</option>
|
|
<option value="4">4x</option>
|
|
<option value="all">All Elite</option>
|
|
</select></label>
|
|
<a id="lang-switch" class="lang-btn" href="./acts-zh.html">Lang: ZH</a>
|
|
<span class="hint" style="margin:0">I Inventory · A Character · T Skills · Q Quests · V Waypoints · ~ Belt · R Run/Walk · W Swap</span>
|
|
</div>
|
|
<div id="status" class="overlay">Loading map…</div>
|
|
<div id="dialog" class="overlay" hidden></div>
|
|
<div id="labels" style="position: fixed; inset: 0; pointer-events: none; z-index: 2;"></div>
|
|
<canvas id="view" width="960" height="560"></canvas>
|
|
<canvas id="d2-hud-canvas" width="800" height="600"></canvas>
|
|
<script type="module" src="/src/scene/act-scene.ts"></script>
|
|
</body>
|
|
</html>
|