From 52a6ac39df346b4144950cb0659130463763409a Mon Sep 17 00:00:00 2001
From: ReLoia <zrennyz@gmail.com>
Date: Wed, 10 Jun 2026 23:20:56 +0200
Subject: [PATCH] feat: add legal and information pages

- Create info page with project overview and system architecture
- Document user roles: Citizens, Operators, and Administrators
- Add technology stack details (Vue/Nuxt frontend, C++/Drogon backend)
- Include open data and ethical code philosophy sections
- Add privacy policy page with data processing information
- Add legal terms page (note-legali)
- Add open data page for transparency
- Set appropriate page titles via useHead composable

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 app/pages/info.vue        | 173 ++++++++++++++++++++++++++++++++-
 app/pages/note-legali.vue |  71 +++++++++++++-
 app/pages/open-data.vue   | 198 +++++++++++++++++++++++++++++++++++++-
 app/pages/privacy.vue     |  83 +++++++++++++++-
 4 files changed, 511 insertions(+), 14 deletions(-)

diff --git a/app/pages/info.vue b/app/pages/info.vue
index af94be9..5fb809e 100644
--- a/app/pages/info.vue
+++ b/app/pages/info.vue
@@ -1,11 +1,178 @@
 <script setup lang="ts">
-
+// La pagina è statica, usiamo solo i componenti UI
+useHead({
+  title: 'Informazioni sul Progetto - Visione',
+})
 </script>
 
 <template>
