<!DOCTYPE html>
<html>
<head>
    <style>
        body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #0f2439, #1B3A5C, #2E86AB); font-family: Arial; }
        .clock-container { text-align: center; }
        .clock { font-size: 5rem; font-weight: 900; color: white; letter-spacing: 5px; text-shadow: 0 0 20px rgba(46,134,171,0.5); }
        .date { color: #D4A533; font-size: 1.3rem; margin-top: 10px; font-weight: 600; }
        .seconds-bar { width: 300px; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; margin: 15px auto; overflow: hidden; }
        .seconds-fill { height: 100%; background: linear-gradient(90deg, #D4A533, #27AE60); border-radius: 2px; transition: width 1s linear; }
        .greeting { color: rgba(255,255,255,0.7); font-size: 1.5rem; margin-bottom: 20px; }
    </style>
</head>
<body>
    <div class="clock-container">
        <div class="greeting" id="greeting"></div>
        <div class="clock" id="clock">00:00:00</div>
        <div class="seconds-bar"><div class="seconds-fill" id="secBar"></div></div>
        <div class="date" id="date"></div>
    </div>
    <script>
        const kunlar = ['Yakshanba','Dushanba','Seshanba','Chorshanba','Payshanba','Juma','Shanba'];
        const oylar = ['Yanvar','Fevral','Mart','Aprel','May','Iyun','Iyul','Avgust','Sentabr','Oktabr','Noyabr','Dekabr'];

        function updateClock() {
            const now = new Date();
            const h = String(now.getHours()).padStart(2, '0');
            const m = String(now.getMinutes()).padStart(2, '0');
            const s = String(now.getSeconds()).padStart(2, '0');

            document.getElementById('clock').textContent = h + ':' + m + ':' + s;
            document.getElementById('date').textContent = kunlar[now.getDay()] + ', ' + now.getDate() + ' ' + oylar[now.getMonth()] + ' ' + now.getFullYear();
            document.getElementById('secBar').style.width = (now.getSeconds() / 59 * 100) + '%';

            let soat = now.getHours();
            let salom = soat < 6 ? 'Tun xayrli!' : soat < 12 ? 'Xayrli tong!' : soat < 18 ? 'Xayrli kun!' : 'Xayrli kech!';
            document.getElementById('greeting').textContent = salom;
        }

        updateClock();
        setInterval(updateClock, 1000);
    </script>
</body>
</html>