ranse/wordclock
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Add resources for webserver, frontplate, etc.

Browse Source
This commit is contained in:
Markus Ransberger
2023-08-22 14:10:26 +02:00
parent 9a4a8c2a7d
commit d4c7536408
25 changed files with 11983 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -9,7 +9,6 @@
# Own folders
_unused/
res/
# Prerequisites
*.d

BIN
res/frontplate/WordClock_DrillingTemplate.pdf Normal file
View File

Binary file not shown.

1828
res/frontplate/WordClock_DrillingTemplate.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 186 KiB

1828
res/frontplate/WordClock_DrillingTemplate_Overlay.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 186 KiB

1301
res/frontplate/WordClock_Front.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

1912
res/frontplate/original/frontplate_wordclock2.0_english.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

1912
res/frontplate/original/frontplate_wordclock2.0_german.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

1912
res/frontplate/original/frontplate_wordclock2.0_italian.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

80
res/webserver/fs.html Normal file
View File

@@ -0,0 +1,80 @@
<!DOCTYPE HTML> <!-- For more information visit: https://fipsok.de -->
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Filesystem Manager</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
list(JSON.parse(localStorage.getItem('sortBy')));
btn.addEventListener('click', () => {
if (!confirm(`Wirklich formatieren? Alle Daten gehen verloren.\nDu musst anschließend fs.html wieder laden.`)) event.preventDefault();
});
});
function list(to){
let myList = document.querySelector('main'), noted = '';
fetch(`?sort=${to}`).then( (response) => {
return response.json();
}).then((json) => {
myList.innerHTML = '<nav><input type="radio" id="/" name="group" checked="checked"><label for="/"> &#128193;</label><span id="cr">+&#128193;</nav></span><span id="si"></span>';
document.querySelector('form').setAttribute('action', '/upload?f=');
for (var i = 0; i < json.length - 1; i++) {
let dir = '', f = json[i].folder, n = json[i].name;
if (f != noted) {
noted = f;
dir = `<nav><input type="radio" id="${f}" name="group"><label for="${f}"></label> &#128193; ${f} <a href="?delete=/${f}">&#x1f5d1;&#xfe0f;</a></nav>`;
}
if (n != '') dir += `<li><a href="${f}/${n}">${n}</a><small> ${json[i].size}</small><a href="${f}/${n}"download="${n}"> Download</a> or<a href="?delete=${f}/${n}"> Delete</a>`;
myList.insertAdjacentHTML('beforeend', dir);
}
myList.insertAdjacentHTML('beforeend', `<li><b id="so">${to ? '&#9660;' : '&#9650;'} LittleFS</b> belegt ${json[i].usedBytes.replace(".00", "")} von ${json[i].totalBytes.replace(".00", "")}`);
var free = json[i].freeBytes;
cr.addEventListener('click', () => {
document.getElementById('no').classList.toggle('no');
});
so.addEventListener('click', () => {
list(to=++to%2);
localStorage.setItem('sortBy', JSON.stringify(to));
});
document.addEventListener('change', (e) => {
if (e.target.id == 'fs') {
for (var bytes = 0, i = 0; i < event.target.files.length; i++) bytes += event.target.files[i].size;
for (var output = `${bytes} Byte`, i = 0, circa = bytes / 1024; circa > 1; circa /= 1024) output = circa.toFixed(2) + [' KB', ' MB', ' GB'][i++];
if (bytes > free) {
si.innerHTML = `<li><b> ${output}</b><strong> Ungenügend Speicher frei</strong></li>`;
up.setAttribute('disabled', 'disabled');
}
else {
si.innerHTML = `<li><b>Dateigröße:</b> ${output}</li>`;
up.removeAttribute('disabled');
}
}
document.querySelectorAll(`input[type=radio]`).forEach(el => { if (el.checked) document.querySelector('form').setAttribute('action', '/upload?f=' + el.id)});
});
document.querySelectorAll('[href^="?delete=/"]').forEach(node => {
node.addEventListener('click', () => {
if (!confirm('Sicher!')) event.preventDefault();
});
});
});
}
</script>
</head>
<body>
<h2>ESP8266 Filesystem Manager</h2>
<form method="post" enctype="multipart/form-data">
<input id="fs" type="file" name="up[]" multiple>
<button id="up" disabled>Upload</button>
</form>
<form id="no" class="no" method="POST">
<input name="new" placeholder="Ordner Name" pattern="[^\x22/%&\\:;]{1,31}" title="Zeichen &#8220; % & / : ; \ sind nicht erlaubt." required="">
<button>Create</button>
</form>
<main></main>
<form action="/format" method="POST">
<button id="btn">Format LittleFS</button>
</form>
</body>
</html>

273
res/webserver/icons/all_icons.svg Normal file
View File

