diff options
| author | Sébastien Dailly <sebastien@dailly.me> | 2022-01-28 14:44:57 +0100 |
|---|---|---|
| committer | Sébastien Dailly <sebastien@dailly.me> | 2022-02-07 16:22:43 +0100 |
| commit | 741f88ab405995003eb6e9f301d3b065c1e84a4a (patch) | |
| tree | 08ba9ec2247c56680611d542ed9b096c5f1a083b /motus/index.html | |
| parent | c0c82a7bfe8300b1bd50fee11074837ff32d3da0 (diff) | |
Added a motus solver
Diffstat (limited to 'motus/index.html')
| -rw-r--r-- | motus/index.html | 139 |
1 files changed, 139 insertions, 0 deletions
diff --git a/motus/index.html b/motus/index.html new file mode 100644 index 0000000..d5347be --- /dev/null +++ b/motus/index.html @@ -0,0 +1,139 @@ +<!DOCTYPE html> +<html> +<head> +<title>SUTOM Solver</title> +<meta charset="UTF-8"> +<meta name="viewport" content="width=device-width, initial-scale=1"> + +<link rel="stylesheet" type="text/css" href="/theme/font-awesome/css/fontawesome.css"> +<link rel="stylesheet" type="text/css" href="/theme/font-awesome/css/brands.css"> +<link rel="stylesheet" type="text/css" href="/theme/font-awesome/css/solid.css"> + + +<style> +* { + box-sizing: border-box; +} + +/* Style the body */ +body { + font-family: Arial; + margin: 0; +} + +/* Header/logo Title */ +.header { + padding: 50px; + text-align: center; + color: white; + background-color: #333; +} + +/* Column container */ +.row { + display: flex; + flex-wrap: wrap; +} + +.side { + flex: 30%; + padding: 20px; +} + +/* Main column */ +.main { + flex: 70%; + background-color: white; + padding: 20px; +} + +input[type='text'] { font-size: 24px; } + +fieldset { + display: table; +} +fieldset div { + display: table-row; +} + +fieldset label { + display: table-cell; + padding-right: 20px; + vertical-align: middle; +} + +table tr td input { width: 2em; text-align: center} +table tr td input.wellplaced { background-color: lightgreen;} +table tr td input.misplaced { background-color: gold;} +tr:first-child { outline: thin solid; } + +/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */ +@media screen and (max-width: 700px) { + .row, .navbar { + flex-direction: column; + } +} +</style> +</head> +<body> + +<!-- Header --> +<div class="header"> + <h1>SUTOM Solver</h1> +</div> + +<!-- The flexible grid (content) --> +<div class="row"> + <div class="main"> + <div> + <noscript>Sorry, you need to enable JavaScript to see this page.</noscript> + <script id="lib" type="text/javascript" defer="defer" src="js/motus.js"></script> + <script> + var script = document.getElementById('lib'); + script.addEventListener('load', function() { + lib.run("length" + , "send" + , "dictonnary" + , "proposition" + , "side_list" + , "table" + , "next_btn" + , "reload"); + }); + </script> + </div> + <fieldset> + <div> + <label for="source">Lettres</label> + <input type="number" id="length" name="source" value="7"/> + </div> + <div> + <label>Proposition initiale</label> + <div id="proposition"/></div> + </div> + <div> + <label for="dictonnary">Dictionnaire</label> + <select id="dictonnary"> + <option value="english">Anglais / Americain (61 580 mots)</option> + <option selected value="french">Français (240 135 mots)</option> + </select> + </div> + <input id="send" type="submit" value="Charger"/> + </fieldset> + <h2>Grille d’analyse</h2> + + + <button style="float:right;" id="reload"><i class="fa fa-redo-alt"></i></button> + <table id="table" style="margin: 0 auto"> + </table> + <button id="next_btn" hidden="true">Suivant</button> + + </div> + <div class="side"> + <h2>Règles actives</h2> + <ul id="side_list"> + </ul> + </div> +</div> +</body> +</html> |