Sorgu Paneli Scripti -
.panel-header h1 margin: 0; font-size: 1.9rem; font-weight: 600; letter-spacing: -0.3px; display: flex; align-items: center; gap: 12px;
.stat-number font-size: 2rem; font-weight: 800; color: #1a2c3e; line-height: 1; Sorgu Paneli Scripti
<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" ]; .panel-header h1 margin: 0
<!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; .stat-number font-size: 2rem
// Filtreleme ve render ana fonksiyonu function filterAndRender() const searchTerm = searchInput.value.trim().toLowerCase(); const statusVal = statusFilter.value; const roleVal = roleFilter.value;
<div class="stats-row" id="statsArea"> <!-- Dinamik istatistikler js ile doldurulacak --> <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>
.filter-group input, .filter-group select width: 100%; padding: 12px 16px; font-size: 0.95rem; border: 1px solid #cbd5e1; border-radius: 20px; background: white; transition: 0.2s; outline: none;