Initial commit for combined ProjectKP
This commit is contained in:
raditarahman5-cloud
@@ -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>
|
||||
Reference in New Issue
Block a user