popup

README.md

@@ -37,10 +37,7 @@
 ### ToDo per versione 0.6
 
 - [x] Cancellare dati file picker del form[[commit 9b8c376c53](https://git.lattuga.net/scossa/ruscomap/commit/9b8c376c53f9f52a0ae2cbfb186769a4ca1cd1e0)]
-- [ ] Pop-Up all'apertura di ruscomap con descrizione breve 
-- [ ] Scrivere il tutorial utente di ruscomap
-    - [ ] Creare pagina tutorial
-    - [ ] Link alla pagina del tutorial nel PopUp iniziale
+- [x] Pop-Up all'apertura di ruscomap con descrizione breve 
 
 ### ToDo per versione 0.7
 

public/css/map.css

@@ -155,3 +155,29 @@
     .leaflet-popup-content-wrapper {
         text-align: center;
     }      
+
+    
+/*POPUP INZIALE*/    
+
+    .popup {
+        display: flex; /* Hidden by default */
+        position: fixed;
+        top: 75%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: white;
+        border: 1px solid #000000;
+        padding: 20px;
+        z-index: 1000;
+        text-align: cemter;
+    }
+
+    /* .popup img {
+        max-width: 100%;
+        height: auto;
+    } */
+
+#popupstart {
+    height: 40px;
+    text-align: center;
+}

public/index.html

@@ -58,6 +58,26 @@
        document.getElementById("addMarkerBtn").innerHTML = '<img src="../img/marker-icon18.png" alt="Button Image" />'; 
       </script>
       </div>
+  
+      <div class="popup" id="popup">
+        <!-- <img src="qualcosa.jpg" alt="Popup Image"> -->
+        <p>
+          RuscoMap è una mappa dove utenti in anonimo possono inserire dei marker con nome, descrizione e foto dell'oggetto abbandonato, segnalandolo a tutti i visitatori della mappa._ 
+          <br> 
+          Si può trovare o inserire la qualunque purchè ci sia una vaga speranza di riutilizzo, trasformazione o riparazione.
+          <br>
+          Sulla falsa riga del "te lo regalo se vieni a prenderlo", questo è più il "segnalo che c'è sta roba lì, è tua se te la vai a prendere"
+        </p>
+        <div><button id="popupstart" type="button" onclick="closePopup()">X</button></div>
+      </div>
+
+      <script>
+        function closePopup() {
+          var popup = document.getElementById("popup");
+          popup.style.display = "none"; // Hides the popup
+        }
+      </script>
+
   </body>
   <footer>
     <script type="module" type="text/javascript" src="/js/map.js"></script>