Initial commit for combined ProjectKP
This commit is contained in:
raditarahman5-cloud
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Activity Reports</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
|
||||
<body class="bg-gray-100 p-6">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-blue-900">Laporan Aktivitas Pegawai</h1>
|
||||
<p class="text-gray-500">Manajemen dan pemantauan kinerja harian instansi</p>
|
||||
</div>
|
||||
|
||||
<button onclick="exportPDF()" class="bg-blue-800 text-white px-4 py-2 rounded-lg">
|
||||
Export PDF
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- FILTER -->
|
||||
<form method="GET" class="bg-white p-4 rounded-xl shadow mb-6 grid grid-cols-4 gap-4">
|
||||
|
||||
<input type="text" name="search"
|
||||
placeholder="Cari pegawai / aktivitas"
|
||||
class="border rounded-lg px-3 py-2">
|
||||
|
||||
<input type="date" name="tanggal"
|
||||
class="border rounded-lg px-3 py-2">
|
||||
|
||||
<select name="status" class="border rounded-lg px-3 py-2">
|
||||
<option>Semua</option>
|
||||
<option>Selesai</option>
|
||||
<option>Dalam Proses</option>
|
||||
<option>Menunggu</option>
|
||||
</select>
|
||||
|
||||
<button class="bg-blue-800 text-white rounded-lg px-4">
|
||||
Terapkan Filter
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
<!-- TABLE -->
|
||||
<div class="bg-white rounded-xl shadow overflow-hidden">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-gray-100">
|
||||
<tr>
|
||||
<th class="p-3 text-left">Nama</th>
|
||||
<th class="p-3 text-left">Aktivitas</th>
|
||||
<th class="p-3 text-left">Lokasi</th>
|
||||
<th class="p-3 text-left">Tanggal</th>
|
||||
<th class="p-3 text-left">Status</th>
|
||||
<th class="p-3 text-left">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
<tr class="border-t">
|
||||
<td class="p-3 flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-blue-200 rounded-full flex items-center justify-center text-xs font-bold">
|
||||
AS
|
||||
</div>
|
||||
Agus Setiawan
|
||||
</td>
|
||||
|
||||
<td class="p-3">Sosialisasi Ketenagakerjaan</td>
|
||||
<td class="p-3">Pontianak</td>
|
||||
<td class="p-3">24 Mei 2024</td>
|
||||
|
||||
<td class="p-3">
|
||||
<span class="bg-green-100 text-green-700 px-2 py-1 rounded-full text-xs">
|
||||
SELESAI
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="p-3">
|
||||
<button onclick="showDetail()" class="text-blue-700 font-semibold">
|
||||
Detail
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- SUMMARY -->
|
||||
<div class="grid grid-cols-3 gap-4 mt-6">
|
||||
|
||||
<div class="bg-white p-4 rounded-xl shadow">
|
||||
<p class="text-gray-500 text-sm">Total Selesai</p>
|
||||
<h2 class="text-2xl font-bold text-blue-900">86</h2>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-4 rounded-xl shadow">
|
||||
<p class="text-gray-500 text-sm">Dalam Antrian</p>
|
||||
<h2 class="text-2xl font-bold">38</h2>
|
||||
</div>
|
||||
|
||||
<div class="bg-red-50 p-4 rounded-xl shadow">
|
||||
<p class="text-red-500 text-sm">Urgent / Menunggu</p>
|
||||
<h2 class="text-2xl font-bold text-red-600">12</h2>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- MODAL -->
|
||||
<div id="modal" class="hidden fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center">
|
||||
<div class="bg-white p-6 rounded-xl w-96">
|
||||
<h2 class="text-xl font-bold mb-4">Detail Aktivitas</h2>
|
||||
|
||||
<p>Detail data pegawai...</p>
|
||||
|
||||
<button onclick="closeModal()" class="mt-4 bg-blue-800 text-white px-4 py-2 rounded">
|
||||
Tutup
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showDetail(){
|
||||
document.getElementById('modal').classList.remove('hidden');
|
||||
}
|
||||
|
||||
function closeModal(){
|
||||
document.getElementById('modal').classList.add('hidden');
|
||||
}
|
||||
|
||||
function exportPDF(){
|
||||
alert('Export PDF diklik');
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,198 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dashboard Monitoring - Disnaker Pontianak</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; background-color: #F8FAFC; }
|
||||
.sidebar-active { background-color: #FFFFFF; color: #0D215C; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05); }
|
||||
.custom-scroll::-webkit-scrollbar { width: 6px; }
|
||||
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
|
||||
.custom-scroll::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="flex h-screen overflow-hidden text-slate-700">
|
||||
|
||||
<aside class="w-64 bg-[#F8FAFC] border-r border-slate-200 flex flex-col">
|
||||
<div class="p-8 mb-4">
|
||||
<h1 class="text-[#0D215C] font-extrabold text-xl tracking-tight">Disnaker</h1>
|
||||
<p class="text-slate-400 text-[10px] font-bold tracking-widest uppercase mt-0.5">Kota Pontianak</p>
|
||||
</div>
|
||||
|
||||
<nav class="flex-1 px-4 space-y-1">
|
||||
<a href="#" class="sidebar-active flex items-center gap-3 p-3 rounded-xl font-bold text-sm transition-all">
|
||||
<i data-lucide="layout-grid" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="{{ route('input.activity') }}" class="flex items-center gap-3 p-3 rounded-xl text-slate-400 hover:text-[#0D215C] font-semibold text-sm transition-all group">
|
||||
<i data-lucide="bar-chart-3" class="w-5 h-5"></i> Activity Report
|
||||
</a>
|
||||
<a href="{{ route('input.activity') }}" class="flex items-center gap-3 p-3 rounded-xl text-slate-400 hover:text-[#0D215C] font-semibold text-sm transition-all group">
|
||||
<i data-lucide="file-text" class="w-5 h-5"></i> Input Activity
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="p-4 border-t border-slate-200 space-y-1 mb-4">
|
||||
<a href="#" class="flex items-center gap-3 p-3 rounded-xl text-slate-400 hover:text-[#0D215C] font-semibold text-sm transition-all">
|
||||
<i data-lucide="settings" class="w-5 h-5"></i> Pengaturan
|
||||
</a>
|
||||
<a href="{{ route('logout') }}" class="flex items-center gap-3 p-3 rounded-xl text-red-400 hover:bg-red-50 font-bold text-sm transition-all">
|
||||
<i data-lucide="log-out" class="w-5 h-5"></i> Logout
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="flex-1 overflow-y-auto bg-white m-4 rounded-[32px] border border-slate-100 shadow-sm relative custom-scroll">
|
||||
|
||||
<div class="sticky top-0 bg-white/80 backdrop-blur-md px-10 py-6 flex justify-between items-center z-10 border-b border-slate-50 border-dashed">
|
||||
<div class="relative w-96 group">
|
||||
<i data-lucide="search" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300 group-focus-within:text-blue-500 transition-colors"></i>
|
||||
<input type="text" placeholder="Cari aktivitas atau pegawai..."
|
||||
class="w-full pl-11 pr-4 py-2.5 bg-slate-50 border border-slate-100 rounded-2xl focus:ring-4 focus:ring-blue-500/5 focus:border-blue-500/20 outline-none text-sm transition-all">
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-6">
|
||||
<button class="relative p-2 text-slate-400 hover:bg-slate-50 rounded-full transition-colors">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i>
|
||||
<span class="absolute top-2.5 right-2.5 w-2 h-2 bg-red-500 rounded-full border-2 border-white"></span>
|
||||
</button>
|
||||
<div class="flex items-center gap-4 pl-6 border-l border-slate-100">
|
||||
<div class="text-right">
|
||||
<p class="text-xs font-extrabold text-[#0D215C]">Ahmad Ridwan</p>
|
||||
<p class="text-[10px] text-slate-400 font-bold uppercase tracking-wider mt-0.5">Administrator</p>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-2xl bg-[#0D215C] flex items-center justify-center shadow-lg shadow-blue-900/20 overflow-hidden border-2 border-slate-50">
|
||||
<img src="https://ui-avatars.com/api/?name=Ahmad+Ridwan&background=0D215C&color=fff" alt="Avatar">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-10">
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-10 gap-4">
|
||||
<div>
|
||||
<h2 class="text-[28px] font-black text-[#0D215C] tracking-tight">Dashboard Monitoring</h2>
|
||||
<p class="text-slate-400 text-sm mt-2 font-medium">Pantau progres dan efektivitas kerja pegawai secara real-time.</p>
|
||||
</div>
|
||||
<button class="bg-[#0D215C] text-white px-7 py-3 rounded-2xl font-bold text-xs uppercase tracking-widest hover:bg-blue-900 shadow-xl shadow-blue-900/20 active:scale-95 transition-all flex items-center gap-2">
|
||||
<i data-lucide="plus" class="w-4 h-4"></i> Tambah Aktivitas
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
|
||||
<div class="bg-white p-6 rounded-[28px] border border-slate-100 shadow-sm border-l-4 border-blue-500 flex justify-between items-start hover:scale-[1.02] transition-all">
|
||||
<div>
|
||||
<p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest mb-1">Total Activities</p>
|
||||
<h3 class="text-3xl font-black text-[#0D215C]">1,284</h3>
|
||||
<p class="text-[10px] text-green-500 font-bold mt-3 flex items-center gap-1">
|
||||
<i data-lucide="trending-up" class="w-3 h-3"></i> +12% dari bulan lalu
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-blue-50 rounded-2xl flex items-center justify-center">
|
||||
<i data-lucide="archive" class="text-blue-500 w-6 h-6"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-[28px] border border-slate-100 shadow-sm border-l-4 border-green-500 flex justify-between items-start hover:scale-[1.02] transition-all">
|
||||
<div>
|
||||
<p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest mb-1">Completed</p>
|
||||
<h3 class="text-3xl font-black text-[#0D215C]">942</h3>
|
||||
<div class="w-32 h-1.5 bg-slate-100 rounded-full mt-5 overflow-hidden">
|
||||
<div class="w-[75%] h-full bg-green-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-green-50 rounded-2xl flex items-center justify-center">
|
||||
<i data-lucide="check-circle" class="text-green-500 w-6 h-6"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-[28px] border border-slate-100 shadow-sm border-l-4 border-amber-500 flex justify-between items-start hover:scale-[1.02] transition-all">
|
||||
<div>
|
||||
<p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest mb-1">Ongoing</p>
|
||||
<h3 class="text-3xl font-black text-[#0D215C]">215</h3>
|
||||
<p class="text-[10px] text-slate-400 font-medium mt-4 italic">Dalam peninjauan aktif</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-amber-50 rounded-2xl flex items-center justify-center">
|
||||
<i data-lucide="clock" class="text-amber-500 w-6 h-6"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-[28px] border border-slate-100 shadow-sm border-l-4 border-red-500 flex justify-between items-start hover:scale-[1.02] transition-all">
|
||||
<div>
|
||||
<p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest mb-1">Pending</p>
|
||||
<h3 class="text-3xl font-black text-[#0D215C]">127</h3>
|
||||
<p class="text-[10px] text-red-500 font-bold mt-4 uppercase tracking-tighter">Perlu tindakan segera</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-red-50 rounded-2xl flex items-center justify-center">
|
||||
<i data-lucide="alert-circle" class="text-red-500 w-6 h-6"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-[32px] border border-slate-100 shadow-sm overflow-hidden">
|
||||
<div class="px-8 py-6 flex justify-between items-center border-b border-slate-50">
|
||||
<h4 class="font-extrabold text-[#0D215C] tracking-tight">Recent Activities</h4>
|
||||
<a href="#" class="text-[11px] font-black text-blue-600 uppercase tracking-widest hover:text-blue-800 transition-colors">Lihat Semua</a>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-slate-50/50">
|
||||
<tr class="text-left text-[10px] font-black text-slate-400 uppercase tracking-[0.15em]">
|
||||
<th class="px-8 py-5">Employee Name</th>
|
||||
<th class="px-8 py-5">Activity</th>
|
||||
<th class="px-8 py-5">Location</th>
|
||||
<th class="px-8 py-5">Date</th>
|
||||
<th class="px-8 py-5 text-center">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-50">
|
||||
<tr class="hover:bg-slate-50/50 transition-colors group">
|
||||
<td class="px-8 py-5">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-blue-50 flex items-center justify-center text-[10px] font-bold text-blue-600">BP</div>
|
||||
<span class="text-xs font-extrabold text-slate-700">Bambang Pamungkas</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-8 py-5 text-xs font-semibold text-slate-500">Audit K3 Lapangan</td>
|
||||
<td class="px-8 py-5">
|
||||
<div class="flex items-center gap-1.5 text-xs font-semibold text-slate-400">
|
||||
<i data-lucide="map-pin" class="w-3 h-3"></i> Kawasan Industri
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-8 py-5 text-xs font-bold text-slate-400">24 Okt 2023</td>
|
||||
<td class="px-8 py-5 text-center">
|
||||
<span class="bg-green-100 text-green-600 px-4 py-1.5 rounded-lg text-[9px] font-black uppercase tracking-widest">Completed</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50/50 transition-colors group">
|
||||
<td class="px-8 py-5">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-purple-50 flex items-center justify-center text-[10px] font-bold text-purple-600">SP</div>
|
||||
<span class="text-xs font-extrabold text-slate-700">Siti Permata</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-8 py-5 text-xs font-semibold text-slate-500">Sosialisasi BPJS TK</td>
|
||||
<td class="px-8 py-5">
|
||||
<div class="flex items-center gap-1.5 text-xs font-semibold text-slate-400">
|
||||
<i data-lucide="map-pin" class="w-3 h-3"></i> Aula Kantor Camat
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-8 py-5 text-xs font-bold text-slate-400">24 Okt 2023</td>
|
||||
<td class="px-8 py-5 text-center">
|
||||
<span class="bg-amber-100 text-amber-600 px-4 py-1.5 rounded-lg text-[9px] font-black uppercase tracking-widest">Ongoing</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Inisialisasi Ikon Lucide
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,199 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Input Activity - Disnaker Pontianak</title>
|
||||
|
||||
<!-- Tailwind -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- ICON -->
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
|
||||
<!-- Font -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="bg-[#F5F7FB] text-slate-700">
|
||||
|
||||
<!-- NAVBAR -->
|
||||
<div class="bg-white px-10 py-4 flex justify-between items-center shadow-sm">
|
||||
|
||||
<h1 class="font-bold text-[#0D215C] tracking-wide">
|
||||
DISNAKER PONTIANAK
|
||||
</h1>
|
||||
|
||||
<div class="flex items-center gap-6 text-sm text-slate-500">
|
||||
<a href="{{ route('dashboard') }}">Dashboard</a>
|
||||
<a href="#">Activity Reports</a>
|
||||
<a href="#" class="text-[#0D215C] font-semibold">Input Activity</a>
|
||||
<a href="#">Settings</a>
|
||||
|
||||
<!-- ICON 3D STYLE -->
|
||||
<div class="flex items-center gap-3 ml-4">
|
||||
|
||||
<!-- NOTIF -->
|
||||
<div class="bg-white p-2 rounded-xl shadow-md hover:shadow-xl hover:-translate-y-1 transition cursor-pointer">
|
||||
<i data-lucide="bell" class="w-5 h-5 text-[#0D215C]"></i>
|
||||
</div>
|
||||
|
||||
<!-- USER -->
|
||||
<div class="bg-white p-2 rounded-xl shadow-md hover:shadow-xl hover:-translate-y-1 transition cursor-pointer">
|
||||
<i data-lucide="user" class="w-5 h-5 text-[#0D215C]"></i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="max-w-6xl mx-auto mt-10 px-4">
|
||||
|
||||
<div class="mb-6">
|
||||
<h2 class="text-2xl font-bold text-[#0D215C]">
|
||||
Input Laporan Kegiatan
|
||||
</h2>
|
||||
<p class="text-sm text-slate-400 mt-2 max-w-xl">
|
||||
Silakan lengkapi formulir di bawah ini untuk melaporkan aktivitas lapangan Anda.
|
||||
Pastikan data yang dimasukkan akurat sesuai dengan pelaksanaan tugas.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-6">
|
||||
|
||||
<!-- FORM -->
|
||||
<div class="col-span-2 bg-white p-6 rounded-xl shadow-sm border">
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="text-sm font-semibold text-[#0D215C]">Nama Kegiatan</label>
|
||||
<input type="text" placeholder="Contoh: Monitoring Kepatuhan Perusahaan"
|
||||
class="w-full mt-2 p-3 bg-[#F5F7FB] rounded-lg outline-none focus:ring-2 focus:ring-[#0D215C]">
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
|
||||
<div>
|
||||
<label class="text-sm font-semibold text-[#0D215C]">Tanggal Pelaksanaan</label>
|
||||
<input type="date"
|
||||
class="w-full mt-2 p-3 bg-[#F5F7FB] rounded-lg outline-none focus:ring-2 focus:ring-[#0D215C]">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-sm font-semibold text-[#0D215C]">Lokasi</label>
|
||||
<input type="text" placeholder="Kec. Pontianak Selatan"
|
||||
class="w-full mt-2 p-3 bg-[#F5F7FB] rounded-lg outline-none focus:ring-2 focus:ring-[#0D215C]">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-sm font-semibold text-[#0D215C]">Deskripsi Kegiatan</label>
|
||||
<textarea rows="5"
|
||||
placeholder="Uraikan detail jalannya kegiatan..."
|
||||
class="w-full mt-2 p-3 bg-[#F5F7FB] rounded-lg outline-none focus:ring-2 focus:ring-[#0D215C]"></textarea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- RIGHT PANEL -->
|
||||
<div class="space-y-6">
|
||||
|
||||
<!-- Upload -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm border">
|
||||
|
||||
<h4 class="font-semibold text-[#0D215C] mb-4">
|
||||
Unggah Dokumen
|
||||
</h4>
|
||||
|
||||
<div id="drop-area"
|
||||
onclick="document.getElementById('fileInput').click()"
|
||||
class="border-2 border-dashed rounded-xl p-6 text-center text-slate-400 hover:border-[#0D215C] hover:bg-[#F0F4FF] transition cursor-pointer">
|
||||
|
||||
<p class="text-sm">Klik untuk upload atau drag file ke sini</p>
|
||||
|
||||
<button type="button"
|
||||
class="mt-3 bg-[#0D215C] hover:bg-blue-900 transition text-white px-4 py-2 rounded-lg shadow">
|
||||
Browse Files
|
||||
</button>
|
||||
|
||||
<input type="file" id="fileInput" multiple class="hidden">
|
||||
</div>
|
||||
|
||||
<div id="fileList" class="mt-4 space-y-2 text-sm"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Panduan -->
|
||||
<div class="bg-[#0D215C] text-white p-5 rounded-xl">
|
||||
<h4 class="font-semibold mb-3">Panduan Input</h4>
|
||||
<ul class="text-sm space-y-1 opacity-90">
|
||||
<li>- Gunakan bahasa formal</li>
|
||||
<li>- Lampirkan minimal 1 foto</li>
|
||||
<li>- Data harus valid</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button class="w-full bg-[#0D215C] hover:bg-blue-900 transition text-white py-3 rounded-xl font-semibold shadow-lg hover:scale-[1.02]">
|
||||
Kirim Laporan
|
||||
</button>
|
||||
|
||||
<p class="text-center text-sm text-slate-400">
|
||||
Simpan Sebagai Draft
|
||||
</p>
|
||||
|
||||
<a href="{{ route('dashboard') }}" class="block text-center text-sm text-blue-600 mt-2">
|
||||
← Kembali ke Dashboard
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- SCRIPT -->
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const fileList = document.getElementById('fileList');
|
||||
|
||||
fileInput.addEventListener('change', function () {
|
||||
fileList.innerHTML = "";
|
||||
|
||||
Array.from(this.files).forEach((file, index) => {
|
||||
const item = document.createElement('div');
|
||||
item.className = "flex justify-between items-center bg-[#F5F7FB] p-3 rounded-lg hover:shadow transition";
|
||||
|
||||
item.innerHTML = `
|
||||
<div class="flex items-center gap-2">
|
||||
📄 <span>${file.name}</span>
|
||||
</div>
|
||||
<button onclick="removeFile(${index})" class="text-red-500 hover:text-red-700 font-bold text-lg">
|
||||
×
|
||||
</button>
|
||||
`;
|
||||
|
||||
fileList.appendChild(item);
|
||||
});
|
||||
});
|
||||
|
||||
function removeFile(index) {
|
||||
const dt = new DataTransfer();
|
||||
|
||||
Array.from(fileInput.files).forEach((file, i) => {
|
||||
if (i !== index) dt.items.add(file);
|
||||
});
|
||||
|
||||
fileInput.files = dt.files;
|
||||
fileInput.dispatchEvent(new Event('change'));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,270 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login - Disnaker Pontianak</title>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* --- SISI KIRI (Visual & Branding) --- */
|
||||
.left {
|
||||
width: 50%;
|
||||
background: linear-gradient(135deg, rgba(15, 42, 92, 0.92), rgba(30, 60, 114, 0.85)),
|
||||
url('https://www.pontianak.go.id/themes/pontianak/assets/images/gedung-walikota.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: white;
|
||||
padding: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 70px;
|
||||
width: auto;
|
||||
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.logo h3 {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
line-height: 1.2;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.mid-content {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 48px;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 25px;
|
||||
text-shadow: 0 4px 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.title::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 6px;
|
||||
background: #3b82f6;
|
||||
margin-top: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
color: #e2e8f0;
|
||||
max-width: 85%;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
font-size: 11px;
|
||||
letter-spacing: 3px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* --- SISI KANAN (Form Login) --- */
|
||||
.right {
|
||||
width: 50%;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.form-box {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.form-box h2 {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-box p {
|
||||
margin-bottom: 40px;
|
||||
color: #64748b;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #1e293b;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
width: 100%;
|
||||
padding: 14px 18px;
|
||||
border: 1.5px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
background: #f8fafc;
|
||||
transition: all 0.3s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.input-group input:focus {
|
||||
border-color: #3b82f6;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
background: #1e3c72;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
transition: all 0.3s ease;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #0f2a5c;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(30, 60, 114, 0.2);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
margin-top: 40px;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
color: #94a3b8;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 992px) {
|
||||
.left { display: none; }
|
||||
.right { width: 100%; background: #f8fafc; }
|
||||
.form-box {
|
||||
background: white;
|
||||
padding: 40px;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div class="left">
|
||||
<div class="logo">
|
||||
<img src="{{ asset('Kalimantan-Barat-Logo-Vector.png') }}" alt="Logo">
|
||||
<h3>DINAS TENAGA KERJA<br>KOTA PONTIANAK</h3>
|
||||
</div>
|
||||
|
||||
<div class="mid-content">
|
||||
<div class="title">
|
||||
Sistem Monitoring <br>
|
||||
Aktivitas Pegawai
|
||||
</div>
|
||||
<div class="desc">
|
||||
Platform terintegrasi untuk pelaporan aktivitas pegawai, pemantauan kinerja institusi,
|
||||
serta peningkatan kualitas administrasi pemerintahan di lingkungan
|
||||
Dinas Tenaga Kerja dan Transmigrasi Kota Pontianak.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-left">
|
||||
TRANSPARANSI • AKUNTABILITAS • INTEGRITAS
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<div class="form-box">
|
||||
<h2>Selamat Datang</h2>
|
||||
<p>Masuk dengan akun Anda untuk mengakses panel.</p>
|
||||
|
||||
<form action="{{ route('dashboard') }}" method="GET">
|
||||
<div class="input-group">
|
||||
<label>Alamat Email</label>
|
||||
<input type="email" name="email" placeholder="nama@disnaker.pontianak.go.id" required>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>Kata Sandi</label>
|
||||
<input type="password" name="password" placeholder="********" required>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn">
|
||||
Masuk ke Sistem
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="footer-right">
|
||||
© 2026 DINAS TENAGA KERJA KOTA PONTIANAK
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user