Эхлэл Бүгдийг харах Тусламж
Бүртгүүлэх Нэвтрэх
Generation
/
project-work
3
0
Салаа 0
Файлууд Асуудлууд 1 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

Aggiornamento microservizio

Fabio Antonelli 7 сар өмнө
parent
94de0e1f0a
commit
d189d86642
7 өөрчлөгдсөн 3177 нэмэгдсэн , 3080 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 761 744
      Backend/templates/TFO.html
  2. 630 608
      Backend/templates/buildings.html
  3. 314 311
      Backend/templates/faq.html
  4. 545 523
      Backend/templates/instructions.html
  5. 256 262
      Backend/templates/login.html
  6. 372 357
      Backend/templates/mappa_logout.html
  7. 299 275
      Backend/templates/techsup.html

+ 761 - 744
Backend/templates/TFO.html
Файл харах 

@@ -1,745 +1,762 @@
 
-<!DOCTYPE html>
 
-<html lang="it">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>Mappa con Bootstrap Italia e Overlay Edifici</title>
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
 
-          integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
 
-          crossorigin="anonymous" referrerpolicy="no-referrer" />
 
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.13.4/dist/css/bootstrap-italia.min.css" rel="stylesheet">
 
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
 
-    <style>
 
-        /* Stile per la riga blu scuro */
 
-        .top-bar {
 
-            background-color: #004080; /* Blu scuro */
 
-            color: white;
 
-            padding: 0.5rem 0;
 
-            text-align: left; /* Allineamento a sinistra */
 
-            font-size: 0.9rem;
 
-        }
 
-        .table-responsive {
 
-            overflow-x: auto;
 
-            /* Aggiungi scroll orizzontale se la tabella è troppo larga */
 
-        }
 
-        .header, .footer {
 
-            background-color: #0066CC; /* Blu istituzionale */
 
-            color: white;
 
-            padding: 1rem 0;
 
-        }
 
-        .main-content {
 
-            background-color: #f8f9fa; /* Grigio chiaro */
 
-            padding: 2rem 0;
 
-        }
 
-        /* Stile per il logo "PW" dentro un cerchio */
 
-        .logo { 
-            font-family: 'Georgia', serif; 
-            font-size: 1.5rem; 
-            width: 50px; height: 50px; 
-            background-color: white; 
-            color: #0066CC; 
-            border-radius: 50%; 
-            margin-right: 10px; 
-            display: inline-flex; 
-            align-items: center; 
-            justify-content: center; 
-        }
 
-        #map { height: 500px; width: 100%; }
 
-        #coordinate-inputs { margin-top: 10px; width: 50%; }
 
-
 
-        /* Stile per i link con sottolineatura solo al passaggio del mouse */
 
-        .link-underline-hover {
 
-            text-decoration: none; /* Rimuove la sottolineatura di base */
 
-        }
 
-        .link-underline-hover:hover {
 
-            text-decoration: underline; /* Aggiunge la sottolineatura solo al passaggio del mouse */
 
-        }
 
-
 
-        /* Aggiusta l'allineamento del logo e titolo */
 
-        .header-title {
 
-            font-size: 1.5rem;
 
-            display: inline-block;
 
-            margin-left: 10px;
 
-        }
 
-        .header-content {
 
-            display: flex;
 
-            align-items: center;
 
-        }
 
-        /* Stili per la tabella dei dati */
 
-        .data-table {
 
-            display: flex;
 
-            flex-direction: column;
 
-        }
 
-        .table th, .table td {
 
-            font-size: 16px; /* Riduce la dimensione del testo */
 
-        }
 
-        h2 {
 
-            font-size: 22px; /* Riduce la dimensione della scritta "Dati Inseriti" */
 
-        }
 
-        .d-flex {
 
-            display: flex;
 
-        }
 
-        .justify-content-end {
 
-            justify-content: flex-end;
 
-        }
 
-        .mt-2 {
 
-            margin-top: 0.5rem;
 
-        }
 
-        .mt-3 {
 
-            margin-top: 1rem;
 
-        }
 
-        .social-icons a {
 
-            color: white;
 
-            font-size: 24px;
 
-            margin-right: 10px;
 
-        }
 
-    </style>
 
-</head>
 
-<body>
 
-    <!-- Riga blu scuro con scritto "Project Work" allineata a sinistra -->
 
-    <div class="top-bar">
 
-        <div class="container">
 
-            Project Work
 
-        </div>
 
-    </div>
 
-    
-    <header class="header">
 
-        <div class="container">
 
-            <div class="row align-items-center">
 
-                <div class="col">
 
-                    <!-- Logo "PW" dentro un cerchio e titolo accanto -->
 
-                    <div class="col d-flex">
 
-                        <!-- Logo "PW" dentro un cerchio, ora cliccabile -->
 
-                        <a href="./mappa_logout.html" class="logo-link">
 
-                            <div class="logo">PW</div>
 
-                        </a>
 
-                        <h1 class="header-title">TFO - Terminazioni Fibra Ottica</h1>
 
-                    </div>
 
-                </div>
 
-                <div class="col-auto d-flex align-items-center">
 
-                    <a href="./ADMIN.html" class="text-white me-3 link-underline-hover">Gestione Dati Immobiliari</a>
 
-                    <a href="./TFO.html" class="text-white me-3 link-underline-hover">TFO</a>
 
-                    <a href="./buildings.html" class="text-white me-3 link-underline-hover">Registrazione degli Edifici</a>
 
-                    <a href="./mappa_login.html" class="btn btn-light">Logout</a>
 
-                </div>
 
-            </div>
 
-        </div>
 
-    </header>
 
-
 
-    <main>
 
-        <div class="container mt-4">
 
-            <h1 style="font-size: 1.5rem;">Registrazione delle terminazioni di fibra ottica</h1>
 
-
 
-            <!-- Barra di ricerca -->
 
-            <div class="row">
 
-                <div class="col-md-9">
 
-                    <div class="mb-3">
 
-                        <label for="addressInput" class="form-label">Indirizzo:</label>
 
-                        <input type="text" class="form-control" id="addressInput">
 
-                    </div>
 
-                </div>
 
-                <div class="col-md-3">
 
-                    <button type="button" class="btn btn-primary mt-4" id="searchButton">Cerca</button>
 
-                </div>
 
-            </div>
 
-
 
-            <div class="main-content">
 
-                <div class="container">
 
-                    <div class="row justify-content-center">
 
-                        <div class="col-md-12">
 
-                            <div id="map"></div>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-            </div>
 
-
 
-            <p class="mt-4">Compila il modulo sottostante per registrare una nuova terminazione di fibra ottica:</p>
 
-            <fo class="container-fluid">
 
-                <div class="row justify-content-center">
 
-                    <div class="col-md-12">
 
-                        <div class="card">
 
-                            <div class="card-body">
 
-                                <div class="row">
 
-                                    <div class="col-md-9">
 
-                                        <div class="mb-3">
 
-                                            <label for="addressInputForm" class="form-label">Indirizzo:</label>
 
-                                            <input type="text" class="form-control" id="addressInputForm">
 
-                                        </div>
 
-                                    </div>
 
-                                    </div>
 
-                                    <div class="col-md-9"> 
-                                        <div class="mb-3">
 
-                                            <label for="latInput" class="form-label">Latitudine:</label>
 
-                                            <input type="number" class="form-control" id="latInput" min="-90" max="90"/>
 
-                                        </div>
 
-                                    </div>
 
-                                    <div class="col-md-9">
 
-                                        <div class="ms-md-6 mb-3">
 
-                                            <label for="lngInput" class="form-label">Longitudine:</label>
 
-                                            <input type="number" class="form-control" id="lngInput" min="-180" max="180"/>
 
-                                        </div>
 
-                                    </div>
 
-                                        
-                                    <div class="col-md-9">
 
-                                        <div class="ms-md-6 mb-3">
 
-                                            <label for="codiceCatastaleInput" class="form-label">Codice Catastale:</label>
 
-                                            <input type="text" class="form-control" id="codiceCatastaleInput">
 
-                                        </div>
 
-                                    </div>
 
-                                    <div class="col-md-9">
 
-                                        <div class="mb-3">
 
-                                            <label for="dataPredisposizione" class="form-label">Data Predisposizione</label>
 
-                                            <input type="date" class="form-control" id="dataPredisposizione">
 
-                                        </div>
 
-                                    </div>
 
-                                    <div class="col-md-9">
 
-                                        <div class="mb-3">
 
-                                            <label for="scala" class="form-label">Scala</label>
 
-                                            <input type="text" class="form-control" id="scala">
 
-                                        </div>
 
-                                    </div>
 
-                                    <div class="col-md-9">
 
-                                        <div class="mb-3">
 
-                                            <label for="piano" class="form-label">Piano</label>
 
-                                            <input type="text" class="form-control" id="piano">
 
-                                        </div>
 
-                                    </div>
 
-                                    <div class="col-md-9">
 
-                                        <div class="mb-3">
 
-                                            <label for="interno" class="form-label">Interno</label>
 
-                                            <input type="text" class="form-control" id="interno">
 
-                                        </div>
 
-                                    </div>
 
-                                </div>
 
-                                <div class="row">
 
-                                    <div class="col-md-9">
 
-                                        <div class="mb-3">
 
-                                            <label for="operatore" class="form-label">Identificativo Operatore</label>
 
-                                            <select class="form-select" id="operatore">
 
-                                                <option value="1">Operatore 1</option>
 
-                                                <option value="2">Operatore 2</option>
 
-                                            </select>
 
-                                        </div>
 
-                                    </div>
 
-                                    <div class="col-md-9">
 
-                                        <div class="mb-3">
 
-                                            <label for="terminazione" class="form-label">Codice Terminazione</label>
 
-                                            <input type="text" class="form-control" id="terminazione">
 
-                                        </div>
 
-                                    </div>
 
-                                    <div class="col-md-9">
 
-                                        <div class="mb-3">
 
-                                            <label for="nota" class="form-label">Note</label>
 
-                                            <input type="text" class="form-control" id="nota">
 
-                                        </div>
 
-                                    </div>
 
-                                </div>
 
-                                <div class="row">
 
-                                    <div class="col-md-2">
 
-                                        <button class="btn btn-primary w-100" onclick="aggiungiRiga()">Aggiungi</button>
 
-                                    </div>
 
-                                    <div class="col-md-2">
 
-                                        <button class="btn btn-secondary w-100" type="button" onclick="resettaForm()">Annulla</button>
 
-                                    </div>
 
-                                </div>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
-                    <div class="col-md-12 mt-4">
 
-                        <div class="data-table">
 
-                            <h2>Dati Inseriti</h2>
 
-                            <div class="table-responsive">
 
-                                <table class="table">
 
-                                    <thead>
 
-                                        <tr>
 
-                                            <th>Indirizzo</th>
 
-                                            <th>Latitudine</th>
 
-                                            <th>Longitudine</th>
 
-                                            <th>Codice Catastale</th>
 
-                                            <th>Data Predisposizione</th>
 
-                                            <th>Scala</th>
 
-                                            <th>Piano</th>
 
-                                            <th>Interno</th>
 
-                                            <th>Operatore</th>
 
-                                            <th>Terminazione</th>
 
-                                            <th>Note</th>
 
-                                            <th>Azioni</th>
 
-                                        </tr>
 
-                                    </thead>
 
-                                    <tbody id="buildingTableBody">
 
-                                        <!-- Le righe della tabella saranno aggiunte dinamicamente -->
 
-                                    </tbody>
 
-                                </table>
 
-                            </div>
 
-                            <!-- Contenitore per il pulsante "Invia" -->
 
-                            <div class="d-flex justify-content-end mt-3">
 
-                                <button class="btn btn-success">Invia</button>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-            </div>
 
-        </div>
 
-
 
-        <!-- Widget ElevenLabs ConvAI -->
 
-        <div id="ai-widget-container" style="position: fixed; bottom: 20px; right: 20px;">
 
-            <elevenlabs-convai agent-id="2MJWbkNuIGTHNI71hKfL"></elevenlabs-convai>
 
-        </div>
 
-    </main>
 
-
 
-    <footer id="footer" class="it-footer bg-black mt-5" role="contentinfo">
 
-        <div class="it-footer-main py-3">
 
-            <div class="container">
 
-                <section class="py-4">
 
-                    <div class="row">
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">Esplora SINFI</h2>
 
-                                <ul id="footer-menu-col-1" class="link-list">
 
-                                    <li id="menu-item-sinfi-1" class="menu-item">
 
-                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/che-cose/">Cos'è SINFI</a>
 
-                                    </li>
 
-                                    <li id="menu-item-sinfi-2" class="menu-item">
 
-                                        <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>
 
-                                    </li>
 
-                                    <li id="menu-item-sinfi-3" class="menu-item">
 
-                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/riferimenti-normativi/">Normative di Riferimento</a>
 
-                                    </li>
 
-                                    <li id="menu-item-sinfi-4" class="menu-item">
 
-                                        <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>
 
-                                    </li>
 
-                                </ul>
 
-                            </div>
 
-                        </div>
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">Aiuto e Supporto</h2>
 
-                                <ul id="footer-menu-col-2" class="link-list">
 
-                                    <li id="menu-item-aiuto-1" class="menu-item">
 
-                                        <a class="list-item" href="./instructions.html">Istruzioni</a>
 
-                                    </li>
 
-                                    <li id="menu-item-aiuto-2" class="menu-item">
 
-                                        <a class="list-item" href="./faq.html">FAQ - Domande Frequenti</a>
 
-                                    </li>
 
-                                    <li id="menu-item-aiuto-3" class="menu-item">
 
-                                        <a class="list-item" href="./techsup.html">Segnalazioni e Supporto Tecnico</a>
 
-                                    </li>
 
-                                </ul>
 
-                            </div>
 
-                        </div>
 
-                        <!-- Colonna "Community" con i loghi dei social -->
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">Community</h2>
 
-                                <div class="social-icons">
 
-                                    <a href="https://www.linkedin.com" target="_blank" class="me-3"><i class="fab fa-linkedin"></i></a>
 
-                                    <a href="https://www.youtube.com" target="_blank" class="me-3"><i class="fab fa-youtube"></i></a>
 
-                                    <a href="https://www.facebook.com" target="_blank" class="me-3"><i class="fab fa-facebook"></i></a>
 
-                                    <a href="https://www.instagram.com" target="_blank" class="me-3"><i class="fab fa-instagram"></i></a>
 
-                                </div>
 
-                            </div>
 
-                        </div>
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">SINFI</h2>
 
-                                <ul id="footer-menu-col-4" class="link-list">
 
-                                    <li id="menu-item-377" class="menu-item">
 
-                                        <a target="_blank" href="https://sinfi.it/portal/">Vai al sito ufficiale SINFI</a>
 
-                                    </li>
 
-                                </ul>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
-                </section>
 
-            </div>
 
-        </div>
 
-        <div class="it-footer-small-prints clearfix">
 
-            <div class="container">
 
-                <nav class="menu-footer-menu-ita-container" aria-label="link utili">
 
-                    <ul id="menu-footer-menu-ita" class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">
 
-                        <li id="menu-item-413" class="menu-item list-inline-item"><a href="/media-policy/">Media Policy</a></li>
 
-                        <li id="menu-item-453" class="menu-item list-inline-item"><a href="/note-legali/">Privacy Policy &amp; Note Legali</a></li>
 
-                        <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>
 
-                        <li id="menu-item-411" class="menu-item list-inline-item"><a href="/mappa-del-sito/">Mappa del sito</a></li>
 
-                        <li id="menu-item-1277" class="menu-item list-inline-item"><a href="/open-data-spid/">Open Data SPID</a></li>
 
-                    </ul>
 
-                </nav>
 
-            </div>
 
-        </div>
 
-    </footer>
 
-
 
-    <!-- Scripts -->
 
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
-    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.8.1/dist/js/bootstrap-italia.bundle.min.js"></script>
 
-    <!-- Includi lo script di ElevenLabs -->
 
-    <script src="https://elevenlabs.io/convai-widget/index.js" async type="text/javascript"></script>
 
-
 
-    <script>
 
-        // Inizializzazione Mappa
 
-        var map = L.map('map').setView([41.9028, 12.4964], 13);
 
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 
-            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 
-        }).addTo(map);
 
-
 
-        // Variabile per memorizzare il marker corrente
 
-        let marker;
 
-        var lastModifiedField = document.getElementById('addressInput');
 
-        var buildings = [];
 
-        var edificiLayer = L.layerGroup().addTo(map);
 
-        var zoomLivello = 16;
 
-
 
-        // Listener per il tasto Invio nel campo di ricerca
 
-        document.getElementById('addressInput').addEventListener('keydown', function (event) {
 
-            if (event.keyCode === 13) {
 
-                event.preventDefault();
 
-                document.getElementById('searchButton').click();
 
-            }
 
-});
 
-
 
-        document.getElementById('searchButton').addEventListener('click', function () {
 
-    const address = document.getElementById('addressInput').value;
 
-    if (address) {
 
-        fetch(`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(address)}&format=json`)
 
-            .then(response => response.json())
 
-            .then(data => {
 
-                if (data && data.length > 0) {
 
-                    const lat = parseFloat(data[0].lat);
 
-                    const lon = parseFloat(data[0].lon);
 
-
 
-                    if (marker) {
 
-                        map.removeLayer(marker);
 
-                    }
 
-
 
-                    marker = L.marker([lat, lon]).addTo(map)
 
-                        .bindPopup(`Indirizzo: ${data[0].display_name}`)
 
-                        .openPopup();
 
-
 
-                    map.setView([lat, lon], 18);
 
-
 
-                    document.getElementById('latInput').value = lat;
 
-                    document.getElementById('lngInput').value = lon;
 
-
 
-                    // Copia l'indirizzo trovato nel campo sotto la mappa
 
-                    document.getElementById('addressInputForm').value = data[0].display_name;
 
-                } else {
 
-                    alert('Indirizzo non trovato.');
 
-                }
 
-            })
 
-            .catch(error => {
 
-                console.error('Errore durante la geocodifica:', error);
 
-                alert('Si è verificato un errore durante la ricerca dell\'indirizzo.');
 
-            });
 
-    } else {
 
-        alert('Inserisci un indirizzo.');
 
-    }
 
-});
 
-
 
-        // Gestione del click sulla mappa
 
-        map.on('click', function (e) {
 
-    const lat = e.latlng.lat;
 
-    const lng = e.latlng.lng;
 
-
 
-    // Rimuovi il marker precedente (se esiste)
 
-    if (marker) {
 
-        map.removeLayer(marker);
 
-    }
 
-
 
-    // Aggiungi un nuovo marker sulla mappa
 
-    marker = L.marker([lat, lng]).addTo(map)
 
-        .bindPopup(`Coordinate: ${lat}, ${lng}`)
 
-        .openPopup();
 
-
 
-    // Riempie i campi di input per latitudine e longitudine
 
-    document.getElementById('latInput').value = lat;
 
-    document.getElementById('lngInput').value = lng;
 
-
 
-    // Ottieni l'indirizzo dalle coordinate
 
-    getAddress(lat, lng);
 
-});
 
-
 
-        async function caricaEdifici() {
 
-            if (map.getZoom() >= 16) {
 
-                var bounds = map.getBounds();
 
-                var bbox = bounds.getSouthWest().lat + ',' + bounds.getSouthWest().lng + ',' + bounds.getNorthEast().lat + ',' + bounds.getNorthEast().lng;
 
-                var query = `
 
-                    [out:json];
 
-                    (
 
-                        way["building"](${bbox});
 
-                        relation["building"](${bbox});
 
-                    );
 
-                    out geom;
 
-                    out tags;
 
-                `;
 
-
 
-                try {
 
-                    const data = await $.ajax({
 
-                        url: 'https://overpass-api.de/api/interpreter',
 
-                        data: { data: query },
 
-                        dataType: 'json'
 
-                    });
 
-
 
-                    edificiLayer.clearLayers();
 
-                    data.elements.forEach(function(element) {
 
-                        if (element.type === 'way' && element.geometry) {
 
-                            var latlngs = element.geometry.map(function(coord) {
 
-                                return [coord.lat, coord.lon];
 
-                            });
 
-                            var polygon = L.polygon(latlngs).addTo(edificiLayer);
 
-
 
-                            // Genera un numero casuale tra 0 e 3
 
-                            var statoEdificio = true;
 
-
 
-                            // Assegna il colore in base allo stato
 
-                            var colorePoligono;
 
-                            switch (statoEdificio) {
 
-                                case false:
 
-                                    colorePoligono = 'yellow';
 
-                                    break;
 
-                                case true:
 
-                                    colorePoligono = 'green';
 
-                                    break;
 
-                            }
 
-
 
-                            // Applica lo stile al poligono
 
-                            polygon.setStyle({ fillColor: colorePoligono, color: colorePoligono });
 
-
 
-                            polygon.on('click', async function() {
 
-                                var buildingType = element.tags && element.tags.building ? element.tags.building : 'Sconosciuto';
 
-                                try {
 
-                                    await getAddress(latlngs[0][0], latlngs[0][1]);
 
-                                    var popupContent = 'Coordinate: ' + latlngs[0][0] + ', ' + latlngs[0][1] + '<br>' +
 
-                                        'Tipo edificio: ' + buildingType + '<br>' +
 
-                                        'Indirizzo: ' + document.getElementById('addressInput').value + '<br>' +
 
-                                        'Stato: ' + statoEdificio + '<br>' +
 
-                                        'Codice Catastale: nessuno';
 
-                                    polygon.bindPopup(popupContent).openPopup();
 
-                                } catch (error) {
 
-                                    console.error("Errore nel recupero dell'indirizzo:", error);
 
-                                    var popupContent = 'Coordinate: ' + latlngs[0][0] + ', ' + latlngs[0][1] + '<br>' +
 
-                                        'Tipo edificio: ' + buildingType + '<br>' +
 
-                                        'Indirizzo: Indirizzo non disponibile<br>' +
 
-                                        'Stato: ' + statoEdificio + '<br>' +
 
-                                        'Codice Catastale: nessuno';
 
-                                    polygon.bindPopup(popupContent).openPopup();
 
-                                }
 
-                                var codiceCatasto = element.tags && element.tags.codice_catasto ? element.tags.codice_catasto : "nessuno";
 
-                                document.getElementById('codiceCatastaleInput').value = codiceCatasto;
 
-                            });
 
-                        } else if (element.type === 'relation' && element.members) {
 
-                            // Gestione delle relazioni (edifici complessi)
 
-                            // Da implementare
 
-                        }
 
-                    });
 
-                } catch (error) {
 
-                    console.error('Errore durante il caricamento degli edifici:', error);
 
-                    // Gestisci l'errore (ad esempio, mostra un messaggio all'utente)
 
-                }
 
-            } else {
 
-                edificiLayer.clearLayers();
 
-            }
 
-        }
 
-
 
-        // Funzione per ottenere l'indirizzo dalle coordinate
 
-        async function getAddress(lat, lng) {
 
-    try {
 
-        const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`);
 
-        const data = await response.json();
 
-
 
-        if (data.address) {
 
-            const displayName = data.display_name;
 
-            document.getElementById('addressInput').value = displayName;
 
-            document.getElementById('addressInputForm').value = displayName; // Aggiorna anche il campo del form
 
-        } else {
 
-            document.getElementById('addressInput').value = "Indirizzo non trovato";
 
-            document.getElementById('addressInputForm').value = "Indirizzo non trovato"; // Aggiorna anche il campo del form
 
-        }
 
-    } catch (error) {
 
-        console.error("Errore nel geocoding inverso:", error);
 
-        document.getElementById('addressInput').value = "Errore nel geocoding inverso";
 
-        document.getElementById('addressInputForm').value = "Errore nel geocoding inverso"; // Aggiorna anche il campo del form
 
-    }
 
-}
 
-
 
-        async function prendiIndirizzo(lat, lng) {
 
-            try {
 
-                const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`);
 
-                const data = await response.json();
 
-
 
-                if (data.address) {
 
-                    return data.display_name;
 
-                } else {
 
-                    return "Indirizzo non trovato";
 
-                }
 
-            } catch (error) {
 
-                console.error("Errore nel geocoding inverso:", error);
 
-                return "Indirizzo non disponibile";
 
-            }
 
-        }
 
-
 
-        function debounce(func, delay) {
 
-            let timeoutId;
 
-            return function(...args) {
 
-                clearTimeout(timeoutId);
 
-                timeoutId = setTimeout(() => {
 
-                    func.apply(this, args);
 
-                }, delay);
 
-            };
 
-        }
 
-
 
-        const debouncedCaricaEdifici = debounce(caricaEdifici, 300);
 
-
 
-        // Gestione dell'input manuale delle coordinate
 
-        document.getElementById('latInput').addEventListener('blur', function () {
 
-            const lat = parseFloat(this.value);
 
-            const lng = parseFloat(document.getElementById('lngInput').value);
 
-            if (!isNaN(lat) && !isNaN(lng)) {
 
-                map.setView([lat, lng], 16);
 
-                if (marker) {
 
-                    map.removeLayer(marker);
 
-                }
 
-                marker = L.marker([lat, lng]).addTo(map)
 
-                    .bindPopup(`Coordinate: ${lat}, ${lng}`)
 
-                    .openPopup();
 
-                getAddress(lat, lng);
 
-            }
 
-        });
 
-
 
-        document.getElementById('lngInput').addEventListener('blur', function () {
 
-            const lat = parseFloat(document.getElementById('latInput').value);
 
-            const lng = parseFloat(this.value);
 
-            if (!isNaN(lat) && !isNaN(lng)) {
 
-                map.setView([lat, lng], 16);
 
-                if (marker) {
 
-                    map.removeLayer(marker);
 
-                }
 
-                marker = L.marker([lat, lng]).addTo(map)
 
-                    .bindPopup(`Coordinate: ${lat}, ${lng}`)
 
-                    .openPopup();
 
-                getAddress(lat, lng);
 
-            }
 
-        });
 
-
 
-        // Funzione per aggiungere una riga alla tabella
 
-        function aggiungiRiga() {
 
-    const indirizzo = document.getElementById('addressInput').value;
 
-    const latitudine = document.getElementById('latInput').value;
 
-    const longitudine = document.getElementById('lngInput').value;
 
-    const codiceCatastale = document.getElementById('codiceCatastaleInput').value;
 
-    const dataPredisposizione = document.getElementById('dataPredisposizione').value;
 
-    const scala = document.getElementById('scala').value;
 
-    const piano = document.getElementById('piano').value;
 
-    const interno = document.getElementById('interno').value;
 
-    const operatore = document.getElementById('operatore').value;
 
-    const terminazione = document.getElementById('terminazione').value;
 
-    const nota = document.getElementById('nota').value;
 
-
 
-    // Controllo se tutti i campi sono compilati
 
-    if (!indirizzo || !latitudine || !longitudine || !dataPredisposizione || 
-        !codiceCatastale || !scala || !piano || !interno || !operatore || !terminazione ) {
 
-        alert("Compila tutti i campi prima di aggiungere la TFO!");
 
-        return; // Blocca l'inserimento
 
-    }
 
-
 
-    // Crea una nuova riga nella tabella
 
-    const tabella = document.querySelector(".table tbody");
 
-    const nuovaRiga = tabella.insertRow();
 
-
 
-    // Crea le celle della riga e inserisci i valori
 
-    const celle = [];
 
-    for (let i = 0; i < 11; i++) {
 
-        celle.push(nuovaRiga.insertCell());
 
-    }
 
-
 
-    celle[0].textContent = indirizzo;
 
-    celle[1].textContent = latitudine;
 
-    celle[2].textContent = longitudine;
 
-    celle[3].textContent = codiceCatastale;
 
-    celle[4].textContent = dataPredisposizione;
 
-    celle[5].textContent = scala;
 
-    celle[6].textContent = piano;
 
-    celle[7].textContent = interno;
 
-    celle[8].textContent = operatore;
 
-    celle[9].textContent = terminazione;
 
-    celle[10].textContent = nota;
 
-
 
-    // Aggiungi i pulsanti di modifica e cancellazione
 
-    const azioniCell = nuovaRiga.insertCell();
 
-    azioniCell.innerHTML = `
 
-        <div class="d-flex gap-2">
 
-            <button class="btn btn-sm btn-primary" onclick="modificaRiga(this)"><i class="fas fa-edit"></i></button>
 
-            <button class="btn btn-sm btn-danger" onclick="cancellaDato(this)"><i class="fas fa-trash"></i></button>
 
-        </div>
 
-    `;
 
-
 
-    // Resetta i campi del form dopo l'inserimento
 
-    resettaForm();
 
-}
 
-
 
- // Funzione per modificare una riga
 
- function modificaRiga(button) {
 
-      const riga = button.closest('tr'); // Trova la riga più vicina al pulsante
 
-      const celle = riga.cells;
 
-
 
-    // Popola i campi del form con i dati della riga
 
-    document.getElementById("addressInput").value = celle[0].textContent;
 
-    document.getElementById("latInput").value = celle[1].textContent;
 
-    document.getElementById("lngInput").value = celle[2].textContent;
 
-    document.getElementById("codiceCatastaleInput").value = celle[3].textContent;
 
-    document.getElementById("dataPredisposizione").value = celle[4].textContent;
 
-    document.getElementById("scala").value = celle[5].textContent;
 
-    document.getElementById("piano").value = celle[6].textContent;
 
-    document.getElementById("interno").value = celle[7].textContent;
 
-    document.getElementById("operatore").value = celle[8].textContent;
 
-    document.getElementById("terminazione").value = celle[9].textContent;
 
-    document.getElementById("nota").value = celle[10].textContent;
 
-
 
-    // Rimuovi la riga dalla tabella
 
-    riga.remove();
 
-}
 
-      
-      // Funzione per cancellare una riga
 
-      function cancellaDato(button) {
 
-    // Chiedi conferma all'utente
 
-    if (confirm("Sei sicuro di voler eliminare questo dato?")) {
 
-        // L'utente ha confermato, procedi con l'eliminazione
 
-        const riga = button.closest("tr");
 
-        if (riga) {
 
-            riga.remove();
 
-            alert("Dato eliminato con successo.");
 
-        }
 
-    } else {
 
-        // L'utente ha annullato l'eliminazione
 
-        alert("Eliminazione annullata.");
 
-    }
 
-}
 
-
 
-
 
-        
-
 
-        // Funzione per resettare il form
 
-        function resettaForm() {
 
-    document.getElementById('addressInputForm').value = '';
 
-    document.getElementById('addressInput').value = '';
 
-    document.getElementById('latInput').value = '';
 
-    document.getElementById('lngInput').value = '';
 
-    document.getElementById('codiceCatastaleInput').value = '';
 
-    document.getElementById('dataPredisposizione').value = '';
 
-    document.getElementById('scala').value = '';
 
-    document.getElementById('piano').value = '';
 
-    document.getElementById('interno').value = '';
 
-    document.getElementById('operatore').value = '1';
 
-    document.getElementById('terminazione').value = '';
 
-    document.getElementById('nota').value = '';
 
-}
 
-
 
-        // Aggiungi un listener per il movimento della mappa
 
-        map.on('moveend', debouncedCaricaEdifici);
 
-
 
-        // Carica gli edifici iniziali
 
-        caricaEdifici();
 
-    </script>
 
-</body>
 
