Präsentations Version

css/style.css

@@ -1,69 +1,520 @@
 
 
-body, html {
+:root {
+  --marine: #27177A;
+  --royalblau: #3F34C6;
+  --orange: #F07C3C;
+  --pastelorange: #FFC192;
+  --nude: #FAD8C4;
+  --helllachs: #FFF5EE;
 
-  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
+  --borderRadSmall: 14px;
-  height: calc(var(--vh, 1vh) * 100);
 
+}
+
+/*----------------------------------------------------*/
+/*------------------- ALLGEMEIN ----------------------*/
+/*----------------------------------------------------*/
+
+body {
+
+  height: 100vh;
+  min-height: -webkit-fill-available;
+  position: fixed;
 
   overflow: hidden;
   margin: 0;
   padding: 0;
 }
 
-
+html {
-
+  height: -webkit-fill-available;
-
+}
 
 
 h1 {
-  color: black;
+  color: #fff5ee;
+  font-family: bd-supper, sans-serif;
+  font-weight: 700;
+  font-style: normal;
 }
 
-#overlay{
+h2 {
+  font-family: bd-supper, sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+p{
+  font-family: input-sans-condensed, sans-serif;
+  font-weight: 200;
+  font-style: normal;
+}
+
+p.italic{
+  font-family: input-sans-condensed, sans-serif;
+  font-weight: 200;
+  font-style: italic;
+}
+
+#logo {
   position: absolute;
-  top: 10vh;
+  top: 10px;
-  height: 80vh;
+  left: 10px;
+  height: 115px;
+  width: 115px;
+}
+
+div.mapControls {
+  height: 140px;
+  width: 40px;
+  position: absolute;
+  top: 20px;
+  right: 10px;
+
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+
+}
+
+img.mapControl {
+  height: 40px;
+  width: 40px;
+  margin-top: 5px;
+ 
+}
+
+
+.hideButton {
+  opacity: 0 ;
+  transition: 0.5s ;
+  -webkit-transition: 0.5s ;
+  pointer-events: none;
+
+}
+
+/*----------------------------------------------------*/
+/*-------------------- STARTSCREEN -------------------*/
+/*----------------------------------------------------*/
+
+#startScreen {
+  width: 100%;
+  height: 100%;
+  transition: 0.5s ;
+  -webkit-transition: 0.5s ;
+
+  position: fixed;
+  background-color: var(--orange);
+  opacity: .9;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#LogoLarge {
+  width: 75%;
+  margin-top: 50%;
+
+}
+
+#startText {
+  font-family: bd-supper, sans-serif;
+  font-weight: 400;
+  font-style: normal;
+
+  color: var(--marine);
+  text-align: center;
+  margin: 0 10% 30% 10%;
+}
+
+.hideElement {
+  opacity: 0 !important;
+  pointer-events: none !important;
+  
+}
+
+
+
+
+/*----------------------------------------------------*/
+/*-------------- OVERLAY ALLGEMEIN -------------------*/
+/*----------------------------------------------------*/
+
+#overlay{
+  background-image: url("../images/backgroundBlue.svg");
+  background-size:cover;
+  position: fixed;
+  bottom: -0vh;
+  height: 75%;
   width: 100vw;
-  background: wheat;
+  border-radius: 30px 30px 0 0;
+  background-color: #27177A;
   overflow-x: hidden;
   overflow-y: scroll;
-
 }
 
 #overlay_container{
-  width: 95vw;
-  margin: 2.5vw;
-}
-
-form{
-  width: 100%;
-}
-
-input{
-  background-color: #e0824a;
-  display: block;
-  width: 98%;
-  padding: 0;
-  border: 0;
-  font-size: 18pt;
-  margin-bottom: 10px;
-  padding: 4px 0 4px 2%;
-  
-}
-
-input#deineIdee{
   
+  margin: 3%;
+  height: 94%;
 }
 
 .hidden{
-  display: none;
+  position: absolute;
+  transition: 0.3s;
+  -webkit-transition: 0.3s;
+  transform: translateY(100%);
+  -webkit-transform: translateY(100%);
 }
 
 .show{
+  transform: translateY(0);
+  -webkit-transform: translateY(0);
+
+  transition: 0.3s;
+  -webkit-transition: 0.3s;
   display: block;
 }
 
