buildings.html 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611
  1. <!DOCTYPE html>
  2. <html lang="it">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Mappa con Bootstrap Italia e Overlay Edifici</title>
  7. <link href="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.13.4/dist/css/bootstrap-italia.min.css" rel="stylesheet">
  8. <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  9. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
  10. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  11. <style>
  12. /* Stile per i label "Tipo Edificio" e "Data di Predisposizione" */
  13. label[for="buildingType"], label[for="preparationDate"] {
  14. font-weight: bold; /* Grassetto */
  15. font-family: inherit; /* Stesso font di "Codice Catastale Particella" */
  16. }
  17. /* Stile per i link con sottolineatura solo al passaggio del mouse */
  18. .link-underline-hover {
  19. text-decoration: none; /* Rimuove la sottolineatura di base */
  20. }
  21. .link-underline-hover:hover {
  22. text-decoration: underline; /* Aggiunge la sottolineatura solo al passaggio del mouse */
  23. }
  24. #buildingType {
  25. color: hsl(210, 17%, 44%); /* Colore del testo del select */
  26. }
  27. #buildingType option {
  28. color: hsl(210, 17%, 44%); /* Colore del testo delle opzioni */
  29. }
  30. #div-select {
  31. border-bottom: 1px solid hsl(210, 17%, 44%);
  32. margin-bottom: 5px;
  33. }
  34. /* Stile per la riga blu scuro */
  35. .top-bar {
  36. background-color: #004080; /* Blu scuro */
  37. color: white;
  38. padding: 0.5rem 0;
  39. text-align: left; /* Allineamento a sinistra */
  40. font-size: 0.9rem;
  41. }
  42. /* Stile per l'header */
  43. .header {
  44. background-color: #0066CC; /* Blu chiaro */
  45. color: white;
  46. padding: 1rem 0;
  47. }
  48. /* Stile per il logo "PW" dentro un cerchio */
  49. .logo {
  50. font-family: 'Georgia', serif; /* Font diverso */
  51. font-size: 1.5rem;
  52. font-weight: bold;
  53. display: inline-flex;
  54. align-items: center;
  55. justify-content: center;
  56. width: 50px; /* Diametro del cerchio */
  57. height: 50px; /* Diametro del cerchio */
  58. background-color: white; /* Colore di sfondo del cerchio */
  59. color: #0066CC; /* Colore del testo */
  60. border-radius: 50%; /* Rende l'elemento un cerchio */
  61. margin-right: 10px;
  62. }
  63. /* Stile per il titolo "Mappa" */
  64. .header-title {
  65. color: white;
  66. font-size: 1.5rem; /* Stessa grandezza di "Segnalazioni e Supporto Tecnico" */
  67. font-weight: bold;
  68. display: inline-block;
  69. vertical-align: middle;
  70. }
  71. .main-content {
  72. background-color: #f8f9fa; /* Grigio chiaro */
  73. padding: 2rem 0;
  74. }
  75. .table-responsive {
  76. overflow-x: auto;
  77. /* Aggiungi scroll orizzontale se la tabella è troppo larga */
  78. }
  79. .header, .footer {
  80. background-color: #0066CC; /* Blu istituzionale */
  81. color: white;
  82. padding: 1rem 0;
  83. }
  84. .main-content {
  85. background-color: #f8f9fa; /* Grigio chiaro */
  86. padding: 2rem 0;
  87. }
  88. #map {
  89. height: 500px;
  90. width: 100%;
  91. }
  92. #coordinate-inputs {
  93. margin-top: 10px;
  94. width: 50%;
  95. }
  96. </style>
  97. </head>
  98. <body>
  99. <!-- Riga blu scuro con scritto "Project Work" allineata a sinistra -->
  100. <div class="top-bar">
  101. <div class="container">
  102. Project Work
  103. </div>
  104. </div>
  105. <!-- Header -->
  106. <header class="header">
  107. <div class="container">
  108. <div class="row align-items-center">
  109. <div class="col d-flex">
  110. <!-- Logo "PW" dentro un cerchio, ora cliccabile -->
  111. <a href="./mappa_logout.html" class="logo-link">
  112. <div class="logo">PW</div>
  113. </a>
  114. <h1 class="header-title">Registrazione degli Edifici</h1>
  115. </div>
  116. <div class="col-auto d-flex align-items-center">
  117. <a href="./ADMIN.html" class="text-white me-3 link-underline-hover">Gestione Dati Immobiliari</a>
  118. <a href="./TFO.html" class="text-white me-3 link-underline-hover">TFO</a>
  119. <a href="./buildings.html" class="text-white me-3 link-underline-hover">Registrazione degli Edifici</a>
  120. <a href="./mappa_login.html" class="btn btn-light">Logout</a>
  121. </div>
  122. </div>
  123. </div>
  124. </header>
  125. <!-- Contenuto principale -->
  126. <div class="container mt-4">
  127. <h1 style="font-size: 1.5rem;">Registrazione degli edifici predisposti alla banda ultralarga</h1>
  128. <p>Compila il modulo sottostante per registrare un edificio predisposto alla banda ultralarga:</p>
  129. <form id="buildingForm">
  130. <div class="form-row">
  131. <div class="form-group col-md-6">
  132. <label for="address" style="font-weight: bold; color: black;">Indirizzo</label>
  133. <br>
  134. <br>
  135. <input type="text" class="form-control" id="address" placeholder="Via, n. civico, comune">
  136. </div>
  137. <div class="form-group col-md-6">
  138. <button type="button" class="btn btn-primary" id="search">Cerca</button>
  139. </div>
  140. </div>
  141. <div class="form-row">
  142. <div id="map"></div>
  143. </div>
  144. <div class="form-row">
  145. <div class="form-group col-md-3">
  146. <label for="latitude" style="font-weight: bold; color: black;">Latitudine</label>
  147. <br>
  148. <br>
  149. <input type="text" class="form-control" id="latitude" placeholder="Latitudine">
  150. </div>
  151. <div class="form-group col-md-3">
  152. <label for="latitude" style="font-weight: bold; color: black;">Longitudine</label>
  153. <br>
  154. <br>
  155. <input type="text" class="form-control" id="longitude" placeholder="Longitudine">
  156. </div>
  157. </div>
  158. <div class="form-row">
  159. <div class="form-group col-md-3">
  160. <label for="latitude" style="font-weight: bold; color: black;">Codice Comune</label>
  161. <br>
  162. <br>
  163. <input type="text" class="form-control" id="commonCode" placeholder="Codice comune" required>
  164. </div>
  165. </div>
  166. <div class="form-row">
  167. <div class="form-group col-md-3">
  168. <label for="latitude" style="font-weight: bold; color: black;">Codice Catastale Particella</label>
  169. <br>
  170. <br>
  171. <input type="text" class="form-control" id="cadastralCode" placeholder="Codice catastale" required>
  172. </div>
  173. </div>
  174. <label for="buildingType">Tipo Edificio</label>
  175. <br>
  176. <br>
  177. <div class="form-group col-md-3" id="div-select">
  178. <select class="form-control" id="buildingType">
  179. <option>Seleziona tipo di edificio</option>
  180. <option>Residenziale</option>
  181. <option>Commerciale</option>
  182. <option>Industriale</option>
  183. </select>
  184. </div>
  185. <br>
  186. <label for="preparationDate">Data di Predisposizione</label>
  187. <br>
  188. <br>
  189. <div class="form-group col-md-3">
  190. <input type="date" class="form-control" id="preparationDate" required>
  191. </div>
  192. <button type="button" class="btn btn-primary" id="add">Aggiungi</button>
  193. <button type="button" class="btn btn-secondary" id="cancellaRiga">Annulla</button>
  194. </form>
  195. <div class="data-table d-flex flex-column">
  196. <table class="table mt-4">
  197. <thead>
  198. <tr>
  199. <th>Indirizzo</th>
  200. <th>Latitudine</th>
  201. <th>Longitudine</th>
  202. <th>Comune</th>
  203. <th>Codice Catastale</th>
  204. <th>Tipo Edificio</th>
  205. <th>Data Predisposizione</th>
  206. <th>Azione</th>
  207. </tr>
  208. </thead>
  209. <tbody id="buildingTableBody">
  210. </tbody>
  211. </table>
  212. </div>
  213. <div class="d-flex justify-content-end mt-3">
  214. <button type="button" class="btn btn-success" id="submitButton">Invia</button>
  215. </div>
  216. </div>
  217. <!-- Script per la mappa e funzionalità -->
  218. <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  219. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
  220. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  221. <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  222. <script>
  223. // Inizializzazione Mappa
  224. const map = L.map('map').setView([41.9028, 12.4964], 13);
  225. L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
  226. // Layer edifici colorati
  227. const edificiLayer = L.layerGroup().addTo(map);
  228. let currentMarker = null;
  229. // Funzione principale per caricare gli edifici
  230. async function caricaEdifici() {
  231. if (map.getZoom() >= 16) {
  232. const bounds = map.getBounds();
  233. const bbox = `${bounds.getSouthWest().lat},${bounds.getSouthWest().lng},${bounds.getNorthEast().lat},${bounds.getNorthEast().lng}`;
  234. const query = `[out:json];
  235. (
  236. way["building"](${bbox});
  237. relation["building"](${bbox});
  238. );
  239. out geom;
  240. out tags;`;
  241. try {
  242. const response = await fetch(`https://overpass-api.de/api/interpreter?data=${encodeURIComponent(query)}`);
  243. const data = await response.json();
  244. edificiLayer.clearLayers();
  245. data.elements.forEach(element => {
  246. if (element.type === 'way' && element.geometry) {
  247. const latlngs = element.geometry.map(coord => [coord.lat, coord.lon]);
  248. var statoEdificio = false;
  249. let colorePoligono ;
  250. if (statoEdificio) colorePoligono = 'yellow';
  251. else colorePoligono = 'green';
  252. // const colori = ['#FF0000', '#00FF00'];
  253. const polygon = L.polygon(latlngs, {
  254. fillColor: colorePoligono,
  255. color: colorePoligono,
  256. fillOpacity: 0.5
  257. }).addTo(edificiLayer);
  258. polygon.on('click', async function() {
  259. var buildingType = element.tags && element.tags.building ? element.tags.building : 'Sconosciuto';
  260. try {
  261. await getAddress(latlngs[0][0], latlngs[0][1]);
  262. var popupContent = `
  263. <b>Coordinate:</b> ${latlngs[0][0]}, ${latlngs[0][1]}<br>
  264. <b>Tipo edificio:</b> ${buildingType}<br>
  265. <b>Indirizzo:</b> ${document.getElementById('addressInput').value}<br>
  266. <b>Stato:</b> ${statoEdificio}<br>
  267. <b>Codice Catastale:</b> nessuno
  268. `;
  269. polygon.bindPopup(popupContent).openPopup();
  270. } catch (error) {
  271. console.error("Errore nel recupero dell'indirizzo:", error);
  272. var popupContent = `
  273. <b>Coordinate:</b> ${latlngs[0][0]}, ${latlngs[0][1]}<br>
  274. <b>Tipo edificio:</b> ${buildingType}<br>
  275. <b>Indirizzo:</b> Indirizzo non disponibile<br>
  276. <b>Stato:</b> ${statoEdificio}<br>
  277. <b>Codice Catastale:</b> nessuno
  278. `;
  279. polygon.bindPopup(popupContent).openPopup();
  280. }
  281. });
  282. }
  283. });
  284. } catch (error) {
  285. console.error("Errore nel caricamento edifici:", error);
  286. }
  287. } else {
  288. edificiLayer.clearLayers();
  289. }
  290. }
  291. // Carica gli edifici quando la mappa viene spostata o zoomata
  292. map.on('moveend', caricaEdifici);
  293. map.on('zoomend', caricaEdifici);
  294. // Carica gli edifici all'avvio
  295. caricaEdifici();
  296. // Listener per il click sulla mappa
  297. map.on('click', function(e) {
  298. const lat = e.latlng.lat; // Latitudine del punto cliccato
  299. const lng = e.latlng.lng; // Longitudine del punto cliccato
  300. // Aggiorna i campi del form
  301. document.getElementById('latitude').value = lat;
  302. document.getElementById('longitude').value = lng;
  303. // Ottieni l'indirizzo dalle coordinate
  304. getAddress(lat, lng);
  305. // Rimuovi il marker precedente (se esiste)
  306. if (currentMarker) {
  307. map.removeLayer(currentMarker);
  308. }
  309. // Aggiungi un nuovo marker sulla mappa
  310. currentMarker = L.marker([lat, lng]).addTo(map)
  311. .bindPopup(`Coordinate: ${lat}, ${lng}`)
  312. .openPopup();
  313. });
  314. // Funzione per ottenere l'indirizzo dalle coordinate
  315. async function getAddress(lat, lng) {
  316. try {
  317. const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`);
  318. const data = await response.json();
  319. if (data.address) {
  320. document.getElementById('address').value = data.display_name;
  321. } else {
  322. document.getElementById('address').value = "Indirizzo non trovato";
  323. }
  324. } catch (error) {
  325. console.error("Errore nel geocoding inverso:", error);
  326. document.getElementById('address').value = "Errore nel geocoding inverso";
  327. }
  328. }
  329. // Funzione per ottenere l'indirizzo dalle coordinate
  330. async function getAddress(lat, lng) {
  331. try {
  332. const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`);
  333. const data = await response.json();
  334. if (data.address) {
  335. document.getElementById('address').value = data.display_name;
  336. } else {
  337. document.getElementById('address').value = "Indirizzo non trovato";
  338. }
  339. } catch (error) {
  340. console.error("Errore nel geocoding inverso:", error);
  341. document.getElementById('address').value = "Errore nel geocoding inverso";
  342. }
  343. }
  344. // Variabile per memorizzare il marker corrente
  345. var marker;
  346. // Gestione della ricerca dell'indirizzo
  347. document.getElementById('search').addEventListener('click', function() {
  348. var address = document.getElementById('address').value;
  349. if (address) {
  350. // Effettua una richiesta all'API di Nominatim per geocodificare l'indirizzo
  351. fetch(`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(address)}&format=json`)
  352. .then(response => response.json())
  353. .then(data => {
  354. if (data && data.length > 0) {
  355. var lat = parseFloat(data[0].lat); // Latitudine
  356. var lon = parseFloat(data[0].lon); // Longitudine
  357. // Rimuovi il marker precedente (se esiste)
  358. if (marker) {
  359. map.removeLayer(marker);
  360. }
  361. // Aggiungi un nuovo marker sulla mappa
  362. marker = L.marker([lat, lon]).addTo(map)
  363. .bindPopup(`Indirizzo: ${data[0].display_name}`)
  364. .openPopup();
  365. // Centra la mappa sulla nuova posizione
  366. map.setView([lat, lon], 16);
  367. // Riempie i campi di input per latitudine e longitudine
  368. document.getElementById('latitude').value = lat;
  369. document.getElementById('longitude').value = lon;
  370. } else {
  371. alert('Indirizzo non trovato.');
  372. }
  373. })
  374. .catch(error => {
  375. console.error('Errore durante la geocodifica:', error);
  376. alert('Si è verificato un errore durante la ricerca dell\'indirizzo.');
  377. });
  378. } else {
  379. alert('Inserisci un indirizzo.');
  380. }
  381. });
  382. // Funzione per aggiungere una riga alla tabella con controllo dei campi
  383. function aggiungiRiga() {
  384. // Recupera i valori dai campi di input
  385. const indirizzo = document.getElementById("address").value.trim();
  386. const latitudine = document.getElementById("latitude").value.trim();
  387. const longitudine = document.getElementById("longitude").value.trim();
  388. const codiceComune = document.getElementById("commonCode").value.trim();
  389. const codiceCatastale = document.getElementById("cadastralCode").value.trim();
  390. const tipodiedificio = document.getElementById("buildingType").value.trim();
  391. const datadipredisposizione = document.getElementById("preparationDate").value.trim();
  392. // Controllo se tutti i campi sono compilati
  393. if (!indirizzo || !latitudine || !longitudine || !codiceComune ||
  394. !codiceCatastale || !tipodiedificio || !datadipredisposizione) {
  395. alert("Compila tutti i campi prima di aggiungere l'edificio!");
  396. return; // Blocca l'inserimento
  397. }
  398. // Crea una nuova riga nella tabella
  399. const tabella = document.querySelector("#buildingTableBody");
  400. const nuovaRiga = tabella.insertRow();
  401. // Crea le celle della riga e inserisci i valori
  402. const celle = [];
  403. for (let i = 0; i < 7; i++) {
  404. celle.push(nuovaRiga.insertCell());
  405. }
  406. celle[0].textContent = indirizzo;
  407. celle[1].textContent = latitudine;
  408. celle[2].textContent = longitudine;
  409. celle[3].textContent = codiceComune;
  410. celle[4].textContent = codiceCatastale;
  411. celle[5].textContent = tipodiedificio;
  412. celle[6].textContent = datadipredisposizione;
  413. // Aggiungi i pulsanti di modifica e cancellazione
  414. const azioniCell = nuovaRiga.insertCell();
  415. azioniCell.innerHTML = `
  416. <button class="btn btn-sm btn-primary" onclick="modificaRiga(this)"><i class="fas fa-edit"></i></button>
  417. <button class="btn btn-sm btn-danger" onclick="cancellaRiga(this)"><i class="fas fa-trash"></i></button>
  418. `;
  419. // Resetta i campi del form dopo l'inserimento
  420. document.getElementById("buildingForm").reset();
  421. }
  422. // Collega la funzione aggiungiRiga() al pulsante "Aggiungi"
  423. document.getElementById('add').addEventListener('click', function() {
  424. aggiungiRiga();
  425. });
  426. // Funzione per modificare una riga
  427. function modificaRiga(button) {
  428. const riga = button.parentNode.parentNode;
  429. const celle = riga.cells;
  430. // Popola i campi del form con i dati della riga
  431. document.getElementById("address").value = celle[0].textContent;
  432. document.getElementById("latitude").value = celle[1].textContent;
  433. document.getElementById("longitude").value = celle[2].textContent;
  434. document.getElementById("commonCode").value = celle[3].textContent;
  435. document.getElementById("cadastralCode").value = celle[4].textContent;
  436. document.getElementById("buildingType").value = celle[5].textContent;
  437. document.getElementById("preparationDate").value = celle[6].textContent;
  438. // Rimuovi la riga dalla tabella
  439. riga.remove();
  440. }
  441. // Funzione per cancellare una riga con conferma
  442. function cancellaRiga(button) {
  443. // Mostra un alert di conferma
  444. const isConfirmed = confirm("Sei sicuro di voler eliminare questa riga?");
  445. // Se l'utente conferma, elimina la riga
  446. if (isConfirmed) {
  447. const riga = button.parentNode.parentNode;
  448. riga.remove();
  449. }
  450. }
  451. // Gestione dell'invio dei dati
  452. document.getElementById('submitButton').addEventListener('click', function() {
  453. alert('Dati inviati!');
  454. });
  455. // Funzione per cancellare tutti i campi del modulo
  456. function resetForm() {
  457. document.getElementById("buildingForm").reset();
  458. }
  459. // Aggiungi evento al pulsante "Annulla"
  460. document.getElementById('cancellaRiga').addEventListener('click', function() {
  461. resetForm();
  462. });
  463. </script>
  464. <script src="https://elevenlabs.io/convai-widget/index.js" async type="text/javascript"></script>
  465. <div id="ai-widget-container" style="position: fixed; bottom: 20px; right: 20px;">
  466. <elevenlabs-convai agent-id="2MJWbkNuIGTHNI71hKfL"></elevenlabs-convai>
  467. </div>
  468. <!-- Footer -->
  469. <footer id="footer" class="it-footer bg-black mt-5" role="contentinfo"></footer>
  470. <footer id="footer" class="it-footer bg-black" role="contentinfo">
  471. <div class="it-footer-main py-3">
  472. <div class="container">
  473. <section class="py-4">
  474. <div class="row">
  475. <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
  476. <div class="link-list-wrapper">
  477. <h2 class="h5">Esplora SINFI</h2>
  478. <ul id="footer-menu-col-1" class="link-list">
  479. <li id="menu-item-sinfi-1" class="menu-item">
  480. <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/che-cose/">Cos'è SINFI</a>
  481. </li>
  482. <li id="menu-item-sinfi-2" class="menu-item">
  483. <a class="list-item" href="https://sinfi.it/realms/master/protocol/openid-connect/auth?client_id=sinfi_user_service&response_type=code&redirect_uri=https://sinfi.it/sinfi_gateway/labs_keycloak/post_login/&scope=email&state=">Infrastrutture Registrate</a>
  484. </li>
  485. <li id="menu-item-sinfi-3" class="menu-item">
  486. <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/riferimenti-normativi/">Normative di Riferimento</a>
  487. </li>
  488. <li id="menu-item-sinfi-4" class="menu-item">
  489. <a class="list-item" href="https://sinfi.it/realms/master/protocol/openid-connect/auth?client_id=sinfi_user_service&response_type=code&redirect_uri=https://sinfi.it/sinfi_gateway/labs_keycloak/post_login/&scope=email&state=">Open Data SINFI</a>
  490. </li>
  491. </ul>
  492. </div>
  493. </div>
  494. <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
  495. <div class="link-list-wrapper">
  496. <h2 class="h5">Aiuto e Supporto</h2>
  497. <ul id="footer-menu-col-2" class="link-list">
  498. <li id="menu-item-aiuto-1" class="menu-item">
  499. <a class="list-item" href="./instructions.html">Istruzioni</a>
  500. </li>
  501. <li id="menu-item-aiuto-2" class="menu-item">
  502. <a class="list-item" href="./faq.html">FAQ - Domande Frequenti</a>
  503. </li>
  504. <li id="menu-item-aiuto-3" class="menu-item">
  505. <a class="list-item" href="./techsup.html">Segnalazioni e Supporto Tecnico</a>
  506. </li>
  507. </ul>
  508. </div>
  509. </div>
  510. <!-- Colonna "Community" con i loghi dei social -->
  511. <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
  512. <div class="link-list-wrapper">
  513. <h2 class="h5">Community</h2>
  514. <div class="social-icons">
  515. <a href="https://www.linkedin.com" target="_blank" class="me-3"><i class="fab fa-linkedin"></i></a>
  516. <a href="https://www.youtube.com" target="_blank" class="me-3"><i class="fab fa-youtube"></i></a>
  517. <a href="https://www.facebook.com" target="_blank" class="me-3"><i class="fab fa-facebook"></i></a>
  518. <a href="https://www.instagram.com" target="_blank" class="me-3"><i class="fab fa-instagram"></i></a>
  519. </div>
  520. </div>
  521. </div>
  522. <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
  523. <div class="link-list-wrapper">
  524. <h2 class="h5">SINFI</h2>
  525. <ul id="footer-menu-col-4" class="link-list">
  526. <li id="menu-item-377" class="menu-item">
  527. <a target="_blank" href="https://sinfi.it/portal/">Vai al sito ufficiale SINFI</a>
  528. </li>
  529. </ul>
  530. </div>
  531. </div>
  532. </div>
  533. </section>
  534. </div>
  535. </div>
  536. <div class="it-footer-small-prints clearfix">
  537. <div class="container">
  538. <nav class="menu-footer-menu-ita-container" aria-label="link utili">
  539. <ul id="menu-footer-menu-ita" class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">
  540. <li id="menu-item-413" class="menu-item list-inline-item"><a href="/media-policy/">Media Policy</a></li>
  541. <li id="menu-item-453" class="menu-item list-inline-item"><a href="/note-legali/">Privacy Policy &amp; Note Legali</a></li>
  542. <li id="menu-item-1310" class="menu-item list-inline-item"><a target="_blank" href="https://form.agid.gov.it/view/9df3de50-7a42-11ef-8989-9dcab5eaa914">Dichiarazione di accessibilità</a></li>
  543. <li id="menu-item-411" class="menu-item list-inline-item"><a href="/mappa-del-sito/">Mappa del sito</a></li>
  544. <li id="menu-item-1277" class="menu-item list-inline-item"><a href="/open-data-spid/">Open Data SPID</a></li>
  545. </ul>
  546. </nav>
  547. </div>
  548. </div>
  549. </footer>
  550. </body>
  551. </html>