Jan Bader
104 lines
3.5 KiB
HTML
104 lines
3.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Forge Master Strategy Optimizer</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<header class="hero">
|
|
<div>
|
|
<p class="eyebrow">Forge Master</p>
|
|
<h1>Strategy Optimizer</h1>
|
|
<p class="lede">Enter your items, mount, and pets to find the best upgrades and weakest sacrifice candidates.</p>
|
|
</div>
|
|
<section class="save-panel" aria-labelledby="save-heading">
|
|
<h2 id="save-heading">Save slots</h2>
|
|
<div class="save-grid">
|
|
<input id="slotName" type="text" placeholder="Slot name" />
|
|
<button id="saveSlot" type="button">Save</button>
|
|
<select id="slotSelect" aria-label="Saved slots"></select>
|
|
<button id="loadSlot" type="button">Load</button>
|
|
<button id="deleteSlot" type="button" class="danger">Delete</button>
|
|
</div>
|
|
<p id="saveStatus" class="status" role="status"></p>
|
|
</section>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="controls card">
|
|
<label>
|
|
Strategy profile
|
|
<select id="profileSelect"></select>
|
|
</label>
|
|
<label>
|
|
Recommendation count
|
|
<input id="recommendationCount" type="number" min="3" max="20" step="1" value="8" />
|
|
</label>
|
|
<button id="resetBuild" type="button" class="secondary">Reset current build</button>
|
|
</section>
|
|
|
|
<section class="summary-grid" aria-label="Build summary">
|
|
<article class="metric"><span>Total damage base</span><strong id="totalDamage">0</strong></article>
|
|
<article class="metric"><span>Total health base</span><strong id="totalHealth">0</strong></article>
|
|
<article class="metric"><span>Offense score</span><strong id="offenseScore">0</strong></article>
|
|
<article class="metric"><span>Defense score</span><strong id="defenseScore">0</strong></article>
|
|
</section>
|
|
|
|
<section class="results">
|
|
<article class="card">
|
|
<h2>Best upgrades</h2>
|
|
<ol id="upgradeList" class="recommendation-list"></ol>
|
|
</article>
|
|
<article class="card">
|
|
<h2>Best sacrifice candidates</h2>
|
|
<ol id="sacrificeList" class="recommendation-list"></ol>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>Effect totals</h2>
|
|
<div id="effectTotals" class="effect-totals"></div>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="section-heading">
|
|
<h2>Equipment</h2>
|
|
<p>Each piece can have zero, one, or two effects. Empty effects are ignored.</p>
|
|
</div>
|
|
<div id="gearGrid" class="gear-grid"></div>
|
|
</section>
|
|
</main>
|
|
|
|
<template id="gearTemplate">
|
|
<article class="gear-card card">
|
|
<div class="gear-title-row">
|
|
<h3></h3>
|
|
<span class="piece-score"></span>
|
|
</div>
|
|
<label>
|
|
Name
|
|
<input data-field="name" type="text" />
|
|
</label>
|
|
<div class="inline-fields">
|
|
<label>
|
|
Base stat
|
|
<select data-field="baseType">
|
|
<option value="damage">Damage</option>
|
|
<option value="health">Health</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
Value
|
|
<input data-field="baseValue" type="number" min="0" step="1" />
|
|
</label>
|
|
</div>
|
|
<div class="effects"></div>
|
|
</article>
|
|
</template>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|