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
@@ -50,7 +50,7 @@
|
||||
<div class="relative flex-1">
|
||||
<i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></i>
|
||||
<input type="text" name="q" value="{{ $q }}" placeholder="Cari NISN / nomor / nama siswa..."
|
||||
class="w-full pl-11 pr-4 py-3 border border-gray-200 rounded-2xl text-sm bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-400 transition shadow-sm">
|
||||
class="w-full pl-11 pr-4 py-3 border border-slate-200 rounded-2xl text-sm bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-400 transition shadow-sm">
|
||||
</div>
|
||||
<button class="px-6 py-3 text-sm font-bold text-white bg-gradient-to-r from-indigo-500 to-violet-500 rounded-2xl hover:from-indigo-600 hover:to-violet-600 active:scale-95 transition shadow-lg shadow-indigo-500/25 inline-flex items-center gap-2">
|
||||
<i class="fa-solid fa-magnifying-glass"></i> Cari
|
||||
@@ -255,10 +255,10 @@
|
||||
</button>
|
||||
</template>
|
||||
<button type="button" x-show="cameraOn" @click="stopCamera()"
|
||||
class="inline-flex items-center gap-2 px-3 py-2.5 text-xs font-medium text-gray-500 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition">
|
||||
class="inline-flex items-center gap-2 px-3 py-2.5 text-xs font-medium text-gray-500 bg-white border border-slate-200 rounded-xl hover:bg-gray-50 transition">
|
||||
<i class="fa-solid fa-xmark"></i> Tutup
|
||||
</button>
|
||||
<label class="inline-flex items-center gap-2 px-3 py-2.5 text-xs font-medium text-gray-600 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition cursor-pointer">
|
||||
<label class="inline-flex items-center gap-2 px-3 py-2.5 text-xs font-medium text-gray-600 bg-white border border-slate-200 rounded-xl hover:bg-gray-50 transition cursor-pointer">
|
||||
<i class="fa-solid fa-folder-open"></i> Galeri
|
||||
<input type="file" class="hidden" accept="image/*" @change="onGalleryAlt">
|
||||
</label>
|
||||
@@ -270,7 +270,7 @@
|
||||
<p class="text-[11px] font-bold text-gray-400 uppercase tracking-wider mb-2">Foto Diambil (1–3)</p>
|
||||
<div class="grid grid-cols-3 gap-2.5">
|
||||
<template x-for="(shot, i) in shots" :key="i">
|
||||
<div class="relative aspect-square rounded-xl overflow-hidden border border-gray-200 group shadow-sm">
|
||||
<div class="relative aspect-square rounded-xl overflow-hidden border border-slate-200 group shadow-sm">
|
||||
<img :src="shot.url" class="w-full h-full object-cover">
|
||||
<button type="button" @click="removeShot(i)" title="Hapus foto ini"
|
||||
class="absolute top-1.5 right-1.5 w-7 h-7 bg-red-500 text-white rounded-full flex items-center justify-center text-xs hover:bg-red-600 active:scale-90 transition shadow-md md:opacity-0 md:group-hover:opacity-100">
|
||||
@@ -280,12 +280,12 @@
|
||||
</div>
|
||||
</template>
|
||||
<template x-for="n in (3 - shots.length)" :key="'ph' + n">
|
||||
<div class="aspect-square rounded-xl border-2 border-dashed border-gray-200 flex items-center justify-center text-gray-300 bg-gray-50/50">
|
||||
<div class="aspect-square rounded-xl border-2 border-dashed border-slate-200 flex items-center justify-center text-gray-300 bg-gray-50/50">
|
||||
<i class="fa-solid fa-image text-xl"></i>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="!shots.length">
|
||||
<div class="col-span-3 py-6 text-center text-xs text-gray-400 rounded-xl border border-dashed border-gray-200">
|
||||
<div class="col-span-3 py-6 text-center text-xs text-gray-400 rounded-xl border border-dashed border-slate-200">
|
||||
<i class="fa-solid fa-camera-retro text-2xl mb-2 block text-gray-300"></i>
|
||||
Belum ada foto — ambil dari kamera atau galeri
|
||||
</div>
|
||||
|
||||
@@ -179,7 +179,7 @@
|
||||
<template x-if="preview && !loading">
|
||||
<div class="flex items-center justify-center gap-3">
|
||||
<button type="button" @click="captureAgain()"
|
||||
class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold text-gray-600 bg-white border border-gray-200 rounded-2xl hover:bg-gray-50 active:scale-95 transition shadow-sm">
|
||||
class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold text-gray-600 bg-white border border-slate-200 rounded-2xl hover:bg-gray-50 active:scale-95 transition shadow-sm">
|
||||
<i class="fa-solid fa-rotate text-gray-400"></i> Ambil Ulang
|
||||
</button>
|
||||
<button type="button" @click="scan()"
|
||||
@@ -239,7 +239,7 @@
|
||||
<div class="space-y-3">
|
||||
<template x-for="c in result.candidates" :key="c.id">
|
||||
<div class="rounded-2xl p-4 transition-all duration-200 cursor-pointer border-2"
|
||||
:class="c.id === chosenId ? 'border-emerald-400 bg-emerald-50/50 shadow-lg shadow-emerald-500/10' : 'border-gray-100 bg-white hover:border-gray-200'"
|
||||
:class="c.id === chosenId ? 'border-emerald-400 bg-emerald-50/50 shadow-lg shadow-emerald-500/10' : 'border-gray-100 bg-white hover:border-slate-200'"
|
||||
@click="result.candidates.length > 1 && (chosenId = c.id)">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-500 text-white flex items-center justify-center font-extrabold text-lg shadow-md shrink-0"
|
||||
@@ -312,7 +312,7 @@
|
||||
<i class="fa-solid fa-plus"></i> Tambah Pelanggaran
|
||||
</a>
|
||||
<button type="button" @click="reset()"
|
||||
class="inline-flex items-center justify-center gap-2 px-5 py-3.5 text-sm font-semibold text-gray-600 bg-white border border-gray-200 rounded-2xl hover:bg-gray-50 active:scale-[0.98] transition">
|
||||
class="inline-flex items-center justify-center gap-2 px-5 py-3.5 text-sm font-semibold text-gray-600 bg-white border border-slate-200 rounded-2xl hover:bg-gray-50 active:scale-[0.98] transition">
|
||||
<i class="fa-solid fa-rotate text-gray-400"></i> Scan Lagi
|
||||
</button>
|
||||
</div>
|
||||
@@ -350,7 +350,7 @@
|
||||
<template x-if="!regDone">
|
||||
<div class="rounded-2xl border border-gray-100 p-4 mb-4">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<img :src="lastScanPreview" class="w-14 h-14 rounded-xl object-cover border border-gray-200 shadow-sm">
|
||||
<img :src="lastScanPreview" class="w-14 h-14 rounded-xl object-cover border border-slate-200 shadow-sm">
|
||||
<div>
|
||||
<p class="text-sm font-bold text-gray-700">Simpan foto ini atas nama siswa:</p>
|
||||
<p class="text-xs text-gray-400">Foto hasil scan akan dipakai sebagai referensi wajah</p>
|
||||
@@ -359,9 +359,9 @@
|
||||
<div class="relative">
|
||||
<i class="fa-solid fa-magnifying-glass absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></i>
|
||||
<input type="text" x-model="regQuery" @input.debounce="searchStudent" placeholder="Cari NISN / nama siswa..."
|
||||
class="w-full pl-9 pr-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-400 transition">
|
||||
class="w-full pl-9 pr-4 py-2.5 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-400 transition">
|
||||
</div>
|
||||
<div x-show="regResults.length > 0" class="mt-1.5 max-h-44 overflow-y-auto rounded-xl border border-gray-200 bg-white shadow-lg">
|
||||
<div x-show="regResults.length > 0" class="mt-1.5 max-h-44 overflow-y-auto rounded-xl border border-slate-200 bg-white shadow-lg">
|
||||
<template x-for="s in regResults" :key="s.id">
|
||||
<button type="button" @click="selectRegStudent(s)"
|
||||
class="w-full text-left px-3.5 py-2.5 hover:bg-amber-50 transition flex items-center gap-2.5 border-b border-gray-50 last:border-0">
|
||||
|
||||
Reference in New Issue
Block a user