@@ -0,0 +1,273 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="161.88095mm"
height="106.73212mm"
viewBox="0 0 161.88095 106.73212"
version="1.1"
id="svg8"
inkscape:version="1.0.2-2 (e86c870879, 2021-01-15)"
sodipodi:docname="icons.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4"
inkscape:cx="317.90861"
inkscape:cy="275.63752"
inkscape:document-units="mm"
inkscape:current-layer="g970"
inkscape:document-rotation="0"
showgrid="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-width="3396"
inkscape:window-height="1377"
inkscape:window-x="1912"
inkscape:window-y="332"
inkscape:window-maximized="1"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="background"
sodipodi:insensitive="true"
style="display:inline"
transform="translate(-3.7261978,-3.159226)">
<rect
style="opacity:0.998;fill:#1b2131;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:37.7953;stroke-opacity:1"
id="rect1277"
width="265.1503"
height="146.27678"
x="-30.238094"
y="-2.0788691" />
</g>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline"
transform="translate(-3.7261978,-3.159226)">
<g
id="g970"
transform="translate(-41.231887,-0.1012095)"
style="stroke:#ffffff;stroke-opacity:1">
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 168.1994,20.178841 h 14.21205 v 17.10525 h 9.43341"
id="path958"
sodipodi:nodetypes="cccc" />
<ellipse
style="opacity:0.998;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.13808;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:37.7953;stroke-opacity:1"
id="path966"
cx="191.5715"
cy="37.26976"
rx="2.4327564"
ry="1.8899693" />
</g>
<path
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 9.117282,10.213341 H 19.189006"
id="path1018"
sodipodi:nodetypes="cc" />
<path
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 35.942133,10.213341 h 8.68756"
id="path1020"
sodipodi:nodetypes="cc" />
<path
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 15.075495,18.899601 h 6.352876"
id="path1022"
sodipodi:nodetypes="cc" />
<path
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 27.668243,29.99128 h 10.76086"
id="path1024"
sodipodi:nodetypes="cc" />
<path
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 9.216526,45.35928 H 22.413267"
id="path1026"
sodipodi:nodetypes="cc" />
<path
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 40.155233,45.35928 h 8.26011"
id="path1028"
sodipodi:nodetypes="cc" />
<text
xml:space="preserve"
style="font-size:22.2661px;line-height:125%;font-family:Delicious;-inkscape-font-specification:'Delicious, Normal';letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.392;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.935657"
x="73.826271"
y="47.316673"
id="text843-1-6"><tspan
sodipodi:role="line"
x="73.826271"
y="47.316673"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:22.2661px;font-family:'Century Gothic';-inkscape-font-specification:'Century Gothic, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.392;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.935657"
id="tspan845-4-2">34</tspan></text>
<text
xml:space="preserve"
style="font-size:22.2661px;line-height:125%;font-family:Delicious;-inkscape-font-specification:'Delicious, Normal';letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.392;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.935657"
x="72.288368"
y="25.09005"
id="text843-1-1-4"><tspan
sodipodi:role="line"
x="72.288368"
y="25.09005"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:22.2661px;font-family:'Century Gothic';-inkscape-font-specification:'Century Gothic, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.392;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.935657"
id="tspan845-4-1-8">12</tspan></text>
<g
id="g976-1"
transform="translate(-97.518244,58.179689)"
style="stroke:#ffffff;stroke-opacity:1">
<rect
style="opacity:0.998;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:37.7953;stroke-opacity:1"
id="rect897-4"
width="48"
height="48"
x="159.50783"
y="2.4869769"
ry="6.8035712" />
</g>
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 68.266491,89.99753 v 9.99987 h 10.02362 V 84.997404 h -5.01793 l -0.0236,4.976496 z"
id="path1114"
sodipodi:nodetypes="ccccccc" />
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 87.907981,69.696525 v 4.999999 h 14.999999 v -4.999999 z"
id="path1116"
sodipodi:nodetypes="ccccc" />
<rect
style="opacity:0.998;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:37.7953;stroke-opacity:1"
id="rect1122"
width="5"
height="5"
x="73.290115"
y="69.696526" />
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 102.90757,89.98617 4.1e-4,-4.988563 -10.023619,-3.92e-4 -5.6e-4,14.999995 5.01793,1.9e-4 0.0238,-9.98781 z"
id="path1114-0"
sodipodi:nodetypes="ccccccc" />
<g
id="g976-1-8"
transform="translate(-43.503678,1.7696772)"
style="display:inline;stroke:#ffffff;stroke-opacity:1">
<rect
style="opacity:0.998;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:37.7953;stroke-opacity:1"
id="rect897-4-3"
width="48"
height="48"
x="159.50783"
y="2.4869769"
ry="6.8035712" />
</g>
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 10.069697,68.165892 V 79.221694"
id="path1202"
sodipodi:nodetypes="cc" />
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 47.489339,90.74997 v 11.0558"
id="path1204"
sodipodi:nodetypes="cc" />
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.66303;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 20.993455,77.647383 h 0.522676"
id="path1206" />
<path
sodipodi:type="spiral"
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path1274"
sodipodi:cx="138.1503"
sodipodi:cy="84.477684"
sodipodi:expansion="1"
sodipodi:revolution="1.72963"
sodipodi:radius="16.567476"
sodipodi:argument="-9.8626442"
sodipodi:t0="0"
d="m 138.1503,84.477684 c -1.30485,0.610898 -1.46724,-1.457511 -1.01535,-2.168741 1.22459,-1.927387 4.03131,-1.29185 5.35283,0.138034 2.3639,2.557727 1.28985,6.586948 -1.29142,8.536929 -3.78811,2.861676 -9.18201,1.300939 -11.72102,-2.444809 -3.38411,-4.992493 -1.31841,-11.791687 3.59819,-14.905116 6.18704,-3.917932 14.40849,-1.339322 18.08921,4.751583 4.02746,6.664688 1.9218,15.40351 -4.12999,20.077234" />
<g
id="g976-1-8-7"
transform="translate(-154.35033,58.404362)"
style="display:inline;stroke:#ffffff;stroke-opacity:1">
<rect
style="opacity:0.998;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:37.7953;stroke-opacity:1"
id="rect897-4-3-0"
width="48"
height="48"
x="159.50783"
y="2.4869769"
ry="6.8035712" />
</g>
<g
id="g976-1-8-5"
transform="translate(-42.900683,57.801709)"
style="display:inline;stroke:#ffffff;stroke-opacity:1">
<rect
style="opacity:0.998;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:37.7953;stroke-opacity:1"
id="rect897-4-3-7"
width="48"
height="48"
x="159.50783"
y="2.4869769"
ry="6.8035712" />
</g>
<g
id="g976-1-8-78"
transform="translate(-154.78163,1.8612363)"
style="display:inline;stroke:#ffffff;stroke-opacity:1">
<rect
style="opacity:0.998;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:37.7953;stroke-opacity:1"
id="rect897-4-3-1"
width="48"
height="48"
x="159.50783"
y="2.4869769"
ry="6.8035712" />
</g>
<g
id="g976-1-8-56"
transform="translate(-98.463184,1.6722491)"
style="display:inline;stroke:#ffffff;stroke-opacity:1">
<rect
style="opacity:0.998;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:37.7953;stroke-opacity:1"
id="rect897-4-3-5"
width="48"
height="48"
x="159.50783"
y="2.4869769"
ry="6.8035712" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