+
+#cancel {
+  width: 40px;
+  height: 40px;
+  position: sticky;
+  float: right;
+  right: 18px;
+  top: 18px;
+}
+
+cancel:active {
+  transition: 0.3s;
+  -webkit-transition: 0.3s;
+
+  transform: scale(1.1);
+  -webkit-transform: scale(1.1);
+}
+
+
+/*----------------------------------------------------*/
+/*------------------ IDEE ERFASSEN -------------------*/
+/*----------------------------------------------------*/
+
+form{
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: 100%;
+  height: 93%;
+  margin-top: 7%;
+}
+
+input, textarea{
+  background-color: #F07C3C;
+  color: #fff5ee;
+  display: block;
+  border-radius: 14px;
+  width: 96%;
+  padding: 0;
+  border: 0;
+  font-size: 18pt;
+  
+  padding: 5px 0 3px 4%;
+
+  font-family: bd-supper, sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  
+}
+
+div.textAndImage {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  background-color: #F07C3C;
+  border-radius: 14px;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  height: 80%;
+}
+
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: #fff5ee;
+  opacity: .8;
+  opacity: 1; /* Firefox */
+}
+
+
+
+textarea {
+  background-color: none;
+  font-family: input-sans-condensed, sans-serif;
+  font-weight: 200;
+  font-style: normal;
+  font-size: 12pt;
+  margin-top: 5px;
+  height: 75%;
+}
+
+input.titel{
+  width: 75%;
+  margin-bottom: 5%;
+  max-height: 15%;
+}
+
+
+button.submit{
+  background-image: url("../images/absenden.svg");
+  border-radius: 40px;
+  border: none;
+  width: 80px;
+  height: 80px;
+  background-color: #fad8c4;
+  position: absolute;
+  bottom: 8px;
+  left: 25px;
+}
+
+button.submit:active{
+  transition: 0.3s;
+  -webkit-transition: 0.3s;
+  transform: scale(1.1);
+  -webkit-transform: scale(1.1);
+}
+
+
+
+div.image-preview{
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row-reverse;
+    align-items: flex-end;
+  margin: 20px;
+  height: 25%;
+
+}
+
+div.ImgPrevContainer {
+  height: 100%;
+  aspect-ratio: 1;
+  background-size: cover;
+  margin-right: 20px;
+  border-radius: var(--borderRadSmall);
+}
+
+img.prevIMG {
+  height: 100%;
+  border-radius: var(--borderRadSmall);
+}
+
+.uploadcare--widget__button, 
+.uploadcare--widget__button_type_open, 
+.uploadcare--widget__button_type_open:focus, 
+.uploadcare--widget__button_type_open:hover{
+  height: 40px;
+  width: 40px;
+  background-image: url("../images/uploadImage.svg");
+  background-color: transparent;
+}
+
+.uploadcare--widget__text, .uploadcare--widget__progress {
+  display: none;
+}
+
+
+.uploadcare--widget__button_type_cancel{
+  height: 40px;
+  width: 40px;
+  background-image: url("../images/cancelImage.svg");
+  background-color: transparent;
+}
+
+.uploadcare--widget__button_type_remove{
+  height: 40px;
+  width: 40px;
+  background-image: url("../images/cancelImage.svg");
+  background-color: transparent;
+}
+
+
+/*----------------------------------------------------*/
+/*------------------ IDEE ANZEIGEN -------------------*/
+/*----------------------------------------------------*/
+
+
+
+div.ImgContainer {
+  margin-top: 20px;
+  height: 160px;
+  background-size: cover;
+  background-position: center center;
+  border-radius: var(--borderRadSmall);
+}
+
+#inhaltContainer {
+  margin-top: 15px;
+  padding-bottom: 0.1px;
+  background-color: var(--orange);
+  border-radius: var(--borderRadSmall);
+}
+
+.topMargin {
+  margin-top: 80px !important;
+}
+
+.kommentarFormular {
+  display: flex;
+  flex-direction: row;
+  margin: 10px;
+  height: 80px;
+}
+
+.kommentarText {
+  background-color: var(--pastelorange);
+  width: 70%;
+  height: 62px;
+  margin: 5px 0 5px 0;
+  padding: 5px 8px 3px 8px;
+
+  color: var(--marine);
+
+  font-family: bd-supper, sans-serif;
+  font-weight: 400;
+  font-style: normal;
+
+
+
+}
+
+.kommentarText::placeholder {
+  color: var(--marine);
+  opacity: 0.8;
+}
+
+p.likeDisplay {
+  display: inline-block;
+  color: var(--marine);
+
+  font-family: bd-supper, sans-serif;
+  font-weight: 400;
+  font-style: normal;
+
+  font-size: 13px;
+
+  margin: 10px 5px 5px 10px ;
+  
+}
+
+h1.ideeTitel {
+  color: var(--helllachs);
+  font-size: 28px;
+  margin: 10px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-top: var(--marine);
+  border-bottom: var(--marine);
+  border-left: transparent;
+  border-right: transparent;
+  border-width: 2px;
+  border-style: solid;
+}
+
+p.ideeInhalt {
+  margin: 20px 5px;
+  padding: 0 5px 0 5px;
+  color: var(--helllachs);
+}
+
+input.kommentarSubmit{
+  background-image: url("../images/absenden.svg");
+  border-radius: 40px;
+  border: none;
+  height: 50px;
+  width: 50px;
+  margin: 15px;
+  
+  background-color: #fad8c4;
+}
+
+#kommentare_container {
+  background-color: var(--pastelorange);
+  border-radius: var(--borderRadSmall);
+  margin: 10px;
+  padding-top: 0.01px;
+}
+
+div.comment {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: 10px;
+  border-bottom: var(--marine);
+  border-top: transparent;
+  border-left: transparent;
+  border-right: transparent;
+  border-style: solid;
+  border-width: 1px;
+}
+
+div.comment:last-child {
+  border-bottom: transparent;
+} 
+
+div.commentRight {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+
+p.commentText{
+  font-style: italic;
+  font-weight: 200;
+  font-size: 14px;
+  color: var(--marine);
+
+  margin: 5px 0 10px;
+
+  padding-right: 20px;
+}
+
+p.commentLikeNumber{
+  font-family: bd-supper, sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 13px;
+  color: var(--marine);
+
+  margin: 5px 0;
+  
+  padding-right: 20px;
+}
+
+img.commentLike{
+  width: 20px;
+  
+}
+
+
+
+
+
+.herz {
+  float: right;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin: 10px 10px 5px 5px;
+}
+
+
+/*----------------------------------------------------*/
+/*---------------------- OTHER -----------------------*/
+/*----------------------------------------------------*/
+
+
 #map {
   height: 100vh;
   width: 100vw;
@@ -71,22 +522,12 @@ input#deineIdee{
 }
 
 #currentLocation {
-  height: 80px;
+  height: 40px;
-  width: 80px;
+  width: 40px;
   z-index: 100;
 }
 
-.MapControls {
-  height: 300px;
-  width: 80px;
-  position: absolute;
-  top: 0;
-  right: 0;
 
-  display: flex;
-  justify-content: end;
-
-}
 
 
 #idee {
