css doooone

website/map/index.php

@@ -203,7 +203,7 @@ function callAPI($url){
     <div id="title-container">
         <h1>OPENCOIL</h1>
         <h2>a roaming speedshow</h2>
-        <p>legendary code has once been written on a cold rainy night in october. it was 2 nay 1 day before the opening of this show when i typed this silly code. it was legendary. both the situation as well as the code. thanks for reading. bye</p>
+        <!--<p>legendary code has once been written on a cold rainy night in october. it was 2 nay 1 day before the opening of this show when i typed this silly code. it was legendary. both the situation as well as the code. thanks for reading. bye</p>-->
     <div id="bottom_menu">
         <a href="#" onclick="document.getElementById('infotext').style.visibility='visible';document.getElementById('infotext').style.opacity='1';">info</a>
         <a href="#" onclick="document.getElementById('abouttext').style.visibility='visible';document.getElementById('infotext').style.opacity='1';">about</a>

website/map/latestData.json

@@ -1 +1 @@
-{"0":{"ID":0,"lastPos":"52.516922, 13.494012","lastLocationUpdate":"2020-10-15T00:51:13Z","isRentable":true,"state":"ACTIVE","name":"artist name 0","title":"title","desc":"desciption"},"1":{"ID":1,"lastPos":"52.461506, 13.321215","lastLocationUpdate":"2020-10-15T00:48:45Z","isRentable":true,"state":"ACTIVE","name":"artist name 1","title":"title","desc":"desciption"},"2":{"ID":2,"lastPos":"52.491178, 13.385457","lastLocationUpdate":"2020-10-15T00:46:28Z","isRentable":true,"state":"ACTIVE","name":"artist name 2","title":"title","desc":"desciption"},"3":{"ID":3,"lastPos":"52.474423, 13.365387","lastLocationUpdate":"2020-10-15T00:48:04Z","isRentable":false,"state":"INACTIVE","name":"artist name 3","title":"title","desc":"desciption"},"4":{"ID":4,"lastPos":"52.512192, 13.376707","lastLocationUpdate":"2020-10-15T00:46:40Z","isRentable":true,"state":"ACTIVE","name":"artist name 4","title":"title","desc":"desciption"},"5":{"ID":5,"lastPos":"52.529781, 13.401221","lastLocationUpdate":"2020-10-15T00:54:37Z","isRentable":true,"state":"ACTIVE","name":"artist name 5","title":"title","desc":"desciption"},"6":{"ID":6,"lastPos":"52.507063, 13.31256","lastLocationUpdate":"2020-10-15T00:47:27Z","isRentable":true,"state":"ACTIVE","name":"artist name 6","title":"title","desc":"desciption"},"7":{"ID":7,"lastPos":"52.545109, 13.359456","lastLocationUpdate":"2020-10-15T00:51:35Z","isRentable":true,"state":"ACTIVE","name":"artist name 7","title":"title","desc":"desciption"},"8":{"ID":8,"lastPos":"52.511562, 13.310639","lastLocationUpdate":"2020-10-13T00:02:27Z","isRentable":false,"state":"GPS_ISSUE","name":"artist name 8","title":"title","desc":"desciption"},"9":{"ID":9,"lastPos":"52.548454, 13.366208","lastLocationUpdate":"2020-10-15T00:50:36Z","isRentable":true,"state":"ACTIVE","name":"artist name 9","title":"title","desc":"desciption"}}
+{"0":{"ID":0,"lastPos":"52.516891, 13.493958","lastLocationUpdate":"2020-10-15T10:03:24Z","isRentable":true,"state":"ACTIVE","name":"artist name 0","title":"title","desc":"desciption"},"1":{"ID":1,"lastPos":"52.461506, 13.321215","lastLocationUpdate":"2020-10-15T10:05:54Z","isRentable":true,"state":"ACTIVE","name":"artist name 1","title":"title","desc":"desciption"},"2":{"ID":2,"lastPos":"52.491211, 13.38604","lastLocationUpdate":"2020-10-15T10:04:27Z","isRentable":true,"state":"ACTIVE","name":"artist name 2","title":"title","desc":"desciption"},"3":{"ID":3,"lastPos":"52.474423, 13.365387","lastLocationUpdate":"2020-10-15T08:25:44Z","isRentable":false,"state":"INACTIVE","name":"artist name 3","title":"title","desc":"desciption"},"4":{"ID":4,"lastPos":"52.512192, 13.376707","lastLocationUpdate":"2020-10-15T10:03:48Z","isRentable":true,"state":"ACTIVE","name":"artist name 4","title":"title","desc":"desciption"},"5":{"ID":5,"lastPos":"52.529785, 13.400977","lastLocationUpdate":"2020-10-15T10:00:25Z","isRentable":true,"state":"ACTIVE","name":"artist name 5","title":"title","desc":"desciption"},"6":{"ID":6,"lastPos":"52.507063, 13.31256","lastLocationUpdate":"2020-10-15T10:04:36Z","isRentable":true,"state":"ACTIVE","name":"artist name 6","title":"title","desc":"desciption"},"7":{"ID":7,"lastPos":"52.545063, 13.359674","lastLocationUpdate":"2020-10-15T10:04:57Z","isRentable":true,"state":"ACTIVE","name":"artist name 7","title":"title","desc":"desciption"},"8":{"ID":8,"lastPos":"52.511562, 13.310639","lastLocationUpdate":"2020-10-13T00:02:27Z","isRentable":false,"state":"GPS_ISSUE","name":"artist name 8","title":"title","desc":"desciption"},"9":{"ID":9,"lastPos":"52.533564, 13.366404","lastLocationUpdate":"2020-10-15T09:57:50Z","isRentable":true,"state":"ACTIVE","name":"artist name 9","title":"title","desc":"desciption"}}

website/map/main.css

@@ -1,28 +1,33 @@
 body {
    height: 100%;
    width: 100%;
+   max-width: 100%;
+   max-height: 100%;
    margin: 0;
+   overflow: hidden;
 }
 
 #map {
    position: absolute;
    height: 100%;
    width: 100%;
+   max-height: 100%;
+   max-width: 100%;
    border: none;
 }
 
 #title-container {
    position: absolute;
