added styling on login page

assets/css/common.css

@@ -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;
 }
@@ -16,3 +20,37 @@
 .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;
+}

assets/css/index.css

@@ -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;
     }

assets/css/login.css

@@ -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;
+}

assets/php/copyright.php

@@ -0,0 +1,10 @@
+<!-- 
+PAGE CODED BY :
+ __       _____   __  __  ______  ____        __  __  ______  __       __       ______  ______   
+/\ \     /\  __`\/\ \/\ \/\__  _\/\  _`\     /\ \/\ \/\  _  \/\ \     /\ \     /\  _  \/\__  _\  
+\ \ \    \ \ \/\ \ \ \ \ \/_/\ \/\ \,\L\_\   \ \ \ \ \ \ \L\ \ \ \    \ \ \    \ \ \L\ \/_/\ \/  
+ \ \ \  __\ \ \ \ \ \ \ \ \ \ \ \ \/_\__ \    \ \ \ \ \ \  __ \ \ \  __\ \ \  __\ \  __ \ \ \ \  
+  \ \ \L\ \\ \ \_\ \ \ \_\ \ \_\ \__/\ \L\ \   \ \ \_/ \ \ \/\ \ \ \L\ \\ \ \L\ \\ \ \/\ \ \ \ \ 
+   \ \____/ \ \_____\ \_____\/\_____\ `\____\   \ `\___/\ \_\ \_\ \____/ \ \____/ \ \_\ \_\ \ \_\
+    \/___/   \/_____/\/_____/\/_____/\/_____/    `\/__/  \/_/\/_/\/___/   \/___/   \/_/\/_/  \/_/
+-->

index.php

@@ -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>

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>
+    <!-- TODO : ADD SEO STUFF -->
-    <style type="text/css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        body {
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-            font: 14px sans-serif;
+    <link href="/assets/css/reset.css" rel="stylesheet">
-        }
+    <link href="/assets/css/common.css" rel="stylesheet">
-
+    <link href="/assets/css/login.css" rel="stylesheet">
-        .wrapper {
+    <title>Food inventory - Login</title>
-            width: 350px;
-            padding: 20px;
-        }
-    </style>
 </head>
 
 <body>
-    <div class="wrapper">
+    <div class="center30left white">
-        <h2>Login</h2>
+        <h2 class="montserrat" id="title">Welcome back</h2>
-        <p>Please fill in your credentials to login.</p>
         <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
-            <div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>">
+            <div class="flex-container flex-evenly">
-                <label>Username</label>
+                <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="text" name="username" class="form-control" value="<?php echo $username; ?>">
+                <input type="password" name="password" class="form-control halo-hover <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>" placeholder="Password">
-                <span class="help-block"><?php echo $username_err; ?></span>
             </div>
-            <div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
+            <div class="flex-container flex-evenly">
-                <label>Password</label>
+                <div class="error">
-                <input type="password" name="password" class="form-control">
+                    <?php
-                <span class="help-block"><?php echo $password_err; ?></span>
+                    if (!empty($username_err)) echo $username_err; else echo $password_err;
+                    ?>
                 </div>
-            <div>
+            </div>
-                <label>Remember me</label>
+            <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">
+            <div class="form-group flex-container flex-vertical-center flex-evenly">
-                <input type="submit" class="btn btn-primary" value="Login">
+                <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>