From 18852be9ba1f6f3b0d178c74d8dd4994bd88eead Mon Sep 17 00:00:00 2001
From: scossa <scossa@esiliati.org>
Date: Tue, 27 Aug 2024 18:42:51 +0200
Subject: [PATCH] link_al_tutorial

---
 public/css/map.css       |   5 ++++
 public/img/gps_arrow.png | Bin 0 -> 4465 bytes
 public/index.html        |  20 ++++++-------
 public/tutorial.html     |  61 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 75 insertions(+), 11 deletions(-)
 create mode 100644 public/img/gps_arrow.png
 create mode 100644 public/tutorial.html

diff --git a/public/css/map.css b/public/css/map.css
index 653d4d8..41a64e2 100644
--- a/public/css/map.css
+++ b/public/css/map.css
@@ -202,3 +202,8 @@
     align-items: center;
 }
 
+#tutorial {
+    font-size: 18px;
+    width: 40wh;
+
+}
diff --git a/public/img/gps_arrow.png b/public/img/gps_arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..07f0e78fd29015ed38ee72700af0df6870743604
GIT binary patch
literal 4465
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

literal 0
HcmV?d00001

diff --git a/public/index.html b/public/index.html
index f5b46d7..06a0b9f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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>
 
 
diff --git a/public/tutorial.html b/public/tutorial.html
new file mode 100644
index 0000000..79168f5
--- /dev/null
+++ b/public/tutorial.html
@@ -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>
\ No newline at end of file