diff --git a/assets/css/common.css b/assets/css/common.css
index 1f868b6..6be97f8 100644
--- a/assets/css/common.css
+++ b/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;
}
@@ -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;
}
\ No newline at end of file
diff --git a/assets/css/index.css b/assets/css/index.css
index 952fccf..4a2318b 100644
--- a/assets/css/index.css
+++ b/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;
}
diff --git a/assets/css/login.css b/assets/css/login.css
new file mode 100644
index 0000000..c4db1c1
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/assets/php/copyright.php b/assets/php/copyright.php
new file mode 100644
index 0000000..e07207c
--- /dev/null
+++ b/assets/php/copyright.php
@@ -0,0 +1,10 @@
+
diff --git a/index.php b/index.php
index 6c1ee9b..f775e4e 100644
--- a/index.php
+++ b/index.php
@@ -5,6 +5,7 @@ require_once("./assets/php/utils.php")
?>
+
@@ -26,7 +27,7 @@ require_once("./assets/php/utils.php")
diff --git a/login.php b/login.php
index b348f38..13b478b 100644
--- a/login.php
+++ b/login.php
@@ -54,46 +54,46 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
?>
+
- Login
-
+
+
+
+
+
+
+ Food inventory - Login
-
-
Login
-
Please fill in your credentials to login.
+