182 lines
5.0 KiB
Markdown
182 lines
5.0 KiB
Markdown
# 🏠 Homelab Showcase Dashboard
|
|
|
|
A beautiful, realistic dashboard for showcasing your internal homelab services with **dummy login pages** that mimic the real interfaces. Perfect for demonstrations without exposing actual services.
|
|
|
|
> **Note:** This is a showcase/demo site. All login forms are non-functional and display a "demo page" message when submitted.
|
|
|
|
## ✨ Features
|
|
|
|
- 🎨 **Realistic Service Interfaces** - Each service has its own authentic-looking dummy page
|
|
- 🏠 **Main Dashboard** - Beautiful dark-themed landing page with all services
|
|
- 🔒 **Safe & Secure** - No real authentication, just visual demonstrations
|
|
- 📱 **Responsive Design** - Works on desktop, tablet, and mobile
|
|
- 🐳 **Docker Ready** - Easy deployment via Docker Compose on Portainer
|
|
|
|
## 📦 Included Services
|
|
|
|
### Storage & Cloud
|
|
| Service | Description | Dummy Page |
|
|
|---------|-------------|------------|
|
|
| **Nextcloud** | Self-hosted cloud storage | `services/nextcloud.html` |
|
|
|
|
### Media & Entertainment
|
|
| Service | Description | Dummy Page |
|
|
|---------|-------------|------------|
|
|
| **Plex** | Media streaming server | `services/plex.html` |
|
|
| **Jellyfin** | Open source media server | `services/jellyfin.html` |
|
|
|
|
### Infrastructure & Management
|
|
| Service | Description | Dummy Page |
|
|
|---------|-------------|------------|
|
|
| **Portainer** | Docker container management | `services/portainer.html` |
|
|
| **Proxmox** | Virtualization platform | `services/proxmox.html` |
|
|
| **Pi-hole** | Network ad blocker dashboard | `services/pihole.html` |
|
|
|
|
### Monitoring
|
|
| Service | Description | Dummy Page |
|
|
|---------|-------------|------------|
|
|
| **Netdata** | Real-time system monitoring | `services/netdata.html` |
|
|
|
|
## 🚀 Deployment
|
|
|
|
### Option 1: Portainer (Recommended)
|
|
|
|
1. **Upload files** to your Portainer VM:
|
|
```bash
|
|
scp -r * user@your-vm:/path/to/homelab-showcase/
|
|
```
|
|
|
|
2. **In Portainer:**
|
|
- Go to **Stacks** → **Add Stack**
|
|
- Name: `homelab-showcase`
|
|
- Copy contents of `docker-compose.yml`
|
|
- Deploy
|
|
|
|
3. **Access:**
|
|
- Dashboard: `http://your-vm-ip:8080`
|
|
- Or configure Traefik for `showcase.lemonlink.eu`
|
|
|
|
### Option 2: Docker Compose
|
|
|
|
```bash
|
|
docker-compose up -d
|
|
```
|
|
|
|
### Option 3: Manual Docker
|
|
|
|
```bash
|
|
docker build -t homelab-showcase .
|
|
docker run -d -p 8080:80 --name homelab-showcase --restart unless-stopped homelab-showcase
|
|
```
|
|
|
|
## 🗂️ File Structure
|
|
|
|
```
|
|
.
|
|
├── index.html # Main dashboard
|
|
├── Dockerfile # Container definition
|
|
├── docker-compose.yml # Compose configuration
|
|
├── README.md # This file
|
|
└── services/ # Dummy service pages
|
|
├── nextcloud.html # Nextcloud login page
|
|
├── portainer.html # Portainer login page
|
|
├── netdata.html # Netdata dashboard
|
|
├── plex.html # Plex media interface
|
|
├── jellyfin.html # Jellyfin login page
|
|
├── proxmox.html # Proxmox login page
|
|
└── pihole.html # Pi-hole dashboard
|
|
```
|
|
|
|
## 🎨 Service Pages Preview
|
|
|
|
### Nextcloud Login
|
|
- Authentic blue gradient background
|
|
- Official Nextcloud logo
|
|
- Username/password form
|
|
- "Stay logged in" checkbox
|
|
|
|
### Portainer Login
|
|
- Docker-themed dark interface
|
|
- OAuth option button
|
|
- Version info display
|
|
|
|
### Netdata Dashboard
|
|
- Real-time-looking charts (static)
|
|
- CPU, RAM, Disk, Network metrics
|
|
- Time range selector
|
|
- Node overview panel
|
|
|
|
### Plex Interface
|
|
- Dark media server theme
|
|
- Movie/TV show grid
|
|
- "Continue Watching" section
|
|
- Sidebar navigation
|
|
|
|
### Jellyfin Login
|
|
- Jellyfin blue theme
|
|
- Server name display
|
|
- Clean centered login box
|
|
|
|
### Proxmox Login
|
|
- Split-screen design
|
|
- Feature highlights
|
|
- Realm selection
|
|
|
|
### Pi-hole Dashboard
|
|
- Red-themed statistics
|
|
- Query graphs
|
|
- Top blocked domains list
|
|
- Client activity panel
|
|
|
|
## 🔧 Customization
|
|
|
|
### Adding More Services
|
|
|
|
1. Create a new HTML file in `services/` folder
|
|
2. Copy the demo banner from existing files:
|
|
```html
|
|
<div class="demo-banner">
|
|
🔒 This is a dummy page for showcase purposes only.
|
|
<a href="/">← Back to Dashboard</a>
|
|
</div>
|
|
```
|
|
3. Design the login/interface to match the real service
|
|
4. Add the service card to `index.html`
|
|
|
|
### Changing Domain Names
|
|
|
|
Edit the URLs in `index.html` service cards to match your actual domains:
|
|
|
|
```html
|
|
<span class="service-url">your-domain.com</span>
|
|
```
|
|
|
|
### Styling
|
|
|
|
Each service page is self-contained with inline CSS. Edit the `<style>` section in each file to customize.
|
|
|
|
## 📝 Notes
|
|
|
|
- All form submissions are intercepted with JavaScript and show an alert
|
|
- No data is collected or transmitted
|
|
- Charts are static SVG/ CSS representations
|
|
- All "login" buttons are non-functional
|
|
|
|
## 🔒 Security
|
|
|
|
This showcase is designed to be **completely safe**:
|
|
- No backend processing
|
|
- No authentication validation
|
|
- No data storage
|
|
- Static HTML/CSS/JS only
|
|
|
|
## 🛠️ Requirements
|
|
|
|
- Docker & Docker Compose (or Portainer)
|
|
- ~64MB RAM for the container
|
|
- Port 8080 available (configurable)
|
|
|
|
---
|
|
|
|
Made with ❤️ for the homelab community
|