<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; text-align: center; background: #f0f4f8; }
        #demo { font-size: 28px; padding: 20px; margin: 20px; background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: all 0.3s; min-height: 80px; }
        button { padding: 10px 25px; margin: 5px; font-size: 16px; border: none; border-radius: 10px; cursor: pointer; font-weight: bold; color: white; transition: 0.3s; }
        button:hover { transform: translateY(-2px); }
        .b1 { background: #2E86AB; } .b2 { background: #E84D3D; } .b3 { background: #27AE60; } .b4 { background: #D4A533; }
    </style>
</head>
<body>
    <h1>JavaScript Demo</h1>
    <div id="demo">Tugmalarni bosib ko'ring!</div>
    <button class="b1" onclick="document.getElementById('demo').innerHTML='Salom Dunyo!'">Matn</button>
    <button class="b2" onclick="document.getElementById('demo').style.color='#E84D3D'">Qizil</button>
    <button class="b3" onclick="document.getElementById('demo').style.fontSize='40px'">Katta</button>
    <button class="b4" onclick="document.getElementById('demo').style.background='#1B3A5C';document.getElementById('demo').style.color='white'">Tun</button>
</body>
</html>