added web interface template

web/css/index.css

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

web/css/loginform.css

@@ -0,0 +1,55 @@
+.loginform {
+    position: absolute;
+    width: 0;
+    height: 0;
+    display: grid;
+    justify-items: center;
+    align-items: center;
+    overflow: hidden;
+    pointer-events: none;
+    transition: 0.3s;
+}
+
+.loginform.active {
+    width: 100%;
+    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);
+}

web/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/index.css">
+    <link rel="stylesheet" href="css/loginform.css">
+    <title>admin</title>
+</head>
+<body>
+    <div class="loginform active">
+        <form class="loginformbody">
+            <h1 class="loginformheader">Login</h1>
+            <div class="loginforminputbody">
+                <input type="text" required id="loginforminputusername" class="loginforminput">
+            </div>
+            <div class="loginforminputbody">
+                <input type="password" required id="loginforminputpassword" class="loginforminput">
+            </div>
+            <div class="loginforminputbody">
+                <button class="loginformbutton">login</button>
+            </div>
+        </form>
+    </div>
+
+    <script src="js/routes.js"></script>
+    <script src="js/login.js"></script>
+</body>
+</html>

web/js/login.js

@@ -0,0 +1,27 @@
+const loginform = document.querySelector('.loginform')
+const loginformbody = document.querySelector('.loginformbody')
+const loginforminputusername = document.querySelector('#loginforminputusername')
+const loginforminputpassword = document.querySelector('#loginforminputpassword')
+const loginformbutton = document.querySelector('.loginformbutton')
+
+// loginformbody.unbind('submit')
+
+loginformbody.addEventListener('submit', (e) => {
+    e.preventDefault()
+    console.log('login clicked')
+    console.log(loginforminputusername.value, loginforminputpassword.value)
+    login(loginforminputusername.value, loginforminputpassword.value)
+    // console.log(loginform, loginforminputpassword, loginforminputusername, loginformbutton)
+})
+
+const login = async (username, password) => {
+    const response = await fetch(routes.login(), {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        mode: 'no-cors',
+        body: `{"username":"${username}","password":"${password}"}`
+    })
+    console.log(response.json())
+}

web/js/routes.js

@@ -0,0 +1,6 @@
+const host = 'http://localhost:43243'
+const prefix = 'api'
+
+const routes = {
+    login: () => [host, prefix, 'token'].join('/')
+}