improved screen saver

static/css/smallerTextMod.css

@@ -1,3 +1,7 @@
 body {
     font-size:0.3em;
 }
+
+.moverLogo {
+    height: 80px !important;
+}

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); }
       }

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
 

templates/ng-timerview.html

@@ -49,10 +49,12 @@
         </div>
     </div>
     <div id="moveClock" style="display: none;">
-	<div id="screensaverClock">
+	<img src="logo/logoProposal-invert.svg"  alt="openCountdown" height="180px" class="moverLogo" >
+	<center><div id="screensaverClock">
 		00:00:00
 	</div>
-	openCountdown
+</center>
+	
     </div>
     <!-- Load scripts -->
     <script src="js/reconnecting-websocket.min.js"></script>