.panel-header p margin: 8px 0 0; opacity: 0.8; font-size: 0.9rem;
// Sıfırlama işlemi function resetFilters() searchInput.value = ""; statusFilter.value = "all"; roleFilter.value = "all"; filterAndRender();
.filter-group input:focus, .filter-group select:focus border-color: #f39c12; box-shadow: 0 0 0 3px rgba(243,156,18,0.2);
/* İSTATİSTİK KARTLARI */ .stats-row display: flex; gap: 18px; padding: 20px 28px; background: #ffffff; border-bottom: 1px solid #edf2f7; flex-wrap: wrap; Sorgu Paneli Scripti
<div class="table-wrapper"> <table class="data-table" id="resultTable"> <thead> <tr> <th>ID</th><th>Kullanıcı Adı</th><th>E-posta</th><th>Rol</th><th>Durum</th><th>Kayıt Tarihi</th> </tr> </thead> <tbody id="tableBody"> <tr class="no-data"><td colspan="6">Veriler yükleniyor...</td></tr> </tbody> </table> </div> <footer> Sorgu Paneli v2.0 | Örnek veri seti üzerinde çalışır - Gerçek API ile entegre edilebilir. </footer> </div> </div>
<script> // ---------- ÖRNEK VERİ SETİ ---------- const mockData = [ id: 1001, username: "ahmet_yilmaz", email: "ahmet@domain.com", role: "Admin", status: "active", registered: "2024-01-15" , id: 1002, username: "elif_demir", email: "elif.demir@domain.com", role: "Editör", status: "active", registered: "2024-02-20" , id: 1003, username: "mehmet_kaya", email: "mehmet.k@domain.com", role: "İzleyici", status: "passive", registered: "2023-11-02" , id: 1004, username: "zeynep_arslan", email: "zarslan@domain.com", role: "Admin", status: "active", registered: "2024-03-10" , id: 1005, username: "burak_sahin", email: "burak.sahin@domain.com", role: "Destek", status: "active", registered: "2024-01-28" , id: 1006, username: "sibel_aksoy", email: "sibel.a@domain.com", role: "İzleyici", status: "passive", registered: "2023-12-05" , id: 1007, username: "orkun_celik", email: "orkun.c@domain.com", role: "Editör", status: "active", registered: "2024-04-01" , id: 1008, username: "pinar_yildiz", email: "pinar.y@domain.com", role: "Destek", status: "active", registered: "2024-02-14" , id: 1009, username: "serkan_dogan", email: "serkan.d@domain.com", role: "İzleyici", status: "passive", registered: "2023-10-19" , id: 1010, username: "gulsen_ertekin", email: "gulsen.e@domain.com", role: "Admin", status: "active", registered: "2024-03-25" ];
// 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'); .panel-header p margin: 8px 0 0
.no-data text-align: center; padding: 48px 20px; color: #7e8c9e; font-style: italic;
// Basit XSS koruması function escapeHtml(str) if (!str) return ''; return str.replace(/[&<>]/g, function(m) if (m === '&') return '&'; if (m === '<') return '<'; if (m === '>') return '>'; return m; ).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function(c) return c; );
/* TABLO */ .table-wrapper overflow-x: auto; padding: 0 0 20px 0; statusFilter.value = "all"
.badge background: #e9ecef; padding: 4px 12px; border-radius: 40px; font-size: 0.75rem; font-weight: 500;
.stat-label font-size: 0.75rem; color: #5b6e8c; margin-top: 6px; letter-spacing: 0.3px;
// Event listeners queryBtn.addEventListener('click', filterAndRender); resetBtn.addEventListener('click', resetFilters);