From 1423f511041ea16c04cea66897f939d97593ff9a Mon Sep 17 00:00:00 2001 From: grey Date: Mon, 14 Nov 2022 19:37:20 +0100 Subject: [PATCH] improved screen saver --- static/css/smallerTextMod.css | 4 + static/css/styles.css | 25 +- static/js/timer/timerview.js | 12 + static/logo/logoProposal-invert.svg | 4631 +++++++++++++++++++++++++++ templates/ng-timerview.html | 6 +- 5 files changed, 4667 insertions(+), 11 deletions(-) create mode 100644 static/logo/logoProposal-invert.svg diff --git a/static/css/smallerTextMod.css b/static/css/smallerTextMod.css index 211158b..145ea7c 100644 --- a/static/css/smallerTextMod.css +++ b/static/css/smallerTextMod.css @@ -1,3 +1,7 @@ body { font-size:0.3em; +} + +.moverLogo { + height: 80px !important; } \ No newline at end of file diff --git a/static/css/styles.css b/static/css/styles.css index 949c3c4..923dc16 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -112,39 +112,46 @@ animation:fade 1000ms infinite; font-family: sans-serif; } +:root { + --my-end-left: 99%; + --my-end-top: 99%; + } + #moveClock { - font-size: xx-large; + font-size: 6em; font-family: sans-serif; position: absolute; -webkit-animation: moveX 40s linear 0s infinite alternate, moveY 45s linear 0s infinite alternate; -moz-animation: moveX 40s linear 0s infinite alternate, moveY 45s linear 0s infinite alternate; -o-animation: moveX 40s linear 0s infinite alternate, moveY 45s linear 0s infinite alternate; animation: moveX 40s linear 0s infinite alternate, moveY 45s linear 0s infinite alternate; + transition: all 0.8s ease; } + @-webkit-keyframes moveX { - from { left: 0; } to { left: 100%; } + from { left: 0; } to { left: var(--my-end-left) } } @-moz-keyframes moveX { - from { left: 0; } to { left: 100%; } + from { left: 0; } to { left: var(--my-end-left); } } @-o-keyframes moveX { - from { left: 0; } to { left: 100%; } + from { left: 0; } to { left: var(--my-end-left); } } @keyframes moveX { - from { left: 0; } to { left: 100%; } + from { left: 0; } to { left: var(--my-end-left); } } @-webkit-keyframes moveY { - from { top: 0; } to { top: 100%; } + from { top: 0; } to { top: var(--my-end-top); } } @-moz-keyframes moveY { - from { top: 0; } to { top: 100%; } + from { top: 0; } to { top: var(--my-end-top); } } @-o-keyframes moveY { - from { top: 0; } to { top: 100%; } + from { top: 0; } to { top: var(--my-end-top); } } @keyframes moveY { - from { top: 0; } to { top: 100%; } + from { top: 0; } to { top: var(--my-end-top); } } \ No newline at end of file diff --git a/static/js/timer/timerview.js b/static/js/timer/timerview.js index 2a03089..0e04db5 100644 --- a/static/js/timer/timerview.js +++ b/static/js/timer/timerview.js @@ -28,6 +28,10 @@ let dataFrame = {}; let timeDiffToServer = 0; let sessionToken = ""; // Our current session token +// Handle the screensaver to fit the screen +setTimeout(handleDVD, 200); +window.addEventListener("resize", handleDVD); + // Handle connection event socket.onopen = function (e) { socket.send("new client"); @@ -245,6 +249,14 @@ function handleUpdate() { } } +function handleDVD() { + const objHeight = document.body.offsetHeight - screensaverText.offsetHeight; + const objWidth = document.body.offsetWidth - screensaverText.offsetWidth; + document.documentElement.style.setProperty('--my-end-left', objWidth + "px"); + document.documentElement.style.setProperty('--my-end-top', objHeight + "px"); +} + + /** Additional documentation diff --git a/static/logo/logoProposal-invert.svg b/static/logo/logoProposal-invert.svg new file mode 100644 index 0000000..2321edf --- /dev/null +++ b/static/logo/logoProposal-invert.svg @@ -0,0 +1,4631 @@ + + + + + + + + + + + + pen + Countdown + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + TheGreydiamond + + + 16.07.2022 + + + [Project Name Here] + + + + + + diff --git a/templates/ng-timerview.html b/templates/ng-timerview.html index fd721b5..51ee67d 100644 --- a/templates/ng-timerview.html +++ b/templates/ng-timerview.html @@ -49,10 +49,12 @@