Make accounts frontend!

public/src/assets/style.css

@@ -1,15 +1,10 @@
+@import url("https://fonts.googleapis.com/css2?family=WDXL+Lubrifont+JP+N&display=swap");
+
 body {
   margin: 0;
   overflow: hidden;
 }
 
-@font-face {
-  font-family: "Changa";
-  src: url("fonts/changa.woff") format("opentype");
-  font-weight: normal;
-  font-style: normal;
-}
-
 .header {
   width: 100%;
   height: 90px;
@@ -18,7 +13,12 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-family: "Changa";
+  font-family: "WDXL Lubrifont JP N", sans-serif;
+}
+
+button {
+  font-family: "WDXL Lubrifont JP N", sans-serif;
+  font-size: 18px;
 }
 
 .logo {
@@ -32,17 +32,100 @@ body {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 500px;
-  height: 500px;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
+  width: 400px;
+  padding-top: 20px;
+  background-color: #1b262c70;
+  backdrop-filter: blur(8px);
+  display: none;
+  border-radius: 30px;
   justify-content: center;
   align-items: center;
   z-index: 9999;
 }
 
+.close {
+  position: absolute;
+  top: 5px;
+  right: 15px;
+  font-size: 24px;
+  cursor: pointer;
+  font-size: 29px;
+  color: white;
+}
+
+.close:hover {
+  color: #fa908c;
+}
+
+.popup.active {
+  display: flex;
+}
+
 .popup-tab {
   display: none;
+  width: calc(100% - 60px);
+  height: calc(100% - 60px);
+  padding: 20px 30px;
+  border-radius: 8px;
+  padding: 30px;
+}
+
+.info {
+  margin-bottom: 10px;
+  color: red;
+  font-weight: bold;
+  opacity: none;
+}
+
+.info:empty::before {
+  content: "\00a0";
+  visibility: hidden;
+  display: inline-block;
+}
+
+.info.active {
+  opacity: 1;
+}
+
+.form {
+  display: flex;
+  gap: 10px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 80%;
+}
+
+.form input {
+  padding: 10px;
+  width: 80%;
+  border: 1px solid #ccc;
+  border-radius: 12px;
+}
+
+.form label {
+  font-size: 16px;
+  font-family: "WDXL Lubrifont JP N", sans-serif;
+  color: white;
+}
+
+.form button {
+  margin-top: 20px;
+  padding: 10px;
+  background-color: #3498db;
+  color: white;
+  border: none;
+  width: 25%;
+  border-radius: 12px;
+  cursor: pointer;
+}
+
+.form button:hover {
+  background-color: #2980b9;
+}
+
+.popup-tab.active {
+  display: block;
 }
 
 .header-right {