+<!DOCTYPE html>

+<html lang="it">

+<head>

+    <meta charset="UTF-8">

+    <meta name="viewport" content="width=device-width, initial-scale=1.0">

+    <title>Mappa con Bootstrap Italia e Overlay Edifici</title>

+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"

+          integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="

+          crossorigin="anonymous" referrerpolicy="no-referrer" />

+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.13.4/dist/css/bootstrap-italia.min.css" rel="stylesheet">

+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />

+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />

+    <style>

+        /* Stile per la riga blu scuro */

+        .top-bar {

+            background-color: #004080; /* Blu scuro */

+            color: white;

+            padding: 0.5rem 0;

+            text-align: left; /* Allineamento a sinistra */

+            font-size: 0.9rem;

+        }

+        .table-responsive {

+            overflow-x: auto;

+            /* Aggiungi scroll orizzontale se la tabella è troppo larga */

+        }

+        .header, .footer {

+            background-color: #0066CC; /* Blu istituzionale */

+            color: white;

+            padding: 1rem 0;

+        }

+        .main-content {

+            background-color: #f8f9fa; /* Grigio chiaro */

+            padding: 2rem 0;

+        }

+        /* Stile per il logo "PW" dentro un cerchio */

+        .logo { 

+            font-family: 'Georgia', serif; 

+            font-size: 1.5rem; 

+            width: 50px; height: 50px; 

+            background-color: white; 

+            color: #0066CC; 

+            border-radius: 50%; 

+            margin-right: 10px; 

+            display: inline-flex; 

+            align-items: center; 

+            justify-content: center; 

+        }

+        #map { height: 500px; width: 100%; }

+        #coordinate-inputs { margin-top: 10px; width: 50%; }

+

+        /* Stile per i link con sottolineatura solo al passaggio del mouse */

+        .link-underline-hover {

+            text-decoration: none; /* Rimuove la sottolineatura di base */

+        }

+        .link-underline-hover:hover {

+            text-decoration: underline; /* Aggiunge la sottolineatura solo al passaggio del mouse */

+        }

+

+        /* Aggiusta l'allineamento del logo e titolo */

+        .header-title {

+            font-size: 1.5rem;

+            display: inline-block;

+            margin-left: 10px;

+        }

+        .header-content {

+            display: flex;

+            align-items: center;

+        }

+        /* Stili per la tabella dei dati */

+        .data-table {

+            display: flex;

+            flex-direction: column;

+        }

+        .table th, .table td {

+            font-size: 16px; /* Riduce la dimensione del testo */

+        }

+        h2 {

+            font-size: 22px; /* Riduce la dimensione della scritta "Dati Inseriti" */

+        }

+        .d-flex {

+            display: flex;

+        }

+        .justify-content-end {

+            justify-content: flex-end;

+        }

+        .mt-2 {

+            margin-top: 0.5rem;

+        }

+        .mt-3 {

+            margin-top: 1rem;

+        }

+        .social-icons a {

+            color: white;

+            font-size: 24px;

+            margin-right: 10px;

+        }

+    </style>

+</head>

+<body>

+    <!-- Riga blu scuro con scritto "Project Work" allineata a sinistra -->

+    <div class="top-bar">

+        <div class="container">

+            Project Work

+        </div>

+    </div>

+    

+    <header class="header">

+        <div class="container">

+            <div class="row align-items-center">

+                <div class="col">

+                    <!-- Logo "PW" dentro un cerchio e titolo accanto -->

+                    <div class="col d-flex">

+                        <!-- Logo "PW" dentro un cerchio, ora cliccabile -->

+                        <a href="/callback" class="logo-link">

+                            <div class="logo">PW</div>

+                        </a>

+                        <h1 class="header-title">TFO - Terminazioni Fibra Ottica</h1>

+                    </div>

+                </div>

+                <div class="col-auto d-flex align-items-center">

+                    <a href="/admin" class="text-white me-3 link-underline-hover">Gestione Dati Immobiliari</a>

+                    <a href="/tfo" class="text-white me-3 link-underline-hover">TFO</a>

+                    <a href="/buildings" class="text-white me-3 link-underline-hover">Registrazione degli Edifici</a>

+                    <a href="/mappa_login" class="btn btn-light">Logout</a>

+                </div>

+            </div>

+        </div>

+    </header>

+

+    <main>

+        <div class="container mt-4">

+            <h1 style="font-size: 1.5rem;">Registrazione delle terminazioni di fibra ottica</h1>

+

+            <!-- Barra di ricerca -->

+            <div class="row">

+                <div class="col-md-9">

+                    <div class="mb-3">

+                        <label for="addressInput" class="form-label">Indirizzo:</label>

+                        <input type="text" class="form-control" id="addressInput">

+                    </div>

+                </div>

+                <div class="col-md-3">

+                    <button type="button" class="btn btn-primary mt-4" id="searchButton">Cerca</button>

+                </div>

+            </div>

+

+            <div class="main-content">

+                <div class="container">

+                    <div class="row justify-content-center">

+                        <div class="col-md-12">

+                            <div id="map"></div>

+                        </div>

+                    </div>

+                </div>

+            </div>

+

+            <p class="mt-4">Compila il modulo sottostante per registrare una nuova terminazione di fibra ottica:</p>

+            <fo class="container-fluid">

+                <div class="row justify-content-center">

+                    <div class="col-md-12">

+                        <div class="card">

+                            <div class="card-body">

+                                <div class="row">

+                                    <div class="col-md-9">

+                                        <div class="mb-3">

+                                            <label for="addressInputForm" class="form-label">Indirizzo:</label>

+                                            <input type="text" class="form-control" id="addressInputForm">

+                                        </div>

+                                    </div>

+                                    </div>

+                                    <div class="col-md-9"> 

+                                        <div class="mb-3">

+                                            <label for="latInput" class="form-label">Latitudine:</label>

+                                            <input type="number" class="form-control" id="latInput" min="-90" max="90"/>

+                                        </div>

+                                    </div>

+                                    <div class="col-md-9">

+                                        <div class="ms-md-6 mb-3">

+                                            <label for="lngInput" class="form-label">Longitudine:</label>

+                                            <input type="number" class="form-control" id="lngInput" min="-180" max="180"/>

+                                        </div>

+                                    </div>

+                                        

+                                    <div class="col-md-9">

+                                        <div class="ms-md-6 mb-3">

+                                            <label for="codiceCatastaleInput" class="form-label">Codice Catastale:</label>

+                                            <input type="text" class="form-control" id="codiceCatastaleInput">

+                                        </div>

+                                    </div>

+                                    <div class="col-md-9">

+                                        <div class="mb-3">

+                                            <label for="dataPredisposizione" class="form-label">Data Predisposizione</label>

+                                            <input type="date" class="form-control" id="dataPredisposizione">

+                                        </div>

+                                    </div>

+                                    <div class="col-md-9">

+                                        <div class="mb-3">

+                                            <label for="scala" class="form-label">Scala</label>

+                                            <input type="text" class="form-control" id="scala">

+                                        </div>

+                                    </div>

+                                    <div class="col-md-9">

+                                        <div class="mb-3">

+                                            <label for="piano" class="form-label">Piano</label>

+                                            <input type="text" class="form-control" id="piano">

+                                        </div>

+                                    </div>

+                                    <div class="col-md-9">

+                                        <div class="mb-3">

+                                            <label for="interno" class="form-label">Interno</label>

+                                            <input type="text" class="form-control" id="interno">

+                                        </div>

+                                    </div>

+                                </div>

+                                <div class="row">

+                                    <div class="col-md-9">

+                                        <div class="mb-3">

+                                            <label for="operatore" class="form-label">Identificativo Operatore</label>

+                                            <select class="form-select" id="operatore">

+                                                <option value="1">Operatore 1</option>

+                                                <option value="2">Operatore 2</option>

+                                            </select>

+                                        </div>

+                                    </div>

+                                    <div class="col-md-9">

+                                        <div class="mb-3">

+                                            <label for="terminazione" class="form-label">Codice Terminazione</label>

+                                            <input type="text" class="form-control" id="terminazione">

+                                        </div>

+                                    </div>

+                                    <div class="col-md-9">

+                                        <div class="mb-3">

+                                            <label for="nota" class="form-label">Note</label>

+                                            <input type="text" class="form-control" id="nota">

+                                        </div>

+                                    </div>

+                                </div>

+                                <div class="row">

+                                    <div class="col-md-2">

+                                        <button class="btn btn-primary w-100" onclick="aggiungiRiga()">Aggiungi</button>

+                                    </div>

+                                    <div class="col-md-2">

+                                        <button class="btn btn-secondary w-100" type="button" onclick="resettaForm()">Annulla</button>

+                                    </div>

+                                </div>

+                            </div>

+                        </div>

+                    </div>

+                    <div class="col-md-12 mt-4">

+                        <div class="data-table">

+                            <h2>Dati Inseriti</h2>

+                            <div class="table-responsive">

+                                <table class="table">

+                                    <thead>

+                                        <tr>

+                                            <th>Indirizzo</th>

+                                            <th>Latitudine</th>

+                                            <th>Longitudine</th>

+                                            <th>Codice Catastale</th>

+                                            <th>Data Predisposizione</th>

+                                            <th>Scala</th>

+                                            <th>Piano</th>

+                                            <th>Interno</th>

+                                            <th>Operatore</th>

+                                            <th>Terminazione</th>

+                                            <th>Note</th>

+                                            <th>Azioni</th>

+                                        </tr>

+                                    </thead>

+                                    <tbody id="buildingTableBody">

+                                        <!-- Le righe della tabella saranno aggiunte dinamicamente -->

+                                    </tbody>

+                                </table>

+                            </div>

+                            <!-- Contenitore per il pulsante "Invia" -->

+                            <div class="d-flex justify-content-end mt-3">

+                                <button class="btn btn-success">Invia</button>

+                            </div>

+                        </div>

+                    </div>

+                </div>

+            </div>

+        </div>

+

+         <!-- Widget ElevenLabs ConvAI -->

+    <elevenlabs-convai agent-id="GlBWa9xJ6GdD7bAve6Yq"></elevenlabs-convai>

+    <script src="https://elevenlabs.io/convai-widget/index.js" async type="text/javascript"></script>

+    </main>

+    <script>

+        document.addEventListener('DOMContentLoaded', function() {

+            // Ottieni l'URL corrente

+            const urlParams = new URLSearchParams(window.location.search);

+            // Estrai il token dal parametro di query "token"

+            const ruolo = urlParams.get('ruolo');

+            const codice_fiscale = urlParams.get('codice_fiscale');

+            // Salva il token in localStorage

+            if (ruolo && codice_fiscale) {

+                localStorage.setItem('ruolo', ruolo);

+                localStorage.setItem('codice_fiscale', codice_fiscale);

+                // Rimuovi il token dall'URL per sicurezza (opzionale)

+                window.history.replaceState({}, document.title, window.location.pathname);

+                //window.location.href = window.location.pathname;

+                //Puoi anche reindirizzare ad una pagina pulita.

+                //window.location.href = '/altra-pagina';

+            }

+            

+        });

+    </script>

+    <footer id="footer" class="it-footer bg-black mt-5" role="contentinfo">

+        <div class="it-footer-main py-3">

+            <div class="container">

+                <section class="py-4">

+                    <div class="row">

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">Esplora SINFI</h2>

+                                <ul id="footer-menu-col-1" class="link-list">

+                                    <li id="menu-item-sinfi-1" class="menu-item">

+                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/che-cose/">Cos'è SINFI</a>

+                                    </li>

+                                    <li id="menu-item-sinfi-2" class="menu-item">

+                                        <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>

+                                    </li>

+                                    <li id="menu-item-sinfi-3" class="menu-item">

+                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/riferimenti-normativi/">Normative di Riferimento</a>

+                                    </li>

+                                    <li id="menu-item-sinfi-4" class="menu-item">

+                                        <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>

+                                    </li>

+                                </ul>

+                            </div>

+                        </div>

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">Aiuto e Supporto</h2>

+                                <ul id="footer-menu-col-2" class="link-list">

+                                    <li id="menu-item-aiuto-1" class="menu-item">

+                                        <a class="list-item" href="/instructions">Istruzioni</a>

+                                    </li>

+                                    <li id="menu-item-aiuto-2" class="menu-item">

+                                        <a class="list-item" href="/faq">FAQ - Domande Frequenti</a>

+                                    </li>

+                                    <li id="menu-item-aiuto-3" class="menu-item">

+                                        <a class="list-item" href="/techsup">Segnalazioni e Supporto Tecnico</a>

+                                    </li>

+                                </ul>

+                            </div>

+                        </div>

+                        <!-- Colonna "Community" con i loghi dei social -->

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">Community</h2>

+                                <div class="social-icons">

+                                    <a href="https://www.linkedin.com" target="_blank" class="me-3"><i class="fab fa-linkedin"></i></a>

+                                    <a href="https://www.youtube.com" target="_blank" class="me-3"><i class="fab fa-youtube"></i></a>

+                                    <a href="https://www.facebook.com" target="_blank" class="me-3"><i class="fab fa-facebook"></i></a>

+                                    <a href="https://www.instagram.com" target="_blank" class="me-3"><i class="fab fa-instagram"></i></a>

+                                </div>

+                            </div>

+                        </div>

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">SINFI</h2>

+                                <ul id="footer-menu-col-4" class="link-list">

+                                    <li id="menu-item-377" class="menu-item">

+                                        <a target="_blank" href="https://sinfi.it/portal/">Vai al sito ufficiale SINFI</a>

+                                    </li>

+                                </ul>

+                            </div>

+                        </div>

+                    </div>

+                </section>

+            </div>

+        </div>

+        <div class="it-footer-small-prints clearfix">

+            <div class="container">

+                <nav class="menu-footer-menu-ita-container" aria-label="link utili">

+                    <ul id="menu-footer-menu-ita" class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">

+                        <li id="menu-item-413" class="menu-item list-inline-item"><a href="/media-policy/">Media Policy</a></li>

+                        <li id="menu-item-453" class="menu-item list-inline-item"><a href="/note-legali/">Privacy Policy &amp; Note Legali</a></li>

+                        <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>

+                        <li id="menu-item-411" class="menu-item list-inline-item"><a href="/mappa-del-sito/">Mappa del sito</a></li>

+                        <li id="menu-item-1277" class="menu-item list-inline-item"><a href="/open-data-spid/">Open Data SPID</a></li>

+                    </ul>

+                </nav>

+            </div>

+        </div>

+    </footer>

+

+    <!-- Scripts -->

+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>

+    <script src="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.8.1/dist/js/bootstrap-italia.bundle.min.js"></script>

+

+

+    <script>

+        // Inizializzazione Mappa

+        var map = L.map('map').setView([41.9028, 12.4964], 13);

+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

+        }).addTo(map);

+

+        // Variabile per memorizzare il marker corrente

+        let marker;

+        var lastModifiedField = document.getElementById('addressInput');

+        var buildings = [];

+        var edificiLayer = L.layerGroup().addTo(map);

+        var zoomLivello = 16;

+

+        // Listener per il tasto Invio nel campo di ricerca

+        document.getElementById('addressInput').addEventListener('keydown', function (event) {

+            if (event.keyCode === 13) {

+                event.preventDefault();

+                document.getElementById('searchButton').click();

+            }

+});

+

+        document.getElementById('searchButton').addEventListener('click', function () {

+    const address = document.getElementById('addressInput').value;

+    if (address) {

+        fetch(`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(address)}&format=json`)

+            .then(response => response.json())

+            .then(data => {

+                if (data && data.length > 0) {

+                    const lat = parseFloat(data[0].lat);

+                    const lon = parseFloat(data[0].lon);

+

+                    if (marker) {

+                        map.removeLayer(marker);

+                    }

+

+                    marker = L.marker([lat, lon]).addTo(map)

+                        .bindPopup(`Indirizzo: ${data[0].display_name}`)

+                        .openPopup();

+

+                    map.setView([lat, lon], 18);

+

+                    document.getElementById('latInput').value = lat;

+                    document.getElementById('lngInput').value = lon;

+

+                    // Copia l'indirizzo trovato nel campo sotto la mappa

+                    document.getElementById('addressInputForm').value = data[0].display_name;

+                } else {

+                    alert('Indirizzo non trovato.');

+                }

+            })

+            .catch(error => {

+                console.error('Errore durante la geocodifica:', error);

+                alert('Si è verificato un errore durante la ricerca dell\'indirizzo.');

+            });

+    } else {

+        alert('Inserisci un indirizzo.');

+    }

+});

+

+        // Gestione del click sulla mappa

+        map.on('click', function (e) {

+    const lat = e.latlng.lat;

+    const lng = e.latlng.lng;

+

+    // Rimuovi il marker precedente (se esiste)

+    if (marker) {

+        map.removeLayer(marker);

+    }

+

+    // Aggiungi un nuovo marker sulla mappa

+    marker = L.marker([lat, lng]).addTo(map)

+        .bindPopup(`Coordinate: ${lat}, ${lng}`)

+        .openPopup();

+

+    // Riempie i campi di input per latitudine e longitudine

+    document.getElementById('latInput').value = lat;

+    document.getElementById('lngInput').value = lng;

+

+    // Ottieni l'indirizzo dalle coordinate

+    getAddress(lat, lng);

+});

+

+        async function caricaEdifici() {

+            if (map.getZoom() >= 16) {

+                var bounds = map.getBounds();

+                var bbox = bounds.getSouthWest().lat + ',' + bounds.getSouthWest().lng + ',' + bounds.getNorthEast().lat + ',' + bounds.getNorthEast().lng;

+                var query = `

+                    [out:json];

+                    (

+                        way["building"](${bbox});

+                        relation["building"](${bbox});

+                    );

+                    out geom;

+                    out tags;

+                `;

+

+                try {

+                    const data = await $.ajax({

+                        url: 'https://overpass-api.de/api/interpreter',

+                        data: { data: query },

+                        dataType: 'json'

+                    });

+

+                    edificiLayer.clearLayers();

+                    data.elements.forEach(function(element) {

+                        if (element.type === 'way' && element.geometry) {

+                            var latlngs = element.geometry.map(function(coord) {

+                                return [coord.lat, coord.lon];

+                            });

+                            var polygon = L.polygon(latlngs).addTo(edificiLayer);

+

+                            // Genera un numero casuale tra 0 e 3

+                            var statoEdificio = true;

+

+                            // Assegna il colore in base allo stato

+                            var colorePoligono;

+                            switch (statoEdificio) {

+                                case false:

+                                    colorePoligono = 'yellow';

+                                    break;

+                                case true:

+                                    colorePoligono = 'green';

+                                    break;

+                            }

+

+                            // Applica lo stile al poligono

+                            polygon.setStyle({ fillColor: colorePoligono, color: colorePoligono });

+

+                            polygon.on('click', async function() {

+                                var buildingType = element.tags && element.tags.building ? element.tags.building : 'Sconosciuto';

+                                try {

+                                    await getAddress(latlngs[0][0], latlngs[0][1]);

+                                    var popupContent = 'Coordinate: ' + latlngs[0][0] + ', ' + latlngs[0][1] + '<br>' +

+                                        'Tipo edificio: ' + buildingType + '<br>' +

+                                        'Indirizzo: ' + document.getElementById('addressInput').value + '<br>' +

+                                        'Stato: ' + statoEdificio + '<br>' +

+                                        'Codice Catastale: nessuno';

+                                    polygon.bindPopup(popupContent).openPopup();

+                                } catch (error) {

+                                    console.error("Errore nel recupero dell'indirizzo:", error);

+                                    var popupContent = 'Coordinate: ' + latlngs[0][0] + ', ' + latlngs[0][1] + '<br>' +

+                                        'Tipo edificio: ' + buildingType + '<br>' +

+                                        'Indirizzo: Indirizzo non disponibile<br>' +

+                                        'Stato: ' + statoEdificio + '<br>' +

+                                        'Codice Catastale: nessuno';

+                                    polygon.bindPopup(popupContent).openPopup();

+                                }

+                                var codiceCatasto = element.tags && element.tags.codice_catasto ? element.tags.codice_catasto : "nessuno";

+                                document.getElementById('codiceCatastaleInput').value = codiceCatasto;

+                            });

+                        } else if (element.type === 'relation' && element.members) {

+                            // Gestione delle relazioni (edifici complessi)

+                            // Da implementare

+                        }

+                    });

+                } catch (error) {

+                    console.error('Errore durante il caricamento degli edifici:', error);

+                    // Gestisci l'errore (ad esempio, mostra un messaggio all'utente)

+                }

+            } else {

+                edificiLayer.clearLayers();

+            }

+        }

+

+        // Funzione per ottenere l'indirizzo dalle coordinate

+        async function getAddress(lat, lng) {

+    try {

+        const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`);

+        const data = await response.json();

+

+        if (data.address) {

+            const displayName = data.display_name;

+            document.getElementById('addressInput').value = displayName;

+            document.getElementById('addressInputForm').value = displayName; // Aggiorna anche il campo del form

+        } else {

+            document.getElementById('addressInput').value = "Indirizzo non trovato";

+            document.getElementById('addressInputForm').value = "Indirizzo non trovato"; // Aggiorna anche il campo del form

+        }

+    } catch (error) {

+        console.error("Errore nel geocoding inverso:", error);

+        document.getElementById('addressInput').value = "Errore nel geocoding inverso";

+        document.getElementById('addressInputForm').value = "Errore nel geocoding inverso"; // Aggiorna anche il campo del form

+    }

+}

+

+        async function prendiIndirizzo(lat, lng) {

+            try {

+                const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`);

+                const data = await response.json();

+

+                if (data.address) {

+                    return data.display_name;

+                } else {

+                    return "Indirizzo non trovato";

+                }

+            } catch (error) {

+                console.error("Errore nel geocoding inverso:", error);

+                return "Indirizzo non disponibile";

+            }

+        }

+

+        function debounce(func, delay) {

+            let timeoutId;

+            return function(...args) {

+                clearTimeout(timeoutId);

+                timeoutId = setTimeout(() => {

+                    func.apply(this, args);

+                }, delay);

+            };

+        }

+

+        const debouncedCaricaEdifici = debounce(caricaEdifici, 300);

+

+        // Gestione dell'input manuale delle coordinate

+        document.getElementById('latInput').addEventListener('blur', function () {

+            const lat = parseFloat(this.value);

+            const lng = parseFloat(document.getElementById('lngInput').value);

+            if (!isNaN(lat) && !isNaN(lng)) {

+                map.setView([lat, lng], 16);

+                if (marker) {

+                    map.removeLayer(marker);

+                }

+                marker = L.marker([lat, lng]).addTo(map)

+                    .bindPopup(`Coordinate: ${lat}, ${lng}`)

+                    .openPopup();

+                getAddress(lat, lng);

+            }

+        });

+

+        document.getElementById('lngInput').addEventListener('blur', function () {

+            const lat = parseFloat(document.getElementById('latInput').value);

+            const lng = parseFloat(this.value);

+            if (!isNaN(lat) && !isNaN(lng)) {

+                map.setView([lat, lng], 16);

+                if (marker) {

+                    map.removeLayer(marker);

+                }

+                marker = L.marker([lat, lng]).addTo(map)

+                    .bindPopup(`Coordinate: ${lat}, ${lng}`)

+                    .openPopup();

+                getAddress(lat, lng);

+            }

+        });

+

+        // Funzione per aggiungere una riga alla tabella

+        function aggiungiRiga() {

+    const indirizzo = document.getElementById('addressInput').value;

+    const latitudine = document.getElementById('latInput').value;

+    const longitudine = document.getElementById('lngInput').value;

+    const codiceCatastale = document.getElementById('codiceCatastaleInput').value;

+    const dataPredisposizione = document.getElementById('dataPredisposizione').value;

+    const scala = document.getElementById('scala').value;

+    const piano = document.getElementById('piano').value;

+    const interno = document.getElementById('interno').value;

+    const operatore = document.getElementById('operatore').value;

+    const terminazione = document.getElementById('terminazione').value;

+    const nota = document.getElementById('nota').value;

+

+    // Controllo se tutti i campi sono compilati

+    if (!indirizzo || !latitudine || !longitudine || !dataPredisposizione || 

+        !codiceCatastale || !scala || !piano || !interno || !operatore || !terminazione ) {

+        alert("Compila tutti i campi prima di aggiungere la TFO!");

+        return; // Blocca l'inserimento

+    }

+

+    // Crea una nuova riga nella tabella

+    const tabella = document.querySelector(".table tbody");

+    const nuovaRiga = tabella.insertRow();

+

+    // Crea le celle della riga e inserisci i valori

+    const celle = [];

+    for (let i = 0; i < 11; i++) {

+        celle.push(nuovaRiga.insertCell());

+    }

+

+    celle[0].textContent = indirizzo;

+    celle[1].textContent = latitudine;

+    celle[2].textContent = longitudine;

+    celle[3].textContent = codiceCatastale;

+    celle[4].textContent = dataPredisposizione;

+    celle[5].textContent = scala;

+    celle[6].textContent = piano;

+    celle[7].textContent = interno;

+    celle[8].textContent = operatore;

+    celle[9].textContent = terminazione;

+    celle[10].textContent = nota;

+

+    // Aggiungi i pulsanti di modifica e cancellazione

+    const azioniCell = nuovaRiga.insertCell();

+    azioniCell.innerHTML = `

+        <div class="d-flex gap-2">

+            <button class="btn btn-sm btn-primary" onclick="modificaRiga(this)"><i class="fas fa-edit"></i></button>

+            <button class="btn btn-sm btn-danger" onclick="cancellaDato(this)"><i class="fas fa-trash"></i></button>

+        </div>

+    `;

+

+    // Resetta i campi del form dopo l'inserimento

+    resettaForm();

+}

+

+ // Funzione per modificare una riga

+ function modificaRiga(button) {

+      const riga = button.closest('tr'); // Trova la riga più vicina al pulsante

+      const celle = riga.cells;

+

+    // Popola i campi del form con i dati della riga

+    document.getElementById("addressInput").value = celle[0].textContent;

+    document.getElementById("latInput").value = celle[1].textContent;

+    document.getElementById("lngInput").value = celle[2].textContent;

+    document.getElementById("codiceCatastaleInput").value = celle[3].textContent;

+    document.getElementById("dataPredisposizione").value = celle[4].textContent;

+    document.getElementById("scala").value = celle[5].textContent;

+    document.getElementById("piano").value = celle[6].textContent;

+    document.getElementById("interno").value = celle[7].textContent;

+    document.getElementById("operatore").value = celle[8].textContent;

+    document.getElementById("terminazione").value = celle[9].textContent;

+    document.getElementById("nota").value = celle[10].textContent;

+

+    // Rimuovi la riga dalla tabella

+    riga.remove();

+}

+      

+      // Funzione per cancellare una riga

+      function cancellaDato(button) {

+    // Chiedi conferma all'utente

+    if (confirm("Sei sicuro di voler eliminare questo dato?")) {

+        // L'utente ha confermato, procedi con l'eliminazione

+        const riga = button.closest("tr");

+        if (riga) {

+            riga.remove();

+            alert("Dato eliminato con successo.");

+        }

+    } else {

+        // L'utente ha annullato l'eliminazione

+        alert("Eliminazione annullata.");

+    }

+}

+

+

+        

+

+        // Funzione per resettare il form

+        function resettaForm() {

+    document.getElementById('addressInputForm').value = '';

+    document.getElementById('addressInput').value = '';

+    document.getElementById('latInput').value = '';

+    document.getElementById('lngInput').value = '';

+    document.getElementById('codiceCatastaleInput').value = '';

+    document.getElementById('dataPredisposizione').value = '';

+    document.getElementById('scala').value = '';

+    document.getElementById('piano').value = '';

+    document.getElementById('interno').value = '';

+    document.getElementById('operatore').value = '1';

+    document.getElementById('terminazione').value = '';

+    document.getElementById('nota').value = '';

+}

+

+        // Aggiungi un listener per il movimento della mappa

+        map.on('moveend', debouncedCaricaEdifici);

+

+        // Carica gli edifici iniziali

+        caricaEdifici();

+    </script>

+</body>

 </html>
 
 </html>

+ 630 - 608
Backend/templates/buildings.html
Файл харах 

@@ -1,609 +1,631 @@
 
-<!DOCTYPE html>
 
-<html lang="it">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>Mappa con Bootstrap Italia e Overlay Edifici</title>
 
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.13.4/dist/css/bootstrap-italia.min.css" rel="stylesheet">
 
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
 
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
 
-    <style>
 
-        /* Stile per i label "Tipo Edificio" e "Data di Predisposizione" */
 
-        label[for="buildingType"], label[for="preparationDate"] {
 
-            font-weight: bold; /* Grassetto */
 
-            font-family: inherit; /* Stesso font di "Codice Catastale Particella" */
 
-        }
 
-
 
-        /* Stile per i link con sottolineatura solo al passaggio del mouse */
 
-        .link-underline-hover {
 
-                text-decoration: none; /* Rimuove la sottolineatura di base */
 
-            }
 
-        .link-underline-hover:hover {
 
-            text-decoration: underline; /* Aggiunge la sottolineatura solo al passaggio del mouse */
 
-        }
 
-
 
-        #buildingType {
 
-            color: hsl(210, 17%, 44%); /* Colore del testo del select */
 
-        }
 
-
 
-        #buildingType option {
 
-            color: hsl(210, 17%, 44%); /* Colore del testo delle opzioni */
 
-        }
 
-
 
-        #div-select {
 
-            border-bottom: 1px solid hsl(210, 17%, 44%);
 
-            margin-bottom: 5px;
 
-        }
 
-
 
-        /* Stile per la riga blu scuro */
 
-        .top-bar {
 
-            background-color: #004080; /* Blu scuro */
 
-            color: white;
 
-            padding: 0.5rem 0;
 
-            text-align: left; /* Allineamento a sinistra */
 
-            font-size: 0.9rem;
 
-        }
 
-
 
-        /* Stile per l'header */
 
-        .header {
 
-            background-color: #0066CC; /* Blu chiaro */
 
-            color: white;
 
-            padding: 1rem 0;
 
-        }
 
-
 
-       /* Stile per il logo "PW" dentro un cerchio */
 
-       .logo { 
-            font-family: 'Georgia', serif; 
-            font-size: 1.5rem; 
-            width: 50px; height: 50px; 
-            background-color: white; 
-            color: #0066CC; 
-            border-radius: 50%; 
-            margin-right: 10px; 
-            display: inline-flex; 
-            align-items: center; 
-            justify-content: center; 
-        }
 
-
 
-        /* Stile per il titolo "Mappa" */
 
-        .header-title {
 
-            color: white;
 
-            font-size: 1.5rem; /* Stessa grandezza di "Segnalazioni e Supporto Tecnico" */
 
-            font-weight: bold;
 
-            display: inline-block;
 
-            vertical-align: middle;
 
-        }
 
-
 
-        .main-content {
 
-            background-color: #f8f9fa; /* Grigio chiaro */
 
-            padding: 2rem 0;
 
-        }
 
-
 
-        .table-responsive {
 
-            overflow-x: auto;
 
-            /* Aggiungi scroll orizzontale se la tabella è troppo larga */
 
-        }
 
-
 
