<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>System Under Maintenance</title>

<style>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:linear-gradient(135deg,#0f172a,#1e293b,#334155);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    text-align:center;
    padding:20px;
}

.container{
    max-width:750px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(8px);
    padding:45px;
    border-radius:18px;
    box-shadow:0 10px 35px rgba(0,0,0,.35);
}

.icon{
    font-size:80px;
    margin-bottom:20px;
}

h1{
    font-size:42px;
    margin-bottom:15px;
    color:#FFD54F;
}

h2{
    font-size:24px;
    margin-bottom:25px;
    color:#ffffff;
}

p{
    font-size:18px;
    line-height:1.8;
    color:#f1f5f9;
}

.notice{
    margin:30px 0;
    background:#fff3cd;
    color:#856404;
    padding:18px;
    border-radius:10px;
    font-weight:bold;
}

.time{
    margin-top:25px;
    font-size:16px;
    color:#cbd5e1;
}

.footer{
    margin-top:35px;
    font-size:15px;
    color:#94a3b8;
}

@media(max-width:768px){

.container{
padding:30px 20px;
}

h1{
font-size:32px;
}

h2{
font-size:22px;
}

.icon{
font-size:65px;
}

p{
font-size:17px;
}

}
</style>

</head>

<body>

<div class="container">

<div class="icon">🛠️</div>

<h1>System Under Maintenance</h1>

<h2>We’ll Be Back Soon</h2>

<p>
Our system is currently undergoing scheduled maintenance and upgrades to improve performance, reliability, and security.
</p>

<div class="notice">
The Billing System and all associated online services are temporarily unavailable.<br><br>
We sincerely apologize for the inconvenience and appreciate your patience while we complete the maintenance work.
</div>

<p>
Please try again after the maintenance has been completed.
</p>

<div class="time">
Current Server Time:<br>
<strong id="datetime"></strong>
</div>

<div class="footer">
Thank you for your understanding.<br><br>
&copy; <span id="year"></span> SDS Solution. All Rights Reserved.
</div>

</div>

<script>

function updateTime(){
    const now=new Date();

    document.getElementById("datetime").innerHTML=
    now.toLocaleString('en-GB');

    document.getElementById("year").innerHTML=
    now.getFullYear();
}

updateTime();

setInterval(updateTime,1000);

</script>

</body>
</html>