15
res/webserver/icons/arrow_left.svg Normal file
View File

@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="30mm" height="50mm" version="1.1" viewBox="0 0 30 50" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g transform="translate(-67.53 -44.941)">
<path d="m94.03 48.441-23 21.466 23 21.534" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.9999"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 698 B

15
res/webserver/icons/arrow_right.svg Normal file
View File

@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="30mm" height="50mm" version="1.1" viewBox="0 0 30 50" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g transform="translate(-67.53 -44.941)">
<path d="m71.03 48.441 23 21.466-23 21.534" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.9999"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 698 B

25
res/webserver/icons/clock.svg Normal file
View File

@@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="50mm" height="50mm" version="1.1" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g transform="translate(-3.7262,-3.3482)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="2">
<path d="m9.1173 10.213h10.072"/>
<path d="m35.942 10.213h8.6876"/>
<path d="m15.075 18.9h6.3529"/>
<path d="m27.668 29.991h10.761"/>
<path d="m9.2165 45.359h13.197"/>
<path d="m40.155 45.359h8.2601"/>
</g>
<g transform="translate(-3.7262,-3.3482)" stroke="#fff">
<g transform="translate(-154.78,1.8612)">
<rect x="159.51" y="2.487" width="48" height="48" ry="6.8036" fill="none" opacity=".998" stroke="#fff" stroke-dashoffset="37.795" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

20
res/webserver/icons/diclock.svg Normal file
View File

@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="50mm" height="50mm" version="1.1" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g transform="translate(-60.045 -3.1592)" display="none">
<rect x="-30.238" y="-2.0789" width="265.15" height="146.28" fill="#1b2131" fill-rule="evenodd" opacity=".998"/>
</g>
<text x="13.781271" y="44.157475" fill="#ffffff" font-family="Delicious" font-size="22.266px" letter-spacing="0px" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".93566" stroke-width="1.392" word-spacing="0px" style="line-height:125%" xml:space="preserve"><tspan x="13.781271" y="44.157475" fill="#ffffff" font-family="'Century Gothic'" font-size="22.266px" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".93566" stroke-width="1.392" style="font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal">34</tspan></text>
<text x="12.243368" y="21.930849" fill="#ffffff" font-family="Delicious" font-size="22.266px" letter-spacing="0px" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".93566" stroke-width="1.392" word-spacing="0px" style="line-height:125%" xml:space="preserve"><tspan x="12.243368" y="21.930849" fill="#ffffff" font-family="'Century Gothic'" font-size="22.266px" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".93566" stroke-width="1.392" style="font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal">12</tspan></text>
<g transform="translate(-158.51 -1.487)" stroke="#fff">
<rect x="159.51" y="2.487" width="48" height="48" ry="6.8036" fill="none" opacity=".998" stroke="#fff" stroke-dashoffset="37.795" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

16
res/webserver/icons/pause.svg Normal file
View File

@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="35.033mm" height="40mm" version="1.1" viewBox="0 0 35.033 40" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g transform="translate(-43.597 -137.15)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="10">
<path d="m48.597 142.15v30"/>
<path d="m73.63 142.15v30"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 694 B

23
res/webserver/icons/pingpong.svg Normal file
View File