-        .header, .footer {
 
-            background-color: #0066CC; /* Blu istituzionale */
 
-            color: white;
 
-            padding: 1rem 0;
 
-        }
 
-
 
-        .main-content {
 
-            background-color: #f8f9fa; /* Grigio chiaro */
 
-            padding: 2rem 0;
 
-        }
 
-
 
-        #map {
 
-            height: 500px;
 
-            width: 100%;
 
-        }
 
-
 
-        #coordinate-inputs {
 
-            margin-top: 10px;
 
-            width: 50%;
 
-        }
 
-    </style>
 
-</head>
 
-<body>
 
-    <!-- Riga blu scuro con scritto "Project Work" allineata a sinistra -->
 
-    <div class="top-bar">
 
-        <div class="container">
 
-            Project Work
 
-        </div>
 
-    </div>
 
-
 
-    <!-- Header -->
 
-    <header class="header">
 
-        <div class="container">
 
-            <div class="row align-items-center">
 
-                <div class="col d-flex">
 
-                    <!-- Logo "PW" dentro un cerchio, ora cliccabile -->
 
-                    <a href="./mappa_logout.html" class="logo-link">
 
-                        <div class="logo">PW</div>
 
-                    </a>
 
-                    <h1 class="header-title">Registrazione degli Edifici</h1>
 
-                </div>
 
-                <div class="col-auto d-flex align-items-center">
 
-                    <a href="./ADMIN.html" class="text-white me-3 link-underline-hover">Gestione Dati Immobiliari</a>
 
-                    <a href="./TFO.html" class="text-white me-3 link-underline-hover">TFO</a>
 
-                    <a href="./buildings.html" class="text-white me-3 link-underline-hover">Registrazione degli Edifici</a>
 
-                    <a href="./mappa_login.html" class="btn btn-light">Logout</a>
 
-                </div>
 
-            </div>
 
-        </div>
 
-    </header>
 
-
 
-    <!-- Contenuto principale -->
 
-    <div class="container mt-4">
 
-        <h1 style="font-size: 1.5rem;">Registrazione degli edifici predisposti alla banda ultralarga</h1>
 
-        <p>Compila il modulo sottostante per registrare un edificio predisposto alla banda ultralarga:</p>
 
-
 
-        <form id="buildingForm">
 
-            <div class="form-row">
 
-                <div class="form-group col-md-6">
 
-                    <label for="address" style="font-weight: bold; color: black;">Indirizzo</label>
 
-                    <br>
 
-                    <br>
 
-                    <input type="text" class="form-control" id="address" placeholder="Via, n. civico, comune">
 
-                </div>
 
-                <div class="form-group col-md-6">
 
-                    <button type="button" class="btn btn-primary" id="search">Cerca</button>
 
-                </div>
 
-            </div>
 
-            <div class="form-row">
 
-                <div id="map"></div>
 
-            </div>
 
-            <div class="form-row">
 
-                <div class="form-group col-md-3">
 
-                    <label for="latitude" style="font-weight: bold; color: black;">Latitudine</label>
 
-                    <br>
 
-                    <br>
 
-                    <input type="text" class="form-control" id="latitude" placeholder="Latitudine">
 
-                </div>
 
-                <div class="form-group col-md-3">
 
-                    <label for="latitude" style="font-weight: bold; color: black;">Longitudine</label>
 
-                    <br>
 
-                    <br>
 
-                    <input type="text" class="form-control" id="longitude" placeholder="Longitudine">
 
-                </div>
 
-            </div>
 
-            <div class="form-row">
 
-                <div class="form-group col-md-3">
 
-                    <label for="latitude" style="font-weight: bold; color: black;">Codice Comune</label>
 
-                    <br>
 
-                    <br>
 
-                    <input type="text" class="form-control" id="commonCode" placeholder="Codice comune" required>
 
-                </div>
 
-            </div>
 
-            <div class="form-row">
 
-                <div class="form-group col-md-3">
 
-                    <label for="latitude" style="font-weight: bold; color: black;">Codice Catastale Particella</label>
 
-                    <br>
 
-                    <br>
 
-                    <input type="text" class="form-control" id="cadastralCode" placeholder="Codice catastale" required>
 
-                </div>
 
-            </div>
 
-            <label for="buildingType">Tipo Edificio</label>
 
-            <br>
 
-            <br>
 
-            <div class="form-group col-md-3" id="div-select">
 
-                <select class="form-control" id="buildingType">
 
-                    <option>Seleziona tipo di edificio</option>
 
-                    <option>Residenziale</option>
 
-                    <option>Commerciale</option>
 
-                    <option>Industriale</option>
 
-                </select>
 
-            </div>
 
-            <br>
 
-            <label for="preparationDate">Data di Predisposizione</label>
 
-            <br>
 
-            <br>
 
-            <div class="form-group col-md-3">
 
-                <input type="date" class="form-control" id="preparationDate" required>
 
-            </div>
 
-            <button type="button" class="btn btn-primary" id="add">Aggiungi</button>
 
-            <button type="button" class="btn btn-secondary" id="cancellaRiga">Annulla</button>
 
-            
-        </form>
 
-
 
-        <div class="data-table d-flex flex-column">
 
-            <table class="table mt-4">
 
-                <thead>
 
-                    <tr>
 
-                        <th>Indirizzo</th>
 
-                        <th>Latitudine</th>
 
-                        <th>Longitudine</th>
 
-                        <th>Comune</th>
 
-                        <th>Codice Catastale</th>
 
-                        <th>Tipo Edificio</th>
 
-                        <th>Data Predisposizione</th>
 
-                        <th>Azione</th>
 
-                    </tr>
 
-                </thead>
 
-                <tbody id="buildingTableBody">
 
-                </tbody>
 
-            </table>
 
-        </div>
 
-        <div class="d-flex justify-content-end mt-3">
 
-            <button type="button" class="btn btn-success" id="submitButton">Invia</button>
 
-        </div>
 
-    </div>
 
-
 
-    <!-- Script per la mappa e funzionalità -->
 
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
 
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
 
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 
-    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
 
-    <script>
 
-        // Inizializzazione Mappa
 
-        const map = L.map('map').setView([41.9028, 12.4964], 13);
 
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
 
-
 
-        // Layer edifici colorati
 
-        const edificiLayer = L.layerGroup().addTo(map);
 
-        let currentMarker = null;
 
-
 
-        // Funzione principale per caricare gli edifici
 
-        async function caricaEdifici() {
 
-            if (map.getZoom() >= 16) {
 
-                const bounds = map.getBounds();
 
-                const bbox = `${bounds.getSouthWest().lat},${bounds.getSouthWest().lng},${bounds.getNorthEast().lat},${bounds.getNorthEast().lng}`;
 
-                
-                const query = `[out:json];
 
-                    (
 
-                        way["building"](${bbox});
 
-                        relation["building"](${bbox});
 
-                    );
 
-                    out geom;
 
-                    out tags;`;
 
-
 
-                try {
 
-                    const response = await fetch(`https://overpass-api.de/api/interpreter?data=${encodeURIComponent(query)}`);
 
-                    const data = await response.json();
 
-
 
-                    edificiLayer.clearLayers();
 
-                    
-                    data.elements.forEach(element => {
 
-                        if (element.type === 'way' && element.geometry) {
 
-                            const latlngs = element.geometry.map(coord => [coord.lat, coord.lon]);
 
-                            var statoEdificio = false;
 
-                            let colorePoligono ;
 
-                            if (statoEdificio) colorePoligono = 'yellow';
 
-                            else colorePoligono = 'green';
 
-                            
-                            // const colori = ['#FF0000', '#00FF00'];
 
-                            const polygon = L.polygon(latlngs, {
 
-                                fillColor: colorePoligono,
 
-                                color: colorePoligono,
 
-                                fillOpacity: 0.5
 
-                            }).addTo(edificiLayer);
 
-
 
-                            polygon.on('click', async function() {
 
-                                var buildingType = element.tags && element.tags.building ? element.tags.building : 'Sconosciuto';
 
-                                try {
 
-                                    await getAddress(latlngs[0][0], latlngs[0][1]);
 
-                                    var popupContent = `
 
-                                        <b>Coordinate:</b> ${latlngs[0][0]}, ${latlngs[0][1]}<br>
 
-                                        <b>Tipo edificio:</b> ${buildingType}<br>
 
-                                        <b>Indirizzo:</b> ${document.getElementById('addressInput').value}<br>
 
-                                        <b>Stato:</b> ${statoEdificio}<br>
 
-                                        <b>Codice Catastale:</b> nessuno
 
-                                    `;
 
-                                    polygon.bindPopup(popupContent).openPopup();
 
-                                } catch (error) {
 
-                                    console.error("Errore nel recupero dell'indirizzo:", error);
 
-                                    var popupContent = `
 
-                                        <b>Coordinate:</b> ${latlngs[0][0]}, ${latlngs[0][1]}<br>
 
-                                        <b>Tipo edificio:</b> ${buildingType}<br>
 
-                                        <b>Indirizzo:</b> Indirizzo non disponibile<br>
 
-                                        <b>Stato:</b> ${statoEdificio}<br>
 
-                                        <b>Codice Catastale:</b> nessuno
 
-                                    `;
 
-                                    polygon.bindPopup(popupContent).openPopup();
 
-                                }
 
-                            });
 
-                        }
 
-                    });
 
-                } catch (error) {
 
-                    console.error("Errore nel caricamento edifici:", error);
 
-                }
 
-            } else {
 
-                edificiLayer.clearLayers();
 
-            }
 
-        }
 
-
 
-        // Carica gli edifici quando la mappa viene spostata o zoomata
 
-        map.on('moveend', caricaEdifici);
 
-        map.on('zoomend', caricaEdifici);
 
-
 
-        // Carica gli edifici all'avvio
 
-        caricaEdifici();
 
-// Listener per il click sulla mappa
 
-map.on('click', function(e) {
 
-    const lat = e.latlng.lat; // Latitudine del punto cliccato
 
-    const lng = e.latlng.lng; // Longitudine del punto cliccato
 
-
 
-    // Aggiorna i campi del form
 
-    document.getElementById('latitude').value = lat;
 
-    document.getElementById('longitude').value = lng;
 
-
 
-    // Ottieni l'indirizzo dalle coordinate
 
-    getAddress(lat, lng);
 
-
 
-    // Rimuovi il marker precedente (se esiste)
 
-    if (currentMarker) {
 
-        map.removeLayer(currentMarker);
 
-    }
 
-
 
-    // Aggiungi un nuovo marker sulla mappa
 
-    currentMarker = L.marker([lat, lng]).addTo(map)
 
-        .bindPopup(`Coordinate: ${lat}, ${lng}`)
 
-        .openPopup();
 
-});
 
-
 
-// Funzione per ottenere l'indirizzo dalle coordinate
 
-async function getAddress(lat, lng) {
 
-    try {
 
-        const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`);
 
-        const data = await response.json();
 
-
 
-        if (data.address) {
 
-            document.getElementById('address').value = data.display_name;
 
-        } else {
 
-            document.getElementById('address').value = "Indirizzo non trovato";
 
-        }
 
-    } catch (error) {
 
-        console.error("Errore nel geocoding inverso:", error);
 
-        document.getElementById('address').value = "Errore nel geocoding inverso";
 
-    }
 
-}
 
-        // Funzione per ottenere l'indirizzo dalle coordinate
 
-        async function getAddress(lat, lng) {
 
-            try {
 
-                const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`);
 
-                const data = await response.json();
 
-
 
-                if (data.address) {
 
-                    document.getElementById('address').value = data.display_name;
 
-                } else {
 
-                    document.getElementById('address').value = "Indirizzo non trovato";
 
-                }
 
-            } catch (error) {
 
-                console.error("Errore nel geocoding inverso:", error);
 
-                document.getElementById('address').value = "Errore nel geocoding inverso";
 
-            }
 
-        }
 
-
 
-        // Variabile per memorizzare il marker corrente
 
-        var marker;
 
-
 
-        // Gestione della ricerca dell'indirizzo
 
-        document.getElementById('search').addEventListener('click', function() {
 
-            var address = document.getElementById('address').value;
 
-            if (address) {
 
-                // Effettua una richiesta all'API di Nominatim per geocodificare l'indirizzo
 
-                fetch(`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(address)}&format=json`)
 
-                    .then(response => response.json())
 
-                    .then(data => {
 
-                        if (data && data.length > 0) {
 
-                            var lat = parseFloat(data[0].lat); // Latitudine
 
-                            var lon = parseFloat(data[0].lon); // Longitudine
 
-
 
-                            // Rimuovi il marker precedente (se esiste)
 
-                            if (marker) {
 
-                                map.removeLayer(marker);
 
-                            }
 
-
 
-                            // Aggiungi un nuovo marker sulla mappa
 
-                            marker = L.marker([lat, lon]).addTo(map)
 
-                                .bindPopup(`Indirizzo: ${data[0].display_name}`)
 
-                                .openPopup();
 
-
 
-                            // Centra la mappa sulla nuova posizione
 
-                            map.setView([lat, lon], 16);
 
-
 
-                            // Riempie i campi di input per latitudine e longitudine
 
-                            document.getElementById('latitude').value = lat;
 
-                            document.getElementById('longitude').value = lon;
 
-                        } else {
 
-                            alert('Indirizzo non trovato.');
 
-                        }
 
-                    })
 
-                    .catch(error => {
 
-                        console.error('Errore durante la geocodifica:', error);
 
-                        alert('Si è verificato un errore durante la ricerca dell\'indirizzo.');
 
-                    });
 
-            } else {
 
-                alert('Inserisci un indirizzo.');
 
-            }
 
-        });
 
-
 
-        // Funzione per aggiungere una riga alla tabella con controllo dei campi
 
-        function aggiungiRiga() {
 
-            // Recupera i valori dai campi di input
 
-            const indirizzo = document.getElementById("address").value.trim();
 
-            const latitudine = document.getElementById("latitude").value.trim();
 
-            const longitudine = document.getElementById("longitude").value.trim();
 
-            const codiceComune = document.getElementById("commonCode").value.trim();
 
-            const codiceCatastale = document.getElementById("cadastralCode").value.trim();
 
-            const tipodiedificio = document.getElementById("buildingType").value.trim();
 
-            const datadipredisposizione = document.getElementById("preparationDate").value.trim();
 
-        
-            // Controllo se tutti i campi sono compilati
 
-            if (!indirizzo || !latitudine || !longitudine || !codiceComune || 
-                !codiceCatastale || !tipodiedificio || !datadipredisposizione) {
 
-                alert("Compila tutti i campi prima di aggiungere l'edificio!");
 
-                return; // Blocca l'inserimento
 
-            }
 
-        
-            // Crea una nuova riga nella tabella
 
-            const tabella = document.querySelector("#buildingTableBody");
 
-            const nuovaRiga = tabella.insertRow();
 
-        
-            // Crea le celle della riga e inserisci i valori
 
-            const celle = [];
 
-            for (let i = 0; i < 7; i++) {
 
-                celle.push(nuovaRiga.insertCell());
 
-            }
 
-        
-            celle[0].textContent = indirizzo;
 
-            celle[1].textContent = latitudine;
 
-            celle[2].textContent = longitudine;
 
-            celle[3].textContent = codiceComune;
 
-            celle[4].textContent = codiceCatastale;
 
-            celle[5].textContent = tipodiedificio;
 
-            celle[6].textContent = datadipredisposizione;
 
-        
-            // Aggiungi i pulsanti di modifica e cancellazione
 
-            const azioniCell = nuovaRiga.insertCell();
 
-            azioniCell.innerHTML = `
 
-                <button class="btn btn-sm btn-primary" onclick="modificaRiga(this)"><i class="fas fa-edit"></i></button>
 
-                <button class="btn btn-sm btn-danger" onclick="cancellaRiga(this)"><i class="fas fa-trash"></i></button>
 
-            `;
 
-        
-            // Resetta i campi del form dopo l'inserimento
 
-            document.getElementById("buildingForm").reset();
 
-        }
 
-
 
-
 
-        // Collega la funzione aggiungiRiga() al pulsante "Aggiungi"
 
-        document.getElementById('add').addEventListener('click', function() {
 
-            aggiungiRiga();
 
-        });
 
-
 
-        // Funzione per modificare una riga
 
-        function modificaRiga(button) {
 
-            const riga = button.parentNode.parentNode;
 
-            const celle = riga.cells;
 
-
 
-            // Popola i campi del form con i dati della riga
 
-            document.getElementById("address").value = celle[0].textContent;
 
-            document.getElementById("latitude").value = celle[1].textContent;
 
-            document.getElementById("longitude").value = celle[2].textContent;
 
-            document.getElementById("commonCode").value = celle[3].textContent;
 
-            document.getElementById("cadastralCode").value = celle[4].textContent;
 
-            document.getElementById("buildingType").value = celle[5].textContent;
 
-            document.getElementById("preparationDate").value = celle[6].textContent;
 
-
 
-            // Rimuovi la riga dalla tabella
 
-            riga.remove();
 
-        }
 
-
 
-        // Funzione per cancellare una riga con conferma
 
-function cancellaRiga(button) {
 
-    // Mostra un alert di conferma
 
-    const isConfirmed = confirm("Sei sicuro di voler eliminare questa riga?");
 
-    
-    // Se l'utente conferma, elimina la riga
 
-    if (isConfirmed) {
 
-        const riga = button.parentNode.parentNode;
 
-        riga.remove();
 
-    }
 
-}
 
-
 
-        // Gestione dell'invio dei dati
 
-        document.getElementById('submitButton').addEventListener('click', function() {
 
-            alert('Dati inviati!');
 
-        });
 
-
 
-        // Funzione per cancellare tutti i campi del modulo
 
-        function resetForm() {
 
-            document.getElementById("buildingForm").reset();
 
-        }
 
-    
-        // Aggiungi evento al pulsante "Annulla"
 
-        document.getElementById('cancellaRiga').addEventListener('click', function() {
 
-            resetForm();
 
-        });
 
-    </script>
 
-    <script src="https://elevenlabs.io/convai-widget/index.js" async type="text/javascript"></script>
 
-    <div id="ai-widget-container" style="position: fixed; bottom: 20px; right: 20px;">
 
-        <elevenlabs-convai agent-id="2MJWbkNuIGTHNI71hKfL"></elevenlabs-convai>
 
-    </div>
 
-    <!-- Footer -->
 
-    <footer id="footer" class="it-footer bg-black mt-5" role="contentinfo"></footer>
 
-    <footer id="footer" class="it-footer bg-black" role="contentinfo">
 
-        <div class="it-footer-main py-3">
 
-            <div class="container">
 
-                <section class="py-4">
 
-                    <div class="row">
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">Esplora SINFI</h2>
 
-                                <ul id="footer-menu-col-1" class="link-list">
 
-                                    <li id="menu-item-sinfi-1" class="menu-item">
 
-                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/che-cose/">Cos'è SINFI</a>
 
-                                    </li>
 
-                                    <li id="menu-item-sinfi-2" class="menu-item">
 
-                                        <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>
 
-                                    </li>
 
-                                    <li id="menu-item-sinfi-3" class="menu-item">
 
-                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/riferimenti-normativi/">Normative di Riferimento</a>
 
-                                    </li>
 
-                                    <li id="menu-item-sinfi-4" class="menu-item">
 
-                                        <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>
 
-                                    </li>
 
-                                </ul>
 
-                            </div>
 
-                        </div>
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">Aiuto e Supporto</h2>
 
-                                <ul id="footer-menu-col-2" class="link-list">
 
-                                    <li id="menu-item-aiuto-1" class="menu-item">
 
-                                        <a class="list-item" href="./instructions.html">Istruzioni</a>
 
-                                    </li>
 
-                                    <li id="menu-item-aiuto-2" class="menu-item">
 
-                                        <a class="list-item" href="./faq.html">FAQ - Domande Frequenti</a>
 
-                                    </li>
 
-                                    <li id="menu-item-aiuto-3" class="menu-item">
 
-                                        <a class="list-item" href="./techsup.html">Segnalazioni e Supporto Tecnico</a>
 
-                                    </li>
 
-                                </ul>
 
-                            </div>
 
-                        </div>
 
-                        <!-- Colonna "Community" con i loghi dei social -->
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">Community</h2>
 
-                                <div class="social-icons">
 
-                                    <a href="https://www.linkedin.com" target="_blank" class="me-3"><i class="fab fa-linkedin"></i></a>
 
-                                    <a href="https://www.youtube.com" target="_blank" class="me-3"><i class="fab fa-youtube"></i></a>
 
-                                    <a href="https://www.facebook.com" target="_blank" class="me-3"><i class="fab fa-facebook"></i></a>
 
-                                    <a href="https://www.instagram.com" target="_blank" class="me-3"><i class="fab fa-instagram"></i></a>
 
-                                </div>
 
-                            </div>
 
-                        </div>
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">SINFI</h2>
 
-                                <ul id="footer-menu-col-4" class="link-list">
 
-                                    <li id="menu-item-377" class="menu-item">
 
-                                        <a target="_blank" href="https://sinfi.it/portal/">Vai al sito ufficiale SINFI</a>
 
-                                    </li>
 
-                                </ul>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
-                </section>
 
-            </div>
 
-        </div>
 
-        <div class="it-footer-small-prints clearfix">
 
-            <div class="container">
 
-                <nav class="menu-footer-menu-ita-container" aria-label="link utili">
 
-                    <ul id="menu-footer-menu-ita" class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">
 
-                        <li id="menu-item-413" class="menu-item list-inline-item"><a href="/media-policy/">Media Policy</a></li>
 
-                        <li id="menu-item-453" class="menu-item list-inline-item"><a href="/note-legali/">Privacy Policy &amp; Note Legali</a></li>
 
-                        <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>
 
-                        <li id="menu-item-411" class="menu-item list-inline-item"><a href="/mappa-del-sito/">Mappa del sito</a></li>
 
-                        <li id="menu-item-1277" class="menu-item list-inline-item"><a href="/open-data-spid/">Open Data SPID</a></li>
 
-                    </ul>
 
-                </nav>
 
-            </div>
 
-        </div>
 
-    </footer>
 
-</body>
 
+<!DOCTYPE html>

+<html lang="it">

+<head>

+    <meta charset="UTF-8">

+    <meta name="viewport" content="width=device-width, initial-scale=1.0">

+    <title>Mappa con Bootstrap Italia e Overlay Edifici</title>

+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.13.4/dist/css/bootstrap-italia.min.css" rel="stylesheet">

+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />

+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>

+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

+    <style>

+        /* Stile per i label "Tipo Edificio" e "Data di Predisposizione" */

+        label[for="buildingType"], label[for="preparationDate"] {

+            font-weight: bold; /* Grassetto */

+            font-family: inherit; /* Stesso font di "Codice Catastale Particella" */

+        }

+

+        /* Stile per i link con sottolineatura solo al passaggio del mouse */

+        .link-underline-hover {

+                text-decoration: none; /* Rimuove la sottolineatura di base */

+            }

+        .link-underline-hover:hover {

+            text-decoration: underline; /* Aggiunge la sottolineatura solo al passaggio del mouse */

+        }

+

+        #buildingType {

+            color: hsl(210, 17%, 44%); /* Colore del testo del select */

+        }

+

+        #buildingType option {

+            color: hsl(210, 17%, 44%); /* Colore del testo delle opzioni */

+        }

+

+        #div-select {

+            border-bottom: 1px solid hsl(210, 17%, 44%);

+            margin-bottom: 5px;

+        }

+

+        /* Stile per la riga blu scuro */

+        .top-bar {

+            background-color: #004080; /* Blu scuro */

+            color: white;

+            padding: 0.5rem 0;

+            text-align: left; /* Allineamento a sinistra */

+            font-size: 0.9rem;

+        }

+

+        /* Stile per l'header */

+        .header {

+            background-color: #0066CC; /* Blu chiaro */

+            color: white;

+            padding: 1rem 0;

+        }

+

+       /* Stile per il logo "PW" dentro un cerchio */

+       .logo { 

+            font-family: 'Georgia', serif; 

+            font-size: 1.5rem; 

+            width: 50px; height: 50px; 

+            background-color: white; 

+            color: #0066CC; 

+            border-radius: 50%; 

+            margin-right: 10px; 

+            display: inline-flex; 

+            align-items: center; 

+            justify-content: center; 

+        }

+

+        /* Stile per il titolo "Mappa" */

+        .header-title {

+            color: white;

+            font-size: 1.5rem; /* Stessa grandezza di "Segnalazioni e Supporto Tecnico" */

+            font-weight: bold;

+            display: inline-block;

+            vertical-align: middle;

+        }

+

+        .main-content {

+            background-color: #f8f9fa; /* Grigio chiaro */

+            padding: 2rem 0;

+        }

+

+        .table-responsive {

+            overflow-x: auto;

+            /* Aggiungi scroll orizzontale se la tabella è troppo larga */

+        }

+

+        .header, .footer {

+            background-color: #0066CC; /* Blu istituzionale */

+            color: white;

+            padding: 1rem 0;

+        }

+

+        .main-content {

+            background-color: #f8f9fa; /* Grigio chiaro */

+            padding: 2rem 0;

+        }

+

+        #map {

+            height: 500px;

+            width: 100%;

+        }

+

+        #coordinate-inputs {

+            margin-top: 10px;

+            width: 50%;

+        }

+    </style>

+</head>

+<body>

+    <!-- Riga blu scuro con scritto "Project Work" allineata a sinistra -->

+    <div class="top-bar">

+        <div class="container">

+            Project Work

+        </div>

+    </div>

+

+    <!-- Header -->

+    <header class="header">

+        <div class="container">

+            <div class="row align-items-center">

+                <div class="col d-flex">

+                    <!-- Logo "PW" dentro un cerchio, ora cliccabile -->

+                    <a href="/callback" class="logo-link">

+                        <div class="logo">PW</div>

+                    </a>

+                    <h1 class="header-title">Registrazione degli Edifici</h1>

+                </div>

+                <div class="col-auto d-flex align-items-center">

+                    <a href="/admin" class="text-white me-3 link-underline-hover">Gestione Dati Immobiliari</a>

+                    <a href="/tfo" class="text-white me-3 link-underline-hover">TFO</a>

+                    <a href="/buildings" class="text-white me-3 link-underline-hover">Registrazione degli Edifici</a>

+                    <a href="/mappa_login" class="btn btn-light">Logout</a>

+                </div>

+            </div>

+        </div>

+    </header>

+

+    <!-- Contenuto principale -->

+    <div class="container mt-4">

+        <h1 style="font-size: 1.5rem;">Registrazione degli edifici predisposti alla banda ultralarga</h1>

+        <p>Compila il modulo sottostante per registrare un edificio predisposto alla banda ultralarga:</p>

+

+        <form id="buildingForm">

+            <div class="form-row">

+                <div class="form-group col-md-6">

+                    <label for="address" style="font-weight: bold; color: black;">Indirizzo</label>

+                    <br>

+                    <br>

+                    <input type="text" class="form-control" id="address" placeholder="Via, n. civico, comune">

+                </div>

+                <div class="form-group col-md-6">

+                    <button type="button" class="btn btn-primary" id="search">Cerca</button>

+                </div>

+            </div>

+            <div class="form-row">

+                <div id="map"></div>

+            </div>

+            <div class="form-row">

+                <div class="form-group col-md-3">

+                    <label for="latitude" style="font-weight: bold; color: black;">Latitudine</label>

+                    <br>

+                    <br>

+                    <input type="text" class="form-control" id="latitude" placeholder="Latitudine">

+                </div>

+                <div class="form-group col-md-3">

+                    <label for="latitude" style="font-weight: bold; color: black;">Longitudine</label>

+                    <br>

+                    <br>

+                    <input type="text" class="form-control" id="longitude" placeholder="Longitudine">

+                </div>

+            </div>

+            <div class="form-row">

+                <div class="form-group col-md-3">

+                    <label for="latitude" style="font-weight: bold; color: black;">Codice Comune</label>

+                    <br>

+                    <br>

+                    <input type="text" class="form-control" id="commonCode" placeholder="Codice comune" required>

+                </div>

+            </div>

+            <div class="form-row">

+                <div class="form-group col-md-3">

+                    <label for="latitude" style="font-weight: bold; color: black;">Codice Catastale Particella</label>

+                    <br>

+                    <br>

+                    <input type="text" class="form-control" id="cadastralCode" placeholder="Codice catastale" required>

+                </div>

+            </div>

+            <label for="buildingType">Tipo Edificio</label>

+            <br>

+            <br>

+            <div class="form-group col-md-3" id="div-select">

+                <select class="form-control" id="buildingType">

+                    <option>Seleziona tipo di edificio</option>

+                    <option>Residenziale</option>

+                    <option>Commerciale</option>

+                    <option>Industriale</option>

+                </select>

+            </div>

+            <br>

+            <label for="preparationDate">Data di Predisposizione</label>

+            <br>

+            <br>

+            <div class="form-group col-md-3">

+                <input type="date" class="form-control" id="preparationDate" required>

+            </div>

+            <button type="button" class="btn btn-primary" id="add">Aggiungi</button>

+            <button type="button" class="btn btn-secondary" id="cancellaRiga">Annulla</button>

+            

+        </form>

+

+        <div class="data-table d-flex flex-column">

+            <table class="table mt-4">

+                <thead>

+                    <tr>

+                        <th>Indirizzo</th>

+                        <th>Latitudine</th>

+                        <th>Longitudine</th>

+                        <th>Comune</th>

+                        <th>Codice Catastale</th>

+                        <th>Tipo Edificio</th>

+                        <th>Data Predisposizione</th>

+                        <th>Azione</th>

+                    </tr>

+                </thead>

+                <tbody id="buildingTableBody">

+                </tbody>

+            </table>

+        </div>

+        <div class="d-flex justify-content-end mt-3">

+            <button type="button" class="btn btn-success" id="submitButton">Invia</button>

+        </div>

+    </div>

+

+    <!-- Script per la mappa e funzionalità -->

+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>

+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

+    <script>

+        // Inizializzazione Mappa

+        const map = L.map('map').setView([41.9028, 12.4964], 13);

+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

+

+        // Layer edifici colorati

+        const edificiLayer = L.layerGroup().addTo(map);

+        let currentMarker = null;

+

+        // Funzione principale per caricare gli edifici

