up

.gitlab-ci.yml

+image: alpine:latest
+
+pages:
+  stage: deploy
+  script:
+  - echo "Deploying to https://transfer.hft-stuttgart.de/pages/$CI_PROJECT_PATH/"
+  artifacts:
+    paths:
+    - public
+  only:
+  - master

public/content/content.json

+[
+  {
+    "item": {
+      "title": "Vision Zero",
+      "project": "Hackathon",
+      "author": {
+        "firstName": "Joe",
+        "lastName": "T.S."
+      },
+      "imageLink":"imgs/thumbnails/visionZero.jpeg",
+      "keywords":["CityGML","3D GIS","GIS Analyst","Urban Analytics"],
+      "description_en":"The VISION ZERO is an application for safety routing with the visualization of 3D grid and heatmap. Developed at hackathon event 'Neue Wege für die Mobilität in Augsburg'. (24 hours time limited)",
+      "description_de":"VISION ZERO ist eine Anwendung zum sicheren Routing mit einer Visualisierung eines 3D Grids und einer Heatmap. Entwickelt bein Hackathon Event 'Neue Wege für die Mobilität in Augsburg'. (24 Stunden Zeit begrenzt)"
+    },
+    "links": {
+      "youtube": "https://www.youtube.com/watch?v=64Qq31ucGy0",
+      "demo": "https://m4lab.hft-stuttgart.de/partizipation/"
+    },
+    "refIndex": 2
+  },
+  {
+    "item": {
+      "title": "3D E-bike",
+      "project": "ICity Project",
+      "author": {
+        "firstName": "Joe",
+        "lastName": "T.S."
+      },
+      "imageLink":"imgs/thumbnails/i_cityEbikeSharing.png",
+      "keywords":["SensorThings API","CityGML","GIS Analyst","3D GIS","GIS Analyst", "Urban Analytics"],
+      "description_en":"The 3D E-bike Tracking is a 3D web-based visual analytics application designed showing various parameters from sensor systems equipped on the E-bike sharing system in the study area of a city of Stuttgart, Germany.",
+      "description_de":"Das 3D E-bike Tracking ist eine 3D Webanwendung zu visuellen Analyse und ist designed um verschiedene Parameter von Sensor Systemen zu zeigen. Die Sensoren sind am E-bike Sharing Systemes der Stadt Stuttgart (Deutschland) installiert."
+    },
+    "links": {
+      "youtube": "https://www.youtube.com/watch?v=64Qq31ucGy0",
+      "demo": "https://m4lab.hft-stuttgart.de/partizipation/"
+    },
+    "refIndex": 1
+  },
+  {
+    "item": {
+      "title": "HFT Smart Platform",
+      "project": "iCity Project",
+      "author": {
+        "firstName": "Joe",
+        "lastName": "T.S."
+      },
+      "imageLink":"imgs/thumbnails/hftSmart.JPG",
+      "keywords":["CityGML","3D GIS","GIS Analyst","Urban Analytics"],
+      "description_en":"The VISION ZERO is an application for safety routing with the visualization of 3D grid and heatmap. Developed at hackathon event 'Neue Wege für die Mobilität in Augsburg'. (24 hours time limited)",
+      "description_de":"VISION ZERO ist eine Anwendung zum sicheren Routing mit einer Visualisierung eines 3D Grids und einer Heatmap. Entwickelt bein Hackathon Event 'Neue Wege für die Mobilität in Augsburg'. (24 Stunden Zeit begrenzt)"
+    },
+    "links": {
+      "demo": "https://m4lab.hft-stuttgart.de/partizipation/"
+    },
+    "refIndex": 3
+  },
+  {
+    "item": {
+      "title": "3D Wind Simulation",
+      "project": "iCity Project",
+      "author": {
+        "firstName": "Sven",
+        "lastName": "Schneider"
+      },
+      "imageLink":"imgs/thumbnails/StreamLinesCesiumZoom4.PNG",
+      "keywords":["CityGML","3D GIS","GIS Analyst","Urban Analytics"],
+      "description_en":"The VISION ZERO is an application for safety routing with the visualization of 3D grid and heatmap. Developed at hackathon event 'Neue Wege für die Mobilität in Augsburg'. (24 hours time limited)",
+      "description_de":"VISION ZERO ist eine Anwendung zum sicheren Routing mit einer Visualisierung eines 3D Grids und einer Heatmap. Entwickelt bein Hackathon Event 'Neue Wege für die Mobilität in Augsburg'. (24 Stunden Zeit begrenzt)"
+    },
+    "links": {
+      "youtube": "https://www.youtube.com/watch?v=64Qq31ucGy0"
+    },
+    "refIndex": 4
+  },
+  {
+    "item": {
+      "title": "Project 5",
+      "project": "Some Project",
+      "author": {
+        "firstName": "David",
+        "lastName": "Maine"
+      },
+      "imageLink":"imgs/thumbnails/StreamLinesCesiumZoom4.PNG",
+      "keywords":["CityGML","3D GIS","GIS Analyst","Urban Analytics"],
+      "description_en":"The VISION ZERO is an application for safety routing with the visualization of 3D grid and heatmap. Developed at hackathon event 'Neue Wege für die Mobilität in Augsburg'. (24 hours time limited)",
+      "description_de":"VISION ZERO ist eine Anwendung zum sicheren Routing mit einer Visualisierung eines 3D Grids und einer Heatmap. Entwickelt bein Hackathon Event 'Neue Wege für die Mobilität in Augsburg'. (24 Stunden Zeit begrenzt)"
+    },
+    "links": {
+    },
+    "refIndex": 5
+  },
+  {
+    "item": {
+      "title": "Project 6",
+      "project": "Some Project",
+      "author": {
+        "firstName": "David",
+        "lastName": "Maine"
+      },
+      "imageLink":"imgs/thumbnails/StreamLinesCesiumZoom4.PNG",
+      "keywords":["CityGML","3D GIS","GIS Analyst","Urban Analytics"],
+      "description_en":"The VISION ZERO is an application for safety routing with the visualization of 3D grid and heatmap. Developed at hackathon event 'Neue Wege für die Mobilität in Augsburg'. (24 hours time limited)",
+      "description_de":"VISION ZERO ist eine Anwendung zum sicheren Routing mit einer Visualisierung eines 3D Grids und einer Heatmap. Entwickelt bein Hackathon Event 'Neue Wege für die Mobilität in Augsburg'. (24 Stunden Zeit begrenzt)"
+    },
+    "links": {
+      "youtube": "https://www.youtube.com/watch?v=64Qq31ucGy0",
+      "demo": "https://m4lab.hft-stuttgart.de/partizipation/"
+    },
+    "refIndex": 6
+  },
+  {
+    "item": {
+      "title": "Project 7",
+      "project": "Some Project",
+      "author": {
+        "firstName": "David",
+        "lastName": "Maine"
+      },
+      "imageLink":"imgs/thumbnails/StreamLinesCesiumZoom4.PNG",
+      "keywords":["CityGML","3D GIS","GIS Analyst","Urban Analytics"],
+      "description_en":"The VISION ZERO is an application for safety routing with the visualization of 3D grid and heatmap. Developed at hackathon event 'Neue Wege für die Mobilität in Augsburg'. (24 hours time limited)",
+      "description_de":"VISION ZERO ist eine Anwendung zum sicheren Routing mit einer Visualisierung eines 3D Grids und einer Heatmap. Entwickelt bein Hackathon Event 'Neue Wege für die Mobilität in Augsburg'. (24 Stunden Zeit begrenzt)"
+    },
+    "links": {
+      "youtube": "https://www.youtube.com/watch?v=64Qq31ucGy0",
+      "demo": "https://m4lab.hft-stuttgart.de/partizipation/"
+    },
+    "refIndex": 7
+  }
+]
\ No newline at end of file

