animate center box to show/hide it

css/centered-box.css

@@ -11,3 +11,15 @@
 	-webkit-transform: translate(-50%, -50%);
 	transform: translate(-50%, -50%);
 }
+
+#centeredBox {
+	opacity: 1;
+	z-index: 2;
+    transition: opacity var(--transition-speed),
+    			z-index var(--transition-speed);
+}
+
+#centeredBox.hiddenBox {
+	opacity: 0 !important;
+	z-index: 0 !important;
+}

index.html

@@ -231,6 +231,7 @@
 	<script src="js/weather-screen.js"></script>
 	<script src="js/weather-settings.js"></script>
 	<script src="js/web-menu.js"></script>
+	<script src="js/centered-box.js"></script>
 	<script src="js/mobile-swipe-event.js"></script>
 	<script src="js/mobile-swipe-callback.js"></script>
 </body>

js/centered-box.js

@@ -0,0 +1,6 @@
+var centeredBox = document.getElementById("centeredBox");
+
+const toggleCenteredBox = () => {
+    centeredBox.classList.toggle('hiddenBox');
+    console.log('toggle center box');
+}

js/weather-screen.js

@@ -255,5 +255,8 @@ const toggleWeatherScreen = () => {
     	showWeatherScreen();  	
     }
 
+    // Toggle center box
+    toggleCenteredBox();
+
 	console.log('toggle weather screen');
 }

js/web-menu.js

@@ -215,6 +215,10 @@ const toggleWebMenu = () => {
     	// Show Web menu
     	showWebMenu();
     }
+
+    // Toggle center box
+    toggleCenteredBox();
+    
 	console.log('toggle web menu');
 }