raditarahman5-cloud
199 lines
6.8 KiB
PHP
199 lines
6.8 KiB
PHP
<!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> |