link_al_tutorial
This commit is contained in:
parent
06cdae4996
commit
18852be9ba
4 changed files with 75 additions and 11 deletions
|
|
@ -202,3 +202,8 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
#tutorial {
|
||||
font-size: 18px;
|
||||
width: 40wh;
|
||||
|
||||
}
|
||||
|
|
|
|||
BIN
public/img/gps_arrow.png
Normal file
BIN
public/img/gps_arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
|
|
@ -29,7 +29,7 @@
|
|||
<div id="markerFormContainer">
|
||||
<form id="markerForm" enctype="multipart/form-data">
|
||||
<div id="noticeCoordsPicker" style="display: none;">
|
||||
<text>Clicca o premi sulla mappa per selezionare la posizione dell'oggetto</text>
|
||||
<text>Clicca sul punto della mappa in cui vuoi inserire il rusco avvistato</text>
|
||||
<input id="formInputCoordY" name="lat" type="hidden" />
|
||||
<input id="formInputCoordX" name="long" type="hidden" />
|
||||
</div>
|
||||
|
|
@ -55,16 +55,16 @@
|
|||
</div>
|
||||
<div id="map">
|
||||
<script>
|
||||
document.getElementById("addMarkerBtn").innerHTML = '<img src="../img/marker-icon18.png" alt="Button Image" />';
|
||||
document.getElementById("addMarkerBtn").innerHTML = '<img src="../img/marker-icon18.png" alt="Button Image" />';
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- bottone gps -->
|
||||
<!-- <button id="gps-button" type="button">
|
||||
<img src="../img/target30.png" alt="GPS" style="display: flex"> </button> -->
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
// Add a click event listener to the button
|
||||
document.getElementById('gps-button').addEventListener('click', function() {
|
||||
if (lc.isFollowing()) {
|
||||
|
|
@ -75,16 +75,14 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<div class="popup" id="popup">
|
||||
<!-- <img src="qualcosa.jpg" alt="Popup Image"> -->
|
||||
<p id="istruzioni">
|
||||
<img src="../img/trashg.png" alt="Description of Image" width="20" height="20"><b>RuscoMap</b> è una mappa dove utenti in anonimo possono inserire dei marker con nome, descrizione e foto di oggetti abbandonati, segnalandoli a tutti i visitatori della mappa.
|
||||
<br> <br>
|
||||
Si può trovare o inserire la qualunque. L'obiettivo è il riutilizzo, la trasformazione o la riparazione.
|
||||
<br><br>
|
||||
Sulla falsa riga del <i>te lo regalo se vieni a prenderlo</i>, questo è più il <i>segnalo che c'è 'sta roba lì, è tua se te la vai a prendere</i>.
|
||||
<br> <br>
|
||||
Clicca <a href="./tutorial.html">qui</a> per leggere il tutorial.
|
||||
</p>
|
||||
<div><button id="popupstart" type="button" onclick="closePopup()">X</button></div>
|
||||
</div>
|
||||
|
|
@ -94,8 +92,8 @@
|
|||
var popup = document.getElementById("popup");
|
||||
popup.style.display = "none";
|
||||
}
|
||||
// Popup si chiude automaticamente dopo 15 secondi
|
||||
setTimeout(closePopup,15000);
|
||||
// Popup si chiude automaticamente dopo 13 secondi
|
||||
setTimeout(closePopup,13000);
|
||||
</script>
|
||||
|
||||
|
||||
|
|
|
|||
61
public/tutorial.html
Normal file
61
public/tutorial.html
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../img/trashw.png">
|
||||
<link rel="stylesheet" href="/css/map.css" />
|
||||
<title>RuscoMap Tutorial</title>
|
||||
</head>
|
||||
<body>
|
||||
<center>
|
||||
<h1><img src="../img/trashg.png" alt="trasher" width="40" height="40">
|
||||
RuscoMap
|
||||
<img src="../img/trashg.png" alt="trasher" width="40" height="40">
|
||||
</h1>
|
||||
|
||||
<div>
|
||||
<p id="tutorial">
|
||||
<b>RuscoMap</b> è una mappa dove utenti in anonimo possono inserire dei marker con nome,
|
||||
descrizione e foto di oggetti abbandonati, segnalandoli a tutti i visitatori della mappa.
|
||||
<br> <br>
|
||||
Si può trovare o inserire la qualunque. L'obiettivo è il riutilizzo, la trasformazione
|
||||
o la riparazione.
|
||||
<br><br>
|
||||
Sulla falsa riga del <i>"te lo regalo se vieni a prenderlo"</i>, questo è più il <i>"segnalo che c'è
|
||||
'sta roba lì, è tua se te la vai a prendere"</i>.
|
||||
<br><br>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<h1><img src="../img/trashg.png" alt="trasher" width="40" height="40">
|
||||
Tutorial
|
||||
<img src="../img/trashg.png" alt="trasher" width="40" height="40">
|
||||
</h1>
|
||||
|
||||
<div>
|
||||
<p id="tutorial">
|
||||
Cliccando sul <img src="../img/marker-icon18.png" alt="marker" width="18" height="30"> in alto a destra
|
||||
si entra in modalità inserimento. Quindi si posiziona il marker sulla mappa in corrispondenza del rusco
|
||||
avvistato, si compila il form che comparirà in alto e cliccando su "Aggiungi Marker" il nuovo rusco sarà presente sulla mappa.
|
||||
<br><br>
|
||||
Cliccando su <img src="../img/gps_arrow.png" alt="gpsarrow" width="27" height="18"> in alto a sinistra
|
||||
verrà invece usato il gps per rilevare le proprie coordinate, in modo da posizionare con più precisione il marker da inserire.
|
||||
<br><br>
|
||||
<br><br>
|
||||
<br><br>
|
||||
<br><br>
|
||||
</p>
|
||||
</div>
|
||||
<p id="back">
|
||||
|
||||
Clicca <a href="./index.html">qui</a> per tornare alla mappa.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
</center>
|
||||
|
||||
</body>
|
||||
Loading…
Reference in a new issue