Sorgu Paneli Scripti Link

.no-data text-align: center; padding: 48px 20px; color: #7e8c9e; font-style: italic;

.badge background: #e9ecef; padding: 4px 12px; border-radius: 40px; font-size: 0.75rem; font-weight: 500;

<div class="stats-row" id="statsArea">  <div class="stat-card"><div class="stat-number">-</div><div class="stat-label">Toplam Kayıt</div></div> <div class="stat-card"><div class="stat-number">-</div><div class="stat-label">Aktif</div></div> <div class="stat-card"><div class="stat-number">-</div><div class="stat-label">Adminler</div></div> </div>

// 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; ); Sorgu Paneli Scripti

.btn border: none; padding: 10px 24px; border-radius: 40px; font-weight: 600; cursor: pointer; transition: 0.2s; font-size: 0.85rem; background: #eef2f6; color: #1e2f3e;

I’ve written it as a file with a fake data set for demonstration. You can replace the mock data/search logic with your real backend API.

// 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'); Farklı kriterler deneyin

function renderTable(dataArray) if (!dataArray.length) tableBody.innerHTML = `<tr class="no-data"><td colspan="6">🔍 Sonuç bulunamadı. Farklı kriterler deneyin.</td></tr>`; return;

.data-table tr:hover td background-color: #fef9e6;

.button-group display: flex; gap: 12px; flex-wrap: wrap; Farklı kriterler deneyin.&lt

.btn-secondary background: #e2e8f0;

/* İ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;

.badge-active background: #d1fae5; color: #0b5e42;