Scripti: Sorgu Paneli

/* HEADER */ .panel-header background: #1a2c3e; color: white; padding: 20px 28px; border-bottom: 4px solid #f39c12;

.panel-header h1:before content: "🔍"; font-size: 2rem;

// Sıfırlama işlemi function resetFilters() searchInput.value = ""; statusFilter.value = "all"; roleFilter.value = "all"; filterAndRender();

.panel-header p margin: 8px 0 0; opacity: 0.8; font-size: 0.9rem; Sorgu Paneli Scripti

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

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

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

@media (max-width: 700px) .filter-area flex-direction: column; align-items: stretch; .panel-header h1 font-size: 1.4rem; </style> </head> <body> <div class="panel-container"> <div class="sorgu-paneli"> <div class="panel-header"> <h1>Sorgu Paneli</h1> <p>Veritabanı / Kayıt Sorgulama | Dinamik filtreleme ve anlık arama</p> </div>

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

<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> 🔎 Kullanıcı Adı / E-posta&lt

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

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

.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-secondary:hover background: #cbd5e1;