# Homelab Dashboard

Ein modernes, responsives Dashboard für die Verwaltung von Homelab-Diensten, gebaut mit **Next.js 15**, **TypeScript** und **Tailwind CSS**.

## Features

✨ **Moderne Benutzeroberfläche**
- Elegantes Dark/Light Mode Design
- Responsive Grid-Layout für alle Bildschirmgrößen
- Smooth Animations und Übergänge

🎯 **Service-Management**
- Service-Karten mit Name, Beschreibung und Status
- Farbcodierter Status-Indikator (Online, Warnung, Offline)
- Direkte Links zu Services
- Pulsierender Status-Punkt für visuelle Rückmeldung

📱 **Mobile-First Design**
- Optimiert für Smartphones, Tablets und Desktop
- Touch-freundliche Buttons
- Flexibles Grid-System

## Installation & Setup

### Voraussetzungen
- Node.js 18+ installiert
- npm oder yarn

### Schritt 1: Dependencies installieren

```bash
npm install
```

### Schritt 2: Entwicklungsserver starten

```bash
npm run dev
```

Der Server läuft dann unter `http://localhost:3000`

## Projekt-Struktur

```
homelab-dashboard/
├── app/
│   ├── components/
│   │   ├── Header.tsx          # Header-Komponente
│   │   └── ServiceCard.tsx      # Service-Karten-Komponente
│   ├── globals.css             # Globale Tailwind Styles
│   ├── layout.tsx              # Root Layout
│   └── page.tsx                # Startseite
├── lib/
│   └── data.ts                 # Mock-Daten und Service-Typen
├── tailwind.config.ts          # Tailwind Konfiguration
├── postcss.config.js           # PostCSS Konfiguration
├── next.config.js              # Next.js Konfiguration
├── tsconfig.json               # TypeScript Konfiguration
└── package.json                # Abhängigkeiten
```

## Dienste hinzufügen/bearbeiten

Bearbeite die Datei [src/data/services.ts](src/data/services.ts):

```typescript
export const services: Service[] = [
  {
    id: 'unique-id',
    name: 'Dein Service',
    description: 'Was macht dieser Service?',
    category: 'Infrastruktur', // oder Smart Home, Medien, Dokumente
    status: 'online', // online | warning | offline
    url: 'http://localhost:8000',
    icon: '🖥️', // Optional - ein Emoji für visuelles Feedback
  },
  // ... weitere Services
];
```

### Verfügbare Kategorien

- **Infrastruktur**: Server, Netzwerk, Monitoring
- **Smart Home**: Home Automation und IoT
- **Medien**: Medienserver und Downloading
- **Dokumente**: Dateispeicher und Code-Repositories

## Verfügbare Commands

- `npm run dev` - Entwicklungsserver starten
- `npm run build` - Produktions-Build erstellen
- `npm start` - Produktions-Server starten
- `npm run lint` - Linter ausführen

## Status-Indikatoren

| Status | Farbe | Beschreibung |
|--------|-------|-------------|
| Online | 🟢 Grün | Service läuft einwandfrei |
| Warning | 🟡 Orange | Service hat Probleme, läuft aber |
| Offline | 🔴 Rot | Service ist nicht erreichbar |

## Styling & Anpassungen

Das Projekt nutzt **Tailwind CSS** für Styling. Eigene Farben und Konfiguration können in [tailwind.config.ts](tailwind.config.ts) angepasst werden.

## Browser-Unterstützung

Das Dashboard funktioniert auf modernen Browsern:
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+

## Lizenz

MIT