First working version

web-interface/css/popup.css

@@ -0,0 +1,87 @@
+* {
+box-sizing: border-box;
+}
+.openBtn {
+display: flex;
+justify-content: left;
+}
+.openButton {
+border: none;
+border-radius: 5px;
+background-color: #1c87c9;
+color: white;
+padding: 14px 20px;
+cursor: pointer;
+position: fixed;
+}
+.loginPopup {
+position: relative;
+text-align: center;
+width: 100%;
+}
+.formPopup {
+display: none;
+position: fixed;
+left: 25%;
+top: 5%;
+transform: translate(-30%, -5%);
+border: 3px solid #999999;
+z-index: 9;
+}
+.formContainer {
+max-width: 300px;
+padding: 20px;
+background-color: #fff;
+}
+.formContainer input[type=text],
+.formContainer input[type=number],
+.formContainer select,
+.formContainer radio,
+.formContainer input[type=password] {
+width: 100%;
+padding: 15px;
+margin: 5px 0 20px 0;
+border: none;
+background: #eee;
+}
+.formContainer input[type=text]:focus,
+.formContainer input[type=number]:focus,
+.formContainer select:focus,
+.formContainer input[type=password]:focus {
+background-color: #ddd;
+outline: none;
+}
+.formContainer .btn {
+padding: 12px 20px;
+border: none;
+background-color: #8ebf42;
+color: #fff;
+cursor: pointer;
+width: 100%;
+margin-bottom: 15px;
+opacity: 0.8;
+}
+.formContainer .cancel {
+background-color: #cc0000;
+}
+.formContainer .wait {
+background-color: #ffffff;
+}
+.formContainer .radio {
+vertical-align: middle;
+padding: 12px 20px;
+height: 30px;
+width: 30px;
+background-color: #eee;
+border-radius: 25%;
+}
+.formContainer .btn:hover,
+.openButton:hover {
+opacity: 1;
+}
+.radioLeft {
+    display: block;
+  text-align: left;
+  margin-left: 25%;
+  margin-bottom: 20px;
+}