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 <[email protected]>
This commit is contained in:
Copilot
+170
-3
@@ -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>
|
||||
Reference in New Issue
Block a user