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>