Backend/endpoints.py

@@ -0,0 +1,193 @@
+from fastapi import FastAPI, Form, Request, Depends, HTTPException, Body
+from pydantic import BaseModel
+from fastapi.responses import JSONResponse, RedirectResponse, HTMLResponse
+from fastapi.templating import Jinja2Templates
+from fastapi.staticfiles import StaticFiles
+from fastapi.middleware.cors import CORSMiddleware
+from starlette.middleware.sessions import SessionMiddleware
+import secrets
+import uvicorn
+import logging
+import requests  # Import the requests library here
+from typing import Annotated, Dict, List, Optional #import typing
+
+
+# --- Keycloak Configuration ---
+KEYCLOAK_SERVER_URL = "http://165.22.75.145:8080"  # Double-check this! Changed to http
+KEYCLOAK_REALM = "Generation"
+KEYCLOAK_CLIENT_ID = "web-app-pw"
+KEYCLOAK_CLIENT_SECRET = "fQGWt8HSPn65cCKTOzE5FigqZhf8QTYW"
+KEYCLOAK_SCOPE = "codicefiscale email openid ruolo"
+
+# --- App Initialization ---
+app = FastAPI()
+
+# --- Logging Configuration ---
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# --- CORS ---
+# origins = [
+#     "http://localhost:8000/*",
+#     "http://localhost:3000/*",
+# ]
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+# --- Session ---
+app.add_middleware(SessionMiddleware, secret_key=secrets.token_hex(32))
+
+# --- Helper Functions (modified to be part of the API) ---
+
+# Function to get tokens from keycloak
+def get_token_from_keycloak(username, password) -> Dict:
+    """Retrieves access and refresh tokens from Keycloak."""
+    url = f"{KEYCLOAK_SERVER_URL}/realms/{KEYCLOAK_REALM}/protocol/openid-connect/token"
+    payload = f'grant_type=password&client_id={KEYCLOAK_CLIENT_ID}&scope={KEYCLOAK_SCOPE}&username={username}&password={password}&client_secret={KEYCLOAK_CLIENT_SECRET}'
+    headers = {
+        'Content-Type': 'application/x-www-form-urlencoded'
+    }
+    try:
+        response = requests.post(url, headers=headers, data=payload, timeout=10)
+        response.raise_for_status()  # Raise HTTPError for bad responses (4xx or 5xx)
+        return response.json()
+    except requests.exceptions.RequestException as e:
+        logger.error(f"Error getting token from Keycloak: {e}")
+        raise HTTPException(status_code=500, detail=f"Failed to get token from Keycloak: {e}") from e
+
+def refresh_token_from_keycloak(refresh_token: str) -> Dict:
+    """Refreshes the access token using the refresh token."""
+    url = f"{KEYCLOAK_SERVER_URL}/realms/{KEYCLOAK_REALM}/protocol/openid-connect/token"
+    payload = f'grant_type=refresh_token&client_id={KEYCLOAK_CLIENT_ID}&client_secret={KEYCLOAK_CLIENT_SECRET}&refresh_token={refresh_token}'
+    headers = {
+        'Content-Type': 'application/x-www-form-urlencoded'
+    }
+    try:
+        response = requests.post(url, headers=headers, data=payload, timeout=10)
+        response.raise_for_status()
+        return response.json()
+    except requests.exceptions.RequestException as e:
+        logger.error(f"Error refreshing token: {e}")
+        raise HTTPException(status_code=500, detail=f"Failed to refresh token: {e}") from e
+
+
+def introspect_keycloak_token_request(access_token: str) -> Dict:
+    """Introspects a Keycloak token to verify if it's active."""
+    url = f"{KEYCLOAK_SERVER_URL}/realms/{KEYCLOAK_REALM}/protocol/openid-connect/token/introspect"
+    payload = f'token={access_token}&client_id={KEYCLOAK_CLIENT_ID}&client_secret={KEYCLOAK_CLIENT_SECRET}'
+    headers = {
+        'Content-Type': 'application/x-www-form-urlencoded'
+    }
+    try:
+        response = requests.post(url, headers=headers, data=payload, verify=False, timeout=10)
+        response.raise_for_status()
+        return response.json()
+    except requests.exceptions.RequestException as e:
+        logger.error(f"Error introspecting token: {e}")
+        raise HTTPException(status_code=500, detail=f"Failed to introspect token: {e}") from e
+
+def get_user_info_from_keycloak(access_token: str) -> Dict:
+    """Gets user information from Keycloak using the access token."""
+    url = f"{KEYCLOAK_SERVER_URL}/realms/{KEYCLOAK_REALM}/protocol/openid-connect/userinfo"
+    headers = {
+        'Authorization': f'Bearer {access_token}'
+    }
+    try:
+        response = requests.get(url, headers=headers, timeout=10)
+        response.raise_for_status()
+        return response.json()
+    except requests.exceptions.RequestException as e:
+        logger.error(f"Error getting user info: {e}")
+        raise HTTPException(status_code=500, detail=f"Failed to get user info: {e}") from e
+
+def logout_keycloak(refresh_token:str):
+    url = f"{KEYCLOAK_SERVER_URL}/realms/{KEYCLOAK_REALM}/protocol/openid-connect/logout"
+
+    payload = f'refresh_token={refresh_token}&client_id={KEYCLOAK_CLIENT_ID}&client_secret={KEYCLOAK_CLIENT_SECRET}'
+    headers = {
+    'Content-Type': 'application/x-www-form-urlencoded'
+    }
+    try:
+        response = requests.request("POST", url, headers=headers, data=payload)
+        response.raise_for_status()
+        return response.json()
+    except requests.exceptions.RequestException as e:
+        logger.error(f"Error logging out user: {e}")
+        raise HTTPException(status_code=500, detail=f"Failed to logout user: {e}") from e
+
+class Credenziali(BaseModel):
+    username: str
+    password: str
+
+app.mount("/static", StaticFiles(directory="static"), name="static")
+templates = Jinja2Templates(directory="templates")
+
+
+@app.get("/callback")
+async def callback(request: Request):
+    return templates.TemplateResponse("mappa_logout.html", context={"request": request, "title": "Mappa"})
+
+@app.get("/access")
+@app.post("/access")
+async def login(request: Request, username: Optional[str] = Form(None), password: Optional[str] = Form(None)):
+    error = None
+    if request.method == "POST":
+        try:
+            request.session["user_info"] = {}
+            #print(request.session.get("tokens"))
+            
+            tokens = get_token_from_keycloak(username, password)#request.body.json()["username"], request.json()["password"])
+            
+            # Save tokens and information to the session
+
+            request.session["access_token"] = tokens["access_token"]
+            request.session["refresh_token"] = tokens["refresh_token"]
+
+            #print(tokens["access_token"])
+
+            # Get user info and save it to the session too
+
+            user_info = get_user_info_from_keycloak(tokens["access_token"])
+
+            request.session["user_info"] = user_info
+
+
+
+            return RedirectResponse(url=f"/callback?access_token={tokens["access_token"]}&refresh_token={tokens["refresh_token"]}", status_code=303)
+
+        except HTTPException as e:
+
+            return JSONResponse(content={"detail": e.detail}, status_code=e.status_code)
+
+        except Exception as e:
+
+            logger.error(f"An unexpected error occurred during login: {e}")
+
+            return JSONResponse(content={"detail": "An unexpected error occurred"}, status_code=500)
+    
+    if request.session.get("access_token") is not None:
+                #print(request.session.get("access_token"))
+                if introspect_keycloak_token_request(str(request.session.get("access_token")))["active"] == True:
+                    #print(3)
+                    return RedirectResponse(url="/callback", status_code=303)
+                try:
+                    tokens = refresh_token_from_keycloak(str(request.session.get("refresh_token")))
+
+                    #localStorage.setItem('jwtToken', tuoJWT);
+                    request.session["access_token"] = tokens["access_token"]
+                    request.session["refresh_token"] = tokens["refresh_token"]
+
+                    return RedirectResponse(url=f"/callback?access_token={tokens["access_token"]}&refresh_token={tokens["refresh_token"]}", status_code=303)
+
+                except Exception as e:
+
+                    logger.error(f"An unexpected error occurred during login: {e}")
+
+                    return JSONResponse(content={"detail": "An unexpected error occurred"}, status_code=500)
+                
+    return templates.TemplateResponse("login.html", {"request": request, "error": error})