-  $END$
+  <div>
+    <!-- HERO SECTION (Senza pt-5/mt-5 come richiesto) -->
+    <div class="it-hero-wrapper it-primary">
+      <div class="container">
+        <div class="row">
+          <div class="col-12 text-center">
+            <div class="it-hero-text-wrapper p-4">
+              <h1 class="text-white font-weight-bold">Il Progetto Visione</h1>
+              <p class="text-white mt-3 lead font-weight-semibold">
+                La piattaforma digitale per la gestione intelligente delle segnalazioni urbane,
+                pensata per avvicinare cittadini e pubblica amministrazione.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- OBIETTIVO DEL PROGETTO -->
+    <div class="container my-5 py-3">
+      <div class="row">
+        <div class="col-12 col-lg-8 offset-lg-2">
+          <h2 class="mb-4 font-weight-bold">Migliorare la qualità della vita in città</h2>
+          <p class="lead text-muted">
+            Visione nasce dall'esigenza di fornire alle amministrazioni comunali uno strumento moderno per mappare, gestire e risolvere disservizi presenti sul territorio (buche stradali, illuminazione guasta, rifiuti abbandonati).
+          </p>
+          <p>
+            Il sistema non si limita a raccogliere dati, ma automatizza l'assegnazione alle squadre operative competenti tramite logiche geospaziali, traccia l'intero ciclo di vita della segnalazione e restituisce trasparenza ai cittadini tramite un portale Open Data dedicato.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- RUOLI E FUNZIONALITÀ (Card Grid) -->
+    <div class="bg-light py-5">
+      <div class="container">
+        <h2 class="text-center mb-5 font-weight-bold">Come funziona il sistema</h2>
+        <div class="row">
+
+          <!-- Cittadino -->
+          <div class="col-12 col-md-4 mb-4">
+            <div class="card-wrapper card-space h-100">
+              <div class="card card-bg h-100">
+                <div class="card-body">
+                  <BIIcon name="it-user" size="xl" color="primary" class="mb-3" />
+                  <h3 class="card-title h5 font-weight-bold">Cittadini</h3>
+                  <p class="card-text text-muted">
+                    Tramite autenticazione sicura (OTP via email o CIE), i cittadini possono inviare segnalazioni geolocalizzate complete di foto.
+                    <br><br>
+                    Per incentivare la partecipazione, è integrato un sistema di <strong>gamification</strong>: ogni segnalazione valida e risolta fa guadagnare Punti Cittadino, premiando la cittadinanza attiva. Possono inoltre chattare con gli operatori e lasciare un feedback finale.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Operatore -->
+          <div class="col-12 col-md-4 mb-4">
+            <div class="card-wrapper card-space h-100">
+              <div class="card card-bg h-100">
+                <div class="card-body">
+                  <BIIcon name="it-tool" size="xl" color="primary" class="mb-3" />
+                  <h3 class="card-title h5 font-weight-bold">Operatori e Squadre</h3>
+                  <p class="card-text text-muted">
+                    Il personale comunale visualizza una dashboard con le segnalazioni in ingresso. Possono prenderle in carico, comunicare con l'utente e assegnarle alle squadre di intervento sul territorio.
+                    <br><br>
+                    Il sistema gestisce l'intero flusso di stato: da <em>Aperta</em> a <em>In Revisione</em>, fino a <em>In Lavorazione</em> e <em>Risolta</em>.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Amministratore -->
+          <div class="col-12 col-md-4 mb-4">
+            <div class="card-wrapper card-space h-100">
+              <div class="card card-bg h-100">
+                <div class="card-body">
+                  <BIIcon name="it-settings" size="xl" color="primary" class="mb-3" />
+                  <h3 class="card-title h5 font-weight-bold">Amministrazione</h3>
+                  <p class="card-text text-muted">
+                    Gli amministratori hanno il controllo completo della piattaforma. Possono definire le aree urbane (tramite poligoni GeoJSON), gestire i permessi degli utenti, supervisionare i feedback e moderare eventuali abusi.
+                    <br><br>
+                    Hanno inoltre accesso a statistiche avanzate per individuare le criticità sul territorio e monitorare i tempi medi di risoluzione.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    <!-- STACK TECNOLOGICO E FILOSOFIA -->
+    <div class="container my-5 py-4">
+      <div class="row align-items-center">
+        <div class="col-12 col-lg-6 mb-4 mb-lg-0">
+          <h2 class="font-weight-bold mb-4">Tecnologia e Indipendenza</h2>
+          <ul class="it-list">
+            <li>
+              <BIIcon name="it-code-circle" color="primary" class="me-2" />
+              <strong>Architettura:</strong> Frontend reattivo e multipiattaforma sviluppato in <em>Vue.js/Nuxt 3</em>. Backend ad altissime prestazioni scritto in <em>C++</em> utilizzando il framework <em>Drogon</em>.
+            </li>
+            <li class="mt-3">
+              <BIIcon name="it-lock" color="primary" class="me-2" />
+              <strong>Sicurezza:</strong> Login Passwordless (OTP nativo) e sistema di autorizzazione Role-Based basato su token JWT.
+            </li>
+            <li class="mt-3">
+              <BIIcon name="it-piu" color="primary" class="me-2" />
+              <strong>Open Data:</strong> Piena aderenza alle linee guida AGID sulla trasparenza, con esportazione di dati anonimizzati accessibili al pubblico.
+            </li>
+          </ul>
+        </div>
+        <div class="col-12 col-lg-5 offset-lg-1">
+          <!-- Callout Ribellione Gitea -->
+          <div class="callout callout-highlight callout-warning">
+            <div class="callout-title">
+              <BIIcon name="it-warning-circle" />
+              Un approccio etico al codice sorgente
+            </div>
+            <p>
+              In risposta alle policy sempre più aggressive delle grandi piattaforme commerciali riguardo l'addestramento non consensuale di modelli di Intelligenza Artificiale sui repository privati, lo sviluppo di questo progetto è ospitato su un'istanza <strong>self-hosted di Gitea</strong>.
+              <br><br>
+              Una scelta di principio per garantire il controllo totale, la privacy e la vera sovranità sui dati e sul codice.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- CREDITI ACCADEMICI (Footer Style Callout) -->
+    <div class="container mb-5 pb-5">
+      <div class="card-wrapper card-space">
+        <div class="card card-bg border-start border-primary border-5">
+          <div class="card-body">
+            <div class="row align-items-center">
+              <div class="col-12 col-md-8">
+                <h4 class="h5 font-weight-bold text-primary mb-2">Crediti Accademici</h4>
+                <p class="mb-1">
+                  Questo progetto è stato realizzato nell'ambito del corso di <strong>Laboratorio di Programmazione</strong> (tenuto dal Prof. Vessio).
+                </p>
+                <p class="text-muted small mb-0">
+                  Università degli Studi di Bari "Aldo Moro" - Dipartimento di Informatica.
+                </p>
+              </div>
+              <div class="col-12 col-md-4 mt-3 mt-md-0 text-md-end">
+                <p class="font-weight-bold mb-1">Sviluppato da:</p>
+                <ul class="list-unstyled mb-0">
+                  <li>Renato Loiacono</li>
+                  <li>Michelangelo Parisi</li>
+                  <li>Gabriele Schiraldi</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
 </template>
 
 <style scoped>
