433 lines
20 KiB
PHP
433 lines
20 KiB
PHP
@extends('layouts.layanan')
|
|
|
|
@section('content')
|
|
<!-- Memastikan font premium dan ikon Bootstrap ter-load -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
|
|
|
<style>
|
|
/* 1. Menghilangkan Scrollbar di Samping Kanan Browser */
|
|
html, body {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Core Variable Colors */
|
|
:root {
|
|
--pustaka-blue: #004d91;
|
|
--pustaka-dark: #002d5a;
|
|
--slate-50: #f8fafc;
|
|
--slate-100: #f1f5f9;
|
|
--slate-200: #e2e8f0;
|
|
--slate-600: #475569;
|
|
--slate-700: #334155;
|
|
--slate-900: #0f172a;
|
|
}
|
|
|
|
body {
|
|
background-color: #f8fafc !important;
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
color: var(--slate-900);
|
|
}
|
|
|
|
.hero-title-custom {
|
|
color: var(--pustaka-blue);
|
|
font-weight: 800;
|
|
letter-spacing: -1px;
|
|
}
|
|
|
|
/* Premium Sections Box */
|
|
.service-section-card {
|
|
background: #ffffff;
|
|
padding: 40px;
|
|
margin-bottom: 30px;
|
|
border-radius: 16px;
|
|
border: 1px solid var(--slate-200);
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
.section-subtitle-premium {
|
|
color: var(--pustaka-blue);
|
|
font-weight: 700;
|
|
font-size: 1.25rem;
|
|
letter-spacing: -0.3px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* Table Customizations */
|
|
.table-premium {
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
}
|
|
.table-premium thead th {
|
|
background-color: var(--slate-100) !important;
|
|
color: var(--slate-700);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.5px;
|
|
padding: 15px 20px;
|
|
border-bottom: 2px solid var(--slate-200);
|
|
}
|
|
.table-premium tbody td {
|
|
padding: 18px 20px;
|
|
color: var(--slate-700);
|
|
border-bottom: 1px solid var(--slate-100);
|
|
}
|
|
|
|
/* Modern Procedure Steps (Timeline Grid) */
|
|
.step-badge {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: var(--pustaka-blue);
|
|
color: white;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* Contact Block Custom */
|
|
.contact-badge-info {
|
|
background: var(--slate-50);
|
|
border: 1px solid var(--slate-200);
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
}
|
|
.contact-link-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
color: var(--slate-700);
|
|
margin-bottom: 14px;
|
|
font-size: 0.9rem;
|
|
}
|
|
.contact-link-item i {
|
|
color: var(--pustaka-blue);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.icon-box-premium {
|
|
width: 35px;
|
|
height: 35px;
|
|
background: rgba(0, 77, 145, 0.08);
|
|
color: var(--pustaka-blue);
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Alert Box Clean Accent */
|
|
.alert-premium-note {
|
|
background: rgba(220, 53, 69, 0.03);
|
|
border-left: 4px solid #dc3545;
|
|
color: var(--slate-700);
|
|
border-radius: 0 12px 12px 0;
|
|
}
|
|
|
|
/* Main Action Button UI */
|
|
.btn-return-premium {
|
|
background: transparent;
|
|
color: var(--slate-600);
|
|
border: 1px solid var(--slate-300);
|
|
border-radius: 8px;
|
|
font-size: 0.85rem;
|
|
padding: 10px 20px;
|
|
transition: all 0.2s;
|
|
}
|
|
.btn-return-premium:hover {
|
|
background: var(--slate-100);
|
|
color: var(--slate-900);
|
|
}
|
|
</style>
|
|
|
|
<div class="container py-5" data-aos="fade-up">
|
|
|
|
{{-- Header Section --}}
|
|
<div class="text-center mb-5">
|
|
<span class="badge px-3 py-2 mb-2 text-uppercase fw-800 tracking-wider" style="background: rgba(0, 77, 145, 0.08); color: var(--pustaka-blue); font-size: 0.7rem;">
|
|
Layanan Sirkulasi Pustaka
|
|
</span>
|
|
<h2 class="hero-title-custom display-6 mb-3">Layanan Sirkulasi (Peminjaman)</h2>
|
|
<p class="text-muted mx-auto fs-6" style="max-width: 800px; line-height: 1.7;">
|
|
Layanan Sirkulasi Perpustakaan Khusus Bakorwil III Malang membantu pegawai dan pimpinan menemukan serta mengakses koleksi buku secara akurat, terkini, dan relevan guna mendukung perumusan kebijakan, penelitian, dan pengambilan keputusan.
|
|
</p>
|
|
<div style="width: 50px; height: 3px; background: var(--pustaka-blue);" class="mx-auto mt-4 rounded-pill"></div>
|
|
</div>
|
|
|
|
{{-- I. Tujuan Layanan --}}
|
|
<section class="service-section-card">
|
|
<h4 class="section-subtitle-premium mb-3">
|
|
<i class="bi bi-bullseye"></i> I. Tujuan Layanan
|
|
</h4>
|
|
<p class="lh-lg text-muted mb-0" style="font-size: 0.95rem;">
|
|
Layanan Sirkulasi berfungsi untuk mendukung pelaksanaan tugas dan fungsi pegawai Bakorwil III Malang dengan memberikan kemudahan akses terhadap koleksi fisik yang relevan dengan bidang pemerintahan, koordinasi wilayah, serta pembangunan daerah.
|
|
</p>
|
|
</section>
|
|
|
|
{{-- UPDATE URUTAN: II. Alur Mandiri --}}
|
|
<section class="service-section-card">
|
|
<h4 class="section-subtitle-premium mb-4">
|
|
<i class="bi bi-qr-code-scan"></i> II. Alur Peminjaman Mandiri (Self-Service)
|
|
</h4>
|
|
<p class="text-muted small mb-4">
|
|
Silakan ikuti instruksi peminjaman mandiri pada mesin anjungan (*kiosk*) sesuai dengan tahapan baku berikut:
|
|
</p>
|
|
|
|
<div class="row g-3">
|
|
<div class="col-md-3">
|
|
<div class="p-4 border rounded-3 bg-light text-center h-100">
|
|
<div class="icon-box-premium mx-auto mb-3" style="width: 48px; height: 48px;">
|
|
<i class="bi bi-barcode-scan fs-4"></i>
|
|
</div>
|
|
<h6 class="fw-bold text-dark mb-2" style="font-size: 0.9rem;">1. Scan Barcode Buku</h6>
|
|
<p class="text-muted small mb-0" style="font-size: 0.8rem; line-height: 1.5;">Pindai stiker kode barcode logistik yang tertera pada buku terlebih dahulu pada sensor alat pemindai.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="p-4 border rounded-3 bg-light text-center h-100">
|
|
<div class="icon-box-premium mx-auto mb-3" style="width: 48px; height: 48px;">
|
|
<i class="bi bi-person-vcard fs-4"></i>
|
|
</div>
|
|
<h6 class="fw-bold text-dark mb-2" style="font-size: 0.9rem;">2. Scan Kartu Anggota</h6>
|
|
<p class="text-muted small mb-0" style="font-size: 0.8rem; line-height: 1.5;">Pindai kode barcode pada Kartu Tanda Anggota perpustakaan atau KTP Anda untuk memvalidasi akun peminjam.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="p-4 border rounded-3 bg-light text-center h-100">
|
|
<div class="icon-box-premium mx-auto mb-3" style="width: 48px; height: 48px;">
|
|
<i class="bi bi-check-circle-fill fs-4 text-success"></i>
|
|
</div>
|
|
<h6 class="fw-bold text-dark mb-2" style="font-size: 0.9rem;">3. Transaksi Selesai</h6>
|
|
<p class="text-muted small mb-0" style="font-size: 0.8rem; line-height: 1.5;">Sistem mengonfirmasi peminjaman. serta mencatat hasil transaksi di website peminjaman Anda.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="p-4 border rounded-3 text-center h-100" style="border-color: var(--pustaka-blue) !important; background: rgba(0, 77, 145, 0.02);">
|
|
<div class="icon-box-premium mx-auto mb-3" style="width: 48px; height: 48px; background: var(--pustaka-blue); color: white;">
|
|
<i class="bi bi-person-workspace fs-4"></i>
|
|
</div>
|
|
<h6 class="fw-bold text-dark mb-2" style="font-size: 0.9rem;">4. Lapor Admin & Validasi</h6>
|
|
<p class="text-muted small mb-0" style="font-size: 0.8rem; line-height: 1.5;">Ketika membawa buku keluar, wajib melapor ke meja Admin dengan menyertakan Surat Pengantar cetak sebagai verifikasi akhir.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- III. Ketentuan Peminjaman --}}
|
|
<section class="service-section-card">
|
|
<h4 class="section-subtitle-premium mb-3">
|
|
<i class="bi bi-card-checklist"></i> III. Ketentuan Peminjaman Khusus Pegawai
|
|
</h4>
|
|
<p class="text-muted mb-4 small">Setiap transaksi peminjaman buku wajib menyertakan identifikasi resmi sesuai dengan regulasi pengelolaan pustaka yang berlaku.</p>
|
|
|
|
<div class="table-responsive rounded-3 border mb-3">
|
|
<table class="table table-premium align-middle mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>Kategori Pegawai</th>
|
|
<th>Syarat Utama</th>
|
|
<th class="text-center">Jumlah Maksimal Pinjam</th>
|
|
<th class="text-center">Masa Pinjam Maksimal</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><span class="fw-bold text-dark">Pegawai (PNS/PPPK) Bakorwil III</span></td>
|
|
<td>Kartu Tanda Pegawai atau Kartu Anggota Perpustakaan</td>
|
|
<td class="text-center fw-semibold text-primary-custom">7 Eksemplar</td>
|
|
<td class="text-center">7 Hari Kerja</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="fw-bold text-dark">Pegawai Magang / Kontrak</span></td>
|
|
<td>Surat Keterangan Atasan & Kartu Anggota Sementara</td>
|
|
<td class="text-center fw-semibold text-primary-custom">3 Eksemplar</td>
|
|
<td class="text-center">7 Hari Kerja</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- V. Pengembalian dan Perpanjangan --}}
|
|
<section class="service-section-card">
|
|
<h4 class="section-subtitle-premium mb-4">
|
|
<i class="bi bi-arrow-repeat"></i> V. Pengembalian dan Perpanjangan
|
|
</h4>
|
|
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<div class="p-3 border rounded-3 h-100" style="background: var(--slate-50);">
|
|
<h5 class="fw-bold text-dark mb-3" style="font-size: 1rem;"><i class="bi bi-box-arrow-in-down text-primary me-2"></i>A. Sistem Pengembalian</h5>
|
|
<ul class="text-muted small ps-3 mb-0" style="line-height: 1.7;">
|
|
<li>Koleksi buku wajib dikembalikan tepat waktu sebelum atau pas pada tanggal jatuh tempo.</li>
|
|
<li>Kompensasi toleransi diberikan selama 1 hari kerja berikutnya jika tanggal jatuh tempo bertepatan dengan hari libur nasional atau kedinasan.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="p-3 border rounded-3 h-100" style="background: var(--slate-50);">
|
|
<h5 class="fw-bold text-dark mb-3" style="font-size: 1rem;"><i class="bi bi-arrow-clockwise text-primary me-2"></i>B. Aturan Perpanjangan</h5>
|
|
<ul class="text-muted small ps-3 mb-0" style="line-height: 1.7;">
|
|
<li><strong>Batas Maksimal:</strong> Perpanjangan hanya diizinkan sebanyak 1 kali per koleksi buku.</li>
|
|
<li><strong>Syarat Mutlak:</strong> Buku belum berstatus terlambat dan tidak sedang dalam daftar antrean pesanan oleh pegawai lain.</li>
|
|
<li><strong>Metode Pemrosesan:</strong> Dapat diajukan langsung di meja sirkulasi, sistem OPAC mandiri, atau melalui konfirmasi email internal.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- VI. Koleksi Non-Sirkulasi --}}
|
|
<section class="service-section-card">
|
|
<h4 class="section-subtitle-premium mb-3">
|
|
<i class="bi bi-journal-x"></i> VI. Koleksi Non-Sirkulasi (Hanya Baca di Tempat)
|
|
</h4>
|
|
<p class="text-muted small mb-4">Daftar koleksi di bawah ini tidak diizinkan untuk dibawa keluar perpustakaan demi menjaga otentisitas dan ketersediaan referensi darurat:</p>
|
|
|
|
<div class="table-responsive rounded-3 border">
|
|
<table class="table table-premium align-middle mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th width="35%">Jenis Koleksi</th>
|
|
<th>Contoh Materi Referensi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><span class="fw-bold text-dark">Koleksi Referensi Murni</span></td>
|
|
<td>Kamus Sektoral, Ensiklopedia Pemerintahan, Buku Tahunan Data, Direktori Lembaga.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="fw-bold text-dark">Koleksi Khusus & Arsip Langka</span></td>
|
|
<td>Laporan Tahunan Pemprov Jatim, Dokumen Peraturan Daerah Lama, naskah kebijakan historis.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="fw-bold text-dark">Terbitan Berkala Terbaru</span></td>
|
|
<td>Jurnal Ilmiah terakreditasi dan Majalah Kedinasan edisi bulan berjalan.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- VII. Sanksi --}}
|
|
<section class="service-section-card">
|
|
<h4 class="section-subtitle-premium mb-3">
|
|
<i class="bi bi-exclamation-triangle"></i> VII. Sanksi dan Kewajiban Pegawai
|
|
</h4>
|
|
<div class="alert alert-premium-note p-3 mb-0">
|
|
<ul class="small mb-0 text-dark ps-3" style="line-height: 1.7;">
|
|
<li><strong>Keterlambatan Akut:</strong> Penerbitan surat pemberitahuan resmi yang ditembuskan kepada atasan langsung serta penangguhan hak akses peminjaman sementara waktu.</li>
|
|
<li><strong>Kerusakan atau Kehilangan:</strong> Anggota wajib mengganti dengan buku yang memiliki judul, penulis, dan edisi eksemplar yang sama, atau menyepakati nilai ganti rugi setara.</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- VIII. Jam Layanan & Kontak --}}
|
|
<div class="row g-4 mb-4">
|
|
<div class="col-lg-5">
|
|
<div class="service-section-card h-100">
|
|
<h4 class="section-subtitle-premium mb-4">
|
|
<i class="bi bi-clock-history"></i> VIII. Jam Operasional Sirkulasi
|
|
</h4>
|
|
<div class="table-responsive rounded-3 border">
|
|
<table class="table table-premium text-center align-middle mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>Hari Kerja</th>
|
|
<th>Jam Layanan</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><span class="fw-bold text-dark">Senin - Kamis</span></td>
|
|
<td class="fw-bold text-primary-custom">08.00 - 16.00 WIB</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="fw-bold text-dark">Jumat</span></td>
|
|
<td class="fw-bold text-primary-custom">08.00 - 11.30 WIB</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="mt-3 p-3 bg-light rounded-3 border">
|
|
<span class="small text-muted d-block fw-bold mb-1">LOKASI UTAMA:</span>
|
|
<span class="small text-dark fw-semibold"><i class="bi bi-geo-fill text-primary me-1"></i> Ruang Perpustakaan Utama, Gedung Bakorwil III Malang</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-7">
|
|
<div class="service-section-card h-100">
|
|
<h4 class="section-subtitle-premium mb-4">
|
|
<i class="bi bi-envelope-card"></i> Hubungi Hub Pustakawan
|
|
</h4>
|
|
<div class="contact-badge-info">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<div class="contact-link-item">
|
|
<div class="icon-box-premium"><i class="bi bi-whatsapp"></i></div>
|
|
<div>
|
|
<div class="text-muted" style="font-size:0.7rem; font-weight:700; text-transform:uppercase;">Telepon / WA</div>
|
|
<span class="fw-bold text-dark">0851-3479-1603</span>
|
|
</div>
|
|
</div>
|
|
<div class="contact-link-item">
|
|
<div class="icon-box-premium"><i class="bi bi-envelope-at"></i></div>
|
|
<div>
|
|
<div class="text-muted" style="font-size:0.7rem; font-weight:700; text-transform:uppercase;">E-Mail</div>
|
|
<span class="fw-bold text-dark" style="font-size:0.85rem;">arsiptubakorwil@gmail.com</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="contact-link-item">
|
|
<div class="icon-box-premium"><i class="bi bi-browser-chrome"></i></div>
|
|
<div>
|
|
<div class="text-muted" style="font-size:0.7rem; font-weight:700; text-transform:uppercase;">Situs Web</div>
|
|
<a href="https://bakorwilmalang.jatimprov.go.id" target="_blank" class="fw-bold text-primary-custom text-decoration-none" style="font-size:0.85rem;">bakorwilmalang.jatimprov.go.id</a>
|
|
</div>
|
|
</div>
|
|
<div class="contact-link-item">
|
|
<div class="icon-box-premium"><i class="bi bi-geo-alt"></i></div>
|
|
<div>
|
|
<div class="text-muted" style="font-size:0.7rem; font-weight:700; text-transform:uppercase;">Alamat Kantor</div>
|
|
<span class="fw-bold text-dark" style="font-size:0.85rem;">Jl. Simpang Ijen No. 2, Kota Malang</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Back Action --}}
|
|
<div class="text-center mt-5">
|
|
<a href="{{ route('user.layanan') }}" class="btn btn-return-premium fw-semibold">
|
|
<i class="bi bi-arrow-left me-2"></i> Kembali ke Menu Layanan
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
|
<script>
|
|
AOS.init({
|
|
duration: 800,
|
|
once: true,
|
|
offset: 30
|
|
});
|
|
</script>
|
|
@endsection
|
|
|