summaryrefslogtreecommitdiff
path: root/motus/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'motus/index.html')
-rw-r--r--motus/index.html139
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>