+        async function caricaEdifici() {

+            if (map.getZoom() >= 16) {

+                const bounds = map.getBounds();

+                const bbox = `${bounds.getSouthWest().lat},${bounds.getSouthWest().lng},${bounds.getNorthEast().lat},${bounds.getNorthEast().lng}`;

+                

+                const query = `[out:json];

+                    (

+                        way["building"](${bbox});

+                        relation["building"](${bbox});

+                    );

+                    out geom;

+                    out tags;`;

+

+                try {

+                    const response = await fetch(`https://overpass-api.de/api/interpreter?data=${encodeURIComponent(query)}`);

+                    const data = await response.json();

+

+                    edificiLayer.clearLayers();

+                    

+                    data.elements.forEach(element => {

+                        if (element.type === 'way' && element.geometry) {

+                            const latlngs = element.geometry.map(coord => [coord.lat, coord.lon]);

+                            var statoEdificio = false;

+                            let colorePoligono ;

+                            if (statoEdificio) colorePoligono = 'yellow';

+                            else colorePoligono = 'green';

+                            

+                            // const colori = ['#FF0000', '#00FF00'];

+                            const polygon = L.polygon(latlngs, {

+                                fillColor: colorePoligono,

+                                color: colorePoligono,

+                                fillOpacity: 0.5

+                            }).addTo(edificiLayer);

+

+                            polygon.on('click', async function() {

+                                var buildingType = element.tags && element.tags.building ? element.tags.building : 'Sconosciuto';

+                                try {

+                                    await getAddress(latlngs[0][0], latlngs[0][1]);

+                                    var popupContent = `

+                                        <b>Coordinate:</b> ${latlngs[0][0]}, ${latlngs[0][1]}<br>

+                                        <b>Tipo edificio:</b> ${buildingType}<br>

+                                        <b>Indirizzo:</b> ${document.getElementById('addressInput').value}<br>

+                                        <b>Stato:</b> ${statoEdificio}<br>

+                                        <b>Codice Catastale:</b> nessuno

+                                    `;

+                                    polygon.bindPopup(popupContent).openPopup();

+                                } catch (error) {

+                                    console.error("Errore nel recupero dell'indirizzo:", error);

+                                    var popupContent = `

+                                        <b>Coordinate:</b> ${latlngs[0][0]}, ${latlngs[0][1]}<br>

+                                        <b>Tipo edificio:</b> ${buildingType}<br>

+                                        <b>Indirizzo:</b> Indirizzo non disponibile<br>

+                                        <b>Stato:</b> ${statoEdificio}<br>

+                                        <b>Codice Catastale:</b> nessuno

+                                    `;

+                                    polygon.bindPopup(popupContent).openPopup();

+                                }

+                            });

+                        }

+                    });

+                } catch (error) {

+                    console.error("Errore nel caricamento edifici:", error);

+                }

+            } else {

+                edificiLayer.clearLayers();

+            }

+        }

+

+        // Carica gli edifici quando la mappa viene spostata o zoomata

+        map.on('moveend', caricaEdifici);

+        map.on('zoomend', caricaEdifici);

+

+        // Carica gli edifici all'avvio

+        caricaEdifici();

+// Listener per il click sulla mappa

+map.on('click', function(e) {

+    const lat = e.latlng.lat; // Latitudine del punto cliccato

+    const lng = e.latlng.lng; // Longitudine del punto cliccato

+

+    // Aggiorna i campi del form

+    document.getElementById('latitude').value = lat;

+    document.getElementById('longitude').value = lng;

+

+    // Ottieni l'indirizzo dalle coordinate

+    getAddress(lat, lng);

+

+    // Rimuovi il marker precedente (se esiste)

+    if (currentMarker) {

+        map.removeLayer(currentMarker);

+    }

+

+    // Aggiungi un nuovo marker sulla mappa

+    currentMarker = L.marker([lat, lng]).addTo(map)

+        .bindPopup(`Coordinate: ${lat}, ${lng}`)

+        .openPopup();

+});

+

+// Funzione per ottenere l'indirizzo dalle coordinate

+async function getAddress(lat, lng) {

+    try {

+        const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`);

+        const data = await response.json();

+

+        if (data.address) {

+            document.getElementById('address').value = data.display_name;

+        } else {

+            document.getElementById('address').value = "Indirizzo non trovato";

+        }

+    } catch (error) {

+        console.error("Errore nel geocoding inverso:", error);

+        document.getElementById('address').value = "Errore nel geocoding inverso";

+    }

+}

+        // Funzione per ottenere l'indirizzo dalle coordinate

+        async function getAddress(lat, lng) {

+            try {

+                const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`);

+                const data = await response.json();

+

+                if (data.address) {

+                    document.getElementById('address').value = data.display_name;

+                } else {

+                    document.getElementById('address').value = "Indirizzo non trovato";

+                }

+            } catch (error) {

+                console.error("Errore nel geocoding inverso:", error);

+                document.getElementById('address').value = "Errore nel geocoding inverso";

+            }

+        }

+

+        // Variabile per memorizzare il marker corrente

+        var marker;

+

+        // Gestione della ricerca dell'indirizzo

+        document.getElementById('search').addEventListener('click', function() {

+            var address = document.getElementById('address').value;

+            if (address) {

+                // Effettua una richiesta all'API di Nominatim per geocodificare l'indirizzo

+                fetch(`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(address)}&format=json`)

+                    .then(response => response.json())

+                    .then(data => {

+                        if (data && data.length > 0) {

+                            var lat = parseFloat(data[0].lat); // Latitudine

+                            var lon = parseFloat(data[0].lon); // Longitudine

+

+                            // Rimuovi il marker precedente (se esiste)

+                            if (marker) {

+                                map.removeLayer(marker);

+                            }

+

+                            // Aggiungi un nuovo marker sulla mappa

+                            marker = L.marker([lat, lon]).addTo(map)

+                                .bindPopup(`Indirizzo: ${data[0].display_name}`)

+                                .openPopup();

+

+                            // Centra la mappa sulla nuova posizione

+                            map.setView([lat, lon], 16);

+

+                            // Riempie i campi di input per latitudine e longitudine

+                            document.getElementById('latitude').value = lat;

+                            document.getElementById('longitude').value = lon;

+                        } else {

+                            alert('Indirizzo non trovato.');

+                        }

+                    })

+                    .catch(error => {

+                        console.error('Errore durante la geocodifica:', error);

+                        alert('Si è verificato un errore durante la ricerca dell\'indirizzo.');

+                    });

+            } else {

+                alert('Inserisci un indirizzo.');

+            }

+        });

+

+        // Funzione per aggiungere una riga alla tabella con controllo dei campi

+        function aggiungiRiga() {

+            // Recupera i valori dai campi di input

+            const indirizzo = document.getElementById("address").value.trim();

+            const latitudine = document.getElementById("latitude").value.trim();

+            const longitudine = document.getElementById("longitude").value.trim();

+            const codiceComune = document.getElementById("commonCode").value.trim();

+            const codiceCatastale = document.getElementById("cadastralCode").value.trim();

+            const tipodiedificio = document.getElementById("buildingType").value.trim();

+            const datadipredisposizione = document.getElementById("preparationDate").value.trim();

+        

+            // Controllo se tutti i campi sono compilati

+            if (!indirizzo || !latitudine || !longitudine || !codiceComune || 

+                !codiceCatastale || !tipodiedificio || !datadipredisposizione) {

+                alert("Compila tutti i campi prima di aggiungere l'edificio!");

+                return; // Blocca l'inserimento

+            }

+        

+            // Crea una nuova riga nella tabella

+            const tabella = document.querySelector("#buildingTableBody");

+            const nuovaRiga = tabella.insertRow();

+        

+            // Crea le celle della riga e inserisci i valori

+            const celle = [];

+            for (let i = 0; i < 7; i++) {

+                celle.push(nuovaRiga.insertCell());

+            }

+        

+            celle[0].textContent = indirizzo;

+            celle[1].textContent = latitudine;

+            celle[2].textContent = longitudine;

+            celle[3].textContent = codiceComune;

+            celle[4].textContent = codiceCatastale;

+            celle[5].textContent = tipodiedificio;

+            celle[6].textContent = datadipredisposizione;

+        

+            // Aggiungi i pulsanti di modifica e cancellazione

+            const azioniCell = nuovaRiga.insertCell();

+            azioniCell.innerHTML = `

+                <button class="btn btn-sm btn-primary" onclick="modificaRiga(this)"><i class="fas fa-edit"></i></button>

+                <button class="btn btn-sm btn-danger" onclick="cancellaRiga(this)"><i class="fas fa-trash"></i></button>

+            `;

+        

+            // Resetta i campi del form dopo l'inserimento

+            document.getElementById("buildingForm").reset();

+        }

+

+

+        // Collega la funzione aggiungiRiga() al pulsante "Aggiungi"

+        document.getElementById('add').addEventListener('click', function() {

+            aggiungiRiga();

+        });

+

+        // Funzione per modificare una riga

+        function modificaRiga(button) {

+            const riga = button.parentNode.parentNode;

+            const celle = riga.cells;

+

+            // Popola i campi del form con i dati della riga

+            document.getElementById("address").value = celle[0].textContent;

+            document.getElementById("latitude").value = celle[1].textContent;

+            document.getElementById("longitude").value = celle[2].textContent;

+            document.getElementById("commonCode").value = celle[3].textContent;

+            document.getElementById("cadastralCode").value = celle[4].textContent;

+            document.getElementById("buildingType").value = celle[5].textContent;

+            document.getElementById("preparationDate").value = celle[6].textContent;

+

+            // Rimuovi la riga dalla tabella

+            riga.remove();

+        }

+

+        // Funzione per cancellare una riga con conferma

+function cancellaRiga(button) {

+    // Mostra un alert di conferma

+    const isConfirmed = confirm("Sei sicuro di voler eliminare questa riga?");

+    

+    // Se l'utente conferma, elimina la riga

+    if (isConfirmed) {

+        const riga = button.parentNode.parentNode;

+        riga.remove();

+    }

+}

+

+        // Gestione dell'invio dei dati

+        document.getElementById('submitButton').addEventListener('click', function() {

+            alert('Dati inviati!');

+        });

+

+        // Funzione per cancellare tutti i campi del modulo

+        function resetForm() {

+            document.getElementById("buildingForm").reset();

+        }

+    

+        // Aggiungi evento al pulsante "Annulla"

+        document.getElementById('cancellaRiga').addEventListener('click', function() {

+            resetForm();

+        });

+

+    </script>

+    <script>

+        document.addEventListener('DOMContentLoaded', function() {

+            // Ottieni l'URL corrente

+            const urlParams = new URLSearchParams(window.location.search);

+            // Estrai il token dal parametro di query "token"

+            const ruolo = urlParams.get('ruolo');

+            const codice_fiscale = urlParams.get('codice_fiscale');

+            // Salva il token in localStorage

+            if (ruolo && codice_fiscale) {

+                localStorage.setItem('ruolo', ruolo);

+                localStorage.setItem('codice_fiscale', codice_fiscale);

+                // Rimuovi il token dall'URL per sicurezza (opzionale)

+                window.history.replaceState({}, document.title, window.location.pathname);

+                //window.location.href = window.location.pathname;

+                //Puoi anche reindirizzare ad una pagina pulita.

+                //window.location.href = '/altra-pagina';

+            }

+            

+        });

+    </script>

+

+

+     <!-- Widget ElevenLabs ConvAI -->

+     <elevenlabs-convai agent-id="GlBWa9xJ6GdD7bAve6Yq"></elevenlabs-convai>

+     <script src="https://elevenlabs.io/convai-widget/index.js" async type="text/javascript"></script>

+    <!-- Footer -->

+    <footer id="footer" class="it-footer bg-black mt-5" role="contentinfo"></footer>

+    <footer id="footer" class="it-footer bg-black" role="contentinfo">

+        <div class="it-footer-main py-3">

+            <div class="container">

+                <section class="py-4">

+                    <div class="row">

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">Esplora SINFI</h2>

+                                <ul id="footer-menu-col-1" class="link-list">

+                                    <li id="menu-item-sinfi-1" class="menu-item">

+                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/che-cose/">Cos'è SINFI</a>

+                                    </li>

+                                    <li id="menu-item-sinfi-2" class="menu-item">

+                                        <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>

+                                    </li>

+                                    <li id="menu-item-sinfi-3" class="menu-item">

+                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/riferimenti-normativi/">Normative di Riferimento</a>

+                                    </li>

+                                    <li id="menu-item-sinfi-4" class="menu-item">

+                                        <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>

+                                    </li>

+                                </ul>

+                            </div>

+                        </div>

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">Aiuto e Supporto</h2>

+                                <ul id="footer-menu-col-2" class="link-list">

+                                    <li id="menu-item-aiuto-1" class="menu-item">

+                                        <a class="list-item" href="/instructions">Istruzioni</a>

+                                    </li>

+                                    <li id="menu-item-aiuto-2" class="menu-item">

+                                        <a class="list-item" href="/faq">FAQ - Domande Frequenti</a>

+                                    </li>

+                                    <li id="menu-item-aiuto-3" class="menu-item">

+                                        <a class="list-item" href="/techsup">Segnalazioni e Supporto Tecnico</a>

+                                    </li>

+                                </ul>

+                            </div>

+                        </div>

+                        <!-- Colonna "Community" con i loghi dei social -->

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">Community</h2>

+                                <div class="social-icons">

+                                    <a href="https://www.linkedin.com" target="_blank" class="me-3"><i class="fab fa-linkedin"></i></a>

+                                    <a href="https://www.youtube.com" target="_blank" class="me-3"><i class="fab fa-youtube"></i></a>

+                                    <a href="https://www.facebook.com" target="_blank" class="me-3"><i class="fab fa-facebook"></i></a>

+                                    <a href="https://www.instagram.com" target="_blank" class="me-3"><i class="fab fa-instagram"></i></a>

+                                </div>

+                            </div>

+                        </div>

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">SINFI</h2>

+                                <ul id="footer-menu-col-4" class="link-list">

+                                    <li id="menu-item-377" class="menu-item">

+                                        <a target="_blank" href="https://sinfi.it/portal/">Vai al sito ufficiale SINFI</a>

+                                    </li>

+                                </ul>

+                            </div>

+                        </div>

+                    </div>

+                </section>

+            </div>

+        </div>

+        <div class="it-footer-small-prints clearfix">

+            <div class="container">

+                <nav class="menu-footer-menu-ita-container" aria-label="link utili">

+                    <ul id="menu-footer-menu-ita" class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">

+                        <li id="menu-item-413" class="menu-item list-inline-item"><a href="/media-policy/">Media Policy</a></li>

+                        <li id="menu-item-453" class="menu-item list-inline-item"><a href="/note-legali/">Privacy Policy &amp; Note Legali</a></li>

+                        <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>

+                        <li id="menu-item-411" class="menu-item list-inline-item"><a href="/mappa-del-sito/">Mappa del sito</a></li>

+                        <li id="menu-item-1277" class="menu-item list-inline-item"><a href="/open-data-spid/">Open Data SPID</a></li>

+                    </ul>

+                </nav>

+            </div>

+        </div>

+    </footer>

+</body>

 </html>
 
 </html>

+ 314 - 311
Backend/templates/faq.html
Файл харах 

@@ -1,312 +1,315 @@
 
-<!DOCTYPE html>
 
-<html lang="it">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>Pagina di Aiuto - FAQ</title>
 
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.13.4/dist/css/bootstrap-italia.min.css" rel="stylesheet">
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 
-    <style>
 
-        /* Stile per la riga blu scuro */
 
-        .top-bar {
 
-            background-color: #004080; /* Blu scuro */
 
-            color: white;
 
-            padding: 0.5rem 0;
 
-            text-align: left; /* Allineamento a sinistra */
 
-            font-size: 0.9rem;
 
-        }
 
-
 
-        /* Stile per l'header */
 
-        .header {
 
-            background-color: #0066CC; /* Blu chiaro */
 
-            color: white;
 
-            padding: 1rem 0;
 
-        }
 
-
 
-        /* Stile per il logo "PW" dentro un cerchio */
 
-        .logo { 
-            font-family: 'Georgia', serif; 
-            font-size: 1.5rem; 
-            width: 50px; height: 50px; 
-            background-color: white; 
-            color: #0066CC; 
-            border-radius: 50%; 
-            margin-right: 10px; 
-            display: inline-flex; 
-            align-items: center; 
-            justify-content: center; 
-        }
 
-
 
-        /* Stile per il titolo "FAQ - Domande Frequenti" */
 
-        .header-title {
 
-            color: white;
 
-            font-size: 1.5rem; /* Stessa grandezza di "Segnalazioni e Supporto Tecnico" */
 
-            font-weight: bold;
 
-            display: inline-block;
 
-            vertical-align: middle;
 
-        }
 
-
 
-        /* Stile per il contenuto principale */
 
-        .main-content {
 
-            background-color: #f8f9fa; /* Grigio chiaro */
 
-            padding: 2rem 0;
 
-        }
 
-
 
-        /* Aggiungi margine ai lati del contenitore principale */
 
-        .container {
 
-            padding-left: 2rem;
 
-            padding-right: 2rem;
 
-        }
 
-
 
-        /* Aggiungi margine ai lati del footer */
 
-        .it-footer-main .container {
 
-            padding-left: 2rem;
 
-            padding-right: 2rem;
 
-        }
 
-    </style>
 
-         <style>
 
-            /* Stile per i link con sottolineatura solo al passaggio del mouse */
 
-            .link-underline-hover {
 
-                text-decoration: none; /* Rimuove la sottolineatura di base */
 
-            }
 
-            .link-underline-hover:hover {
 
-                text-decoration: underline; /* Aggiunge la sottolineatura solo al passaggio del mouse */
 
-            }
 
-        </style>
 
-</head>
 
-<body>
 
-    <!-- Riga blu scuro con scritto "Project Work" allineata a sinistra -->
 
-    <div class="top-bar">
 
-        <div class="container">
 
-            Project Work
 
-        </div>
 
-    </div>
 
-
 
-    <!-- Header --FAQ - Domande Frequenti-->
 
-<!-- Header -->
 
-<header class="header">
 
-    <div class="container">
 
-        <div class="row align-items-center">
 
-            <div class="col d-flex">
 
-                <!-- Logo "PW" dentro un cerchio, ora cliccabile -->
 
-                <a href="./mappa_logout.html" class="logo-link">
 
-                    <div class="logo">PW</div>
 
-                </a>
 
-                <h1 class="header-title">FAQ - Domande Frequenti</h1> <!-- Titolo "Mappa" con la stessa grandezza -->
 
-            </div>
 
-            <div class="col-auto d-flex align-items-center">
 
-                <a href="./ADMIN.html" class="text-white me-3 link-underline-hover">Gestione Dati Immobiliari</a>
 
-                <a href="./TFO.html" class="text-white me-3 link-underline-hover">TFO</a>
 
-                <a href="./buildings.html" class="text-white me-3 link-underline-hover">Registrazione degli Edifici</a>
 
-                <a href="./mappa_login.html" class="btn btn-light">Logout</a>
 
-            </div>
 
-        </div>
 
-    </div>
 
-</header>
 
-
 
-    <!-- Sezione principale -->
 
-    <section id="faq" class="it-card-wrapper mt-5 main-content">
 
-        <div class="container">
 
-            <div class="it-card">
 
-                <div class="it-card-header">
 
-                    <h5 class="it-card-title">Domande Frequenti (FAQ)</h5>
 
-                </div>
 
-                <div class="it-card-body">
 
-                    <div class="accordion" id="accordionFAQ">
 
-                        <div class="accordion-item">
 
-                            <h2 class="accordion-header" id="headingOne">
 
-                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
 
-                                    Cos'è il Sistema SINFI?
 
-                                </button>
 
-                            </h2>
 
-                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionFAQ">
 
-                                <div class="accordion-body">
 
-                                    Il Sistema Informativo Nazionale per la Banda Ultralarga (SINFI) è un sistema di gestione delle informazioni relative alle infrastrutture di telecomunicazione, utile per la pianificazione e il monitoraggio della diffusione della banda ultralarga in Italia.
 
-                                </div>
 
-                            </div>
 
-                        </div>
 
-                        <div class="accordion-item">
 
-                            <h2 class="accordion-header" id="headingTwo">
 
-                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
 
-                                    Come posso registrare un edificio predisposto a banda ultralarga?
 
-                                </button>
 
-                            </h2>
 
-                            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionFAQ">
 
-                                <div class="accordion-body">
 
-                                    Per registrare un edificio, è necessario accedere al sistema con le credenziali fornite e compilare il modulo con i dati richiesti, come l'indirizzo, il codice catastale e la data di predisposizione alla banda ultralarga.
 
-                                </div>
 
-                            </div>
 
-                        </div>
 
-                        <div class="accordion-item">
 
-                            <h2 class="accordion-header" id="headingThree">
 
-                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
 
-                                    Chi può accedere al Sistema SINFI?
 
-                                </button>
 
-                            </h2>
 
-                            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionFAQ">
 
-                                <div class="accordion-body">
 
-                                    L'accesso al Sistema SINFI è riservato agli operatori, alle amministrazioni pubbliche e ai cittadini. Gli utenti sono divisi in categorie a seconda del loro ruolo (operatore, amministratore, cittadino).
 
-                                </div>
 
-                            </div>
 
-                        </div>
 
-                        <div class="accordion-item">
 
-                            <h2 class="accordion-header" id="headingFour">
 
-                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
 
-                                    Quali sono i vantaggi dell'utilizzo del SINFI?
 
-                                </button>
 
-                            </h2>
 
-                            <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionFAQ">
 
-                                <div class="accordion-body">
 
-                                    Il SINFI permette di avere una visione completa e aggiornata delle infrastrutture di banda ultralarga, facilitando la pianificazione degli interventi, riducendo i costi e i tempi di realizzazione delle nuove reti e migliorando la qualità dei servizi per i cittadini.
 
-                                </div>
 
-                            </div>
 
-                        </div>
 
-                        <div class="accordion-item">
 
-                            <h2 class="accordion-header" id="headingFive">
 
-                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
 
-                                    Come posso ottenere assistenza per l'utilizzo del SINFI?
 
-                                </button>
 
-                            </h2>
 
-                            <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionFAQ">
 
-                                <div class="accordion-body">
 
-                                    Per ottenere assistenza, è possibile consultare la documentazione disponibile sul sito web del SINFI, contattare il supporto tecnico tramite email o telefono, oppure partecipare ai corsi di formazione organizzati dal sistema.
 
-                                </div>
 
-                            </div>
 
-                        </div>
 
-                        <div class="accordion-item">
 
-                            <h2 class="accordion-header" id="headingSix">
 
-                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
 
-                                    Come posso verificare lo stato della mia richiesta?
 
-                                </button>
 
-                            </h2>
 
-                            <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#accordionFAQ">
 
-                                <div class="accordion-body">
 
-                                    Puoi verificare lo stato della tua richiesta accedendo alla sezione "Le mie richieste" nella tua dashboard. Troverai un aggiornamento in tempo reale sullo stato di avanzamento.
 
-                                </div>
 
-                            </div>
 
-                        </div>
 
-                        <div class="accordion-item">
 
-                            <h2 class="accordion-header" id="headingSeven">
 
-                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
 
-                                    È possibile scaricare report o dati dal sistema?
 
-                                </button>
 
-                            </h2>
 
-                            <div id="collapseSeven" class="accordion-collapse collapse" aria-labelledby="headingSeven" data-bs-parent="#accordionFAQ">
 
-                                <div class="accordion-body">
 
-                                    Sì, è possibile scaricare report e dati in formato CSV o PDF dalla sezione "Report" del sistema. I dati sono disponibili per gli utenti autorizzati.
 
-                                </div>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-            </div>
 
-        </section>
 
-        <!-- Widget ElevenLabs ConvAI -->
 
-    <div id="ai-widget-container" style="position: fixed; bottom: 20px; right: 20px;">
 
-        <elevenlabs-convai agent-id="2MJWbkNuIGTHNI71hKfL"></elevenlabs-convai>
 
-    </div>
 
-
 
-        <!-- Footer -->
 
-        <footer id="footer" class="it-footer bg-black" role="contentinfo">
 
-            <div class="it-footer-main py-3">
 
-                <div class="container">
 
-                    <section class="py-4">
 
-                        <div class="row">
 
-                            <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                                <div class="link-list-wrapper">
 
-                                    <h2 class="h5">Esplora SINFI</h2>
 
-                                    <ul id="footer-menu-col-1" class="link-list">
 
-                                        <li id="menu-item-sinfi-1" class="menu-item">
 
-                                            <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/che-cose/">Cos'è SINFI</a>
 
-                                        </li>
 
-                                        <li id="menu-item-sinfi-2" class="menu-item">
 
-                                            <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>
 
-                                        </li>
 
-                                        <li id="menu-item-sinfi-3" class="menu-item">
 
-                                            <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/riferimenti-normativi/">Normative di Riferimento</a>
 
-                                        </li>
 
-                                        <li id="menu-item-sinfi-4" class="menu-item">
 
-                                            <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>
 
-                                        </li>
 
-                                    </ul>
 
-                                </div>
 
-                            </div>
 
-                            <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                                <div class="link-list-wrapper">
 
-                                    <h2 class="h5">Aiuto e Supporto</h2>
 
-                                    <ul id="footer-menu-col-2" class="link-list">
 
-                                        <li id="menu-item-aiuto-1" class="menu-item">
 
-                                            <a class="list-item" href="./instructions.html">Istruzioni</a>
 
-                                        </li>
 
-                                        <li id="menu-item-aiuto-2" class="menu-item">
 
-                                            <a class="list-item" href="./faq.html">FAQ - Domande Frequenti</a>
 
-                                        </li>
 
-                                        <li id="menu-item-aiuto-3" class="menu-item">
 
-                                            <a class="list-item" href="./techsup.html">Segnalazioni e Supporto Tecnico</a>
 
-                                        </li>
 
-                                    </ul>
 
-                                </div>
 
-                            </div>
 
-                            <!-- Colonna "Community" con i loghi dei social -->
 
-                            <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                                <div class="link-list-wrapper">
 
-                                    <h2 class="h5">Community</h2>
 
-                                    <div class="social-icons">
 
-                                        <a href="https://www.linkedin.com" target="_blank" class="me-3"><i class="fab fa-linkedin"></i></a>
 
-                                        <a href="https://www.youtube.com" target="_blank" class="me-3"><i class="fab fa-youtube"></i></a>
 
-                                        <a href="https://www.facebook.com" target="_blank" class="me-3"><i class="fab fa-facebook"></i></a>
 
-                                        <a href="https://www.instagram.com" target="_blank" class="me-3"><i class="fab fa-instagram"></i></a>
 
-                                    </div>
 
-                                </div>
 
-                            </div>
 
-                            <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                                <div class="link-list-wrapper">
 
-                                    <h2 class="h5">SINFI</h2>
 
-                                    <ul id="footer-menu-col-4" class="link-list">
 
-                                        <li id="menu-item-377" class="menu-item">
 
-                                            <a target="_blank" href="https://sinfi.it/portal/">Vai al sito ufficiale SINFI</a>
 
-                                        </li>
 
-                                    </ul>
 
-                                </div>
 
-                            </div>
 
-                        </div>
 
-                    </section>
 
-                </div>
 
-            </div>
 
-            <div class="it-footer-small-prints clearfix">
 
-                <div class="container">
 
-                    <nav class="menu-footer-menu-ita-container" aria-label="link utili">
 
-                        <ul id="menu-footer-menu-ita" class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">
 
-                            <li id="menu-item-413" class="menu-item list-inline-item"><a href="/media-policy/">Media Policy</a></li>
 
-                            <li id="menu-item-453" class="menu-item list-inline-item"><a href="/note-legali/">Privacy Policy &amp; Note Legali</a></li>
 
-                            <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>
 
-                            <li id="menu-item-411" class="menu-item list-inline-item"><a href="/mappa-del-sito/">Mappa del sito</a></li>
 
-                            <li id="menu-item-1277" class="menu-item list-inline-item"><a href="/open-data-spid/">Open Data SPID</a></li>
 
-                        </ul>
 
-                    </nav>
 
-                </div>
 
-            </div>
 
-        </footer>
 
-    </div>
 
-
 
-    <!-- Includi il file JavaScript di Bootstrap -->
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 
-    <script>
 
-        // Eseguiamo alcune personalizzazioni per migliorare l'interattività
 
-        document.addEventListener('DOMContentLoaded', function () {
 
-            // Inizializza i componenti di Bootstrap come gli Accordion
 
-            var accordion = new bootstrap.Collapse(document.getElementById('accordionFAQ'), {
 
-                toggle: false
 
-            });
 
-        });
 
-
 
-        // Eseguiamo alcune personalizzazioni per migliorare l'interattività
 
-document.addEventListener('DOMContentLoaded', function () {
 
-    // Inizializza i componenti di Bootstrap come gli Accordion
 
-    var accordion = new bootstrap.Accordion(document.getElementById('accordionFAQ'));
 
-});
 
-    </script>
 
-    <!-- Includi lo script di ElevenLabs -->
 
-    <script src="https://elevenlabs.io/convai-widget/index.js" async type="text/javascript"></script>
 
-</body>
 
+<!DOCTYPE html>

+<html lang="it">

+<head>

+    <meta charset="UTF-8">

+    <meta name="viewport" content="width=device-width, initial-scale=1.0">

+    <title>Pagina di Aiuto - FAQ</title>

+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.13.4/dist/css/bootstrap-italia.min.css" rel="stylesheet">

+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

+    <style>

+        /* Stile per la riga blu scuro */

+        .top-bar {

+            background-color: #004080; /* Blu scuro */

+            color: white;

+            padding: 0.5rem 0;

+            text-align: left; /* Allineamento a sinistra */

+            font-size: 0.9rem;

+        }

+

+        /* Stile per l'header */

+        .header {

+            background-color: #0066CC; /* Blu chiaro */

+            color: white;

+            padding: 1rem 0;

+        }

+

+        /* Stile per il logo "PW" dentro un cerchio */

+        .logo { 

+            font-family: 'Georgia', serif; 

+            font-size: 1.5rem; 

+            width: 50px; height: 50px; 

+            background-color: white; 

+            color: #0066CC; 

+            border-radius: 50%; 

+            margin-right: 10px; 

+            display: inline-flex; 

+            align-items: center; 

+            justify-content: center; 

+        }

+

+        /* Stile per il titolo "FAQ - Domande Frequenti" */

+        .header-title {

+            color: white;

+            font-size: 1.5rem; /* Stessa grandezza di "Segnalazioni e Supporto Tecnico" */

+            font-weight: bold;

+            display: inline-block;

+            vertical-align: middle;

+        }

+

+        /* Stile per il contenuto principale */

+        .main-content {

+            background-color: #f8f9fa; /* Grigio chiaro */

+            padding: 2rem 0;

+        }

+

+        /* Aggiungi margine ai lati del contenitore principale */

+        .container {

+            padding-left: 2rem;

+            padding-right: 2rem;

+        }

+

+        /* Aggiungi margine ai lati del footer */

+        .it-footer-main .container {

+            padding-left: 2rem;

+            padding-right: 2rem;

+        }

+    </style>

+         <style>

+            /* Stile per i link con sottolineatura solo al passaggio del mouse */

+            .link-underline-hover {

+                text-decoration: none; /* Rimuove la sottolineatura di base */

+            }

+            .link-underline-hover:hover {

+                text-decoration: underline; /* Aggiunge la sottolineatura solo al passaggio del mouse */

+            }

+        </style>

+</head>

+<body>

+    <!-- Riga blu scuro con scritto "Project Work" allineata a sinistra -->

+    <div class="top-bar">

+        <div class="container">

+            Project Work

+        </div>

+    </div>

+

+    <!-- Header --FAQ - Domande Frequenti-->

+<!-- Header -->

+<header class="header">

+    <div class="container">

+        <div class="row align-items-center">

+            <div class="col d-flex">

+                <!-- Logo "PW" dentro un cerchio, ora cliccabile -->

+                <a href="/callback" class="logo-link">

+                    <div class="logo">PW</div>

+                </a>

+                <h1 class="header-title">FAQ - Domande Frequenti</h1> <!-- Titolo "Mappa" con la stessa grandezza -->

+            </div>

+            <div class="col-auto d-flex align-items-center">