public/css/custom.css

+.btn-circle.btn-xl {
+    width: 70px;
+    height: 70px;
+    padding: 10px 16px;
+    border-radius: 35px;
+    font-size: 24px;
+    line-height: 1.33;
+}
+
+.btn-circle {
+    width: 30px;
+    height: 30px;
+    padding: 6px 0px;
+    border-radius: 15px;
+    text-align: center;
+    font-size: 12px;
+    line-height: 1.42857;
+}
+
+.pre-style {
+    display: block;
+    padding: 9.5px;
+    margin: 0 0 10px;
+    font-size: 13px;
+    line-height: 1.42857143;
+    color: #333;
+    word-break: break-all;
+    word-wrap: break-word;
+    background-color: #f5f5f5;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+::selection {
+    color: black;
+    background: #B4D5FE;
+  }
\ No newline at end of file

public/css/form_joeStyle.css

+/* Bootstrap a bit adapt */
+.joeForm {
+    display: block;
+    width: auto;
+    height: 25px;
+    padding: 3px 3px;
+    font-size: 14px;
+    line-height: 1;
+    color: #555;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #696a6d;
+    border-radius: 10px;
+}
+
+i.fas {
+    display: inline-block;
+    border-radius: 60px;
+    box-shadow: 0px 0px 2px #888;
+    padding: 0.5em 0.6em;
+  
+  }
\ No newline at end of file

