<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f4f8; text-align: center; }
        .user-card { display: inline-block; background: white; padding: 20px; margin: 10px; border-radius: 16px; box-shadow: 0 2px 15px rgba(0,0,0,0.1); width: 200px; text-align: center; transition: 0.3s; }
        .user-card:hover { transform: translateY(-5px); }
        .avatar { width: 80px; height: 80px; border-radius: 50%; margin-bottom: 10px; }
        button { padding: 12px 30px; background: #2E86AB; color: white; border: none; border-radius: 10px; font-size: 16px; cursor: pointer; }
    </style>
</head>
<body>
    <h2 style="color:#1B3A5C">Fetch API - Foydalanuvchilar</h2>
    <button onclick="loadUsers()">Foydalanuvchilarni yuklash</button>
    <div id="users" style="margin-top:20px"></div>
    <script>
        async function loadUsers() {
            document.getElementById("users").innerHTML = "Yuklanmoqda...";
            try {
                const response = await fetch("https://jsonplaceholder.typicode.com/users");
                const users = await response.json();
                let html = "";
                users.slice(0, 6).forEach(function(user) {
                    html += '<div class="user-card">' +
                        '<img class="avatar" src="https://ui-avatars.com/api/?name=' + user.name + '&background=2E86AB&color=fff&size=80">' +
                        '<h4 style="color:#1B3A5C">' + user.name + '</h4>' +
                        '<p style="color:#888;font-size:13px">' + user.email + '</p></div>';
                });
                document.getElementById("users").innerHTML = html;
            } catch (error) {
                document.getElementById("users").innerHTML = "Xato: " + error.message;
            }
        }
    </script>
</body>
</html>