<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f4f8; text-align: center; }
        .box { width: 200px; height: 200px; background: #2E86AB; border-radius: 16px; margin: 20px auto; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; font-weight: bold; cursor: pointer; transition: all 0.3s; user-select: none; }
        .counter { font-size: 4rem; font-weight: 900; color: #1B3A5C; }
        .btn-group button { padding: 10px 20px; margin: 5px; font-size: 18px; border: none; border-radius: 10px; cursor: pointer; color: white; font-weight: bold; }
    </style>
</head>
<body>
    <h2>Hodisalar Demo</h2>
    <div class="box" id="box">Menga bos!</div>
    <div class="counter" id="counter">0</div>
    <div class="btn-group">
        <button style="background:#27AE60" id="plus">+1</button>
        <button style="background:#E84D3D" id="minus">-1</button>
        <button style="background:#D4A533" id="reset">Reset</button>
    </div>
    <p id="pos" style="margin-top:15px;color:#888"></p>

    <script>
        let count = 0;
        const counterEl = document.getElementById('counter');
        const box = document.getElementById('box');
        const colors = ['#E84D3D', '#2E86AB', '#27AE60', '#D4A533', '#8E44AD', '#1ABC9C'];

        // Click event
        document.getElementById('plus').addEventListener('click', () => {
            count++;
            counterEl.textContent = count;
        });
        document.getElementById('minus').addEventListener('click', () => {
            count--;
            counterEl.textContent = count;
        });
        document.getElementById('reset').addEventListener('click', () => {
            count = 0;
            counterEl.textContent = 0;
        });

        // Box color change on click
        box.addEventListener('click', () => {
            box.style.background = colors[Math.floor(Math.random() * colors.length)];
            box.style.transform = 'scale(1.1) rotate(' + (Math.random()*20-10) + 'deg)';
            setTimeout(() => box.style.transform = 'scale(1)', 200);
        });

        // Mousemove
        document.addEventListener('mousemove', (e) => {
            document.getElementById('pos').textContent = 'Sichqoncha: x=' + e.clientX + ', y=' + e.clientY;
        });
    </script>
</body>
</html>