commit 20/08/2025

html/webpage/assets/css/Login-Form-Basic-icons.css

@@ -0,0 +1,57 @@
+.bs-icon {
+  --bs-icon-size: .75rem;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--bs-icon-size);
+  width: calc(var(--bs-icon-size) * 2);
+  height: calc(var(--bs-icon-size) * 2);
+  color: var(--bs-primary);
+}
+
+.bs-icon-xs {
+  --bs-icon-size: 1rem;
+  width: calc(var(--bs-icon-size) * 1.5);
+  height: calc(var(--bs-icon-size) * 1.5);
+}
+
+.bs-icon-sm {
+  --bs-icon-size: 1rem;
+}
+
+.bs-icon-md {
+  --bs-icon-size: 1.5rem;
+}
+
+.bs-icon-lg {
+  --bs-icon-size: 2rem;
+}
+
+.bs-icon-xl {
+  --bs-icon-size: 2.5rem;
+}
+
+.bs-icon.bs-icon-primary {
+  color: var(--bs-white);
+  background: var(--bs-primary);
+}
+
+.bs-icon.bs-icon-primary-light {
+  color: var(--bs-primary);
+  background: rgba(var(--bs-primary-rgb), .2);
+}
+
+.bs-icon.bs-icon-semi-white {
+  color: var(--bs-primary);
+  background: rgba(255, 255, 255, .5);
+}
+
+.bs-icon.bs-icon-rounded {
+  border-radius: .5rem;
+}
+
+.bs-icon.bs-icon-circle {
+  border-radius: 50%;
+}
+

html/webpage/assets/js/script.js

@@ -0,0 +1,93 @@
+$(document).ready(function() {
+    document.title = "Automatic Announcement System"
+    
+
+    const ws = new WebSocket(window.location.pathname + '/ws');
+
+
+    ws.onopen = () => {
+        console.log('WebSocket connection established');
+    };
+    ws.onmessage = (event) => {
+        let rep = JSON.parse(event.data);
+        let cmd = rep.reply
+        let data = rep.data;
+        if (cmd && cmd.length > 0){
+            // console.log('Command:', cmd);
+            // console.log('Data:', data);
+            switch(cmd){
+                case "getCPUStatus" :
+                    $('#cpustatus').text("CPU Usage: " + data)
+                    break;
+                case "getMemoryStatus" :
+                    $('#ramstatus').text("Memory Usage: " + data)
+                    break;
+                case "getDiskStatus" :
+                    $('#diskstatus').text("Disk Usage: " + data)
+                    break;
+                case "getNetworkStatus" :
+                    $('#networkstatus').text("Network Usage: " + data)
+                    break;
+            }
+        }
+    };
+    ws.onclose = () => {
+        console.log('WebSocket connection closed');
+    };
+    // ws.onerror = (error) => {
+    //     console.error('WebSocket error:', error);
+    // };
+
+    /**
+     * Send a command to the WebSocket server.
+     * @param {String} command command to send
+     * @param {String} data data to send
+     */
+    function sendCommand(command, data){
+        if (ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ command, data }));
+        } else {
+            console.error('WebSocket is not open');
+        }
+    }
+
+    setInterval(()=>{
+        $('#datetimetext').text(new Date().toLocaleString());
+        sendCommand("getCPUStatus", "")
+        sendCommand("getMemoryStatus", "")
+        sendCommand("getDiskStatus", "")
+        sendCommand("getNetworkStatus", "")
+    }, 1000)
+
+    let sidemenu = new bootstrap.Offcanvas('#offcanvas-menu');
+    $('#showmenu').click(()=>{
+        sidemenu.show();
+    })
+    $('#soundbanklink').click(()=>{
+        sidemenu.hide();
+        $('#content').load('soundbank.html');
+    })
+    $('#messagebanklink').click(()=>{
+        sidemenu.hide();
+        $('#content').load('messagebank.html');
+    })
+    $('#languagelink').click(()=>{
+        sidemenu.hide();
+        $('#content').load('language.html');
+    })
+    $('#timerlink').click(()=>{
+        sidemenu.hide();
+        $('#content').load('timer.html');
+    })
+    $('#loglink').click(()=>{
+        sidemenu.hide();
+        $('#content').load('log.html');
+    })
+    $('#settinglink').click(()=>{
+        sidemenu.hide();
+        $('#content').load('setting.html');
+    })
+    $('#logoutlink').click(()=>{
+        window.location.href = "login.html"
+    })
+});