61 lines
2.0 KiB
HTML
61 lines
2.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Outward Craft Planner</title>
|
|
<link rel="stylesheet" href="/styles.css">
|
|
</head>
|
|
<body>
|
|
<main class="app-shell">
|
|
<section class="hero">
|
|
<p class="eyebrow">Outward Craft Planner</p>
|
|
<h1>Tell me what is in your bag, and I will tell you what you can craft.</h1>
|
|
<p class="hero-copy">
|
|
One item per line. Use <code>2x Linen Cloth</code> if you have more than one.
|
|
</p>
|
|
</section>
|
|
|
|
<section class="workspace">
|
|
<aside class="panel input-panel">
|
|
<div class="panel-head">
|
|
<h2>Inventory</h2>
|
|
<p>Quick add or paste a full list.</p>
|
|
</div>
|
|
|
|
<div class="quick-add">
|
|
<input id="quick-item" list="item-list" type="text" placeholder="Search item name">
|
|
<input id="quick-qty" type="number" min="1" value="1">
|
|
<button id="add-item" type="button">Add</button>
|
|
<datalist id="item-list"></datalist>
|
|
</div>
|
|
|
|
<textarea id="inventory-input" spellcheck="false" placeholder="Water 2x Linen Cloth Gravel Beetle Oil"></textarea>
|
|
|
|
<div class="actions">
|
|
<button id="analyze-btn" class="primary" type="button">Analyze Crafting</button>
|
|
<button id="sample-btn" type="button">Load Sample</button>
|
|
<button id="clear-btn" type="button">Clear</button>
|
|
</div>
|
|
|
|
<div class="inventory-preview">
|
|
<div class="mini-title">Parsed inventory</div>
|
|
<div id="inventory-chips" class="chips"></div>
|
|
</div>
|
|
</aside>
|
|
|
|
<section class="panel output-panel">
|
|
<div class="panel-head">
|
|
<h2>Craftable Items</h2>
|
|
<p id="summary-text">Loading dataset…</p>
|
|
</div>
|
|
|
|
<div id="results" class="results"></div>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|