minesweeper/src/main/index.html

75 lines
2.6 KiB
HTML

<!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" />
<meta name="application-name" content="Swinemeeper" />
<meta name="description" content="Just Minesweeper!" />
<meta name="theme-color" content="#0033cc" />
<title>Swinemeeper</title>
<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">
<div class="row">
<div class="column column-60">
<!-- Field -->
<canvas id="canvas" width="1" height="1"></canvas>
</div>
<div class="column column-40">
<!-- Solver -->
<h3>Controls</h3>
<form id="solveForm">
<button>Solve</button>
</form>
<form id="controlForm">
<label for="displayScale">Scale</label>
<input type="number" id="displayScale" value="30" min="1" />
</form>
<!-- Settings -->
<h3>Settings</h3>
<form id="settingsForm">
<label for="settingsWidth">Width</label>
<input type="number" id="settingsWidth" value="9" />
<label for="settingsHeight">Height</label>
<input type="number" id="settingsHeight" value="9" />
<label for="settingsMines">Mines</label>
<input type="number" id="settingsMines" value="10" />
<label for="settingsSeed">Seed</label>
<input type="number" id="settingsSeed" value="" />
<button>Play</button>
</form>
</div>
</div>
</section>
</div>
<div id="footer"></div>
</main>
<!-- Scripts -->
<script src="bundle.js"></script>
</body>
</html>