86 lines
2.2 KiB
Markdown
86 lines
2.2 KiB
Markdown
# Home Dashboard
|
|
|
|
A beautiful, self-hosted dashboard for your home services.
|
|
|
|
|
|
|
|
## Features
|
|
|
|
- 🎨 **Modern Dark Theme** - Glassmorphism design with animated gradient background
|
|
- 📊 **Live Status** - Real-time online/offline indicators for each service
|
|
- 🔍 **Search** - Filter services with Ctrl+K or click the search box
|
|
- 📱 **Responsive** - Works on desktop, tablet, and mobile
|
|
- ⚡ **Zero Dependencies** - Pure HTML/CSS/JS, no build step required
|
|
|
|
## Quick Start
|
|
|
|
### Option 1: Open Directly
|
|
Just double-click `index.html` to open in your browser.
|
|
|
|
### Option 2: Python HTTP Server
|
|
```bash
|
|
cd "U:\AntiGravity\Self-Hosted Dashboard"
|
|
python -m http.server 8080
|
|
```
|
|
Then visit: http://localhost:8080
|
|
|
|
### Option 3: Nginx
|
|
Copy all files to your nginx web root (usually `/var/www/html/dashboard/`).
|
|
|
|
## Configuration
|
|
|
|
Edit `config.js` to customize your dashboard:
|
|
|
|
```javascript
|
|
const DASHBOARD_CONFIG = {
|
|
title: "My Home Lab", // Dashboard title
|
|
subtitle: "All my services", // Subtitle text
|
|
enableStatusCheck: true, // Live status checking
|
|
statusCheckInterval: 60000, // Check every 60 seconds
|
|
|
|
services: [
|
|
{
|
|
name: "Plex",
|
|
description: "Media streaming",
|
|
url: "http://192.168.1.100:32400/web",
|
|
icon: "plex",
|
|
color: "orange"
|
|
},
|
|
// Add more services here...
|
|
]
|
|
};
|
|
```
|
|
|
|
### Available Icons
|
|
`plex`, `pihole`, `jellyfin`, `sonarr`, `radarr`, `homeassistant`, `portainer`, `nextcloud`
|
|
|
|
### Available Colors
|
|
`orange`, `blue`, `green`, `purple`, `red`, `cyan`, `pink`, `yellow`, `teal`, `indigo`
|
|
|
|
## Keyboard Shortcuts
|
|
|
|
| Key | Action |
|
|
|-----|--------|
|
|
| `Ctrl+K` | Focus search |
|
|
| `Escape` | Clear search |
|
|
| `R` | Refresh status |
|
|
|
|
## Adding New Services
|
|
|
|
1. Open `config.js`
|
|
2. Add a new object to the `services` array
|
|
3. Save and refresh your browser
|
|
|
|
## Files
|
|
|
|
```
|
|
├── index.html # Main page
|
|
├── styles.css # All styling
|
|
├── app.js # Dashboard logic
|
|
├── config.js # Your configuration
|
|
└── README.md # This file
|
|
```
|
|
|
|
---
|
|
Made with ❤️ for self-hosters
|