20 lines
966 B
Markdown
20 lines
966 B
Markdown
# 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.
|