-
+/* Leggere correzioni stilistiche per le liste */
+.it-list {
+  list-style-type: none;
+  padding-left: 0;
+}
 </style>
\ No newline at end of file
diff --git a/app/pages/note-legali.vue b/app/pages/note-legali.vue
index af94be9..d58908e 100644
--- a/app/pages/note-legali.vue
+++ b/app/pages/note-legali.vue
@@ -1,11 +1,72 @@
 <script setup lang="ts">
-
+useHead({
+  title: 'Note Legali - Visione',
+})
 </script>
 
 <template>
-  $END$
-</template>
+  <div>
+    <!-- HERO SECTION -->
+    <div class="it-hero-wrapper it-primary">
+      <div class="container">
+        <div class="row">
+          <div class="col-12 text-center">
+            <div class="it-hero-text-wrapper p-4">
+              <h1 class="text-white font-weight-bold">Note Legali</h1>
+              <p class="text-white mt-3 lead font-weight-semibold">
+                Termini e condizioni di utilizzo della piattaforma Visione.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
 
-<style scoped>
+    <!-- CONTENUTO PRINCIPALE -->
+    <div class="container my-5 py-4">
+      <div class="row">
+        <div class="col-12 col-lg-8 offset-lg-2">
 
-</style>
\ No newline at end of file
+          <h2 class="h3 font-weight-bold mb-3">1. Condizioni generali d'uso</h2>
+          <p class="text-muted mb-4">
+            Il presente documento definisce le condizioni generali di utilizzo del portale web "Visione" (di seguito, "Piattaforma"). L'accesso, la navigazione e l'utilizzo della Piattaforma comportano l'accettazione esplicita delle presenti note legali. Gli utenti sono invitati a leggere attentamente questo documento prima di utilizzare i servizi offerti.
+          </p>
+
+          <h2 class="h3 font-weight-bold mb-3">2. Finalità della piattaforma</h2>
+          <p class="text-muted mb-4">
+            Visione è uno strumento digitale concepito per facilitare la comunicazione tra i cittadini e la Pubblica Amministrazione. Consente agli utenti registrati di inviare segnalazioni relative a disservizi urbani (es. buche, guasti all'illuminazione, rifiuti), allegando materiale fotografico e dati di geolocalizzazione, al fine di snellire i processi di intervento delle squadre comunali.
+          </p>
+
+          <h2 class="h3 font-weight-bold mb-3">3. Proprietà intellettuale e Codice Sorgente</h2>
+          <p class="text-muted mb-4">
+            In un'ottica di totale trasparenza e indipendenza etica, il codice sorgente del progetto "Visione" è sviluppato e mantenuto su un'istanza self-hosted di <strong>Gitea</strong>. Tutti i diritti sui loghi, testi, e architettura del software, ove non diversamente specificato da licenze Open Source, appartengono ai rispettivi autori.
+            È severamente vietato l'utilizzo di script automatizzati per l'estrazione massiva di dati dalla Piattaforma, ad eccezione degli endpoint ufficiali forniti nella sezione Open Data.
+          </p>
+
+          <h2 class="h3 font-weight-bold mb-3">4. Limitazione di responsabilità</h2>
+          <p class="text-muted mb-4">
+            L'Amministrazione e gli sviluppatori si impegnano a garantire l'aggiornamento e l'accuratezza delle informazioni presenti sulla Piattaforma. Tuttavia, non si assumono alcuna responsabilità per eventuali ritardi, disservizi o per la mancata e/o ritardata risoluzione delle problematiche segnalate dagli utenti. Le segnalazioni inserite non hanno valore di denuncia formale alle Autorità di Pubblica Sicurezza. In caso di emergenze, i cittadini sono tenuti a contattare direttamente il Numero Unico Europeo per le Emergenze (112).
+          </p>
+
+          <h2 class="h3 font-weight-bold mb-3">5. Moderazione e Abusi</h2>
+          <p class="text-muted mb-5">
+            Gli operatori e gli amministratori di sistema si riservano il diritto di moderare, nascondere o rimuovere segnalazioni contenenti materiale inappropriato, offensivo, non pertinente o illegale. L'abuso ripetuto del sistema comporterà il ban permanente dell'account dell'utente, associato al proprio Codice Fiscale.
+          </p>
+
+          <!-- DISCLAIMER ACCADEMICO -->
+          <div class="callout callout-highlight callout-info mt-5">
+            <div class="callout-title">
+              <BIIcon name="it-info-circle" />
+              Disclaimer di Progetto Accademico
+            </div>
+            <p>
+              "Visione" è un progetto software realizzato esclusivamente per finalità didattiche all'interno del corso di <em>Laboratorio di Programmazione</em> (Prof. Vessio) presso l'<strong>Università degli Studi di Bari "Aldo Moro"</strong>.
+              <br>Autori: Renato Loiacono, Michelangelo Parisi e Gabriele Schiraldi. <br>I dati elaborati in questa istanza hanno scopo puramente dimostrativo e non costituiscono un reale servizio comunale attivo.
+            </p>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/app/pages/open-data.vue b/app/pages/open-data.vue
index af94be9..eb012b4 100644
--- a/app/pages/open-data.vue
+++ b/app/pages/open-data.vue
@@ -1,11 +1,205 @@
 <script setup lang="ts">
+import { ref, computed } from 'vue'
 
+// 1. API Fetching Logic
+const { getOpenDataReports } = usePublic()
+
+// Reactive pagination state
+const currentPage = ref(1)
+const perPage = ref(9)
+
+// Fetch data automatically when currentPage changes
+const { data: openDataResponse, pending } = await useAsyncData(
+    'open-data-reports',
+    () => getOpenDataReports({ page: currentPage.value, per_page: perPage.value }),
+    { watch: [currentPage] } // Nuxt will re-fetch when currentPage changes
+)
+
+// Pagination logic: If we receive less items than `perPage`, we are on the last page.
+const isLastPage = computed(() => {
+  if (!openDataResponse.value?.reports) return true
+  return openDataResponse.value.reports.length < perPage.value
+})
+
+const nextPage = () => {
+  if (!isLastPage.value) currentPage.value++
+}
+const prevPage = () => {
+  if (currentPage.value > 1) currentPage.value--
+}
+
+// 2. View Toggle (Grid vs Map)
+const currentView = ref<'grid' | 'map'>('grid')
+
+// 3. Helper to style status badges
+const getStatusBadge = (status: string) => {
+  switch (status) {
+    case 'RESOLVED': return { class: 'bg-success', text: 'Risolto', icon: 'it-check-circle' }
+    case 'CLOSED': return { class: 'bg-secondary', text: 'Chiuso', icon: 'it-lock' }
+    default: return { class: 'bg-info', text: status, icon: 'it-info-circle' }
+  }
+}
 </script>
 
 <template>
-  $END$
+  <div>
+    <!-- HERO SECTION (Small version for internal pages) -->
+    <div class="it-hero-wrapper it-primary">
+      <div class="container">
+        <div class="row">
+          <div class="col-12">
+            <div class="it-hero-text-wrapper p-4">
+              <h1 class="text-white font-weight-bold">Open Data Interventi</h1>
+              <p class="text-white mt-2 lead">
+                Esplora i dati pubblici degli interventi urbani risolti. La trasparenza al servizio del cittadino.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- MAIN CONTENT -->
+    <div class="container my-5">
+
+      <!-- TOOLBAR: View Toggles & Export -->
+      <div class="row align-items-center mb-5 pb-3 border-bottom">
+        <div class="col-12 col-md-6 mb-3 mb-md-0 d-flex gap-2">
+          <!-- View Toggle Buttons -->
+          <button
+              class="btn btn-sm"
+              :class="currentView === 'grid' ? 'btn-primary' : 'btn-outline-primary'"
+              @click="currentView = 'grid'"
+          >
+            <BIIcon name="it-grid" size="sm" class="me-1" :color="currentView === 'grid' ? 'white' : 'primary'" />
+            Griglia Dati
+          </button>
+          <button
+              class="btn btn-sm"
+              :class="currentView === 'map' ? 'btn-primary' : 'btn-outline-primary'"
+              @click="currentView = 'map'"
+          >
+            <BIIcon name="it-map-marker" size="sm" class="me-1" :color="currentView === 'map' ? 'white' : 'primary'" />
+            Mappa
+          </button>
+        </div>
+        <div class="col-12 col-md-6 text-md-end">
+          <!-- Fake Export CTA (Very common in Open Data portals) -->
+          <button class="btn btn-sm btn-outline-secondary" title="Scarica dataset in formato JSON">
+            <BIIcon name="it-download" size="sm" class="me-1" />
+            Scarica JSON
+          </button>
+        </div>
+      </div>
+
+      <!-- LOADER -->
+      <div v-if="pending" class="d-flex justify-content-center my-5 py-5">
+        <div class="progress-spinner progress-spinner-active" role="status">
+          <span class="visually-hidden">Caricamento in corso...</span>
+        </div>
+      </div>
+
+      <!-- GRID VIEW -->
+      <div v-else-if="currentView === 'grid'">
+        <div class="row" v-if="openDataResponse?.reports && openDataResponse.reports.length > 0">
+          <div class="col-12 col-md-6 col-lg-4 mb-4" v-for="report in openDataResponse.reports" :key="report.id">
+            <!-- Strict BI Card -->
+            <div class="card-wrapper card-space h-100">
+              <div class="card card-bg h-100 shadow-sm">
+                <div class="card-body d-flex flex-column">
+
+                  <div class="d-flex justify-content-between align-items-start mb-3">
+                    <div class="category-top m-0">
+                      <span class="badge rounded-pill text-white px-3 py-1" :class="getStatusBadge(report.status).class">
+                        <BIIcon :name="getStatusBadge(report.status).icon" size="xs" color="white" class="me-1" />
+                        {{ getStatusBadge(report.status).text }}
+                      </span>
+                    </div>
+                    <span class="text-muted small">ID: #{{ report.id }}</span>
+                  </div>
+
+                  <h3 class="card-title h5 font-weight-bold">{{ report.category_name }}</h3>
+
+                  <p class="card-text text-muted mb-4">
+                    <BIIcon name="it-map-marker-circle" size="sm" class="me-1" />
+                    {{ report.area_name || 'Area comunale non specificata' }}
+                  </p>
+
+                  <div class="mt-auto pt-3 border-top">
+                    <div class="row text-muted small">
+                      <div class="col-6">
+                        <div class="fw-bold text-uppercase">Segnalato</div>
+                        <div>{{ new Date(report.created_at).toLocaleDateString('it-IT') }}</div>
+                      </div>
+                      <div class="col-6 text-end">
+                        <div class="fw-bold text-uppercase">Risolto</div>
+                        <div>{{ new Date(report.updated_at).toLocaleDateString('it-IT') }}</div>
+                      </div>
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-else class="alert alert-warning text-center" role="alert">
+          Nessun dato pubblico disponibile al momento.
+        </div>
+
+        <!-- BOOTSTRAP ITALIA PAGINATION -->
+        <nav class="pagination-wrapper justify-content-center mt-5" aria-label="Navigazione pagine open data">
+          <ul class="pagination">
+            <li class="page-item" :class="{ disabled: currentPage === 1 }">
+              <a class="page-link" href="#" tabindex="-1" aria-disabled="true" @click.prevent="prevPage">
+                <BIIcon name="it-chevron-left" size="sm" />
+                <span class="visually-hidden">Pagina precedente</span>
+              </a>
+            </li>
+            <li class="page-item">
+              <span class="page-link font-weight-semibold">Pagina {{ currentPage }}</span>
+            </li>
+            <li class="page-item" :class="{ disabled: isLastPage }">
+              <a class="page-link" href="#" @click.prevent="nextPage">
+                <span class="visually-hidden">Pagina successiva</span>
+                <BIIcon name="it-chevron-right" size="sm" />
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+
+      <!-- MAP VIEW (Placeholder for Leaflet/Mapbox) -->
+      <div v-else-if="currentView === 'map'" class="map-view-wrapper">
+        <div class="alert alert-info d-flex align-items-center" role="alert">
+          <BIIcon name="it-info-circle" size="sm" class="me-3" />
+          <span>La visualizzazione mappa è un modulo interattivo (ad es. Leaflet o Mapbox) che utilizzerà le coordinate <strong>latitudine</strong> e <strong>longitudine</strong> fornite dalle API.</span>
+        </div>
+        <div class="bg-light border rounded d-flex align-items-center justify-content-center" style="height: 500px;">
+          <div class="text-center text-muted">
+            <BIIcon name="it-map" size="xl" class="mb-3 opacity-50" />
+            <h4 class="h5">Mappa Interattiva</h4>
+            <p>Caricamento dei {{ openDataResponse?.reports?.length || 0 }} punti geografici in corso...</p>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
 </template>
 
 <style scoped>
-
+/* Ensures the cards inside the grid stretch to equal heights */
+.card-wrapper {
+  height: 100%;
+}
+.card-bg {
+  border: 1px solid rgba(0,0,0,0.05);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.card-bg:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
+}
 </style>
\ No newline at end of file
diff --git a/app/pages/privacy.vue b/app/pages/privacy.vue
index 96c0baf..92fee73 100644
--- a/app/pages/privacy.vue
+++ b/app/pages/privacy.vue
@@ -1,11 +1,86 @@
 <script setup lang="ts">
-
+useHead({
+  title: 'Privacy Policy - Visione',
+})
 </script>
 
 <template>
+  <div>
+    <!-- HERO SECTION -->
+    <div class="it-hero-wrapper it-primary">
+      <div class="container">
+        <div class="row">
+          <div class="col-12 text-center">
+            <div class="it-hero-text-wrapper p-4">
+              <h1 class="text-white font-weight-bold">Informativa sulla Privacy</h1>
+              <p class="text-white mt-3 lead font-weight-semibold">
+                Trattamento dei dati personali ai sensi del Regolamento (UE) 2016/679 (GDPR).
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
 
-</template>
+    <!-- CONTENUTO PRINCIPALE -->
+    <div class="container my-5 py-4">
+      <div class="row">
+        <div class="col-12 col-lg-8 offset-lg-2">
 
-<style scoped>
+          <div class="alert alert-info mb-5" role="alert">
+            <BIIcon name="it-info-circle" class="me-2" size="sm" />
+            La presente informativa descrive le modalità di gestione della piattaforma <strong>Visione</strong> in riferimento al trattamento dei dati personali degli utenti che la consultano e vi si registrano.
+          </div>
 
-</style>
\ No newline at end of file
+          <h2 class="h3 font-weight-bold mb-3">1. Titolare del Trattamento</h2>
+          <p class="text-muted mb-4">
+            Ai fini dell'attuale istanza dimostrativa, il Titolare del trattamento dei dati coincide con gli sviluppatori del progetto afferenti all'Università degli Studi di Bari "Aldo Moro" (Progetto Accademico). In uno scenario di produzione, il Titolare del trattamento sarà il Comune o l'Ente della Pubblica Amministrazione che adotta e ospita il software.
+          </p>
+
+          <h2 class="h3 font-weight-bold mb-3">2. Quali dati raccogliamo</h2>
+          <p class="text-muted mb-2">Per garantire il corretto funzionamento della piattaforma e prevenire abusi, vengono raccolte le seguenti categorie di dati:</p>
+          <ul class="mb-4 text-muted">
+            <li><strong>Dati anagrafici e di contatto:</strong> Nome, cognome, Codice Fiscale, indirizzo email, numero di telefono (opzionale), data e luogo di nascita.</li>
+            <li><strong>Dati di geolocalizzazione:</strong> Coordinate geografiche (Latitudine e Longitudine) e indirizzo associato alla segnalazione inviata dall'utente.</li>
+            <li><strong>Contenuti multimediali:</strong> Fotografie e descrizioni testuali caricate spontaneamente dall'utente per documentare il disservizio.</li>
+            <li><strong>Dati di navigazione:</strong> Indirizzi IP e timestamp generati automaticamente dai log di sistema per finalità di sicurezza e prevenzione frodi (accesso OTP).</li>
+          </ul>
+
+          <h2 class="h3 font-weight-bold mb-3">3. Finalità del Trattamento</h2>
+          <p class="text-muted mb-4">
+            I dati forniti verranno trattati esclusivamente per le seguenti finalità:
+            <br>- Consentire la registrazione e l'autenticazione sicura (incluso login Passwordless tramite OTP).
+            <br>- Gestire la presa in carico e la risoluzione delle segnalazioni urbane da parte delle squadre operative.
+            <br>- Fornire comunicazioni di servizio relative allo stato di avanzamento delle segnalazioni.
+            <br>- Attribuire punteggi virtuali all'utente nell'ambito del sistema di <em>Gamification</em> volto a incentivare la cittadinanza attiva.
+          </p>
+
+          <h2 class="h3 font-weight-bold mb-3">4. Dati Pubblici e Portale Open Data</h2>
+          <div class="card card-bg border-start border-info border-4 mb-4">
+            <div class="card-body">
+              <p class="mb-0 text-muted">
+                Visione promuove la trasparenza amministrativa. Tutte le segnalazioni chiuse o risolte confluiscono nel nostro Portale Open Data.
+                <strong>Prima della pubblicazione, i dati vengono severamente anonimizzati.</strong> Nessun dato personale (nome, cognome, codice fiscale o chat private) viene esposto. Vengono resi pubblici unicamente: Categoria dell'intervento, area geografica (es. quartiere), coordinate, e data di risoluzione.
+              </p>
+            </div>
+          </div>
+
+          <h2 class="h3 font-weight-bold mb-3">5. Misure di Sicurezza</h2>
+          <p class="text-muted mb-4">
+            Il trattamento dei dati è realizzato tramite strumenti informatici e telematici, con logiche strettamente correlate alle finalità sopra evidenziate. Il backend (sviluppato in ambiente C++ ad alte prestazioni) adotta protocolli sicuri di trasmissione e tecniche di cifratura avanzata per lo stoccaggio delle credenziali.
+          </p>
+
+          <h2 class="h3 font-weight-bold mb-3">6. Diritti dell'interessato</h2>
+          <p class="text-muted mb-5">
+            Ai sensi degli artt. 15-22 del GDPR, l'utente ha diritto di:
+            <br>- Ottenere la conferma dell'esistenza di dati personali che lo riguardano.
+            <br>- Chiedere la rettifica, l'aggiornamento o la cancellazione del proprio account e dei dati connessi.
+            <br>- Opporti al trattamento o chiederne la limitazione.
+            <br>Per esercitare tali diritti nell'ambito di questa istanza accademica, è possibile contattare gli sviluppatori o richiedere l'eliminazione direttamente dalla propria area riservata.
+          </p>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file