All user related backend and frontend finished

Batsuuri77 · May 26, 2024 · 5f75735 · 5f75735
1 parent a181f08
commit 5f75735
Show file tree

Hide file tree

Showing 5 changed files with 485 additions and 452 deletions.
diff --git a/client/css/style.css b/client/css/style.css
@@ -22,17 +22,23 @@ a,p{
 	text-decoration:none;
 	}
 
-form div{margin-top:20px;position:relative}
-
+form div {
+	margin-top:10px;
+	position:relative
+}
 
 .fcolor{
     color:#b6f1f1;
-  }
+}
+
+.textcolor{
+	color: #333333;
+}
 
 
-.wrap{margin: 10px auto;max-width:414px;max-height:800px;overflow-x:hidden;border-radius:25px;background:#ffffff;}
+.wrap{padding: 20px 10px; margin: 10px auto;max-width:414px;max-height:800px;overflow-x:hidden;border-radius:25px;background:#ffffff;}
 .wrap1{margin: 10px auto;max-width:750px;max-height:500px;overflow-x:hidden;border-radius:25px;background:#ffffff;}
-	.wrap2{margin: 10px auto;max-width:800px;max-height:1100px;overflow-x:hidden;border-radius:10px;background:#f9fafa;
+.wrap2{margin: 10px auto;max-width:800px;max-height:1100px;overflow-x:hidden;border-radius:10px;background:#f9fafa;
 	}
 
 .wrap.login {
@@ -43,10 +49,37 @@ form div{margin-top:20px;position:relative}
 	height: 100vh;
 	text-align: center;
 }
+
 .wrap.login img {
 	max-width: 70%;
 	margin-bottom: 20px;
 }
+
+
+/*Log in*/
+.login form{width:80%;margin:5px auto}
+.login form div input{width:100%;height:40px;line-height:20px;border:none;border-bottom:1px solid #aaaaaa;background:none;outline:none;box-shadow: none}
+#loginButton {
+    margin-top: 20px;
+}
+
+.wrap.signup {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	height: 100vh;
+	padding: 20px 0;
+	text-align: center;
+}
+.signup form{width:80%;margin:5px 0}
+.signup form div input{width:100%;height:40px;line-height:20px;border:none;border-bottom:1px solid #aaaaaa;background:none;outline:none;box-shadow: none}
+
+#signupButton{
+	margin-top: 20px;
+}
+
+
 .pb{padding-bottom:60px}
 
 .fb1{
@@ -55,13 +88,19 @@ form div{margin-top:20px;position:relative}
 	height: 40px;
 	margin-left: 40%;
 }
-/*Log in*/
-.login form{width:80%;margin:5px auto}
-.login form div input{width:100%;height:40px;line-height:20px;border:none;border-bottom:1px solid #aaaaaa;background:none;outline:none;box-shadow: none}
-.login form div.button{background:#454444;margin-top:20px;}
-
 
+#profileInfo {
+	display: flex;
+	flex-direction: column;
+	text-align: center;
+    justify-content: center;
+    align-items: center;
+	gap: 15px;
+}
 
+.profile-table td {
+    padding: 10px;
+}
 
 /** Gift list*/
 .ilist li{position:relative; }
@@ -75,59 +114,53 @@ form div{margin-top:20px;position:relative}
 
 
 .footer{
-	background-color:#454444;
+	background-color:#0D6EFD;
 }
+
 .header{
-	background-color:#454444;
+	background-color:#0D6EFD;
 }
+
 .sidenav {
-	height: 100%;
+	height: auto;
 	width: 0;
+	border-radius: 0.5em;
 	position: fixed;
 	z-index: 1;
 	top: 0;
 	left: 0;
-	background-color: #454444;
+	background-color: #eceaea;
 	overflow-x: hidden;
 	transition: 0.5s;
 	padding-top: 60px;
-  }
+}
 
-  .sidenav a {
+.sidenav a {
 	padding: 8px 8px 8px 32px;
-	text-decoration: none;
-	font-size: 25px;
-	color: #818181;
-	display: block;
-	transition: 0.3s;
-  }
+    text-decoration: none;
+    font-size: 14px;
+    color: #333333;
+    display: block;
+    transition: 0.3s;
+}
 
-  .sidenav a:hover {
-	color: #f1f1f1;
-  }
+.sidenav a:hover {
+	text-decoration: underline;
+	color: #000;
+	font-weight: bold;
+}
 
-  .sidenav .closebtn {
+.sidenav .closebtn {
 	position: absolute;
 	top: 0;
 	right: 25px;
 	font-size: 36px;
 	margin-left: 50px;
-  }
-
-  @media screen and (max-height: 450px) {
-	.sidenav {padding-top: 15px;}
-	.sidenav a {font-size: 18px;}
-  }
-
-  .profile-info {
-	text-align: left;
-	margin: 20px 0;
 }
-.profile-info div {
-	margin-bottom: 10px;
-}
-.profile-info label {
-	font-weight: bold;
+
+@media screen and (max-height: 450px) {
+.sidenav {padding-top: 15px;}
+.sidenav a {font-size: 18px;}
 }
 
 .t1{
@@ -136,24 +169,40 @@ font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 text-align: center;
 }
 
-.container {
-	max-width: 500px;
-	margin: 0 auto;
-	padding: 20px;
+h3{
 	text-align: center;
+	margin-bottom: 20px;
 }
-input, button {
+
+.container {
+	display: flex;
+	flex-direction: column;
+	margin: 0px 20px;
+}
+
+.container label {
+	align-self: flex-start;
+}
+
+.container input, .container select, .container button {
+	width: 100%;
+}
+
+
+
+input, button, select {
 	width: 100%;
 	padding: 10px;
-	margin: 10px 0;
 }
+
 .flashcard-container {
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	height: 300px;
 	perspective: 1000px;
 }
+
 .flashcard {
 	width: 300px;
 	height: 200px;
@@ -171,9 +220,11 @@ input, button {
 	transform-style: preserve-3d;
 	transition: transform 0.6s;
 }
+
 .flashcard.is-flipped {
 	transform: rotateY(180deg);
 }
+
 .flashcard > .flashcard-face {
 	position: absolute;
 	width: 100%;
@@ -183,21 +234,22 @@ input, button {
 	align-items: center;
 	justify-content: center;
 }
+
 .flashcard > .flashcard-back {
 	transform: rotateY(180deg);
 }
+
 .navigation {
 	margin-top: 20px;
 	display: flex;
 	justify-content: center;
 }
+
 button {
 	padding: 10px;
 	margin: 0 10px;
 }
 
-
-
 .b1{
 	margin-left: 0%;
 	height: 50px;
@@ -245,3 +297,4 @@ button {
 	justify-content: start;
 	color: #333333;
 }
+