eckertnoah/spinn_mit
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Präsentations Version

Browse Source
This commit is contained in:
nooahe 2022-11-18 15:11:18 +01:00
parent 2a3c708291
commit d7343e8cb7
35 changed files with 911 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

609
css/style.css
View File

@ -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;
}

19
images/Background2.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
images/FaviconL.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

4
images/Marker_0.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 311 B

4
images/Marker_1.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 317 B

4
images/Marker_2.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 309 B

4
images/Marker_3.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 308 B

4
images/Marker_4.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 315 B

4
images/Marker_5.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 317 B

4
images/about.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 460 B

8
images/absenden.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 750 B

BIN
images/android-chrome-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
images/android-chrome-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
images/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

19
images/backgroundBlue.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

7
images/cancel.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 505 B

7
images/cancelAboutInfo.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 505 B

7
images/cancelImage.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 682 B

4
images/currentLocation.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 291 B

BIN
images/current_location.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

BIN
images/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 728 B

BIN
images/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
images/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

4
images/help.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 771 B

5
images/herz-0.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 695 B

5
images/herz-1.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 720 B

BIN
images/logo.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 967 KiB

BIN
images/newMarker.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
images/newMarker_0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

1
images/site.webmanifest Normal file
View File

@ -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"}

7
images/uploadImage.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 575 B

40
index.php
View File

@ -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
View File

@ -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
View File

@ -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);
},

2
system/ideeSpeichern.php
View File

@ -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 (?, ?, ?, ?, ?)";