+   pointer-events: none;
    display: flex;
    flex-flow: row wrap;
-   pointer-events: none;
    z-index: 1000;
    text-align: right;
    width: 100%;
    height: 100%;
 }
 
-h1, h2, h3, p {
+h1, h2, h3 {
    position: absolute;
    width: 100%;
    pointer-events: none;
@@ -52,15 +57,9 @@ h3 {
    align-self: flex-start;
 }
 
-p {
-   font-size: 5vw;
-   padding-right: 2.5%;
-   align-self: flex-end;
-   padding-bottom: 2.5%;
-}
-
 #bottom_menu {
    position: absolute;
+   pointer-events: all !important;
    display: flex;
    justify-content: space-between;
    align-self: flex-end;
@@ -73,6 +72,7 @@ p {
    font-size: 2.5vw;
    text-align: center;
    align-items: center;
+   border: 1px #d152b8;
 
 }
 
@@ -81,13 +81,25 @@ p {
    color: #d152b8;
 }
 
+ /* Hide scrollbar for Chrome, Safari and Opera */
+#infotext, #infotext_en:-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+#infotext, #infotext_en {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+} 
+
 #infotext, #infotext_en {
+
    visibility: hidden;
    opacity:0;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    position: absolute;
-    z-index: 400;
+   z-index: 1000;
    width: 80%;
    height: 70%;
    max-height: 100%;
@@ -95,15 +107,29 @@ p {
    word-wrap: break-word;
    background-color: #d152b8;
    color: white;
-    margin: 12% 20% 20% 10%;
+   margin: 23% 20% 20% 10%;
    transition: opacity 1s;
 
 }
 
+#infotext p, #infotext_en p {
+    padding: 0% 10% 10% 10%;
+    margin: 0;
+    font-family: Arial;
+    font-weight: bold;
+    font-size: 2.0vw;
+    color: white;
+}
+
+#infotext a, #infotext_en a {
+   color: white;
+}
+
 #infobuttons {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    padding: 1vw;
 }
 
 #closeButton {
@@ -132,6 +158,7 @@ p {
 }
 
 #closeButtonbottom {
+   position: relative;
    font-family: Arial;
    font-size: 2vw;
    font-weight: bold;
@@ -141,9 +168,46 @@ p {
    cursor: pointer;
 }
 
+@media only screen and (max-width: 768px) {
+
+   #infotext, #infotext_en {
+      visibility: hidden;
+      overflow-x: hidden !important;
+      overflow-y: scroll !important;
+      position: absolute;
+      z-index: 400;
+      width: 90%;
+      height: 73%;
+      max-height: 100%;
+      max-width: 100%;
+      word-wrap: break-word;
+      background-color: #d152b8;
+      color: white;
+      margin: 28% 5% 0% 5%;
+   }
+
+   #closeButton, #enButton {
+      font-family: Arial;
+      font-size:4vw;
+      font-weight:bold;
+      padding:3%;
+   }
+
+   #closeButtonbottom {
+      font-size:4vw;
+      font-weight:bold;
+   }
+
    #infotext p, #infotext_en p {
-    padding: 0% 10% 10% 10%;
+      padding: 20px;
       font-family: Arial;
       font-weight: bold;
-    font-size: 2.0vw;
+      font-size: 4vw;
+      margin: 0;
+   }
+
+   #bottom_menu {
+      height: 5%;
+      font-size: 5vw;
+   }
 }

website/preshow/main.css

@@ -109,7 +109,6 @@ a {
   color: white;
   margin: 12% 20% 20% 10%;
 	transition: opacity 1s;
-
 }
 
 #infobuttons {