new features 04/12/2024

WebContentt/public/assets/css/Font Awesome 5 Brands.css

@@ -0,0 +1,8 @@
+@font-face {
+	font-family: 'Font Awesome 5 Brands';
+	src: url(../../assets/fonts/Font%20Awesome%205%20Brands-9f495c22369544f2a6865c9d60b59dee.woff2) format('woff2'),
+	url(../../assets/fonts/Font%20Awesome%205%20Brands-ea242bb20f9fe7db35296896fae9867f.ttf) format('truetype');
+	font-weight: 400;
+	font-style: normal;
+	font-display: block;
+}

WebContentt/public/assets/css/Font Awesome 5 Duotone.css

@@ -0,0 +1,8 @@
+@font-face {
+	font-family: 'Font Awesome 5 Duotone';
+	src: url(../../assets/fonts/Font%20Awesome%205%20Duotone-941715f4aecfe6f923ad4d98b8e09408.woff2) format('woff2'),
+	url(../../assets/fonts/Font%20Awesome%205%20Duotone-0609b5442e186979b732d3eecf885c57.ttf) format('truetype');
+	font-weight: 900;
+	font-style: normal;
+	font-display: block;
+}

WebContentt/public/assets/css/Font Awesome 5 Pro.css

@@ -0,0 +1,26 @@
+@font-face {
+	font-family: 'Font Awesome 5 Pro';
+	src: url(../../assets/fonts/Font%20Awesome%205%20Pro-813a01e49b4431cc33412a84ca94d347.woff2) format('woff2'),
+	url(../../assets/fonts/Font%20Awesome%205%20Pro-87a1b179a40953ca88a6205650aa32c9.ttf) format('truetype');
+	font-weight: 300;
+	font-style: normal;
+	font-display: block;
+}
+
+@font-face {
+	font-family: 'Font Awesome 5 Pro';
+	src: url(../../assets/fonts/Font%20Awesome%205%20Pro-82e3029674e5d3395e37aea7b40ecc63.woff2) format('woff2'),
+	url(../../assets/fonts/Font%20Awesome%205%20Pro-8a781dd91fd45555bafe112b5008c208.ttf) format('truetype');
+	font-weight: 400;
+	font-style: normal;
+	font-display: block;
+}
+
+@font-face {
+	font-family: 'Font Awesome 5 Pro';
+	src: url(../../assets/fonts/Font%20Awesome%205%20Pro-e17c2daa07b98413686eaeccf1f5e65a.woff2) format('woff2'),
+	url(../../assets/fonts/Font%20Awesome%205%20Pro-3724e0236c1ca473e4d73f7065e5de28.ttf) format('truetype');
+	font-weight: 900;
+	font-style: normal;
+	font-display: block;
+}

WebContentt/public/assets/css/Font Awesome 6 Brands.css

@@ -0,0 +1,8 @@
+@font-face {
+	font-family: 'Font Awesome 6 Brands';
+	src: url(../../assets/fonts/Font%20Awesome%206%20Brands-9f495c22369544f2a6865c9d60b59dee.woff2) format('woff2'),
+	url(../../assets/fonts/Font%20Awesome%206%20Brands-ea242bb20f9fe7db35296896fae9867f.ttf) format('truetype');
+	font-weight: 400;
+	font-style: normal;
+	font-display: block;
+}

WebContentt/public/assets/css/Font Awesome 6 Duotone.css

@@ -0,0 +1,8 @@
+@font-face {
+	font-family: 'Font Awesome 6 Duotone';
+	src: url(../../assets/fonts/Font%20Awesome%206%20Duotone-941715f4aecfe6f923ad4d98b8e09408.woff2) format('woff2'),
+	url(../../assets/fonts/Font%20Awesome%206%20Duotone-0609b5442e186979b732d3eecf885c57.ttf) format('truetype');
+	font-weight: 900;
+	font-style: normal;
+	font-display: block;
+}

WebContentt/public/assets/css/Font Awesome 6 Pro.css

