Präsentations Version
nooahe
parent
2a3c708291
commit
d7343e8cb7
609
css/style.css
609
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 */
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
--borderRadSmall: 14px;
|
||||
|
||||
}
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/*------------------- 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;
|
||||
height: 80vh;
|
||||
top: 10px;
|
||||
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;
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
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;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 311 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 317 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 309 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 308 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 315 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 317 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 460 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 750 B |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 505 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 505 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 682 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 291 B |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 728 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 771 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 695 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 720 B |
Binary file not shown.
|
After Width: | Height: | Size: 967 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -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"}
|
||||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 575 B |
40
index.php
40
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">
|
||||
|
||||
<script>UPLOADCARE_LOCALE="de"
|
||||
UPLOADCARE_LOCALE_TRANSLATIONS = {
|
||||
buttons: {
|
||||
choose: {
|
||||
files: {
|
||||
other: 'Bild hochladen'
|
||||
}
|
||||
}
|
||||
}
|
||||
}</script>
|
||||
<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">
|
||||
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<div id="map">
|
||||
</div>
|
||||
|
||||
<div class="MapControls">
|
||||
<img src="/images/navigation.png" id="currentLocation">
|
||||
<div id="startScreen" class="hideElement">
|
||||
<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">
|
||||
|
||||
|
|
|
|||
230
js/functions.js
230
js/functions.js
|
|
@ -7,27 +7,53 @@
|
|||
let localLikes = {}
|
||||
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
// We execute the same script as before
|
||||
let vh = window.innerHeight * 0.01;
|
||||
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
||||
});
|
||||
UPLOADCARE_LOCALE_TRANSLATIONS = {
|
||||
buttons: {
|
||||
cancel: '',
|
||||
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
|
||||
|
||||
if(localStorage.getItem('localLikes')){
|
||||
|
|
@ -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");
|
||||
document.getElementById('overlay_container').appendChild(titelErstellen);
|
||||
titelErstellen.classList.add("ideeTitel");
|
||||
|
||||
|
||||
let inhaltErstellen = document.createElement("p");
|
||||
let inhaltInhalt = document.createTextNode(data.inhalt);
|
||||
inhaltErstellen.appendChild(inhaltInhalt);
|
||||
inhaltErstellen.classList.add("loeschen");
|
||||
document.getElementById('overlay_container').appendChild(inhaltErstellen);
|
||||
inhaltErstellen.classList.add("ideeInhalt");
|
||||
|
||||
|
||||
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");
|
||||
img.attr("src", imgUrlArr[i]);
|
||||
img.appendTo(bildContainer);
|
||||
//let img = $("<img>").addClass("previewImage");
|
||||
//img.attr("src", imgUrlArr[i]);
|
||||
//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,35 +365,37 @@ 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);
|
||||
|
||||
$("#kommentarform").submit(function(e){
|
||||
|
||||
|
||||
let form = $(this);
|
||||
|
||||
$.ajax({
|
||||
|
|
@ -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,36 +442,43 @@ 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");
|
||||
text_input.setAttribute("type", "textarea");
|
||||
text_input.setAttribute("name", "text");
|
||||
text_input.setAttribute("placeholder", "Deine Idee...");
|
||||
let text_input = $("<textarea>");
|
||||
text_input.attr("rows", "10");
|
||||
text_input.attr("name", "text");
|
||||
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);
|
||||
document.getElementById("form").appendChild(image_links);
|
||||
|
||||
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.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(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");
|
||||
prevImg.attr('src', imgURL);
|
||||
prevImg.appendTo($("div.ImgPrevContainer"));
|
||||
//let prevImg = $("<img>").addClass("prevIMG");
|
||||
//prevImg.attr('src', imgURL);
|
||||
//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);
|
||||
|
||||
let kommentarLikeNumber = $("<p>").text(thisComment.k_likes + " Likes").addClass("commentLikeNumber");
|
||||
kommentarLikeNumber.appendTo(kommentarContainer);
|
||||
kommentarText.appendTo(kommentarLinks);
|
||||
|
||||
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))
|
||||
|
|
|
|||
70
loadMap.js
70
loadMap.js
|
|
@ -1,25 +1,26 @@
|
|||
|
||||
const zuerich_bounds = {
|
||||
north: 47.41590970260092,
|
||||
south: 47.315703309031846,
|
||||
west: 8.45742642179812,
|
||||
east: 8.600047733589026,
|
||||
north: 47.43590970260092,
|
||||
south: 47.278703309031846,
|
||||
west: 8.40742642179812,
|
||||
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,
|
||||
strictBounds: false,
|
||||
},
|
||||
zoom: 13,
|
||||
disableDefaultUI: true,
|
||||
gestureHandling: "greedy",
|
||||
gestureHandling: "greedy"
|
||||
|
||||
});
|
||||
infoWindow = new google.maps.InfoWindow();
|
||||
|
||||
addMarkers();
|
||||
|
||||
|
||||
|
|
@ -39,21 +40,59 @@ 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",
|
||||
scaledSize: new google.maps.Size(38+(markerData[i].likes), 38+(markerData[i].likes)),
|
||||
url: "/images/Marker_" + markerIMGcounter + ".svg",
|
||||
scaledSize: new google.maps.Size(markersize, markersize),
|
||||
|
||||
},
|
||||
animation: google.maps.Animation.DROP,
|
||||
zIndex: 100,
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
marker.addListener("click", () => {
|
||||
ideeAnzeigen(markerData[i]);
|
||||
|
||||
|
|
@ -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);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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 (?, ?, ?, ?, ?)";
|
||||
|
|
|
|||
Loading…
Reference in New Issue