+                <a href="/admin" class="text-white me-3 link-underline-hover">Gestione Dati Immobiliari</a>

+                <a href="/tfo" class="text-white me-3 link-underline-hover">TFO</a>

+                <a href="/buildings" class="text-white me-3 link-underline-hover">Registrazione degli Edifici</a>

+                <a href="/mappa_login" class="btn btn-light">Logout</a>

+            </div>

+        </div>

+    </div>

+</header>

+

+    <!-- Sezione principale -->

+    <section id="faq" class="it-card-wrapper mt-5 main-content">

+        <div class="container">

+            <div class="it-card">

+                <div class="it-card-header">

+                    <h5 class="it-card-title">Domande Frequenti (FAQ)</h5>

+                </div>

+                <div class="it-card-body">

+                    <div class="accordion" id="accordionFAQ">

+                        <div class="accordion-item">

+                            <h2 class="accordion-header" id="headingOne">

+                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

+                                    Cos'è il Sistema SINFI?

+                                </button>

+                            </h2>

+                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionFAQ">

+                                <div class="accordion-body">

+                                    Il Sistema Informativo Nazionale per la Banda Ultralarga (SINFI) è un sistema di gestione delle informazioni relative alle infrastrutture di telecomunicazione, utile per la pianificazione e il monitoraggio della diffusione della banda ultralarga in Italia.

+                                </div>

+                            </div>

+                        </div>

+                        <div class="accordion-item">

+                            <h2 class="accordion-header" id="headingTwo">

+                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">

+                                    Come posso registrare un edificio predisposto a banda ultralarga?

+                                </button>

+                            </h2>

+                            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionFAQ">

+                                <div class="accordion-body">

+                                    Per registrare un edificio, è necessario accedere al sistema con le credenziali fornite e compilare il modulo con i dati richiesti, come l'indirizzo, il codice catastale e la data di predisposizione alla banda ultralarga.

+                                </div>

+                            </div>

+                        </div>

+                        <div class="accordion-item">

+                            <h2 class="accordion-header" id="headingThree">

+                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">

+                                    Chi può accedere al Sistema SINFI?

+                                </button>

+                            </h2>

+                            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionFAQ">

+                                <div class="accordion-body">

+                                    L'accesso al Sistema SINFI è riservato agli operatori, alle amministrazioni pubbliche e ai cittadini. Gli utenti sono divisi in categorie a seconda del loro ruolo (operatore, amministratore, cittadino).

+                                </div>

+                            </div>

+                        </div>

+                        <div class="accordion-item">

+                            <h2 class="accordion-header" id="headingFour">

+                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">

+                                    Quali sono i vantaggi dell'utilizzo del SINFI?

+                                </button>

+                            </h2>

+                            <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionFAQ">

+                                <div class="accordion-body">

+                                    Il SINFI permette di avere una visione completa e aggiornata delle infrastrutture di banda ultralarga, facilitando la pianificazione degli interventi, riducendo i costi e i tempi di realizzazione delle nuove reti e migliorando la qualità dei servizi per i cittadini.

+                                </div>

+                            </div>

+                        </div>

+                        <div class="accordion-item">

+                            <h2 class="accordion-header" id="headingFive">

+                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">

+                                    Come posso ottenere assistenza per l'utilizzo del SINFI?

+                                </button>

+                            </h2>

+                            <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionFAQ">

+                                <div class="accordion-body">

+                                    Per ottenere assistenza, è possibile consultare la documentazione disponibile sul sito web del SINFI, contattare il supporto tecnico tramite email o telefono, oppure partecipare ai corsi di formazione organizzati dal sistema.

+                                </div>

+                            </div>

+                        </div>

+                        <div class="accordion-item">

+                            <h2 class="accordion-header" id="headingSix">

+                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">

+                                    Come posso verificare lo stato della mia richiesta?

+                                </button>

+                            </h2>

+                            <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#accordionFAQ">

+                                <div class="accordion-body">

+                                    Puoi verificare lo stato della tua richiesta accedendo alla sezione "Le mie richieste" nella tua dashboard. Troverai un aggiornamento in tempo reale sullo stato di avanzamento.

+                                </div>

+                            </div>

+                        </div>

+                        <div class="accordion-item">

+                            <h2 class="accordion-header" id="headingSeven">

+                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">

+                                    È possibile scaricare report o dati dal sistema?

+                                </button>

+                            </h2>

+                            <div id="collapseSeven" class="accordion-collapse collapse" aria-labelledby="headingSeven" data-bs-parent="#accordionFAQ">

+                                <div class="accordion-body">

+                                    Sì, è possibile scaricare report e dati in formato CSV o PDF dalla sezione "Report" del sistema. I dati sono disponibili per gli utenti autorizzati.

+                                </div>

+                            </div>

+                        </div>

+                    </div>

+                </div>

+            </div>

+        </section>

+        <!-- Widget ElevenLabs ConvAI -->

+    <elevenlabs-convai agent-id="GlBWa9xJ6GdD7bAve6Yq"></elevenlabs-convai>

+    <script src="https://elevenlabs.io/convai-widget/index.js" async type="text/javascript"></script>

+    <script>

+        document.addEventListener('DOMContentLoaded', function() {

+            // Ottieni l'URL corrente

+            const urlParams = new URLSearchParams(window.location.search);

+            // Estrai il token dal parametro di query "token"

+            const ruolo = urlParams.get('ruolo');

+            const codice_fiscale = urlParams.get('codice_fiscale');

+            // Salva il token in localStorage

+            if (ruolo && codice_fiscale) {

+                localStorage.setItem('ruolo', ruolo);

+                localStorage.setItem('codice_fiscale', codice_fiscale);

+                // Rimuovi il token dall'URL per sicurezza (opzionale)

+                window.history.replaceState({}, document.title, window.location.pathname);

+                //window.location.href = window.location.pathname;

+                //Puoi anche reindirizzare ad una pagina pulita.

+                //window.location.href = '/altra-pagina';

+            }

+            

+        });

+    </script>

+        <!-- Footer -->

+        <footer id="footer" class="it-footer bg-black" role="contentinfo">

+            <div class="it-footer-main py-3">

+                <div class="container">

+                    <section class="py-4">

+                        <div class="row">

+                            <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                                <div class="link-list-wrapper">

+                                    <h2 class="h5">Esplora SINFI</h2>

+                                    <ul id="footer-menu-col-1" class="link-list">

+                                        <li id="menu-item-sinfi-1" class="menu-item">

+                                            <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/che-cose/">Cos'è SINFI</a>

+                                        </li>

+                                        <li id="menu-item-sinfi-2" class="menu-item">

+                                            <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>

+                                        </li>

+                                        <li id="menu-item-sinfi-3" class="menu-item">

+                                            <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/riferimenti-normativi/">Normative di Riferimento</a>

+                                        </li>

+                                        <li id="menu-item-sinfi-4" class="menu-item">

+                                            <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>

+                                        </li>

+                                    </ul>

+                                </div>

+                            </div>

+                            <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                                <div class="link-list-wrapper">

+                                    <h2 class="h5">Aiuto e Supporto</h2>

+                                    <ul id="footer-menu-col-2" class="link-list">

+                                        <li id="menu-item-aiuto-1" class="menu-item">

+                                            <a class="list-item" href="/instructions">Istruzioni</a>

+                                        </li>

+                                        <li id="menu-item-aiuto-2" class="menu-item">

+                                            <a class="list-item" href="/faq">FAQ - Domande Frequenti</a>

+                                        </li>

+                                        <li id="menu-item-aiuto-3" class="menu-item">

+                                            <a class="list-item" href="/techsup">Segnalazioni e Supporto Tecnico</a>

+                                        </li>

+                                    </ul>

+                                </div>

+                            </div>

+                            <!-- Colonna "Community" con i loghi dei social -->

+                            <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                                <div class="link-list-wrapper">

+                                    <h2 class="h5">Community</h2>

+                                    <div class="social-icons">

+                                        <a href="https://www.linkedin.com" target="_blank" class="me-3"><i class="fab fa-linkedin"></i></a>

+                                        <a href="https://www.youtube.com" target="_blank" class="me-3"><i class="fab fa-youtube"></i></a>

+                                        <a href="https://www.facebook.com" target="_blank" class="me-3"><i class="fab fa-facebook"></i></a>

+                                        <a href="https://www.instagram.com" target="_blank" class="me-3"><i class="fab fa-instagram"></i></a>

+                                    </div>

+                                </div>

+                            </div>

+                            <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                                <div class="link-list-wrapper">

+                                    <h2 class="h5">SINFI</h2>

+                                    <ul id="footer-menu-col-4" class="link-list">

+                                        <li id="menu-item-377" class="menu-item">

+                                            <a target="_blank" href="https://sinfi.it/portal/">Vai al sito ufficiale SINFI</a>

+                                        </li>

+                                    </ul>

+                                </div>

+                            </div>

+                        </div>

+                    </section>

+                </div>

+            </div>

+            <div class="it-footer-small-prints clearfix">

+                <div class="container">

+                    <nav class="menu-footer-menu-ita-container" aria-label="link utili">

+                        <ul id="menu-footer-menu-ita" class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">

+                            <li id="menu-item-413" class="menu-item list-inline-item"><a href="/media-policy/">Media Policy</a></li>

+                            <li id="menu-item-453" class="menu-item list-inline-item"><a href="/note-legali/">Privacy Policy &amp; Note Legali</a></li>

+                            <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>

+                            <li id="menu-item-411" class="menu-item list-inline-item"><a href="/mappa-del-sito/">Mappa del sito</a></li>

+                            <li id="menu-item-1277" class="menu-item list-inline-item"><a href="/open-data-spid/">Open Data SPID</a></li>

+                        </ul>

+                    </nav>

+                </div>

+            </div>

+        </footer>

+    </div>

+

+    <!-- Includi il file JavaScript di Bootstrap -->

+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

+    

+   

+</body>

 </html>
 
 </html>

+ 545 - 523
Backend/templates/instructions.html
Файл харах 

@@ -1,523 +1,545 @@
 
-<!DOCTYPE html>
 
-<html lang="it">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>Istruzioni</title>
 
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.13.4/dist/css/bootstrap-italia.min.css" rel="stylesheet">
 
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
 
-    <style>
 
-        /* Stile per la riga blu scuro */
 
-        .top-bar {
 
-            background-color: #004080; /* Blu scuro */
 
-            color: white;
 
-            padding: 0.5rem 0;
 
-            text-align: left;
 
-            font-size: 0.9rem;
 
-        }
 
-
 
-        /* Stile per l'header */
 
-        .header {
 
-            background-color: #0066CC; /* Blu chiaro */
 
-            color: white;
 
-            padding: 1rem 0;
 
-        }
 
-
 
-        /* Stile per il logo "PW" dentro un cerchio */
 
-        .logo { 
-            font-family: 'Georgia', serif; 
-            font-size: 1.5rem; 
-            width: 50px; height: 50px; 
-            background-color: white; 
-            color: #0066CC; 
-            border-radius: 50%; 
-            margin-right: 10px; 
-            display: inline-flex; 
-            align-items: center; 
-            justify-content: center; 
-        }
 
-
 
-        /* Stile per il titolo "Segnalazioni e Supporto Tecnico" */
 
-        .header-title {
 
-            color: white;
 
-            font-size: 1.5rem;  /* Ridotto per il titolo principale */
 
-            font-weight: bold;
 
-            display: inline-block;
 
-            vertical-align: middle;
 
-        }
 
-
 
-        /* Stile per la barra di ricerca */
 
-        .search-bar {
 
-            margin-top: 20px;
 
-            margin-bottom: 30px;  /* Aggiunto margine inferiore per spazio tra la barra di ricerca e il titolo */
 
-            display: flex;
 
-            justify-content: space-between;
 
-            max-width: 600px;
 
-            margin-left: auto;
 
-            margin-right: auto;
 
-        }
 
-
 
-        .search-bar input {
 
-            width: 80%;
 
-            padding: 0.5rem;
 
-            border: 1px solid #ccc;
 
-            border-radius: 4px;
 
-        }
 
-
 
-        .search-bar button {
 
-            padding: 0.5rem 1rem;
 
-            background-color: #0066CC;
 
-            color: white;
 
-            border: none;
 
-            border-radius: 4px;
 
-            cursor: pointer;
 
-        }
 
-
 
-        /* Stile per il contenuto principale */
 
-        .main-content {
 
-            background-color: #f8f9fa;
 
-            padding: 2rem 0;
 
-        }
 
-
 
-        /* Aggiungi margine ai lati del contenitore principale */
 
-        .container {
 
-            padding-left: 2rem;
 
-            padding-right: 2rem;
 
-        }
 
-
 
-        /* Footer */
 
-        .footer {
 
-            background-color: #0066CC;
 
-            color: white;
 
-            padding: 1rem 0;
 
-            text-align: center;
 
-        }
 
-
 
-        /* Stile per la sezione delle istruzioni */
 
-        .istruzioni {
 
-            padding: 1rem;
 
-            background-color: #ffffff;
 
-            border-radius: 4px;
 
-            margin-bottom: 2rem;
 
-            font-size: 0.8rem; /* Carattere più piccolo per le istruzioni */
 
-            line-height: 1.4; /* Migliora la leggibilità */
 
-        }
 
-
 
-        .clickable {
 
-            cursor: pointer;
 
-            color: #0066CC;
 
-            text-decoration: underline;
 
-            font-size: 1rem; /* Dimensione ridotta per i titoli */
 
-            margin-bottom: 0.5rem; /* Riduci lo spazio sotto il titolo */
 
-        }
 
-
 
-        .clickable.active {
 
-            font-size: 0.9rem; /* Dimensione ridotta quando il titolo è cliccato */
 
-        }
 
-
 
-        /* Ridurre la dimensione dei titoli delle sezioni */
 
-        h1 {
 
-            font-size: 1.25rem;  /* Titolo principale della guida */
 
-        }
 
-
 
-        h2 {
 
-            font-size: 1rem;  /* Titoli delle sezioni più piccoli */
 
-        }
 
-
 
-        h3 {
 
-            font-size: 0.9rem;  /* Sottotitoli più piccoli */
 
-            margin-top: 0.5rem; /* Riduci lo spazio sopra i sottotitoli */
 
-        }
 
-
 
-        /* Stile per i paragrafi e le liste dentro le istruzioni */
 
-        .istruzioni p, .istruzioni ol, .istruzioni ul {
 
-            font-size: 0.8rem; /* Riduci ulteriormente la dimensione del testo */
 
-            margin-bottom: 0.5rem; /* Riduci lo spazio tra i paragrafi e le liste */
 
-        }
 
-
 
-        /* Stile per gli elementi delle liste */
 
-        .istruzioni li {
 
-            font-size: 0.8rem; /* Riduci ulteriormente la dimensione del testo */
 
-        }
 
-
 
-        /* Pulsante torna su */
 
-        .back-to-top {
 
-            position: fixed;
 
-            bottom: 20px;
 
-            right: 20px;
 
-            background-color: #0066CC;
 
-            color: white;
 
-            padding: 0.7rem 1rem;
 
-            border: none;
 
-            border-radius: 50%;
 
-            cursor: pointer;
 
-            display: none;
 
-        }
 
-    </style>
 
-     <style>
 
-        /* Stile per i link con sottolineatura solo al passaggio del mouse */
 
-        .link-underline-hover {
 
-            text-decoration: none; /* Rimuove la sottolineatura di base */
 
-        }
 
-
 
-        .link-underline-hover:hover {
 
-            text-decoration: underline; /* Aggiunge la sottolineatura solo al passaggio del mouse */
 
-        }
 
-    </style>
 
-</head>
 
-<body>
 
-
 
-    <!-- Riga blu scuro con scritto "Project Work" allineata a sinistra -->
 
-    <div class="top-bar">
 
-        <div class="container">
 
-            Project Work
 
-        </div>
 
-    </div>
 
-
 
-<!-- Header -->
 
-<header class="header">
 
-    <div class="container">
 
-        <div class="row align-items-center">
 
-            <div class="col d-flex">
 
-                <!-- Logo "PW" dentro un cerchio, ora cliccabile -->
 
-                <a href="./mappa_logout.html" class="logo-link">
 
-                    <div class="logo">PW</div>
 
-                </a>
 
-                <h1 class="header-title">Istruzioni</h1> <!-- Titolo "Mappa" con la stessa grandezza -->
 
-            </div>
 
-            <div class="col-auto d-flex align-items-center">
 
-                <a href="./ADMIN.html" class="text-white me-3 link-underline-hover">Gestione Dati Immobiliari</a>
 
-                <a href="./TFO.html" class="text-white me-3 link-underline-hover">TFO</a>
 
-                <a href="./buildings.html" class="text-white me-3 link-underline-hover">Registrazione degli Edifici</a>
 
-                <a href="./mappa_login.html" class="btn btn-light">Logout</a>
 
-            </div>
 
-        </div>
 
-    </div>
 
-</header>
 
-
 
-    <!-- Barra di ricerca -->
 
-    <div class="search-bar">
 
-        <input type="text" id="searchInput" placeholder="Cerca per parola chiave">
 
-        <button onclick="search()">Cerca</button>
 
-    </div>
 
-
 
-    <div class="container">
 
-        <h1>Guida all'Uso del Sistema SINFI</h1>
 
-        <p>Questa guida ti aiuterà a comprendere il funzionamento del sistema e a risolvere eventuali dubbi.</p>
 
-
 
-        <!-- Sezione 1: Accesso al Sistema -->
 
-        <section>
 
-            <h2 class="clickable">1. Accesso al Sistema</h2>
 
-            <div class="istruzioni" style="display:none;">
 
-                <p>Per utilizzare il sistema è necessario autenticarsi con le proprie credenziali.</p>
 
-                <h3>Login</h3>
 
-                <ol>
 
-                    <li>Inserisci il tuo Codice Fiscale e la Password nei rispettivi campi.</li>
 
-                    <li>Clicca su "Accedi".</li>
 
-                    <li>Se le credenziali sono corrette, verrai reindirizzato alla Dashboard.</li>
 
-                </ol>
 
-                <h3>In caso di errore:</h3>
 
-                <ul>
 
-                    <li>Verifica che il Codice Fiscale e la Password siano corretti.</li>
 
-                    <li>Se hai dimenticato la password, contatta l’amministratore per il recupero.</li>
 
-                    <li>Se il problema persiste, controlla la connessione o riprova più tardi.</li>
 
-                </ul>
 
-            </div>
 
-        </section>
 
-
 
-        <!-- Sezione 2: Registrazione di un Edificio Predisposto alla Banda Ultralarga -->
 
-        <section>
 
-            <h2 class="clickable">2. Registrazione di un Edificio Predisposto alla Banda Ultralarga</h2>
 
-            <div class="istruzioni" style="display:none;">
 
-                <h3>A cosa serve?</h3>
 
-                <p>Questa funzionalità permette di registrare edifici che sono stati predisposti per la banda ultralarga.</p>
 
-                <h3>Come registrare un nuovo edificio</h3>
 
-                <ol>
 
-                    <li>Accedi alla sezione "Edifici Infrastrutturati" dal menu principale.</li>
 
-                    <li>Clicca su "Aggiungi Nuovo Edificio".</li>
 
-                    <li>Compila il modulo con i seguenti dati:
 
-                        <ul>
 
-                            <li>Indirizzo completo dell’edificio.</li>
 
-                            <li>Coordinate geografiche (centroide e poligono) → Puoi selezionare la posizione dalla mappa.</li>
 
-                            <li>Codice catastale → Inserisci il codice univoco dell’edificio.</li>
 
-                            <li>Tipologia dell’edificio → Seleziona tra residenziale, commerciale, industriale, ecc.</li>
 
-                            <li>Data di predisposizione → Indica quando l’edificio è stato predisposto per la banda ultralarga.</li>
 
-                        </ul>
 
-                    </li>
 
-                    <li>Dopo aver compilato tutti i campi, clicca su "Salva".</li>
 
-                </ol>
 
-                <h3>Problemi comuni e soluzioni</h3>
 
-                <ul>
 
-                    <li>Non trovo l’edificio sulla mappa dopo la registrazione:
 
-                        <ul>
 
-                            <li>Controlla che le coordinate inserite siano corrette.</li>
 
-                            <li>Aggiorna la pagina per ricaricare i dati.</li>
 
-                        </ul>
 
-                    </li>
 
-                    <li>Errore durante il salvataggio dell’edificio:
 
-                        <ul>
 
-                            <li>Assicurati di aver compilato tutti i campi obbligatori.</li>
 
-                            <li>Controlla la connessione internet.</li>
 
-                            <li>Se il problema persiste, contatta l’assistenza.</li>
 
-                        </ul>
 
-                    </li>
 
-                </ul>
 
-            </div>
 
-        </section>
 
-
 
-        <!-- Sezione 3: Registrazione di una Terminazione Ottica (TFO) -->
 
-        <section>
 
-            <h2 class="clickable">3. Registrazione di una Terminazione Ottica (TFO)</h2>
 
-            <div class="istruzioni" style="display:none;">
 
-                <h3>A cosa serve?</h3>
 
-                <p>Questa funzionalità permette di registrare le terminazioni ottiche (punti di connessione della fibra ottica) all’interno di un edificio.</p>
 
-                <h3>Come registrare una nuova TFO</h3>
 
-                <ol>
 
-                    <li>Accedi alla sezione "Terminazioni Ottiche (TFO)".</li>
 
-                    <li>Clicca su "Aggiungi Nuova TFO".</li>
 
-                    <li>Inserisci i dati richiesti:
 
-                        <ul>
 
-                            <li>Codice catastale dell’edificio → Deve corrispondere a un edificio già registrato.</li>
 
-                            <li>Identificativo Operatore → Indica il proprietario della rete.</li>
 
-                            <li>Codice univoco TFO → Numero identificativo della terminazione.</li>
 
-                            <li>Piano, Scala, Interno → Specifica l’ubicazione esatta della TFO nell’edificio.</li>
 
-                            <li>Posizione precisa → Seleziona sulla mappa la posizione della terminazione ottica.</li>
 
-                        </ul>
 
-                    </li>
 
-                    <li>Clicca su "Salva" per completare la registrazione.</li>
 
-                </ol>
 
-                <h3>Problemi comuni e soluzioni</h3>
 
-                <ul>
 
-                    <li>Non riesco a trovare il codice catastale dell’edificio:
 
-                        <ul>
 
-                            <li>Verifica che l’edificio sia stato registrato nella sezione "Edifici Infrastrutturati".</li>
 
-                            <li>Contatta l’amministratore per verificare i dati catastali.</li>
 
-                        </ul>
 
-                    </li>
 
-                    <li>Errore durante il salvataggio della TFO:
 
-                        <ul>
 
-                            <li>Controlla che tutti i campi siano compilati correttamente.</li>
 
-                            <li>Se l’errore persiste, prova a ricaricare la pagina.</li>
 
-                        </ul>
 
-                    </li>
 
-                </ul>
 
-            </div>
 
-        </section>
 
-
 
-        <!-- Sezione 4: Mappa Interattiva degli Edifici -->
 
-        <section>
 
-            <h2 class="clickable">4. Mappa Interattiva degli Edifici</h2>
 
-            <div class="istruzioni" style="display:none;">
 
-                <p>La mappa visualizza gli edifici e le infrastrutture registrate.</p>
 
-                <h3>Funzionalità della mappa</h3>
 
-                <ul>
 
-                    <li>Selezione di un edificio: Clicca su un edificio per visualizzarne i dettagli.</li>
 
-                    <li>Filtri di visualizzazione: Puoi filtrare gli edifici in base allo stato di infrastrutturazione.</li>
 
-                    <li>Colori della mappa:
 
-                        <ul>
 
-                            <li>Rosso → Edificio non predisposto alla banda ultralarga.</li>
 
-                            <li>Giallo → Edificio predisposto.</li>
 
-                        </ul>
 
-                    </li>
 
-                </ul>
 
-                <h3>Problemi comuni e soluzioni</h3>
 
-                <ul>
 
-                    <li>Non vedo gli edifici sulla mappa:
 
-                        <ul>
 
-                            <li>Assicurati di avere una connessione internet attiva.</li>
 
-                            <li>Verifica che la registrazione degli edifici sia stata completata correttamente.</li>
 
-                            <li>Ricarica la pagina per aggiornare i dati.</li>
 
-                        </ul>
 
-                    </li>
 
-                </ul>
 
-            </div>
 
-        </section>
 
-
 
-        <!-- Sezione 5: Gestione Utenti e Accesso -->
 
-        <section>
 
-            <h2 class="clickable">5. Gestione Utenti e Accesso</h2>
 
-            <div class="istruzioni" style="display:none;">
 
-                <h3>Ruoli Utente</h3>
 
-                <ul>
 
-                    <li>Operatore → Può registrare e modificare solo gli edifici e le TFO di sua competenza.</li>
 
-                    <li>Amministratore → Può visualizzare e gestire tutte le pratiche.</li>
 
-                </ul>
 
-                <h3>Accesso e Autenticazione</h3>
 
-                <ul>
 
-                    <li>Il sistema utilizza un login sicuro con autenticazione tramite Keycloak.</li>
 
-                    <li>Gli utenti vengono registrati direttamente nel database e non possono creare account autonomamente.</li>
 
-                    <li>Se hai bisogno di un accesso, contatta l’amministratore.</li>
 
-                </ul>
 
-                <h3>Problemi comuni e soluzioni</h3>
 
-                <ul>
 
-                    <li>Non riesco ad accedere:
 
-                        <ul>
 
-                            <li>Verifica che il Codice Fiscale e la Password siano corretti.</li>
 
-                            <li>Contatta l’amministratore per il recupero della password.</li>
 
-                        </ul>
 
-                    </li>
 
-                    <li>Non vedo alcune funzioni nel menu:
 
-                        <ul>
 
-                            <li>Potresti avere restrizioni in base al tuo ruolo.</li>
 
-                        </ul>
 
-                    </li>
 
-                </ul>
 
-            </div>
 
-        </section>
 
-
 
-        <!-- Sezione Supporto e Assistenza -->
 
-        <section>
 
-            <h2 class="clickable">Supporto e Assistenza</h2>
 
-            <div class="istruzioni" style="display:none;">
 
-                <p>Se riscontri problemi tecnici o hai domande sul sistema, puoi:</p>
 
-                <ul>
 
-                    <li>Consultare questa guida.</li>
 
-                    <li>Contattare l’amministratore del sistema.</li>
 
-                    <li>Verificare eventuali aggiornamenti sulla piattaforma.</li>
 
-                </ul>
 
-                <p>Email Assistenza: <a href="mailto:supporto@sinfi.gov.it">supporto@sinfi.gov.it</a></p>
 
-                <p>Numero di Supporto: 800-123-456</p>
 
-            </div>
 
-        </section>
 
-    </div>
 
-
 
-    <button class="back-to-top" onclick="scrollToTop()">Torna su</button>
 
-
 
-    <script>
 
-        // Funzione per la ricerca
 
-        function search() {
 
-            var searchTerm = document.getElementById('searchInput').value.toLowerCase();
 
-            var sections = document.querySelectorAll('section');
 
-
 
-            sections.forEach(function(section) {
 
-                var title = section.querySelector('h2').textContent.toLowerCase();
 
-                var content = section.querySelector('.istruzioni').textContent.toLowerCase();
 
-
 
-                if (title.includes(searchTerm) || content.includes(searchTerm)) {
 
-                    section.querySelector('.istruzioni').style.display = 'block';
 
-                    section.querySelector('h2').classList.add('active');
 
-                } else {
 
-                    section.querySelector('.istruzioni').style.display = 'none';
 
-                    section.querySelector('h2').classList.remove('active');
 
-                }
 
-            });
 
-        }
 
-
 
-        // Gestione del click sui titoli delle sezioni
 
-        document.querySelectorAll('.clickable').forEach(function(title) {
 
-            title.addEventListener('click', function() {
 
-                var istruzioni = this.nextElementSibling;
 
-                if (istruzioni.style.display === 'none') {
 
-                    istruzioni.style.display = 'block';
 
-                    this.classList.add('active'); // Aggiunge la classe per ridurre la dimensione del carattere
 
-                } else {
 
-                    istruzioni.style.display = 'none';
 
-                    this.classList.remove('active'); // Rimuove la classe per ripristinare la dimensione originale
 
-                }
 
-            });
 
-        });
 
-
 
-        // Mostra/Nascondi il pulsante "Torna su"
 
-        window.onscroll = function() {
 
-            var backToTopButton = document.querySelector('.back-to-top');
 
-            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
 
-                backToTopButton.style.display = 'block';
 
-            } else {
 
-                backToTopButton.style.display = 'none';
 
-            }
 
-        };
 
-
 
-        // Funzione per tornare in cima alla pagina
 
-        function scrollToTop() {
 
-            document.body.scrollTop = 0;
 
-            document.documentElement.scrollTop = 0;
 
-        }
 
-    </script>
 
-    <!-- Includi lo script di ElevenLabs -->
 
-    <script src="https://elevenlabs.io/convai-widget/index.js" async type="text/javascript"></script>
 
-    <!-- Widget ElevenLabs ConvAI -->
 
-    <div id="ai-widget-container" style="position: fixed; bottom: 20px; right: 20px;">
 
-        <elevenlabs-convai agent-id="2MJWbkNuIGTHNI71hKfL"></elevenlabs-convai>
 
-    </div>
 
-    <footer id="footer" class="it-footer bg-black" role="contentinfo">
 
-        <div class="it-footer-main py-3">
 
-            <div class="container">
 
-                <section class="py-4">
 
-                    <div class="row">
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">Esplora SINFI</h2>
 
-                                <ul id="footer-menu-col-1" class="link-list">
 
-                                    <li id="menu-item-sinfi-1" class="menu-item">
 
-                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/che-cose/">Cos'è SINFI</a>
 
-                                    </li>
 
-                                    <li id="menu-item-sinfi-2" class="menu-item">
 
-                                        <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>
 
-                                    </li>
 
-                                    <li id="menu-item-sinfi-3" class="menu-item">
 
-                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/riferimenti-normativi/">Normative di Riferimento</a>
 
-                                    </li>
 
-                                    <li id="menu-item-sinfi-4" class="menu-item">
 
-                                        <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>
 
-                                    </li>
 
-                                </ul>
 
-                            </div>
 
-                        </div>
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">Aiuto e Supporto</h2>
 
-                                <ul id="footer-menu-col-2" class="link-list">
 
-                                    <li id="menu-item-aiuto-1" class="menu-item">
 
-                                        <a class="list-item" href="./instructions.html">Istruzioni</a>
 
-                                    </li>
 
-                                    <li id="menu-item-aiuto-2" class="menu-item">
 
-                                        <a class="list-item" href="./faq.html">FAQ - Domande Frequenti</a>
 
-                                    </li>
 
-                                    <li id="menu-item-aiuto-3" class="menu-item">
 
-                                        <a class="list-item" href="./techsup.html">Segnalazioni e Supporto Tecnico</a>
 
-                                    </li>
 
-                                </ul>
 
-                            </div>
 
-                        </div>
 
-                        <!-- Colonna "Community" con i loghi dei social -->
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">Community</h2>
 
-                                <div class="social-icons">
 
