Tristan/OWE
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

prettyfication

Browse Source
This commit is contained in:
Tristan Schneider 2021-02-07 18:52:16 +01:00
parent 8440c10e14
commit 780745f3e8
3 changed files with 102 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
index.php
View File

@ -1,3 +1,5 @@
<!DOCTYPE html>
<?php <?php
function get_color_from_ip($ip) { function get_color_from_ip($ip) {
@ -74,7 +76,7 @@ $config_data = json_decode($raw_json_config, false);
<html> <html>
<head> <head>
<title><?php print($config_data->title ?? "One Word Each"); ?></title> <title><?php print($config_data->title ?? "One Word Each"); ?></title>
<link rel="stylesheet" href="style.css?buttonstransparent"> <link rel="stylesheet" href="style.css?<?php print(time()); ?>">
<?php <?php
if (!isset($config_data->send_logo)) { if (!isset($config_data->send_logo)) {
print("<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css' integrity='sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==' crossorigin='anonymous' />"); print("<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css' integrity='sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==' crossorigin='anonymous' />");
@ -90,37 +92,40 @@ $config_data = json_decode($raw_json_config, false);
print("\n</style>"); print("\n</style>");
} }
?> ?>
<table> <div class="header">
<tr> <img src="<?php print($config_data->logo->image_path ?? "OWE_Logo.png"); ?>" style="width: 10%; float: left;">
<td width="50%"><img src="<?php print($config_data->logo->image_path ?? "OWE_Logo.png"); ?>" width="90%"></td> <h3 style="padding: 30px;"><?php print($config_data->headline ?? "One Word Each Seite"); ?></h3>
<td><h1><?php print($config_data->headline ?? "One Word Each Seite"); ?></h1></td> </div>
</tr>
</table>
<a style="float: right;" href="admin.php">Admin</a> <div class="content">
<p> <div class="scrollbox">
<div class="archive_links">
<?php <?php
$content = file_get_contents("./data/archive-links.txt") or die("ungültiger Dateiname"); $content = file_get_contents("./data/archive-links.txt") or die("ungültiger Dateiname");
print($content); print($content);
?> ?>
</p> <br><br>
<a href="admin.php">Admin</a>
<p class="sentences"> </div>
<div class="main">
<div class="sentences">
<?php <?php
//print(file_get_contents("./data/sentences.txt")); //print(file_get_contents("./data/sentences.txt"));
?> ?>
</p> </div>
<button onclick="onReloadClicked()" id="but-reload">aktualisieren</button> <button onclick="onReloadClicked()" id="but-reload">aktualisieren</button>
<br> <br>
<form action="./#wordform" method="post" autocomplete="off" id="wordform"></form>
<div class="word_input_area"> <div class="word_input_area">
<input type="text" name="submitted" id="wordinput" form="wordform" placeholder="Nächstes Wort"> <button type="submit" form="wordform" class="send_button"> <input type="text" name="submitted" id="wordinput" placeholder="Nächstes Wort"> <button id="sendbut" class="send_button" onclick="sendWord()">
<?php <?php
print(isset($config_data->send_logo) ? ("<img src='data/".$config_data->send_logo."' width='64'>") : "<i class='far fa-paper-plane'></i>"); print(isset($config_data->send_logo) ? ("<img src='data/".$config_data->send_logo."' width='64'>") : "<i class='far fa-paper-plane'></i>");
?> ?>
</button> </button>
</div> </div>
</div>
</div>
</div>
<script src="owe.js?neu"></script> <script src="owe.js?<?php print(time()); ?>"></script>
</body> </body>
</html> </html>

38
owe.js
View File

@ -2,8 +2,6 @@ var previousTextLength;
var config_data; var config_data;
var unread_words = 0; var unread_words = 0;
document.getElementById("wordinput").focus();
function loadSentences(alertIfNew = false) { function loadSentences(alertIfNew = false) {
fetch("./data/sentences.txt", {headers: {"Cache-Control": "no-cache, no-store"}}) fetch("./data/sentences.txt", {headers: {"Cache-Control": "no-cache, no-store"}})
.then((response) => { .then((response) => {
@ -57,6 +55,18 @@ function onReloadClicked() {
}, 100); }, 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) { function displayNotification(word) {
if (Notification.permission == 'granted') { if (Notification.permission == 'granted') {
navigator.serviceWorker.getRegistration().then(function(reg) { navigator.serviceWorker.getRegistration().then(function(reg) {
@ -76,6 +86,30 @@ loadConfig();
loadSentences(); loadSentences();
setInterval(loadSentences, 5000, true); 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) { if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./service-worker.js') navigator.serviceWorker.register('./service-worker.js')
.then(function(registration) { .then(function(registration) {

45
style.css
View File

@ -4,12 +4,56 @@ body, input, button {
background-color: black; background-color: black;
color: white; color: white;
font-family: "Courier New", Courier, monospace; 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 { input, button {
border: 2px solid white; border: 2px solid white;
padding: 0px 5px 0px; padding: 0px 5px 0px;
background: transparent; 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 { a {
@ -38,6 +82,7 @@ input, .send_button {
.word_input_area { .word_input_area {
border: 2px solid white; border: 2px solid white;
display: inline-flex; display: inline-flex;
margin: 0px 30px 0px;
} }
table { table {