@@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="50mm" height="50mm" version="1.1" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g transform="translate(-4.1575 -59.891)" display="none">
<rect x="-30.238" y="-2.0789" width="265.15" height="146.28" fill="#1b2131" fill-rule="evenodd" opacity=".998"/>
</g>
<g fill="none" stroke="#fff" stroke-linecap="round">
<path d="m5.9125 8.275v11.056" stroke-width="2"/>
<path d="m43.332 30.859v11.056" stroke-width="2"/>
<path d="m16.836 17.756h0.52268" stroke-width="1.663"/>
</g>
<g transform="translate(-158.51 -1.487)" stroke="#fff">
<rect x="159.51" y="2.487" width="48" height="48" ry="6.8036" fill="none" opacity=".998" stroke="#fff" stroke-dashoffset="37.795" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

15
res/webserver/icons/play.svg Normal file
View File

@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="30mm" height="30mm" version="1.1" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g transform="translate(-106.67 -126.02)">
<path d="m109.4 128.75 24.538 12.25-24.538 12.289z" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="5.4618"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 715 B

20
res/webserver/icons/playpause.svg Normal file
View File

@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="59.063mm" height="47.621mm" version="1.1" viewBox="0 0 59.063 47.621" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g transform="translate(-65.623 -25.716)" stroke="#000" stroke-linecap="round">
<path d="m68.124 37.713 20.584 12.25-20.584 12.289z" fill-rule="evenodd" stroke-linejoin="round" stroke-width="5.0024"/>
<g transform="matrix(.60155 0 0 .76867 77.988 -70.814)" fill="none" stroke-width="8">
<path d="m48.597 142.15v30"/>
<path d="m73.63 142.15v30"/>
</g>
<path d="m89.614 26.871 13.506 45.311" fill="none" stroke-width="2.31"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 967 B

18
res/webserver/icons/refresh.svg Normal file
View File

@@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="129.55mm" height="129.18mm" version="1.1" viewBox="0 0 129.55 129.18" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g transform="translate(-45.971 -35.572)">
<path d="m89.202 99.03c-0.0011 0.0044-0.0042 8e-3 -0.0082 0.01003" fill="none" stroke="#000" stroke-width=".26458px"/>
<g transform="matrix(.26458 0 0 .26458 45.971 35.388)">
<path d="m460.66 132.91c-58.7-122.1-212.2-166.5-331.8-104.1-9.4 5.2-13.5 16.6-8.3 27 5.2 9.4 16.6 13.5 27 8.3 99.9-52 227.4-14.9 276.7 86.3 65.4 134.3-19 236.7-87.4 274.6-93.1 51.7-211.2 17.4-267.6-70.7l69.3 14.5c10.4 2.1 21.8-4.2 23.9-15.6 2.1-10.4-4.2-21.8-15.6-23.9l-122.8-25c-20.6-2-25 16.6-23.9 22.9l15.6 123.8c1 10.4 9.4 17.7 19.8 17.7 12.8 0 20.8-12.5 19.8-23.9l-6-50.5c57.4 70.8 170.3 131.2 307.4 68.2 58.1-30 191.5-147.7 103.9-329.6z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

29
res/webserver/icons/settings.svg Normal file
View File

@@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="54.044mm" height="45.652mm" version="1.1" viewBox="0 0 54.044 45.652" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g transform="translate(-47.401 -39.475)" fill="none" stroke="#fff" stroke-linecap="round">
<g>
<path d="m67.742 44.491h32.687" stroke-width="2.0325"/>
<path d="m48.401 62.298h29.287" stroke-width="2"/>
<path d="m48.401 80.127h13.985" stroke-width="2"/>
</g>
<g stroke-dashoffset="37.795" stroke-linejoin="round" stroke-width="1.4823">
<ellipse cx="63.092" cy="44.475" rx="4.2589" ry="4.2589" opacity=".998"/>
<ellipse cx="82.344" cy="62.301" rx="4.2589" ry="4.2589" opacity=".998"/>
<ellipse cx="67.11" cy="80.127" rx="4.2589" ry="4.2589" opacity=".998"/>
</g>
<g>
<path d="m48.401 44.468h9.9687" stroke-width="1.9867"/>
<path d="m87.044 62.309h13.384" stroke-width="2"/>
<path d="m71.877 80.127h28.552" stroke-width="2"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

22
res/webserver/icons/snake.svg Normal file
View File

@@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="50mm" height="50mm" version="1.1" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g transform="translate(-115 -3.2567)" display="none">
<rect x="-30.238" y="-2.0789" width="265.15" height="146.28" fill="#1b2131" fill-rule="evenodd" opacity=".998"/>
</g>
<g transform="translate(-156.23 -3.3579)">
<path d="m168.2 20.179h14.212v17.105h9.4334" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="2"/>
<ellipse cx="191.57" cy="37.27" rx="2.4328" ry="1.89" fill="#fff" fill-rule="evenodd" opacity=".998"/>
</g>
<g transform="translate(-158.5 -1.487)" stroke="#fff">
<rect x="159.51" y="2.487" width="48" height="48" ry="6.8036" fill="none" opacity=".998" stroke="#fff" stroke-dashoffset="37.795" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