@@ -0,0 +1,35 @@
+@font-face {
+	font-family: 'Font Awesome 6 Pro';
+	src: url(../../assets/fonts/Font%20Awesome%206%20Pro-61d823b3361d879c119cf056e85d3dbf.woff2) format('woff2'),
+	url(../../assets/fonts/Font%20Awesome%206%20Pro-4eda3069f6f64ce115228a4726aef19f.ttf) format('truetype');
+	font-weight: 100;
+	font-style: normal;
+	font-display: block;
+}
+
+@font-face {
+	font-family: 'Font Awesome 6 Pro';
+	src: url(../../assets/fonts/Font%20Awesome%206%20Pro-813a01e49b4431cc33412a84ca94d347.woff2) format('woff2'),
+	url(../../assets/fonts/Font%20Awesome%206%20Pro-87a1b179a40953ca88a6205650aa32c9.ttf) format('truetype');
+	font-weight: 300;
+	font-style: normal;
+	font-display: block;
+}
+
+@font-face {
+	font-family: 'Font Awesome 6 Pro';
+	src: url(../../assets/fonts/Font%20Awesome%206%20Pro-82e3029674e5d3395e37aea7b40ecc63.woff2) format('woff2'),
+	url(../../assets/fonts/Font%20Awesome%206%20Pro-8a781dd91fd45555bafe112b5008c208.ttf) format('truetype');
+	font-weight: 400;
+	font-style: normal;
+	font-display: block;
+}
+
+@font-face {
+	font-family: 'Font Awesome 6 Pro';
+	src: url(../../assets/fonts/Font%20Awesome%206%20Pro-e17c2daa07b98413686eaeccf1f5e65a.woff2) format('woff2'),
+	url(../../assets/fonts/Font%20Awesome%206%20Pro-3724e0236c1ca473e4d73f7065e5de28.ttf) format('truetype');
+	font-weight: 900;
+	font-style: normal;
+	font-display: block;
+}

WebContentt/public/assets/css/FontAwesome.css

@@ -0,0 +1,37 @@
+@font-face {
+	font-family: 'FontAwesome';
+	src: url(../../assets/fonts/FontAwesome-e17c2daa07b98413686eaeccf1f5e65a.woff2) format('woff2'),
+	url(../../assets/fonts/FontAwesome-3724e0236c1ca473e4d73f7065e5de28.ttf) format('truetype');
+	font-weight: 400;
+	font-style: normal;
+	font-display: block;
+}
+
+@font-face {
+	font-family: 'FontAwesome';
+	src: url(../../assets/fonts/FontAwesome-9f495c22369544f2a6865c9d60b59dee.woff2) format('woff2'),
+	url(../../assets/fonts/FontAwesome-ea242bb20f9fe7db35296896fae9867f.ttf) format('truetype');
+	font-weight: 400;
+	font-style: normal;
+	font-display: block;
+}
+
+@font-face {
+	font-family: 'FontAwesome';
+	src: url(../../assets/fonts/FontAwesome-82e3029674e5d3395e37aea7b40ecc63.woff2) format('woff2'),
+	url(../../assets/fonts/FontAwesome-8a781dd91fd45555bafe112b5008c208.ttf) format('truetype');
+	font-weight: 400;
+	font-style: normal;
+	font-display: block;
+	unicode-range: u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc;
+}
+
+@font-face {
+	font-family: 'FontAwesome';
+	src: url(../../assets/fonts/FontAwesome-817c19ff4bd5fc55e3922afce45e4117.woff2) format('woff2'),
+	url(../../assets/fonts/FontAwesome-01b9ff0cac2f6363c217c19d5787b037.ttf) format('truetype');
+	font-weight: 400;
+	font-style: normal;
+	font-display: block;
+	unicode-range: u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a;
+}

WebContentt/public/assets/css/Navbar-Centered-Brand-icons.css

