Initial import of AbelBirdNest Stock

This commit is contained in:
2026-05-16 18:25:51 +07:00
commit 14bb9bf744
472 changed files with 70671 additions and 0 deletions

View File

@ -0,0 +1,419 @@
<!DOCTYPE html>
<html lang="id"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"secondary": "#4e6073",
"on-primary-fixed": "#001f23",
"primary-fixed": "#aaeef8",
"outline": "#6f797a",
"background": "#f8fafa",
"on-tertiary-fixed-variant": "#6b3a17",
"on-primary-fixed-variant": "#004f57",
"error-container": "#ffdad6",
"tertiary": "#60320f",
"on-secondary-container": "#526478",
"surface-container": "#eceeee",
"on-tertiary": "#ffffff",
"secondary-container": "#cfe2f9",
"on-error-container": "#93000a",
"inverse-primary": "#8ed1db",
"secondary-fixed": "#d1e4fb",
"surface-tint": "#1d6871",
"on-primary-container": "#92d5df",
"on-secondary-fixed-variant": "#36485b",
"inverse-surface": "#2e3131",
"on-secondary-fixed": "#091d2e",
"on-surface": "#191c1d",
"tertiary-fixed": "#ffdbc7",
"surface": "#f8fafa",
"primary-container": "#0d5e67",
"surface-container-lowest": "#ffffff",
"outline-variant": "#bfc8ca",
"on-surface-variant": "#3f484a",
"surface-container-highest": "#e1e3e3",
"inverse-on-surface": "#eff1f1",
"secondary-fixed-dim": "#b5c8df",
"surface-container-high": "#e6e8e9",
"surface-container-low": "#f2f4f4",
"on-tertiary-container": "#ffbb91",
"on-tertiary-fixed": "#311300",
"error": "#ba1a1a",
"surface-bright": "#f8fafa",
"primary": "#00454c",
"primary-fixed-dim": "#8ed1db",
"on-error": "#ffffff",
"surface-variant": "#e1e3e3",
"on-background": "#191c1d",
"tertiary-fixed-dim": "#feb78a",
"on-primary": "#ffffff",
"surface-dim": "#d8dadb",
"on-secondary": "#ffffff",
"tertiary-container": "#7c4824"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"compact-padding": "8px",
"row-height-sm": "32px",
"row-height-md": "48px",
"container-margin": "24px",
"gutter": "16px"
},
"fontFamily": {
"body-base": ["Inter"],
"h1": ["Inter"],
"display-lot": ["Inter"],
"table-data": ["Inter"],
"body-sm": ["Inter"],
"h2": ["Inter"],
"label-caps": ["Inter"]
},
"fontSize": {
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"h1": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"display-lot": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "500"}],
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
body {
background-color: #f8fafa;
color: #191c1d;
}
</style>
</head>
<body class="font-body-base overflow-hidden">
<!-- SideNavBar -->
<aside class="fixed left-0 top-0 h-full w-64 bg-slate-50 border-r border-slate-200 flex flex-col py-4 z-50">
<div class="px-6 mb-8">
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-primary-container rounded flex items-center justify-center">
<span class="material-symbols-outlined text-on-primary-container" style="font-variation-settings: 'FILL' 1;">nest_eco</span>
</div>
<div>
<h2 class="text-teal-900 font-black text-sm leading-tight">Walet Operations</h2>
<p class="text-[10px] text-slate-500 font-bold tracking-wider">V1.0.4-Operational</p>
</div>
</div>
</div>
<nav class="flex-1 space-y-1 px-3">
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:text-teal-600 hover:bg-slate-100 rounded duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
<span class="material-symbols-outlined text-[20px]" data-icon="dashboard">dashboard</span>
<span>Dashboard</span>
</a>
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:text-teal-600 hover:bg-slate-100 rounded duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
<span class="material-symbols-outlined text-[20px]" data-icon="inventory_2">inventory_2</span>
<span>Inventory Stock</span>
</a>
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:text-teal-600 hover:bg-slate-100 rounded duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
<span class="material-symbols-outlined text-[20px]" data-icon="account_tree">account_tree</span>
<span>Traceability Logs</span>
</a>
<a class="flex items-center gap-3 px-3 py-2 bg-teal-50 text-teal-700 border-r-4 border-teal-600 rounded-l duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
<span class="material-symbols-outlined text-[20px]" data-icon="database" style="font-variation-settings: 'FILL' 1;">database</span>
<span>Master Data</span>
</a>
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:text-teal-600 hover:bg-slate-100 rounded duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
<span class="material-symbols-outlined text-[20px]" data-icon="qr_code_scanner">qr_code_scanner</span>
<span>Barcode Scanner</span>
</a>
</nav>
<div class="mt-auto px-3 border-t border-slate-200 pt-4 space-y-1">
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:text-teal-600 hover:bg-slate-100 rounded duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
<span class="material-symbols-outlined text-[20px]" data-icon="help_outline">help_outline</span>
<span>Support</span>
</a>
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:text-teal-600 hover:bg-slate-100 rounded duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
<span class="material-symbols-outlined text-[20px]" data-icon="logout">logout</span>
<span>Sign Out</span>
</a>
</div>
</aside>
<!-- Main Content Shell -->
<main class="ml-64 min-h-screen flex flex-col">
<!-- TopNavBar -->
<header class="bg-white border-b border-slate-200 shadow-sm flex items-center justify-between px-6 h-14 w-full sticky top-0 z-40">
<div class="flex items-center gap-4 flex-1">
<div class="flex items-center bg-slate-100 rounded px-3 py-1.5 w-full max-w-md border border-slate-200">
<span class="material-symbols-outlined text-slate-400 text-[18px] mr-2" data-icon="search">search</span>
<input class="bg-transparent border-none focus:ring-0 text-[13px] w-full text-slate-700" placeholder="Cari Kode Pemasok atau Nama..." type="text"/>
</div>
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2">
<button class="p-2 text-slate-500 hover:bg-slate-50 rounded transition-colors active:opacity-80">
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
</button>
<button class="p-2 text-slate-500 hover:bg-slate-50 rounded transition-colors active:opacity-80">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
</button>
</div>
<div class="h-6 w-px bg-slate-200"></div>
<div class="flex items-center gap-3 pl-2">
<div class="text-right hidden sm:block">
<p class="text-[12px] font-bold text-teal-800 leading-tight">Admin Operasional</p>
<p class="text-[10px] text-slate-500">Logistik &amp; Inventory</p>
</div>
<img alt="User Profile" class="w-8 h-8 rounded bg-slate-200 object-cover border border-slate-200" data-alt="corporate headshot of a professional logistics manager in a clean warehouse office environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAyohDeWyKSJirkxoxApfxsvjR8NIZOQ0aKY6MlnsQD9dYGTH5t4XulFsIYR7ZYvgr78clYd2cNdd257mFY-v-yRQkOk5UNtoYj0azDgo7H5taDoi62tlU6dUzF_HPt4OBiZ7dtCIsl56GsHkJ-8a8WJ26apcDRHy9kWISVLlGj98EB3OuKZd8IFNHiqEXjaBi9pQYB68hwH1PUhK5azdEzZ5nAM6VChqsWBXnX46q2fs4-E-7eRZDaoq9zaUrKiAqktwNhrt5xXw"/>
</div>
</div>
</header>
<!-- Content Area -->
<div class="p-container-margin flex-1 overflow-auto bg-background">
<!-- Header Section -->
<div class="flex items-center justify-between mb-6">
<div>
<h1 class="font-h1 text-h1 text-on-surface">Daftar Pemasok</h1>
<nav class="flex text-[11px] font-medium text-slate-400 mt-1 uppercase tracking-widest">
<a class="hover:text-teal-600" href="#">Master Data</a>
<span class="mx-2">/</span>
<span class="text-teal-700">Daftar Pemasok</span>
</nav>
</div>
<button class="flex items-center gap-2 bg-primary text-on-primary px-4 py-2 rounded font-h2 text-h2 hover:opacity-90 transition-all active:scale-95">
<span class="material-symbols-outlined text-[18px]" data-icon="add">add</span>
Tambah Pemasok
</button>
</div>
<!-- Dashboard Stats Summary -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-gutter mb-6">
<div class="bg-white p-4 border border-outline-variant shadow-[0px_2px_4px_rgba(0,0,0,0.05)] rounded">
<p class="text-label-caps font-label-caps text-secondary uppercase mb-1">Total Pemasok</p>
<div class="flex items-end justify-between">
<span class="text-display-lot font-display-lot text-on-surface">124</span>
<span class="text-teal-600 text-body-sm font-bold flex items-center gap-1">
<span class="material-symbols-outlined text-sm" data-icon="trending_up">trending_up</span>
+3 bulan ini
</span>
</div>
</div>
<div class="bg-white p-4 border border-outline-variant shadow-[0px_2px_4px_rgba(0,0,0,0.05)] rounded">
<p class="text-label-caps font-label-caps text-secondary uppercase mb-1">Pemasok Aktif</p>
<div class="flex items-end justify-between">
<span class="text-display-lot font-display-lot text-on-surface">118</span>
<div class="h-2 w-24 bg-slate-100 rounded-full overflow-hidden">
<div class="h-full bg-teal-600 w-[95%]"></div>
</div>
</div>
</div>
<div class="bg-white p-4 border border-outline-variant shadow-[0px_2px_4px_rgba(0,0,0,0.05)] rounded">
<p class="text-label-caps font-label-caps text-secondary uppercase mb-1">Menunggu Review QC</p>
<div class="flex items-end justify-between">
<span class="text-display-lot font-display-lot text-on-surface">6</span>
<span class="bg-tertiary-fixed text-on-tertiary-fixed-variant text-[10px] px-2 py-0.5 rounded font-bold">URGENT</span>
</div>
</div>
<div class="bg-white p-4 border border-outline-variant shadow-[0px_2px_4px_rgba(0,0,0,0.05)] rounded">
<p class="text-label-caps font-label-caps text-secondary uppercase mb-1">Total Transaksi (Bln)</p>
<div class="flex items-end justify-between">
<span class="text-display-lot font-display-lot text-on-surface">Rp 2.4M</span>
<span class="material-symbols-outlined text-slate-300" data-icon="payments">payments</span>
</div>
</div>
</div>
<!-- Data Table Container -->
<div class="bg-white border border-outline-variant shadow-[0px_2px_4px_rgba(0,0,0,0.05)] rounded overflow-hidden">
<div class="p-4 border-b border-outline-variant flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center gap-3">
<button class="flex items-center gap-2 px-3 py-1.5 border border-outline text-on-surface-variant text-body-sm rounded hover:bg-slate-50 transition-colors">
<span class="material-symbols-outlined text-[18px]" data-icon="filter_list">filter_list</span>
Filter
</button>
<button class="flex items-center gap-2 px-3 py-1.5 border border-outline text-on-surface-variant text-body-sm rounded hover:bg-slate-50 transition-colors">
<span class="material-symbols-outlined text-[18px]" data-icon="download">download</span>
Export Excel
</button>
</div>
<div class="text-body-sm text-on-surface-variant">
Menampilkan <span class="font-bold">1 - 10</span> dari <span class="font-bold">124</span> Pemasok
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-slate-50 border-b border-outline-variant">
<th class="px-4 py-3 text-label-caps font-label-caps text-secondary uppercase tracking-wider">Kode</th>
<th class="px-4 py-3 text-label-caps font-label-caps text-secondary uppercase tracking-wider">Nama Pemasok</th>
<th class="px-4 py-3 text-label-caps font-label-caps text-secondary uppercase tracking-wider">Telepon</th>
<th class="px-4 py-3 text-label-caps font-label-caps text-secondary uppercase tracking-wider">Email</th>
<th class="px-4 py-3 text-label-caps font-label-caps text-secondary uppercase tracking-wider">Informasi Bank</th>
<th class="px-4 py-3 text-label-caps font-label-caps text-secondary uppercase tracking-wider">Status</th>
<th class="px-4 py-3 text-label-caps font-label-caps text-secondary uppercase tracking-wider text-right">Aksi</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<!-- Row 1 -->
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-4 py-compact-padding font-table-data text-table-data text-primary">SUP-WAL-001</td>
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface">CV. Sarang Abadi Jaya</td>
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface-variant">0812-3456-7890</td>
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface-variant">admin@sarangabadi.com</td>
<td class="px-4 py-compact-padding font-table-data text-table-data">
<div class="text-on-surface">Bank BCA</div>
<div class="text-[11px] text-slate-500">8820-XXXX-1123</div>
</td>
<td class="px-4 py-compact-padding font-table-data text-table-data">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-bold bg-teal-50 text-teal-700 border border-teal-100">Aktif</span>
</td>
<td class="px-4 py-compact-padding font-table-data text-table-data text-right">
<button class="text-primary hover:underline font-bold text-[12px]">Lihat Detail</button>
</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-4 py-compact-padding font-table-data text-table-data text-primary">SUP-WAL-002</td>
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface">PT. Walet Kalimantan Lestari</td>
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface-variant">0821-9988-7766</td>
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface-variant">info@waletkal.id</td>
<td class="px-4 py-compact-padding font-table-data text-table-data">
<div class="text-on-surface">Bank Mandiri</div>
<div class="text-[11px] text-slate-500">123-00-XXXX-456</div>
</td>
<td class="px-4 py-compact-padding font-table-data text-table-data">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-bold bg-teal-50 text-teal-700 border border-teal-100">Aktif</span>
</td>
<td class="px-4 py-compact-padding font-table-data text-table-data text-right">
<button class="text-primary hover:underline font-bold text-[12px]">Lihat Detail</button>
</td>
</tr>
<!-- Row 3 -->
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-4 py-compact-padding font-table-data text-table-data text-primary">SUP-WAL-003</td>
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface">UD. Sumber Alam</td>
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface-variant">0852-1122-3344</td>
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface-variant">sumberalam@mail.com</td>
<td class="px-4 py-compact-padding font-table-data text-table-data">
<div class="text-on-surface">Bank BNI</div>
<div class="text-[11px] text-slate-500">4455-XXXX-001</div>
</td>
<td class="px-4 py-compact-padding font-table-data text-table-data">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-bold bg-slate-100 text-slate-600 border border-slate-200">Non-Aktif</span>
</td>
<td class="px-4 py-compact-padding font-table-data text-table-data text-right">
<button class="text-primary hover:underline font-bold text-[12px]">Lihat Detail</button>
</td>
</tr>
<!-- Row 4 -->
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-4 py-compact-padding font-table-data text-table-data text-primary">SUP-WAL-004</td>
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface">Bapak Heru Setiawan (Personal)</td>
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface-variant">0813-5566-7788</td>
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface-variant">heru.s@gmail.com</td>
<td class="px-4 py-compact-padding font-table-data text-table-data">
<div class="text-on-surface">Bank BRI</div>
<div class="text-[11px] text-slate-500">0012-XXXX-998</div>
</td>
<td class="px-4 py-compact-padding font-table-data text-table-data">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-bold bg-teal-50 text-teal-700 border border-teal-100">Aktif</span>
</td>
<td class="px-4 py-compact-padding font-table-data text-table-data text-right">
<button class="text-primary hover:underline font-bold text-[12px]">Lihat Detail</button>
</td>
</tr>
<!-- Row 5 -->
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-4 py-compact-padding font-table-data text-table-data text-primary">SUP-WAL-005</td>
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface">Koperasi Walet Mandiri</td>
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface-variant">0811-0011-2233</td>
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface-variant">kop@waletmandiri.org</td>
<td class="px-4 py-compact-padding font-table-data text-table-data">
<div class="text-on-surface">Bank BCA</div>
<div class="text-[11px] text-slate-500">8820-XXXX-5567</div>
</td>
<td class="px-4 py-compact-padding font-table-data text-table-data">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-bold bg-teal-50 text-teal-700 border border-teal-100">Aktif</span>
</td>
<td class="px-4 py-compact-padding font-table-data text-table-data text-right">
<button class="text-primary hover:underline font-bold text-[12px]">Lihat Detail</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination Footer -->
<div class="p-4 bg-slate-50 border-t border-outline-variant flex items-center justify-between">
<div class="flex items-center gap-1">
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant bg-white text-slate-400 hover:bg-slate-50">
<span class="material-symbols-outlined text-[18px]" data-icon="chevron_left">chevron_left</span>
</button>
<button class="w-8 h-8 flex items-center justify-center rounded border border-primary bg-primary text-on-primary text-table-data font-bold">1</button>
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant bg-white text-on-surface text-table-data hover:bg-slate-50">2</button>
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant bg-white text-on-surface text-table-data hover:bg-slate-50">3</button>
<span class="px-2 text-slate-400">...</span>
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant bg-white text-on-surface text-table-data hover:bg-slate-50">13</button>
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant bg-white text-slate-600 hover:bg-slate-50">
<span class="material-symbols-outlined text-[18px]" data-icon="chevron_right">chevron_right</span>
</button>
</div>
<div class="flex items-center gap-2">
<span class="text-body-sm text-on-surface-variant">Baris per halaman:</span>
<select class="bg-white border border-outline-variant rounded px-2 py-1 text-[12px] font-bold focus:ring-teal-500">
<option>10</option>
<option>25</option>
<option>50</option>
</select>
</div>
</div>
</div>
<!-- Contextual Help / Note Section -->
<div class="mt-gutter grid grid-cols-1 md:grid-cols-3 gap-gutter">
<div class="col-span-2 bg-secondary-container/30 border border-secondary-container p-4 rounded flex gap-4">
<span class="material-symbols-outlined text-secondary" data-icon="info" style="font-variation-settings: 'FILL' 1;">info</span>
<div>
<h4 class="text-body-base font-bold text-on-secondary-container mb-1">Catatan Keamanan Data</h4>
<p class="text-body-sm text-secondary leading-relaxed">Pastikan semua data rekening bank telah diverifikasi melalui proses KYC (Know Your Customer) sebelum melakukan pencairan dana untuk lot sarang burung walet yang diterima.</p>
</div>
</div>
<div class="bg-white border border-outline-variant p-4 rounded flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-tertiary-fixed rounded-full flex items-center justify-center">
<span class="material-symbols-outlined text-on-tertiary-fixed" data-icon="contact_support">contact_support</span>
</div>
<div>
<p class="text-body-sm font-bold text-on-surface">Butuh Bantuan?</p>
<p class="text-[11px] text-on-surface-variant">Hubungi IT Support</p>
</div>
</div>
<button class="p-2 bg-slate-100 rounded hover:bg-slate-200 transition-colors">
<span class="material-symbols-outlined text-[18px]" data-icon="arrow_forward">arrow_forward</span>
</button>
</div>
</div>
</div>
</main>
<!-- Contextual FAB (Only on specific screens, but useful for quick actions here) -->
<button class="fixed bottom-6 right-6 w-14 h-14 bg-teal-600 text-white rounded-full shadow-lg flex items-center justify-center hover:scale-105 active:scale-95 transition-all z-50">
<span class="material-symbols-outlined text-[28px]" data-icon="search" style="font-variation-settings: 'wght' 600;">search</span>
</button>
</body></html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 284 KiB