added styling on login page
This commit is contained in:
Louis Vallat
parent
0990e971a0
commit
2de5e2072a
@ -1,6 +1,10 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.montserrat {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
@ -15,4 +19,38 @@
|
||||
|
||||
.bold-900 {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.center30left {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 35%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex-evenly {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.flex-vertical-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-vertical-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.halo-hover {
|
||||
transition: all 500ms;
|
||||
}
|
||||
|
||||
.halo-hover:hover {
|
||||
transition: all 500ms;
|
||||
box-shadow: 0 0 100px white;
|
||||
}
|
||||
@ -1,10 +1,23 @@
|
||||
body {
|
||||
min-height: 100vh;
|
||||
background: rgb(2, 0, 36);
|
||||
background: -moz-linear-gradient(140deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 30%, rgba(0, 111, 131, 1) 100%);
|
||||
background: -webkit-linear-gradient(140deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 30%, rgba(0, 111, 131, 1) 100%);
|
||||
background: linear-gradient(140deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 30%, rgba(0, 111, 131, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024", endColorstr="#006f83", GradientType=1);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradientBG {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
#indexTitle {
|
||||
@ -32,7 +45,6 @@ body {
|
||||
transition: all 500ms;
|
||||
}
|
||||
|
||||
|
||||
#loginButton:hover {
|
||||
transition: all 500ms;
|
||||
color: #546a7b;
|
||||
@ -41,35 +53,33 @@ body {
|
||||
}
|
||||
|
||||
/* Very small devices (portrait phone, 575 and down) */
|
||||
|
||||
@media (max-width: 575px) {
|
||||
#title {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
#subtitle {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Small devices (landscape phones, 576px and up)*/
|
||||
|
||||
@media (min-width: 576px) {
|
||||
#title {
|
||||
font-size: 5em;
|
||||
}
|
||||
|
||||
#subtitle {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up)*/
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#title {
|
||||
font-size: 7em;
|
||||
}
|
||||
|
||||
#subtitle {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
191
assets/css/login.css
Normal file
191
assets/css/login.css
Normal file
@ -0,0 +1,191 @@
|
||||
#title {
|
||||
font-size: 5em;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: "Exo", sans-serif;
|
||||
background: rgb(111, 48, 153);
|
||||
background: -moz-linear-gradient(145deg, rgba(111, 48, 153, 1) 0%, rgba(235, 18, 18, 1) 50%, rgba(255, 168, 62, 1) 100%);
|
||||
background: -webkit-linear-gradient(145deg, rgba(111, 48, 153, 1) 0%, rgba(235, 18, 18, 1) 50%, rgba(255, 168, 62, 1) 100%);
|
||||
background: linear-gradient(145deg, rgba(111, 48, 153, 1) 0%, rgba(235, 18, 18, 1) 50%, rgba(255, 168, 62, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6f3099", endColorstr="#ffa83e", GradientType=1);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
}
|
||||
|
||||
input.form-control {
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
border-radius: 40px;
|
||||
height: 40px;
|
||||
padding: 10px 15px;
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 1.25em;
|
||||
margin: 5px 5px;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
display: inline-block;
|
||||
border: none;
|
||||
border-radius: 40px;
|
||||
padding: 10px 25px;
|
||||
font-family: 'Work Sans' sans-serif;
|
||||
background-color: white;
|
||||
color: black;
|
||||
transition: all 250ms;
|
||||
margin-bottom: 10px;
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
.login-button:hover {
|
||||
transition: all 250ms;
|
||||
background-color: darkgrey;
|
||||
}
|
||||
|
||||
.other-buttons {
|
||||
background-color: darkgrey;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@keyframes gradientBG {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.has-error {
|
||||
-webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
|
||||
animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
|
||||
}
|
||||
|
||||
@keyframes shake-horizontal {
|
||||
0%, 100% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
10%, 30%, 50%, 70% {
|
||||
-webkit-transform: translateX(-10px);
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
20%, 40%, 60% {
|
||||
-webkit-transform: translateX(10px);
|
||||
transform: translateX(10px);
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: translateX(8px);
|
||||
transform: translateX(8px);
|
||||
}
|
||||
90% {
|
||||
-webkit-transform: translateX(-8px);
|
||||
transform: translateX(-8px);
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Very small devices (portrait phone, 575 and down) */
|
||||
|
||||
@media (max-width: 575px) {
|
||||
#title {
|
||||
font-size: 3.5em;
|
||||
}
|
||||
input.form-control {
|
||||
width: 100%;
|
||||
}
|
||||
.center30left {
|
||||
top: 50%;
|
||||
left: 35px;
|
||||
right: 35px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up)*/
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.center30left {
|
||||
top: 50%;
|
||||
left: 35px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up)*/
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.center30left {
|
||||
top: 50%;
|
||||
left: 35%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom checkbox container */
|
||||
|
||||
.checkbox-container input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox-container input:checked+.checkmark {
|
||||
background-color: #2196fc;
|
||||
}
|
||||
|
||||
.checkbox-container:hover .checkmark {
|
||||
background-color: darkgrey;
|
||||
}
|
||||
|
||||
.checkbox-container input:checked+.checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 5px;
|
||||
width: 9px;
|
||||
border-left: 2px solid white;
|
||||
border-bottom: 2px solid white;
|
||||
top: 45%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
.checkbox-container {
|
||||
display: inline-block;
|
||||
padding-left: 30px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-family: sans-serif;
|
||||
font-size: 24px;
|
||||
user-select: none;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.checkbox-container .checkmark {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
10
assets/php/copyright.php
Normal file
10
assets/php/copyright.php
Normal file
@ -0,0 +1,10 @@
|
||||
<!--
|
||||
PAGE CODED BY :
|
||||
__ _____ __ __ ______ ____ __ __ ______ __ __ ______ ______
|
||||
/\ \ /\ __`\/\ \/\ \/\__ _\/\ _`\ /\ \/\ \/\ _ \/\ \ /\ \ /\ _ \/\__ _\
|
||||
\ \ \ \ \ \/\ \ \ \ \ \/_/\ \/\ \,\L\_\ \ \ \ \ \ \ \L\ \ \ \ \ \ \ \ \ \L\ \/_/\ \/
|
||||
\ \ \ __\ \ \ \ \ \ \ \ \ \ \ \ \/_\__ \ \ \ \ \ \ \ __ \ \ \ __\ \ \ __\ \ __ \ \ \ \
|
||||
\ \ \L\ \\ \ \_\ \ \ \_\ \ \_\ \__/\ \L\ \ \ \ \_/ \ \ \/\ \ \ \L\ \\ \ \L\ \\ \ \/\ \ \ \ \
|
||||
\ \____/ \ \_____\ \_____\/\_____\ `\____\ \ `\___/\ \_\ \_\ \____/ \ \____/ \ \_\ \_\ \ \_\
|
||||
\/___/ \/_____/\/_____/\/_____/\/_____/ `\/__/ \/_/\/_/\/___/ \/___/ \/_/\/_/ \/_/
|
||||
-->
|
||||
@ -5,6 +5,7 @@ require_once("./assets/php/utils.php")
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<?php include_once("./assets/php/copyright.php"); ?>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
@ -26,7 +27,7 @@ require_once("./assets/php/utils.php")
|
||||
|
||||
<div class="noto-sans" id="login">
|
||||
<a class="white" href="/login.php" id="loginButton">
|
||||
<?php echo is_connected() ? "Compte\n" : "Connexion\n"; ?>
|
||||
<?php echo is_connected() ? "Account\n" : "Connection\n"; ?>
|
||||
</a>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
56
login.php
56
login.php
@ -54,46 +54,46 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<?php include_once("./assets/php/copyright.php"); ?>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Login</title>
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 14px sans-serif;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 350px;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
<!-- TODO : ADD SEO STUFF -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link href="/assets/css/reset.css" rel="stylesheet">
|
||||
<link href="/assets/css/common.css" rel="stylesheet">
|
||||
<link href="/assets/css/login.css" rel="stylesheet">
|
||||
<title>Food inventory - Login</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<h2>Login</h2>
|
||||
<p>Please fill in your credentials to login.</p>
|
||||
<div class="center30left white">
|
||||
<h2 class="montserrat" id="title">Welcome back</h2>
|
||||
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
|
||||
<div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>">
|
||||
<label>Username</label>
|
||||
<input type="text" name="username" class="form-control" value="<?php echo $username; ?>">
|
||||
<span class="help-block"><?php echo $username_err; ?></span>
|
||||
<div class="flex-container flex-evenly">
|
||||
<input type="text" name="username" class="form-control halo-hover <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>" value="<?php echo $username; ?>" placeholder="Username">
|
||||
<input type="password" name="password" class="form-control halo-hover <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>" placeholder="Password">
|
||||
</div>
|
||||
<div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
|
||||
<label>Password</label>
|
||||
<input type="password" name="password" class="form-control">
|
||||
<span class="help-block"><?php echo $password_err; ?></span>
|
||||
<div class="flex-container flex-evenly">
|
||||
<div class="error">
|
||||
<?php
|
||||
if (!empty($username_err)) echo $username_err; else echo $password_err;
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>Remember me</label>
|
||||
<input type="checkbox" name="stay_loggedin"/>
|
||||
<div class="remember-me flex-container">
|
||||
<label class="checkbox-container">Remember me
|
||||
<input type="checkbox" name="stay_loggedin" />
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="submit" class="btn btn-primary" value="Login">
|
||||
<div class="form-group flex-container flex-vertical-center flex-evenly">
|
||||
<input type="submit" class="halo-hover login-button" value="Login">
|
||||
<a href="register.php" class="login-button halo-hover other-buttons">You don't have an account? Register!</a>
|
||||
<a href="/" class="login-button halo-hover other-buttons">Main page</a>
|
||||
</div>
|
||||
<p>Don't have an account? <a href="register.php">Sign up now</a>.</p>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user