Added html template

git-svn-id: file:///srv/svn/repo/mai/trunk@16 e410bdd4-646f-c54f-a7ce-fffcc4f439ae

web/static/LICENSE

@@ -0,0 +1,3 @@
+favicon.ico, favicon.svg, favicon128x128.png
+    Created by "joelchrono12" (https://https://joelchrono12.ml/)
+    Creative Commons Attribution 4.0 International License (CC BY 4.0)

web/static/script.js

@@ -0,0 +1,17 @@
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
+// this code submits the translation form when pressing Ctrl/Meta+Enter while focussed on the input text field
+document.getElementById("input").addEventListener("keydown", function (event) {
+    if (event.keyCode === 13 && (event.metaKey || event.ctrlKey)) {
+        document.getElementById("translation-form").submit();
+    }
+});
+
+// Auto resize textarea to fit words inside it without need to scroll -- Thanks to: https://stackoverflow.com/a/25621277
+var input = document.getElementById("input");
+var output = document.getElementById("output");
+input.setAttribute("style", "height:" + output.scrollHeight + "px;overflow-y:scroll;");
+output.setAttribute("style", "height:" + output.scrollHeight + "px;overflow-y:scroll;");
+input.addEventListener("input", function (e) {
+    this.style.height = 150 + "px";
+    this.style.height = this.scrollHeight + "px";
+});

web/static/style.css

@@ -0,0 +1,183 @@
+.center {
+    text-align: center;
+}
+
+.wrap {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.wrap.languages {
+    flex-wrap: nowrap;
+    margin-bottom: 20px;
+}
+
+#could_not_switch_languages_text {
+    color: red;
+}
+
+.item {
+    width: 100%;
+    height: 150px;
+}
+
+.item-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 450px;
+    margin: 5px 10px;
+}
+
+
+.language,
+.switch_languages {
+    display: flex;
+}
+
+.language {
+    margin: 0px 10px;
+}
+
+.switch_languages {
+    margin: 0px 5px;
+}
+
+#switchbutton {
+    white-space: nowrap;
+}
+
+button {
+    font-size: 1rem;
+    padding: 4px 10px;
+    border: 2px solid #888888;
+}
+
+input,
+select,
+textarea {
+    width: 100%;
+    font-size: 1rem;
+    padding: 4px;
+    border: 2px solid #888888;
+}
+
+textarea {
+    resize: vertical;
+    height: 5rem;
+    font-family: sans-serif;
+
+    /* Stretch to form width */
+    width: 100%;
+}
+
+input:focus,
+select:focus,
+textarea:focus,
+button:focus {
+    border-color: #478061;
+    outline: 1px solid #478061;
+}
+
+
+body {
+    justify-content: center;
+    font-family: sans-serif;
+}
+
+#definitions_and_translations {
+    display: grid;
+    margin: auto;
+    width: 1100px;
+    gap: 10px;
+    grid-template-areas: "definitions translations";
+
+}
+
+.def_type {
+    color: #007979;
+    text-transform: capitalize;
+}
+
+.syn {
+    color: #804700;
+}
+
+.syn_type {
+    color: #007979;
+}
+
+.use_in_sentence {
+    color: #009902;
+}
+
+.definitions li:not(:last-child) {
+    margin-bottom: 1rem;
+}
+
+@media screen and (max-width: 1200px) {
+    #definitions_and_translations {
+        display: grid;
+        width: 90vw;
+        grid-template-areas:
+            "definitions definitions"
+            "translations translations";
+    }
+}
+
+
+div.definitions {
+    grid-area: definitions;
+}
+
+div.translations {
+    grid-area: translations;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+    body {
+        background-color: #212529;
+        color: #f8f9fa;
+    }
+
+    #could_not_switch_languages_text {
+        color: #F13333;
+    }
+
+    a:visited {
+        color: #9759f6;
+        text-decoration: none;
+    }
+
+    a {
+        color: #599bf6;
+        text-decoration: none;
+    }
+
+    input,
+    select,
+    button,
+    textarea {
+        background-color: #131618;
+        border-color: #495057;
+        color: #f8f9fa;
+    }
+
+    .def_type {
+        color: cyan;
+        text-transform: capitalize;
+    }
+
+    .syn {
+        color: burlywood;
+    }
+
+    .syn_type {
+        color: cyan;
+    }
+
+    .use_in_sentence {
+        color: yellow;
+    }
+}