38 lines
1.1 KiB
Markdown
38 lines
1.1 KiB
Markdown
# SPORE UI Frontend
|
|
|
|
This directory contains the frontend files for the SPORE UI application.
|
|
|
|
## File Structure
|
|
|
|
- **`index.html`** - Main HTML page with minimal markup
|
|
- **`styles.css`** - All CSS styles and animations
|
|
- **`script.js`** - All JavaScript functionality and API interactions
|
|
|
|
## Features
|
|
|
|
- **Responsive Design**: Works on all screen sizes
|
|
- **Modern UI**: Glassmorphism design with smooth animations
|
|
- **Interactive Cards**: Clickable cluster member cards
|
|
- **Real-time Data**: Auto-refreshes every 30 seconds
|
|
- **Expandable Details**: Click cards to see detailed node information
|
|
|
|
## How It Works
|
|
|
|
1. **HTML Structure**: Clean, semantic markup
|
|
2. **CSS Styling**: Modern design with CSS Grid and Flexbox
|
|
3. **JavaScript Logic**: API client, event handling, and DOM manipulation
|
|
|
|
## Browser Support
|
|
|
|
- Modern browsers with ES6+ support
|
|
- CSS Grid and Flexbox support required
|
|
- Fetch API support required
|
|
|
|
## Development
|
|
|
|
To modify the UI:
|
|
- **Layout**: Edit `index.html`
|
|
- **Styling**: Edit `styles.css`
|
|
- **Functionality**: Edit `script.js`
|
|
|
|
All files are automatically served by the Express backend. |