19
res/webserver/icons/spiral.svg Normal file
View File

@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="50mm" height="50mm" version="1.1" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g transform="translate(-115.61 -59.289)" display="none">
<rect x="-30.238" y="-2.0789" width="265.15" height="146.28" fill="#1b2131" fill-rule="evenodd" opacity=".998"/>
</g>
<path d="m22.54 25.189c-1.3048 0.6109-1.4672-1.4575-1.0154-2.1687 1.2246-1.9274 4.0313-1.2918 5.3528 0.13803 2.3639 2.5577 1.2898 6.5869-1.2914 8.5369-3.7881 2.8617-9.182 1.3009-11.721-2.4448-3.3841-4.9925-1.3184-11.792 3.5982-14.905 6.187-3.9179 14.408-1.3393 18.089 4.7516 4.0275 6.6647 1.9218 15.404-4.13 20.077" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="2"/>
<g transform="translate(-158.51 -1.487)" stroke="#fff">
<rect x="159.51" y="2.487" width="48" height="48" ry="6.8036" fill="none" opacity=".998" stroke="#fff" stroke-dashoffset="37.795" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

24
res/webserver/icons/tetris.svg Normal file
View File

@@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="50mm" height="50mm" version="1.1" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g transform="translate(-60.99 -59.667)" display="none">
<rect x="-30.238" y="-2.0789" width="265.15" height="146.28" fill="#1b2131" fill-rule="evenodd" opacity=".998"/>
</g>
<g transform="translate(-158.51 -1.487)" stroke="#fff">
<rect x="159.51" y="2.487" width="48" height="48" ry="6.8036" fill="none" opacity=".998" stroke="#fff" stroke-dashoffset="37.795" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
<g transform="translate(-60.99,-59.667)" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="2">
<path d="m68.266 89.998v9.9999h10.024v-15h-5.0179l-0.0236 4.9765z"/>
<path d="m87.908 69.697v5h15v-5z"/>
<rect x="73.29" y="69.697" width="5" height="5" opacity=".998" stroke-dashoffset="37.795" stroke-linecap="round"/>
<path d="m102.91 89.986 4.1e-4 -4.9886-10.024-3.92e-4 -5.6e-4 15 5.0179 1.9e-4 0.0238-9.9878z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

565
res/webserver/index.html Normal file
View File

