add login, register layout

2025-11-27 13:48:24 +07:00
parent fecb811a5c
commit 5c6a235ece
9 changed files with 420 additions and 2 deletions
@@ -24,4 +24,28 @@
 		transform: translateY(-2px);
 		box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
 	}
+}
+
+.divider {
+	text-align: center;
+	margin: 20px 0;
+	position: relative;
+	color: #9ca3af;
+	font-size: 14px;
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 0;
+		right: 0;
+		height: 1px;
+		background: #e5e7eb;
+	}
+
+	span {
+		background: white;
+		padding: 0 15px;
+		position: relative;
+	}
 }
@@ -0,0 +1,175 @@
+.login-container-wrapper {
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	min-height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #333;
+}
+
+.login-container {
+	background: white;
+	border-radius: 20px;
+	padding: 40px;
+	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+	width: 100%;
+	max-width: 500px;
+}
+
+.logo {
+	text-align: center;
+	margin-bottom: 30px;
+
+	h1 {
+		font-size: 28px;
+		font-weight: 700;
+		color: #1f2937;
+		margin-bottom: 5px;
+	}
+
+	p {
+		color: #6b7280;
+		font-size: 14px;
+	}
+}
+
+.form-group {
+	margin-bottom: 20px;
+}
+
+.form-row {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 15px;
+	margin-bottom: 20px;
+}
+
+.form-label {
+	display: block;
+	margin-bottom: 8px;
+	font-weight: 500;
+	color: #374151;
+	font-size: 14px;
+}
+
+.form-label.required::after {
+	content: ' *';
+	color: #dc2626;
+}
+
+.form-input {
+	width: 100%;
+	padding: 12px 16px;
+	border: 2px solid #e5e7eb;
+	border-radius: 10px;
+	font-size: 16px;
+	transition: all 0.3s;
+	background: #f9fafb;
+}
+
+.form-options {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 20px;
+}
+
+.form-checkbox {
+	display: flex;
+	align-items: center;
+
+	input {
+		width: 18px;
+		height: 18px;
+		margin-right: 10px;
+		accent-color: #6366f1;
+	}
+
+	label {
+		font-size: 14px;
+		color: #6b7280;
+		cursor: pointer;
+
+		a {
+			color: #6366f1;
+			text-decoration: none;
+		}
+	}
+}
+
+.forgot-password {
+	font-size: 14px;
+	color: #6366f1;
+	text-decoration: none;
+	font-weight: 500;
+	transition: color 0.3s;
+}
+
+.btn {
+	width: 100%;
+	padding: 14px;
+	background: linear-gradient(135deg, #6366f1, #8b5cf6);
+	color: white;
+	border: none;
+	border-radius: 10px;
+	font-size: 16px;
+	font-weight: 600;
+	cursor: pointer;
+	transition: all 0.3s;
+	margin-bottom: 20px;
+}
+
+.register-link {
+	text-align: center;
+	margin-top: 20px;
+
+	a {
+		color: #6366f1;
+		text-decoration: none;
+		font-weight: 500;
+		transition: color 0.3s;
+	}
+}
+
+.features {
+	margin-top: 30px;
+	padding-top: 20px;
+	border-top: 1px solid #e5e7eb;
+}
+
+.feature {
+	display: flex;
+	align-items: center;
+	margin-bottom: 10px;
+	font-size: 13px;
+	color: #6b7280;
+}
+
+.feature-icon {
+	width: 16px;
+	height: 16px;
+	margin-right: 8px;
+	color: #10b981;
+}
+
+.subscription-info {
+	background: #f0f9ff;
+	border: 1px solid #bae6fd;
+	border-radius: 10px;
+	padding: 15px;
+	margin-bottom: 20px;
+
+	h4 {
+		color: #0369a1;
+		font-size: 14px;
+		font-weight: 600;
+		margin-bottom: 8px;
+	}
+
+	p {
+		color: #0c4a6e;
+		font-size: 13px;
+		line-height: 1.4;
+	}
+}