-                                    <a href="https://www.linkedin.com" target="_blank" class="me-3"><i class="fab fa-linkedin"></i></a>
 
-                                    <a href="https://www.youtube.com" target="_blank" class="me-3"><i class="fab fa-youtube"></i></a>
 
-                                    <a href="https://www.facebook.com" target="_blank" class="me-3"><i class="fab fa-facebook"></i></a>
 
-                                    <a href="https://www.instagram.com" target="_blank" class="me-3"><i class="fab fa-instagram"></i></a>
 
-                                </div>
 
-                            </div>
 
-                        </div>
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">SINFI</h2>
 
-                                <ul id="footer-menu-col-4" class="link-list">
 
-                                    <li id="menu-item-377" class="menu-item">
 
-                                        <a target="_blank" href="https://sinfi.it/portal/">Vai al sito ufficiale SINFI</a>
 
-                                    </li>
 
-                                </ul>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
-                </section>
 
-            </div>
 
-        </div>
 
-        <div class="it-footer-small-prints clearfix">
 
-            <div class="container">
 
-                <nav class="menu-footer-menu-ita-container" aria-label="link utili">
 
-                    <ul id="menu-footer-menu-ita" class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">
 
-                        <li id="menu-item-413" class="menu-item list-inline-item"><a href="/media-policy/">Media Policy</a></li>
 
-                        <li id="menu-item-453" class="menu-item list-inline-item"><a href="/note-legali/">Privacy Policy &amp; Note Legali</a></li>
 
-                        <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>
 
-                        <li id="menu-item-411" class="menu-item list-inline-item"><a href="/mappa-del-sito/">Mappa del sito</a></li>
 
-                        <li id="menu-item-1277" class="menu-item list-inline-item"><a href="/open-data-spid/">Open Data SPID</a></li>
 
-                    </ul>
 
-                </nav>
 
-            </div>
 
-        </div>
 
-    </footer>
 
-</body>
 
-</html>
 
+<!DOCTYPE html>

+<html lang="it">

+<head>

+    <meta charset="UTF-8">

+    <meta name="viewport" content="width=device-width, initial-scale=1.0">

+    <title>Istruzioni</title>

+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.13.4/dist/css/bootstrap-italia.min.css" rel="stylesheet">

+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

+    <style>

+        /* Stile per la riga blu scuro */

+        .top-bar {

+            background-color: #004080; /* Blu scuro */

+            color: white;

+            padding: 0.5rem 0;

+            text-align: left;

+            font-size: 0.9rem;

+        }

+

+        /* Stile per l'header */

+        .header {

+            background-color: #0066CC; /* Blu chiaro */

+            color: white;

+            padding: 1rem 0;

+        }

+

+        /* Stile per il logo "PW" dentro un cerchio */

+        .logo { 

+            font-family: 'Georgia', serif; 

+            font-size: 1.5rem; 

+            width: 50px; height: 50px; 

+            background-color: white; 

+            color: #0066CC; 

+            border-radius: 50%; 

+            margin-right: 10px; 

+            display: inline-flex; 

+            align-items: center; 

+            justify-content: center; 

+        }

+

+        /* Stile per il titolo "Segnalazioni e Supporto Tecnico" */

+        .header-title {

+            color: white;

+            font-size: 1.5rem;  /* Ridotto per il titolo principale */

+            font-weight: bold;

+            display: inline-block;

+            vertical-align: middle;

+        }

+

+        /* Stile per la barra di ricerca */

+        .search-bar {

+            margin-top: 20px;

+            margin-bottom: 30px;  /* Aggiunto margine inferiore per spazio tra la barra di ricerca e il titolo */

+            display: flex;

+            justify-content: space-between;

+            max-width: 600px;

+            margin-left: auto;

+            margin-right: auto;

+        }

+

+        .search-bar input {

+            width: 80%;

+            padding: 0.5rem;

+            border: 1px solid #ccc;

+            border-radius: 4px;

+        }

+

+        .search-bar button {

+            padding: 0.5rem 1rem;

+            background-color: #0066CC;

+            color: white;

+            border: none;

+            border-radius: 4px;

+            cursor: pointer;

+        }

+

+        /* Stile per il contenuto principale */

+        .main-content {

+            background-color: #f8f9fa;

+            padding: 2rem 0;

+        }

+

+        /* Aggiungi margine ai lati del contenitore principale */

+        .container {

+            padding-left: 2rem;

+            padding-right: 2rem;

+        }

+

+        /* Footer */

+        .footer {

+            background-color: #0066CC;

+            color: white;

+            padding: 1rem 0;

+            text-align: center;

+        }

+

+        /* Stile per la sezione delle istruzioni */

+        .istruzioni {

+            padding: 1rem;

+            background-color: #ffffff;

+            border-radius: 4px;

+            margin-bottom: 2rem;

+            font-size: 0.8rem; /* Carattere più piccolo per le istruzioni */

+            line-height: 1.4; /* Migliora la leggibilità */

+        }

+

+        .clickable {

+            cursor: pointer;

+            color: #0066CC;

+            text-decoration: underline;

+            font-size: 1rem; /* Dimensione ridotta per i titoli */

+            margin-bottom: 0.5rem; /* Riduci lo spazio sotto il titolo */

+        }

+

+        .clickable.active {

+            font-size: 0.9rem; /* Dimensione ridotta quando il titolo è cliccato */

+        }

+

+        /* Ridurre la dimensione dei titoli delle sezioni */

+        h1 {

+            font-size: 1.25rem;  /* Titolo principale della guida */

+        }

+

+        h2 {

+            font-size: 1rem;  /* Titoli delle sezioni più piccoli */

+        }

+

+        h3 {

+            font-size: 0.9rem;  /* Sottotitoli più piccoli */

+            margin-top: 0.5rem; /* Riduci lo spazio sopra i sottotitoli */

+        }

+

+        /* Stile per i paragrafi e le liste dentro le istruzioni */

+        .istruzioni p, .istruzioni ol, .istruzioni ul {

+            font-size: 0.8rem; /* Riduci ulteriormente la dimensione del testo */

+            margin-bottom: 0.5rem; /* Riduci lo spazio tra i paragrafi e le liste */

+        }

+

+        /* Stile per gli elementi delle liste */

+        .istruzioni li {

+            font-size: 0.8rem; /* Riduci ulteriormente la dimensione del testo */

+        }

+

+        /* Pulsante torna su */

+        .back-to-top {

+            position: fixed;

+            bottom: 20px;

+            right: 20px;

+            background-color: #0066CC;

+            color: white;

+            padding: 0.7rem 1rem;

+            border: none;

+            border-radius: 50%;

+            cursor: pointer;

+            display: none;

+        }

+    </style>

+     <style>

+        /* Stile per i link con sottolineatura solo al passaggio del mouse */

+        .link-underline-hover {

+            text-decoration: none; /* Rimuove la sottolineatura di base */

+        }

+

+        .link-underline-hover:hover {

+            text-decoration: underline; /* Aggiunge la sottolineatura solo al passaggio del mouse */

+        }

+    </style>

+</head>

+<body>

+

+    <!-- Riga blu scuro con scritto "Project Work" allineata a sinistra -->

+    <div class="top-bar">

+        <div class="container">

+            Project Work

+        </div>

+    </div>

+

+<!-- Header -->

+<header class="header">

+    <div class="container">

+        <div class="row align-items-center">

+            <div class="col d-flex">

+                <!-- Logo "PW" dentro un cerchio, ora cliccabile -->

+                <a href="/callback" class="logo-link">

+                    <div class="logo">PW</div>

+                </a>

+                <h1 class="header-title">Istruzioni</h1> <!-- Titolo "Mappa" con la stessa grandezza -->

+            </div>

+            <div class="col-auto d-flex align-items-center">

+                <a href="/admin" class="text-white me-3 link-underline-hover">Gestione Dati Immobiliari</a>

+                <a href="/tfo" class="text-white me-3 link-underline-hover">TFO</a>

+                <a href="/buildings" class="text-white me-3 link-underline-hover">Registrazione degli Edifici</a>

+                <a href="/mappa_login" class="btn btn-light">Logout</a>

+            </div>

+        </div>

+    </div>

+</header>

+

+    <!-- Barra di ricerca -->

+    <div class="search-bar">

+        <input type="text" id="searchInput" placeholder="Cerca per parola chiave">

+        <button onclick="search()">Cerca</button>

+    </div>

+

+    <div class="container">

+        <h1>Guida all'Uso del Sistema SINFI</h1>

+        <p>Questa guida ti aiuterà a comprendere il funzionamento del sistema e a risolvere eventuali dubbi.</p>

+

+        <!-- Sezione 1: Accesso al Sistema -->

+        <section>

+            <h2 class="clickable">1. Accesso al Sistema</h2>

+            <div class="istruzioni" style="display:none;">

+                <p>Per utilizzare il sistema è necessario autenticarsi con le proprie credenziali.</p>

+                <h3>Login</h3>

+                <ol>

+                    <li>Inserisci il tuo Codice Fiscale e la Password nei rispettivi campi.</li>

+                    <li>Clicca su "Accedi".</li>

+                    <li>Se le credenziali sono corrette, verrai reindirizzato alla Dashboard.</li>

+                </ol>

+                <h3>In caso di errore:</h3>

+                <ul>

+                    <li>Verifica che il Codice Fiscale e la Password siano corretti.</li>

+                    <li>Se hai dimenticato la password, contatta l’amministratore per il recupero.</li>

+                    <li>Se il problema persiste, controlla la connessione o riprova più tardi.</li>

+                </ul>

+            </div>

+        </section>

+

+        <!-- Sezione 2: Registrazione di un Edificio Predisposto alla Banda Ultralarga -->

+        <section>

+            <h2 class="clickable">2. Registrazione di un Edificio Predisposto alla Banda Ultralarga</h2>

+            <div class="istruzioni" style="display:none;">

+                <h3>A cosa serve?</h3>

+                <p>Questa funzionalità permette di registrare edifici che sono stati predisposti per la banda ultralarga.</p>

+                <h3>Come registrare un nuovo edificio</h3>

+                <ol>

+                    <li>Accedi alla sezione "Edifici Infrastrutturati" dal menu principale.</li>

+                    <li>Clicca su "Aggiungi Nuovo Edificio".</li>

+                    <li>Compila il modulo con i seguenti dati:

+                        <ul>

+                            <li>Indirizzo completo dell’edificio.</li>

+                            <li>Coordinate geografiche (centroide e poligono) → Puoi selezionare la posizione dalla mappa.</li>

+                            <li>Codice catastale → Inserisci il codice univoco dell’edificio.</li>

+                            <li>Tipologia dell’edificio → Seleziona tra residenziale, commerciale, industriale, ecc.</li>

+                            <li>Data di predisposizione → Indica quando l’edificio è stato predisposto per la banda ultralarga.</li>

+                        </ul>

+                    </li>

+                    <li>Dopo aver compilato tutti i campi, clicca su "Salva".</li>

+                </ol>

+                <h3>Problemi comuni e soluzioni</h3>

+                <ul>

+                    <li>Non trovo l’edificio sulla mappa dopo la registrazione:

+                        <ul>

+                            <li>Controlla che le coordinate inserite siano corrette.</li>

+                            <li>Aggiorna la pagina per ricaricare i dati.</li>

+                        </ul>

+                    </li>

+                    <li>Errore durante il salvataggio dell’edificio:

+                        <ul>

+                            <li>Assicurati di aver compilato tutti i campi obbligatori.</li>

+                            <li>Controlla la connessione internet.</li>

+                            <li>Se il problema persiste, contatta l’assistenza.</li>

+                        </ul>

+                    </li>

+                </ul>

+            </div>

+        </section>

+

+        <!-- Sezione 3: Registrazione di una Terminazione Ottica (TFO) -->

+        <section>

+            <h2 class="clickable">3. Registrazione di una Terminazione Ottica (TFO)</h2>

+            <div class="istruzioni" style="display:none;">

+                <h3>A cosa serve?</h3>

+                <p>Questa funzionalità permette di registrare le terminazioni ottiche (punti di connessione della fibra ottica) all’interno di un edificio.</p>

+                <h3>Come registrare una nuova TFO</h3>

+                <ol>

+                    <li>Accedi alla sezione "Terminazioni Ottiche (TFO)".</li>

+                    <li>Clicca su "Aggiungi Nuova TFO".</li>

+                    <li>Inserisci i dati richiesti:

+                        <ul>

+                            <li>Codice catastale dell’edificio → Deve corrispondere a un edificio già registrato.</li>

+                            <li>Identificativo Operatore → Indica il proprietario della rete.</li>

+                            <li>Codice univoco TFO → Numero identificativo della terminazione.</li>

+                            <li>Piano, Scala, Interno → Specifica l’ubicazione esatta della TFO nell’edificio.</li>

+                            <li>Posizione precisa → Seleziona sulla mappa la posizione della terminazione ottica.</li>

+                        </ul>

+                    </li>

+                    <li>Clicca su "Salva" per completare la registrazione.</li>

+                </ol>

+                <h3>Problemi comuni e soluzioni</h3>

+                <ul>

+                    <li>Non riesco a trovare il codice catastale dell’edificio:

+                        <ul>

+                            <li>Verifica che l’edificio sia stato registrato nella sezione "Edifici Infrastrutturati".</li>

+                            <li>Contatta l’amministratore per verificare i dati catastali.</li>

+                        </ul>

+                    </li>

+                    <li>Errore durante il salvataggio della TFO:

+                        <ul>

+                            <li>Controlla che tutti i campi siano compilati correttamente.</li>

+                            <li>Se l’errore persiste, prova a ricaricare la pagina.</li>

+                        </ul>

+                    </li>

+                </ul>

+            </div>

+        </section>

+

+        <!-- Sezione 4: Mappa Interattiva degli Edifici -->

+        <section>

+            <h2 class="clickable">4. Mappa Interattiva degli Edifici</h2>

+            <div class="istruzioni" style="display:none;">

+                <p>La mappa visualizza gli edifici e le infrastrutture registrate.</p>

+                <h3>Funzionalità della mappa</h3>

+                <ul>

+                    <li>Selezione di un edificio: Clicca su un edificio per visualizzarne i dettagli.</li>

+                    <li>Filtri di visualizzazione: Puoi filtrare gli edifici in base allo stato di infrastrutturazione.</li>

+                    <li>Colori della mappa:

+                        <ul>

+                            <li>Rosso → Edificio non predisposto alla banda ultralarga.</li>

+                            <li>Giallo → Edificio predisposto.</li>

+                        </ul>

+                    </li>

+                </ul>

+                <h3>Problemi comuni e soluzioni</h3>

+                <ul>

+                    <li>Non vedo gli edifici sulla mappa:

+                        <ul>

+                            <li>Assicurati di avere una connessione internet attiva.</li>

+                            <li>Verifica che la registrazione degli edifici sia stata completata correttamente.</li>

+                            <li>Ricarica la pagina per aggiornare i dati.</li>

+                        </ul>

+                    </li>

+                </ul>

+            </div>

+        </section>

+

+        <!-- Sezione 5: Gestione Utenti e Accesso -->

+        <section>

+            <h2 class="clickable">5. Gestione Utenti e Accesso</h2>

+            <div class="istruzioni" style="display:none;">

+                <h3>Ruoli Utente</h3>

+                <ul>

+                    <li>Operatore → Può registrare e modificare solo gli edifici e le TFO di sua competenza.</li>

+                    <li>Amministratore → Può visualizzare e gestire tutte le pratiche.</li>

+                </ul>

+                <h3>Accesso e Autenticazione</h3>

+                <ul>

+                    <li>Il sistema utilizza un login sicuro con autenticazione tramite Keycloak.</li>

+                    <li>Gli utenti vengono registrati direttamente nel database e non possono creare account autonomamente.</li>

+                    <li>Se hai bisogno di un accesso, contatta l’amministratore.</li>

+                </ul>

+                <h3>Problemi comuni e soluzioni</h3>

+                <ul>

+                    <li>Non riesco ad accedere:

+                        <ul>

+                            <li>Verifica che il Codice Fiscale e la Password siano corretti.</li>

+                            <li>Contatta l’amministratore per il recupero della password.</li>

+                        </ul>

+                    </li>

+                    <li>Non vedo alcune funzioni nel menu:

+                        <ul>

+                            <li>Potresti avere restrizioni in base al tuo ruolo.</li>

+                        </ul>

+                    </li>

+                </ul>

+            </div>

+        </section>

+

+        <!-- Sezione Supporto e Assistenza -->

+        <section>

+            <h2 class="clickable">Supporto e Assistenza</h2>

+            <div class="istruzioni" style="display:none;">

+                <p>Se riscontri problemi tecnici o hai domande sul sistema, puoi:</p>

+                <ul>

+                    <li>Consultare questa guida.</li>

+                    <li>Contattare l’amministratore del sistema.</li>

+                    <li>Verificare eventuali aggiornamenti sulla piattaforma.</li>

+                </ul>

+                <p>Email Assistenza: <a href="mailto:supporto@sinfi.gov.it">supporto@sinfi.gov.it</a></p>

+                <p>Numero di Supporto: 800-123-456</p>

+            </div>

+        </section>

+    </div>

+

+    <button class="back-to-top" onclick="scrollToTop()">Torna su</button>

+

+    <script>

+        // Eseguiamo alcune personalizzazioni per migliorare l'interattività

+        

+        // Funzione per la ricerca

+        function search() {

+            var searchTerm = document.getElementById('searchInput').value.toLowerCase();

+            var sections = document.querySelectorAll('section');

+

+            sections.forEach(function(section) {

+                var title = section.querySelector('h2').textContent.toLowerCase();

+                var content = section.querySelector('.istruzioni').textContent.toLowerCase();

+

+                if (title.includes(searchTerm) || content.includes(searchTerm)) {

+                    section.querySelector('.istruzioni').style.display = 'block';

+                    section.querySelector('h2').classList.add('active');

+                } else {

+                    section.querySelector('.istruzioni').style.display = 'none';

+                    section.querySelector('h2').classList.remove('active');

+                }

+            });

+        }

+

+        // Gestione del click sui titoli delle sezioni

+        document.querySelectorAll('.clickable').forEach(function(title) {

+            title.addEventListener('click', function() {

+                var istruzioni = this.nextElementSibling;

+                if (istruzioni.style.display === 'none') {

+                    istruzioni.style.display = 'block';

+                    this.classList.add('active'); // Aggiunge la classe per ridurre la dimensione del carattere

+                } else {

+                    istruzioni.style.display = 'none';

+                    this.classList.remove('active'); // Rimuove la classe per ripristinare la dimensione originale

+                }

+            });

+        });

+

+        // Mostra/Nascondi il pulsante "Torna su"

+        window.onscroll = function() {

+            var backToTopButton = document.querySelector('.back-to-top');

+            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {

+                backToTopButton.style.display = 'block';

+            } else {

+                backToTopButton.style.display = 'none';

+            }

+        };

+

+        // Funzione per tornare in cima alla pagina

+        function scrollToTop() {

+            document.body.scrollTop = 0;

+            document.documentElement.scrollTop = 0;

+        }

+

+        

+    </script>

+     <!-- Widget ElevenLabs ConvAI -->

+     <elevenlabs-convai agent-id="GlBWa9xJ6GdD7bAve6Yq"></elevenlabs-convai>

+     <script src="https://elevenlabs.io/convai-widget/index.js" async type="text/javascript"></script>

+    </div>

+    <script>

+        document.addEventListener('DOMContentLoaded', function() {

+            // Ottieni l'URL corrente

+            const urlParams = new URLSearchParams(window.location.search);

+            // Estrai il token dal parametro di query "token"

+            const ruolo = urlParams.get('ruolo');

+            const codice_fiscale = urlParams.get('codice_fiscale');

+            // Salva il token in localStorage

+            if (ruolo && codice_fiscale) {

+                localStorage.setItem('ruolo', ruolo);

+                localStorage.setItem('codice_fiscale', codice_fiscale);

+                // Rimuovi il token dall'URL per sicurezza (opzionale)

+                window.history.replaceState({}, document.title, window.location.pathname);

+                //window.location.href = window.location.pathname;

+                //Puoi anche reindirizzare ad una pagina pulita.

+                //window.location.href = '/altra-pagina';

+            }

+            

+        });

+    </script>

+    <footer id="footer" class="it-footer bg-black" role="contentinfo">

+        <div class="it-footer-main py-3">

+            <div class="container">

+                <section class="py-4">

+                    <div class="row">

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">Esplora SINFI</h2>

+                                <ul id="footer-menu-col-1" class="link-list">

+                                    <li id="menu-item-sinfi-1" class="menu-item">

+                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/che-cose/">Cos'è SINFI</a>

+                                    </li>

+                                    <li id="menu-item-sinfi-2" class="menu-item">

+                                        <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>

+                                    </li>

+                                    <li id="menu-item-sinfi-3" class="menu-item">

+                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/riferimenti-normativi/">Normative di Riferimento</a>

+                                    </li>

+                                    <li id="menu-item-sinfi-4" class="menu-item">

+                                        <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>

+                                    </li>

+                                </ul>

+                            </div>

+                        </div>

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">Aiuto e Supporto</h2>

+                                <ul id="footer-menu-col-2" class="link-list">

+                                    <li id="menu-item-aiuto-1" class="menu-item">

+                                        <a class="list-item" href="/instructions">Istruzioni</a>

+                                    </li>

+                                    <li id="menu-item-aiuto-2" class="menu-item">

+                                        <a class="list-item" href="/faq">FAQ - Domande Frequenti</a>

+                                    </li>

+                                    <li id="menu-item-aiuto-3" class="menu-item">

+                                        <a class="list-item" href="/techsup">Segnalazioni e Supporto Tecnico</a>

+                                    </li>

+                                </ul>

+                            </div>

+                        </div>

+                        <!-- Colonna "Community" con i loghi dei social -->

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">Community</h2>

+                                <div class="social-icons">

+                                    <a href="https://www.linkedin.com" target="_blank" class="me-3"><i class="fab fa-linkedin"></i></a>

+                                    <a href="https://www.youtube.com" target="_blank" class="me-3"><i class="fab fa-youtube"></i></a>

+                                    <a href="https://www.facebook.com" target="_blank" class="me-3"><i class="fab fa-facebook"></i></a>

+                                    <a href="https://www.instagram.com" target="_blank" class="me-3"><i class="fab fa-instagram"></i></a>

+                                </div>

+                            </div>

+                        </div>

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">SINFI</h2>

+                                <ul id="footer-menu-col-4" class="link-list">

+                                    <li id="menu-item-377" class="menu-item">

+                                        <a target="_blank" href="https://sinfi.it/portal/">Vai al sito ufficiale SINFI</a>

+                                    </li>

+                                </ul>

+                            </div>

+                        </div>

+                    </div>

+                </section>

+            </div>

+        </div>

+        <div class="it-footer-small-prints clearfix">

+            <div class="container">

+                <nav class="menu-footer-menu-ita-container" aria-label="link utili">

+                    <ul id="menu-footer-menu-ita" class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">

+                        <li id="menu-item-413" class="menu-item list-inline-item"><a href="/media-policy/">Media Policy</a></li>

+                        <li id="menu-item-453" class="menu-item list-inline-item"><a href="/note-legali/">Privacy Policy &amp; Note Legali</a></li>

+                        <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>

+                        <li id="menu-item-411" class="menu-item list-inline-item"><a href="/mappa-del-sito/">Mappa del sito</a></li>

+                        <li id="menu-item-1277" class="menu-item list-inline-item"><a href="/open-data-spid/">Open Data SPID</a></li>

+                    </ul>

+                </nav>

+            </div>

+        </div>

+    </footer>

+</body>

+</html>

+ 256 - 262
Backend/templates/login.html
Файл харах 

@@ -1,263 +1,257 @@
 
-<!DOCTYPE html>
 
-<html lang="it">
 
-<head>
 
-    <title>Login</title>
 
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.8.1/dist/css/bootstrap-italia.min.css" rel="stylesheet">
 
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
 
-    <style>
 
-        /* Stile per la riga blu scuro */
 
-        .top-bar {
 
-            background-color: #004080; /* Blu scuro */
 
-            color: white;
 
-            padding: 0.5rem 0;
 
-            text-align: left; /* Allineamento a sinistra */
 
-            font-size: 0.9rem;
 
-        }
 
-
 
-        /* Stile per l'header */
 
-        .header {
 
-            background-color: #0066CC; /* Blu chiaro */
 
-            color: white;
 
-            padding: 1rem 0;
 
-        }
 
-
 
-        /* Stile per il logo "PW" dentro un cerchio */
 
-        .logo { 
-            font-family: 'Georgia', serif; 
-            font-size: 1.5rem; 
-            width: 50px; height: 50px; 
-            background-color: white; 
-            color: #0066CC; 
-            border-radius: 50%; 
-            margin-right: 10px; 
-            display: inline-flex; 
-            align-items: center; 
-            justify-content: center; 
-        }
 
-
 
-        /* Stile per il titolo "Mappa" */
 
-        .header-title {
 
-            color: white;
 
-            font-size: 1.5rem; /* Stessa grandezza di "Segnalazioni e Supporto Tecnico" */
 
-            font-weight: bold;
 
-            display: inline-block;
 
-            vertical-align: middle;
 
-        }
 
-
 
-        /* Stile per i link con sottolineatura solo al passaggio del mouse */
 
-        .link-underline-hover {
 
-            text-decoration: none; /* Rimuove la sottolineatura di base */
 
-        }
 
-        .link-underline-hover:hover {
 
-            text-decoration: underline; /* Aggiunge la sottolineatura solo al passaggio del mouse */
 
-        }
 
-
 
-        /* Sfondo della pagina */
 
-        body {
 
-            background-color: #0066CC; /* Stesso colore dell'header */
 
-            margin: 0;
 
-            padding: 0;
 
-        }
 
-
 
-        /* Riquadro bianco per il login */
 
-        .login-box {
 
-            background-color: white;
 
-            border-radius: 10px;
 
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 
-            padding: 2rem;
 
-            max-width: 400px;
 
-            margin: 2rem auto;
 
-        }
 
-
 
-        /* Stile per il titolo del login */
 
-        .login-title {
 
-            font-size: 1.5rem;
 
-            font-weight: bold;
 
-            text-align: center;
 
-            margin-bottom: 1.5rem;
 
-        }
 
-
 
-        /* Stile per i campi del form */
 
-        .form-control {
 
-            margin-bottom: 1rem;
 
-        }
 
-
 
-        /* Stile per il pulsante di accesso */
 
-        .btn-primary {
 
-            width: 100%;
 
-            padding: 0.75rem;
 
-            font-size: 1rem;
 
-        }
 
-
 
-        /* Stile per le icone dei social nel footer */
 
-        .social-icons a i {
 
-            color: white; /* Colore bianco per le icone */
 
-        }
 
-    </style>
 
-</head>
 
-<body>
 
-    <!-- Riga blu scuro con scritto "Project Work" allineata a sinistra -->
 
-    <div class="top-bar">
 
-        <div class="container">
 
-            Project Work
 
-        </div>
 
-    </div>    
-
 
-    <!-- Header -->
 
-    <header class="header">
 
-        <div class="container">
 
-            <div class="row align-items-center">
 
-                <div class="col">
 
-                    <!-- Logo "PW" dentro un cerchio -->
 
-                    <div class="logo">PW</div>
 
-                    <h1 class="header-title">Accedi</h1> <!-- Titolo "registrazione degli Edifici" con la stessa grandezza -->
 
-                </div>
 
-             
-                   
-                </div>
 
-            </div>
 
-        </div>
 
-    </header>
 
-
 
-    <!-- Riquadro bianco per il login -->
 
-    <div class="login-box">
 
-        <h2 class="login-title">Login</h2>
 
-        <form id="login-form">
 
-            <div class="mb-3">
 
-                <label for="username" class="form-label">Username:</label>
 
-                <input type="text" class="form-control" id="username" name="username" required>
 
-            </div>
 
-            <div class="mb-3">
 
-                <label for="password" class="form-label">Password:</label>
 
-                <input type="password" class="form-control" id="password" name="password" required>
 
-            </div>
 
-            <br>
 
-            <br>
 
-            <!-- <div class="mb-3">
 
-                <label for="role" class="form-label">Ruolo:</label>
 
-                <select class="form-select" id="role" name="role">
 
-                    <option value="admin">Amministratore</option>
 
-                    <option value="operator">Operatore</option>
 
-                </select>
 
-            </div> -->
 
-            <div class="d-grid">
 
-                <button type="submit" class="btn btn-primary">Accedi</button>
 
-            </div>
 
-        </form>
 
-        <div id="error-message" class="mt-3 text-danger text-center"></div>
 
-    </div>
 
-
 
-    <!-- Footer -->
 
-    <footer id="footer" class="it-footer bg-black" role="contentinfo">
 
-        <div class="it-footer-main py-3">
 
-            <div class="container">
 
-                <section class="py-4">
 
-                    <div class="row">
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">Esplora SINFI</h2>
 
-                                <ul id="footer-menu-col-1" class="link-list">
 
-                                    <li id="menu-item-sinfi-1" class="menu-item">
 
-                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/che-cose/">Cos'è SINFI</a>
 
-                                    </li>
 
-                                    <li id="menu-item-sinfi-2" class="menu-item">
 
-                                        <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>
 
-                                    </li>
 
-                                    <li id="menu-item-sinfi-3" class="menu-item">
 
-                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/riferimenti-normativi/">Normative di Riferimento</a>
 
-                                    </li>
 
-                                    <li id="menu-item-sinfi-4" class="menu-item">
 
-                                        <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>
 
-                                    </li>
 
-                                </ul>
 
-                            </div>
 
-                        </div>
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">Aiuto e Supporto</h2>
 
-                                <ul id="footer-menu-col-2" class="link-list">
 
-                                    <li id="menu-item-aiuto-1" class="menu-item">
 
-                                        <a class="list-item" href="./login.html">Istruzioni</a>
 
-                                    </li>
 
-                                    <li id="menu-item-aiuto-2" class="menu-item">
 
-                                        <a class="list-item" href="./login.html">FAQ - Domande Frequenti</a>
 
-                                    </li>
 
-                                    <li id="menu-item-aiuto-3" class="menu-item">
 
-                                        <a class="list-item" href="./login.html">Segnalazioni e Supporto Tecnico</a>
 
-                                    </li>
 
-                                </ul>
 
-                            </div>
 
-                        </div>
 
-                        <!-- Colonna "Community" con i loghi dei social -->
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">Community</h2>
 
-                                <div class="social-icons">
 
-                                    <a href="https://www.linkedin.com" target="_blank" class="me-3"><i class="fab fa-linkedin"></i></a>
 
-                                    <a href="https://www.youtube.com" target="_blank" class="me-3"><i class="fab fa-youtube"></i></a>
 
-                                    <a href="https://www.facebook.com" target="_blank" class="me-3"><i class="fab fa-facebook"></i></a>
 
-                                    <a href="https://www.instagram.com" target="_blank" class="me-3"><i class="fab fa-instagram"></i></a>
 
-                                </div>
 
-                            </div>
 
-                        </div>
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">SINFI</h2>
 
-                                <ul id="footer-menu-col-4" class="link-list">
 
-                                    <li id="menu-item-377" class="menu-item">
 
-                                        <a target="_blank" href="https://sinfi.it/portal/">Vai al sito ufficiale SINFI</a>
 