Backend/templates/ADMIN.html

@@ -0,0 +1,587 @@
+<!DOCTYPE html>
+<html lang="it">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gestione Dati Immobiliari</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 "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;
+        }
+        .it-footer-main {
+            background-color: #004D99;
+            padding-left: 2rem;
+            padding-right: 2rem;
+        }
+        /* Aggiungi margine ai lati del footer */
+        .it-footer-main .container {
+            background-color: #004D99;
+            padding-left: 2rem;
+            padding-right: 2rem;
+        }
+
+        /* 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 */
+        }
+
+        /* Stile per il footer */
+        .data-table {
+            margin-top: 20px;
+        }
+
+        .filter-section {
+            margin-bottom: 20px;
+        }
+
+        .pagination {
+            margin-top: 20px;
+        }
+        .form-modifica *  {
+            font-size: 12px;
+        }
+    </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  è troppo stretto segue la linea della pagina  -->
+    <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">Gestione Dati Immobiliari</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>
+    <div class="container mt-4">
+        <div class="filter-section">
+            <div class="row mt-3 mb-3">
+                <!-- Filtro per codice utente (solo per amministratore) -->
+                <div class="col-md-4 flex-column gap-4" id="userFilterSection" style="display: none;">
+                    <label for="userFilter">Filtra per Codice Utente</label>
+                    <input type="text" class="form-control" id="userFilter" placeholder="Inserisci codice utente">
+                </div>
+                <!-- Filtro per indirizzo -->
+                <div class="col-md-4 d-flex flex-column gap-4">
+                    <label for="addressFilter">Filtra per Indirizzo</label>
+                    <input type="text" class="form-control" id="addressFilter" placeholder="Inserisci indirizzo">
+                </div>
+                <!-- Filtro per data -->
+                <div class="col-md-4 d-flex flex-column gap-4">
+                    <label for="dateFilter">Filtra per Data</label>
+                    <input type="date" class="form-control" id="dateFilter">
+                </div>
+            </div>
+            <div class="container mt-4">
+                <div class="filter-section">
+                    <div class="row mt-3 mb-3">
+                        </div>
+                    <button class="btn btn-primary" onclick="filtraDati()">Applica Filtri</button>
+                    <button class="btn btn-secondary" onclick="azzeraFiltri()">Azzera Filtri</button> </div>
+            
+                </div>
+        </div>
+
+        <table class="table data-table">
+            <thead>
+                <tr>
+                    <th>ID Utente</th>
+                    <th>Indirizzo</th>
+                    <th>Latitudine</th>
+                    <th>Longitudine</th>
+                    <th>Codice Catastale</th>
+                    <th>Data Predisposizione</th>
+                    <th>Azioni</th>
+                </tr>
+            </thead>
+            <tbody id="dataTableBody">
+                <!-- Dati verranno caricati qui dinamicamente -->
+            </tbody>
+        </table>
+
+        <!-- Paginazione -->
+        <nav aria-label="Paginazione">
+            <ul class="pagination" id="pagination">
+                <!-- Pulsanti di paginazione verranno aggiunti qui dinamicamente -->
+            </ul>
+        </nav>
+    </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>
+    <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>
+
+
+
+    <script>
+        // Dati di esempio (simulazione di un database)
+        const dati = [
+            { idUtente: 1, indirizzo: "Via Roma 1", latitudine: "41.9028", longitudine: "12.4964", codiceCatastale: "A123", dataPredisposizione: "2023-10-01" },
+            { idUtente: 2, indirizzo: "Via Milano 2", latitudine: "45.4642", longitudine: "9.1900", codiceCatastale: "B456", dataPredisposizione: "2023-10-02" },
+            { idUtente: 1, indirizzo: "Via Napoli 3", latitudine: "40.8522", longitudine: "14.2681", codiceCatastale: "C789", dataPredisposizione: "2023-10-03" },
+            { idUtente: 3, indirizzo: "Via Torino 4", latitudine: "45.0703", longitudine: "7.6869", codiceCatastale: "D012", dataPredisposizione: "2023-10-04" },
+            { idUtente: 2, indirizzo: "Via Firenze 5", latitudine: "43.7696", longitudine: "11.2558", codiceCatastale: "E345", dataPredisposizione: "2023-10-05" },
+            { idUtente: 1, indirizzo: "Via Venezia 6", latitudine: "45.4408", longitudine: "12.3155", codiceCatastale: "F678", dataPredisposizione: "2023-10-06" },
+        ];
+
+        // Simulazione del ruolo utente (1 = operatore, 2 = amministratore)
+        const ruoloUtente = 2; // Cambia questo valore per testare
+        const idUtenteCorrente = 1; // ID dell'utente corrente (solo per operatori)
+
+        // Mostra/nascondi il filtro per codice utente in base al ruolo
+        if (ruoloUtente === 2) {
+            document.getElementById('userFilterSection').style.display = 'flex';
+        }
+
+        // Variabili per la paginazione
+        const righePerPagina = 3; // Numero di righe da visualizzare per pagina
+        let paginaCorrente = 1;
+
+        // Funzione per filtrare i dati
+        function filtraDati() {
+            const userFilter = document.getElementById('userFilter').value.toLowerCase();
+            const addressFilter = document.getElementById('addressFilter').value.toLowerCase();
+            const dateFilter = document.getElementById('dateFilter').value;
+
+            const datiFiltrati = dati.filter(item => {
+                const matchUser = ruoloUtente === 2 ? item.idUtente.toString().includes(userFilter) : item.idUtente === idUtenteCorrente;
+                const matchAddress = item.indirizzo.toLowerCase().includes(addressFilter);
+                const matchDate = dateFilter ? item.dataPredisposizione === dateFilter : true;
+
+                return matchUser && matchAddress && matchDate;
+            });
+
+            caricaDatiInTabella(datiFiltrati);
+            aggiornaPaginazione(datiFiltrati);
+        }
+
+        // Funzione per caricare i dati nella tabella
+        function caricaDatiInTabella(dati) {
+            const tbody = document.getElementById('dataTableBody');
+            tbody.innerHTML = ''; // Svuota la tabella
+
+            const inizio = (paginaCorrente - 1) * righePerPagina;
+            const fine = inizio + righePerPagina;
+            const datiPagina = dati.slice(inizio, fine);
+
+            datiPagina.forEach(item => {
+                const row = `
+                    <tr>
+                        <td>${item.idUtente}</td>
+                        <td>${item.indirizzo}</td>
+                        <td>${item.latitudine}</td>
+                        <td>${item.longitudine}</td>
+                        <td>${item.codiceCatastale}</td>
+                        <td>${item.dataPredisposizione}</td>
+                        <td>
+                            <button class="btn btn-sm btn-primary" onclick="modificaDato(${item.idUtente})"><i class="fas fa-edit"></i></button>
+                            <button class="btn btn-sm btn-danger" onclick="cancellaDato(${item.idUtente})"><i class="fas fa-trash"></i></button>
+                        </td>
+                    </tr>
+                `;
+                tbody.innerHTML += row;
+            });
+        }
+
+        // Funzione per aggiornare la paginazione
+        function aggiornaPaginazione(dati) {
+            const pagination = document.getElementById('pagination');
+            pagination.innerHTML = ''; // Svuota la paginazione
+
+            const totalePagine = Math.ceil(dati.length / righePerPagina);
+
+            // Pulsante "Precedente"
+            pagination.innerHTML += `
+                <li class="page-item ${paginaCorrente === 1 ? 'disabled' : ''}">
+                    <a class="page-link" href="#" onclick="cambiaPagina(${paginaCorrente - 1})">Precedente</a>
+                </li>
+            `;
+
+            // Numeri di pagina
+            for (let i = 1; i <= totalePagine; i++) {
+                pagination.innerHTML += `
+                    <li class="page-item ${i === paginaCorrente ? 'active' : ''}">
+                        <a class="page-link" href="#" onclick="cambiaPagina(${i})">${i}</a>
+                    </li>
+                `;
+            }
+
+            // Pulsante "Successivo"
+            pagination.innerHTML += `
+                <li class="page-item ${paginaCorrente === totalePagine ? 'disabled' : ''}">
+                    <a class="page-link" href="#" onclick="cambiaPagina(${paginaCorrente + 1})">Successivo</a>
+                </li>
+            `;
+        }
+
+        // Funzione per cambiare pagina
+        function cambiaPagina(nuovaPagina) {
+            paginaCorrente = nuovaPagina;
+            filtraDati();
+        }
+
+        // Funzioni di esempio per modifica e cancellazione
+        function modificaDato(idUtente) {
+    const riga = document.querySelector(`tr[data-id="${idUtente}"]`);
+    if (!riga) return;
+
+    const celle = riga.cells;
+    const dati = {
+        idUtente: celle[0].textContent,
+        indirizzo: celle[1].textContent,
+        latitudine: celle[2].textContent,
+        longitudine: celle[3].textContent,
+        codiceCatastale: celle[4].textContent,
+        dataPredisposizione: celle[5].textContent,
+    };
+
+    const formModifica = `
+        <td colspan="6">
+            <form class="form-modifica d-flex">
+                <div class="row flex-nowrap">
+                    <div class="col-md-2 d-flex flex-column gap-1">
+                        <label for="modificaIdUtente">Id</label>
+                        <input type="text" class="form-control" id="modificaIdUtente" ${ruoloUtente === 2 ? '' : 'disabled'} value="${dati.idUtente}">
+                    </div>
+                    <div class="col-md-2 d-flex flex-column gap-1">
+                        <label for="modificaIndirizzo">Indirizzo</label>
+                        <input type="text" class="form-control" id="modificaIndirizzo" value="${dati.indirizzo}">
+                    </div>
+                    <div class="col-md-2 d-flex flex-column gap-1">
+                        <label for="modificaLatitudine">Latitudine</label>
+                        <input type="text" class="form-control" id="modificaLatitudine" value="${dati.latitudine}">
+                    </div>
+                    <div class="col-md-2 d-flex flex-column gap-1">
+                        <label for="modificaLongitudine">Longitudine</label>
+                        <input type="text" class="form-control" id="modificaLongitudine" value="${dati.longitudine}">
+                    </div>
+                    <div class="col-md-2 d-flex flex-column gap-1">
+                        <label for="modificaCodiceCatastale">Codice Catastale</label>
+                        <input type="text" class="form-control" id="modificaCodiceCatastale" value="${dati.codiceCatastale}">
+                    </div>
+                    <div class="col-md-2 d-flex flex-column gap-1">
+                        <label for="modificaData">Data Predisposizione</label>
+                        <input type="date" class="form-control" id="modificaData" value="${dati.dataPredisposizione}">
+                    </div>
+                    <div class="text-right col-md-1">
+                        <button type="button" class="btn btn-success btn-sm" onclick="confermaModifica(${idUtente})">Conferma</button>
+                    </div>
+                </div>
+            </form>
+        </td>
+    `;
+
+    riga.innerHTML = formModifica;
+}
+        // Funzione per confermare la modifica
+        function confermaModifica(idUtente) {
+    // Trova la riga della tabella corrispondente all'ID utente
+    const riga = document.querySelector(`tr[data-id="${idUtente}"]`);
+    if (!riga) return;
+
+    let NewidUtente = idUtente;
+    // Recupera i valori modificati dal form
+    if (ruoloUtente === 2) {
+        NewidUtente = document.getElementById('modificaIdUtente').value;
+    }
+
+    const indirizzo = document.getElementById('modificaIndirizzo').value;
+    const latitudine = document.getElementById('modificaLatitudine').value;
+    const longitudine = document.getElementById('modificaLongitudine').value;
+    const codiceCatastale = document.getElementById('modificaCodiceCatastale').value;
+    const dataPredisposizione = document.getElementById('modificaData').value;
+
+    // Aggiorna l'array `dati` con i nuovi valori
+    const indice = dati.findIndex(item => item.idUtente === idUtente);
+    if (indice !== -1) {
+        dati[indice] = {
+            idUtente: parseInt(NewidUtente),
+            indirizzo,
+            latitudine,
+            longitudine,
+            codiceCatastale,
+            dataPredisposizione
+        };
+    }
+
+    // Ricarica la tabella per riflettere le modifiche
+    filtraDati();
+}
+// Funzione per azzerare i filtri
+function azzeraFiltri() {
+    document.getElementById('userFilter').value = '';
+    document.getElementById('addressFilter').value = '';
+    document.getElementById('dateFilter').value = '';
+    paginaCorrente = 1; // Resetta la pagina corrente
+    filtraDati(); // Ricarica i dati senza filtri
+}
+function caricaDatiInTabella(dati) {
+    const tbody = document.getElementById('dataTableBody');
+    tbody.innerHTML = ''; // Svuota la tabella
+
+    const inizio = (paginaCorrente - 1) * righePerPagina;
+    const fine = inizio + righePerPagina;
+    const datiPagina = dati.slice(inizio, fine);
+
+    datiPagina.forEach(item => {
+        const row = `
+            <tr data-id="${item.idUtente}">
+                <td>${item.idUtente}</td>
+                <td>${item.indirizzo}</td>
+                <td>${item.latitudine}</td>
+                <td>${item.longitudine}</td>
+                <td>${item.codiceCatastale}</td>
+                <td>${item.dataPredisposizione}</td>
+                <td>
+                    <button class="btn btn-sm btn-primary" onclick="modificaDato(${item.idUtente})"><i class="fas fa-edit"></i></button>
+                    <button class="btn btn-sm btn-danger" onclick="cancellaDato(${item.idUtente})"><i class="fas fa-trash"></i></button>
+                </td>
+            </tr>
+        `;
+        tbody.innerHTML += row;
+    });
+}
+        // Funzione per cancellare un dato
+        function cancellaDato(idUtente) {
+            if (confirm("Sei sicuro di voler eliminare questo dato?")) {
+                // L'utente ha confermato l'eliminazione
+                // 1. Rimuovi la riga dalla tabella
+                const riga = document.querySelector(`tr[data-id="${idUtente}"]`);
+                if (riga) {
+                    riga.remove();
+                }
+
+                // 2. Aggiorna l'array 'dati' rimuovendo l'elemento corrispondente
+                const indice = dati.findIndex(item => item.idUtente === idUtente);
+                if (indice !== -1) {
+                    dati.splice(indice, 1);
+                }
+
+                // 3. Aggiorna la paginazione e la visualizzazione della tabella
+                aggiornaPaginazione(dati);
+                caricaDatiInTabella(dati);
+                alert(`Cancella dato per utente ${idUtente}`);
+            } else {
+                // L'utente ha annullato l'eliminazione
+                alert("Eliminazione annullata.");
+            }
+        }
+
+        // Carica i dati iniziali
+        filtraDati();
+    </script>
+    
+</body>
+
+</html>

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>

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>

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>

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>

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>

Backend/templates/mappa_login.html

@@ -0,0 +1,370 @@
+<!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="/access" class="logo-link">
+                        <div class="logo">PW</div>
+                    </a>
+                    <h1 class="header-title">Mappa</h1> <!-- Titolo "Mappa" con la stessa grandezza -->
+                </div>
+                <div class="col-auto">
+                    <a href="/access" class="btn btn-light">Login</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 -->
+    <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>

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>

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>