@@ -0,0 +1,57 @@
+.bs-icon {
+  --bs-icon-size: .75rem;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--bs-icon-size);
+  width: calc(var(--bs-icon-size) * 2);
+  height: calc(var(--bs-icon-size) * 2);
+  color: var(--bs-primary);
+}
+
+.bs-icon-xs {
+  --bs-icon-size: 1rem;
+  width: calc(var(--bs-icon-size) * 1.5);
+  height: calc(var(--bs-icon-size) * 1.5);
+}
+
+.bs-icon-sm {
+  --bs-icon-size: 1rem;
+}
+
+.bs-icon-md {
+  --bs-icon-size: 1.5rem;
+}
+
+.bs-icon-lg {
+  --bs-icon-size: 2rem;
+}
+
+.bs-icon-xl {
+  --bs-icon-size: 2.5rem;
+}
+
+.bs-icon.bs-icon-primary {
+  color: var(--bs-white);
+  background: var(--bs-primary);
+}
+
+.bs-icon.bs-icon-primary-light {
+  color: var(--bs-primary);
+  background: rgba(var(--bs-primary-rgb), .2);
+}
+
+.bs-icon.bs-icon-semi-white {
+  color: var(--bs-primary);
+  background: rgba(255, 255, 255, .5);
+}
+
+.bs-icon.bs-icon-rounded {
+  border-radius: .5rem;
+}
+
+.bs-icon.bs-icon-circle {
+  border-radius: 50%;
+}
+

WebContentt/public/assets/js/app.js

@@ -0,0 +1,14 @@
+
+
+function indexload(){
+    console.log("Index loaded");
+
+}
+
+function settingload(){
+    console.log("Setting loaded");
+}
+
+function loginload(){
+    console.log("Login loaded");
+}

WebContentt/public/index.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html data-bs-theme="light" lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <title>SIPIntercom</title>
+    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/css/Font%20Awesome%205%20Brands.css">
+    <link rel="stylesheet" href="assets/css/Font%20Awesome%205%20Duotone.css">
+    <link rel="stylesheet" href="assets/css/Font%20Awesome%205%20Pro.css">
+    <link rel="stylesheet" href="assets/css/Font%20Awesome%206%20Brands.css">
+    <link rel="stylesheet" href="assets/css/Font%20Awesome%206%20Duotone.css">
+    <link rel="stylesheet" href="assets/css/Font%20Awesome%206%20Pro.css">
+    <link rel="stylesheet" href="assets/css/FontAwesome.css">
+    <link rel="stylesheet" href="assets/css/all.min.css">
+    <link rel="stylesheet" href="assets/css/Navbar-Centered-Brand-icons.css">
+</head>
+
+<body onload="indexload()">
+    <nav class="navbar navbar-expand-md bg-body py-3">
+        <div class="container"><a class="navbar-brand d-flex align-items-center" href="#"><span class="bs-icon-sm bs-icon-rounded bs-icon-primary d-flex justify-content-center align-items-center me-2 bs-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-bezier">
+                        <path fill-rule="evenodd" d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"></path>
+                        <path d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z"></path>
+                    </svg></span><span>SIP Intercom</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-4"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+            <div class="collapse navbar-collapse flex-grow-0 order-md-first" id="navcol-4">
+                <ul class="navbar-nav me-auto">
+                    <li class="nav-item"><a class="nav-link active" href="#">Overview</a></li>
+                    <li class="nav-item"><a class="nav-link" href="setting.html">Setting</a></li>
+                </ul>
+                <div class="d-md-none my-2"><button class="btn btn-light me-2" type="button">Button</button><button class="btn btn-primary" type="button">Button</button></div>
+            </div>
+            <div class="d-none d-md-block"><button class="btn btn-light me-2" type="button">Log Off</button></div>
+        </div>
+    </nav>
+    <div class="container">
+        <div class="row">
+            <div class="col">
+                <p>SIP Status</p>
+            </div>
+            <div class="col">
+                <p id="sipStatus">No Status</p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <p>CPU Status</p>
+            </div>
+            <div class="col">
+                <p id="cpuStatus">No Status</p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <p>RAM Status</p>
+            </div>
+            <div class="col">
+                <p id="ramStatus">No Status</p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <p>Storage Status</p>
+            </div>
+            <div class="col">
+                <p id="storageStatus">No Status</p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <p>Network Status</p>
+            </div>
+            <div class="col">
+                <p id="networkStatus">No Status</p>
+            </div>
+        </div>
+    </div>
+    <div class="container">
+        <div class="row">
+            <div class="col">
+                <p>Dial To</p>
+            </div>
+            <div class="col"><input type="text" id="dialNumber" name="dialNumber"></div>
+            <div class="col"><button class="btn btn-primary btn-lg" id="dialButton" type="button">Dial</button></div>
+        </div>
+    </div>
+    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/jquery-3.7.1.js"></script>
+    <script src="assets/js/socket.io.js"></script>
+    <script src="assets/js/app.js"></script>
+</body>
+
+</html>

