added web interface

src/web/css/header.css

@@ -0,0 +1,19 @@
+.header {
+    width: 100%;
+    padding: 10px;
+    background-color: transparent;
+}
+
+.headerbutton {
+    padding: 10px;
+    border-radius: 10px;
+    border: none;
+    cursor: pointer;
+    background-color: gray;
+    transition: 0.3s;
+    color: white;
+}
+
+.headerbutton:hover {
+    background-color: rgb(83, 83, 83);
+}

src/web/css/index.css

@@ -0,0 +1,13 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    width: 100vw;
+    height: 100vh;
+    background-color: black;
+    color: white;
+    position: relative;
+}

src/web/css/loginform.css

@@ -0,0 +1,57 @@
+.loginform {
+    position: absolute;
+    width: 100%;
+    height: 0;
+    top: 0;
+    left: 0;
+    display: grid;
+    justify-items: center;
+    align-items: center;
+    overflow: hidden;
+    pointer-events: none;
+    transition: 0.3s;
+    background-color: black;
+}
+
+.loginform.active {
+    height: 100%;
+    pointer-events: all;
+}
+
+.loginformbody {
+    padding: 10px;
+    background-color: gray;
+    border-radius: 10px;
+    box-shadow: -5px -5px 30px 30px gray;
+}
+
+.loginformheader {
+    text-align: center;
+}
+
+.loginforminputbody {
+    padding: 10px;
+}
+
+.loginforminput {
+    padding: 10px;
+    border-radius: 10px;
+    border: none;
+    transition: 0.3s;
+}
+
+.loginformbutton {
+    padding: 10px;
+    border: none;
+    border-radius: 10px;
+    position: relative;
+    width: 100%;
+    cursor: pointer;
+    background-color: rgb(59, 59, 197);
+    color: white;
+    transition: 0.3s;
+}
+
+.loginformbutton:hover {
+    background-color: rgb(151, 151, 241);
+}

src/web/css/message.css

@@ -0,0 +1,41 @@
+.message {
+    width: 100%;
+    height: 0;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: 10;
+    border-radius: 10px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    transition: 0.3s;
+    cursor: pointer;
+    opacity: 0.8;
+}
+
+.messagetextbox {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    justify-items: center;
+    align-items: center;
+    pointer-events: none;
+}
+
+.messagetext {
+    width: 100%;
+    text-align: center;
+    pointer-events: none;
+}
+
+.message.active.error {
+    pointer-events: all;
+    height: 10%;
+    background-color: rgb(233, 70, 70);
+}
+
+.message.active.success {
+    pointer-events: all;
+    height: 10%;
+    background-color: rgb(76, 209, 76);
+}

src/web/css/userstable.css

@@ -0,0 +1,49 @@
+.table {
+    width: 98vw;
+    height: 60vh;
+    overflow-y: auto;
+    margin: 1vw 2vh;
+}
+
+.headers {
+    width: 98vw;
+    margin: 1vw 2vh;
+}
+
+table {
+    width: 100%;
+}
+
+thead {
+    background-color: azure;
+    color: black;
+}
+
+tbody {
+    background-color: rgb(48, 44, 44);
+}
+
+th {
+    border-radius: 10px;
+    padding: 10px;
+    width: 25%;
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background-color: #504f4f;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: gray;
+    border-radius: 10px;
+    transition: 0.3s;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #ffffff;
+}