header.php

<header style="
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 10px 40px; 
    background-color: #ffffff; 
    border-bottom: 3px solid #003366;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
">
    <div style="display: flex; align-items: center; gap: 20px;">
        <img src="icon.png" alt="University Logo" style="height: 50px;">
        <div>
            <h1 style="font-size: 20px; color: #003366; margin: 0; text-transform: uppercase;">
                Your Institute Name
            </h1>
            <p style="font-size: 12px; color: #666; margin: 0;">Hostel Management Services</p>
        </div>
    </div>

    <div id="real-time" style="
        font-size: 15px; 
        font-weight: 600; 
        color: #444; 
        background: #f0f2f5; 
        padding: 8px 15px; 
        border-radius: 5px;
    ">
    </div>
</header>

<script>
    function updateClock() {
        const now = new Date();
        const options = { 
            weekday: 'long', year: 'numeric', month: 'short', 
            day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' 
        };
        document.getElementById('real-time').innerText = now.toLocaleString('en-US', options);
    }
    setInterval(updateClock, 1000);
    updateClock();
</script>