WebContentt/public/login.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html data-bs-theme="light" lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <title>SIPIntercom</title>
+    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/css/Font%20Awesome%205%20Brands.css">
+    <link rel="stylesheet" href="assets/css/Font%20Awesome%205%20Duotone.css">
+    <link rel="stylesheet" href="assets/css/Font%20Awesome%205%20Pro.css">
+    <link rel="stylesheet" href="assets/css/Font%20Awesome%206%20Brands.css">
+    <link rel="stylesheet" href="assets/css/Font%20Awesome%206%20Duotone.css">
+    <link rel="stylesheet" href="assets/css/Font%20Awesome%206%20Pro.css">
+    <link rel="stylesheet" href="assets/css/FontAwesome.css">
+    <link rel="stylesheet" href="assets/css/all.min.css">
+    <link rel="stylesheet" href="assets/css/Navbar-Centered-Brand-icons.css">
+</head>
+
+<body onload="loginload()">
+    <section class="position-relative py-4 py-xl-5">
+        <div class="container">
+            <div class="row mb-5">
+                <div class="col-md-8 col-xl-6 text-center mx-auto">
+                    <h2>Log in</h2>
+                    <p class="w-lg-50">SIP Intercom</p>
+                </div>
+            </div>
+            <div class="row d-flex justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <div class="card mb-5">
+                        <div class="card-body d-flex flex-column align-items-center">
+                            <div class="bs-icon-xl bs-icon-circle bs-icon-primary bs-icon my-4"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-person">
+                                    <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664z"></path>
+                                </svg></div>
+                            <form class="text-center" method="post">
+                                <div class="mb-3"><input class="form-control" type="email" name="username" placeholder="Username"></div>
+                                <div class="mb-3"><input class="form-control" type="password" name="password" placeholder="Password"></div>
+                                <div class="mb-3"><button class="btn btn-primary d-block w-100" type="submit">Login</button></div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/jquery-3.7.1.js"></script>
+    <script src="assets/js/socket.io.js"></script>
+    <script src="assets/js/app.js"></script>
+</body>
+
+</html>

