diff --git a/index.php b/index.php index 0e8c089..687ffe9 100644 --- a/index.php +++ b/index.php @@ -1,3 +1,5 @@ + + <?php print($config_data->title ?? "One Word Each"); ?> - + send_logo)) { print(""); @@ -90,37 +92,40 @@ $config_data = json_decode($raw_json_config, false); print("\n"); } ?> - - - - - -
" width="90%">

headline ?? "One Word Each Seite"); ?>

+
+ " style="width: 10%; float: left;"> +

headline ?? "One Word Each Seite"); ?>

+
- Admin -

+

+
+
-

- -

+

+ Admin +

+
+
-

+

-
-
+
+
+
- + diff --git a/owe.js b/owe.js index 92e681a..857beca 100644 --- a/owe.js +++ b/owe.js @@ -2,8 +2,6 @@ var previousTextLength; var config_data; var unread_words = 0; -document.getElementById("wordinput").focus(); - function loadSentences(alertIfNew = false) { fetch("./data/sentences.txt", {headers: {"Cache-Control": "no-cache, no-store"}}) .then((response) => { @@ -57,6 +55,18 @@ function onReloadClicked() { }, 100); } +function sendWord() { + var data = new FormData(); + data.append('submitted', encodeURI(document.getElementById("wordinput").value)); + const Http = new XMLHttpRequest(); + Http.open('POST', '.'); + Http.onreadystatechange=(e)=>{ + document.getElementById("wordinput").value = ""; + loadSentences(); + } + Http.send(data); +} + function displayNotification(word) { if (Notification.permission == 'granted') { navigator.serviceWorker.getRegistration().then(function(reg) { @@ -76,6 +86,30 @@ loadConfig(); loadSentences(); setInterval(loadSentences, 5000, true); +var input = document.getElementById("wordinput"); +input.focus(); +// Execute a function when the user releases a key on the keyboard +input.addEventListener("keyup", function(event) { + // Number 13 is the "Enter" key on the keyboard + if (event.keyCode === 13) { + // Cancel the default action, if needed + event.preventDefault(); + // Trigger the button element with a click + document.getElementById("sendbut").click(); + } +}); + +var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); + +if (!isMobile) { + archives = document.getElementsByClassName("archive_links")[0]; + sentences = document.getElementsByClassName("sentences")[0]; + scrollbox = document.getElementsByClassName("scrollbox")[0]; + archives.style.maxWidth = "20%"; + scrollbox.style.flexDirection = "row"; + sentences.style.fontSize = "x-large"; +} + if ('serviceWorker' in navigator) { navigator.serviceWorker.register('./service-worker.js') .then(function(registration) { diff --git a/style.css b/style.css index e87cce7..c8a43e6 100644 --- a/style.css +++ b/style.css @@ -4,12 +4,56 @@ body, input, button { background-color: black; color: white; font-family: "Courier New", Courier, monospace; + scrollbar-color: rgba(255,255,255,30%) rgba(100,100,100,30%); +} + +body { + margin: 0; + display: flex; + flex-direction: column; + overflow-y: auto; + width: 100vw; +} + +.header { + box-sizing: border-box; + background: rgba(0,0,0,30%); + /*max-width: 100%;*/ + overflow: none; + align-items: center; + display: flex; + height: 10vw; +} + +.sentences, .archive_links { + padding: 0px 30px 0px; + flex-shrink: 0; + min-width: 20%; } input, button { border: 2px solid white; padding: 0px 5px 0px; background: transparent; + margin: 30px; +} + +.content { + flex: 1; + display: flex; + overflow: auto; + position: absolute; + top: 10vw; + left: 0px; + bottom: 0px; +} + +.scrollbox { + padding: 30px 0px 30px; + display: flex; + flex-direction: column; + min-height: min-content; + /*max-width: 100%;*/ } a { @@ -38,6 +82,7 @@ input, .send_button { .word_input_area { border: 2px solid white; display: inline-flex; + margin: 0px 30px 0px; } table {