commit dde8c418c998635e76cff4247bedc2b1ba3503ba
parent 03e1462931ef08db4d8eae67b69cc1ce053b454c
Author: Kninteman <[email protected]>
Date: Sun, 11 Jun 2023 22:26:39 +0200
Website Overhaul
Diffstat:
11 files changed, 473 insertions(+), 457 deletions(-)
diff --git a/css/dashboard.css b/css/dashboard.css
@@ -0,0 +1,190 @@
+body {
+ background-color: #BCCFB0;
+ color: #333333;
+ font-family: Roboto, sans-serif;
+ margin: 0;
+ padding: 0;
+}
+
+/*NAVBAR*/
+nav {
+ background-color: #333333;
+ width: 100vw;
+ 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;
+}
+
+/* HEADER */
+h1 {
+ text-align: center;
+ font-size: 8vw;
+ margin: 5vw;
+}
+
+/* DATA BLOCKS */
+.block1,
+.block2 {
+ display: flex;
+ width: 90vw;
+ height: auto;
+ padding-top: 20px;
+ margin: 5vw auto 1vw;
+ justify-content: space-between;
+ background-color: #333333;
+ color: white;
+ box-shadow: 0 0 10px rgba(51, 51, 51, 0.2);
+ border-radius: 4px;
+}
+
+.block2 {
+ margin: 10vw auto 1vw;
+}
+
+.content {
+ height: auto;
+ align-items: center;
+ justify-content: center;
+}
+
+.content-title {
+ background-color: #BCCFB0;
+ padding: 2px;
+ box-shadow: 0 0 10px #333333;
+}
+
+.content h2 {
+ font-size: 5vw;
+ font-weight: bold;
+ color: #333333;
+ margin: 5px;
+}
+
+.fancy-list {
+ list-style-type: none;
+ font-size: 4vw;
+ position: relative;
+ padding-left: 20px;
+ margin-bottom: 10px;
+}
+
+.fancy-list li {
+ margin-bottom: 10px;
+}
+
+.fancy-list li:first-child {
+ margin-top: 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;
+ }
+
+ /* HEADER */
+ h1 {
+ font-size: 32px;
+ margin: 20px;
+ }
+
+ /* DATA BLOCKS */
+ .block1 {
+ margin: 20px auto 4px;
+ }
+
+ .block2 {
+ margin: 40px auto 2px;
+ }
+
+ .content h2 {
+ font-size: 20px;
+ }
+
+ .fancy-list {
+ font-size: 16px;
+ }
+}
+
+@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;
+ }
+}
+
+@media (min-width: 1200px) {
+ /* DATA BLOCKS */
+ .block1,
+ .block2 {
+ width: 1080px;
+ }
+}
+\ No newline at end of file
diff --git a/css/hdata.css b/css/hdata.css
@@ -0,0 +1,190 @@
+body {
+ background-color: #BCCFB0;
+ color: #333333;
+ font-family: Roboto, sans-serif;
+ margin: 0;
+ padding: 0;
+}
+
+/*NAVBAR*/
+nav {
+ background-color: #333333;
+ width: 100vw;
+ 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;
+}
+
+/* HEADER */
+h1 {
+ text-align: center;
+ font-size: 8vw;
+ margin: 5vw;
+}
+
+/* DATA BLOCKS */
+.block1,
+.block2 {
+ display: flex;
+ width: 90vw;
+ height: auto;
+ padding-top: 20px;
+ margin: 5vw auto 1vw;
+ justify-content: space-between;
+ background-color: #333333;
+ color: white;
+ box-shadow: 0 0 10px rgba(51, 51, 51, 0.2);
+ border-radius: 4px;
+}
+
+.block2 {
+ margin: 10vw auto 1vw;
+}
+
+.content {
+ height: auto;
+ align-items: center;
+ justify-content: center;
+}
+
+.content-title {
+ background-color: #BCCFB0;
+ padding: 2px;
+ box-shadow: 0 0 10px #333333;
+}
+
+.content h2 {
+ font-size: 5vw;
+ font-weight: bold;
+ color: #333333;
+ margin: 5px;
+}
+
+.fancy-list {
+ list-style-type: none;
+ font-size: 4vw;
+ position: relative;
+ padding-left: 20px;
+ margin-bottom: 10px;
+}
+
+.fancy-list li {
+ margin-bottom: 10px;
+}
+
+.fancy-list li:first-child {
+ margin-top: 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;
+ }
+
+ /* HEADER */
+ h1 {
+ font-size: 32px;
+ margin: 20px;
+ }
+
+ /* DATA BLOCKS */
+ .block1 {
+ margin: 20px auto 4px;
+ }
+
+ .block2 {
+ margin: 40px auto 2px;
+ }
+
+ .content h2 {
+ font-size: 20px;
+ }
+
+ .fancy-list {
+ font-size: 16px;
+ }
+}
+
+@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;
+ }
+}
+
+@media (min-width: 1200px) {
+ /* DATA BLOCKS */
+ .block1,
+ .block2 {
+ width: 1080px;
+ }
+}
+\ No newline at end of file
diff --git a/css/panda.css b/css/panda.css
@@ -1,367 +0,0 @@
-body {
- background-color: RGB(210,176,76);
- color: white;
- font-family: Papyrus, sans-serif;
- margin: 0;
- padding: 0;
-}
-
-p.inlog {
- text-align: center;
-}
-
-.gif {
- margin: 1vw;
- border-radius: 200px;
-}
-
-/* CSS for the heading */
-h1 {
- text-align: center;
- font-size: 36px;
- margin-top: 50px;
-}
-
-/* CSS for the content */
-.content,
-.content1,
-.content2 {
- display: flex;
- width:35vw;
- height: 10vw;
- margin: auto auto 1vw;
- padding: 30px;
- justify-content: space-between;
- border-style: outset;
- border-color: black;
- background-color: RGB(230,176,77);
-}
-
-.content2 {
- height: 20vw;
- align-items: center;
- justify-content: center;
-}
-
-nav {
- display: flex;
- background-color: #333;
- height: 5vw;
-}
-
-nav ul {
- list-style-type: none;
- margin: 0;
- padding: 0;
-}
-
-nav li {
- display: inline-block;
-}
-
-li:first-child a {
- padding: 0;
-}
-
-li:first-child a img {
- height: 5vw;
- width: auto;
- vertical-align: middle;
-}
-
-li a {
- display: block;
- color: #fff;
- text-decoration: none;
- padding: 15px;
- font-family: Arial, sans-serif;
- transition: background-color 0.3s;
-}
-
-li a:hover {
- background-color: #555;
-}
-
-div.block1 {
- display: flex;
-}
-
-.graph {
- width: 400px;
- height: 300px;
- border: 1px solid #ccc;
- padding: 10px;
- box-sizing: border-box;
- position: relative;
-}
-
-.bar {
- width: 40px;
- background-color: #5A534C;
- position: absolute;
- bottom: 0;
-}
-
-.fancy-list {
- list-style-type: none;
- margin: 0;
- padding: 0;
-}
-
-.fancy-list li {
- position: relative;
- padding-left: 20px;
- margin-bottom: 10px;
-}
-
-.fancy-list li:before {
- content: '';
- position: absolute;
- top: 5px;
- left: 0;
- width: 10px;
- height: 10px;
- background-color: #333;
- border-radius: 50%;
-}
-
-.fancy-list li:last-child {
- margin-bottom: 0;
-}
-
-/* CSS for the panda */
-
-.circle {
- background-color: #D0E6AA;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-45%, -45%);
- width: 280px;
- height: 260px;
- border-radius: 100%;
- overflow: hidden;
- z-index:-1;
-}
-.circle .head {
- width: 160px;
- height: 500px;
- background: white;
- margin-top: 70px;
- margin-left: 55px;
- border-top-left-radius: 45% 20%;
- border-top-right-radius: 45% 20%;
- z-index: 2;
- position: absolute;
- border: 6px solid #5A534C;
-}
-.circle .ears {
- width: 100%;
-}
-.circle .eyeleft {
- position: absolute;
- z-index: 3;
- top: 130px;
- left: 50%;
- transform: translate(-50%, 0%);
- display: flex;
- display: block;
- width: 40px;
- height: 50px;
- background: #5A534C;
- border-radius: 100%;
- margin: 0 20px;
- -ms-transform: rotate(90deg);
- /* IE 9 */
- -webkit-transform: rotate(90deg);
- /* Chrome, Safari, Opera */
- transform: rotate(-25deg);
-}
-.circle .pupilleft {
- height: 25px;
- width: 25px;
- border-radius: 25px;
- margin-left: 7px;
- margin-top: 13px;
- background-color: white;
-}
-.circle .pupilright {
- height: 25px;
- width: 25px;
- border-radius: 20px;
- margin-left: 8px;
- margin-top: 13px;
- background-color: white;
-}
-.circle .pupilinsideright {
- height: 12px;
- width: 12px;
- border-radius: 10px;
- border: 2px #5A534C solid;
- position: absolute;
- margin-top: 5px;
- margin-left: 5px;
- background-color: #5A534C;
-}
-.circle .eyes {
- top: -10px;
- position: relative;
-}
-.circle .pupilinsideleft {
- height: 12px;
- width: 12px;
- border-radius: 10px;
- border: 2px #5A534C solid;
- position: absolute;
- margin-top: 5px;
- margin-left: 4px;
- background-color: #5A534C;
-}
-.circle .eyeright {
- position: absolute;
- z-index: 3;
- top: 130px;
- left: 50%;
- transform: translate(-50%, 0%);
- display: flex;
- display: block;
- width: 40px;
- height: 50px;
- background: #5A534C;
- border-radius: 100%;
- margin: 0 -60px;
- -ms-transform: rotate(30deg);
- /* IE 9 */
- -webkit-transform: rotate(30deg);
- /* Chrome, Safari, Opera */
- transform: rotate(25deg);
-}
-.circle .earleft {
- position: absolute;
- top: 66px;
- right: 35%;
- transform: translate(-50%, 0%);
- display: flex;
- display: block;
- content: "";
- width: 30px;
- height: 30px;
- background: #5A534C;
- border-radius: 100%;
- margin: 0 40px;
- border: 15px solid #5A534C;
- z-index: 1;
- position: absolute;
-}
-.circle .earright {
- position: absolute;
- top: 67px;
- left: 58%;
- transform: translate(-50%, 0%);
- display: flex;
- display: block;
- content: "";
- width: 30px;
- height: 30px;
- background: #5A534C;
- border-radius: 100%;
- margin: 0 40px;
- border: 15px solid #5A534C;
- z-index: 1;
- position: absolute;
-}
-.circle .shadowleft {
- width: 30px;
- height: 30px;
- border-bottom: none;
- background-color: white;
- border-radius: 15px;
- margin-left: -1px;
-}
-.circle .shadowright {
- width: 30px;
- height: 30px;
- border-bottom: none;
- background-color: white;
- border-radius: 15px;
- margin-left: 1px;
-}
-.circle .mouth {
- position: absolute;
- z-index: 3;
- top: 155px;
- left: 50%;
- transform: translate(-50%, 0%);
- width: 25px;
- border: 2px #5A534C solid;
- height: 15px;
- border-radius: 20px;
- background: #5A534C;
-}
-.circle .mouthmiddle {
- position: absolute;
- z-index: 3;
- top: 172px;
- left: 50%;
- transform: translate(-50%, 0%);
- width: 3px;
- border: 2px #5A534C solid;
- height: 20px;
- border-radius: 15px;
- background: #5A534C;
-}
-.circle .mouthend {
- position: absolute;
- z-index: 99;
- top: 180px;
- left: 50%;
- transform: translate(-50%, 0%);
- width: 30px;
- border: 6px #5A534C solid;
- height: 12px;
- border-radius: 5px;
- background: transparent;
- border-top: none;
- border-bottom-left-radius: 2em;
- border-bottom-right-radius: 2em;
-}
-.wall {
- width: 300px;
- height: 100px;
- top: 50%;
- left: 50%;
- margin-top: 150px;
- background-color: RGB(210,176,76);
- transform: translate(-50%, -50%);
- position: fixed;
- border-top: 6px #5A534C solid;
- z-index: -1;
-}
-.handsright {
- width: 30px;
- height: 25px;
- border-radius: 20px;
- background-color: #5A534C;
- top: 50%;
- left: 50%;
- margin-top: 100px;
- margin-left: -40px;
- transform: translate(-50%, -50%);
- position: fixed;
- border-top: 7px #5A534C solid;
- z-index: -1;
-}
-.handsleft {
- width: 30px;
- height: 25px;
- border-radius: 20px;
- background-color: #5A534C;
- top: 50%;
- left: 50%;
- margin-top: 100px;
- margin-left: 110px;
- transform: translate(-50%, -50%);
- position: fixed;
- border-top: 7px #5A534C solid;
- z-index: -1;
-}
-\ No newline at end of file
diff --git a/img/big-logo.png b/img/big-logo.png
Binary files differ.
diff --git a/img/logo.png b/img/logo.png
Binary files differ.
diff --git a/img/small_logo.png b/img/small_logo.png
Binary files differ.
diff --git a/index.php b/index.php
@@ -14,10 +14,11 @@ $router->addRoute(["POST"], "/", function($vars){
$t = new Lollipop\Template();
$t->template("views/login.php", $data);
});
-$router->addRoute(["GET"], "/dashboard", "views/panda.html");
+$router->addRoute(["GET"], "/dashboard", "views/dashboard.html");
+$router->addRoute(["GET"], "/hdata", "views/hdata.html");
$router->addRoute(["GET"], "/api/:data", function($vars) {
$key = new Key;
$key->myfunction($vars);
});
-$router->addRoute(['GET'], '/css/panda.css', "css/panda.css");
+$router->addRoute(['GET'], '/css/dashboard.css', "css/dashboard.css");
$router->route();
\ No newline at end of file
diff --git a/views/dashboard.html b/views/dashboard.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Panda Breeding Facilities</title>
+ <link rel="stylesheet" type="text/css" href="/css/dashboard.css"/>
+</head>
+
+<body>
+
+<!--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="#" class="active">Dashboard</a></li>
+ <li><a href="/hdata">Historic Data</a></li>
+ <li><a href="#">Logout</a></li>
+ </ul>
+</nav>
+
+<!-- HEADER -->
+<h1>Welcome "Role"</h1>
+
+<!-- DATA BLOCKS -->
+<div class="block1">
+ <div class="content">
+ <div class="content-title">
+ <h2>Top 5 - Zoo's</h2>
+ </div>
+ <ol class="fancy-list" id="weather-list"></ol>
+ </div>
+</div>
+
+<div class="block2">
+ <div class="content">
+ <div class="content-title">
+ <h2>Real-time Humidity graph</h2>
+ </div>
+ <ol class="fancy-list" id="graph">Grafiek Hier Pls</ol>
+ </div>
+</div>
+</body>
+<script src="../js/panda.js"></script>
+</html>
+\ No newline at end of file
diff --git a/views/dashboard.php b/views/dashboard.php
@@ -1,6 +0,0 @@
-<html>
- <head>
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
- </head>
-
-</html>
diff --git a/views/hdata.html b/views/hdata.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Panda Breeding Facilities - Data</title>
+ <link rel="stylesheet" type="text/css" href="/css/dashboard.css"/>
+</head>
+
+<body>
+
+<!--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">Dashboard</a></li>
+ <li><a href="#" class="active">Historic Data</a></li>
+ <li><a href="#">Logout</a></li>
+ </ul>
+</nav>
+
+<!-- DATA BLOCKS -->
+<div class="data-blocks">
+ <div class="block1">
+ <div class="content">
+ <div class="content-title">
+ <h2>Data past 4 weeks</h2>
+ </div>
+ <ol class="fancy-list" id="weather-list"><li>-27.71 48.56</li><li>-25.15 39.74</li><li>-25.22 50.23</li><li>-25.29 39.74</li><li>-25.11 50.26</li></ol>
+ </div>
+ </div>
+
+ <div class="block2">
+ <button>Download</button>
+ </div>
+</div>
+</body>
+<script src="../js/panda.js"></script>
+</html>
+\ No newline at end of file
diff --git a/views/panda.html b/views/panda.html
@@ -1,80 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Panda Breeding Facilities</title>
- <link rel="stylesheet" type="text/css" href="/css/panda.css" />
-</head>
-<body>
-<div class="panda">
- <div class="circle">
- <div class="head"> </div>
- <div class="ears">
- <div class="earleft">
- <div class="shadowleft"> </div>
- </div>
- <div class="earright">
- <div class="shadowright"> </div>
- </div>
- </div>
- <div class="eyes">
- <div class="eyeleft">
- <div class="pupilleft">
- <div class="pupilinsideleft"> </div>
- </div>
- </div>
- <div class="eyeright">
- <div class="pupilright">
- <div class="pupilinsideright"></div>
- </div>
- </div>
- </div>
- <div class="mouth"> </div>
- <div class="mouthmiddle"> </div>
- <div class="mouthend"> </div>
- </div>
- <div class="wall"></div>
- <div class="wall1">
- <div class="wall1side"> </div>
- </div>
- </div>
- <div class="handsright"> </div>
- <div class="handsleft"> </div>
-</div>
-
-<nav>
- <ul>
- <li><a href="#"><IMG class="logo" SRC="/img/logo.png"></a></li>
- <li><a href="#">Breeding Facility</a></li>
- <li><a href="#">Zoo's</a></li>
- <li><a href="#">About</a></li>
- </ul>
-</nav>
-
-
-<!--<IMG class="gif" SRC="/img/panda.gif">-->
-</div>
-<h1>Welcome to Panda Breeding Facilities</h1>
-<p class="inlog">Je bent ingelogd als "Kars"</p>
-
-<div class="block1">
- <div class="content">
- <ol id="weather-list"></ol>
- </div>
-
- <div class="content1">
- </div>
-</div>
-
-<div class="content2">
- <div class="graph">
- <div class="bar" style="height: 120px; left: 50px;"></div>
- <div class="bar" style="height: 200px; left: 120px;"></div>
- <div class="bar" style="height: 80px; left: 190px;"></div>
- <div class="bar" style="height: 160px; left: 260px;"></div>
- </div>
-</div>
-</body>
-<script src="../js/panda.js"></script>
-</html>
-\ No newline at end of file
