chore: separate JS and CSS files from HTML

README.md

@@ -1,8 +1,61 @@
 # SPORE UI
 
-## TODO
+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
+- **⚡ Auto-refresh**: Keeps data current every 30 seconds
+- **📱 Responsive**: Works on all devices and screen sizes
+
+## 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
+```
+
+## Completed Tasks
 
 - [x] bootstrap an express.js app that serves a simple html page
 - [x] generate js client from api/openapi.yaml
 - [x] use getClusterStatus client function to get all members and display these members on the html page, use only vanilla JS
-- [x] when clicking on one of the members in the UI, it should expand and display all informations from /api/node/status
+- [x] when clicking on one of the members in the UI, it should expand and display all informations from /api/node/status
+- [x] create separate files for CSS and JS
+
+## 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