added telnet and reboot control, openrouterinit script

src/web/css/button.css

@@ -0,0 +1,19 @@
+button {
+    padding: 10px;
+    border-radius: 10px;
+    border: none;
+    transition: 0.3s;
+    cursor: pointer;
+}
+
+button:hover {
+    opacity: 0.6;
+}
+
+.linkbutton {
+    background: transparent;
+}
+
+.linkbutton:hover {
+    text-decoration: underline;
+}

src/web/css/form.css

@@ -1,4 +1,7 @@
 .form {
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100vw;
     height: 100vh;
     display: flex;
@@ -19,6 +22,10 @@
     transform: scale(1);
 }
 
+.form.active>.formbody {
+    transform: scale(1);
+}
+
 .formbody {
     width: 50%;
     height: 50%;
@@ -44,6 +51,17 @@
     flex-direction: column;
 }
 
+.forminputbody.confirmform {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+}
+
+.forminputbody.confirmform>button {
+    width: 100%;
+}
+
 .forminputlabel {
     text-align: center;
     font-style: normal;

src/web/css/header.css

@@ -0,0 +1,20 @@
+header {
+    width: 100vw;
+    height: 50px;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.links {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.userbuttons {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}

src/web/css/index.css

@@ -1,6 +1,5 @@
 :root {
     color-scheme: light dark;
-    /* --font-color: light-dark(black, white); */
 }
 
 * {
@@ -12,5 +11,17 @@
 body {
     width: 100vw;
     height: 100vh;
-    /* background-color: light-dark(white, black); */
+}
+
+.adminpanel {
+    width: 100%;
+    height: 100%;
+    transform: scale(0.5);
+    opacity: 0;
+    transition: 0.3s;
+}
+
+.adminpanel.active {
+    transform: scale(1);
+    opacity: 1;
 }

src/web/css/loader.css

@@ -0,0 +1,64 @@
+.loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 0;
+    pointer-events: none;
+    display: grid;
+    z-index: 12;
+    backdrop-filter: blur(5px);
+    transition: 0.3s;
+}
+
+.loader>h1 {
+    opacity: 0;
+    width: 100%;
+    padding: 10px;
+    text-align: center;
+}
+
+.loadertip {
+    width: 0;
+    height: 0;
+    padding: 0;
+    margin: 0;
+    border-radius: 50%;
+    place-self: center;
+    z-index: 12;
+    position: relative;
+    transition: 0.3s;
+}
+
+.progress {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-top: 5px solid #56C1F9;
+    border-radius: 50%;
+    animation: loading 2s infinite ease-in-out;
+}
+
+.loader.active {
+    width: 100vw;
+    height: 100vh;
+}
+
+.loader.active > .loadertip {
+    width: 100px;
+    height: 100px;
+    border-bottom: 5px solid gray;
+    animation: loading 2s infinite ease-in-out;
+}
+
+.loader.active>h1 {
+    opacity: 1;
+}
+
+@keyframes loading {
+    100% {
+        transform: rotate(360deg);
+    }
+}

src/web/css/notification.css

@@ -0,0 +1,43 @@
+.notification {
+    width: max-content;
+    height: 0;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: 10;
+    border-radius: 10px;
+    position: fixed;
+    top: 0;
+    right: 0;
+    transition: 0.3s;
+    cursor: pointer;
+    opacity: 0.8;
+    margin: 10px;
+    padding: 0 10px;
+}
+
+.notificationtextbox {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    justify-items: center;
+    align-items: center;
+    pointer-events: none;
+}
+
+.notificationtext {
+    width: 100%;
+    text-align: center;
+    pointer-events: none;
+}
+
+.notification.active.error {
+    pointer-events: all;
+    height: 10%;
+    background-color: rgb(233, 70, 70);
+}
+
+.notification.active.success {
+    pointer-events: all;
+    height: 10%;
+    background-color: rgb(76, 209, 76);
+}

src/web/css/settings.css

@@ -0,0 +1,146 @@
+  .checkbox-wrapper-2 .ikxBAC {
+    appearance: none;
+    background-color: #dfe1e4;
+    border-radius: 72px;
+    border-style: none;
+    flex-shrink: 0;
+    height: 20px;
+    margin: 0;
+    position: relative;
+    width: 30px;
+    transition: 0.3s;
+  }
+
+  .checkbox-wrapper-2 .ikxBAC::before {
+    bottom: -6px;
+    content: "";
+    left: -6px;
+    position: absolute;
+    right: -6px;
+    top: -6px;
+    transition: 0.3s;
+    cursor: pointer;
+  }
+
+  .checkbox-wrapper-2 .ikxBAC,
+  .checkbox-wrapper-2 .ikxBAC::after {
+    transition: 300ms;
+  }
+
+  .checkbox-wrapper-2 .ikxBAC::after {
+    background-color: #fff;
+    border-radius: 50%;
+    content: "";
+    height: 14px;
+    left: 3px;
+    position: absolute;
+    top: 3px;
+    width: 14px;
+    cursor: pointer;
+  }
+
+  .checkbox-wrapper-2 input[type=checkbox] {
+    cursor: default;
+  }
+
+  .checkbox-wrapper-2 .ikxBAC:hover {
+    background-color: #c9cbcd;
+    transition-duration: 0s;
+  }
+
+  .checkbox-wrapper-2 .ikxBAC:checked {
+    background-color: green;
+  }
+
+  .checkbox-wrapper-2 .ikxBAC:checked::after {
+    background-color: #fff;
+    left: 13px;
+  }
+
+  .checkbox-wrapper-2 :focus:not(.focus-visible) {
+    outline: 0;
+  }
+
+  .checkbox-wrapper-2 .ikxBAC:checked:hover {
+    background-color: hsl(from green h s 20%);
+  }
+  
+.settingrect {
+  width: 25%;
+  height: max-content;
+  background-color: hsl(from black h s 20%);
+  padding: 20px;
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.settingrectheader {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.settingrectbody {
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  transition: 0.3s;
+}
+
+.settingrectbody.active {
+  height: max-content;
+}
+
+.settingrectbody>table {
+  width: 100%;
+  text-align: left;
+}
+
+.settingrectfooter {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.settingrectfooter>button {
+  width: 100%;
+}
+
+table {
+  border: 2px solid ;
+  border-radius: 10px;
+}
+
+thead>tr>th {
+  border-bottom: 2px solid;
+  padding: 10px;
+}
+
+tbody>tr>th {
+  border: 2px solid;
+  padding: 10px;
+  border-radius: 10px;
+}
+
+@media screen and (max-width: 1200px) {
+  .settingrect {
+    width: 50%;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .settingrect {
+    width: 75%;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  .settingrect {
+    width: 100%;
+  }
+}