From f68e0596018f8c513003df00b8e435cf0dfbd179 Mon Sep 17 00:00:00 2001
From: Nawed Ali <83456083+nawed2611@users.noreply.github.com>
Date: Sun, 23 Jan 2022 18:12:07 +0530
Subject: [PATCH] Redesigned UI

---
 Frontend/Student_Login.html    | 120 ++++++------
 Frontend/css/Student_Login.css | 338 ++++++++++++++++++---------------
 Frontend/css/index.css         | 102 +++++-----
 Frontend/index.html            |  49 ++---
 4 files changed, 333 insertions(+), 276 deletions(-)
diff --git a/Frontend/Student_Login.html b/Frontend/Student_Login.html
index 5230b1c..d8ba4cc 100644
--- a/Frontend/Student_Login.html
+++ b/Frontend/Student_Login.html
@@ -1,76 +1,84 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ERG-Login</title>
+	<meta charset="UTF-8">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>ERG-Login</title>
 	<link rel="stylesheet" type="text/css" href="css/Student_Login.css">
 </head>
+
 <body>
 
+	<div class="login-wrap">
+		<div class="login-html">
+
+			<input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">Sign
+				In</label>
 
+			<input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">Sign Up</label>
+
+			<div class="login-form">
+				<div class="sign-in-htm">
 
-<div class="login-wrap">
-	<div class="login-html">
-		<input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">Sign In</label>
-		<input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">Sign Up</label>
-		<div class="login-form">
-			<div class="sign-in-htm">
-				
 					<form method="post" action="/login">
 
-				<div class="group">
-          			
-          			<input  id="user" type="text" class="input" name="username" required placeholder="username">
-          			<label for="user" class="label"></label>
-        		</div>
-				<div class="group">
-					<label for="pass" class="label"></label>
-					<input id="pass" type="password" class="input" data-type="password" name="password" placeholder="password" required>
-				</div>
-				
-				<div class="group">
-					<input type="submit" class="button" value="Sign In">
-				</div>
-			</form>
-				<div class="foot-lnk">
-					<a href="#forgot">Forgot Password?</a>
+						<div class="group">
+
+							<input id="user" type="text" class="input" name="username" required placeholder="Your Username">
+							<label for="user" class="label"></label>
+						</div>
+
+						<div class="group">
+							<label for="pass" class="label"></label>
+							<input id="pass" type="password" class="input" data-type="password" name="password"
+								placeholder="Your Password" required>
+						</div>
+
+						<div class="group">
+							<input type="submit" class="button" value="Sign In">
+						</div>
+					</form>
+
+					<div class="foot-lnk">
+						<a href="#forgot">Forgot Password?</a>
+					</div>
+
 				</div>
-			</div>
-			<div class="sign-up-htm">
-				
+
+				<div class="sign-up-htm">
+
 					<form method="post" action="/signup">
-				<div class="group">
-					<label for="user" class="label"></label>
-					<input id="user" required type="text" class="input" name="username" placeholder="Username">
-				</div>
-				<div class="group">
-					<label for="pass" class="label"></label>
-					<input id="pass" required type="password" class="input" data-type="password" name="password" placeholder="password">
-				</div>
-				
+						<div class="group">
+							<label for="user" class="label"></label>
+							<input id="user" required type="text" class="input" name="username" placeholder="Your Username">
+						</div>
+						<div class="group">
+							<label for="pass" class="label"></label>
+							<input id="pass" required type="password" class="input" data-type="password" name="password"
+								placeholder="Your Password">
+						</div>
 
-				<div class="group">
-					<label for="pass" class="label"></label>
-					<input id="pass" required type="text" class="input" name="email" placeholder="email address">
-				</div>
-				<div class="group">
-					<input type="submit" class="button" value="Sign Up">
-				</div>
-			</form>
-			
-				<div class="foot-lnk">
-					<label for="tab-1">Already Member?</a>
+
+						<div class="group">
+							<label for="pass" class="label"></label>
+							<input id="pass" required type="text" class="input" name="email"
+								placeholder="Your Email ID">
+						</div>
+						<div class="group">
+							<input type="submit" class="button" value="Sign Up">
+						</div>
+					</form>
+
+					<div class="foot-lnk">
+						<label for="tab-1">Already Member?</a>
+					</div>
 				</div>
 			</div>
 		</div>
 	</div>
