commit 67588dd20794bfed3035677e0cd64efd2a9bbe03
parent 43ceaed84fbbf8826a005cf6c28b71b6feb9bcd4
Author: Johs <[email protected]>
Date: Wed, 7 Jun 2023 12:53:26 +0200
css added
Diffstat:
3 files changed, 371 insertions(+), 3 deletions(-)
diff --git a/css/panda.css b/css/panda.css
@@ -0,0 +1,367 @@
+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/index.php b/index.php
@@ -14,10 +14,10 @@ $router->addRoute(["POST"], "/", function($vars){
$t = new Lollipop\Template();
$t->template("views/login.php", $data);
});
-$router->addRoute(["GET"], "/dashboard", "views/dashboard.php");
+$router->addRoute(["GET"], "/dashboard", "views/panda.html");
$router->addRoute(["GET"], "/api/:data", function($vars) {
$key = new Key;
$key->myfunction($vars);
});
-
+$router->addRoute(['GET'], '/css/panda.css', "css/panda.css");
$router->route();
\ No newline at end of file
diff --git a/views/login.php b/views/login.php
@@ -46,7 +46,7 @@
<div class="row justify-content-center">
<?php
//display login $msg
- echo $msg;
+// echo $msg;
?>
</div>
</div>
