nightmode

semestralni_prace/main.html

@@ -13,6 +13,15 @@
             margin: 0;
             padding: 20px;
             text-align: center;
+            transition: background-color 0.5s, color 0.5s;
+            /* Smooth transition */
+        }
+
+        /* Night Mode Styles */
+        body.night-mode {
+            background-color: #000000;
+            color: #a0a0a0;
+            /* Muted text color */
         }
 
         h1 {
@@ -57,6 +66,23 @@
             return day + '/' + month + '/' + year + ' ' + hours + ':' + minutes;
         }
 
+        // Function to check if night mode should be enabled
+        function isNightMode() {
+            var now = new Date();
+            var hours = now.getHours();
+            return hours >= 22 || hours < 6; // Night mode between 22:00 and 6:00
+        }
+
+        // Function to toggle night mode
+        function toggleNightMode() {
+            var body = document.body;
+            if (isNightMode()) {
+                body.classList.add('night-mode');
+            } else {
+                body.classList.remove('night-mode');
+            }
+        }
+
         // Function to fetch and display data
         function fetchData() {
             var statusElement = document.getElementById('status');
@@ -120,12 +146,6 @@
                                             '<span style="font-size: 10px; color: grey;">' + 'Last updated: ' + formatDate(data[room].timestamp) + '</span>' +
                                             '</div>';
                                     }
-                                    //html += '<div class="data" style="display: inline-block; width: 45%; vertical-align: top; margin: 10px;">' +
-                                    //   '<strong>' + room + '</strong><br>' +
-                                    //  '<strong><span style="font-size: 50px;">' + data[room].temperature + ' °C</span></strong><br>' +
-                                    //    '<strong><span style="font-size: 50px;">' + data[room].humidity + ' %</span><strong><br>' +
-                                    //    '<span style="font-size: 10px; color: grey;">' + 'Last updated: ' + formatDate(data[room].timestamp) + '</span>' +
-                                    //    '</div>';*
                                 }
                             }
 
@@ -169,11 +189,20 @@
 
         // Start the data refresh when page loads
         if (document.addEventListener) {
-            document.addEventListener('DOMContentLoaded', startDataRefresh);
+            document.addEventListener('DOMContentLoaded', function () {
+                toggleNightMode(); // Apply night mode on page load
+                startDataRefresh();
+            });
         } else {
             // For older browsers
-            window.onload = startDataRefresh;
+            window.onload = function () {
+                toggleNightMode(); // Apply night mode on page load
+                startDataRefresh();
+            };
         }
+
+        // Check for night mode every minute
+        setInterval(toggleNightMode, 60000);
     </script>
 </body>