monitor/docs/frontend.md

Frontend Documentation

The frontend is a modern, responsive dashboard designed for high visibility and aesthetic appeal.

Design Principles

• Glassmorphism: Uses semi-transparent backgrounds with blur effects (backdrop-filter).
• Dark Mode: Optimized for low-light environments (NOC/Dashboard style).
• Vibrant Accents: Uses gradients and neon colors to highlight status and metrics.

Key Features

• Dynamic Gauges: Built with Chart.js to show CPU and RAM usage.
• Status Badges: Real-time color-coded badges (Online/Offline).
• Auto-Refresh: Polls the /api/status endpoint every 1 minute.
• Loading State: A smooth loading overlay that disappears once the first data batch is received.

UI Components

• Server Cards: Detailed metrics for PC and Raspberry Pi.
• Web Services List: Compact list of external services with latency tracking.
• Responsive Grid: Automatically adjusts layout based on screen size.