-</div>
-
-
-
 
 </body>
- 
-</html>
+
+</html>
\ No newline at end of file
diff --git a/Frontend/css/Student_Login.css b/Frontend/css/Student_Login.css
index 92e81a5..d20f427 100644
--- a/Frontend/css/Student_Login.css
+++ b/Frontend/css/Student_Login.css
@@ -1,71 +1,93 @@
-body{
-	margin:0;
-	margin-left: 200px;
-	color:#6a6f8c;
- background: url("https://raw.githubusercontent.com/simranquirky/ExamResultGenerator/master/Frontend/assets/student-login-bg.jpg") no-repeat;
- background-position: 20% 55%;
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200&display=swap');
 
- backface-visibility: 
-	font:600 16px/18px 'Open Sans',sans-serif;
+body {
+	margin: 0;
+	margin-left: 200px;
+	color: #6a6f8c;
+	background: url("https://raw.githubusercontent.com/simranquirky/ExamResultGenerator/master/Frontend/assets/student-login-bg.jpg") no-repeat;
+	background-position: 20% 55%;
+	font: 600 16px/18px 'Outfit', sans-serif;;
 	background-color: lightyellow;
 }
-*,:after,:before{box-sizing:border-box}
-.clearfix:after,.clearfix:before{content:'';display:table}
-.clearfix:after{clear:both;display:block}
-a{color:inherit;text-decoration:none}
 
+*,
+:after,
+:before {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+.clearfix:after,
+.clearfix:before {
+	content: '';
+	display: table
+}
+
+.clearfix:after {
+	clear: both;
+	display: block
+}
+
+a {
+	color: inherit;
+	text-decoration: none
+}
+
+.login-wrap {
 
-.login-wrap{
-	
-	justify-content: right;
 	display: flex;
+	justify-content: right;
 	max-width: 440px;
 	min-height: 520px;
 	margin-top: 30px;
 	margin-left: 30%;
-	position:relative;
+	position: relative;
 	background-color: white;
-
-	box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
+	box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
 	padding: 5px 5px 5px 5px;
+	border-radius: 12px;
 }
-.login-html{
+
+.login-html {
 	width: 95%;
 	height: 95%;
-		position:absolute;
-		margin: 8px 8px 8px;
+	position: absolute;
+	margin: 8px 8px 8px;
 	padding: 35px 25px 25px;
 	background: white;
 	opacity: 1.2;
 	border: 2px solid yellow;
 }
+
 .login-html .sign-in-htm,
-.login-html .sign-up-htm{
-	top:0;
-	left:0;
-	right:0;
-	bottom:0;
-	position:absolute;
-	transform:rotateY(180deg);
-	backface-visibility:hidden;
-	transition:all .4s linear;
+.login-html .sign-up-htm {
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	position: absolute;
+	transform: rotateY(180deg);
+	backface-visibility: hidden;
+	transition: all .4s linear;
 }
+
 .login-html .sign-in,
 .login-html .sign-up,
-.login-form .group .check{
-	display:none;
+.login-form .group .check {
+	display: none;
 
 }
 
 
 
-.login-html .tab{
-	font-size:22px;
-	margin-right:15px;
-	padding-bottom:5px;
-	margin:0 15px 10px 0;
-	display:inline-block;
-	border-bottom:2px solid transparent;
+.login-html .tab {
+	font-size: 22px;
+	margin-right: 15px;
+	padding-bottom: 5px;
+	margin: 0 15px 10px 0;
+	display: inline-block;
+	border-bottom: 2px solid transparent;
 	color: grey;
 	font-weight: bold;
 
@@ -73,182 +95,198 @@ a{color:inherit;text-decoration:none}
 
 
 }
-.login-html .sign-in:checked + .tab,
-.login-html .sign-up:checked + .tab{
+
+.login-html .sign-in:checked+.tab,
+.login-html .sign-up:checked+.tab {
 	color: black;
-	
+
 	padding: 4px 4px 4px;
-	border-color:#1e90ff;
+	border-color: #1e90ff;
 
 }
-.login-form{
-	min-height:345px;
-	position:relative;
-	perspective:1000px;
-	transform-style:preserve-3d;
+
+.login-form {
+	min-height: 345px;
+	position: relative;
+	perspective: 1000px;
+	transform-style: preserve-3d;
 	margin-top: 10px;
 }
-.login-form .group{
-	margin-bottom:15px;
+
+.login-form .group {
+	margin-bottom: 15px;
 	margin-top: 30px;
 }
 
 .login-form .group .input,
-.login-form .group .button{
-	width:100%;
+.login-form .group .button {
+	width: 100%;
 	color: #fff;
-	display:block;
+	display: block;
 }
+
 .login-form .group .input,
-.login-form .group .button{
-	border:none;
-	padding:15px 20px;
+.login-form .group .button {
+	border: none;
+	padding: 15px 20px;
+	border-radius: 25px;
+	color: #595959;
+	background: white;
 	border-radius: 25px;
-   color: #595959;
-  background: white;
-  border-radius: 25px;
-  box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #ffffff73;
+	box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #ffffff73;
 }
 
+.tab{
+	cursor: pointer;
+}
 
+.login-form .group input[data-type="password"] {
 
-.login-form .group input[data-type="password"]{
-	text-security:circle;
-	-webkit-text-security:circle;
+	text-security: circle;
+	-webkit-text-security: circle;
 }
-.login-form .group .label{
+
+.login-form .group .label {
 	color: black;
 	font-size: 15px;
 	position: absolute;
-  top: 50%;
-  left: 45px;
-  pointer-events: none;
-  
-  transform: translateY(-50%);
-	
+	top: 50%;
+	left: 45px;
+	pointer-events: none;
+	transform: translateY(-50%);
+
 }
-.login-form .group .button{
+
+.login-form .group .button {
 
 	color: black;
-  font-size: 18px;
-  font-weight: 600;
-  background-color: yellow;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  border-radius: 25px;
-  box-shadow: 2px 2px 5px #babecc, -5px -5px 10px #ffffff73;
-  margin-bottom: 35px;
-}
-
-.login-form .group .input:hover{
+	font-size: 18px;
+	font-weight: 600;
+	background-color: yellow;
+	border: none;
+	outline: none;
+	cursor: pointer;
+	border-radius: 25px;
+	box-shadow: 2px 2px 5px #babecc, -5px -5px 10px #ffffff73;
+	margin-bottom: 35px;
+}
+
+.login-form .group .input:hover {
 	background-color: #fff;
 	color: black;
 }
-.login-form .group label .icon{
-	width:15px;
-	height:15px;
-	border-radius:2px;
-	position:relative;
-	display:inline-block;
-	background:rgba(255,255,255,.1);
+
+.login-form .group label .icon {
+	width: 15px;
+	height: 15px;
+	border-radius: 2px;
+	position: relative;
+	display: inline-block;
+	background: rgba(255, 255, 255, .1);
 }
+
 .login-form .group label .icon:before,
-.login-form .group label .icon:after{
-	content:'';
-	width:10px;
-	height:2px;
+.login-form .group label .icon:after {
+	content: '';
+	width: 10px;
+	height: 2px;
 	background: grey;
-	position:absolute;
-	transition:all .2s ease-in-out 0s;
+	position: absolute;
+	transition: all .2s ease-in-out 0s;
 }
-.login-form .group label .icon:before{
-	left:3px;
-	width:5px;
-	bottom:6px;
-	transform:scale(0) rotate(0);
+
+.login-form .group label .icon:before {
+	left: 3px;
+	width: 5px;
+	bottom: 6px;
+	transform: scale(0) rotate(0);
 }
-.login-form .group label .icon:after{
-	top:6px;
-	right:0;
-	transform:scale(0) rotate(0);
+
+.login-form .group label .icon:after {
+	top: 6px;
+	right: 0;
+	transform: scale(0) rotate(0);
 }
-.login-form .group .check:checked + label{
+
+.login-form .group .check:checked+label {
 	color: grey;
 	margin-left: 0px;
-	
+
 	font-weight: bold;
 	font-size: 20px;
 }
-.login-form .group .check:checked + label .icon{
-	background:aqua;
+
+.login-form .group .check:checked+label .icon {
+	background: aqua;
 
 }
-.login-form .group .check:checked + label .icon:before{
-	transform:scale(1) rotate(45deg);
+
+.login-form .group .check:checked+label .icon:before {
+	transform: scale(1) rotate(45deg);
 }
-.login-form .group .check:checked + label .icon:after{
-	transform:scale(1) rotate(-45deg);
+
+.login-form .group .check:checked+label .icon:after {
+	transform: scale(1) rotate(-45deg);
 }
-.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
-	transform:rotate(0);
+
+.login-html .sign-in:checked+.tab+.sign-up+.tab+.login-form .sign-in-htm {
+	transform: rotate(0);
 }
-.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
-	transform:rotate(0);
+
+.login-html .sign-up:checked+.tab+.login-form .sign-up-htm {
+	transform: rotate(0);
 }
 
-.hr{
-	height:2px;
-	margin:40px 0 30px 0;
-	background:rgba(255,255,255,.2);
+.hr {
+	height: 2px;
+	margin: 40px 0 30px 0;
+	background: rgba(255, 255, 255, .2);
 }
-.foot-lnk{
-	text-align:center;
+
+.foot-lnk {
+	text-align: center;
 	border-top: 2px solid grey;
 	margin-top: 20px;
-	padding-top:20px;
+	padding-top: 20px;
 }
 
 
-.group input:focus ~ label {
-  box-shadow: inset 2px 2px 5px #babecc, inset -1px -1px 2px #ffffff73;
+.group input:focus~label {
+	box-shadow: inset 2px 2px 5px #babecc, inset -1px -1px 2px #ffffff73;
 }
 
 .field:nth-child(2) {
-  margin-top: 20px;
+	margin-top: 20px;
 }
 
 .group span {
-  position: absolute;
-  width: 50px;
-  line-height: 50px;
-  color: #595959;
+	position: absolute;
+	width: 50px;
+	line-height: 50px;
+	color: #595959;
 }
 
 .login-form .group label {
-  position: absolute;
-  top: 50%;
-  left: 45px;
-  pointer-events: none;
-  color: yellow;
-  transform: translateY(-50%);
+	position: absolute;
+	top: 50%;
+	left: 45px;
+	pointer-events: none;
+	color: yellow;
+	transform: translateY(-50%);
 }
 
-
-
 @media screen and (max-width: 768px) {
-  body {
-    
-   background-position: bottom;
-   margin-left: 0px;
-   margin-left: -5px;
+	body {
 
-  }
+		background-position: bottom;
+		margin-left: 0px;
+		margin-left: -5px;
 
+	}
 
+	.login-wrap {
+		max-width: 400px;
+		min-height: 550px;
 
- .login-wrap{
- 	max-width: 400px;
- 	min-height: 550px;
- 	
- }
+	}
+}
\ No newline at end of file
diff --git a/Frontend/css/index.css b/Frontend/css/index.css
index 85cc2fe..9ce2961 100644
--- a/Frontend/css/index.css
+++ b/Frontend/css/index.css
@@ -1,67 +1,75 @@
-body{
-		
-		background-repeat: none;
-		background-color: white;
-	}
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200&display=swap');
 
-.head{
-margin:0px;
-max-width: 60%;
-height: 40px;
+body {
+	overflow-x: hidden;
+	font-family: 'Outfit', sans-serif;
 
-	}
-
-	header{
-	box-shadow:  0 8px 8px -4px lightblue;
-	color: grey;
-	padding-bottom: 5px;
-	height: 60px;
 }
 
-.one{
-	padding-top: 10px;
-	padding-left: 30px;
-	width: 60%;
-	align-content: left;
-	margin-top: 0;
+header {
+	display: flex;
+	justify-content: space-between;
+	flex-wrap: wrap;
+	color: rgb(110, 107, 107);
+	margin: 0 0 1rem;
+	padding: 1rem;
+	border-bottom: 1px solid black;
+	border-radius: 6px;
+	background-color: #f3f0e9;
+	height: 12vh;
+	box-shadow: 2px 3px 2px rgb(201, 201, 204);
+	backdrop-filter: blur(12px);
 
 }
-.two{
-	margin-top: -40px;
-	padding-top: 10px;
-	width: 25%;
-	margin-left: 75%;
-	
-	padding-left: 10px;
 
+.one {
+	display: flex;
+	flex-wrap: wrap;
 }
 
+.two {
+	display: flex;
+	flex-wrap: wrap;
+}
 
-
-button{
-	background-color: white;
-	border:none;
-	font-size: 20px;
+button {
+	border-radius: 6px;
+	border: none;
+	font-size: 1.2rem;
 	max-width: 200px;
-	margin-right: 10px;
-	padding: 5px 10px 5px;
+	margin: 1rem;
+	padding: 12px;
+	font-family: 'Outfit', sans-serif;
+	background-color: rgba(235, 235, 215, 0.74);
 }
 
-button:hover{
-	background-color: yellow;
-	border-radius: 5px;
+button:hover {
+	background-color: rgba(255, 255, 0, 0.74);
+	cursor: pointer;
 }
-.description{
-	color: #c0c0c0;
+
+.description {
+	color: #838080;
 	letter-spacing: 0.5px;
-	margin-top: 5%;
+	display: flex;
+	margin: 2rem;
+	padding: 2rem;
+	background-image: radial-gradient(#4f4f57ce 0.5px, #ffffff59 0.5px);
+	background-size: 10px 10px;
 }
 
-img{
+
+.intro-text {
+	display: flex;
+	flex-direction: column;
+	margin: 1rem;
+	padding: 1rem;
+}
+
+img {
+	padding: 1rem;
+	border-left: 2px solid rgba(0, 0, 0, 0.377);
 	width: 500px;
 	height: 300px;
-	
 	margin-top: 2%;
-	
-
-}
+}
\ No newline at end of file
diff --git a/Frontend/index.html b/Frontend/index.html
index 1c3ce19..fabb8b0 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -1,35 +1,38 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>Exam Result Generator</title>
-	<link rel="stylesheet" type="text/css" href="css/index.css">
+  <link rel="stylesheet" type="text/css" href="css/index.css">
 </head>
+
 <body>
 
-	<header class="header">
-            
-          <div class="one">
-            <h1 class="head">Exam Results Generator</h1></div>
-          
-        <div class="two">
-		 <button onclick="location.href='SignIn.html';">Student</button><button>Administrator</button>
-		</div>
-	
-        </header>
+  <header class="header">
+
+    <div class="one">
+      <h1 class="head">Exam Results Generator</h1>
+    </div>
+
+    <div class="two">
+      <button onclick="location.href='SignIn.html';">Student</button><button>Administrator</button>
+    </div>
+
+  </header>
+
 
-	
-<div class="description">
-<center>
-	<h2> Generate Results for your schools, colleges or Universities </h2>
-	<h3> Sign in Now to Start </h3>
-</center>
-<center>
-<img class="back-image" src="assets/woman.png">
-</img>
+  <div class="description">
+    <center>
+      <h2 class="intro-text"> Generate Results for your schools, colleges or Universities </h2>
+      <h3 class="intro-text"> Sign in Now to Start </h3>
+    </center>
+    <center>
+      <img class="back-image" src="assets/woman.png">
+      </img>
 
-</center>
-</div>
+    </center>
+  </div>
 
 
 
@@ -38,4 +41,4 @@ <h3> Sign in Now to Start </h3>
 
 </body>
 
-</html>
+</html>
\ No newline at end of file
