Sorgu Paneli Scripti <2025>

.stat-number font-size: 2rem; font-weight: 800; color: #1a2c3e; line-height: 1;

Kodu sorgu-paneli.html olarak kaydedip herhangi bir tarayıcıda açabilirsiniz. JavaScript dahil tamamen bağımsız çalışır.

<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" ];

<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> Sorgu Paneli Scripti

// 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; );

// Filtreleme ve render ana fonksiyonu function filterAndRender() const searchTerm = searchInput.value.trim().toLowerCase(); const statusVal = statusFilter.value; const roleVal = roleFilter.value;

.data-table tr:hover td background-color: #fef9e6; if (m === '&lt

.panel-header h1 margin: 0; font-size: 1.9rem; font-weight: 600; letter-spacing: -0.3px; display: flex; align-items: center; gap: 12px;

.btn-primary:hover background: #f39c12; color: #1e2f3e; transform: translateY(-1px);

.panel-container max-width: 1400px; width: 100%; background: rgba(255,255,255,0.4); border-radius: 48px; backdrop-filter: blur(2px); padding: 24px; box-shadow: 0 25px 45px -12px rgba(0,0,0,0.35); ') return '&lt

İhtiyacınıza göre sütunları, veri setini veya görsel detayları kolayca değiştirebilirsiniz.

let html = ""; for (const row of dataArray) const statusBadge = row.status === "active" ? '<span class="badge badge-active">✔ Aktif</span>' : '<span class="badge badge-inactive">⛔ Pasif</span>'; html += ` <tr> <td>$row.id</td> <td><strong>$escapeHtml(row.username)</strong></td> <td>$escapeHtml(row.email)</td> <td><span class="badge">$escapeHtml(row.role)</span></td> <td>$statusBadge</td> <td>$row.registered</td> </tr> `; tableBody.innerHTML = html;

.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;

.data-table width: 100%; border-collapse: collapse; font-size: 0.9rem;

.btn-secondary:hover background: #cbd5e1;