Sorgu Paneli Scripti Link
.filter-group label display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #4a627a; margin-bottom: 6px;
.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;
.button-group display: flex; gap: 12px; flex-wrap: wrap;
.sorgu-paneli background: #ffffff; border-radius: 32px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.1); transition: all 0.2s; Sorgu Paneli Scripti
.data-table td padding: 14px 20px; border-bottom: 1px solid #ecf3fa; color: #1f2d3d;
@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>
.data-table th text-align: left; padding: 16px 20px; background-color: #f1f5f9; color: #1e2f3e; font-weight: 600; border-bottom: 2px solid #e2e8f0; span class="badge badge-active">
// Enter tuşu ile sorgulama searchInput.addEventListener('keypress', function(e) if (e.key === 'Enter') filterAndRender(); ); statusFilter.addEventListener('change', filterAndRender); roleFilter.addEventListener('change', filterAndRender);
.stat-card background: #f1f5f9; border-radius: 28px; padding: 12px 24px; flex: 1; min-width: 130px; text-align: center;
renderTable(filtered); updateStats(filtered); ' : '<
.badge-active background: #d1fae5; color: #0b5e42;
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.
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;