Public Version 1 on spinn-mit.ch
nooahe
parent
522e01979f
commit
13ebde7ef1
44
about.html
44
about.html
|
|
@ -20,7 +20,9 @@
|
|||
|
||||
<div class="subPageHeader">
|
||||
|
||||
<img src="images/logo.gif" class="" id="logo" alt="">
|
||||
<a href="/">
|
||||
<img src="images/logo.gif" class="" id="logo" alt="">
|
||||
</a>
|
||||
|
||||
|
||||
<div class="mapControls ">
|
||||
|
|
@ -41,22 +43,34 @@
|
|||
|
||||
|
||||
<div class="content">
|
||||
<h1>Willkommen! </h1>
|
||||
<div class="textContainer">
|
||||
<p>Um was geht’s? <br> Zürcher Stadtkreise nachhaltig optimieren: Durch unsere App erhalten deine Ideen zur Verbesserung des Stadtbildes ein Gehör. Ziel ist es, die gesamte Bevölkerung aktiv am Wandel des Stadtbilds miteinzubeziehen und zum mitspinnen zu bewegen.
|
||||
</p>
|
||||
<p>Egal ob aufwendige Bepflanzung oder simple Mülltonnen – umfangreichere Projekte, aber auch nur kleine Spinnereien sind auf unserer Plattform willkommen. Ist eine Idee einmal an einem Ort erfasst, kann sich die Community mittels Kommentarfunktion einbringen. So können Spinnereien konkretisiert oder diskutiert werden.</p>
|
||||
<div class="innerContent">
|
||||
<article>
|
||||
<h1>Willkommen! </h1>
|
||||
<div class="textContainer">
|
||||
<p>Um was geht’s? <br> Zürcher Stadtkreise nachhaltig optimieren: Durch unsere App erhalten deine Ideen zur Verbesserung des Stadtbildes ein Gehör. Ziel ist es, die gesamte Bevölkerung aktiv am Wandel des Stadtbilds miteinzubeziehen und zum mitspinnen zu bewegen.
|
||||
</p>
|
||||
<p>Egal ob aufwendige Bepflanzung oder simple Mülltonnen – umfangreichere Projekte, aber auch nur kleine Spinnereien sind auf unserer Plattform willkommen. Ist eine Idee einmal an einem Ort erfasst, kann sich die Community mittels Kommentarfunktion einbringen. So können Spinnereien konkretisiert oder diskutiert werden.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h1>Das sind wir</h1>
|
||||
<div class="textContainer">
|
||||
<p>Die App wurde im Rahmen einer studentischen Arbeit von Flavia Hodel, Marlon Portmann, Noah Eckert und Monia Rosenow ins Leben gerufen. Zur Zeit studieren wir alle gemeinsam Media Engineering an der Fachhochschule Graubünden. Mit unserer Idee wollen wir uns aktiv an der Umgestaltung und Optimierung der Limmatstadt beteiligen und auch allen anderen die Möglichkeit dazu geben.
|
||||
</p>
|
||||
<p>Bei dieser Website handelt es sich um einen ersten Prototyp. Leider werden die Ideen nicht realisiert, aber wer weiss: Vielleicht zieht Züri nach und bald wird es eine Plattform/Forum für die Stadtgestaltung geben!
|
||||
</p>
|
||||
<p>Gespannt freuen wir uns auf deine Spinnerei!
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<h1>Das sind wir</h1>
|
||||
<div class="textContainer">
|
||||
<p>Die App wurde im Rahmen einer studentischen Arbeit von Flavia Hodel, Marlon Portmann, Noah Eckert und Monia Rosenow ins Leben gerufen. Zur Zeit studieren wir alle gemeinsam Media Engineering an der Fachhochschule Graubünden. Mit unserer Idee wollen wir uns aktiv an der Umgestaltung und Optimierung der Limmatstadt beteiligen und auch allen anderen die Möglichkeit dazu geben.
|
||||
</p>
|
||||
<p>Bei dieser Website handelt es sich um einen ersten Prototyp. Leider werden die Ideen nicht realisiert, aber wer weiss: Vielleicht zieht Züri nach und bald wird es eine Plattform/Forum für die Stadtgestaltung geben!
|
||||
</p>
|
||||
<p>Gespannt freuen wir uns auf deine Spinnerei!
|
||||
</p>
|
||||
</div>
|
||||
<a href="/" id="back" class="desktopOnly">
|
||||
<p>zurück zu Karte</p>
|
||||
</a>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@
|
|||
*/
|
||||
|
||||
.pswp {
|
||||
font-family: bd-supper, sans-serif;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -407,7 +408,7 @@ div.pswp__img--placeholder,
|
|||
.pswp__counter {
|
||||
height: 30px;
|
||||
margin: 15px 0 0 20px;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
color: var(--pswp-icon-color);
|
||||
text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
|
||||
|
|
|
|||
250
css/style.css
250
css/style.css
|
|
@ -9,6 +9,7 @@
|
|||
--helllachs: #FFF5EE;
|
||||
|
||||
--borderRadSmall: 14px;
|
||||
--borderRadLarge: 30px;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -94,6 +95,10 @@ img.mapControl {
|
|||
|
||||
}
|
||||
|
||||
.desktopOnly{
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/*-------------------- STARTSCREEN -------------------*/
|
||||
/*----------------------------------------------------*/
|
||||
|
|
@ -154,10 +159,16 @@ img.mapControl {
|
|||
background-color: #27177A;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
|
||||
|
||||
}
|
||||
|
||||
#overlay::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#overlay_container{
|
||||
|
||||
margin: 3%;
|
||||
|
|
@ -183,6 +194,8 @@ img.mapControl {
|
|||
|
||||
|
||||
#cancel {
|
||||
z-index: 100;
|
||||
transform: translateZ(10px);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: sticky;
|
||||
|
|
@ -211,6 +224,7 @@ form{
|
|||
width: 100%;
|
||||
height: 93%;
|
||||
margin-top: 7%;
|
||||
margin-bottom: -25px;
|
||||
}
|
||||
|
||||
input, textarea{
|
||||
|
|
@ -263,20 +277,29 @@ textarea {
|
|||
|
||||
input.titel{
|
||||
width: 75%;
|
||||
margin-bottom: 5%;
|
||||
margin-bottom: 3%;
|
||||
height: 30px;
|
||||
max-height: 15%;
|
||||
}
|
||||
|
||||
input.adresse{
|
||||
margin-bottom: 3%;
|
||||
height: 30px;
|
||||
max-height: 15%;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
|
||||
button.submit{
|
||||
background-image: url("../images/absenden.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
border-radius: 40px;
|
||||
border: none;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: #fad8c4;
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
position: relative;
|
||||
bottom: 25px;
|
||||
left: 25px;
|
||||
}
|
||||
|
||||
|
|
@ -295,38 +318,69 @@ div.image-preview{
|
|||
flex-direction: row-reverse;
|
||||
align-items: flex-end;
|
||||
margin: 20px;
|
||||
height: 25%;
|
||||
|
||||
height: 60px;
|
||||
|
||||
}
|
||||
|
||||
div.ImgPrevContainer {
|
||||
height: 100%;
|
||||
margin-left: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
div.prevIMG {
|
||||
aspect-ratio: 1;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
margin-right: 20px;
|
||||
margin-right: 5px;
|
||||
height: 60px;
|
||||
border-radius: var(--borderRadSmall);
|
||||
}
|
||||
|
||||
img.prevIMG {
|
||||
height: 100%;
|
||||
border-radius: var(--borderRadSmall);
|
||||
|
||||
|
||||
/*------------- Upload Care Widget ----------------*/
|
||||
|
||||
.uploadcare--widget{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
.uploadcare--widget__button,
|
||||
.uploadcare--widget__button_type_open,
|
||||
.uploadcare--widget__button_type_open:focus,
|
||||
.uploadcare--widget__button_type_open:hover{
|
||||
.uploadcare--widget__button_type_open{
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background-image: url("../images/uploadImage.svg");
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.uploadcare--widget__text, .uploadcare--widget__progress {
|
||||
.uploadcare--widget__button_type_open{
|
||||
position: relative;
|
||||
left: 90%;
|
||||
left: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.uploadcare--progress_type_canvas{
|
||||
color: var(--marine);
|
||||
border-color: var(--orange);
|
||||
}
|
||||
|
||||
.uploadcare--widget__text{
|
||||
font-family: bd-supper, sans-serif;
|
||||
}
|
||||
|
||||
.uploadcare--link, .uploadcare--widget__file-size{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.uploadcare--widget__button_type_cancel{
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
|
|
@ -341,6 +395,16 @@ img.prevIMG {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
.uploadcare--widget__button_type_cancel:active, .uploadcare--widget__button_type_cancel:hover, .uploadcare--widget__button_type_remove:active, .uploadcare--widget__button_type_remove:hover {
|
||||
background: none;
|
||||
background-image: url("../images/cancel.svg");
|
||||
}
|
||||
|
||||
.uploadcare--widget__button_type_open:active, .uploadcare--widget__button_type_open:hover {
|
||||
background-image: url("../images/uploadImageHover.svg");
|
||||
background-color: transparent;
|
||||
|
||||
}
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/*------------------ IDEE ANZEIGEN -------------------*/
|
||||
|
|
@ -349,11 +413,33 @@ img.prevIMG {
|
|||
|
||||
|
||||
div.ImgContainer {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
margin-right: 0;
|
||||
height: 160px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
border-radius: var(--borderRadSmall);
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 12;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.pswp img {
|
||||
max-width: none;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
div.ImgContainer a:first-child{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img.thumbnail{
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#inhaltContainer {
|
||||
|
|
@ -413,6 +499,18 @@ p.likeDisplay {
|
|||
h1.ideeTitel {
|
||||
color: var(--helllachs);
|
||||
font-size: 28px;
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
|
||||
p.ideeAdresse{
|
||||
color: white;
|
||||
font-size: 9pt;
|
||||
margin: 0;
|
||||
font-family: bd-supper, sans-serif;
|
||||
}
|
||||
|
||||
div.titleLocationContainer{
|
||||
margin: 10px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
|
@ -582,7 +680,7 @@ img.commentLike{
|
|||
body.aboutInfo {
|
||||
background-image: url("/images/Background2.svg");
|
||||
background-size: cover;
|
||||
color: var(--marine);
|
||||
color: var(--royalblau);
|
||||
position: relative;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
|
@ -600,7 +698,7 @@ div.subPageHeader {
|
|||
|
||||
body.aboutInfo h1 {
|
||||
background-color: var(--helllachs);
|
||||
color: var(--marine);
|
||||
color: var(--royalblau);
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 22pt;
|
||||
|
|
@ -629,3 +727,123 @@ div.textContainer {
|
|||
position: fixed;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*------- Loading --------*/
|
||||
|
||||
.loadingscreen{
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 43%;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
|
||||
.loader {
|
||||
border: 10px solid rgba(0,0,0,0);
|
||||
border-radius: 50%;
|
||||
border-top: 13px solid var(--orange);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
animation: spinner 2s linear infinite;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes spinner {
|
||||
|
||||
0% { transform: rotate(0deg); }
|
||||
|
||||
100% { transform: rotate(360deg); }
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*------- DESKTOP -----------*/
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
div.content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
margin: auto;
|
||||
|
||||
padding: 0;
|
||||
min-height: 500px;
|
||||
|
||||
width: 70%;
|
||||
background-color: var(--helllachs);
|
||||
border-radius: var(--borderRadSmall);
|
||||
|
||||
}
|
||||
|
||||
div.innerContent{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
article{
|
||||
margin: 20px;
|
||||
width: calc(50% - 40px);
|
||||
background-color: none;
|
||||
}
|
||||
|
||||
body.aboutInfo h1{
|
||||
border-color: var(--royalblau);
|
||||
border-radius: 100px;
|
||||
padding: 2px 25px 0px;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
a.desktopOnly{
|
||||
display: flex;
|
||||
align-self: flex-end;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 1000px;
|
||||
padding: 10px 20px 8px;
|
||||
background-color: var(--royalblau);
|
||||
color: var(--helllachs);
|
||||
text-decoration: none;
|
||||
transition: background-color .5s;
|
||||
}
|
||||
|
||||
a.desktopOnly:hover{
|
||||
background-color: var(--marine);
|
||||
transition: background-color .5s;
|
||||
}
|
||||
|
||||
.desktopOnly p{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/*------- Overlay --------*/
|
||||
|
||||
#overlay{
|
||||
bottom: 5vh;
|
||||
right: 0;
|
||||
border-radius: var(--borderRadLarge) 0 0 var(--borderRadLarge) ;
|
||||
}
|
||||
|
||||
.hidden{
|
||||
|
||||
transform: translateX(100%);
|
||||
-webkit-transform: translateX(100%);
|
||||
}
|
||||
|
||||
.show{
|
||||
|
||||
transform: translateX(0);
|
||||
-webkit-transform: translateX(0);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
43
help.html
43
help.html
|
|
@ -20,7 +20,10 @@
|
|||
|
||||
<div class="subPageHeader">
|
||||
|
||||
<img src="images/logo.gif" class="" id="logo" alt="">
|
||||
<a href="/">
|
||||
<img src="images/logo.gif" class="" id="logo" alt="">
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<div class="mapControls ">
|
||||
|
|
@ -44,22 +47,34 @@
|
|||
|
||||
|
||||
<div class="content">
|
||||
<h1>Spinnerei erfassen</h1>
|
||||
<div class="textContainer">
|
||||
<p>Willkommen! Hier erfährst du, wie du deine Ideen festhalten und publizieren kannst:</p>
|
||||
<p>Klicke in der Karte auf die Location, um an diesem Ort eine neue Spinnerei zu erfassen.</p>
|
||||
<p>Trage den Titel und deine Idee ein. Wichtig: Überprüfe, ob der erfasste Standort korrekt eingetragen wurde – ansonsten kannst du diesen auch noch anpassen.
|
||||
Optional kannst du auch noch bis zu vier Bilder oder Skizzen hochladen. So können sich deine Mitspinner deine Vision besser vorstellen.
|
||||
</p>
|
||||
<div class="innerContent">
|
||||
<article>
|
||||
<h1>Spinnerei erfassen</h1>
|
||||
<div class="textContainer">
|
||||
<p>Willkommen! Hier erfährst du, wie du deine Ideen festhalten und publizieren kannst:</p>
|
||||
<p>Klicke in der Karte auf die Location, um an diesem Ort eine neue Spinnerei zu erfassen.</p>
|
||||
<p>Trage den Titel und deine Idee ein. Wichtig: Überprüfe, ob der erfasste Standort korrekt eingetragen wurde – ansonsten kannst du diesen auch noch anpassen.
|
||||
Optional kannst du auch noch bis zu vier Bilder oder Skizzen hochladen. So können sich deine Mitspinner deine Vision besser vorstellen.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<h1>Kommentare & Votes</h1>
|
||||
<div class="textContainer">
|
||||
<p>Gefällt dir eine andere Idee besonders gut, kannst du diese voten. So wird die Idee grösser auf der Karte abgebildet, da sie anscheinend mehrere Personen begeistert. Negative Votes gibt es nicht, jedoch findet Kritik in der Kommentarspalte Platz.
|
||||
</p>
|
||||
<p>Durch die Kommentarfunktion können sich deine Mitmenschen oder du selbst bei fremden Ideen einbringen. Die einzelnen Spinnereien können so kritisiert, gelobt oder gar weitergesponnen werden.</p>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<h1>Kommentare & Votes</h1>
|
||||
<div class="textContainer">
|
||||
<p>Gefällt dir eine andere Idee besonders gut, kannst du diese voten. So wird die Idee grösser auf der Karte abgebildet, da sie anscheinend mehrere Personen begeistert. Negative Votes gibt es nicht, jedoch findet Kritik in der Kommentarspalte Platz.
|
||||
</p>
|
||||
<p>Durch die Kommentarfunktion können sich deine Mitmenschen oder du selbst bei fremden Ideen einbringen. Die einzelnen Spinnereien können so kritisiert, gelobt oder gar weitergesponnen werden.</p>
|
||||
<a href="/" id="back" class="desktopOnly">
|
||||
<p>zurück zu Karte</p>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 134.7 134.7" style="enable-background:new 0 0 134.7 134.7;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFD5BD;}
|
||||
.st1{display:none;fill:#2C107F;}
|
||||
.st2{fill:#2C107F;}
|
||||
</style>
|
||||
<circle class="st0" cx="67.5" cy="67" r="64.4"/>
|
||||
<g>
|
||||
<path class="st1" d="M67.4,134.7C30.2,134.7,0,104.6,0,67.4S30.2,0,67.4,0s67.4,30.2,67.4,67.4c0,0,0,0,0,0
|
||||
C134.7,104.6,104.6,134.7,67.4,134.7z M67.4,6C33.5,6,6,33.5,6,67.4s27.5,61.4,61.4,61.4s61.4-27.5,61.4-61.4
|
||||
C128.7,33.5,101.2,6,67.4,6z"/>
|
||||
<circle class="st2" cx="48" cy="35.1" r="12"/>
|
||||
<polyline class="st2" points="68.9,69.6 94.3,30 108.5,104.7 26.2,104.7 40.5,57.8 68.9,69.6 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 923 B |
14
index.php
14
index.php
|
|
@ -21,22 +21,13 @@ dbVerbindungErzeugen()
|
|||
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
|
||||
<link rel="manifest" href="images/site.webmanifest">
|
||||
|
||||
|
||||
<meta name="description" content="" />
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- <div class="pswp-gallery pswp-gallery--single-column" id="gallery--getting-started">
|
||||
<a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/7/img-2500.jpg"
|
||||
data-pswp-width="1875"
|
||||
data-pswp-height="2500"
|
||||
data-cropped="true"
|
||||
target="_blank">
|
||||
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/7/img-200.jpg" alt="" />
|
||||
</a>
|
||||
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
|
|
@ -80,12 +71,13 @@ dbVerbindungErzeugen()
|
|||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>
|
||||
|
||||
<script type="module" src="/js/gallery.js"></script>
|
||||
|
||||
|
||||
<script src="js/functions.js"></script>
|
||||
|
||||
<script src="loadMap.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkfYzlFa9nljVhIyfPQoz3n7Zi5TOs4WQ&callback=initMap"
|
||||
defer ></script>
|
||||
<script type="module" src="/js/gallery.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
125
js/functions.js
125
js/functions.js
|
|
@ -1,7 +1,4 @@
|
|||
|
||||
|
||||
|
||||
|
||||
//LocalLike Objekt erstellen
|
||||
|
||||
let localLikes = {}
|
||||
|
|
@ -34,12 +31,14 @@ $(document).ready(function(){
|
|||
// submit kommentar nicht seite neu laden
|
||||
|
||||
$("#kommentarform").submit(function(e) {
|
||||
console.log("Submitted")
|
||||
console.log("Comment Submitted")
|
||||
|
||||
e.preventDefault(); // avoid to execute the actual submit of the form.
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
if(!localStorage.getItem('firstVisit')){
|
||||
console.log("loadStartscreen");
|
||||
localStorage.setItem('firstVisit', 'false');
|
||||
|
|
@ -53,7 +52,6 @@ $(document).ready(function(){
|
|||
}
|
||||
|
||||
|
||||
|
||||
//LocalStorage erstellen oder auslesen
|
||||
|
||||
if(localStorage.getItem('localLikes')){
|
||||
|
|
@ -81,9 +79,6 @@ $(document).ready(function(){
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -127,9 +122,6 @@ function openOverlay(){
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//LocalStorage Anpassen (Likes hinzufügen oder entfernen)
|
||||
|
||||
|
||||
|
|
@ -165,11 +157,8 @@ function chageLocalStorrage(typ, id, addRemove){
|
|||
}
|
||||
|
||||
|
||||
|
||||
// IDEE ANZEIGEN
|
||||
|
||||
|
||||
|
||||
function ideeAnzeigen(data) {
|
||||
|
||||
document.getElementById("overlay_container").innerHTML = "";
|
||||
|
|
@ -182,62 +171,67 @@ function ideeAnzeigen(data) {
|
|||
likesErstellen.appendChild(likes);
|
||||
likesErstellen.classList.add("likeDisplay");
|
||||
|
||||
let titleLocationContainer = document.createElement("div");
|
||||
titleLocationContainer.classList.add("titleLocationContainer");
|
||||
|
||||
let titelErstellen = document.createElement("h1");
|
||||
let titelInhalt = document.createTextNode(data.titel);
|
||||
titelErstellen.appendChild(titelInhalt);
|
||||
titelErstellen.classList.add("ideeTitel");
|
||||
|
||||
let adresseErstellen = document.createElement("p");
|
||||
let adresseInhalt = document.createTextNode(data.adresse);
|
||||
adresseErstellen.appendChild(adresseInhalt);
|
||||
adresseErstellen.classList.add("ideeAdresse");
|
||||
|
||||
|
||||
|
||||
let inhaltErstellen = document.createElement("p");
|
||||
let inhaltInhalt = document.createTextNode(data.inhalt);
|
||||
inhaltErstellen.appendChild(inhaltInhalt);
|
||||
inhaltErstellen.classList.add("ideeInhalt");
|
||||
|
||||
/*
|
||||
<div class="pswp-gallery pswp-gallery--single-column" id="gallery--getting-started">
|
||||
<a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/7/img-2500.jpg"
|
||||
data-pswp-width="1875"
|
||||
data-pswp-height="2500"
|
||||
data-cropped="true"
|
||||
target="_blank">
|
||||
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/7/img-200.jpg" alt="" />
|
||||
</a>
|
||||
|
||||
</div> */
|
||||
|
||||
|
||||
if(data.bild != null && data.bild != ""){
|
||||
let bildContainer = $("<div>").addClass("ImgContainer");
|
||||
let bildContainer = $("<div>").attr({id: "gallery--getting-started", class: "ImgContainer pswp-gallery pswp-gallery--single-column"});
|
||||
|
||||
let loadingscreen = $("<div>").addClass("loadingscreen");
|
||||
let loader = $("<div>").addClass("loader");
|
||||
|
||||
loader.appendTo(loadingscreen)
|
||||
loadingscreen.appendTo($("#overlay_container"))
|
||||
|
||||
|
||||
let imgUrlArr = JSON.parse(data.bild);
|
||||
|
||||
bildContainer.css("background-image", "url(" + imgUrlArr[0] + ")");
|
||||
|
||||
|
||||
for (let i = 0; i < imgUrlArr.length; i++) {
|
||||
//let img = $("<img>").addClass("previewImage");
|
||||
//img.attr("src", imgUrlArr[i]);
|
||||
//img.appendTo(bildContainer);
|
||||
bildContainer.css("background-image","url(" + imgUrlArr[i] + ")")
|
||||
|
||||
|
||||
let pswpA = $("<a>").attr({href: imgUrlArr[i], 'data-cropped': "true", target: "_blank"})
|
||||
|
||||
|
||||
pswpA.appendTo(bildContainer)
|
||||
|
||||
}
|
||||
|
||||
bildContainer.prependTo($("#overlay_container"))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
} else {
|
||||
inhaltContainer.classList.add("class","topMargin")
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
let bild = document.createElement("img");
|
||||
bild.src = data.bild;
|
||||
bild.classList.add("ideeBilder");
|
||||
bild.classList.add("loeschen");
|
||||
document.getElementById('idee').appendChild(bild);
|
||||
console.log(data);
|
||||
|
||||
*/
|
||||
|
||||
|
||||
let ideeLike = document.createElement("img");
|
||||
ideeLike.classList.add("herz");
|
||||
|
||||
|
|
@ -255,7 +249,9 @@ function ideeAnzeigen(data) {
|
|||
document.getElementById('overlay_container').appendChild(inhaltContainer);
|
||||
document.getElementById('inhaltContainer').appendChild(likesErstellen);
|
||||
document.getElementById('inhaltContainer').appendChild(ideeLike);
|
||||
document.getElementById('inhaltContainer').appendChild(titelErstellen);
|
||||
titleLocationContainer.appendChild(titelErstellen);
|
||||
titleLocationContainer.appendChild(adresseErstellen);
|
||||
document.getElementById('inhaltContainer').appendChild(titleLocationContainer);
|
||||
document.getElementById('inhaltContainer').appendChild(inhaltErstellen);
|
||||
|
||||
|
||||
|
|
@ -368,8 +364,6 @@ function removeLike(typ, id, element){
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
// kommentar formular likesErstellen
|
||||
|
||||
function kommentarErstellen(idee_id) {
|
||||
|
|
@ -428,7 +422,7 @@ function kommentarErstellen(idee_id) {
|
|||
|
||||
|
||||
// Idee formular erstellen
|
||||
function formularErstellen(koordianten) {
|
||||
function formularErstellen(koordianten, ergebnisAdresse) {
|
||||
|
||||
document.getElementById("overlay_container").innerHTML = "";
|
||||
|
||||
|
|
@ -458,6 +452,11 @@ function formularErstellen(koordianten) {
|
|||
titel_input.setAttribute("name", "titel");
|
||||
titel_input.setAttribute("placeholder", "TITEL");
|
||||
|
||||
let adresse_input = document.createElement("input");
|
||||
adresse_input.setAttribute("type", "text");
|
||||
adresse_input.classList.add("adresse");
|
||||
adresse_input.setAttribute("name", "adresse");
|
||||
adresse_input.setAttribute("value", ergebnisAdresse);
|
||||
|
||||
|
||||
let text_input = $("<textarea>");
|
||||
|
|
@ -478,6 +477,7 @@ function formularErstellen(koordianten) {
|
|||
|
||||
|
||||
document.getElementById("form").appendChild(titel_input);
|
||||
document.getElementById("form").appendChild(adresse_input);
|
||||
textAndImage.appendTo("#form");
|
||||
text_input.appendTo(textAndImage);
|
||||
|
||||
|
|
@ -488,38 +488,43 @@ function formularErstellen(koordianten) {
|
|||
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.html('<input type="hidden" role="uploadcare-uploader" data-public-key="3a3c37e85850c6cfe077" data-multiple="true" data-images-only data-clearable data-tabs="file camera" data-image-shrink="1024x1024" data-system-dialog="true"/>')
|
||||
|
||||
imageUpload.appendTo(textAndImage);
|
||||
|
||||
|
||||
|
||||
// get a widget reference
|
||||
const widget = uploadcare.Widget("[role=uploadcare-uploader]", { multiple: false});
|
||||
const widget = uploadcare.Widget("[role=uploadcare-uploader]", { multiple: true});
|
||||
|
||||
// listen to the "upload completed" event
|
||||
widget.onUploadComplete(fileInfo => {
|
||||
widget.onUploadComplete(fileGroupInfo => {
|
||||
// get a information about uploaded group
|
||||
// check https://uploadcare.com/docs/file-uploader-api/file-groups/#file-group-info
|
||||
|
||||
let linkArr = [];
|
||||
let ImgUrl;
|
||||
|
||||
|
||||
|
||||
|
||||
$("<div>").addClass("ImgPrevContainer").appendTo($("div.image-preview"));
|
||||
|
||||
|
||||
ImgUrl = "https://ucarecdn.com/" + fileInfo.uuid + "/-/preview/-/quality/smart/-/format/auto/";
|
||||
console.log(fileInfo);
|
||||
for (var i = 0; i < fileGroupInfo.count && i < 4; i++) {
|
||||
ImgUrl = "https://ucarecdn.com/" + fileGroupInfo.uuid + "/nth/" + i + "/-/preview/-/quality/smart/-/format/auto/";
|
||||
linkArr.push(ImgUrl);
|
||||
|
||||
|
||||
createImgPrev(ImgUrl + "-/resize/x100/"); //img Preview 100 pixels high
|
||||
};
|
||||
|
||||
|
||||
// ImgUrl = "https://ucarecdn.com/" + fileInfo.uuid + "/-/preview/-/quality/smart/-/format/auto/";
|
||||
// console.log(fileInfo);
|
||||
// linkArr.push(ImgUrl);
|
||||
|
||||
|
||||
let linkArrString = JSON.stringify(linkArr);
|
||||
console.log(linkArrString);
|
||||
image_links.value = linkArrString;
|
||||
console.log(image_links.value);
|
||||
|
||||
$(".uploadcare--widget__button_type_remove").click(() => {
|
||||
console.log("delete");
|
||||
|
|
@ -533,15 +538,18 @@ function formularErstellen(koordianten) {
|
|||
$(".uploadcare--widget__button_type_open needsclick").addClass("test")
|
||||
|
||||
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
function createImgPrev(imgURL){
|
||||
|
||||
//let prevImg = $("<img>").addClass("prevIMG");
|
||||
//prevImg.attr('src', imgURL);
|
||||
//prevImg.appendTo($("div.ImgPrevContainer"));
|
||||
$("div.ImgPrevContainer").css('background-image', 'url(' + imgURL + ')');
|
||||
let prevImg = $("<div>").addClass("prevIMG");
|
||||
prevImg.css("background-image", "url(" + imgURL + ")");
|
||||
prevImg.appendTo($("div.ImgPrevContainer"));
|
||||
|
||||
// $("div.ImgPrevContainer").css('background-image', 'url(' + imgURL + ')');
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -628,3 +636,6 @@ function kommentareAnzeigen(idee_id){
|
|||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -2,9 +2,24 @@ import PhotoSwipeLightbox from '/js/photoswipe-lightbox.esm.js';
|
|||
import PhotoSwipe from '/js/photoswipe.esm.js';
|
||||
|
||||
|
||||
const lightbox = new PhotoSwipeLightbox({
|
||||
gallery: '#gallery--getting-started',
|
||||
children: 'a',
|
||||
pswpModule: PhotoSwipe
|
||||
});
|
||||
lightbox.init();
|
||||
let allImgs = document.querySelectorAll("#map")
|
||||
|
||||
for (let i = 0; i < allImgs.length; i++) {
|
||||
allImgs[i].addEventListener("click", function() {
|
||||
console.log("testtest");
|
||||
const lightbox = new PhotoSwipeLightbox({
|
||||
gallery: '#gallery--getting-started',
|
||||
children: 'a',
|
||||
pswpModule: PhotoSwipe,
|
||||
|
||||
});
|
||||
lightbox.init();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
41
loadMap.js
41
loadMap.js
|
|
@ -21,9 +21,14 @@ function initMap() {
|
|||
});
|
||||
infoWindow = new google.maps.InfoWindow();
|
||||
|
||||
addMarkers();
|
||||
|
||||
|
||||
const geocoder = new google.maps.Geocoder();
|
||||
const infowindow = new google.maps.InfoWindow();
|
||||
|
||||
|
||||
addMarkers();
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -112,17 +117,37 @@ function addMarkers(){
|
|||
}
|
||||
|
||||
// NEUE IDEE ERFASSEN
|
||||
map.addListener("click", (mapsMouseEvent) => {
|
||||
|
||||
map.addListener("click", (mapsMouseEvent) => {
|
||||
newMarker(mapsMouseEvent.latLng);
|
||||
let mousePosition = mapsMouseEvent.latLng;
|
||||
newMarker(mousePosition);
|
||||
|
||||
setTimeout(() => {
|
||||
openOverlay();
|
||||
}, 800);
|
||||
setTimeout(() => {
|
||||
openOverlay();
|
||||
}, 800);
|
||||
|
||||
geocodeLatLng(geocoder, map, infowindow, mousePosition);
|
||||
|
||||
function geocodeLatLng(geocoder, map, infowindow, mousePosition) {
|
||||
|
||||
geocoder
|
||||
.geocode({ location: mousePosition, })
|
||||
.then((response) => {
|
||||
if (response.results[0]) {
|
||||
let ergebnis = response.results[0].formatted_address;
|
||||
let indexOf = ergebnis.lastIndexOf(",");
|
||||
ergebnis = ergebnis.slice(0,indexOf);
|
||||
formularErstellen(mousePosition, ergebnis);
|
||||
} else {
|
||||
//console.log("Bitte Adresse eintragen");
|
||||
let error = "Bitte Adresse eintragen";
|
||||
formularErstellen(mousePosition, error);
|
||||
}
|
||||
})
|
||||
.catch((e) => window.alert("Geocoder failed due to: " + e));
|
||||
}
|
||||
})
|
||||
|
||||
formularErstellen(mapsMouseEvent.latLng);
|
||||
})
|
||||
|
||||
|
||||
function newMarker(mousePosition) {
|
||||
|
|
|
|||
|
|
@ -6,9 +6,16 @@ function dbVerbindungErzeugen(){
|
|||
// Wird in data.php gebraucht
|
||||
$db_host = 'localhost'; // Hostserver, auf dem die DB läuft.
|
||||
// «localhost» bedeutet: die selbe Serveradresse, auf dem auch die Seiten gespeichert sind
|
||||
$db_name = '751068_4_1'; // Name der Datenbank (stimmt im Beispiel nur zufällig mit username überein)
|
||||
$db_user = '751068_4_1'; // Name des DB-Users (stimmt im Beispiel nur zufällig mit Datenbankname überein)
|
||||
$db_pass = 'Jp3EFlqURuso'; // Passwort des DB-Users
|
||||
|
||||
//dev DB
|
||||
// $db_name = '751068_4_1';
|
||||
// $db_user = '751068_4_1';
|
||||
// $db_pass = 'Jp3EFlqURuso';
|
||||
|
||||
//spinn-mit.ch DB
|
||||
$db_name = 'spinnmit_';
|
||||
$db_user = 'noaheckert';
|
||||
$db_pass = '708Q7?olq';
|
||||
|
||||
$db_charset = 'utf8mb4'; // siehe https://www.hydroxi.de/utf8-vs-utf8mb4/
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,7 @@
|
|||
<?php
|
||||
require_once('data.php');
|
||||
?>
|
||||
|
||||
|
||||
<?php
|
||||
|
||||
$db = dbVerbindungErzeugen();
|
||||
|
||||
$lat = $_POST['lat'];
|
||||
|
|
@ -17,21 +14,23 @@ require_once('data.php');
|
|||
$inhalt = $_POST['text'];
|
||||
}
|
||||
|
||||
if(isset($_POST['adresse'])){
|
||||
$adresse = $_POST['adresse'];
|
||||
}
|
||||
|
||||
if(isset($_POST['bilder'])){
|
||||
$bilder = $_POST['bilder'];
|
||||
} else {
|
||||
$bilder = NULL;
|
||||
}
|
||||
|
||||
$sql = "INSERT INTO idee (titel, inhalt, koordinatenLat, koordinatenLng, bild) VALUES (?, ?, ?, ?, ?)";
|
||||
$sql = "INSERT INTO idee (titel, inhalt, koordinatenLat, koordinatenLng, bild, adresse) VALUES (?, ?, ?, ?, ?, ?)";
|
||||
$stmt = $db->prepare($sql);
|
||||
$stmt->execute(array($titel, $inhalt, $lat, $lng, $bilder));
|
||||
$stmt->execute(array($titel, $inhalt, $lat, $lng, $bilder, $adresse));
|
||||
|
||||
|
||||
|
||||
echo $db->lastInsertId();
|
||||
|
||||
header("Location: /");
|
||||
die();
|
||||
|
||||
?>
|
||||
?>
|
||||
Loading…
Reference in New Issue