added icon and info page in web

openrouter/src/web/css/header.css

@@ -2,6 +2,7 @@ header {
     width: 100vw;
     height: 50px;
     padding: 10px;
+    margin: 5px;
     display: grid;
     grid-template-columns: 32% 32% 32%;
     align-items: center;
@@ -40,6 +41,13 @@ header>h1 {
     align-items: center;
 }
 
+#openroutericon {
+    max-width: 50px;
+    max-height: 50px;
+    border-radius: 10px;
+    margin: 0 5px;
+}
+
 @media screen and (max-width: 400px) {
     header>h1 {
         font-size: 15px;

openrouter/src/web/css/info.css

@@ -0,0 +1,27 @@
+.infosection {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    pointer-events: none;
+    transition: 0.3s;
+    padding: 10px;
+}
+
+.infosection.active {
+    opacity: 1;
+    pointer-events: all;
+}
+
+.inforect {
+    background-color: gray;
+    max-width: 500px;
+    border-radius: 10px;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(50px, 500px));
+    align-items: center;
+    padding: 10px;
+    margin: 10px;
+}

openrouter/src/web/index.html

@@ -12,6 +12,7 @@
     <link rel="stylesheet" href="css/button.css">
     <link rel="stylesheet" href="css/loader.css">
     <link rel="stylesheet" href="css/syslog.css">
+    <link rel="stylesheet" href="css/info.css">
     <title>Openrouter Admin</title>
 </head>
 
@@ -26,8 +27,7 @@
                 <button class="linkbutton" id="infobutton">Info</button>
                 <button class="linkbutton" id="rebootbutton">Reboot</button>
             </div>
-            <h1>Openrouter Admin Uptime: <p id="uptime"></p>
-            </h1>
+            <h1><img id="openroutericon" src="favicon.ico" alt="icon">Openrouter Admin</h1>
             <div class="userbuttons">
                 <h1 class="headerusername"></h1>
                 <button class="exitbutton">Exit</button>
@@ -198,7 +198,16 @@
                 <div class="syslogdata"></div>
             </section>
             <!-- syslog block -->
-            <section class="infosection"></section>
+            <section class="infosection">
+                <div class="inforect">
+                    <label for="infoversion">Version: </label>
+                    <p id="version">0.1.1</p>    
+                </div>
+                <div class="inforect">
+                    <label for="infouptime">Uptime: </label>
+                    <p id="uptime"></p>
+                </div>
+            </section>
         </div>
         <!-- settings block -->
     </section>
@@ -292,7 +301,7 @@
 
     <script src="js/reboot.js"></script>
     <script src="js/syslog.js"></script>
-    <script src="js/uptime.js"></script>
+    <script src="js/info/uptime.js"></script>
     <script src="js/login.js"></script>
 </body>
 

openrouter/src/web/js/header.js

@@ -2,19 +2,28 @@ const settingssection = document.querySelector('.settingssection')
 const settingsbutton = document.querySelector('#settingsbutton')
 const syslogsection = document.querySelector('.syslogsection')
 const syslogbutton = document.querySelector('#syslogbutton')
+const infobutton = document.querySelector('#infobutton')
+const infosection = document.querySelector('.infosection')
 
 const headermenubutton = document.querySelector('#headermenubutton')
 const headerlinks = document.querySelector('.links')
 // const header = document.querySelector('.header')
 
+let uptimeintervalid
+
 settingsbutton.addEventListener('click', () => {
     settingssection.classList.add('active')
     syslogsection.classList.remove('active')
+    infosection.classList.remove('active')
+    clearInterval(uptimeintervalid)
+    get_all_settings()
 })
 
 syslogbutton.addEventListener('click', () => {
     syslogsection.classList.add('active')
     settingssection.classList.remove('active')
+    infosection.classList.remove('active')
+    clearInterval(uptimeintervalid)
     get_syslog_data()
 })
 
@@ -32,6 +41,13 @@ window.addEventListener('click', (e) => {
     }
 })
 
+infobutton.addEventListener('click', () => {
+    syslogsection.classList.remove('active')
+    settingssection.classList.remove('active')
+    infosection.classList.add('active')
+    uptimeintervalid = setInterval(get_uptime, 1000)
+})
+
 // if (window.screenX > 600) {
 //     header.removeChild(headermenubutton)
 // } else {

openrouter/src/web/js/info/uptime.js

@@ -16,4 +16,8 @@ const get_uptime = () => {
     })
 }
 
-setInterval(get_uptime, 1000)
+window.addEventListener('load', () => {
+    if (infosection.classList.contains('active')) {
+        uptimeintervalid = setInterval(get_uptime, 1000)
+    }
+})

openrouter/src/web/js/login.js

@@ -10,9 +10,8 @@ if (localStorage.getItem("token") === null) {
     adminpanelsection.classList.remove('active')
     loginform.classList.add('active')
 } else {
-    get_all_settings()
     adminpanelsection.classList.add('active')
-    settingssection.classList.add('active')
+    infosection.classList.add('active')
     headerusername.innerHTML = JSON.parse(localStorage.getItem('userdata')).username
 }