A modern monitoring dashboard for systems and services with multi-display support and responsive design.

• Multi-Display: Display multiple services simultaneously on one screen
• Dynamic Tabs: Easy switching between different monitor groups
• Grid Settings: Configurable rows and columns layout
• Fullscreen Mode: View any monitor in fullscreen mode
• PWA Support: Install as a native app
• Auto Switch: Automatic tab switching
• API Integration: Connect to external APIs for data
• Responsive Design: Works on all screen sizes

• Docker and Docker Compose
• Modern browser (Chrome/Edge/Firefox/Safari)
• API endpoint for data (optional)

# Clone the repository
git clone https://github.com/mad-bax-dev/Monitor-board.git
cd monitoring-board

# Run with Docker Compose
docker-compose up -d

# Access dashboard
open http://localhost:8080

# Upload files to any static host
# GitHub Pages, Vercel, Netlify, etc.

1. Click the ⚙️ URL button
2. Enter your API URL
3. Click 💾 Save and Load

{
  "data": [
    {
      "title": "Tab Name",
      "monitor": [
        {
          "name": "Monitor Name",
          "url": "https://example.com",
          "zoom": 50,
          "width": 1
        }
      ]
    }
  ]
}

• Rows: Number of rows
• Columns: Number of columns
• Auto Switch: Automatic tab switching

• Click the 📱 Install App button
• App will be installed on your device

• Click on any monitor
• Or use the 🖥️ Fullscreen button

• Enable the 🔄Switch button
• Tabs will switch automatically

monitoring-board/
├── monitoring-board.html    # Main HTML file
├── manifest.json           # PWA manifest
├── sw.js                   # Service Worker
├── logo.jpg               # App icon
├── docker-compose.yml     # Docker configuration
├── nginx.conf             # Nginx configuration
└── README.md              # This file

1. Push repository to GitHub
2. Go to Settings → Pages, select main branch
3. Site will be available at https://username.github.io/repository-name

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel --prod

1. Drag & drop files to Netlify
2. Or use Git integration

GET /api/monitors

{
  "data": [
    {
      "title": "Production",
      "monitor": [
        {
          "name": "Server 1",
          "url": "https://server1.example.com",
          "zoom": 50,
          "width": 1
        }
      ]
    }
  ]
}

To display external websites, the server must send appropriate CORS headers:

add_header Access-Control-Allow-Origin "*" always;
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept" always;

add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;

• HTML: Main user interface (single file)
• CSS: Styles and responsive design (embedded)
• JavaScript: Application logic and API calls (embedded)

1. Edit the monitoring-board.html file
2. Test with Docker: docker-compose up -d
3. Submit a Pull Request

# Build and run
docker-compose up -d

# View logs
docker-compose logs -f

# Stop
docker-compose down

# Rebuild
docker-compose up -d --build

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

MIT License - see the LICENSE file for details.

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Email: [email protected]

• Initial release
• Multi-display support
• PWA support
• API integration
• Responsive design

Note: This project is designed for production use and follows security best practices.