<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welkom bij Michiel's Homelab</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            max-width: 600px;
            width: 100%;
            padding: 40px;
            text-align: center;
        }
        .agent-icon {
            font-size: 120px;
            margin-bottom: 20px;
            animation: float 3s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        h1 { color: #333; margin-bottom: 10px; font-size: 2.5em; }
        .subtitle { color: #666; font-size: 1.2em; margin-bottom: 30px; }
        .info-box {
            background: #f8f9fa;
            border-left: 4px solid #667eea;
            padding: 20px;
            margin: 20px 0;
            text-align: left;
            border-radius: 5px;
        }
        .info-box h3 { color: #667eea; margin-bottom: 10px; }
        .info-box p { color: #555; line-height: 1.6; }
        .footer { margin-top: 30px; color: #999; font-size: 0.9em; }
    </style>
</head>
<body>
    <div class="container">
        <div class="agent-icon">🕵️</div>
        <h1>Welkom!</h1>
        <p class="subtitle">Michiel's Homelab Infrastructure</p>
        <div class="info-box">
            <h3>🔒 Beveiligde Omgeving</h3>
            <p>Deze server draait achter Nginx Proxy Manager met SSL certificaten voor veilige verbindingen.</p>
        </div>
        <div class="info-box">
            <h3>🐳 Docker Services</h3>
            <p>Verschillende services draaien in geïsoleerde Docker containers op de Raspberry Pi 5 infrastructuur.</p>
        </div>
        <div class="info-box">
            <h3>🤖 Automation Hub</h3>
            <p>Home Assistant, n8n workflows en andere automation tools staan klaar voor slimme integraties.</p>
        </div>
        <div class="footer">
            <p>Powered by Raspberry Pi 5 | Nginx Proxy Manager | Docker</p>
        </div>
    </div>
</body>
</html>