minesweeper/src/main/index.html

157 lines
5.4 KiB
HTML
Raw Normal View History

2020-07-25 20:35:59 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Felix W. Dekker" />
2020-08-05 19:32:01 +02:00
<meta name="application-name" content="Minesweeper" />
2020-07-25 20:35:59 +02:00
<meta name="description" content="Just Minesweeper!" />
<meta name="theme-color" content="#0033cc" />
2020-08-05 19:32:01 +02:00
<title>Minesweeper</title>
2020-07-25 20:35:59 +02:00
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"
crossorigin="anonymous" />
</head>
<body>
<noscript>
<span style="color: red; font-weight: bold;">
This website does not function if JavaScript is disabled.
Please check the <a href="https://www.enable-javascript.com/">
instructions on how to enable JavaScript in your web browser</a>.
</span>
</noscript>
<main style="display: none;">
<div id="nav"></div>
<div id="contents">
<div id="header"></div>
<section class="container" id="mainContainer">
<!-- Controls -->
<div class="row controls">
<div class="column">
<!-- Difficulty -->
<label for="difficulty"></label>
<select id="difficulty">
<option>Select difficulty</option>
</select>
2020-07-25 20:35:59 +02:00
<!-- New game -->
<form id="newGameForm">
2020-08-06 20:56:45 +02:00
<button><i class="fa fa-random"></i>&emsp;New game</button>
</form>
<!-- Restart -->
<form id="restartForm">
2020-08-06 20:56:45 +02:00
<button><i class="fa fa-sync"></i>&emsp;Restart game</button>
</form>
<!-- Seed -->
2020-08-04 21:41:10 +02:00
<form id="seedOpenForm">
2020-08-06 20:56:45 +02:00
<button><i class="fa fa-tree"></i>&emsp;Enter seed</button>
2020-07-28 23:34:44 +02:00
</form>
2020-08-08 02:41:21 +02:00
<!-- Statistics -->
<form id="statisticsOpenForm">
<button><i class="fa fa-tachometer"></i>&emsp;Statistics</button>
</form>
2020-07-28 23:34:44 +02:00
</div>
</div>
<div class="row controls">
<div class="column">
2020-08-02 16:22:18 +02:00
<!-- Undo -->
<form id="undoForm">
2020-08-06 20:56:45 +02:00
<button><i class="fa fa-undo"></i>&emsp;Undo</button>
2020-08-02 16:22:18 +02:00
</form>
2020-08-07 00:19:17 +02:00
<!-- Redo -->
<form id="redoForm">
<button><i class="fa fa-repeat"></i>&emsp;Redo</button>
</form>
2020-08-09 17:38:39 +02:00
<!-- Hint -->
<form id="hintForm">
<button><i class="fa fa-question-circle-o"></i>&emsp;Hint</button>
</form>
<!-- Solver -->
<form id="solveForm">
2020-08-06 20:56:45 +02:00
<button><i class="fa fa-fast-forward"></i>&emsp;Solve</button>
</form>
</div>
</div>
<br />
2020-08-05 19:28:35 +02:00
<!-- Field -->
<div class="row">
<div class="column">
<!-- Canvas -->
<div id="canvasContainer">
<canvas id="canvas" width="1" height="1">
Your browser must support the &lt;canvas&gt; element to run this game.
</canvas>
</div>
</div>
</div>
2020-07-25 20:35:59 +02:00
</section>
</div>
<div id="footer"></div>
<!-- Custom difficulty overlay -->
<div class="overlayWrapper" id="customDifficultyOverlay">
<div class="overlay">
<form id="customDifficultyForm">
<label for="settingsWidth">Width</label>
<input type="number" id="settingsWidth" min="3" max="99" value="9" />
<label for="settingsHeight">Height</label>
<input type="number" id="settingsHeight" min="3" max="99" value="9" />
<label for="settingsMines">Mines</label>
<input type="number" id="settingsMines" min="0" value="10" />
<label for="settingsSolvable">Ensure solvability (experimental)</label>
<input type="checkbox" id="settingsSolvable" />
<br /><br />
<button>New game</button>
</form>
<form id="customDifficultyCancelForm">
<button>Cancel</button>
</form>
</div>
</div>
2020-08-04 21:41:10 +02:00
<!-- Seed input overlay -->
<div class="overlayWrapper" id="seedOverlay">
<div class="overlay">
<form id="seedForm">
<label for="seed">Seed</label>
<input id="seed" />
<button>New game</button>
</form>
<form id="seedCancelForm">
<button>Cancel</button>
</form>
</div>
</div>
2020-08-08 02:41:21 +02:00
<!-- Statistics overlay -->
<div class="overlayWrapper" id="statisticsOverlay">
<div class="overlay">
<div id="statisticsDiv"></div>
<form id="statisticsResetForm">
<button>Reset</button>
</form>
<form id="statisticsCloseForm">
<button>Close</button>
</form>
</div>
</div>
2020-07-25 20:35:59 +02:00
</main>
<!-- Scripts -->
<!--suppress HtmlUnknownTarget -->
2020-07-25 20:35:59 +02:00
<script src="bundle.js"></script>
</body>
</html>