65 lines
2.1 KiB
HTML
65 lines
2.1 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Ascension M+ Route Planner</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<aside class="sidebar">
|
||
<header class="brand">
|
||
<h1>M+ Routes</h1>
|
||
<p class="sub">Ascension dungeon planner</p>
|
||
</header>
|
||
<div class="filters">
|
||
<input id="search" type="search" placeholder="Search dungeons…" autocomplete="off">
|
||
<select id="expansion-filter">
|
||
<option value="">All expansions</option>
|
||
</select>
|
||
</div>
|
||
<ul id="dungeon-list" class="dungeon-list"></ul>
|
||
</aside>
|
||
|
||
<main class="viewer">
|
||
<header class="viewer-header">
|
||
<div class="title-block">
|
||
<h2 id="dungeon-name">Pick a dungeon</h2>
|
||
<p id="dungeon-meta" class="meta"></p>
|
||
</div>
|
||
<div id="floor-tabs" class="floor-tabs"></div>
|
||
<div class="toolbar">
|
||
<button id="tool-route" class="tool active" title="Click map to add waypoints">Route</button>
|
||
<button id="tool-pull" class="tool" title="Click map to drop pull markers">Pull</button>
|
||
<button id="undo" title="Undo (⌘Z)">Undo</button>
|
||
<button id="clear" title="Clear current floor">Clear</button>
|
||
<button id="share">Share</button>
|
||
<button id="export">Export JSON</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="canvas-wrap">
|
||
<div id="canvas-host" class="canvas-host">
|
||
<div id="canvas-stage" class="canvas-stage">
|
||
<img id="map-img" alt="">
|
||
<svg id="overlay" xmlns="http://www.w3.org/2000/svg"></svg>
|
||
</div>
|
||
<div class="zoom-controls">
|
||
<button id="zoom-in" title="Zoom in">+</button>
|
||
<button id="zoom-out" title="Zoom out">−</button>
|
||
<button id="zoom-reset" title="Fit to screen">⊡</button>
|
||
</div>
|
||
</div>
|
||
<aside class="info-pane">
|
||
<h3>Bosses</h3>
|
||
<ul id="boss-list" class="boss-list"></ul>
|
||
<h3>Waypoints</h3>
|
||
<ol id="waypoint-list" class="waypoint-list"></ol>
|
||
</aside>
|
||
</section>
|
||
</main>
|
||
|
||
<script src="app.js" type="module"></script>
|
||
</body>
|
||
</html>
|