Poles UI/UX premium: fondasi global

- Font Plus Jakarta Sans (Google Fonts) menggantikan font sistem default
- Sidebar: brand area gradient + nama sekolah, nav aktif jadi pill gradient
  biru-indigo + chevron, label grup lebih elegan, footer badge NOCTKJ.net
- Topbar: sticky + backdrop-blur glass
- Background utama: gradient halus slate → biru samar
- Kartu standar premium (.card) + tombol (.btn-primary/.btn-outline) + input
  seragam di CSS; kartu utama halaman diseragamkan rounded-2xl
- Border global diselaraskan ke palet slate; scrollbar & seleksi teks premium
- Verifikasi: 29 test / 99 assertion, blade cache OK, vite build OK
This commit is contained in:
Novy San87
2026-08-03 14:27:03 +07:00
parent 279ef07ae2
commit 151a66639b
32 changed files with 317 additions and 277 deletions
+7 -7
View File
@@ -9,7 +9,7 @@
<p class="text-sm text-gray-500">Informasi sekolah untuk kop surat</p>
</div>
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
<div class="bg-white rounded-2xl shadow-sm border border-slate-200/80">
<form action="{{ route('settings.update') }}" method="POST" enctype="multipart/form-data" class="p-6 space-y-4">
@csrf
@@ -48,7 +48,7 @@
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm file:mr-3 file:py-1 file:px-3 file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
</div>
<hr class="border-gray-200">
<hr class="border-slate-200">
{{-- ===== Kop Surat ===== --}}
<div class="pt-2">
@@ -99,13 +99,13 @@
</div>
</div>
<hr class="border-gray-200">
<hr class="border-slate-200">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Background Halaman Login</label>
@if($settings->get('login_background')?->value)
<div class="mb-2">
<img src="{{ asset('storage/' . $settings->get('login_background')->value) }}" class="h-32 w-full object-cover rounded-lg border border-gray-200">
<img src="{{ asset('storage/' . $settings->get('login_background')->value) }}" class="h-32 w-full object-cover rounded-lg border border-slate-200">
</div>
@endif
<input type="file" name="login_background" accept="image/*"
@@ -113,7 +113,7 @@
<p class="text-xs text-gray-400 mt-1.5">Dimensi ideal: <strong class="text-gray-500">1200 × 800 px</strong> atau <strong class="text-gray-500">3:2</strong> (landscape). Maksimal <strong class="text-gray-500">2 MB</strong>. Format JPG/PNG/WebP.</p>
</div>
<hr class="border-gray-200">
<hr class="border-slate-200">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
@@ -128,7 +128,7 @@
</div>
</div>
<hr class="border-gray-200">
<hr class="border-slate-200">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Template Notifikasi WhatsApp Orang Tua</label>
@@ -145,7 +145,7 @@
</div>
{{-- Backup Database Card --}}
<div class="mt-6 bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
<div class="mt-6 bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-sm">