-                                    </li>
 
-                                </ul>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
-                </section>
 
-            </div>
 
-        </div>
 
-        <div class="it-footer-small-prints clearfix">
 
-            <div class="container">
 
-                <nav class="menu-footer-menu-ita-container" aria-label="link utili">
 
-                    <ul id="menu-footer-menu-ita" class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">
 
-                        <li id="menu-item-413" class="menu-item list-inline-item"><a href="/media-policy/">Media Policy</a></li>
 
-                        <li id="menu-item-453" class="menu-item list-inline-item"><a href="/note-legali/">Privacy Policy &amp; Note Legali</a></li>
 
-                        <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>
 
-                        <li id="menu-item-411" class="menu-item list-inline-item"><a href="/mappa-del-sito/">Mappa del sito</a></li>
 
-                        <li id="menu-item-1277" class="menu-item list-inline-item"><a href="/open-data-spid/">Open Data SPID</a></li>
 
-                    </ul>
 
-                </nav>
 
-            </div>
 
-        </div>
 
-    </footer>
 
-
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
 
-    <script>
 
-     const form = document.getElementById('login-form');
 
-
 
-    form.addEventListener('submit', function(event) {
 
-    event.preventDefault(); // Impedisce l'invio predefinito del modulo
 
-
 
-    const formData = new FormData(form);
 
-    const formDataObject = {};
 
-    formData.forEach((value, key) => {
 
-        formDataObject[key] = value;
 
-    });
 
-
 
-    fetch('http://localhost:8000/login', {
 
-        method: 'POST',
 
-        headers: {
 
-            'Content-Type': 'application/json'
 
-        },
 
-        body: JSON.stringify(formDataObject)
 
-    })
 
-    .then(response => response.json())
 
-    .then(data => {
 
-        console.log(data); // Gestisci la risposta del server
 
-    })
 
-    .catch(error => {
 
-        console.error('Errore:', error);
 
-    });
 
-});
 
-    </script>
 
-    
-</body>
 
+<!DOCTYPE html>

+<html lang="it">

+<head>

+    <title>Login</title>

+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.8.1/dist/css/bootstrap-italia.min.css" rel="stylesheet">

+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

+    <style>

+        /* Stile per la riga blu scuro */

+        .top-bar {

+            background-color: #004080; /* Blu scuro */

+            color: white;

+            padding: 0.5rem 0;

+            text-align: left; /* Allineamento a sinistra */

+            font-size: 0.9rem;

+        }

+

+        /* Stile per l'header */

+        .header {

+            background-color: #0066CC; /* Blu chiaro */

+            color: white;

+            padding: 1rem 0;

+        }

+

+        /* Stile per il logo "PW" dentro un cerchio */

+        .logo { 

+            font-family: 'Georgia', serif; 

+            font-size: 1.5rem; 

+            width: 50px; height: 50px; 

+            background-color: white; 

+            color: #0066CC; 

+            border-radius: 50%; 

+            margin-right: 10px; 

+            display: inline-flex; 

+            align-items: center; 

+            justify-content: center; 

+        }

+

+        /* Stile per il titolo "Mappa" */

+        .header-title {

+            color: white;

+            font-size: 1.5rem; /* Stessa grandezza di "Segnalazioni e Supporto Tecnico" */

+            font-weight: bold;

+            display: inline-block;

+            vertical-align: middle;

+        }

+

+        /* Stile per i link con sottolineatura solo al passaggio del mouse */

+        .link-underline-hover {

+            text-decoration: none; /* Rimuove la sottolineatura di base */

+        }

+        .link-underline-hover:hover {

+            text-decoration: underline; /* Aggiunge la sottolineatura solo al passaggio del mouse */

+        }

+

+        /* Sfondo della pagina */

+        body {

+            background-color: #0066CC; /* Stesso colore dell'header */

+            margin: 0;

+            padding: 0;

+        }

+

+        /* Riquadro bianco per il login */

+        .login-box {

+            background-color: white;

+            border-radius: 10px;

+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

+            padding: 2rem;

+            max-width: 400px;

+            margin: 2rem auto;

+        }

+

+        /* Stile per il titolo del login */

+        .login-title {

+            font-size: 1.5rem;

+            font-weight: bold;

+            text-align: center;

+            margin-bottom: 1.5rem;

+        }

+

+        /* Stile per i campi del form */

+        .form-control {

+            margin-bottom: 1rem;

+        }

+

+        /* Stile per il pulsante di accesso */

+        .btn-primary {

+            width: 100%;

+            padding: 0.75rem;

+            font-size: 1rem;

+        }

+

+        /* Stile per le icone dei social nel footer */

+        .social-icons a i {

+            color: white; /* Colore bianco per le icone */

+        }

+    </style>

+</head>

+<body>

+    <!-- Riga blu scuro con scritto "Project Work" allineata a sinistra -->

+    <div class="top-bar">

+        <div class="container">

+            Project Work

+        </div>

+    </div>    

+

+    <!-- Header -->

+    <header class="header">

+        <div class="container">

+            <div class="row align-items-center">

+                <div class="col">

+                    <!-- Logo "PW" dentro un cerchio -->

+                    <div class="logo">PW</div>

+                    <h1 class="header-title">Accedi</h1> <!-- Titolo "registrazione degli Edifici" con la stessa grandezza -->

+                </div>

+             

+                   

+                </div>

+            </div>

+        </div>

+    </header>

+

+    <!-- Riquadro bianco per il login -->

+    <div class="login-box">

+        <h2 class="login-title">Login</h2>

+        <form id="login-form" action="/access" method="post">

+            <div class="mb-3">

+                <label for="username" class="form-label">Username:</label>

+                <input type="text" class="form-control" id="username" name="username" required>

+            </div>

+            <div class="mb-3">

+                <label for="password" class="form-label">Password:</label>

+                <input type="password" class="form-control" id="password" name="password" required>

+            </div>

+            <br>

+            <br>

+            <div class="d-grid">

+                <button type="submit" class="btn btn-primary">Accedi</button>

+            </div>

+        </form>

+        <div id="error-message" class="mt-3 text-danger text-center"></div>

+    </div>

+    

+

+    <!-- Footer -->

+    <footer id="footer" class="it-footer bg-black" role="contentinfo">

+        <div class="it-footer-main py-3">

+            <div class="container">

+                <section class="py-4">

+                    <div class="row">

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">Esplora SINFI</h2>

+                                <ul id="footer-menu-col-1" class="link-list">

+                                    <li id="menu-item-sinfi-1" class="menu-item">

+                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/che-cose/">Cos'è SINFI</a>

+                                    </li>

+                                    <li id="menu-item-sinfi-2" class="menu-item">

+                                        <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>

+                                    </li>

+                                    <li id="menu-item-sinfi-3" class="menu-item">

+                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/riferimenti-normativi/">Normative di Riferimento</a>

+                                    </li>

+                                    <li id="menu-item-sinfi-4" class="menu-item">

+                                        <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>

+                                    </li>

+                                </ul>

+                            </div>

+                        </div>

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">Aiuto e Supporto</h2>

+                                <ul id="footer-menu-col-2" class="link-list">

+                                    <li id="menu-item-aiuto-1" class="menu-item">

+                                        <a class="list-item" href="/instructions">Istruzioni</a>

+                                    </li>

+                                    <li id="menu-item-aiuto-2" class="menu-item">

+                                        <a class="list-item" href="/faq">FAQ - Domande Frequenti</a>

+                                    </li>

+                                    <li id="menu-item-aiuto-3" class="menu-item">

+                                        <a class="list-item" href="/techsup">Segnalazioni e Supporto Tecnico</a>

+                                    </li>

+                                </ul>

+                            </div>

+                        </div>

+                        <!-- Colonna "Community" con i loghi dei social -->

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">Community</h2>

+                                <div class="social-icons">

+                                    <a href="https://www.linkedin.com" target="_blank" class="me-3"><i class="fab fa-linkedin"></i></a>

+                                    <a href="https://www.youtube.com" target="_blank" class="me-3"><i class="fab fa-youtube"></i></a>

+                                    <a href="https://www.facebook.com" target="_blank" class="me-3"><i class="fab fa-facebook"></i></a>

+                                    <a href="https://www.instagram.com" target="_blank" class="me-3"><i class="fab fa-instagram"></i></a>

+                                </div>

+                            </div>

+                        </div>

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">SINFI</h2>

+                                <ul id="footer-menu-col-4" class="link-list">

+                                    <li id="menu-item-377" class="menu-item">

+                                        <a target="_blank" href="https://sinfi.it/portal/">Vai al sito ufficiale SINFI</a>

+                                    </li>

+                                </ul>

+                            </div>

+                        </div>

+                    </div>

+                </section>

+            </div>

+        </div>

+        <div class="it-footer-small-prints clearfix">

+            <div class="container">

+                <nav class="menu-footer-menu-ita-container" aria-label="link utili">

+                    <ul id="menu-footer-menu-ita" class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">

+                        <li id="menu-item-413" class="menu-item list-inline-item"><a href="/media-policy/">Media Policy</a></li>

+                        <li id="menu-item-453" class="menu-item list-inline-item"><a href="/note-legali/">Privacy Policy &amp; Note Legali</a></li>

+                        <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>

+                        <li id="menu-item-411" class="menu-item list-inline-item"><a href="/mappa-del-sito/">Mappa del sito</a></li>

+                        <li id="menu-item-1277" class="menu-item list-inline-item"><a href="/open-data-spid/">Open Data SPID</a></li>

+                    </ul>

+                </nav>

+            </div>

+        </div>

+    </footer>

+

+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

+//    <script>

+     //const form = document.getElementById('login-form');

+//

+//    form.addEventListener('submit', function(event) {

+//    event.preventDefault(); // Impedisce l'invio predefinito del modulo

+//

+//    const formData = new FormData(form);

+//    const formDataObject = {};

+//    formData.forEach((value, key) => {

+        //formDataObject[key] = value;

+//    });

+//

+//    fetch('http://localhost:8000/login', {

+        //method: 'POST',

+        //headers: {

+            //'Content-Type': 'application/json'

+        //},

+        //body: JSON.stringify(formDataObject)

+//    })

+//    .then(response => response.json())

+//    .then(data => {

+        //console.log(data); // Gestisci la risposta del server

+//    })

+//    .catch(error => {

+        //console.error('Errore:', error);

+//    });

+//});

+//    </script>

+    

+</body>

 </html>
 
 </html>

+ 372 - 357
Backend/templates/mappa_logout.html
Файл харах 

@@ -1,358 +1,373 @@
 
-<!DOCTYPE html>
 
-<html lang="it">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>Mappa Interattiva con Layer Colorati</title>
 
-    
-    <!-- Fogli di stile -->
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.13.4/dist/css/bootstrap-italia.min.css">
 
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
 
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
 
-    
-    <style>
 
-        .top-bar { background-color: #004080; color: white; padding: 0.5rem 0; }
 
-        .header { background-color: #0066CC; color: white; padding: 1rem 0; }
 
-       /* Stile per il logo "PW" dentro un cerchio */
 
-       .logo { 
-            font-family: 'Georgia', serif; 
-            font-size: 1.5rem; 
-            width: 50px; height: 50px; 
-            background-color: white; 
-            color: #0066CC; 
-            border-radius: 50%; 
-            margin-right: 10px; 
-            display: inline-flex; 
-            align-items: center; 
-            justify-content: center; 
-        }
 
-        .header-title { color: white; font-size: 1.5rem; font-weight: bold; }
 
-        .main-content { background-color: #f8f9fa; padding: 2rem 0; }
 
-        #map { height: 500px; width: 100%; border-radius: 8px; }
 
-        .search-container { margin: 20px 0; }
 
-        .search-box { display: flex; gap: 10px; max-width: 600px; margin: 0 auto; }
 
-        .coordinate-box { background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-top: 20px; }
 
-    </style>
 
-</head>
 
-<body>
 
-    <!-- Header -->
 
-    <div class="top-bar">
 
-        <div class="container">Project Work</div>
 
-    </div>
 
-
 
-     <!-- Header -->
 
-     <header class="header">
 
-        <div class="container">
 
-            <div class="row align-items-center">
 
-                <div class="col d-flex">
 
-                    <!-- Logo "PW" dentro un cerchio, ora cliccabile -->
 
-                    <a href="./mappa_logout.html" class="logo-link">
 
-                        <div class="logo">PW</div>
 
-                    </a>
 
-                    <h1 class="header-title">Mappa</h1>
 
-                </div>
 
-                <div class="col-auto d-flex align-items-center">
 
-                    <a href="./ADMIN.html" class="text-white me-3 link-underline-hover">Gestione Dati Immobiliari</a>
 
-                    <a href="./TFO.html" class="text-white me-3 link-underline-hover">TFO</a>
 
-                    <a href="./buildings.html" class="text-white me-3 link-underline-hover">Registrazione degli Edifici</a>
 
-                    <a href="./mappa_login.html" class="btn btn-light">Logout</a>
 
-                </div>
 
-            </div>
 
-        </div>
 
-    </header>
 
-
 
-    <main class="main-content">
 
-        <div class="container">
 
-            <!-- Barra di ricerca -->
 
-            <div class="search-container">
 
-                <div class="search-box">
 
-                    <input type="text" 
-                           id="address" 
-                           class="form-control" 
-                           placeholder="Inserisci l'indirizzo"
 
-                           style="flex-grow: 1;">
 
-                    <button id="searchBtn" class="btn btn-primary">
 
-                        <i class="fas fa-search"></i> Cerca
 
-                    </button>
 
-                </div>
 
-            </div>
 
-
 
-            <!-- Mappa -->
 
-            <div id="map"></div>
 
-
 
-            <!-- Dati geografici -->
 
-            <div class="coordinate-box">
 
-                <div class="row">
 
-                    <div class="col-md-4 mb-3">
 
-                        <label class="form-label">Latitudine:</label>
 
-                        <input type="number" id="latInput" class="form-control" readonly>
 
-                    </div>
 
-                    <div class="col-md-4 mb-3">
 
-                        <label class="form-label">Longitudine:</label>
 
-                        <input type="number" id="lngInput" class="form-control" readonly>
 
-                    </div>
 
-                    <div class="col-md-4 mb-3">
 
-                        <label class="form-label">Indirizzo:</label>
 
-                        <input type="text" id="addressInput" class="form-control" readonly>
 
-                    </div>
 
-                </div>
 
-            </div>
 
-        </div>
 
-    </main>
 
-
 
-    <!-- Footer -->
 
-    <footer id="footer" class="it-footer bg-black" role="contentinfo">
 
-        <!-- Contenuto footer mantenuto uguale -->
 
-    </footer>
 
-
 
-    <!-- Script -->
 
-     <!-- Includi lo script di ElevenLabs -->
 
-    
-    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
 
-    <script>
 
-        // Inizializzazione Mappa
 
-        const map = L.map('map').setView([41.9028, 12.4964], 13);
 
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
 
-
 
-        // Layer edifici colorati
 
-        const edificiLayer = L.layerGroup().addTo(map);
 
-        let currentMarker = null;
 
-
 
-        // Funzione principale per caricare gli edifici
 
-        async function caricaEdifici() {
 
-            if (map.getZoom() >= 16) {
 
-                const bounds = map.getBounds();
 
-                const bbox = `${bounds.getSouthWest().lat},${bounds.getSouthWest().lng},${bounds.getNorthEast().lat},${bounds.getNorthEast().lng}`;
 
-                
-                const query = `[out:json];
 
-                    (
 
-                        way["building"](${bbox});
 
-                        relation["building"](${bbox});
 
-                    );
 
-                    out geom;
 
-                    out tags;`;
 
-
 
-                try {
 
-                    const response = await fetch(`https://overpass-api.de/api/interpreter?data=${encodeURIComponent(query)}`);
 
-                    const data = await response.json();
 
-
 
-                    edificiLayer.clearLayers();
 
-                    
-                    data.elements.forEach(element => {
 
-                        if (element.type === 'way' && element.geometry) {
 
-                            const latlngs = element.geometry.map(coord => [coord.lat, coord.lon]);
 
-                            var statoEdificio = false;
 
-                            let colorePoligono ;
 
-                            if (statoEdificio) colorePoligono = 'yellow';
 
-                            else colorePoligono = 'green';
 
-                            
-                            // const colori = ['#FF0000', '#00FF00'];
 
-                            const polygon = L.polygon(latlngs, {
 
-                                fillColor: colorePoligono,
 
-                                color: colorePoligono,
 
-                                fillOpacity: 0.5
 
-                            }).addTo(edificiLayer);
 
-
 
-                            polygon.on('click', async function() {
 
-                                var buildingType = element.tags && element.tags.building ? element.tags.building : 'Sconosciuto';
 
-                                try {
 
-                                    await getAddress(latlngs[0][0], latlngs[0][1]);
 
-                                    var popupContent = `
 
-                                        <b>Coordinate:</b> ${latlngs[0][0]}, ${latlngs[0][1]}<br>
 
-                                        <b>Tipo edificio:</b> ${buildingType}<br>
 
-                                        <b>Indirizzo:</b> ${document.getElementById('addressInput').value}<br>
 
-                                        <b>Stato:</b> ${statoEdificio}<br>
 
-                                        <b>Codice Catastale:</b> nessuno
 
-                                    `;
 
-                                    polygon.bindPopup(popupContent).openPopup();
 
-                                } catch (error) {
 
-                                    console.error("Errore nel recupero dell'indirizzo:", error);
 
-                                    var popupContent = `
 
-                                        <b>Coordinate:</b> ${latlngs[0][0]}, ${latlngs[0][1]}<br>
 
-                                        <b>Tipo edificio:</b> ${buildingType}<br>
 
-                                        <b>Indirizzo:</b> Indirizzo non disponibile<br>
 
-                                        <b>Stato:</b> ${statoEdificio}<br>
 
-                                        <b>Codice Catastale:</b> nessuno
 
-                                    `;
 
-                                    polygon.bindPopup(popupContent).openPopup();
 
-                                }
 
-                            });
 
-                        }
 
-                    });
 
-                } catch (error) {
 
-                    console.error("Errore nel caricamento edifici:", error);
 
-                }
 
-            } else {
 
-                edificiLayer.clearLayers();
 
-            }
 
-        }
 
-        async function getAddress(lat, lng) {
 
-            console.log(typeof(lat));
 
-            console.log(typeof(lng));
 
-
 
-            try {
 
-                const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`);
 
-                const data = await response.json();
 
-
 
-                if (data.address) {
 
-                    document.getElementById('addressInput').value = data.display_name;
 
-                } else {
 
-                    document.getElementById('addressInput').value = "Indirizzo non trovato";
 
-                }
 
-            } catch (error) {
 
-                console.error("Errore nel geocoding inverso:", error);
 
-                document.getElementById('addressInput').value = "Errore nel geocoding inverso";
 
-            }
 
-        }
 
-
 
-        // Funzioni di gestione posizione
 
-        async function updatePosition(lat, lng) {
 
-            try {
 
-                const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`);
 
-                const data = await response.json();
 
-                
-                document.getElementById('latInput').value = lat;
 
-                document.getElementById('lngInput').value = lng;
 
-                document.getElementById('addressInput').value = data.display_name || "Indirizzo non disponibile";
 
-                
-                if (currentMarker) map.removeLayer(currentMarker);
 
-                currentMarker = L.marker([lat, lng]).addTo(map);
 
-                
-            } catch (error) {
 
-                console.error("Errore di geocoding inverso:", error);
 
-            }
 
-        }
 
-
 
-        // Ricerca indirizzo
 
-        async function searchAddress() {
 
-            const address = document.getElementById('address').value;
 
-            if (!address) return;
 
-
 
-            try {
 
-                const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(address)}`);
 
-                const data = await response.json();
 
-                
-                if (data.length === 0) {
 
-                    alert("Indirizzo non trovato");
 
-                    return;
 
-                }
 
-
 
-                const { lat, lon: lng } = data[0];
 
-                map.setView([lat, lng], 18);
 
-                updatePosition(lat, lng);
 
-                
-            } catch (error) {
 
-                console.error("Errore di ricerca:", error);
 
-            }
 
-        }
 
-
 
-        // Event listeners
 
-        document.getElementById('searchBtn').addEventListener('click', searchAddress);
 
-        document.getElementById('address').addEventListener('keypress', (e) => {
 
-            if (e.key === 'Enter') searchAddress();
 
-        });
 
-
 
-        map.on('click', (e) => {
 
-            const { lat, lng } = e.latlng;
 
-            updatePosition(lat, lng);
 
-        });
 
-
 
-        map.on('moveend', caricaEdifici);
 
-        map.on('zoomend', caricaEdifici);
 
-        caricaEdifici();
 
-    </script>
 
-
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.8.1/dist/js/bootstrap-italia.bundle.min.js"></script>
 
-
 
-    <!-- Includi lo script di ElevenLabs -->
 
-    <script src="https://elevenlabs.io/convai-widget/index.js" async type="text/javascript"></script>
 
-
 
-    <!-- Widget ElevenLabs ConvAI -->
 
-    <div id="ai-widget-container" style="position: fixed; bottom: 20px; right: 20px;">
 
-        <elevenlabs-convai agent-id="2MJWbkNuIGTHNI71hKfL"></elevenlabs-convai>
 
-    </div>
 
-
 
-    <footer id="footer" class="it-footer bg-black" role="contentinfo">
 
-        <div class="it-footer-main py-3">
 
-            <div class="container">
 
-                <section class="py-4">
 
-                    <div class="row">
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">Esplora SINFI</h2>
 
-                                <ul id="footer-menu-col-1" class="link-list">
 
-                                    <li id="menu-item-sinfi-1" class="menu-item">
 
-                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/che-cose/">Cos'è SINFI</a>
 
-                                    </li>
 
-                                    <li id="menu-item-sinfi-2" class="menu-item">
 
-                                        <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>
 
-                                    </li>
 
-                                    <li id="menu-item-sinfi-3" class="menu-item">
 
-                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/riferimenti-normativi/">Normative di Riferimento</a>
 
-                                    </li>
 
-                                    <li id="menu-item-sinfi-4" class="menu-item">
 
-                                        <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>
 
-                                    </li>
 
-                                </ul>
 
-                            </div>
 
-                        </div>
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">Aiuto e Supporto</h2>
 
-                                <ul id="footer-menu-col-2" class="link-list">
 
-                                    <li id="menu-item-aiuto-1" class="menu-item">
 
-                                        <a class="list-item" href="./instructions.html">Istruzioni</a>
 
-                                    </li>
 
-                                    <li id="menu-item-aiuto-2" class="menu-item">
 
-                                        <a class="list-item" href="./faq.html">FAQ - Domande Frequenti</a>
 
-                                    </li>
 
-                                    <li id="menu-item-aiuto-3" class="menu-item">
 
-                                        <a class="list-item" href="./techsup.html">Segnalazioni e Supporto Tecnico</a>
 
-                                    </li>
 
-                                </ul>
 
-                            </div>
 
-                        </div>
 
-                        <!-- Colonna "Community" con i loghi dei social -->
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">Community</h2>
 
-                                <div class="social-icons">
 
-                                    <a href="https://www.linkedin.com" target="_blank" class="me-3"><i class="fab fa-linkedin"></i></a>
 
-                                    <a href="https://www.youtube.com" target="_blank" class="me-3"><i class="fab fa-youtube"></i></a>
 
-                                    <a href="https://www.facebook.com" target="_blank" class="me-3"><i class="fab fa-facebook"></i></a>
 
-                                    <a href="https://www.instagram.com" target="_blank" class="me-3"><i class="fab fa-instagram"></i></a>
 
-                                </div>
 
-                            </div>
 
-                        </div>
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">SINFI</h2>
 
-                                <ul id="footer-menu-col-4" class="link-list">
 
-                                    <li id="menu-item-377" class="menu-item">
 
-                                        <a target="_blank" href="https://sinfi.it/portal/">Vai al sito ufficiale SINFI</a>
 
-                                    </li>
 
-                                </ul>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
-                </section>
 
-            </div>
 
-        </div>
 
-        <div class="it-footer-small-prints clearfix">
 
-            <div class="container">
 
-                <nav class="menu-footer-menu-ita-container" aria-label="link utili">
 
-                    <ul id="menu-footer-menu-ita" class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">
 
-                        <li id="menu-item-413" class="menu-item list-inline-item"><a href="/media-policy/">Media Policy</a></li>
 
-                        <li id="menu-item-453" class="menu-item list-inline-item"><a href="/note-legali/">Privacy Policy &amp; Note Legali</a></li>
 
-                        <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>
 
-                        <li id="menu-item-411" class="menu-item list-inline-item"><a href="/mappa-del-sito/">Mappa del sito</a></li>
 
-                        <li id="menu-item-1277" class="menu-item list-inline-item"><a href="/open-data-spid/">Open Data SPID</a></li>
 
-                    </ul>
 
-                </nav>
 
-            </div>
 
-        </div>
 
-    </footer>
 
-</body>
 
+<!DOCTYPE html>

+<html lang="it">

+<head>

+    <meta charset="UTF-8">

+    <meta name="viewport" content="width=device-width, initial-scale=1.0">

+    <title>Mappa Interattiva con Layer Colorati</title>

+    

+    <!-- Fogli di stile -->

+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.13.4/dist/css/bootstrap-italia.min.css">

+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">

+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>

+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

+    

+    <style>

+        .top-bar { background-color: #004080; color: white; padding: 0.5rem 0; }

+        .header { background-color: #0066CC; color: white; padding: 1rem 0; }

+       /* Stile per il logo "PW" dentro un cerchio */

+       .logo { 

+            font-family: 'Georgia', serif; 

+            font-size: 1.5rem; 

+            width: 50px; height: 50px; 

+            background-color: white; 

+            color: #0066CC; 

+            border-radius: 50%; 

+            margin-right: 10px; 

+            display: inline-flex; 

+            align-items: center; 

+            justify-content: center; 

+        }

+        .header-title { color: white; font-size: 1.5rem; font-weight: bold; }

+        .main-content { background-color: #f8f9fa; padding: 2rem 0; }

+        #map { height: 500px; width: 100%; border-radius: 8px; }

+        .search-container { margin: 20px 0; }

+        .search-box { display: flex; gap: 10px; max-width: 600px; margin: 0 auto; }

+        .coordinate-box { background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-top: 20px; }

+    </style>

+</head>

+<body>

+    <!-- Header -->

+    <div class="top-bar">

+        <div class="container">Project Work</div>

+    </div>

+

+     <!-- Header -->

+     <header class="header">

+        <div class="container">

+            <div class="row align-items-center">

+                <div class="col d-flex">

+                    <!-- Logo "PW" dentro un cerchio, ora cliccabile -->

+                    <a href="/callback" class="logo-link">

+                        <div class="logo">PW</div>

+                    </a>

+                    <h1 class="header-title">Mappa</h1>

+                </div>

+                <div class="col-auto d-flex align-items-center">

+                    <a href="/admin" class="text-white me-3 link-underline-hover">Gestione Dati Immobiliari</a>

+                    <a href="/tfo" class="text-white me-3 link-underline-hover">TFO</a>

+                    <a href="/buildings" class="text-white me-3 link-underline-hover">Registrazione degli Edifici</a>

+                    <a href="/mappa_login" class="btn btn-light">Logout</a>

+                </div>

+            </div>

+        </div>

+    </header>

+

+    <main class="main-content">

+        <div class="container">

+            <!-- Barra di ricerca -->

+            <div class="search-container">

+                <div class="search-box">

+                    <input type="text" 

+                           id="address" 

+                           class="form-control" 

+                           placeholder="Inserisci l'indirizzo"

+                           style="flex-grow: 1;">

+                    <button id="searchBtn" class="btn btn-primary">

+                        <i class="fas fa-search"></i> Cerca

+                    </button>

+                </div>

+            </div>

+

+            <!-- Mappa -->

+            <div id="map"></div>

+

+            <!-- Dati geografici -->

+            <div class="coordinate-box">

+                <div class="row">

+                    <div class="col-md-4 mb-3">

+                        <label class="form-label">Latitudine:</label>

+                        <input type="number" id="latInput" class="form-control" readonly>

+                    </div>

+                    <div class="col-md-4 mb-3">

+                        <label class="form-label">Longitudine:</label>

+                        <input type="number" id="lngInput" class="form-control" readonly>

+                    </div>

+                    <div class="col-md-4 mb-3">

+                        <label class="form-label">Indirizzo:</label>

+                        <input type="text" id="addressInput" class="form-control" readonly>

+                    </div>

+                </div>

+            </div>

+        </div>

+    </main>

+

+    <!-- Footer -->

+    <footer id="footer" class="it-footer bg-black" role="contentinfo">

+        <!-- Contenuto footer mantenuto uguale -->

+    </footer>

+

+    <!-- Script -->

+     <!-- Includi lo script di ElevenLabs -->

+    

+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>

+    <script>

+        // Inizializzazione Mappa

+        const map = L.map('map').setView([41.9028, 12.4964], 13);

+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

+

+        // Layer edifici colorati

+        const edificiLayer = L.layerGroup().addTo(map);

+        let currentMarker = null;

+

+        // Funzione principale per caricare gli edifici

+        async function caricaEdifici() {

+            if (map.getZoom() >= 16) {

+                const bounds = map.getBounds();

+                const bbox = `${bounds.getSouthWest().lat},${bounds.getSouthWest().lng},${bounds.getNorthEast().lat},${bounds.getNorthEast().lng}`;

+                

+                const query = `[out:json];

+                    (

+                        way["building"](${bbox});

+                        relation["building"](${bbox});

+                    );

+                    out geom;

+                    out tags;`;

+

+                try {

+                    const response = await fetch(`https://overpass-api.de/api/interpreter?data=${encodeURIComponent(query)}`);

+                    const data = await response.json();

+

+                    edificiLayer.clearLayers();

+                    

+                    data.elements.forEach(element => {

+                        if (element.type === 'way' && element.geometry) {

+                            const latlngs = element.geometry.map(coord => [coord.lat, coord.lon]);

+                            var statoEdificio = false;

+                            let colorePoligono ;

+                            if (statoEdificio) colorePoligono = 'yellow';

+                            else colorePoligono = 'green';

+                            

+                            // const colori = ['#FF0000', '#00FF00'];

+                            const polygon = L.polygon(latlngs, {

+                                fillColor: colorePoligono,

+                                color: colorePoligono,

+                                fillOpacity: 0.5

+                            }).addTo(edificiLayer);

+

+                            polygon.on('click', async function() {

+                                var buildingType = element.tags && element.tags.building ? element.tags.building : 'Sconosciuto';

+                                try {

+                                    await getAddress(latlngs[0][0], latlngs[0][1]);

+                                    var popupContent = `

+                                        <b>Coordinate:</b> ${latlngs[0][0]}, ${latlngs[0][1]}<br>

+                                        <b>Tipo edificio:</b> ${buildingType}<br>

+                                        <b>Indirizzo:</b> ${document.getElementById('addressInput').value}<br>

+                                        <b>Stato:</b> ${statoEdificio}<br>

+                                        <b>Codice Catastale:</b> nessuno

+                                    `;

+                                    polygon.bindPopup(popupContent).openPopup();

+                                } catch (error) {

+                                    console.error("Errore nel recupero dell'indirizzo:", error);

+                                    var popupContent = `

+                                        <b>Coordinate:</b> ${latlngs[0][0]}, ${latlngs[0][1]}<br>

+                                        <b>Tipo edificio:</b> ${buildingType}<br>

+                                        <b>Indirizzo:</b> Indirizzo non disponibile<br>

+                                        <b>Stato:</b> ${statoEdificio}<br>

+                                        <b>Codice Catastale:</b> nessuno

+                                    `;

+                                    polygon.bindPopup(popupContent).openPopup();

+                                }

+                            });

+                        }

+                    });

+                } catch (error) {

+                    console.error("Errore nel caricamento edifici:", error);

+                }

+            } else {

+                edificiLayer.clearLayers();

+            }

+        }

