<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ghaymah Monitoring Dashboard</title>

    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>

    <div class="container">

        <h1>🚀 Ghaymah Monitoring Dashboard</h1>

        <div class="card">
            <h2>Service Status</h2>
            <p id="status">Loading...</p>
        </div>

        <div class="card">
            <h2>Response Time</h2>
            <p id="response-time">Loading...</p>
        </div>

        <div class="card">
            <h2>Request Count</h2>
            <p id="requests">Loading...</p>
        </div>

        <div class="card">
            <h2>Uptime</h2>
            <p id="uptime">Loading...</p>
        </div>

        <p class="refresh">
            🔄 Auto Refresh Every 5 Seconds
        </p>

    </div>

    <script src="{{ url_for('static', filename='script.js') }}"></script>

</body>
</html>