mhdos-armor-set-searcher/src/app/pages/index.html
2023-08-20 18:48:36 +02:00

206 lines
6.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>MH3 Armor Set Searcher</title>
<meta
name="description"
content="Armor Set Searcher for Monster Hunter Tri"
/>
<meta name="author" content="TimH96" />
<meta property="og:title" content="MH3 Armor Set Searcher" />
<meta property="og:type" content="website" />
<meta
property="og:url"
content="https://timh96.github.io/mhtri-armor-set-searcher/"
/>
<meta
property="og:description"
content="Armor Set Searcher for Monster Hunter Tri"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="header">MH Tri Armor Set Searcher</div>
<div id="open-source" class="banner">
<p>
This is an open-source project hosted on gh-pages,
<a href="https://github.com/TimH96/mhtri-armor-set-searcher"
>here is the repository</a
>. If you have a feature request or find any bugs, please create an
issue on GitHub. You are also welcome to integrate them yourself via a
Pull Request.
</p>
</div>
<div id="main-body">
<!-- navbar -->
<div id="navbar-container">
<ul class="navbar">
<li class="navbar-option" data-selection="0">Search</li>
<li class="navbar-option" data-selection="1">Charms</li>
<li class="navbar-option" data-selection="2">Equipment</li>
</ul>
</div>
<!-- search -->
<div class="panel" id="search-container" data-panel-number="0">
<!-- global settings -->
<div id="search-global-settings">
<ul>
<li>
<select name="armor-type" id="armor-type">
<option value="1">Blademaster</option>
<option value="2">Gunner</option>
</select>
</li>
<li>
<select name="weapon-slots" id="weapon-slots">
<option value="0">0 Weapon Slots</option>
<option value="1">1 Weapon Slots</option>
<option value="2">2 Weapon Slots</option>
<option value="3">3 Weapon Slots</option>
</select>
</li>
<li>
<select name="armor-rarity" id="armor-rarity">
<optgroup label="High Rank">
<option value="7">Armor RARE7</option>
<option value="6">Armor RARE6</option>
<option value="5">Armor RARE5</option>
<option value="4">Armor RARE4</option>
</optgroup>
<optgroup label="Low Rank">
<option value="3">Armor RARE3</option>
<option value="2">Armor RARE2</option>
<option value="1">Armor RARE1</option>
</optgroup>
</select>
</li>
<li>
<select name="deco-rarity" id="deco-rarity">
<optgroup label="High Rank">
<option value="7">Deco RARE7</option>
<option value="6">Deco RARE6</option>
</optgroup>
<optgroup label="Low Rank">
<option value="5">Deco RARE5</option>
<option value="4">Deco RARE4</option>
</optgroup>
</select>
</li>
<li>
<input
type="number"
name="search-limit"
id="search-limit"
min="1"
max="1000"
value="100"
/>
</li>
</ul>
</div>
<!-- skill picker -->
<div id="search-skill-picker"></div>
<!-- controls -->
<div id="search-controls">
<ul>
<li><button id="search-btn">Search</button></li>
<li><button id="more-btn">More Skills</button></li>
<li><button id="reset-btn">Reset</button></li>
</ul>
</div>
<!-- results -->
<div id="search-results"></div>
</div>
<!-- charms -->
<div class="panel" id="charms-container" data-panel-number="1">
<!-- charm picker -->
<div id="charm-picker">
<ul>
<li>Add Charm</li>
<li>
<select
class="charm-skill-pick"
name="charm-skill-1-name"
id="charm-skill-1-name"
></select>
</li>
<li>
<select
class="charm-points-pick"
name="charm-skill-1-points"
id="charm-skill-1-points"
></select>
</li>
<li>
<select
class="charm-skill-pick"
name="charm-skill-2-name"
id="charm-skill-2-name"
></select>
</li>
<li>
<select
class="charm-points-pick"
name="charm-skill-2-points"
id="charm-skill-2-points"
></select>
</li>
<li>
<select name="charm-slots" id="charm-slots">
<option value="0">0 Slots</option>
<option value="1">1 Slots</option>
<option value="2">2 Slots</option>
<option value="3">3 Slots</option>
</select>
</li>
<li><button id="charm-add">Add</button></li>
<li><button id="charm-import">Import</button></li>
<li><button id="charm-export">Export</button></li>
</ul>
<a href="" id="charm-download" style="display: none"></a>
<input
type="file"
id="charm-upload"
accept=".csv"
style="display: none"
/>
</div>
<!-- charm table -->
<div id="charm-table-container">
<table id="charm-table">
<tr>
<th>Skill</th>
<th>Points</th>
<th>Skill</th>
<th>Points</th>
<th>Slots</th>
<th>Delete</th>
</tr>
</table>
</div>
</div>
<!-- eq settings -->
<div class="panel" id="eq-settings-container" data-panel-number="2">
<div id="eq-container"></div>
</div>
</div>
<script src="./index.ts"></script>
</body>
</html>