+        async function getAddress(lat, lng) {

+            console.log(typeof(lat));

+            console.log(typeof(lng));

+

+            try {

+                const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`);

+                const data = await response.json();

+

+                if (data.address) {

+                    document.getElementById('addressInput').value = data.display_name;

+                } else {

+                    document.getElementById('addressInput').value = "Indirizzo non trovato";

+                }

+            } catch (error) {

+                console.error("Errore nel geocoding inverso:", error);

+                document.getElementById('addressInput').value = "Errore nel geocoding inverso";

+            }

+        }

+

+        // Funzioni di gestione posizione

+        async function updatePosition(lat, lng) {

+            try {

+                const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`);

+                const data = await response.json();

+                

+                document.getElementById('latInput').value = lat;

+                document.getElementById('lngInput').value = lng;

+                document.getElementById('addressInput').value = data.display_name || "Indirizzo non disponibile";

+                

+                if (currentMarker) map.removeLayer(currentMarker);

+                currentMarker = L.marker([lat, lng]).addTo(map);

+                

+            } catch (error) {

+                console.error("Errore di geocoding inverso:", error);

+            }

+        }

+

+        // Ricerca indirizzo

+        async function searchAddress() {

+            const address = document.getElementById('address').value;

+            if (!address) return;

+

+            try {

+                const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(address)}`);

+                const data = await response.json();

+                

+                if (data.length === 0) {

+                    alert("Indirizzo non trovato");

+                    return;

+                }

+

+                const { lat, lon: lng } = data[0];

+                map.setView([lat, lng], 18);

+                updatePosition(lat, lng);

+                

+            } catch (error) {

+                console.error("Errore di ricerca:", error);

+            }

+        }

+

+        // Event listeners

+        document.getElementById('searchBtn').addEventListener('click', searchAddress);

+        document.getElementById('address').addEventListener('keypress', (e) => {

+            if (e.key === 'Enter') searchAddress();

+        });

+

+        map.on('click', (e) => {

+            const { lat, lng } = e.latlng;

+            updatePosition(lat, lng);

+        });

+

+        map.on('moveend', caricaEdifici);

+        map.on('zoomend', caricaEdifici);

+        caricaEdifici();

+    </script>

+

+    <script src="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.8.1/dist/js/bootstrap-italia.bundle.min.js"></script>

+    <script>

+        document.addEventListener('DOMContentLoaded', function() {

+            // Ottieni l'URL corrente

+            const urlParams = new URLSearchParams(window.location.search);

+            // Estrai il token dal parametro di query "token"

+            const ruolo = urlParams.get('ruolo');

+            const codice_fiscale = urlParams.get('codice_fiscale');

+            // Salva il token in localStorage

+            if (ruolo && codice_fiscale) {

+                localStorage.setItem('ruolo', ruolo);

+                localStorage.setItem('codice_fiscale', codice_fiscale);

+                // Rimuovi il token dall'URL per sicurezza (opzionale)

+                window.history.replaceState({}, document.title, window.location.pathname);

+                //window.location.href = window.location.pathname;

+                //Puoi anche reindirizzare ad una pagina pulita.

+                //window.location.href = '/altra-pagina';

+            }

+            

+        });

+    </script>

+    <!-- Widget ElevenLabs ConvAI -->

+    <elevenlabs-convai agent-id="GlBWa9xJ6GdD7bAve6Yq"></elevenlabs-convai>

+    <script src="https://elevenlabs.io/convai-widget/index.js" async type="text/javascript"></script>

+

+    <footer id="footer" class="it-footer bg-black" role="contentinfo">

+        <div class="it-footer-main py-3">

+            <div class="container">

+                <section class="py-4">

+                    <div class="row">

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">Esplora SINFI</h2>

+                                <ul id="footer-menu-col-1" class="link-list">

+                                    <li id="menu-item-sinfi-1" class="menu-item">

+                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/che-cose/">Cos'è SINFI</a>

+                                    </li>

+                                    <li id="menu-item-sinfi-2" class="menu-item">

+                                        <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>

+                                    </li>

+                                    <li id="menu-item-sinfi-3" class="menu-item">

+                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/riferimenti-normativi/">Normative di Riferimento</a>

+                                    </li>

+                                    <li id="menu-item-sinfi-4" class="menu-item">

+                                        <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>

+                                    </li>

+                                </ul>

+                            </div>

+                        </div>

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">Aiuto e Supporto</h2>

+                                <ul id="footer-menu-col-2" class="link-list">

+                                    <li id="menu-item-aiuto-1" class="menu-item">

+                                        <a class="list-item" href="/instructions">Istruzioni</a>

+                                    </li>

+                                    <li id="menu-item-aiuto-2" class="menu-item">

+                                        <a class="list-item" href="/faq">FAQ - Domande Frequenti</a>

+                                    </li>

+                                    <li id="menu-item-aiuto-3" class="menu-item">

+                                        <a class="list-item" href="/techsup">Segnalazioni e Supporto Tecnico</a>

+                                    </li>

+                                </ul>

+                            </div>

+                        </div>

+                        <!-- Colonna "Community" con i loghi dei social -->

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">Community</h2>

+                                <div class="social-icons">

+                                    <a href="https://www.linkedin.com" target="_blank" class="me-3"><i class="fab fa-linkedin"></i></a>

+                                    <a href="https://www.youtube.com" target="_blank" class="me-3"><i class="fab fa-youtube"></i></a>

+                                    <a href="https://www.facebook.com" target="_blank" class="me-3"><i class="fab fa-facebook"></i></a>

+                                    <a href="https://www.instagram.com" target="_blank" class="me-3"><i class="fab fa-instagram"></i></a>

+                                </div>

+                            </div>

+                        </div>

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">SINFI</h2>

+                                <ul id="footer-menu-col-4" class="link-list">

+                                    <li id="menu-item-377" class="menu-item">

+                                        <a target="_blank" href="https://sinfi.it/portal/">Vai al sito ufficiale SINFI</a>

+                                    </li>

+                                </ul>

+                            </div>

+                        </div>

+                    </div>

+                </section>

+            </div>

+        </div>

+        <div class="it-footer-small-prints clearfix">

+            <div class="container">

+                <nav class="menu-footer-menu-ita-container" aria-label="link utili">

+                    <ul id="menu-footer-menu-ita" class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">

+                        <li id="menu-item-413" class="menu-item list-inline-item"><a href="/media-policy/">Media Policy</a></li>

+                        <li id="menu-item-453" class="menu-item list-inline-item"><a href="/note-legali/">Privacy Policy &amp; Note Legali</a></li>

+                        <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>

+                        <li id="menu-item-411" class="menu-item list-inline-item"><a href="/mappa-del-sito/">Mappa del sito</a></li>

+                        <li id="menu-item-1277" class="menu-item list-inline-item"><a href="/open-data-spid/">Open Data SPID</a></li>

+                    </ul>

+                </nav>

+            </div>

+        </div>

+    </footer>

+</body>

 </html>
 
 </html>

+ 299 - 275
Backend/templates/techsup.html
Файл харах 

@@ -1,276 +1,300 @@
 
-<!DOCTYPE html>
 
-<html lang="it">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>Segnalazioni e Supporto Tecnico</title>
 
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.13.4/dist/css/bootstrap-italia.min.css" rel="stylesheet">
 
-    <!-- Aggiungi Font Awesome CDN nel <head> -->
 
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
 
-    <style>
 
-        /* Stile per la riga blu scuro */
 
-        .top-bar {
 
-            background-color: #004080; /* Blu scuro */
 
-            color: white;
 
-            padding: 0.5rem 0;
 
-            text-align: left; /* Allineamento a sinistra */
 
-            font-size: 0.9rem;
 
-        }
 
-
 
-        /* Stile per l'header */
 
-        .header {
 
-            background-color: #0066CC; /* Blu chiaro */
 
-            color: white;
 
-            padding: 1rem 0;
 
-        }
 
-
 
-        /* Stile per il logo "PW" dentro un cerchio */
 
-        .logo { 
-            font-family: 'Georgia', serif; 
-            font-size: 1.5rem; 
-            width: 50px; height: 50px; 
-            background-color: white; 
-            color: #0066CC; 
-            border-radius: 50%; 
-            margin-right: 10px; 
-            display: inline-flex; 
-            align-items: center; 
-            justify-content: center; 
-        }
 
-
 
-        /* Stile per il titolo "Segnalazioni e Supporto Tecnico" */
 
-        .header-title {
 
-            color: white;
 
-            font-size: 1.5rem; /* Stessa grandezza di "Segnalazioni e Supporto Tecnico" */
 
-            font-weight: bold;
 
-            display: inline-block;
 
-            vertical-align: middle;
 
-        }
 
-
 
-        /* Stile per il contenuto principale */
 
-        .main-content {
 
-            background-color: #f8f9fa; /* Grigio chiaro */
 
-            padding: 2rem 0;
 
-        }
 
-
 
-        /* Stile per il banner di conferma */
 
-        .banner-confirm {
 
-            display: none; /* Nascondi il banner inizialmente */
 
-            background-color: #28a745;
 
-            color: white;
 
-            padding: 1rem;
 
-            margin-top: 1rem;
 
-            border-radius: 4px;
 
-            text-align: center;
 
-            transition: opacity 0.5s ease-in-out; /* Transizione per la dissolvenza */
 
-            opacity: 1; /* Inizialmente visibile */
 
-        }
 
-
 
-        /* Aggiungi margine ai lati del contenitore principale */
 
-        .container {
 
-            padding-left: 2rem;
 
-            padding-right: 2rem;
 
-        }
 
-
 
-        /* Aggiungi margine ai lati del footer */
 
-        .it-footer-main .container {
 
-            padding-left: 2rem;
 
-            padding-right: 2rem;
 
-        }
 
-    </style>
 
-         <style>
 
-            /* Stile per i link con sottolineatura solo al passaggio del mouse */
 
-            .link-underline-hover {
 
-                text-decoration: none; /* Rimuove la sottolineatura di base */
 
-            }
 
-            .link-underline-hover:hover {
 
-                text-decoration: underline; /* Aggiunge la sottolineatura solo al passaggio del mouse */
 
-            }
 
-        </style>
 
-</head>
 
-<body>
 
-    <!-- Riga blu scuro con scritto "Project Work" allineata a sinistra -->
 
-    <div class="top-bar">
 
-        <div class="container">
 
-            Project Work
 
-        </div>
 
-    </div>
 
-
 
-<!-- Header -->
 
-<header class="header">
 
-    <div class="container">
 
-        <div class="row align-items-center">
 
-            <div class="col d-flex">
 
-                <!-- Logo "PW" dentro un cerchio, ora cliccabile -->
 
-                <a href="./mappa_logout.html" class="logo-link">
 
-                    <div class="logo">PW</div>
 
-                </a>
 
-                <h1 class="header-title">Segnalazioni e Supporto Tecnico</h1> <!-- Titolo "Mappa" con la stessa grandezza -->
 
-            </div>
 
-            <div class="col-auto d-flex align-items-center">
 
-                <a href="./ADMIN.html" class="text-white me-3 link-underline-hover">Gestione Dati Immobiliari</a>
 
-                <a href="./TFO.html" class="text-white me-3 link-underline-hover">TFO</a>
 
-                <a href="./buildings.html" class="text-white me-3 link-underline-hover">Registrazione degli Edifici</a>
 
-                <a href="./mappa_login.html" class="btn btn-light">Logout</a>
 
-            </div>
 
-        </div>
 
-    </div>
 
-</header>
 
-
 
-    <!-- Sezione principale -->
 
-    <section class="it-card-wrapper mt-5 main-content">
 
-        <div class="container">
 
-            <div class="it-card">
 
-                <div class="it-card-header">
 
-                    <h5 class="it-card-title">Segnalazioni e Supporto Tecnico</h5>
 
-                </div>
 
-                <div class="it-card-body">
 
-                    <!-- Descrizione della pagina -->
 
-                    <p>
 
-                        Utilizza questa pagina per segnalare problemi tecnici o richiedere supporto. Compila il modulo sottostante con i dettagli del problema e ti risponderemo via mail entro <strong>48 ore</strong>.
 
-                        Nel frattempo ti consigliamo di consultare la sezione inerente alle <strong> Domande Frequenti (FAQ)</strong> per chiarire eventuali dubbi.
 
-                    </p>
 
-
 
-                    <!-- Form di segnalazione -->
 
-                    <form id="segnalazioneForm">
 
-                        <div class="mb-3">
 
-                            <label for="nome" class="form-label">Nome</label>
 
-                            <input type="text" class="form-control" id="nome" required>
 
-                        </div>
 
-                        <div class="mb-3">
 
-                            <label for="cognome" class="form-label">Cognome</label>
 
-                            <input type="text" class="form-control" id="cognome" required>
 
-                        </div>
 
-                        <div class="mb-3">
 
-                            <label for="email" class="form-label">Email</label>
 
-                            <input type="email" class="form-control" id="email" required>
 
-                        </div>
 
-                        <div class="mb-3">
 
-                            <label for="problema" class="form-label">Descrizione del problema</label>
 
-                            <textarea class="form-control" id="problema" rows="5" required></textarea>
 
-                        </div>
 
-                        <button type="submit" class="btn btn-primary">Invia Segnalazione</button>
 
-                    </form>
 
-
 
-                    <!-- Banner di conferma -->
 
-                    <div id="bannerConfirm" class="banner-confirm mt-3">
 
-                        Grazie per la tua segnalazione! Riceverai una risposta entro 48 ore.
 
-                    </div>
 
-                </div>
 
-            </div>
 
-        </div>
 
-    </section>
 
-    <!-- Widget ElevenLabs ConvAI -->
 
-    <div id="ai-widget-container" style="position: fixed; bottom: 20px; right: 20px;">
 
-        <elevenlabs-convai agent-id="2MJWbkNuIGTHNI71hKfL"></elevenlabs-convai>
 
-    </div>
 
-    <!-- Footer -->
 
-    <footer id="footer" class="it-footer bg-black" role="contentinfo">
 
-        <div class="it-footer-main py-3">
 
-            <div class="container">
 
-                <section class="py-4">
 
-                    <div class="row">
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">Esplora SINFI</h2>
 
-                                <ul id="footer-menu-col-1" class="link-list">
 
-                                    <li id="menu-item-sinfi-1" class="menu-item">
 
-                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/che-cose/">Cos'è SINFI</a>
 
-                                    </li>
 
-                                    <li id="menu-item-sinfi-2" class="menu-item">
 
-                                        <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>
 
-                                    </li>
 
-                                    <li id="menu-item-sinfi-3" class="menu-item">
 
-                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/riferimenti-normativi/">Normative di Riferimento</a>
 
-                                    </li>
 
-                                    <li id="menu-item-sinfi-4" class="menu-item">
 
-                                        <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>
 
-                                    </li>
 
-                                </ul>
 
-                            </div>
 
-                        </div>
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">Aiuto e Supporto</h2>
 
-                                <ul id="footer-menu-col-2" class="link-list">
 
-                                    <li id="menu-item-aiuto-1" class="menu-item">
 
-                                        <a class="list-item" href="./instructions.html">Istruzioni</a>
 
-                                    </li>
 
-                                    <li id="menu-item-aiuto-2" class="menu-item">
 
-                                        <a class="list-item" href="./faq.html">FAQ - Domande Frequenti</a>
 
-                                    </li>
 
-                                    <li id="menu-item-aiuto-3" class="menu-item">
 
-                                        <a class="list-item" href="./techsup.html">Segnalazioni e Supporto Tecnico</a>
 
-                                    </li>
 
-                                </ul>
 
-                            </div>
 
-                        </div>
 
-                        <!-- Colonna "Community" con i loghi dei social -->
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">Community</h2>
 
-                                <div class="social-icons">
 
-                                    <a href="https://www.linkedin.com" target="_blank" class="me-3"><i class="fab fa-linkedin"></i></a>
 
-                                    <a href="https://www.youtube.com" target="_blank" class="me-3"><i class="fab fa-youtube"></i></a>
 
-                                    <a href="https://www.facebook.com" target="_blank" class="me-3"><i class="fab fa-facebook"></i></a>
 
-                                    <a href="https://www.instagram.com" target="_blank" class="me-3"><i class="fab fa-instagram"></i></a>
 
-                                </div>
 
-                            </div>
 
-                        </div>
 
-                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
 
-                            <div class="link-list-wrapper">
 
-                                <h2 class="h5">SINFI</h2>
 
-                                <ul id="footer-menu-col-4" class="link-list">
 
-                                    <li id="menu-item-377" class="menu-item">
 
-                                        <a target="_blank" href="https://sinfi.it/portal/">Vai al sito ufficiale SINFI</a>
 
-                                    </li>
 
-                                </ul>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
-                </section>
 
-            </div>
 
-        </div>
 
-        <div class="it-footer-small-prints clearfix">
 
-            <div class="container">
 
-                <nav class="menu-footer-menu-ita-container" aria-label="link utili">
 
-                    <ul id="menu-footer-menu-ita" class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">
 
-                        <li id="menu-item-413" class="menu-item list-inline-item"><a href="/media-policy/">Media Policy</a></li>
 
-                        <li id="menu-item-453" class="menu-item list-inline-item"><a href="/note-legali/">Privacy Policy &amp; Note Legali</a></li>
 
-                        <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>
 
-                        <li id="menu-item-411" class="menu-item list-inline-item"><a href="/mappa-del-sito/">Mappa del sito</a></li>
 
-                        <li id="menu-item-1277" class="menu-item list-inline-item"><a href="/open-data-spid/">Open Data SPID</a></li>
 
-                    </ul>
 
-                </nav>
 
-            </div>
 
-        </div>
 
-    </footer>
 
-
 
-    <!-- Includi il file JavaScript di Bootstrap -->
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 
-    <script>
 
-        // Gestione del form
 
-        document.getElementById('segnalazioneForm').addEventListener('submit', function (event) {
 
-            event.preventDefault(); // Impedisce l'invio del form
 
-
 
-            // Mostra il banner di conferma
 
-            const banner = document.getElementById('bannerConfirm');
 
-            banner.style.display = 'block';
 
-            banner.style.opacity = '1';
 
-
 
-            // Nascondi il banner dopo 5 secondi con effetto di dissolvenza
 
-            setTimeout(() => {
 
-                banner.style.opacity = '0'; // Inizia la dissolvenza
 
-                setTimeout(() => {
 
-                    banner.style.display = 'none'; // Nascondi dopo la dissolvenza
 
-                }, 500); // Tempo della dissolvenza (deve corrispondere alla durata della transizione CSS)
 
-            }, 5000); // Tempo prima di iniziare la dissolvenza
 
-
 
-            // Resetta il form (opzionale)
 
-            document.getElementById('segnalazioneForm').reset();
 
-        });
 
-    </script>
 
-    <!-- Includi lo script di ElevenLabs -->
 
-    <script src="https://elevenlabs.io/convai-widget/index.js" async type="text/javascript"></script>
 
-</body>
 
+<!DOCTYPE html>

+<html lang="it">

+<head>

+    <meta charset="UTF-8">

+    <meta name="viewport" content="width=device-width, initial-scale=1.0">

+    <title>Segnalazioni e Supporto Tecnico</title>

+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.13.4/dist/css/bootstrap-italia.min.css" rel="stylesheet">

+    <!-- Aggiungi Font Awesome CDN nel <head> -->

+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

+    <style>

+        /* Stile per la riga blu scuro */

+        .top-bar {

+            background-color: #004080; /* Blu scuro */

+            color: white;

+            padding: 0.5rem 0;

+            text-align: left; /* Allineamento a sinistra */

+            font-size: 0.9rem;

+        }

+

+        /* Stile per l'header */

+        .header {

+            background-color: #0066CC; /* Blu chiaro */

+            color: white;

+            padding: 1rem 0;

+        }

+

+        /* Stile per il logo "PW" dentro un cerchio */

+        .logo { 

+            font-family: 'Georgia', serif; 

+            font-size: 1.5rem; 

+            width: 50px; height: 50px; 

+            background-color: white; 

+            color: #0066CC; 

+            border-radius: 50%; 

+            margin-right: 10px; 

+            display: inline-flex; 

+            align-items: center; 

+            justify-content: center; 

+        }

+

+        /* Stile per il titolo "Segnalazioni e Supporto Tecnico" */

+        .header-title {

+            color: white;

+            font-size: 1.5rem; /* Stessa grandezza di "Segnalazioni e Supporto Tecnico" */

+            font-weight: bold;

+            display: inline-block;

+            vertical-align: middle;

+        }

+

+        /* Stile per il contenuto principale */

+        .main-content {

+            background-color: #f8f9fa; /* Grigio chiaro */

+            padding: 2rem 0;

+        }

+

+        /* Stile per il banner di conferma */

+        .banner-confirm {

+            display: none; /* Nascondi il banner inizialmente */

+            background-color: #28a745;

+            color: white;

+            padding: 1rem;

+            margin-top: 1rem;

+            border-radius: 4px;

+            text-align: center;

+            transition: opacity 0.5s ease-in-out; /* Transizione per la dissolvenza */

+            opacity: 1; /* Inizialmente visibile */

+        }

+

+        /* Aggiungi margine ai lati del contenitore principale */

+        .container {

+            padding-left: 2rem;

+            padding-right: 2rem;

+        }

+

+        /* Aggiungi margine ai lati del footer */

+        .it-footer-main .container {

+            padding-left: 2rem;

+            padding-right: 2rem;

+        }

+    </style>

+         <style>

+            /* Stile per i link con sottolineatura solo al passaggio del mouse */

+            .link-underline-hover {

+                text-decoration: none; /* Rimuove la sottolineatura di base */

+            }

+            .link-underline-hover:hover {

+                text-decoration: underline; /* Aggiunge la sottolineatura solo al passaggio del mouse */

+            }

+        </style>

+</head>

+<body>

+    <!-- Riga blu scuro con scritto "Project Work" allineata a sinistra -->

+    <div class="top-bar">

+        <div class="container">

+            Project Work

+        </div>

+    </div>

+

+<!-- Header -->

+<header class="header">

+    <div class="container">

+        <div class="row align-items-center">

+            <div class="col d-flex">

+                <!-- Logo "PW" dentro un cerchio, ora cliccabile -->

+                <a href="/callback" class="logo-link">

+                    <div class="logo">PW</div>

+                </a>

+                <h1 class="header-title">Segnalazioni e Supporto Tecnico</h1> <!-- Titolo "Mappa" con la stessa grandezza -->

+            </div>

+            <div class="col-auto d-flex align-items-center">

+                <a href="/admin" class="text-white me-3 link-underline-hover">Gestione Dati Immobiliari</a>

+                <a href="/tfo" class="text-white me-3 link-underline-hover">TFO</a>

+                <a href="/buildings" class="text-white me-3 link-underline-hover">Registrazione degli Edifici</a>

+                <a href="/mappa_login" class="btn btn-light">Logout</a>

+            </div>

+        </div>

+    </div>

+</header>

+

+    <!-- Sezione principale -->

+    <section class="it-card-wrapper mt-5 main-content">

+        <div class="container">

+            <div class="it-card">

+                <div class="it-card-header">

+                    <h5 class="it-card-title">Segnalazioni e Supporto Tecnico</h5>

+                </div>

+                <div class="it-card-body">

+                    <!-- Descrizione della pagina -->

+                    <p>

+                        Utilizza questa pagina per segnalare problemi tecnici o richiedere supporto. Compila il modulo sottostante con i dettagli del problema e ti risponderemo via mail entro <strong>48 ore</strong>.

+                        Nel frattempo ti consigliamo di consultare la sezione inerente alle <strong> Domande Frequenti (FAQ)</strong> per chiarire eventuali dubbi.

+                    </p>

+

+                    <!-- Form di segnalazione -->

+                    <form id="segnalazioneForm">

+                        <div class="mb-3">

+                            <label for="nome" class="form-label">Nome</label>

+                            <input type="text" class="form-control" id="nome" required>

+                        </div>

+                        <div class="mb-3">

+                            <label for="cognome" class="form-label">Cognome</label>

+                            <input type="text" class="form-control" id="cognome" required>

+                        </div>

+                        <div class="mb-3">

+                            <label for="email" class="form-label">Email</label>

+                            <input type="email" class="form-control" id="email" required>

+                        </div>

+                        <div class="mb-3">

+                            <label for="problema" class="form-label">Descrizione del problema</label>

+                            <textarea class="form-control" id="problema" rows="5" required></textarea>

+                        </div>

+                        <button type="submit" class="btn btn-primary">Invia Segnalazione</button>

+                    </form>

+

+                    <!-- Banner di conferma -->

+                    <div id="bannerConfirm" class="banner-confirm mt-3">

+                        Grazie per la tua segnalazione! Riceverai una risposta entro 48 ore.

+                    </div>

+                </div>

+            </div>

+        </div>

+    </section>

+     <!-- Widget ElevenLabs ConvAI -->

+     <elevenlabs-convai agent-id="GlBWa9xJ6GdD7bAve6Yq"></elevenlabs-convai>

+     <script src="https://elevenlabs.io/convai-widget/index.js" async type="text/javascript"></script>

+     <script>

+        document.addEventListener('DOMContentLoaded', function() {

+            // Ottieni l'URL corrente

+            const urlParams = new URLSearchParams(window.location.search);

+            // Estrai il token dal parametro di query "token"

+            const ruolo = urlParams.get('ruolo');

+            const codice_fiscale = urlParams.get('codice_fiscale');

+            // Salva il token in localStorage

+            if (ruolo && codice_fiscale) {

+                localStorage.setItem('ruolo', ruolo);

+                localStorage.setItem('codice_fiscale', codice_fiscale);

+                // Rimuovi il token dall'URL per sicurezza (opzionale)

+                window.history.replaceState({}, document.title, window.location.pathname);

+                //window.location.href = window.location.pathname;

+                //Puoi anche reindirizzare ad una pagina pulita.

+                //window.location.href = '/altra-pagina';

+            }

+            

+        });

+    </script>

+    <!-- Footer -->

+    <footer id="footer" class="it-footer bg-black" role="contentinfo">

+        <div class="it-footer-main py-3">

+            <div class="container">

+                <section class="py-4">

+                    <div class="row">

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">Esplora SINFI</h2>

+                                <ul id="footer-menu-col-1" class="link-list">

+                                    <li id="menu-item-sinfi-1" class="menu-item">

+                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/che-cose/">Cos'è SINFI</a>

+                                    </li>

+                                    <li id="menu-item-sinfi-2" class="menu-item">

+                                        <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>

+                                    </li>

+                                    <li id="menu-item-sinfi-3" class="menu-item">

+                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/riferimenti-normativi/">Normative di Riferimento</a>

+                                    </li>

+                                    <li id="menu-item-sinfi-4" class="menu-item">

+                                        <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>

+                                    </li>

+                                </ul>

+                            </div>

+                        </div>

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">Aiuto e Supporto</h2>

+                                <ul id="footer-menu-col-2" class="link-list">

+                                    <li id="menu-item-aiuto-1" class="menu-item">

+                                        <a class="list-item" href="/instructions">Istruzioni</a>

+                                    </li>

+                                    <li id="menu-item-aiuto-2" class="menu-item">

+                                        <a class="list-item" href="/faq">FAQ - Domande Frequenti</a>

+                                    </li>

+                                    <li id="menu-item-aiuto-3" class="menu-item">

+                                        <a class="list-item" href="/techsup">Segnalazioni e Supporto Tecnico</a>

+                                    </li>

+                                </ul>

+                            </div>

+                        </div>

+                        <!-- Colonna "Community" con i loghi dei social -->

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">Community</h2>

+                                <div class="social-icons">

+                                    <a href="https://www.linkedin.com" target="_blank" class="me-3"><i class="fab fa-linkedin"></i></a>

+                                    <a href="https://www.youtube.com" target="_blank" class="me-3"><i class="fab fa-youtube"></i></a>

+                                    <a href="https://www.facebook.com" target="_blank" class="me-3"><i class="fab fa-facebook"></i></a>

+                                    <a href="https://www.instagram.com" target="_blank" class="me-3"><i class="fab fa-instagram"></i></a>

+                                </div>

+                            </div>

+                        </div>

+                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">

+                            <div class="link-list-wrapper">

+                                <h2 class="h5">SINFI</h2>

+                                <ul id="footer-menu-col-4" class="link-list">

+                                    <li id="menu-item-377" class="menu-item">

+                                        <a target="_blank" href="https://sinfi.it/portal/">Vai al sito ufficiale SINFI</a>

+                                    </li>

+                                </ul>

+                            </div>

+                        </div>

+                    </div>

+                </section>

+            </div>

+        </div>

+        <div class="it-footer-small-prints clearfix">

+            <div class="container">

+                <nav class="menu-footer-menu-ita-container" aria-label="link utili">

+                    <ul id="menu-footer-menu-ita" class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">

+                        <li id="menu-item-413" class="menu-item list-inline-item"><a href="/media-policy/">Media Policy</a></li>

+                        <li id="menu-item-453" class="menu-item list-inline-item"><a href="/note-legali/">Privacy Policy &amp; Note Legali</a></li>

+                        <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>

+                        <li id="menu-item-411" class="menu-item list-inline-item"><a href="/mappa-del-sito/">Mappa del sito</a></li>

+                        <li id="menu-item-1277" class="menu-item list-inline-item"><a href="/open-data-spid/">Open Data SPID</a></li>

+                    </ul>

+                </nav>

+            </div>

+        </div>

+    </footer>

+

+    <!-- Includi il file JavaScript di Bootstrap -->

+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

+    <script>

+        // Gestione del form

+        document.getElementById('segnalazioneForm').addEventListener('submit', function (event) {

+            event.preventDefault(); // Impedisce l'invio del form

+

+            // Mostra il banner di conferma

+            const banner = document.getElementById('bannerConfirm');

+            banner.style.display = 'block';

+            banner.style.opacity = '1';

+

+            // Nascondi il banner dopo 5 secondi con effetto di dissolvenza

+            setTimeout(() => {

+                banner.style.opacity = '0'; // Inizia la dissolvenza

+                setTimeout(() => {

+                    banner.style.display = 'none'; // Nascondi dopo la dissolvenza

+                }, 500); // Tempo della dissolvenza (deve corrispondere alla durata della transizione CSS)

+            }, 5000); // Tempo prima di iniziare la dissolvenza

+

+            // Resetta il form (opzionale)

+            document.getElementById('segnalazioneForm').reset();

+

+        });

+        // Eseguiamo alcune personalizzazioni per migliorare l'interattività

+       

+

+        

+        

+    </script>

+    

+</body>

 </html>
 
 </html>