@@ -0,0 +1,565 @@
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
background-color: #222222;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
color: white;
background: linear-gradient(90deg, #ffa9a9, #64a1e0, #ffa9a9, #64a1e0);
background-size: 400% 400%;
-webkit-animation: gradientBG 14s ease infinite forwards;
animation: gradientBG 14s ease infinite forwards;
font-weight: lighter;
}
/** Animated background: Code By Webdevtrick ( https://webdevtrick.com ) **/
@-webkit-keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
h1 {
font-weight: lighter;
letter-spacing: .125rem;
text-transform: uppercase;
color: white;
text-align: center;
font-size: x-large;
}
.buttonClass {
font-size:15px;
font-family:Arial;
width:70px;
height:70px;
color:#fff;
font-weight:200;
border-top-left-radius:14px;
border-top-right-radius:14px;
border-bottom-left-radius:14px;
border-bottom-right-radius:14px;
display: flex;
align-items: center;
justify-content: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
-o-user-select:none;
}
.buttonClass:hover {
opacity: 0.7;
}
.grid-container {
font-size:15px;
font-family:Arial;
display: grid;
grid-column-gap: 5px;
grid-row-gap: 5px;
grid-template-columns: auto auto auto;
padding: 10px;
}
.grid-item {
text-align: center;
display: inline-block;
text-align: center;
}
.dot {
border-radius: 20%;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
.dot-mode {
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
.active{
border: 2px solid lightgray;
}
.mode-item{
background: rgba(59, 57, 57, 0.308);
}
.mode-item:hover{
opacity: 0.7;
}
.verticalline{
border-bottom: 1px solid rgba(255, 255, 255, 0.356);
text-align: center;
color: white;
}
input[type="checkbox"]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
.toggle{
height: 32px;
width: 52px;
border-radius: 16px;
display: inline-block;
position: relative;
margin: 0;
border: 2px solid #474755ab;
background: linear-gradient(180deg, #2d2f39ab 0%, #1f2027ab 100%);
transition: all .2s ease;
}
.toggle:after{
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 24px;
height: 24px;
border-radius: 50%;
background: white;
box-shadow: 0 1px 2px rgba(44,44,44,.2);
transition: all .2s cubic-bezier(.5,.1,.75,1.35);
}
.toggle:checked{
border-color: lightgray;
}
.toggle:checked::after{
transform: translatex(20px);
}
label {
text-align: right;
clear: both;
float:left;
margin-right:15px;
vertical-align: middle;
}
.checkbox-container{
display:flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 10px;
}
.headline{
text-align: center;
font-weight: 200;
font-size: larger;
margin-bottom: 5px;
}
.hidden{
display: none;
}
.control-container{
display: flex;
flex-direction: row;
justify-content: center;
}
.wide-button-bottom{
width: 80%;
height: 40px;
margin: 10px;
padding: 5px;
background-color: rgba(147, 147, 158, 0.4);
}
.arrow-button{
width: 70px;
height: 70px;
background-color: rgba(147, 147, 158, 0.4);
}
.tetris-button-bottom{
width: 105px;
height: 40px;
margin: 5px;
background-color: rgba(147, 147, 158, 0.4);
}
img{
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.setting-button{
position: absolute;
padding: 10px;
}
.settings-container{
height: 0px;
transition: height 1s;
overflow: hidden;
}
.show{
height: 150px;
transition: height 1s;
}
.number-container{
display:flex;
flex-direction: row;
justify-content: left;
align-items: center;
margin: 10px;
}
.save-button{
height: 30px;
margin: 5px;
background-color: rgba(147, 147, 158, 0.4);
}
</style>
<title>WORDCLOCK 2.0</title>
<link rel="icon" type="image/svg" href="./icons/clock.svg">
</head>
<body oncontextmenu="return false"> <!-- prevent opening of contextmenu -->
<div class="setting-button" onclick="toggleSettings()"><img src = "./icons/settings.svg" style="height:20px"/></div>
<h1 id="headline">WORDCLOCK 2.0</h1>
<div id="settings-container" class="settings-container">
<div class="number-container">
<label for="brightness">Brightness:</label>
<input type="range" id="brightness" name="volume" min="10" max="255">
</div>
<div class="number-container">
<label for="nm_start" style="align-self: flex-start">Nightmode start time: </label>
<input type="time" id="nm_start" name="nm_start" min="00:00" max="23:59">
</div>
<div class="number-container">
<label for="nm_end" style="align-self: flex-start">Nightmode end time: </label>
<input type="time" id="nm_end" name="nm_end" min="00:00" max="23:59">
</div>
<div class="buttonClass save-button" onclick="saveSettings()">SAVE</div>
</div>
<div class="verticalline">
</div>
<div class="headline">
MODE
</div>
<div class="grid-container">
<div class="grid-item mode-item"><span class="dot-mode" onclick="modechange(this, 0)"><a onclick="sendCommand('./cmd?mode=clock')" class="buttonClass" style="width: 100%;"><img src = "./icons/clock.svg" style="height:50px"/></a></span></div>
<div class="grid-item mode-item"><span class="dot-mode" onclick="modechange(this, 1)"><a onclick="sendCommand('./cmd?mode=diclock')" class="buttonClass" style="width: 100%;"><img src = "./icons/diclock.svg" style="height:50px"/></a></span></div>
<div class="grid-item mode-item"><span class="dot-mode" onclick="modechange(this, 2)"><a onclick="sendCommand('./cmd?mode=spiral')" class="buttonClass" style="width: 100%;"><img src = "./icons/spiral.svg" style="height:50px"/></a></span></div>
<div class="grid-item mode-item"><span class="dot-mode" onclick="modechange(this, 3)"><a onclick="sendCommand('./cmd?mode=tetris')" class="buttonClass" style="width: 100%;"><img src = "./icons/tetris.svg" style="height:50px"/></a></span></div>
<div class="grid-item mode-item"><span class="dot-mode" onclick="modechange(this, 4)"><a onclick="sendCommand('./cmd?mode=snake')" class="buttonClass" style="width: 100%;"><img src = "./icons/snake.svg" style="height:50px"/></a></span></div>
<div class="grid-item mode-item"><span class="dot-mode" onclick="modechange(this, 5)"><a onclick="sendCommand('./cmd?mode=pingpong')" class="buttonClass" style="width: 100%;"><img src = "./icons/pingpong.svg" style="height:50px"/></a></span></div>
</div>
<div class="checkbox-container">
<label for="Nightmode" style="align-self: flex-start">Nightmode</label>
<div>
<input name= "Nightmode" id="Nightmode" type="checkbox" class="toggle">
</div>
</div>
<div class="checkbox-container">
<label for="AutoChange" style="align-self: flex-start">Automatic mode change</label>
<div>
<input name= "AutoChange" id="AutoChange" type="checkbox" class="toggle">
</div>
</div>
<div class="main-container hidden" id="colorcontainer">
<div class="verticalline">
</div>
<div class="headline">
COLOR
</div>
<div class="control-container">
<div class="grid-container">
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=255-0-0')" class="buttonClass" style="background:rgb(255,0,0);"></a></span></div>
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=255-0-128')" class="buttonClass" style="background:rgb(255,0,128);"></a></span></div>
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=255-0-255')" class="buttonClass" style="background:rgb(255,0,255);"></a></span></div>
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=128-0-255')" class="buttonClass" style="background:rgb(128,0,255);"></a></span></div>
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=0-0-255')" class="buttonClass" style="background:rgb(0,0,255);"></a></span></div>
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=0-128-255')" class="buttonClass" style="background:rgb(0,128,255);"></a></span></div>
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=255-255-255')" class="buttonClass" style="background:rgb(255,255,255);"></a></span></div>
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=0-255-128')" class="buttonClass" style="background:rgb(0,255,128);"></a></span></div>
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=0-255-0')" class="buttonClass" style="background:rgb(0,255,0);"></a></span></div>
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=128-255-0')" class="buttonClass" style="background:rgb(128,255,0);"></a></span></div>
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=200-200-0')" class="buttonClass" style="background:rgb(200,200,0);"></a></span></div>
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=255-128-0')" class="buttonClass" style="background:rgb(255,128,0);"></a></span></div>
</div>
</div>
</div>
<div class="main-container hidden" id="snakecontainer">
<div class="verticalline">
</div>
<div class="headline">
SNAKE
</div>
<div class="control-container">
<div class="grid-container">
<div class="grid-item" style="grid-column: 2; grid-row: 1;">
<div class="buttonClass arrow-button" onclick="sendCommand('./cmd?snake=up')" unselectable="on"><img src = "./icons/arrow_left.svg" style="height:30px; transform:rotate(90deg);"/></div>
</div>
<div class="grid-item" style="grid-column: 1; grid-row: 2;">
<div class="buttonClass arrow-button" onclick="sendCommand('./cmd?snake=left')" unselectable="on"><img src = "./icons/arrow_left.svg" style="height:30px;"/></div>
</div>
<div class="grid-item" style="grid-column: 2; grid-row: 2;">
<div class="buttonClass arrow-button" onclick="sendCommand('./cmd?snake=down')" unselectable="on"><img src = "./icons/arrow_left.svg" style="height:30px; transform:rotate(-90deg);"/></div>
</div>
<div class="grid-item" style="grid-column: 3; grid-row: 2;">
<div class="buttonClass arrow-button" onclick="sendCommand('./cmd?snake=right')" unselectable="on"><img src = "./icons/arrow_right.svg" style="height:30px;"/></div>
</div>
</div>
</div>
<div class="control-container">
<div class="buttonClass wide-button-bottom" onclick="sendCommand('./cmd?snake=new')" unselectable="on"><img src = "./icons/refresh.svg" style="height:30px"/></div>
</div>
</div>
<div class="main-container hidden" id="tetriscontainer">
<div class="verticalline">
</div>
<div class="headline">
TETRIS
</div>
<div class="control-container">
<div class="grid-container">
<div class="grid-item" style="grid-column: 2; grid-row: 1;">
<div class="buttonClass arrow-button" onclick="sendCommand('./cmd?tetris=up')" unselectable="on"><img src = "./icons/arrow_left.svg" style="height:30px; transform:rotate(90deg);"/></div>
</div>
<div class="grid-item" style="grid-column: 1; grid-row: 2;">
<div class="buttonClass arrow-button" onclick="sendCommand('./cmd?tetris=left')" unselectable="on"><img src = "./icons/arrow_left.svg" style="height:30px;"/></div>
</div>
<div class="grid-item" style="grid-column: 2; grid-row: 2;">
<div class="buttonClass arrow-button" onclick="sendCommand('./cmd?tetris=down')" unselectable="on"><img src = "./icons/arrow_left.svg" style="height:30px; transform:rotate(-90deg);"/></div>
</div>
<div class="grid-item" style="grid-column: 3; grid-row: 2;">
<div class="buttonClass arrow-button" onclick="sendCommand('./cmd?tetris=right')" unselectable="on"><img src = "./icons/arrow_right.svg" style="height:30px;"/></div>
</div>
</div>
</div>
<div class="control-container">
<div class="buttonClass tetris-button-bottom" onclick="sendCommand('./cmd?tetris=play')" unselectable="on"><img src = "./icons/refresh.svg" style="height:20px"/></div>
<div class="buttonClass tetris-button-bottom" onclick="sendCommand('./cmd?tetris=pause')" unselectable="on"><img src = "./icons/playpause.svg" style="height:20px"/></div>
</div>
</div>
<div class="main-container hidden" id="pongcontainer">
<div class="verticalline">
</div>
<div class="headline">
PONG
</div>
<div class="control-container">
<div class="grid-container">
<div class="grid-item" style="grid-column: 1; grid-row: 1;">
<div class="buttonClass arrow-button" style="width: 140px" onclick="sendCommand('./cmd?pong=up')" unselectable="on"><img src = "./icons/arrow_left.svg" style="height:30px; transform:rotate(90deg);"/></div>
</div>
<div class="grid-item" style="grid-column: 1; grid-row: 2;">
<div class="buttonClass arrow-button" style="width: 140px" onclick="sendCommand('./cmd?pong=down')" unselectable="on"><img src = "./icons/arrow_left.svg" style="height:30px; transform:rotate(-90deg);"/></div>
</div>
</div>
</div>
<div class="control-container">
<div class="buttonClass wide-button-bottom" onclick="sendCommand('./cmd?pong=new')" unselectable="on"><img src = "./icons/refresh.svg" style="height:30px"/></div>
</div>
</div>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "./data?key=mode";
var myVar = null;
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
myVar = JSON.parse(this.responseText);
// set mode button state
var state = myVar.modeid;
var modebuttons = document.getElementsByClassName("dot-mode");
for (const element of modebuttons){
element.classList.remove("active");
}
modebuttons[state].classList.add("active");
// set checkbox states
var ckb_nightmode = document.querySelector('input[id="Nightmode"]');
if(myVar.nightMode == "1") {
console.log("nightMode == 1");
ckb_nightmode.checked = true;
}
else {
console.log("nightMode == 0");
ckb_nightmode.checked = false;
}
ckb_nightmode.addEventListener('change', () => {
if(ckb_nightmode.checked) {
sendCommand("./cmd?nightmode=1");
} else {
sendCommand("./cmd?nightmode=0");
}
});
var ckb_stateautochange = document.querySelector('input[id="AutoChange"]');
if(myVar.stateAutoChange == "1") {
console.log("stateAutoChange == 1");
ckb_stateautochange.checked = true;
}
else {
console.log("stateAutoChange == 0");
ckb_stateautochange.checked = false;
}
ckb_stateautochange.addEventListener('change', () => {
if(ckb_stateautochange.checked) {
sendCommand("./cmd?stateautochange=1");
} else {
sendCommand("./cmd?stateautochange=0");
}
});
document.getElementById("nm_start").value = myVar.nightModeStart.replace("-", ":");
document.getElementById("nm_end").value = myVar.nightModeEnd.replace("-", ":");
document.getElementById("brightness").value = parseInt(myVar.brightness);
updateDisplay(parseInt(myVar.modeid));
console.log(myVar);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function modechange(element, value){
console.log(element);
var modebuttons = document.getElementsByClassName("dot-mode");
for (const element of modebuttons){
element.classList.remove("active");
}
element.classList.add("active");
updateDisplay(value);
}
function updateDisplay(modeid){
var maincontainer = document.getElementsByClassName("main-container");
for (const element of maincontainer){
element.classList.add("hidden");
}
if(myVar != null && myVar.stateAutoChange == "0"){
switch(modeid){
case 0: // clock
document.getElementById("colorcontainer").classList.remove("hidden");
break;
case 1: // diclock
document.getElementById("colorcontainer").classList.remove("hidden");
break;
case 2: // spiral
break;
case 3: // tetris
document.getElementById("tetriscontainer").classList.remove("hidden");
break;
case 4: // snake
document.getElementById("snakecontainer").classList.remove("hidden");
break;
case 5: // pingping
document.getElementById("pongcontainer").classList.remove("hidden");
break;
}
}
}
function sendCommand(command){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", command, true);
xmlhttp.send();
}
function saveSettings(){
var nmStart = document.getElementById("nm_start");
var nmEnd = document.getElementById("nm_end");
var brightnessElmt = document.getElementById("brightness");
var cmdstr = "./cmd?setting=";
cmdstr += nmStart.value.replace(":", "-");
cmdstr += "-";
cmdstr += nmEnd.value.replace(":", "-");
cmdstr += "-";
cmdstr += brightnessElmt.value;
console.log(cmdstr);
sendCommand(cmdstr);
toggleSettings();
}
function toggleSettings(){
var container = document.getElementById("settings-container");
if(container.classList.contains("show")){
container.classList.remove("show");
}
else {
container.classList.add("show");
}
}
</script>
</body>
</html>

111
res/webserver/style.css Normal file
View File

@@ -0,0 +1,111 @@
/* For more information visit:https://fipsok.de */
body {
font-family: sans-serif;
background-color: #87cefa;
display: flex;
flex-flow: column;
align-items: center;
}
h1,h2 {
color: #e1e1e1;
text-shadow: 2px 2px 2px black;
}
li {
background-color: #feb1e2;
list-style-type: none;
margin-bottom: 10px;
padding: 2px 5px 1px 0;
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
li a:first-child, li b {
background-color: #8f05a5;
font-weight: bold;
color: white;
text-decoration:none;
padding: 2px 5px;
text-shadow: 2px 2px 1px black;
cursor:pointer;
}
li strong {
color: red;
}
input {
height:35px;
font-size:14px;
padding-left: .3em;
}
label + a {
text-decoration: none;
}
h1 + main {
display: flex;
}
aside {
display: flex;
flex-direction: column;
padding: 0.2em;
}
button {
height:40px;
width:130px;
font-size:16px;
margin-top: 1em;
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
div button {
background-color: #7bff97;
}
nav {
display: flex;
align-items: baseline;
justify-content: space-between;
}
#left {
align-items:flex-end;
text-shadow: 0.5px 0.5px 1px #757474;
}
#cr {
font-weight: bold;
cursor:pointer;
font-size: 1.5em;
}
#up {
width: auto;
}
.note {
background-color: #fecdee;
padding: 0.5em;
margin-top: 1em;
text-align: center;
max-width: 320px;
border-radius: 0.5em;
}
.no {
display: none;
}
form [title] {
background-color: skyblue;
font-size: 16px;
width: 125px;
}
form:nth-of-type(2) {
margin-bottom: 1em;
}
[value*=Format] {
margin-top: 1em;
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
[name="group"] {
display: none;
}
[name="group"] + label {
font-size: 1.5em;
margin-right: 5px;
}
[name="group"] + label::before {
content: "\002610";
}
[name="group"]:checked + label::before {
content: '\002611\0027A5';
}