<!DOCTYPE html>
<html>
<head>
    <title>Funkstation Steuerung</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body { font-family: 'Segoe UI', Arial, sans-serif; text-align: center; background: #0f172a; color: #f8fafc; padding: 20px; }
        .container { max-width: 500px; margin: 0 auto; }
        .card { background: #1e293b; padding: 20px; margin: 15px 0; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3); border: 1px solid #334155; }
        .val { font-size: 2.5em; color: #38bdf8; font-weight: bold; font-family: monospace; }
        .grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 15px; }
        .btn { width: 100%; padding: 14px; font-size: 1.1em; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; transition: background 0.2s; color: white; }
        .btn-on { background: #ef4444; }
        .btn-on:hover { background: #dc2626; }
        .btn-off { background: #10b981; }
        .btn-off:hover { background: #059669; }
        .footer-nav { margin-top: 25px; font-size: 0.9em; color: #64748b; }
    </style>
    <meta http-equiv="refresh" content="3">
</head>
<body>
    <div class="container">
        <h1>U12V Funkstations-Monitor</h1>
        
        <div class="card">
            <h3>Spannungsebene 1</h3>
            <div class="val">{{printf "%.2f" .V1}} V</div>
        </div>
        <div class="card">
            <h3>Spannungsebene 2</h3>
            <div class="val">{{printf "%.2f" .V2}} V</div>
        </div>

        <div class="card">
            <h3>Relaissteuerung</h3>
            <div class="grid">
                {{range .Relais}}
                <a href="/toggle?id={{.ID}}" style="text-decoration: none;">
                    <button class="btn {{if .State}}btn-on{{else}}btn-off{{end}}">
                        {{.Name}}: {{if .State}}AKTIV (Ausschalten){{else}}INAKTIV (Einschalten){{end}}
                    </button>
                </a>
                {{end}}
            </div>
        </div>
        <div class="footer-nav">
            Aktualisiert alle 3 Sekunden automatisch<br>
            <span style="font-size: 0.8em; color: #475569; margin-top: 5px; display: block;">
                Version v{{.Version}} ({{.BuildDate}})
            </span>
        </div>

    </div>
</body>
</html>
