novy/aplikasi-ketertiban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Poles halaman Input Pelanggaran premium

Browse Source 
- Breadcrumb chevron + slate, judul extrabold
- Header form: gradient lebih dalam (blue-600→sky-400) + watermark gavel
- Section label slate seragam (5 bagian), input pakai sistem .input
- Tombol Pilih File/Ambil Foto/Batal btn-outline, Simpan btn-primary
- Logika Alpine tidak disentuh
This commit is contained in:
Novy San87
2026-08-03 18:37:26 +07:00
parent 4dce2ad1d3
commit 57d618a1ad
1 changed files with 30 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/violations/create.blade.php
+30 -27
View File
@@ -7,13 +7,13 @@
{{-- Header --}} {{-- Header --}}
<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div> <div>
<nav class="flex items-center gap-1.5 text-sm text-gray-400 mb-1"> <nav class="flex items-center gap-1.5 text-xs text-slate-400 mb-1.5">
<a href="{{ route('violations.index') }}" class="hover:text-gray-600 transition">Data Pelanggaran</a> <a href="{{ route('violations.index') }}" class="hover:text-blue-600 transition font-medium">Data Pelanggaran</a>
<span class="text-gray-300">/</span> <i class="fa-solid fa-chevron-right text-[9px]"></i>
<span class="text-gray-700 font-medium">Input Baru</span> <span class="text-slate-700 font-semibold">Input Baru</span>
</nav> </nav>
<h1 class="text-2xl font-bold text-gray-900 tracking-tight">Input Pelanggaran</h1> <h1 class="text-2xl font-extrabold text-slate-900 tracking-tight">Input Pelanggaran</h1>
<p class="text-sm text-gray-500 mt-1">Catat pelanggaran siswa baru</p> <p class="text-sm text-slate-500 mt-1">Catat pelanggaran siswa baru</p>
</div> </div>
</div> </div>
@@ -22,9 +22,12 @@
@csrf @csrf
{{-- Gradient header --}} {{-- Gradient header --}}
<div class="bg-gradient-to-r from-blue-500 via-blue-400 to-sky-300 px-6 py-5"> <div class="bg-gradient-to-r from-blue-600 via-blue-500 to-sky-400 px-6 py-5 relative overflow-hidden">
<div class="flex items-center gap-3"> <div class="absolute right-0 top-0 w-32 h-32 opacity-10">
<div class="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center backdrop-blur-sm"> <i class="fa-solid fa-gavel text-white text-8xl"></i>
</div>
<div class="relative z-10 flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-white/20 border border-white/25 flex items-center justify-center backdrop-blur-sm shadow-sm">
<i class="fa-solid fa-gavel text-white text-lg"></i> <i class="fa-solid fa-gavel text-white text-lg"></i>
</div> </div>
<div> <div>
@@ -41,7 +44,7 @@
<div class="w-7 h-7 rounded-lg bg-blue-50 flex items-center justify-center"> <div class="w-7 h-7 rounded-lg bg-blue-50 flex items-center justify-center">
<i class="fa-solid fa-user-graduate text-blue-500 text-xs"></i> <i class="fa-solid fa-user-graduate text-blue-500 text-xs"></i>
</div> </div>
<span class="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Data Siswa</span> <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Data Siswa</span>
</div> </div>
@if (request()->has('student_id')) @if (request()->has('student_id'))
@@ -57,7 +60,7 @@
<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> <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="searchQuery" @input.debounce="searchStudents" <input type="text" x-model="searchQuery" @input.debounce="searchStudents"
placeholder="Cari NISN atau Nama siswa..." placeholder="Cari NISN atau Nama siswa..."
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-blue-500/20 focus:border-blue-500 transition"> class="input pl-9">
</div> </div>
<input type="hidden" name="student_id" x-model="selectedStudentId"> <input type="hidden" name="student_id" x-model="selectedStudentId">
@@ -104,7 +107,7 @@
<div class="w-7 h-7 rounded-lg bg-amber-50 flex items-center justify-center"> <div class="w-7 h-7 rounded-lg bg-amber-50 flex items-center justify-center">
<i class="fa-solid fa-triangle-exclamation text-amber-500 text-xs"></i> <i class="fa-solid fa-triangle-exclamation text-amber-500 text-xs"></i>
</div> </div>
<span class="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Detail Pelanggaran</span> <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Detail Pelanggaran</span>
</div> </div>
<div x-data="typeMultiSearch({{ json_encode($typeGroups) }})" class="space-y-4"> <div x-data="typeMultiSearch({{ json_encode($typeGroups) }})" class="space-y-4">
@@ -119,7 +122,7 @@
<input type="text" x-model="q" @input="open=true" @focus="open=true" <input type="text" x-model="q" @input="open=true" @focus="open=true"
@click.away="open=false" @keydown.escape="open=false" @click.away="open=false" @keydown.escape="open=false"
placeholder="Ketik nama pelanggaran untuk menambah..." placeholder="Ketik nama pelanggaran untuk menambah..."
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-blue-500/20 focus:border-blue-500 transition"> class="input pl-9">
</div> </div>
{{-- Search results --}} {{-- Search results --}}
@@ -237,24 +240,24 @@
<div class="w-7 h-7 rounded-lg bg-teal-50 flex items-center justify-center"> <div class="w-7 h-7 rounded-lg bg-teal-50 flex items-center justify-center">
<i class="fa-solid fa-clock text-teal-500 text-xs"></i> <i class="fa-solid fa-clock text-teal-500 text-xs"></i>
</div> </div>
<span class="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Waktu & Lokasi</span> <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Waktu & Lokasi</span>
</div> </div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div> <div>
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Tanggal <span class="text-red-500">*</span></label> <label class="block text-sm font-semibold text-gray-700 mb-1.5">Tanggal <span class="text-red-500">*</span></label>
<input type="date" name="violation_date" value="{{ date('Y-m-d') }}" required <input type="date" name="violation_date" value="{{ date('Y-m-d') }}" required
class="w-full px-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-blue-500/20 focus:border-blue-500 transition"> class="input">
</div> </div>
<div> <div>
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Waktu</label> <label class="block text-sm font-semibold text-gray-700 mb-1.5">Waktu</label>
<input type="time" name="violation_time" value="{{ date('H:i') }}" <input type="time" name="violation_time" value="{{ date('H:i') }}"
class="w-full px-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-blue-500/20 focus:border-blue-500 transition"> class="input">
</div> </div>
<div> <div>
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Lokasi</label> <label class="block text-sm font-semibold text-gray-700 mb-1.5">Lokasi</label>
<input type="text" name="location" placeholder="Depan kelas, Lapangan, dll" <input type="text" name="location" placeholder="Depan kelas, Lapangan, dll"
class="w-full px-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-blue-500/20 focus:border-blue-500 transition"> class="input">
</div> </div>
</div> </div>
</div> </div>
@@ -265,13 +268,13 @@
<div class="w-7 h-7 rounded-lg bg-violet-50 flex items-center justify-center"> <div class="w-7 h-7 rounded-lg bg-violet-50 flex items-center justify-center">
<i class="fa-solid fa-note-sticky text-violet-500 text-xs"></i> <i class="fa-solid fa-note-sticky text-violet-500 text-xs"></i>
</div> </div>
<span class="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Catatan</span> <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Catatan</span>
</div> </div>
<div> <div>
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Deskripsi / Catatan Pelanggaran</label> <label class="block text-sm font-semibold text-gray-700 mb-1.5">Deskripsi / Catatan Pelanggaran</label>
<textarea name="description" rows="3" placeholder="Deskripsi lengkap pelanggaran yang terjadi..." <textarea name="description" rows="3" placeholder="Deskripsi lengkap pelanggaran yang terjadi..."
class="w-full px-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-blue-500/20 focus:border-blue-500 transition resize-none"></textarea> class="input resize-none"></textarea>
</div> </div>
</div> </div>
@@ -281,7 +284,7 @@
<div class="w-7 h-7 rounded-lg bg-sky-50 flex items-center justify-center"> <div class="w-7 h-7 rounded-lg bg-sky-50 flex items-center justify-center">
<i class="fa-solid fa-camera text-sky-500 text-xs"></i> <i class="fa-solid fa-camera text-sky-500 text-xs"></i>
</div> </div>
<span class="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Bukti Foto</span> <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Bukti Foto</span>
<span class="text-[10px] text-gray-400 font-medium">(maks. 5 foto)</span> <span class="text-[10px] text-gray-400 font-medium">(maks. 5 foto)</span>
</div> </div>
@@ -311,13 +314,13 @@
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button type="button" @click="document.getElementById('evidences').click()" <button type="button" @click="document.getElementById('evidences').click()"
class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-600 bg-white border border-slate-200 rounded-xl hover:bg-gray-50 transition shadow-sm"> class="btn-outline">
<i class="fa-solid fa-image text-gray-400"></i> <i class="fa-solid fa-image text-xs"></i>
Pilih File Pilih File
</button> </button>
<button type="button" @click="captureCamera" <button type="button" @click="captureCamera"
class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-600 bg-white border border-slate-200 rounded-xl hover:bg-gray-50 transition shadow-sm"> class="btn-outline">
<i class="fa-solid fa-camera text-gray-400"></i> <i class="fa-solid fa-camera text-xs"></i>
Ambil Foto Ambil Foto
</button> </button>
</div> </div>
@@ -326,14 +329,14 @@
</div> </div>
{{-- Footer --}} {{-- Footer --}}
<div class="px-6 py-4 bg-gray-50/80 border-t border-gray-100 flex items-center justify-end gap-3"> <div class="px-6 py-4 bg-slate-50/80 border-t border-slate-100 flex items-center justify-end gap-3">
<a href="{{ route('violations.index') }}" <a href="{{ route('violations.index') }}"
class="px-5 py-2.5 text-sm font-medium text-gray-600 bg-white border border-slate-200 rounded-xl hover:bg-gray-50 transition inline-flex items-center gap-2"> class="btn-outline">
<i class="fa-solid fa-arrow-left text-xs"></i> <i class="fa-solid fa-arrow-left text-xs"></i>
Batal Batal
</a> </a>
<button type="submit" <button type="submit"
class="px-6 py-2.5 text-sm font-semibold text-white bg-blue-600 rounded-xl hover:bg-blue-700 transition shadow-sm inline-flex items-center gap-2"> class="btn-primary">
<i class="fa-solid fa-floppy-disk text-xs"></i> <i class="fa-solid fa-floppy-disk text-xs"></i>
Simpan Pelanggaran Simpan Pelanggaran
</button> </button>