view/html/status.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Status Page</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex flex-col min-h-screen justify-between">
    <main class="px-4 py-8">
        <h1 class="text-2xl font-bold mb-4 text-center">Status Page</h1>
        {{range .services}}
        <div class="bg-white shadow rounded-lg p-4 mb-4 flex justify-between items-center w-full relative">
            <h2 class="text-xl font-bold mb-2">{{.Name}}</h2>
            {{if eq .Status "up"}}
            <div class="text-center text-green-500 mb-2 relative group">
                <span>&#10003;</span>
                <div class="absolute left-0 transform -translate-x-full mt-2 w-16 p-2 bg-white border border-green-500 text-sm text-green-700 rounded shadow-lg hidden group-hover:block z-10">
                    <p>OK</p>
                </div>
            </div>
            {{else}}
            <div class="text-center text-red-500 mb-2 relative group">
                <span>&#10007;</span>
                {{if .Error}}
                <div class="absolute left-0 transform -translate-x-full mt-2 w-64 p-2 bg-white border border-red-500 text-sm text-red-700 rounded shadow-lg hidden group-hover:block z-10">
                    <p>Error: {{.Error}}</p>
                </div>
                {{end}}
            </div>
            {{end}}
        </div>
        {{end}}
    </main>
</body>
</html>