Sorgu Paneli Scripti -

// Enter tuşu ile sorgulama searchInput.addEventListener('keypress', function(e) if (e.key === 'Enter') filterAndRender(); ); statusFilter.addEventListener('change', filterAndRender); roleFilter.addEventListener('change', filterAndRender);

/* FILTER AREA */ .filter-area background: #f8fafd; padding: 24px 28px; border-bottom: 1px solid #e2e8f0; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;

.badge-inactive background: #ffe4e2; color: #9b2c1d; Sorgu Paneli Scripti

/* İSTATİSTİK KARTLARI */ .stats-row display: flex; gap: 18px; padding: 20px 28px; background: #ffffff; border-bottom: 1px solid #edf2f7; flex-wrap: wrap;

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Sorgu Paneli | Veri Sorgulama Sistemi</title> <style> * box-sizing: border-box; font-family: system-ui, 'Segoe UI', 'Inter', 'Roboto', sans-serif; body background: linear-gradient(145deg, #e9eef3 0%, #dce2ea 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; margin: 0; // Enter tuşu ile sorgulama searchInput

// DOM Elements const searchInput = document.getElementById('searchInput'); const statusFilter = document.getElementById('statusFilter'); const roleFilter = document.getElementById('roleFilter'); const queryBtn = document.getElementById('queryBtn'); const resetBtn = document.getElementById('resetBtn'); const tableBody = document.getElementById('tableBody'); const statsArea = document.getElementById('statsArea');

.sorgu-paneli background: #ffffff; border-radius: 32px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.1); transition: all 0.2s; function(e) if (e.key === 'Enter') filterAndRender()

const filtered = mockData.filter(item => // Arama filtresi (id, username, email) let matchesSearch = true; if (searchTerm !== "") matchesSearch = item.id.toString().includes(searchTerm) // Durum filtresi let matchesStatus = true; if (statusVal !== "all") matchesStatus = item.status === statusVal; // Rol filtresi let matchesRole = true; if (roleVal !== "all") matchesRole = item.role === roleVal; return matchesSearch && matchesStatus && matchesRole; );