WebContentt/public/setting.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html data-bs-theme="light" lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <title>SIPIntercom</title>
+    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/css/Font%20Awesome%205%20Brands.css">
+    <link rel="stylesheet" href="assets/css/Font%20Awesome%205%20Duotone.css">
+    <link rel="stylesheet" href="assets/css/Font%20Awesome%205%20Pro.css">
+    <link rel="stylesheet" href="assets/css/Font%20Awesome%206%20Brands.css">
+    <link rel="stylesheet" href="assets/css/Font%20Awesome%206%20Duotone.css">
+    <link rel="stylesheet" href="assets/css/Font%20Awesome%206%20Pro.css">
+    <link rel="stylesheet" href="assets/css/FontAwesome.css">
+    <link rel="stylesheet" href="assets/css/all.min.css">
+    <link rel="stylesheet" href="assets/css/Navbar-Centered-Brand-icons.css">
+</head>
+
+<body onload="settingload()">
+    <nav class="navbar navbar-expand-md bg-body py-3">
+        <div class="container"><a class="navbar-brand d-flex align-items-center" href="#"><span class="bs-icon-sm bs-icon-rounded bs-icon-primary d-flex justify-content-center align-items-center me-2 bs-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-bezier">
+                        <path fill-rule="evenodd" d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"></path>
+                        <path d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z"></path>
+                    </svg></span><span>SIP Intercom</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-4"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+            <div class="collapse navbar-collapse flex-grow-0 order-md-first" id="navcol-4">
+                <ul class="navbar-nav me-auto">
+                    <li class="nav-item"><a class="nav-link" href="index.html">Overview</a></li>
+                    <li class="nav-item"><a class="nav-link active" href="#">Setting</a></li>
+                </ul>
+                <div class="d-md-none my-2"><button class="btn btn-light me-2" type="button">Button</button><button class="btn btn-primary" type="button">Button</button></div>
+            </div>
+            <div class="d-none d-md-block"><button class="btn btn-light me-2" type="button">Log Off</button></div>
+        </div>
+    </nav>
+    <div class="container">
+        <form>
+            <div class="col">
+                <div class="row">
+                    <div class="col"><label class="col-form-label">Login Username</label></div>
+                    <div class="col"><input class="form-control" type="text" id="webUsername" name="webUsername" placeholder="Login Username"></div>
+                </div>
+                <div class="row">
+                    <div class="col"><label class="col-form-label">Login Password</label></div>
+                    <div class="col"><input class="form-control" type="text" id="webPassword" name="webPassword" placeholder="Login Password"></div>
+                </div>
+            </div>
+            <div class="col">
+                <div class="row">
+                    <div class="col"><button class="btn btn-primary btn-lg" type="button">Save&nbsp;&nbsp;<svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
+                                <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
+                                <path d="M48 96V416c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V170.5c0-4.2-1.7-8.3-4.7-11.3l33.9-33.9c12 12 18.7 28.3 18.7 45.3V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96C0 60.7 28.7 32 64 32H309.5c17 0 33.3 6.7 45.3 18.7l74.5 74.5-33.9 33.9L320.8 84.7c-.3-.3-.5-.5-.8-.8V184c0 13.3-10.7 24-24 24H104c-13.3 0-24-10.7-24-24V80H64c-8.8 0-16 7.2-16 16zm80-16v80H272V80H128zm32 240a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"></path>
+                            </svg></button></div>
+                </div>
+            </div>
+        </form>
+    </div>
+    <div class="container">
+        <form>
+            <div class="row">
+                <div class="col"><label class="col-form-label">SIP Server</label></div>
+                <div class="col"><input class="form-control" type="text" id="sipServer" name="sipServer" placeholder="SIP Server"></div>
+            </div>
+            <div class="row">
+                <div class="col"><label class="col-form-label">SIP Port</label></div>
+                <div class="col"><input class="form-control" type="text" id="sipPort" name="sipPort" placeholder="SIP Portnumber"></div>
+            </div>
+            <div class="row">
+                <div class="col"><label class="col-form-label">SIP Username</label></div>
+                <div class="col"><input class="form-control" type="text" id="sipUsername" name="sipUsername" placeholder="SIP Username"></div>
+            </div>
+            <div class="row">
+                <div class="col"><label class="col-form-label">SIP Password</label></div>
+                <div class="col"><input class="form-control" type="text" id="sipPassword" name="sipPassword" placeholder="SIP Password"></div>
+            </div>
+            <div class="row">
+                <div class="col"><button class="btn btn-primary btn-lg" type="button">Save&nbsp;&nbsp;<svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
+                            <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
+                            <path d="M48 96V416c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V170.5c0-4.2-1.7-8.3-4.7-11.3l33.9-33.9c12 12 18.7 28.3 18.7 45.3V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96C0 60.7 28.7 32 64 32H309.5c17 0 33.3 6.7 45.3 18.7l74.5 74.5-33.9 33.9L320.8 84.7c-.3-.3-.5-.5-.8-.8V184c0 13.3-10.7 24-24 24H104c-13.3 0-24-10.7-24-24V80H64c-8.8 0-16 7.2-16 16zm80-16v80H272V80H128zm32 240a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"></path>
+                        </svg></button></div>
+            </div>
+        </form>
+    </div>
+    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/jquery-3.7.1.js"></script>
+    <script src="assets/js/socket.io.js"></script>
+    <script src="assets/js/app.js"></script>
+</body>
+
+</html>