# SPORE UI

A modern web interface for monitoring and managing SPORE embedded systems.

## Features

- **🌐 Cluster Monitoring**: Real-time view of all cluster members
- **📊 Node Details**: Expandable cards with detailed system information
- **🚀 Modern UI**: Beautiful glassmorphism design with smooth animations
- **📱 Responsive**: Works on all devices and screen sizes

![UI](./assets/ui.png)

## Project Structure

```
spore-ui/
├── index.js                 # Express.js backend server
├── api/
│   └── openapi.yaml        # API specification
├── src/
│   └── client/             # SPORE API client library
│       ├── index.js        # Main client class
│       ├── package.json    # Client package info
│       ├── README.md       # Client documentation
│       └── example.js      # Usage examples
├── public/                 # Frontend files
│   ├── index.html         # Main HTML page
│   ├── styles.css         # All CSS styles
│   ├── script.js          # All JavaScript functionality
│   └── README.md          # Frontend documentation
└── README.md              # This file
```

## Getting Started

1. **Install dependencies**: `npm install`
2. **Start the server**: `npm start`
3. **Open in browser**: `http://localhost:3001`

## API Endpoints

- **`/`** - Main UI page
- **`/api/cluster/members`** - Get cluster member information
- **`/api/tasks/status`** - Get task status
- **`/api/node/status`** - Get system status
- **`/api/node/status/:ip`** - Get status from specific node

## Technologies Used

- **Backend**: Express.js, Node.js
- **Frontend**: Vanilla JavaScript, CSS3, HTML5
- **API**: SPORE Embedded System API
- **Design**: Glassmorphism, CSS Grid, Flexbox