commit 5fc97bc8ea02b7072ed4697506b30590e6a7f71a
parent 5a4e32ab1380ea26fa42f5867f261bba99d5e93b
Author: LennartSchroot <[email protected]>
Date: Mon, 12 Jun 2023 17:58:08 +0200
login css
Diffstat:
4 files changed, 254 insertions(+), 10 deletions(-)
diff --git a/css/login.css b/css/login.css
@@ -0,0 +1,238 @@
+body {
+ background-color: #BCCFB0;
+ color: #333333;
+ font-family: Roboto, sans-serif;
+ margin: 0;
+ padding: 0;
+}
+
+/*NAVBAR*/
+nav {
+ background-color: #333333;
+ width: 100%;
+ height: 15vw;
+ display: flex;
+ align-items: center;
+}
+
+nav ul {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 15vw;
+ display: flex;
+ list-style-type: none;
+ align-items: center;
+}
+
+nav li {
+ font-weight: bold;
+ font-size: 4vw;
+ margin-right: 3vw;
+}
+
+nav ul li a {
+ color: #fff;
+ text-decoration: none;
+ padding: 0;
+}
+
+nav ul li a.active {
+ pointer-events: none;
+ color: gray;
+}
+
+nav ul li:first-child {
+ margin-right: auto;
+}
+
+.img-big-logo {
+ display: none;
+}
+
+.img-small-logo,
+.img-big-logo {
+ height: 15vw;
+ width: auto;
+ vertical-align: middle;
+}
+
+.container {
+ margin: 20px auto;
+ max-width: 80vw;
+ text-align: center;
+}
+
+.col-md-6{
+ width: 80vw;
+}
+
+.title {
+ margin-bottom: 30px;
+}
+
+.title h1 {
+ font-size: 8vw;
+ margin: 20px;
+}
+
+.title h4 {
+ font-size: 4vw;
+ margin: 10px;
+}
+
+.card {
+ border: none;
+ box-shadow: 0 0 10px rgba(51, 51, 51, 0.2);
+ border-radius: 4px;
+ margin-bottom: 20px;
+}
+
+.card-header {
+ background-color: #333333;
+ color: white;
+ font-weight: bold;
+ font-size: 4vw;
+ padding: 10px;
+}
+
+.card-body {
+ padding: 20px;
+}
+
+.form-group {
+ margin-bottom: 20px;
+}
+
+label {
+ font-weight: bold;
+ font-size: 4vw;
+}
+
+input[type="email"],
+input[type="password"] {
+ width: 85%;
+ padding: 10px;
+ font-size: 4vw;
+ border-radius: 4px;
+ border: 1px solid #ccc;
+}
+
+button[type="submit"] {
+ font-size: 4vw;
+ padding: 10px 20px;
+ background-color: #333333;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+button[type="submit"]:hover {
+ background-color: #222222;
+}
+
+.row.justify-content-center {
+ text-align: center;
+}
+
+.row.justify-content-center > div {
+ display: inline-block;
+}
+
+.row.justify-content-center > div:not(:first-child) {
+ margin-left: 10px;
+}
+
+@media (min-width: 400px) {
+ /*NAVBAR*/
+ nav {
+ height: 60px;
+ }
+
+ nav ul {
+ height: 60px;
+ }
+
+ nav li {
+ font-size: 16px;
+ margin-right: 12px;
+ }
+ .img-small-logo,
+ .img-big-logo {
+ height: 60px;
+ }
+ .title h1 {
+ font-size: 32px;
+ margin: 20px;
+ }
+
+ .title h4 {
+ font-size: 16px;
+ margin: 10px;
+ }
+
+ .card-header {
+ font-size: 16px;
+ padding: 10px;
+ }
+
+ input[type="email"],
+ input[type="password"] {
+ font-size: 16px;
+ }
+
+ button[type="submit"] {
+ font-size: 16px;
+ padding: 10px 20px;
+ }
+}
+
+@media (min-width: 700px) {
+ .img-big-logo {
+ display: block;
+ }
+
+ .img-small-logo {
+ display: none;
+ }
+
+ nav ul li:first-child {
+ margin-right: 0;
+ }
+
+ nav ul li:nth-child(2) {
+ margin-right: auto;
+ }
+ .container {
+ max-width: 90vw;
+ }
+
+ .title h1 {
+ font-size: 50px;
+ }
+
+ .title h4 {
+ font-size: 20px;
+ }
+
+ .card-header {
+ font-size: 20px;
+ }
+
+ input[type="email"],
+ input[type="password"] {
+ font-size: 20px;
+ }
+
+ button[type="submit"] {
+ font-size: 20px;
+ padding: 10px 20px;
+ }
+ label{
+ font-size: 1.5vw;
+ }
+ .col-md-6{
+ width: 40vw;
+ }
+}
diff --git a/views/dashboard.html b/views/dashboard.html
@@ -13,8 +13,8 @@
<!--NAVBAR-->
<nav class="navbar">
<ul>
- <li><a href="#" class="a-small-logo"><IMG class="img-small-logo" SRC="/img/small_logo.png"></a></li>
- <li><a href="#" class="a-big-logo"><IMG class="img-big-logo" SRC="/img/big-logo.png"></a></li>
+ <li><a href="/dashboard" class="a-small-logo"><IMG class="img-small-logo" SRC="/img/small_logo.png"></a></li>
+ <li><a href="/dashboard" class="a-big-logo"><IMG class="img-big-logo" SRC="/img/big-logo.png"></a></li>
<li><a href="#" class="active">Dashboard</a></li>
<li><a href="/hdata">Historic Data</a></li>
<li><a href="/logout">Logout</a></li>
diff --git a/views/hdata.html b/views/hdata.html
@@ -12,8 +12,8 @@
<!--NAVBAR-->
<nav class="navbar">
<ul>
- <li><a href="#" class="a-small-logo"><IMG class="img-small-logo" SRC="/img/small_logo.png"></a></li>
- <li><a href="#" class="a-big-logo"><IMG class="img-big-logo" SRC="/img/big-logo.png"></a></li>
+ <li><a href="/dashboard" class="a-small-logo"><IMG class="img-small-logo" SRC="/img/small_logo.png"></a></li>
+ <li><a href="/dashboard" class="a-big-logo"><IMG class="img-big-logo" SRC="/img/big-logo.png"></a></li>
<li><a href="/dashboard">Dashboard</a></li>
<li><a href="#" class="active">Historic Data</a></li>
<li><a href="#">Logout</a></li>
diff --git a/views/login.html b/views/login.html
@@ -2,19 +2,25 @@
<html>
<head>
<title>Login Page</title>
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
- integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+ <link rel="stylesheet" type="text/css" href="/css/login.css"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
+<nav class="navbar">
+ <ul>
+ <li><a href="/dashboard" class="a-small-logo"><IMG class="img-small-logo" SRC="/img/small_logo.png"></a></li>
+ <li><a href="/dashboard" class="a-big-logo"><IMG class="img-big-logo" SRC="/img/big-logo.png"></a></li>
+ </ul>
+</nav>
<div class="container mx-auto text-center">
<div class="row">
<div class="col-md-12 title">
- <h1>Welcome to Lollipop</h1>
+ <h1>Welcome to Panda Breeding Facilities</h1>
<h4>Please log in</h4>
</div>
</div>
</div>
- <div class="container mt-5">
+ <div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
@@ -24,12 +30,12 @@
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email"
- placeholder="Enter email">
+ placeholder="Enter email" required>
</div>
<div class="form-group">
<label for="password">password:</label>
<input type="password" class="form-control" id="password" name="password"
- placeholder="Enter password">
+ placeholder="Enter password" required>
</div>
<button type="submit" name='login_btn' class="btn btn-primary">Login</button>
</form>
