add basic admin panel

nksrv/www/admin/assets/style.css

@@ -0,0 +1,239 @@
+body {
+    margin: 0;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.bold {
+    font-weight: bold;
+}
+
+.input {
+    margin: 5px 0px 5px 0;
+}
+
+
+/* Tabs */
+/* Style the tab */
+.tab {
+    float: left;
+    border: 1px solid #ccc;
+    background-color: #f1f1f1;
+    width: 30%;
+    height: 1000px;
+}
+
+    /* Style the buttons inside the tab */
+    .tab button {
+        display: block;
+        background-color: inherit;
+        color: black;
+        padding: 22px 16px;
+        width: 100%;
+        border: none;
+        outline: none;
+        text-align: left;
+        cursor: pointer;
+        transition: 0.3s;
+        font-size: 17px;
+    }
+
+        /* Change background color of buttons on hover */
+        .tab button:hover {
+            background-color: #ddd;
+        }
+
+        /* Create an active/current "tab button" class */
+        .tab button.active {
+            background-color: #ccc;
+        }
+
+/* Style the tab content */
+.tabcontent {
+    float: left;
+    padding: 5px 5px 5px 5px;
+    border: 1px solid #ccc;
+    width: 70%;
+    border-left: none;
+    height: 1000px;
+}
+
+.navbar2 {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: var(--main-nav-light-bg);
+}
+
+.navbar-item {
+    float: left;
+    display: block;
+    color: var(--main-nav-light-color);
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+    .navbar-item:hover {
+        background-color: #029761;
+        text-decoration: none;
+        color: var(--main-nav-light-color);
+    }
+
+    .navbar-item:not(.active):hover {
+        background-color: var(--main-nav-light-hover);
+        text-decoration: none;
+        color: var(--main-nav-light-color);
+    }
+
+a:hover {
+    text-decoration: none;
+}
+
+.active {
+    background-color: #04AA6D;
+}
+
+:root {
+    --main-nav-dark-bg: #333;
+    --main-nav-dark-color: white;
+    --main-nav-dark-hover: #111;
+    --main-nav-light-bg: #f1f1f1;
+    --main-nav-light-color: black;
+    --main-nav-light-hover: #dddddd;
+}
+
+.form-control {
+    width: 200px;
+}
+
+zonegroup {
+    display: flex;
+}
+
+    zonegroup p {
+        display: flex;
+        padding-right: 15px;
+    }
+
+    zonegroup input {
+        display: flex;
+    }
+
+
+.right {
+    float: right;
+}
+
+
+.dropdown2 {
+    overflow: hidden;
+}
+
+    .dropdown2 .dropbtn {
+        cursor: pointer;
+        font-size: 16px;
+        border: none;
+        outline: none;
+        color: black;
+        padding: 14px 16px;
+        background-color: inherit;
+        font-family: inherit;
+        margin: 0;
+    }
+
+    .navbar a:hover, .dropdown2:hover .dropbtn, .dropbtn:focus {
+        background-color: green;
+        color: white;
+    }
+
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+    .dropdown-content a {
+        color: black;
+        padding: 12px 16px 12px 7px;
+        text-decoration: none;
+        display: block;
+        text-align: left;
+    }
+
+        .dropdown-content a:hover {
+            background-color: #ddd;
+        }
+
+.show {
+    display: block;
+}
+
+/* Leave this at the end */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: rgb(25, 25, 25);
+        color: white;
+    }
+
+    .app-bar {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        /* For browsers that do not support gradients */
+        background-color: #A3A6A9;
+        background-image: linear-gradient(to right, #A3A6A9, #666765);
+    }
+
+    .button {
+        background-color: darkgray;
+        color: white;
+    }
+
+    .tab {
+        background-color: rgb(36,36,36);
+    }
+
+        .tab button {
+            color: white;
+        }
+
+            .tab button:hover {
+                background-color: #666765;
+            }
+
+            .tab button.active {
+                background-color: darkgray;
+            }
+
+    .navbar2 {
+        background-color: var(--main-nav-dark-bg);
+    }
+
+    .navbar-item {
+        color: var(--main-nav-dark-color);
+    }
+
+        .navbar-item:hover {
+            background-color: #029761;
+            text-decoration: none;
+            color: var(--main-nav-dark-color);
+        }
+
+        .navbar-item:not(.active):hover {
+            background-color: var(--main-nav-dark-hover);
+            text-decoration: none;
+            color: var(--main-nav-dark-color);
+        }
+
+    .modal {
+        --bs-modal-bg: black;
+    }
+
+    .dropdown2 .dropbtn {
+        color: white;
+    }
+}