118 lines
5.3 KiB
PHP
118 lines
5.3 KiB
PHP
<x-app-layout>
|
|
<!-- Header Halaman -->
|
|
<x-slot name="header">
|
|
<div class="header-container-css">
|
|
<span class="icon-pulse-css">👥</span>
|
|
<h2 class="title-grad-css">Pengguna & Administrator</h2>
|
|
</div>
|
|
</x-slot>
|
|
|
|
<!-- CSS MURNI -->
|
|
<style>
|
|
:root {
|
|
--primary-blue: #0052cc;
|
|
--primary-glow: rgba(0, 82, 204, 0.15);
|
|
--neon-sky: #00b3ff;
|
|
--light-ice: #f2f7ff;
|
|
--clean-white: #ffffff;
|
|
--text-main: #1e293b;
|
|
--text-muted: #64748b;
|
|
--border-soft: #e2e8f0;
|
|
--card-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
.gt-wrapper-css {
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
background-color: #f8fafc;
|
|
min-height: 100vh;
|
|
padding: 40px 20px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.gt-container-css {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.blob-css { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 1; opacity: 0.25; }
|
|
.blob-1 { width: 400px; height: 400px; background-color: #93c5fd; top: 5%; left: -10%; animation: float-slow 8s infinite ease-in-out; }
|
|
.blob-2 { width: 500px; height: 500px; background-color: #bae6fd; bottom: 5%; right: -10%; animation: float-slow-rev 10s infinite ease-in-out; }
|
|
|
|
.gt-hero-card {
|
|
background: var(--clean-white);
|
|
border: 1px solid var(--border-soft);
|
|
border-radius: 32px;
|
|
padding: 35px;
|
|
box-shadow: var(--card-shadow);
|
|
border-left: 8px solid var(--primary-blue);
|
|
}
|
|
|
|
.gt-hero-card h3 { font-size: 20px; font-weight: 900; color: var(--primary-blue); margin-bottom: 20px; }
|
|
|
|
@keyframes float-slow { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.05); } }
|
|
@keyframes float-slow-rev { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(20px) scale(0.95); } }
|
|
@keyframes bounce-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
|
|
|
|
.header-container-css { display: flex; align-items: center; gap: 12px; }
|
|
.icon-pulse-css { font-size: 24px; animation: bounce-slow 2s infinite ease-in-out; }
|
|
.title-grad-css { font-size: 20px; font-weight: 900; background: linear-gradient(to right, var(--primary-blue), var(--neon-sky)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0; }
|
|
</style>
|
|
|
|
<!-- KONTEN -->
|
|
<div class="gt-wrapper-css">
|
|
<div class="blob-css blob-1"></div>
|
|
<div class="blob-css blob-2"></div>
|
|
|
|
<div class="gt-container-css">
|
|
|
|
<!-- Tabel Admin -->
|
|
<div class="gt-hero-card">
|
|
<h3>Daftar Administrator</h3>
|
|
<table style="width: 100%; border-collapse: collapse;">
|
|
<thead>
|
|
<tr style="text-align: left; border-bottom: 2px solid var(--light-ice);">
|
|
<th style="padding: 15px; color: var(--text-muted); font-size: 11px; text-transform: uppercase;">Nama</th>
|
|
<th style="padding: 15px; color: var(--text-muted); font-size: 11px; text-transform: uppercase;">Email</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($admins as $admin)
|
|
<tr style="border-bottom: 1px solid var(--border-soft);">
|
|
<td style="padding: 15px; font-weight: 800; color: var(--text-main);">{{ $admin->name }}</td>
|
|
<td style="padding: 15px; color: var(--text-muted);">{{ $admin->email }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Tabel User -->
|
|
<div class="gt-hero-card">
|
|
<h3>Daftar Teman Tuli</h3>
|
|
<table style="width: 100%; border-collapse: collapse;">
|
|
<thead>
|
|
<tr style="text-align: left; border-bottom: 2px solid var(--light-ice);">
|
|
<th style="padding: 15px; color: var(--text-muted); font-size: 11px; text-transform: uppercase;">Nama</th>
|
|
<th style="padding: 15px; color: var(--text-muted); font-size: 11px; text-transform: uppercase;">Email</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($users as $user)
|
|
<tr style="border-bottom: 1px solid var(--border-soft);">
|
|
<td style="padding: 15px; font-weight: 800; color: var(--text-main);">{{ $user->name }}</td>
|
|
<td style="padding: 15px; color: var(--text-muted);">{{ $user->email }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</x-app-layout> |