Finished Reg/Auth forms.

bb-hackathon · May 22, 2024 · 980c376 · 980c376
1 parent 19749bb
commit 980c376
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 75 deletions.
diff --git a/frontend/css/auth.css b/frontend/css/auth.css
@@ -1,4 +1,3 @@
-
 @import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
 
 * {
@@ -17,6 +16,7 @@ body {
 }
 
 h1 {
+	color: #FFFFFF;
 	font-weight: bold;
 	margin: 0;
 }
@@ -34,20 +34,21 @@ p {
 }
 
 span {
+	color: #FFFFFF;
 	font-size: 12px;
 }
 
 a {
-	color: #333;
+	color: #FFFFFF;
 	font-size: 14px;
 	text-decoration: none;
 	margin: 15px 0;
 }
 
 button {
+	margin: 20px;
 	border-radius: 20px;
-	border: 1px solid #FF4B2B;
-	background-color: #FF4B2B;
+	background-color: #7B68EE;
 	color: #FFFFFF;
 	font-size: 12px;
 	font-weight: bold;
@@ -71,7 +72,7 @@ button.ghost {
 }
 
 form {
-	background-color: #FFFFFF;
+	background-color: #2E3440;
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -83,7 +84,8 @@ form {
 
 input {
 	background-color: #eee;
-	border: none;
+	border: 0;
+	outline: none !important;
 	padding: 12px 15px;
 	margin: 8px 0;
 	width: 100%;
@@ -160,13 +162,13 @@ input {
 }
 
 .overlay {
-	background: #FF416C;
-	background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
-	background: linear-gradient(to right, #FF4B2B, #FF416C);
+	background: #7366BD;
+	background: -webkit-linear-gradient(to right, #3B4252, #7366BD);
+	background: linear-gradient(to right, #7B68EE, #7366BD);
 	background-repeat: no-repeat;
 	background-size: cover;
 	background-position: 0 0;
-	color: #FFFFFF;
+	color: #2E3440;
 	position: relative;
 	left: -100%;
 	height: 100%;
@@ -224,29 +226,4 @@ input {
 	margin: 0 5px;
 	height: 40px;
 	width: 40px;
-}
-
-footer {
-    background-color: #222;
-    color: #fff;
-    font-size: 14px;
-    bottom: 0;
-    position: fixed;
-    left: 0;
-    right: 0;
-    text-align: center;
-    z-index: 999;
-}
-
-footer p {
-    margin: 10px 0;
-}
-
-footer i {
-    color: red;
-}
-
-footer a {
-    color: #3c97bf;
-    text-decoration: none;
 }
diff --git a/frontend/scripts/auth.js b/frontend/scripts/auth.js
@@ -3,9 +3,9 @@ const signInButton = document.getElementById('signIn');
 const container = document.getElementById('container');
 
 signUpButton.addEventListener('click', () => {
-	container.classList.add("right-panel-active");
+    container.classList.add("right-panel-active");
 });
 
 signInButton.addEventListener('click', () => {
-	container.classList.remove("right-panel-active");
+    container.classList.remove("right-panel-active");
 });
diff --git a/frontend/templates/auth.html b/frontend/templates/auth.html
@@ -6,62 +6,40 @@
         <link rel="stylesheet" href="../css/auth.css">
 	</head>
 	<body>
-		<h2>Weekly Coding Challenge #1: Sign in/up Form</h2>
+		<h2>Команда БАДИБИЛДИНГ</h2>
 		<div class="container" id="container">
 			<div class="form-container sign-up-container">
 				<form action="#">
-					<h1>Create Account</h1>
-					<div class="social-container">
-						<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
-						<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
-						<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
-					</div>
-					<span>or use your email for registration</span>
-					<input type="text" placeholder="Name" />
-					<input type="email" placeholder="Email" />
-					<input type="password" placeholder="Password" />
-					<button>Sign Up</button>
+					<h1>Создать аккаунт</h1>
+					<input type="text" placeholder="Логин" />
+					<input type="password" placeholder="Пароль" />
+					<button style="border: none; cursor: pointer;">Зарегистрироваться</button>
 				</form>
 			</div>
 			<div class="form-container sign-in-container">
 				<form action="#">
-					<h1>Sign in</h1>
-					<div class="social-container">
-						<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
-						<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
-						<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
-					</div>
-					<span>or use your account</span>
-					<input type="email" placeholder="Email" />
-					<input type="password" placeholder="Password" />
-					<a href="#">Forgot your password?</a>
-					<button>Sign In</button>
+					<h1>Войти в аккаунт</h1>
+					<span></span>
+					<input type="email" placeholder="Логин" />
+					<input type="password" placeholder="Пароль" />
+					<button style="border: none; cursor: pointer;">Войти</button>
 				</form>
 			</div>
 			<div class="overlay-container">
 				<div class="overlay">
 					<div class="overlay-panel overlay-left">
-						<h1>Welcome Back!</h1>
-						<p>To keep connected with us please login with your personal info</p>
-						<button class="ghost" id="signIn">Sign In</button>
+						<h1>Рад снова тебя видеть!</h1>
+						<p>Уже есть аккаунт? Самое время войти!</p>
+						<button class="ghost" id="signIn" style="cursor: pointer; border-color: #FFF;">Вход</button>
 					</div>
 					<div class="overlay-panel overlay-right">
-						<h1>Hello, Friend!</h1>
-						<p>Enter your personal details and start journey with us</p>
-						<button class="ghost" id="signUp">Sign Up</button>
+						<h1>Привет, друг!</h1>
+						<p>Давай познакомимся и начнём наше путешествие!</p>
+						<button class="ghost" id="signUp" style="cursor: pointer; border-color: #FFF;">Зарегистрироваться</button>
 					</div>
 				</div>
 			</div>
 		</div>
-
-		<footer>
-			<p>
-				Created with <i class="fa fa-heart"></i> by
-				<a target="_blank" href="https://florin-pop.com">Florin Pop</a>
-				- Read how I created this and how you can join the challenge
-				<a target="_blank" href="https://www.florin-pop.com/blog/2019/03/double-slider-sign-in-up-form/">here</a>.
-			</p>
-		</footer>
 	</body>
 
 	<script src="../scripts/auth.js"></script>