@@ -102,32 +543,12 @@ input#deineIdee{
 }
 
 
-.herz {
-  width: 80px;
-  height: 80px;
-}
 
 
-#cancel {
-  width: 60px;
-  height: 60px;
-}
 
 
-p.commentText{
-  display: inline-block;
-  padding-right: 20px;
-}
 
-p.commentLikeNumber{
-  display: inline-block;
-  padding-right: 20px;
-}
 
-img.commentLike{
-  width: 15px;
-  display: inline-block;
-}
 
 .image-preview ._list {
   padding-top: 20px;
@@ -149,3 +570,59 @@ img.commentLike{
   padding: 0 10px 6px;
 }
 
+
+/*----------------------------------------------------*/
+/*---------------------- ABOUT -----------------------*/
+/*----------------------------------------------------*/
+
+
+body.aboutInfo {
+  background-image: url("/images/Background2.svg");
+  background-size: cover;
+  color: var(--marine);
+  position: relative;
+  overflow-y: scroll;
+}
+
+div.content {
+
+  margin:  20px;
+  padding-bottom: 80px;
+
+}
+
+div.subPageHeader {
+  height: 130px;
+}
+
+body.aboutInfo h1 {
+  background-color: var(--helllachs);
+  color: var(--marine);
+
+  font-weight: 400;
+  font-size: 22pt;
+
+  width: fit-content;
+  
+  padding: 10px 13px 6px 10px;
+  margin-top: 25px;
+  margin-bottom: 12px;
+  border-radius: var(--borderRadSmall);
+}
+
+div.textContainer {
+  background-color: var(--helllachs);
+  padding: 10px;
+  border-radius: var(--borderRadSmall);
+
+}
+
+.activeLink {
+  opacity: .6;
+  pointer-events: none;
+}
+
+.fixedPos {
+  position: fixed;
+  top: 7px;
+}

images/Marker_0.svg

@@ -0,0 +1,4 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180.078 229.622">
+  <polygon points="5.557 7.084 74.603 229.622 180.078 5.003 5.557 7.084" style="fill: #050035;fill-opacity: 0.4"/>
+  <polygon points="0 2.081 69.046 224.619 174.521 0 0 2.081" style="fill: #ff7523"/>
+</svg>

images/Marker_1.svg

@@ -0,0 +1,4 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 271.555 292.079">
+  <polygon points="5.557 67.908 132.674 292.079 271.555 5.003 5.557 67.908" style="fill: #050035;fill-opacity: 0.4"/>
+  <polygon points="0 62.905 127.117 287.076 265.998 0 0 62.905" style="fill: #ff7523"/>
+</svg>

images/Marker_2.svg

@@ -0,0 +1,4 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.236 257.931">
+  <polygon points="5.557 5.003 129.896 257.931 229.236 53.53 5.557 5.003" style="fill: #050035;fill-opacity: 0.4"/>
+  <polygon points="0 0 124.339 252.927 223.68 48.527 0 0" style="fill: #ff7523"/>
+</svg>

images/Marker_3.svg

@@ -0,0 +1,4 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 167.897 260.432">
+  <polygon points="5.557 5.003 102.12 260.432 167.897 38.059 5.557 5.003" style="fill: #050035;fill-opacity: 0.4"/>
+  <polygon points="0 0 96.564 255.429 162.34 33.055 0 0" style="fill: #ff7523"/>
+</svg>

images/Marker_4.svg

@@ -0,0 +1,4 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190.512 290.282">
+  <polygon points="5.557 84.084 96.564 290.282 190.512 5.003 5.557 84.084" style="fill: #050035;fill-opacity: 0.4"/>
+  <polygon points="0 79.081 91.007 285.279 184.955 0 0 79.081" style="fill: #ff7523"/>
+</svg>

images/Marker_5.svg

@@ -0,0 +1,4 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 236.591 212.998">
+  <polygon points="5.557 26.571 128.264 212.998 236.591 5.003 5.557 26.571" style="fill: #050035;fill-opacity: 0.4"/>
+  <polygon points="0 21.567 122.707 207.995 231.034 0 0 21.567" style="fill: #ff7523"/>
+</svg>

images/about.svg

@@ -0,0 +1,4 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128.735 128.735">
+  <circle cx="64.368" cy="64.368" r="64.368" style="fill: #442ccd"/>
+  <path d="M419.892,297.531h.674c5.2,0,7.316,2.021,7.316,7.028,0,5.68-2.984,6.931-7.413,6.931H419.8c-5.294,0-7.316-2.022-7.316-7.124C412.479,300.227,413.731,297.531,419.892,297.531Zm-5.68,20.89h11.841v45.535H414.212Z" transform="translate(-355.697 -265.909)" style="fill: #fff"/>
+</svg>

images/absenden.svg

@@ -0,0 +1,8 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 258.026 258.026">
+  <circle cx="129.013" cy="129.013" r="129.013" style="fill: #ffd5bd"/>
+  <g>
+    <polygon points="22.81 123.885 209.781 48.269 158.415 196.255 87.436 157.286 79.086 209.805 63.777 150.615 22.81 123.885" style="fill: none;stroke: #2c107f;stroke-linecap: round;stroke-linejoin: round;stroke-width: 6px"/>
+    <line x1="118.553" y1="174.37" x2="79.086" y2="209.805" style="fill: none;stroke: #2c107f;stroke-linecap: round;stroke-linejoin: round;stroke-width: 6px"/>
+    <polyline points="63.777 150.615 209.781 48.269 87.436 157.286" style="fill: none;stroke: #2c107f;stroke-linecap: round;stroke-linejoin: round;stroke-width: 6px"/>
+  </g>
+</svg>

images/cancel.svg

@@ -0,0 +1,7 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128.735 128.735">
+  <circle cx="64.368" cy="64.368" r="64.368" style="fill: #ffd5bd"/>
+  <g>
+    <line x1="32.205" y1="96.53" x2="96.53" y2="32.205" style="fill: none;stroke: #2c107f;stroke-linecap: round;stroke-linejoin: round;stroke-width: 6px"/>
+    <line x1="32.205" y1="32.205" x2="96.53" y2="96.53" style="fill: none;stroke: #2c107f;stroke-linecap: round;stroke-linejoin: round;stroke-width: 6px"/>
+  </g>
+</svg>

images/cancelAboutInfo.svg

@@ -0,0 +1,7 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128.735 128.735">
+  <circle cx="64.368" cy="64.368" r="64.368" style="fill: #fff5ed"/>
+  <g>
+    <line x1="32.205" y1="96.53" x2="96.53" y2="32.205" style="fill: none;stroke: #2c107f;stroke-linecap: round;stroke-linejoin: round;stroke-width: 6px"/>
+    <line x1="32.205" y1="32.205" x2="96.53" y2="96.53" style="fill: none;stroke: #2c107f;stroke-linecap: round;stroke-linejoin: round;stroke-width: 6px"/>
+  </g>
+</svg>

images/cancelImage.svg

@@ -0,0 +1,7 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 134.734 134.735">
+  <path d="M420.064,397.644a67.368,67.368,0,1,1,67.368-67.367A67.443,67.443,0,0,1,420.064,397.644Zm0-128.735a61.368,61.368,0,1,0,61.368,61.368A61.437,61.437,0,0,0,420.064,268.909Z" transform="translate(-352.697 -262.909)" style="fill: #2c107f"/>
+  <g>
+    <line x1="35.205" y1="99.53" x2="99.53" y2="35.205" style="fill: none;stroke: #2c107f;stroke-linecap: round;stroke-linejoin: round;stroke-width: 6px"/>
+    <line x1="35.205" y1="35.205" x2="99.53" y2="99.53" style="fill: none;stroke: #2c107f;stroke-linecap: round;stroke-linejoin: round;stroke-width: 6px"/>
+  </g>
+</svg>

images/currentLocation.svg

@@ -0,0 +1,4 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128.735 128.735">
+  <circle cx="64.368" cy="64.368" r="64.368" style="fill: #442ccd"/>
+  <polygon points="64.368 29.601 40.697 99.134 64.368 85.684 88.038 99.134 64.368 29.601" style="fill: #fff"/>
+</svg>

images/help.svg

@@ -0,0 +1,4 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128.735 128.735">
+  <circle cx="64.368" cy="64.368" r="64.368" style="fill: #442ccd"/>
+  <path d="M402.777,333.34c0-15.96,25.724-15.015,25.724-23.52,0-4.2-3.57-5.564-7.559-5.564-7.981,0-8.085,6.614-8.085,6.614H399.732s.63-16.379,21.1-16.379h.42c12.075,0,19.95,5.985,19.95,15.329,0,16.8-26.669,15.539-26.669,24.254,0,2.625,2.309,4.305,5.984,4.305a6.455,6.455,0,0,0,6.3-5.039h10.6s-1.154,14.489-16.694,14.489C407.607,347.829,402.777,340.689,402.777,333.34ZM420.1,359.483h.735c5.355,0,7.246,1.89,7.246,7.035,0,4.41-1.156,6.825-7.351,6.825H420c-5.355,0-7.246-1.89-7.246-7.035C412.751,362,413.907,359.483,420.1,359.483Z" transform="translate(-355.697 -265.909)" style="fill: #fff"/>
+</svg>

images/herz-0.svg

@@ -0,0 +1,5 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.569 48.055">
+  <g id="c5rk9W.tif">
+    <path d="M440.13,334.474a80.694,80.694,0,0,1-12.874,12.4c-2.121,1.7-4.317,3.3-6.479,4.941-.388.294-.723.492-1.231.122a110.078,110.078,0,0,1-18-15.627,23.6,23.6,0,0,1-5.361-8.749c-2.207-7.21.65-15.232,6.915-18.055,5.393-2.43,12.506-.822,16.248,5.883.205.366.4.735.711,1.3.3-.519.5-.847.68-1.185,4.122-7.632,13.02-8.911,18.456-4.706,4.144,3.2,5.807,7.765,5.428,13.241a18.594,18.594,0,0,1-4.5,10.443" transform="translate(-393.28 -306.249)" style="fill: none;stroke: #2c107f;stroke-linecap: round;stroke-linejoin: round;stroke-width: 4.33890223503113px"/>
+  </g>
+</svg>

images/herz-1.svg

@@ -0,0 +1,5 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.482 47.94">
+  <g id="c5rk9W.tif">
+    <path d="M420.063,316.611c.3-.521.5-.851.684-1.191,4.142-7.671,13.086-8.956,18.55-4.73,4.166,3.222,5.837,7.805,5.456,13.309a18.679,18.679,0,0,1-4.52,10.5,81.092,81.092,0,0,1-12.94,12.46c-2.132,1.714-4.339,3.315-6.512,4.966-.39.3-.727.5-1.238.124a110.706,110.706,0,0,1-18.088-15.708,23.712,23.712,0,0,1-5.389-8.794c-2.217-7.247.653-15.31,6.951-18.147,5.421-2.443,12.57-.827,16.332,5.912C419.554,315.676,419.754,316.047,420.063,316.611Z" transform="translate(-393.323 -306.307)" style="fill: #2c107f;stroke: #2c107f;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 4px"/>
+  </g>
+</svg>

images/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

images/uploadImage.svg

@@ -0,0 +1,7 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 134.734 134.735">
+  <g>
+    <path d="M420.064,397.644a67.368,67.368,0,1,1,67.368-67.367A67.443,67.443,0,0,1,420.064,397.644Zm0-128.735a61.368,61.368,0,1,0,61.368,61.368A61.437,61.437,0,0,0,420.064,268.909Z" transform="translate(-352.697 -262.909)" style="fill: #2c107f"/>
+    <circle cx="48.004" cy="35.118" r="12.048" style="fill: #2c107f"/>
+    <polyline points="68.856 69.56 94.265 30.022 108.521 104.713 26.213 104.713 40.469 57.819 68.856 69.56" style="fill: #2c107f"/>
+  </g>
+</svg>

index.php

@@ -13,32 +13,46 @@ dbVerbindungErzeugen()
     <title>SPINN MIT!</title>
     <link rel="stylesheet" href="/css/style.css">
 
+    <link rel="stylesheet" href="https://use.typekit.net/out0zfe.css">
+
+    <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
+    <link rel="manifest" href="images/site.webmanifest">
+
+
   
-  <script>UPLOADCARE_LOCALE="de"
-  UPLOADCARE_LOCALE_TRANSLATIONS = {
-    buttons: {
-      choose: {
-        files: {
-            other: 'Bild hochladen'
-        }
-      }
-    }
-  }</script>
 
 </head>
 <body>
 
+    
+
     <div id="map">
     </div>
 
-    <div class="MapControls">
+    <div id="startScreen" class="hideElement">
-    <img src="/images/navigation.png" id="currentLocation">
+      <img src="images/logo.gif" id="LogoLarge" alt="">
+      <p id="startText">Mitspinnen und Zürich optimieren: Hier werden deine Ideen gehört!</p>
+    </div>
+   
+    <img src="images/logo.gif" class="hideElement" id="logo" alt="">
+  
+
+    <div class="mapControls hideElement">
+      <a href="/help.html">
+        <img src="images/help.svg" id="helpLink" class="mapControl">
+      </a>
+      <a href="/about.html">
+        <img src="images/about.svg" id="aboutLink" class="mapControl">
+      </a>
+      <img src="images/currentLocation.svg" id="currentLocation" class="mapControl">
 
 
     </div>
 
     <div id="overlay" class="hidden">
-      <img src="/images/cancel.png" id="cancel">
+      <img src="/images/cancel.svg" id="cancel">
 
       <div id="overlay_container">
 

js/functions.js

@@ -7,25 +7,51 @@
 let localLikes = {}
 
 
-window.addEventListener('resize', () => {
+UPLOADCARE_LOCALE_TRANSLATIONS = {
-  // We execute the same script as before
+  buttons: {
-  let vh = window.innerHeight * 0.01;
+    cancel: '',
-  document.documentElement.style.setProperty('--vh', `${vh}px`);
+    remove: '',
-});
+    choose: {
+      files: {
+        one: '',
+        other: ''
+      },
+      images: {
+        one: '',
+        other: ''
+      }
+    }
+  }
+};
 
 
 
 $(document).ready(function(){
 
+  window.scrollTo(0,1)
+
 
   // submit kommentar nicht seite neu laden
 
     $("#kommentarform").submit(function(e) {
         console.log("Submitted")
+        
         e.preventDefault(); // avoid to execute the actual submit of the form.
     });
 
 
+  if(!localStorage.getItem('firstVisit')){
+    console.log("loadStartscreen");
+    localStorage.setItem('firstVisit', 'false');
+    loadStartScreen();
+  } else {
+    console.log("not load Startscreen ");
+    $(".mapControls").removeClass("hideElement")
+    $("#logo").removeClass("hideElement")
+
+
+  }
+
   
 
   //LocalStorage erstellen oder auslesen
@@ -61,13 +87,41 @@ $(document).ready(function(){
 })
 
 
+function loadStartScreen(){
+
+$("#startScreen").removeClass("hideElement")
+
+$('#startScreen').click(() => {
+  $(".mapControls").removeClass("hideElement")
+  $("#logo").removeClass("hideElement")
+  $("#startScreen").addClass("hideElement")
+
+})
+
+setTimeout(() => {
+  $(".mapControls").removeClass("hideElement")
+  $("#logo").removeClass("hideElement")
+  $("#startScreen").addClass("hideElement")
+}, 10000);
+ //onclick
+    //$(".mapControls").removeClass("hideElement")
+    //$("#logo").removeClass("hideElement")
+
+}
+
 function openOverlay(){
 
   $("#overlay").removeClass("hidden").addClass("show")
+  $("#currentLocation").addClass("hideButton")
 
   $("#cancel").click(function() {
-    document.getElementById("overlay_container").innerHTML = "";
     $("#overlay").removeClass("show").addClass("hidden")
+    $("#currentLocation").removeClass("hideButton")
+    setTimeout(() => {
+      document.getElementById("overlay_container").innerHTML = "";
+    
+    }, 300);
+    
 
   })
 }
@@ -119,36 +173,44 @@ function chageLocalStorrage(typ, id, addRemove){
 function ideeAnzeigen(data) {
 
   document.getElementById("overlay_container").innerHTML = "";
-  document.querySelectorAll('.loeschen').forEach(e => e.remove());
+  let inhaltContainer = document.createElement("div");
+  inhaltContainer.setAttribute("id","inhaltContainer")
+  
+
+  let likesErstellen = document.createElement("p");
+  let likes = document.createTextNode("Gefällt " + data.likes + " Mal");
+  likesErstellen.appendChild(likes);
+  likesErstellen.classList.add("likeDisplay");
+  
+  
   let titelErstellen = document.createElement("h1");
   let titelInhalt = document.createTextNode(data.titel);
   titelErstellen.appendChild(titelInhalt);
-  titelErstellen.classList.add("loeschen");
+  titelErstellen.classList.add("ideeTitel");
-  document.getElementById('overlay_container').appendChild(titelErstellen);
+  
 
   let inhaltErstellen = document.createElement("p");
   let inhaltInhalt = document.createTextNode(data.inhalt);
   inhaltErstellen.appendChild(inhaltInhalt);
-  inhaltErstellen.classList.add("loeschen");
+  inhaltErstellen.classList.add("ideeInhalt");
-  document.getElementById('overlay_container').appendChild(inhaltErstellen);
   
-  let likesErstellen = document.createElement("p");
-  let likes = document.createTextNode(data.likes + " Likes");
-  likesErstellen.appendChild(likes);
-  likesErstellen.classList.add("likeDisplay");
-  document.getElementById('overlay_container').appendChild(likesErstellen);
 
-  if(data.bild != null && data.bild != undefined){
+
+
+  if(data.bild != null && data.bild != ""){
     let bildContainer = $("<div>").addClass("ImgContainer");
     let imgUrlArr = JSON.parse(data.bild);
     for (let i = 0; i < imgUrlArr.length; i++) {
-      let img = $("<img>").addClass("previewImage");
+      //let img = $("<img>").addClass("previewImage");
-      img.attr("src", imgUrlArr[i]);
+      //img.attr("src", imgUrlArr[i]);
-      img.appendTo(bildContainer);
+      //img.appendTo(bildContainer);
+      bildContainer.css("background-image","url(" + imgUrlArr[i] + ")")
 
     }
 
     bildContainer.prependTo($("#overlay_container"))
+  } else {
+    inhaltContainer.classList.add("class","topMargin")
   }
 
 
@@ -171,27 +233,33 @@ function ideeAnzeigen(data) {
   //check if user has liked Idea before,load proper image and set class
 
   if(localLikes.ideen.includes(data.id)){
-    ideeLike.src= "../images/herz-1.png";
+    ideeLike.src= "../images/herz-1.svg";
     ideeLike.classList.add("liked");
   }else{
-    ideeLike.src= "../images/herz-0.png";
+    ideeLike.src= "../images/herz-0.svg";
     ideeLike.classList.add("unliked");
   }
 
-  document.getElementById('overlay_container').appendChild(ideeLike);
+  document.getElementById('overlay_container').appendChild(inhaltContainer);
+  document.getElementById('inhaltContainer').appendChild(likesErstellen);
+  document.getElementById('inhaltContainer').appendChild(ideeLike);
+  document.getElementById('inhaltContainer').appendChild(titelErstellen);
+  document.getElementById('inhaltContainer').appendChild(inhaltErstellen);
+
+
 
 
 
   ideeLike.addEventListener('click', function() {
 
     if(localLikes.ideen.includes(data.id)){
-      ideeLike.src= "../images/herz-0.png";
+      ideeLike.src= "../images/herz-0.svg";
       ideeLike.classList.add("unliked");
       ideeLike.classList.remove("liked");
       removeLike("idee", data.id)
     }else{
 
-      ideeLike.src= "../images/herz-1.png";
+      ideeLike.src= "../images/herz-1.svg";
       ideeLike.classList.add("liked");
       ideeLike.classList.remove("unliked");
       addLike("idee", data.id)
@@ -204,7 +272,7 @@ function ideeAnzeigen(data) {
 
   let kommentare_container = document.createElement("div")
   kommentare_container.setAttribute("id", "kommentare_container");
-  document.getElementById('overlay_container').appendChild(kommentare_container);
+  document.getElementById('inhaltContainer').appendChild(kommentare_container);
 
 
 
@@ -230,7 +298,7 @@ function addLike(typ, id, element){
 
         //neue Likes anzeigen
 
-        $("p.likeDisplay").html(response + " Likes")
+        $("p.likeDisplay").html("Gefällt " + response + " Mal")
 
     });
 
@@ -244,7 +312,7 @@ function addLike(typ, id, element){
     $.post('system/addLike.php/?typ=kommentar&id=' + id, {}).done(function(response){
 
 
-      element.prev().html(response + " Likes")
+      element.parent().prev().children().first().html("Gefällt " + response + " Mal")
 
 
     });
@@ -263,7 +331,7 @@ function removeLike(typ, id, element){
     $.post('system/removeLike.php/?typ=idee&id=' + id, {}).done(function(response){
 
 
-      $("p.likeDisplay").html(response + " Likes")
+      $("p.likeDisplay").html("Gefällt " + response + " Mal")
 
 
     });
@@ -274,7 +342,7 @@ function removeLike(typ, id, element){
     $.post('system/removeLike.php/?typ=kommentar&id=' + id, {}).done(function(response){
 
 
-      element.prev().html(response + " Likes")
+      element.parent().prev().children().first().html("Gefällt " + response + " Mal")
 
 
     });
@@ -297,29 +365,31 @@ function kommentarErstellen(idee_id) {
 
 
   let formular = document.createElement("form");
-  formular.classList.add("formular");
+  formular.classList.add("kommentarFormular");
   formular.setAttribute("action", "../system/kommentarSpeichern.php");
   formular.setAttribute("method", "post");
   formular.setAttribute("id", "kommentarform");
-  document.getElementById("overlay_container").appendChild(formular);
+  document.getElementById("inhaltContainer").appendChild(formular);
 
-  let text_label = document.createElement("label");
-  text_label.setAttribute("for", "text");
   
-  let text_input = document.createElement("input");
+  let text_input = document.createElement("textarea");
+  text_input.classList.add("kommentarText");
+  text_input.setAttribute("rows", "3");
   text_input.setAttribute("type", "text");
-  text_input.setAttribute("name", "text")
+  text_input.setAttribute("placeholder", "Schreibe einen Kommentar...");
+  text_input.setAttribute("name", "text");
 
   let submit_input = document.createElement("input");
+  submit_input.classList.add("kommentarSubmit");
   submit_input.setAttribute("type", "submit");
-  submit_input.setAttribute("value", "Kommentar posten");
+  submit_input.setAttribute("value", "");
 
   let id = document.createElement("input");
   id.setAttribute("type", "hidden");
   id.setAttribute("name", "idee_id")
   id.value = idee_id;
 
-  document.getElementById("kommentarform").appendChild(text_label);
+  
   document.getElementById("kommentarform").appendChild(text_input);
   document.getElementById("kommentarform").appendChild(submit_input);
   document.getElementById("kommentarform").appendChild(id);
@@ -333,7 +403,10 @@ function kommentarErstellen(idee_id) {
       url: "/system/kommentarSpeichern.php",
       data: form.serialize(),
     })
+
+
       e.preventDefault();
+      $("textarea.kommentarText").val("")
       document.getElementById("kommentare_container").innerHTML = "";
 
       kommentareAnzeigen(idee_id);
@@ -369,28 +442,34 @@ function formularErstellen(koordianten) {
 
   let titel_input = document.createElement("input");
   titel_input.setAttribute("type", "text");
-  titel_input.setAttribute("id", "deineIdee");
+  titel_input.classList.add("titel");
   titel_input.setAttribute("name", "titel");
-  titel_input.setAttribute("placeholder", "titel");
+  titel_input.setAttribute("placeholder", "TITEL");
 
   
 
-  let text_input = document.createElement("input");
+  let text_input = $("<textarea>");
-  text_input.setAttribute("type", "textarea");
+  text_input.attr("rows", "10");
-  text_input.setAttribute("name", "text");
+  text_input.attr("name", "text");
-  text_input.setAttribute("placeholder", "Deine Idee...");
+  text_input.attr("placeholder", "Deine Idee...");
 
   let image_links = document.createElement("input");
   image_links.setAttribute("type", "hidden");
   image_links.setAttribute("name", "bilder");
 
-  let submit_input = document.createElement("input");
+  let submit_input = document.createElement("button");
   submit_input.setAttribute("type", "submit");
-  submit_input.setAttribute("value", "Formular Absenden");
+  submit_input.classList.add("submit");
+
+  let textAndImage = $("<div>").addClass("textAndImage")
+  
 
 
   document.getElementById("form").appendChild(titel_input);
-  document.getElementById("form").appendChild(text_input);
+  textAndImage.appendTo("#form");
+  text_input.appendTo(textAndImage);
+ 
+
   document.getElementById("form").appendChild(submit_input);
   document.getElementById("form").appendChild(koordinaten_lat);
   document.getElementById("form").appendChild(koordinaten_lng);
@@ -398,7 +477,8 @@ function formularErstellen(koordianten) {
 
   let imageUpload = $('<div class="image-preview" id="image-upload">')
   imageUpload.html('<input type="hidden"  role="uploadcare-uploader" data-public-key="3a3c37e85850c6cfe077" data-multiple="false" data-images-only data-public- data-clearable data-tabs="file camera" data-image-shrink: "1024x1024" data-system-dialog="true"/>')
-  imageUpload.appendTo("#overlay_container");
+
+  imageUpload.appendTo(textAndImage);
 
 
 
@@ -429,17 +509,27 @@ function formularErstellen(koordianten) {
     image_links.value = linkArrString;
     console.log(image_links.value);
 
+    $(".uploadcare--widget__button_type_remove").click(() => {
+      console.log("delete");
+      $("div.ImgPrevContainer").remove()
+      image_links.value = "";
+    })
 
   });
 
+  console.log($(".uploadcare--widget__button_type_open needsclick"));
+  $(".uploadcare--widget__button_type_open needsclick").addClass("test")
+
 
 };
 
+
 function createImgPrev(imgURL){
 
-  let prevImg = $("<img>").addClass("prevIMG");
+  //let prevImg = $("<img>").addClass("prevIMG");
-  prevImg.attr('src', imgURL);
+  //prevImg.attr('src', imgURL);
-  prevImg.appendTo($("div.ImgPrevContainer"));
+  //prevImg.appendTo($("div.ImgPrevContainer"));
+  $("div.ImgPrevContainer").css('background-image', 'url(' + imgURL + ')');
 }
 
 
@@ -449,10 +539,7 @@ function kommentareAnzeigen(idee_id){
 
   $.post("./system/alleKommentareHolen.php/?id=" + idee_id, {}).done(function(comments){
 
-    let k = document.createElement("h3");
+ 
-    let k_text = document.createTextNode("Kommentare:");
-    k.appendChild(k_text);
-    document.getElementById('kommentare_container').appendChild(k);
 
 
     let commentArray = JSON.parse(comments);
@@ -465,27 +552,34 @@ function kommentareAnzeigen(idee_id){
 
 
       let kommentarContainer = $("<div>").addClass("comment");
+      let kommentarLinks = $("<div>").addClass("commentLeft")
+      let kommentarRechts = $("<div>").addClass("commentRight")
 
 
+     
+
+      let kommentarLikeNumber = $("<p>").text("Gefällt " + thisComment.k_likes + " Mal").addClass("commentLikeNumber");
+      kommentarLikeNumber.appendTo(kommentarLinks);
+
       let kommentarText = $("<p>").addClass("commentText");
       kommentarText.text(thisComment.k_text);
-      kommentarText.appendTo(kommentarContainer);
+      kommentarText.appendTo(kommentarLinks);
-
-      let kommentarLikeNumber = $("<p>").text(thisComment.k_likes + " Likes").addClass("commentLikeNumber");
-      kommentarLikeNumber.appendTo(kommentarContainer);
 
       let kommentarLikeButton = $("<img>").addClass("unliked commentLike")
 
 
       if(localLikes.kommentare.includes(thisComment.k_id)){
-        kommentarLikeButton.attr("src", "../images/herz-1.png");
+        kommentarLikeButton.attr("src", "../images/herz-1.svg");
         kommentarLikeButton.addClass("liked");
       }else{
-        kommentarLikeButton.attr("src", "../images/herz-0.png");
+        kommentarLikeButton.attr("src", "../images/herz-0.svg");
         kommentarLikeButton.addClass("unliked");
       }
 
-      kommentarLikeButton.appendTo(kommentarContainer);
+      kommentarLikeButton.appendTo(kommentarRechts);
+
+      kommentarLinks.appendTo(kommentarContainer)
+      kommentarRechts.appendTo(kommentarContainer)
 
       kommentarContainer.appendTo($("#kommentare_container"));
 
@@ -495,13 +589,13 @@ function kommentareAnzeigen(idee_id){
       kommentarLikeButton.click( function() {
 
         if(localLikes.kommentare.includes(thisComment.k_id)){
-          kommentarLikeButton.attr("src", "../images/herz-0.png");
+          kommentarLikeButton.attr("src", "../images/herz-0.svg");
           kommentarLikeButton.addClass("unliked");
           kommentarLikeButton.removeClass("liked");
           removeLike("kommentar", thisComment.k_id, $(this))
         }else{
 
-          kommentarLikeButton.attr("src", "../images/herz-1.png");
+          kommentarLikeButton.attr("src", "../images/herz-1.svg");
           kommentarLikeButton.addClass("liked");
           kommentarLikeButton.removeClass("unliked");
           addLike("kommentar", thisComment.k_id, $(this))

loadMap.js

@@ -1,25 +1,26 @@
 
  const zuerich_bounds = {
-  north: 47.41590970260092,
+  north: 47.43590970260092,
-  south: 47.315703309031846,
+  south: 47.278703309031846,
-  west: 8.45742642179812,
+  west: 8.40742642179812,
-  east: 8.600047733589026,
+  east: 8.680047733589026,
 };
 
 function initMap() {
   const map = new google.maps.Map(document.getElementById('map'), {
   mapId: "fd4581e1612d9ef",
-  center: {lat: 47.38109493760974, lng: 8.521861488204763},
+  center: {lat: 47.36972459746934, lng: 8.53404830446534},
   restriction: {
       latLngBounds: zuerich_bounds,
      strictBounds: false,
     },
   zoom: 13,
   disableDefaultUI: true,
-  gestureHandling: "greedy",
+  gestureHandling: "greedy"
 
 });
 infoWindow = new google.maps.InfoWindow();
+
 addMarkers();
 
 
@@ -39,17 +40,55 @@ function addMarkers(){
       return response.json();
     })
     .then((markerData) => {
+      let mostLikes = 1;
+  
       for (let i = 0; i < markerData.length; i++) {
+        if(markerData[i].likes >= mostLikes){
+          mostLikes = markerData[i].likes;
+        } 
+        
+      }
+
+      
+
+      console.log(mostLikes);
+      
+
+      let markerSizeFactor = 1/mostLikes*100;
+      
+      
+     for (let i = 0; i < markerData.length; i++) {
+
+        let markerIMGcounter = markerData[i].id % 6;
+
+        
+
+        let likes = markerData[i].likes 
+
+        
+
+        
+
+        let markersizeDelta =  likes * markerSizeFactor /100 * 80
+        let markersize = markersizeDelta + 40
+        console.log(markersize);
+        
+        
+      setTimeout(() => {
+        
        if (markerData[i].sichtbarkeit = 1) {
+        
          const marker = new google.maps.Marker({
              position: {lat: markerData[i].koordinatenLat, lng: markerData[i].koordinatenLng},
              map: map,
              title: markerData[i].titel,
              icon: {
-               url: "/images/ort.png",
+               url: "/images/Marker_" + markerIMGcounter + ".svg",
-               scaledSize: new google.maps.Size(38+(markerData[i].likes), 38+(markerData[i].likes)),
+               scaledSize: new google.maps.Size(markersize, markersize),
+               
              },
              animation: google.maps.Animation.DROP,
+             zIndex: 100,
 
            });
 
@@ -64,6 +103,7 @@ function addMarkers(){
        else {
 
        }
+      }, Math.floor(Math.random() * 250 + 100));
      }
     })
     .catch(function(error) {
@@ -98,7 +138,7 @@ function newMarker(mousePosition) {
 
     let icon = {url:"/images/ort.png", size: new google.maps.Size(30, 30)};
 
-    newMarker.setIcon("/images/newMarker.jpg");
+    newMarker.setIcon("/images/newMarker.png");
 
     $("#cancel").click(function() {
       newMarker.setMap(null);
@@ -127,10 +167,12 @@ function newMarker(mousePosition) {
             position: pos,
             map: map,
             icon: {
-              url: "/images/current_location.png",
+              url: "/images/current_location.gif",
             animation: google.maps.Animation.DROP,
-            scaledSize: new google.maps.Size(50, 50)
+            scaledSize: new google.maps.Size(50, 50),
-        }});
+            },
+            zIndex: 999
+        });
 
         map.setCenter(pos);
       },

system/ideeSpeichern.php

@@ -19,6 +19,8 @@ require_once('data.php');
 
   if(isset($_POST['bilder'])){
     $bilder = $_POST['bilder'];
+  } else {
+    $bilder = NULL;
   }
 
 $sql = "INSERT INTO idee (titel, inhalt, koordinatenLat, koordinatenLng, bild) VALUES (?, ?, ?, ?, ?)";