Paneli Scripti: Sorgu
/* FILTER AREA */ .filter-area background: #f8fafd; padding: 24px 28px; border-bottom: 1px solid #e2e8f0; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
<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>
.stat-number font-size: 2rem; font-weight: 800; color: #1a2c3e; line-height: 1; Sorgu Paneli Scripti
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.
.data-table th text-align: left; padding: 16px 20px; background-color: #f1f5f9; color: #1e2f3e; font-weight: 600; border-bottom: 2px solid #e2e8f0; /* FILTER AREA */
<!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;
/* TABLO */ .table-wrapper overflow-x: auto; padding: 0 0 20px 0; .data-table th text-align: left
.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);
.badge-inactive background: #ffe4e2; color: #9b2c1d;