public/css/index.css

+.backdrop {
+    display: inline-block;
+    background: rgba(42, 42, 42, 0.6);
+    border-radius: 5px;
+    border: 1px solid #444;
+    padding: 10px 10px;
+    color: #fff;
+    width: 250px;
+    /* font: 1em "Fira Sans", sans-serif; */
+}
+
+
+
+.mytab { 
+       display:inline-block; 
+       margin-left: 35px; 
+}
+
+h1 {
+	/* font-family: 'Lato', sans-serif; */
+	font-style: bold;
+    color: red;
+	background-color: rgba(42, 42, 42, 0);
+	text-shadow: 3px 3px #000000
+}
+h2 {
+	/* font-family: 0.75em 'Lato', sans-serif; */
+	font-weight: bold;
+    color: wheat;
+}
+h3 {
+	/* font: 1em 'Lato', sans-serif;
+	font-style: bold; */
+    color: rgb(179, 245, 209);
+}
+
+#heightSliderLabel, #heightValue {
+    vertical-align: top;
+}
+
+.backdrop a:link, .backdrop a:visited, .backdrop a:hover {
+    color: #fff
+}
+
+.loadingIndicator {
+    display: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -33px;
+    margin-left: -33px;
+    width: 66px;
+    height: 66px;
+    background: url(Source/Images/ajax-loader.gif) center no-repeat;
+}
+
+.cover {
+    display: none;
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.75);
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+#menu {
+    position: absolute;
+    left: 10px;
+    top: 150px;
+}
+#img_menu {
+	margin-right: 10px; padding: 0; width: 300px;position: absolute; left: 5px;
+}
+#img_menu:hover {
+	cursor: pointer;
+	opacity: .9;
+}
+
+#HightChartContainer {
+    position: absolute;
+    /* right: 50px; */
+    top: 95px;
+    left: 390px;
+    width: 65%;
+    min-height: 60%;
+    margin: 0 auto;
+}
+#TableContainer {
+    position: absolute;
+    /* right: 50px; */
+    top: 750px;
+    left: 390px;
+    width: 65%;
+    /* min-height: 60%; */
+    margin: 0 auto;
+}
+#ebikeRealtime {
+    position: absolute;
+    left: 245px;
+	top: 10px;
+	min-width: 10%;
+	min-height: 50%;
+	margin: 0 auto;
+}
+
+#ebikeInfo {
+    position: absolute;
+    right: 10px;
+	top: 50px;
+	width: 200px;
+}
+
+#StatInfo{
+	position: absolute;
+	right: 50px;
+	bottom: 10px;
+	width: 50%;
+}
+
+/* #ebikeRealtime {
+    position: absolute;
+    right: 10px;
+	top: 100px;
+	width: 250px;
+} */
+.nowrap {
+    white-space: nowrap;
+}
+
+button.cesium-infoBox-camera {
+    display: none;
+}
+
+html, body, #cesiumContainer {
+    top: 0px;
+    left: 0px;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    z-index: -1;
+}
+#uiMenu {
+    border-radius:5px;
+    padding: 10px;
+    position:absolute;
+    left: 20px;
+    font-family: "Arial";
+    z-index: 99999;
+}
+#redHook {
+	cursor: pointer;
+}
+
+.myButtonOff {
+	-moz-box-shadow: 3px 4px 0px 0px #8a2a21;
+	-webkit-box-shadow: 3px 4px 0px 0px #8a2a21;
+	box-shadow: 3px 4px 0px 0px #8a2a21;
+	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f09c87), color-stop(1, #f24437));
+	background:-moz-linear-gradient(top, #f09c87 5%, #f24437 100%);
+	background:-webkit-linear-gradient(top, #f09c87 5%, #f24437 100%);
+	background:-o-linear-gradient(top, #f09c87 5%, #f24437 100%);
+	background:-ms-linear-gradient(top, #f09c87 5%, #f24437 100%);
+	background:linear-gradient(to bottom, #f09c87 5%, #f24437 100%);
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09c87', endColorstr='#f24437',GradientType=0);
+	background-color:#f09c87;
+	-moz-border-radius:18px;
+	-webkit-border-radius:18px;
+	border-radius:18px;
+	border:1px solid #d02718;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-family:Verdana;
+	font-size:12px;
+	padding:6px 15px;;
+	text-decoration:none;
+	text-shadow:0px 1px 0px #810e05;
+}
+.myButtonOff:hover {
+	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24437), color-stop(1, #f09c87));
+	background:-moz-linear-gradient(top, #f24437 5%, #f09c87 100%);
+	background:-webkit-linear-gradient(top, #f24437 5%, #f09c87 100%);
+	background:-o-linear-gradient(top, #f24437 5%, #f09c87 100%);
+	background:-ms-linear-gradient(top, #f24437 5%, #f09c87 100%);
+	background:linear-gradient(to bottom, #f24437 5%, #f09c87 100%);
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24437', endColorstr='#f09c87',GradientType=0);
+	background-color:#f24437;
+}
+.myButtonOff:active {
+	position:relative;
+	top:1px;
+}
+
+.myButtonOn {
+	-moz-box-shadow: 3px 4px 0px 0px #9acc85;
+	-webkit-box-shadow: 3px 4px 0px 0px #9acc85;
+	box-shadow: 3px 4px 0px 0px #9acc85;
+	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #74ad5a), color-stop(1, #68a54b));
+	background:-moz-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
+	background:-webkit-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
+	background:-o-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
+	background:-ms-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
+	background:linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#74ad5a', endColorstr='#68a54b',GradientType=0);
+	background-color:#74ad5a;
+	-moz-border-radius:18px;
+	-webkit-border-radius:18px;
+	border-radius:18px;
+	border:1px solid #3b6e22;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-family:Verdana;
+	font-size:12px;
+	padding:2px 2px;
+	text-decoration:none;
+	text-shadow:0px 1px 0px #92b879;
+}
+.myButtonOn:hover {
+	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a54b), color-stop(1, #74ad5a));
+	background:-moz-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
+	background:-webkit-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
+	background:-o-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
+	background:-ms-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
+	background:linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%);
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#68a54b', endColorstr='#74ad5a',GradientType=0);
+	background-color:#68a54b;
+}
+.myButtonOn:active {
+	position:relative;
+	top:1px;
+}
+
+.myButtonRed {
+	-moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
+	-webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
+	box-shadow:inset 0px 1px 0px 0px #f5978e;
+	background-color:#f24537;
+	-moz-border-radius:3px;
+	-webkit-border-radius:2px;
+	border-radius:2px;
+	border:1px solid #d02718;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-family:Trebuchet MS;
+	font-size:12px;
+	padding:2px 2px;
+	text-decoration:none;
+}
+.myButtonRed:hover {
+	background-color:#c62d1f;
+}
+.myButtonRed:active {
+	position:relative;
+	top:1px;
+}
+
+.myButtonGreen {
+	-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
+	-webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
+	box-shadow:inset 0px 1px 0px 0px #caefab;
+	background-color:#77d42a;
+	-moz-border-radius:3px;
+	-webkit-border-radius:2px;
+	border-radius:2px;
+	border:1px solid #268a16;
+	display:inline-block;
+	cursor:pointer;
+	color:#0a0a0a;
+	font-family:Trebuchet MS;
+	font-size:12px;
+	padding:2px 2px;
+	text-decoration:none;
+}
+.myButtonGreen:hover {
+	background-color:#5cb811;
+}
+.myButtonGreen:active {
+	position:relative;
+	top:1px;
+}
+
+.myButtonBlue {
+	-moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;
+	-webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe;
+	box-shadow:inset 0px 1px 0px 0px #97c4fe;
+	background-color:#3d94f6;
+	-moz-border-radius:3px;
+	-webkit-border-radius:2px;
+	border-radius:2px;
+	border:1px solid #337fed;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-family:Trebuchet MS;
+	font-size:12px;
+	padding:2px 2px;
+	text-decoration:none;
+	text-shadow:0px 1px 0px #1570cd;
+}
+.myButtonBlue:hover {
+	background-color:#1e62d0;
+}
+.myButtonBlue:active {
+	position:relative;
+	top:1px;
+}
+
+
+#3DTiles {
+    padding-top: 10px;
+}
+
+/* for the arrow down */
+/* i {
+	
+	border-width: 0 3px 3px 0;
+	display: inline-block;
+	padding: 3px;
+  }
+  .down {
+	border: solid rgb(138, 154, 226);
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+}   */
+
+.mainbackdrop {
+	overflow: scroll;
+	overflow-x: hidden;
+	max-height: 60%;
+}
+
+/* Hide Scroll bar x and pretty right */
+::-webkit-scrollbar {
+	width: 5px;
+}
+
+::-webkit-scrollbar-track {
+	background-color: rgba(42, 42, 42, 0);
+}
+
+/* the new scrollbar will have a flat appearance with the set background color */
+
+::-webkit-scrollbar-thumb {
+	background-color: rgba(250, 250, 250, 0.5);
+	border-radius: 20px
+}
+
+/* this will style the thumb, ignoring the track */
+
+::-webkit-scrollbar-button {
+	background-color: rgba(42, 42, 42, 0);
+}
+
+/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
+
+::-webkit-scrollbar-corner {
+	background-color: rgba(42, 42, 42, 0);
+}

public/css/language.css

+.selectpicker{
+    cursor: pointer
+}
+

public/css/legend.css

+.outlined {
+    border: 0px solid black;
+ }
+
+ p{
+     margin-top: 1px;
+     margin-bottom: 5px;
+ }
+
+ h6{
+     margin-top: 2px;
+     margin-bottom: 2px;
+ }
+#legend {
+    position: absolute;
+    /*display: none; */
+    display: block;
+    width: 130px;
+    /*height: 300px; */
+    
+    bottom: 5px;
+    right: 5px; 
+	/*left: 85%;*/
+    background-color: rgba(0, 0, 0, 0.70); /* dim the background */
+    z-index: 2;
+    cursor: auto; /* ??? */
+    padding: 1px;    
+	
+	color: white;
+	font-size: 1.0em;
+    font-weight: bold;
+}
+

public/css/main.css

+.jumbotron {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+  margin-bottom: 0;
+  background-color: #fff;
+}
+@media (min-width: 768px) {
+  .jumbotron {
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+  }
+}
+
+.jumbotron p:last-child {
+  margin-bottom: 0;
+}
+
+.jumbotron h1 {
+  font-weight: 300;
+}
+
+.jumbotron .container {
+  max-width: 40rem;
+}
+
+footer {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+footer p {
+  margin-bottom: 0.25rem;
+}
+
+body{
+    background-color: #cc3125;/* thistle; */
+}
+
+.bd-placeholder-img {
+  font-size: 1.125rem;
+  text-anchor: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+@media (min-width: 768px) {
+  .bd-placeholder-img-lg {
+    font-size: 3.5rem;
+  }
+}
+
+
+a {
+  color: #ff6464;
+  /* text-decoration: underline; */
+  background-color: transparent;
+}
+a:hover{
+  color: rgb(65, 57, 57);
+}
+
+a:visited {
+	/* color: black; */
+}
+
+
+.myBtn {
+    color: #fff;
+    background-color: tomato;
+    border-color: thistle; /*set the color you want here*/
+    width: 180px;
+}
+.myBtn:hover, .myBtn:focus, .myBtn:active, .myBtn.active, .open>.dropdown-toggle.myBtn {
+    color: #fff;
+    background-color: thistle;
+    border-color: #285e8e; /*set the color you want here*/
+}
+
+.thumbimg{
+    width: 100%;
+    height: 225px;
+}
+
+a.button {
+    -webkit-appearance: button;
+    -moz-appearance: button;
+    appearance: button;
+
+    text-decoration: none;
+    color: blue;
+    border: solid;
+    border: 4px;
+}
+
+.windSVG{
+    margin-right : 20px;
+}
+
+.hftlogo{
+  margin-right : 20px;
+  /* width: 100px; */
+}
+
+
+.extension{
+  padding: 20px 10px;
+  /* min-height: 445px; */
+  /* max-height: 445px; */
+  /* margin: 20px; */
+  height: 500px;
+}
+
+.py-5{
+  padding: 1rem!important; 
+}
+
+.card-body{
+  min-height: 90px;
+  padding: 0.5rem 0.5rem 0.2rem;
+
+}
+
+.card-text{
+  max-height: 85px;
+  overflow: auto;
+  /* overflow-y: auto; */  
+  /* padding-bottom: 10px; */
+
+}
+
+.btnGroupDiv{
+  /* padding: 20px 00px 00px 20px; */
+  padding: 0.5rem;
+}
+
+.blue-text {
+  color: #2196f3 !important;
+}
+
+.grey-text {
+  color: #9e9e9e !important;
+}
+
+.z-depth-1, .chip:active {
+  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
+  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
+}
+
+.hftBackground {
+  background-image: url(../imgs/avatar/Bibliothek_HFT_f.jpg);
+  background-size: cover;
+}
+/* .hftBackground::after {
+  content: '';
+    z-index: 0;
+    position: absolute;
+    background: rgba(0, 0, 0, 0.65);
+    left: 0;
+    top: 0;
+} */
+
+main[role=main]{
+  background-color: #f8f9fa!important;
+  padding-bottom: 1rem!important;
+}
+

public/css/myCesiumStyle.css

+@charset "UTF-8";
+
+html,
+button,
+input,
+select,
+textarea {
+  font-family: sans-serif;
+}
+
+html {
+  margin: 0 auto;
+  max-width: 80%;
+}
+
+header,
+footer {
+  padding: 1em;
+  color: black;
+  background-color: White;
+  clear: left;
+  text-align: center;
+}
+footer {
+  padding-top: 0px;
+}
+
+.pagecesium {
+  height: 500px;
+  position: relative;
+  width: 100%;
+  min-width: 630px;
+}
+
+.pagepp {
+  float: left;
+  height: 100%;
+  width: 50%;
+}
+
+body {
+  min-width: 650px;
+  margin: 0px;
+}
+
+h2,
+h3 {
+  margin-block-start: 1px;
+  margin-block-end: 1px;
+}
+
+.titleFigure {
+  margin: 2px 0;
+  /* height: 20%; */
+  width: 12%;
+}
+
+.cesium-infoBox-visible {
+
+  
+    font-weight: 100;    
+    background-color: brown;
+    text-align: right;
+}
+
+.cesium-infoBox-iframe {
+    font-size: 0.5em;
+    font-weight: 100;    
+    background-color: brown;
+    text-align: left;
+  }

public/css/search.css

+body {
+    background: #212129;
+ }
+ 
+
+ 
+ .search-wrapper {
+     position: relative;
+     transform: translate(-50%, -50%);
+     top:50%;
+     left:50%;
+     float: right;
+     margin-right: 60%;
+ }
+ .search-wrapper.active {}
+ 
+ .search-wrapper .input-holder {    
+     height: 70px;
+     width:70px;
+     overflow: hidden;
+     background: rgba(255,255,255,0);
+     border-radius:6px;
+     position: relative;
+     transition: all 0.3s ease-in-out;
+ }
+ .search-wrapper.active .input-holder {
+     width:450px;
+     border-radius: 50px;
+     background: rgba(0,0,0,0.5);
+     transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
+ }
+ .search-wrapper .input-holder .search-input {
+     width:100%;
+     height: 50px;
+     padding:0px 70px 0 20px;
+     opacity: 0;
+     position: absolute;
+     top:0px;
+     left:0px;
+     background: transparent;
+     box-sizing: border-box;
+     border:none;
+     outline:none;
+     font-family:"Open Sans", Arial, Verdana;
+     font-size: 16px;
+     font-weight: 400;
+     line-height: 20px;
+     color:#FFF;
+     transform: translate(0, 60px);
+     transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
+     transition-delay: 0.3s;
+ }
+ .search-wrapper.active .input-holder .search-input {
+     opacity: 1;
+     transform: translate(0, 10px);
+ }
+ .search-wrapper .input-holder .search-icon {
+     width:70px;
+     height:70px;
+     border:none;
+     border-radius:6px;
+     background: #FFF;
+     padding:0px;
+     outline:none;
+     position: relative;
+     z-index: 2;
+     float:right;
+     cursor: pointer;
+     transition: all 0.3s ease-in-out;
+ }
+ .search-wrapper.active .input-holder .search-icon {
+     width: 50px;
+     height:50px;
+     margin: 10px;
+     border-radius: 30px;
+ }
+ .search-wrapper .input-holder .search-icon span {
+     width:22px;
+     height:22px;
+     display: inline-block;
+     vertical-align: middle;
+     position:relative;
+     transform: rotate(45deg);
+     transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
+ }
+ .search-wrapper.active .input-holder .search-icon span {
+     transform: rotate(-45deg);
+ }
+ .search-wrapper .input-holder .search-icon span::before, .search-wrapper .input-holder .search-icon span::after {
+     position: absolute; 
+     content:'';
+ }
+ .search-wrapper .input-holder .search-icon span::before {
+     width: 4px;
+     height: 11px;
+     left: 9px;
+     top: 18px;
+     border-radius: 2px;
+     background: #FE5F55;
+ }
+ .search-wrapper .input-holder .search-icon span::after {
+     width: 20px;
+     height: 20px;
+     left: 3px;
+     top: 0px;
+     border-radius: 16px;
+     border: 4px solid #FE5F55;
+ }
+ .search-wrapper .close {
+     position: absolute;
+     z-index: 1;
+     top:24px;
+     right:20px;
+     width:25px;
+     height:25px;
+     cursor: pointer;
+     transform: rotate(-180deg);
+     transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
+     transition-delay: 0.2s;
+ }
+ .search-wrapper.active .close {
+     right:-50px;
+     transform: rotate(45deg);
+     transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
+     transition-delay: 0.5s;
+ }
+ .search-wrapper .close::before, .search-wrapper .close::after {
+     position:absolute;
+     content:'';
+     background: #FE5F55;
+     border-radius: 2px;
+ }
+ .search-wrapper .close::before {
+     width: 5px;
+     height: 25px;
+     left: 10px;
+     top: 0px;
+ }
+ .search-wrapper .close::after {
+     width: 25px;
+     height: 5px;
+     left: 0px;
+     top: 10px;
+ }
+ 
\ No newline at end of file

public/css/switchButton.css

+.switch {
+  position: relative;
+  display: inline-block;
+  width: 45px;
+  height: 19px;
+}
+
+.switch input { 
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 11px;
+  width: 11px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
\ No newline at end of file