<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="media/pokeball.png" type="image/x-icon">
<link href="https://fonts.cdnfonts.com/css/gill-sans" rel="stylesheet">
<link href="https://fonts.cdnfonts.com/css/pokemon-solid" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Pokédex</title>
</head>
<body>
<main>
<h1>Pokédex Benchmark</h1>
<div>
<label for="slots">Select your team</label>
<select name="slot" id="slots">
<option value="1">Slot 1</option>
<option value="2">Slot 2</option>
<option value="3">Slot 3</option>
<option value="4">Slot 4</option>
<option value="5">Slot 5</option>
<option value="6">Slot 6</option>
</select>
</div>
<div class="sticky">
<div class="hud">
<div class="trash">
<img src="media/well.png" alt="pokétrash" draggable="false" id="trash">
<audio src="media/aaaAAAH.mp3" style="display: none" id="aaaAAAH"></audio>
<audio src="media/vanish.mp3" style="display: none" id="vanish"></audio>
</div>
<div class="deck"></div>
<div class="deck"></div>
<div class="deck"></div>
<div class="deck"></div>
<div class="deck"></div>
<div class="deck"></div>
<div class="save">
<button id="save">Save Current Deck</button>
</div>
</div>
</div>
<div class="column-container">
<div class="column">
<div class="benchmark">
<h2 id="score"></h2>
<div class="teamTypes"></div>
<canvas width="300" height="250"></canvas>
<div class="column-container">
<table class="stat">
<tr>
<th scope="col">Stat</th>
<th scope="col">Value</th>
</tr>
<tr>
<th scope="row">HP</th>
<td class="stat"></td>
</tr>
<tr>
<th scope="row">Attack</th>
<td class="stat"></td>
</tr>
<tr>
<th scope="row">Defense</th>
<td class="stat"></td>
</tr>
<tr>
<th scope="row">Special Attack</th>
<td class="stat"></td>
</tr>
<tr>
<th scope="row">Speed</th>
<td class="stat"></td>
</tr>
<caption>Average Team Stats</caption>
</table>
<div class="capacity">
<p>Potential attacks :</p>
<ul>
<li>Blank</li>
<li>Blank</li>
</ul>
<p>Potential capacities :</p>
<ul>
<li>Blank</li>
<li>Blank</li>
</ul>
</div>
</div>
</div>
<button id="saveCard">Save Card</button>
</div>
<div class="column">
<div class="search">
<label for="search">Search a Pokémon</label>
<input type="text" id="search">
<p class="amount"></p>
</div>
<label for="type">Choisissez un type de pokémon en particulier:</label>
<select name="type" id="type">
<option value="">All pokemons</option>
<option value="normal">normal</option>
<option value="water">water</option>
<option value="electric">electric</option>
<option value="grass">grass</option>
<option value="ice">ice</option>
<option value="fighting">fighting</option>
<option value="poison">poison</option>
<option value="ground">ground</option>
<option value="flying">flying</option>
<option value="psychic">psychic</option>
<option value="bug">bug</option>
<option value="rock">rock</option>
<option value="ghost">ghost</option>
<option value="dragon">dragon</option>
<option value="dark">dark</option>
<option value="steel">steel</option>
<option value="fairy">fairy</option>
</select>
<div class="poke-stock">
<!--Pokémons will be displayed here-->
</div>
</div>
</div>
<div class="modal-save-background">
<div class="modal-save">
</div>
</div>
</main>
<script src="script.min.js"></script>
<script src="storage.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="benchmark.min.js"></script>
</body>
</html>