<?php  
// Start output buffering  
ob_start();  
?>  
  
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Human Resource Management System</title>  
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">  
    <style>  
        body {  
            background-color: #f4f7fa;  
        }  
        .header {  
            background-color: #007bff;  
            color: white;  
            padding: 20px;  
            text-align: center;  
            border-bottom: 5px solid #0056b3;  
        }  
        .header .icon {  
            font-size: 3rem; /* Adjust the size of the icon */  
            margin-bottom: 10px;  
        }  
        .card {  
            margin-top: 20px;  
        }  
        .card-header {  
            background-color: #007bff;  
            color: white;  
        }  
        .nav-link {  
            color: #007bff;  
        }  
        .nav-link:hover {  
            color: #0056b3;  
        }  
        .icon {  
            font-size: 2rem;  
            margin-right: 10px;  
        }  
        .card-body {  
            text-align: center;  
        }  
        .card-body a {  
            display: inline-block;  
            margin: 10px;  
            padding: 15px 30px;  
            font-size: 1.2rem;  
            color: white;  
            background-color: #007bff;  
            border-radius: 5px;  
            transition: background-color 0.3s;  
        }  
        .card-body a:hover {  
            background-color: #0056b3;  
        }  
    </style>  
</head>  
<body>  
  
<div class="header">  
    <i class="fas fa-user-tie icon"></i> <!-- Icon instead of logo -->  
    <h1>Overtime Controlling System</h1>  
</div>  
  
<div class="container mt-5">  
    <div class="card">  
        <div class="card-header">  
            <h4 class="card-title">Navigation Menu</h4>  
        </div>  
        <div class="card-body">  
            <a href="nama_pegawai.php" class="btn btn-primary">  
                <i class="fas fa-users icon"></i> Manage Employees  
            </a>  
            <a href="overtime_absensi.php" class="btn btn-primary">  
                <i class="fas fa-clock icon"></i> Overtime Attendance  
            </a>  
            <!-- Add more links as needed -->  
        </div>  
    </div>  
  
    <div class="card">  
        <div class="card-header">  
            <h4 class="card-title">Quick Links</h4>  
        </div>  
        <div class="card-body">  
            <a href="generate_report.php" class="btn btn-primary">  
                <i class="fas fa-file-alt icon"></i> Generate Reports  
            </a>  
            <a href="settings.php" class="btn btn-primary">  
                <i class="fas fa-cog icon"></i> Settings  
            </a>  
            <!-- Add more links as needed -->  
        </div>  
    </div>  
</div>  
  
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>  
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>  
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>  
</body>  
</html>  
