⚡ Upgrade design & moved backend here & login and settings work with api

2024-09-29 18:04:41 +02:00
parent 42d3212624
commit f2d1eb4289
43 changed files with 1881 additions and 359 deletions
@@ -0,0 +1,142 @@
+.authContainer {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 50px;
+	padding: 15svh;
+	width: 100svw;
+	height: 100svh;
+
+	& > .appLogo {
+		margin-top: -50px;
+		width: 30svw;
+		max-width: 150px;
+		height: auto;
+	}
+
+	& > .formContainer {
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		gap: 10px;
+		padding: 20px 30px;
+		width: 95svw;
+		max-width: 450px;
+		border: 2px solid #fefefa;
+		border-radius: 7px;
+		background-color: #d94253;
+
+		& > .formTitle {
+			margin-bottom: 20px;
+			font-size: 2rem;
+			font-weight: 300;
+			text-align: center;
+			color: #fefefa;
+		}
+
+		& > .form {
+			display: flex;
+			flex-direction: column;
+			align-items: stretch;
+			gap: 20px;
+
+			& > .error {
+				text-align: center;
+				color: #fefefa;
+			}
+
+			& > .inputContainer {
+				position: relative;
+				display: grid;
+
+				& > .inputLabel {
+					position: absolute;
+					top: 50%;
+					left: 15px;
+					transform: translateY(-50%);
+					padding: 5px;
+					background-color: #d94253;
+					color: #fefefa;
+					user-select: none;
+					pointer-events: none;
+					transition: top 0.3s ease, left 0.3s ease,
+						font-size 0.3s ease, transform 0.3s ease;
+				}
+
+				& > .input {
+					padding: 10px;
+					border: 1px solid #fefefa;
+					border-radius: 5px;
+					background-color: #d94253;
+					outline: none;
+					font-size: 1em;
+					color: #fefefa;
+
+					&:focus + .inputLabel,
+					&:not(:placeholder-shown) + .inputLabel {
+						top: 0;
+						left: 10px;
+						transform: translateY(-50%);
+						font-size: 0.9em;
+					}
+				}
+			}
+
+			& > .forgetLink {
+				position: relative;
+				width: max-content;
+				font-size: 0.8rem;
+				color: #dff8f2;
+				cursor: pointer;
+
+				&::after {
+					content: '';
+					position: absolute;
+					bottom: 0;
+					left: 0;
+					display: block;
+					width: 0;
+					height: 1px;
+					background-color: #dff8f2;
+					transition: width 0.3s ease;
+				}
+
+				&:hover::after {
+					width: 100%;
+				}
+			}
+		}
+
+		& > .buttonsContainer {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			gap: 30px;
+			margin-top: 15px;
+
+			& > .submitButton {
+				position: relative;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				gap: 10px;
+				padding: 7px 42px;
+				border: 1px solid #fefefa;
+				border-radius: 5px;
+				background-color: #fefefa;
+				font-size: 0.9rem;
+				color: #d94253;
+				cursor: pointer;
+
+				& > svg {
+					position: absolute;
+					top: 50%;
+					right: 10px;
+					transform: translateY(-50%);
+					width: 20px;
+				}
+			}
+		}
+	}
+}