<!DOCTYPE html>
<html>
<body style="font-family:Arial;padding:20px;background:#f0f4f8;text-align:center">
    <h2>Baho kalkulyatori</h2>
    <input type="number" id="ball" placeholder="Ballingiz (0-100)" style="padding:10px;font-size:18px;border-radius:8px;border:2px solid #ddd;width:200px">
    <button onclick="tekshir()" style="padding:10px 25px;background:#2E86AB;color:white;border:none;border-radius:8px;font-size:16px;cursor:pointer;margin-left:10px">Tekshirish</button>
    <div id="natija" style="margin-top:20px;padding:20px;background:white;border-radius:12px;font-size:20px;min-height:60px"></div>
    <script>
        function tekshir() {
            let ball = Number(document.getElementById('ball').value);
            let natija = '';
            let rang = '';

            if (ball >= 90) { natija = 'A\'lo! &#127942;'; rang = '#27AE60'; }
            else if (ball >= 75) { natija = 'Yaxshi! &#128170;'; rang = '#2E86AB'; }
            else if (ball >= 60) { natija = 'Qoniqarli &#128221;'; rang = '#D4A533'; }
            else if (ball >= 0) { natija = 'Yomon &#128546;'; rang = '#E84D3D'; }
            else { natija = 'Noto\'g\'ri son!'; rang = '#888'; }

            let el = document.getElementById('natija');
            el.innerHTML = '<b>' + ball + ' ball</b> — ' + natija;
            el.style.color = rang;
            el.style.borderLeft = '5px solid ' + rang;
        }
    </script>
</body>
</html>