<div class="filter-area"> <div class="filter-group"> <label>🔎 Kullanıcı Adı / E-posta</label> <input type="text" id="searchInput" placeholder="isim, mail veya ID ara..."> </div> <div class="filter-group"> <label>📌 Durum</label> <select id="statusFilter"> <option value="all">Tümü</option> <option value="active">Aktif</option> <option value="passive">Pasif</option> </select> </div> <div class="filter-group"> <label>🏷️ Rol</label> <select id="roleFilter"> <option value="all">Tüm Roller</option> <option value="Admin">Admin</option> <option value="Editör">Editör</option> <option value="İzleyici">İzleyici</option> <option value="Destek">Destek</option> </select> </div> <div class="button-group"> <button class="btn btn-primary" id="queryBtn">🔍 Sorgula</button> <button class="btn btn-secondary" id="resetBtn">⟳ Sıfırla</button> </div> </div>
.btn-primary:hover background: #f39c12; color: #1e2f3e; transform: translateY(-1px);
// 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
function renderTable(dataArray) if (!dataArray.length) tableBody.innerHTML = `<tr class="no-data"><td colspan="6">🔍 Sonuç bulunamadı. Farklı kriterler deneyin.</td></tr>`; return;
.filter-group input:focus, .filter-group select:focus border-color: #f39c12; box-shadow: 0 0 0 3px rgba(243,156,18,0.2); 🔎 Kullanıcı Adı / E-posta<
.sorgu-paneli background: #ffffff; border-radius: 32px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.1); transition: all 0.2s;
.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; input type="text" id="searchInput" placeholder="isim
.button-group display: flex; gap: 12px; flex-wrap: wrap;