<!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>