CIVIA — Frontend

Interfaz de CIVIA AI · Arquitectura inteligente: aplicación web instalable (PWA) para escritorio, tableta y móvil, con estética de lujo derivada del logo (negro profundo, cristal cromado, resplandor ámbar y acero azulado).

Toda salida de CIVIA requiere revisión y aprobación del profesional responsable.

🌐 App en línea: civia-black.vercel.app · API: civia-api-i71z.onrender.com

Repositorio	Contenido	Tecnología
CIVIA-FRONTEND	Interfaz web (PWA, escritorio y móvil) y su servidor	HTML/CSS/JS + Three.js · servidor Java 21
CIVIA-BACKEND	API, CIVIA Auth, base de datos, archivos	Java 21 · Spring Boot 3.5 · H2/PostgreSQL
CIVIA-IA	Copilot, análisis de planos y modelos 3D, biblioteca	Java 21 · Claude (opcional) + motor local

Qué incluye

• Proyectos: revisión de la IA ("lo que hace falta"), fases, archivos con versiones y vista previa, kanban de tareas, presupuesto con AIU y exportación CSV, programa de espacios, equipo y bitácora.
• Planos: subida de PDF, DWG, DXF e imágenes; análisis con IA (escala, norte, rótulo, cotas, niveles, ejes, áreas, vanos, escaleras, accesibilidad…).
• Modelado 3D (Three.js): GLB, glTF, OBJ y STL con sombras, medición, notas ancladas, corte de sección, estudio solar, captura, análisis con IA y volumetría con IA exportable a GLB.
• Cámara: fotos de obra con ubicación opcional, fotos de planos con análisis inmediato y medición con objeto de referencia.
• CIVIA Copilot: responde en tiempo real (streaming) como un experto en ingeniería civil, con contexto del proyecto, planos adjuntos y fuentes citadas. Detener, regenerar, copiar y valorar respuestas; historial con búsqueda, fijadas, renombrar, exportar a Markdown y borrar.
• Biblioteca de ingeniería civil: una sola pregunta → respuesta con citas; 19 categorías (geotecnia, hidráulica, vías, topografía, puentes, seguridad en obra…), 144 artículos, 265 términos, artículo del día, búsquedas recientes, glosario por área y artículos propios editables.
• Seguridad de la cuenta: contraseña sin límite de longitud, verificación en dos pasos, sesiones activas.

Movimiento y efectos

Discretos y coherentes con la marca (líneas de plano, brillo dorado), en js/motion.js y la sección movimiento de css/app.css:

• Entrada escalonada de tarjetas, transición entre secciones e indicador deslizante del menú.
• Onda dorada al pulsar, brillo que sigue al cursor en las tarjetas y hundimiento al presionar.
• Portadas de proyecto que se dibujan trazo a trazo, cifras que cuentan desde cero, barras y anillos que se llenan.
• Chat con cursor de escritura, mensajes que entran desde su lado y botón para volver al final.
• Avisos con cuenta regresiva, diálogos y paneles con animación de salida, cambio de tema en círculo y vibración corta en el móvil.
• Todo se desactiva con "reducir movimiento" del sistema operativo.

Estructura

web/                 Interfaz (sin paso de compilación)
  index.html         Shell + splash
  css/app.css        Sistema visual (temas oscuro/claro)
  js/app.js          Arranque, sesión, enrutador, navegación
  js/api.js          Cliente de la API (token en memoria, refresco de vuelo único)
  js/ui.js           Plantillas seguras (escape automático), íconos, Markdown seguro, modales
  js/motion.js       Efectos de movimiento (respetan "reducir movimiento")
  js/views/*.js      Vistas cargadas bajo demanda
  vendor/three/      Three.js r170 local (sin CDN)
  sw.js              Service worker (nunca cachea /api)
server/CiviaWeb.java Servidor estático + proxy de la API (solo JDK 21)

Puesta en marcha

Lo más simple es arrancar CIVIA-BACKEND, que ya sirve esta interfaz en http://localhost:8080. Para servirla por separado:

java server/CiviaWeb.java --port 3000 --api http://localhost:8080

La cámara necesita HTTPS (o localhost) y permiso del navegador.

Arquitectura · Despliegue · Cómo contribuir · Seguridad