1014 lines
36 KiB
PHP
1014 lines
36 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="id">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="icon" href="{{ asset('images/pustaka.jpeg') }}" type="images/kartu.png">
|
||
|
||
<title>Pustaka Nawasena Bakorwil III Malang</title>
|
||
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
|
||
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
||
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght=100..900&display=swap');
|
||
|
||
body {
|
||
background: linear-gradient(to right, #ece9e6, #ffffff, #ece9e6);
|
||
font-family: 'Inter', sans-serif;
|
||
}
|
||
|
||
.header-orange {
|
||
background-color: #ff9800;
|
||
padding: 10px 0;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
/* HERO: Tinggi fleksibel berdasarkan ukuran layar */
|
||
.hero-background {
|
||
background: url('{{ asset("images/utama.jpg") }}') no-repeat center center;
|
||
background-size: cover;
|
||
min-height: 280px; /* Lebih pendek di HP */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
color: white;
|
||
padding: 40px 20px; /* Padding vertikal melar otomatis */
|
||
position: relative;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.hero-background {
|
||
min-height: 400px; /* Kembali ke 400px di Laptop/Tablet */
|
||
}
|
||
}
|
||
|
||
.hero-overlay {
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: rgba(0, 0, 0, 0.55);
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
width: 100%; /* Menjaga content tetap aman di batas layar */
|
||
}
|
||
|
||
/* BOX KONTEN: Padding mengecil di HP agar ruang baca luas */
|
||
.section-box {
|
||
background-color: white;
|
||
padding: 20px; /* Lebih kecil di HP */
|
||
margin-bottom: 20px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
|
||
transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
|
||
border-left: 5px solid #ff9800;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.section-box {
|
||
padding: 30px; /* Kembali longgar di layar besar */
|
||
margin-bottom: 30px;
|
||
}
|
||
.section-box:hover {
|
||
transform: translateY(-8px) scale(1.005);
|
||
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
|
||
}
|
||
}
|
||
|
||
/* JUDUL HALAMAN: Mengecil di HP, Besar di Laptop */
|
||
.section-title-custom {
|
||
font-size: 1.8rem; /* Ukuran pas untuk HP */
|
||
color: #ff6f00;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
padding-bottom: 15px;
|
||
border-bottom: 3px solid #ff9800;
|
||
margin-bottom: 25px;
|
||
position: relative;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.section-title-custom {
|
||
font-size: 2.5rem; /* Ukuran besar untuk Laptop */
|
||
margin-bottom: 40px;
|
||
}
|
||
}
|
||
|
||
.section-title-custom::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: -3px;
|
||
transform: translateX(-50%);
|
||
width: 50px;
|
||
height: 3px;
|
||
background-color: #ff9800;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.collection-item {
|
||
cursor: pointer;
|
||
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
background-color: #fcfcfc;
|
||
}
|
||
.collection-item:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||
background-color: #fff;
|
||
}
|
||
|
||
/* MAP CONTAINER: Tinggi fleksibel */
|
||
.map-container {
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
height: 250px; /* Lebih pendek di HP agar tidak makan space */
|
||
width: 100%;
|
||
box-shadow: 0 6px 15px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.map-container {
|
||
height: 350px; /* Kembali ke ukuran ideal di desktop */
|
||
}
|
||
}
|
||
|
||
.map-container iframe {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 0;
|
||
}
|
||
|
||
/* KOTAK PENCARIAN: Margin disesuaikan agar pas di layar kecil */
|
||
.search-container {
|
||
margin-top: -30px; /* Di HP jangan terlalu ekstrim naik ke atas */
|
||
z-index: 10;
|
||
position: relative;
|
||
padding: 0 15px; /* Mencegah input nempel ke dinding layar HP */
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.search-container {
|
||
margin-top: -60px; /* Kembali naik penuh di desktop */
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
.search-input-custom {
|
||
border-radius: 50px;
|
||
padding: 12px 20px; /* Sedikit lebih compact di HP */
|
||
font-size: 1rem;
|
||
transition: all 0.3s ease-in-out;
|
||
border: 1px solid #ced4da;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.search-input-custom {
|
||
padding: 15px 25px;
|
||
font-size: 1.1rem;
|
||
}
|
||
.search-input-custom:focus {
|
||
transform: scale(1.02);
|
||
box-shadow: 0 0 0 0.30rem rgba(255, 152, 0, 0.4);
|
||
border-color: #ff9800;
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
|
||
.search-button-custom {
|
||
border-top-right-radius: 50px !important;
|
||
border-bottom-right-radius: 50px !important;
|
||
background-color: #ff9800;
|
||
border-color: #ff9800;
|
||
color: white;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
.search-button-custom:hover {
|
||
background-color: #e68900;
|
||
border-color: #e68900;
|
||
}
|
||
|
||
.footer-gradient {
|
||
background: linear-gradient(to right, #ff9800, #ffb74d);
|
||
color: white;
|
||
padding: 30px 0;
|
||
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
/* FLOWCHART ALUR STRUKTUR */
|
||
.flowchart-item {
|
||
position: relative;
|
||
padding-bottom: 40px;
|
||
}
|
||
|
||
.flowchart-item::after {
|
||
content: '\f287';
|
||
font-family: "bootstrap-icons";
|
||
font-size: 2rem; /* Diperkecil sedikit di HP */
|
||
color: #ff9800;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 1;
|
||
}
|
||
|
||
.flowchart-item:last-child::after {
|
||
content: none;
|
||
}
|
||
|
||
.flowchart-box {
|
||
background-color: #f7f7f7;
|
||
border: 2px solid #ff9800;
|
||
border-radius: 10px;
|
||
padding: 15px; /* Lebih compact di HP */
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.flowchart-box {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
|
||
.offcanvas-header-custom {
|
||
background: linear-gradient(to right, #ff9800, #ffb74d);
|
||
}
|
||
|
||
.modal-header-custom {
|
||
background-color: #ff9800;
|
||
}
|
||
|
||
.modal-header-custom .modal-title {
|
||
color: white !important;
|
||
}
|
||
|
||
.list-group-item-action.text-orange-link {
|
||
color: #ff9800;
|
||
}
|
||
.list-group-item-action.text-orange-link:hover {
|
||
color: #e68900;
|
||
}
|
||
|
||
.list-group-item-action.text-success-link {
|
||
color: #198754;
|
||
}
|
||
.list-group-item-action.text-success-link:hover {
|
||
color: #157347;
|
||
}
|
||
|
||
.content-image {
|
||
max-width: 100%;
|
||
height: auto;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
border: 3px solid #ff9800;
|
||
}
|
||
|
||
.contact-background {
|
||
background-image: linear-gradient(to right, rgba(255, 152, 0, 0.85), rgba(255, 183, 77, 0.85)),
|
||
url('uploaded:image_781d03.jpg-4f26884c-1fc3-4dec-b5e1-df6599495c29');
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-blend-mode: multiply;
|
||
color: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
|
||
padding: 20px; /* Memastikan padding aman di HP */
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.contact-background {
|
||
padding: 40px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header class="sticky-top border-bottom" style="background-color: #f9ad16ff; border-bottom: 3px solid #f9ad16ff;">
|
||
<div class="container-fluid d-flex justify-content-between align-items-center py-2 px-4">
|
||
|
||
<div class="d-flex align-items-center text-start gap-2">
|
||
<img alt="Logo Jatim" class="rounded-circle border border-2 border-white" src="/images/kartu.png" style="height: 45px; width: 45px; object-fit: cover;" />
|
||
<h5 class="text-white fw-bolder mb-0 d-none d-sm-block">
|
||
Pustaka Nawasena Bakorwil III Malang
|
||
</h5>
|
||
<h6 class="text-white fw-bolder mb-0 d-block d-sm-none">
|
||
Pustaka Nawasena
|
||
</h6>
|
||
</div>
|
||
|
||
<div class="d-flex align-items-center gap-3">
|
||
|
||
<div class="d-flex align-items-center gap-2" style="display: flex !important;">
|
||
|
||
<a href="https://x.com/Bakorwil3Malang?t=-6lq7bvn2jxresCEdaN1Qg&s=08"
|
||
target="_blank"
|
||
title="Twitter"
|
||
style="display: inline-block !important; margin: 0 4px;">
|
||
<i class="bi bi-twitter text-white fs-5"></i>
|
||
</a>
|
||
|
||
<a href="http://www.youtube.com/@bakorwiliiimalang5279"
|
||
target="_blank"
|
||
title="YouTube"
|
||
style="display: inline-block !important; margin: 0 4px;">
|
||
<i class="bi bi-youtube text-white fs-5"></i>
|
||
</a>
|
||
|
||
<a href="https://www.instagram.com/bakorwilmalang?igsh=MWdqOHN3eTBsM3hzaA=="
|
||
target="_blank"
|
||
title="Instagram"
|
||
style="display: inline-block !important; margin: 0 4px;">
|
||
<i class="bi bi-instagram text-white fs-5"></i>
|
||
</a>
|
||
|
||
</div>
|
||
|
||
<button class="navbar-toggler d-lg-none border-0 p-0"
|
||
type="button"
|
||
data-bs-toggle="offcanvas"
|
||
data-bs-target="#offcanvasMenuTop"
|
||
aria-controls="offcanvasMenuTop"
|
||
style="background: none;">
|
||
<i class="bi bi-list fs-2 text-white"></i>
|
||
</button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</header>
|
||
<div class="offcanvas offcanvas-top d-lg-none" tabindex="-1" id="offcanvasMenuTop">
|
||
<div class="offcanvas-header bg-gradient-orange text-white rounded-bottom-4 shadow-sm py-3">
|
||
<h5 class="offcanvas-title fw-bold d-flex align-items-center">
|
||
<i class="bi bi-book-half me-2 fs-4"></i> Pustaka Nawasena
|
||
</h5>
|
||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
|
||
</div>
|
||
|
||
<div class="offcanvas-body d-flex flex-column justify-content-start align-items-center text-center p-4">
|
||
<a href="{{ url('/login') }}" class="menu-mobile-item mb-3" onclick="closeOffcanvas()">
|
||
<i class="bi bi-box-arrow-in-right me-2"></i> Login
|
||
</a>
|
||
|
||
<a href="{{ route('user.profile') }}" class="menu-mobile-item mb-3" onclick="closeOffcanvas()">
|
||
<i class="bi bi-person-circle me-2"></i> Profil
|
||
</a>
|
||
<a href="{{ route('user.koleksi') }}" class="menu-mobile-item mb-3" onclick="closeOffcanvas()">
|
||
<i class="bi bi-book me-2"></i> Koleksi Buku
|
||
</a>
|
||
<a href="{{ route('user.layanan') }}" class="menu-mobile-item mb-3" onclick="closeOffcanvas()">
|
||
<i class="bi bi-gear me-2"></i> Layanan
|
||
</a>
|
||
<a href="{{ route('user.fasilitas') }}" class="menu-mobile-item mb-3" onclick="closeOffcanvas()">
|
||
<i class="bi bi-building me-2"></i> Peralatan & Fasilitas
|
||
</a>
|
||
<a href="{{ route('user.kontak-lokasi') }}" class="menu-mobile-item" onclick="closeOffcanvas()">
|
||
<i class="bi bi-geo-alt me-2"></i> Kontak
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script>
|
||
function closeOffcanvas() {
|
||
const offcanvasEl = document.querySelector('#offcanvasMenuTop');
|
||
const offcanvas = bootstrap.Offcanvas.getInstance(offcanvasEl);
|
||
if (offcanvas) offcanvas.hide();
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.bg-gradient-orange {
|
||
background: linear-gradient(135deg, #ff9800, #ffb84d);
|
||
}
|
||
|
||
.offcanvas {
|
||
backdrop-filter: blur(12px);
|
||
background: rgba(255, 255, 255, 0.88);
|
||
border-bottom-left-radius: 20px;
|
||
border-bottom-right-radius: 20px;
|
||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||
transition: transform 0.45s cubic-bezier(0.25, 1, 0.3, 1);
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.offcanvas.offcanvas-top {
|
||
transform: translateY(-100%);
|
||
}
|
||
.offcanvas.show {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.offcanvas-body {
|
||
margin-top: 1px;
|
||
padding-bottom: 2rem;
|
||
}
|
||
|
||
.menu-mobile-item {
|
||
display: block;
|
||
font-size: 1.05rem;
|
||
color: #333;
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 10px 20px;
|
||
width: 80%;
|
||
box-shadow: 0 4px 10px rgba(255, 152, 0, 0.1);
|
||
text-decoration: none;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.menu-mobile-item:hover {
|
||
background: linear-gradient(135deg, #ffb84d, #ff9800);
|
||
color: white;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 16px rgba(255, 152, 0, 0.3);
|
||
}
|
||
|
||
.menu-mobile-item i {
|
||
font-size: 1.2rem;
|
||
color: #ff9800;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.menu-mobile-item:hover i {
|
||
color: black;
|
||
}
|
||
</style>
|
||
|
||
|
||
<style>
|
||
.social-link {
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
background-color: #fff;
|
||
font-size: 1.2rem;
|
||
transition: all 0.3s ease;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.social-link.twitter { color: #1DA1F2; }
|
||
.social-link.youtube { color: #FF0000; }
|
||
.social-link.instagram {
|
||
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
|
||
color: #fff;
|
||
}
|
||
|
||
.social-link:hover {
|
||
transform: scale(1.15);
|
||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
@media (max-width: 576px) {
|
||
header .container {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
gap: 8px;
|
||
}
|
||
.social-icons {
|
||
display: flex !important;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<div class="hero-background position-relative">
|
||
<div class="hero-overlay"></div>
|
||
|
||
<div class="container position-relative hero-content text-center">
|
||
<h1 class="fw-bolder animate__animated animate__bounceIn" style="font-size: 3rem;">
|
||
Selamat Datang di Pustaka Nawasena!
|
||
</h1>
|
||
<p class="lead fw-bold mt-3 animate__animated animate__bounceIn" style="animation-delay: 0.5s;">
|
||
Akses koleksi khusus untuk mendukung penelitian dan kebijakan Anda.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="container search-menu-wrapper position-relative" data-aos="fade-up">
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-8 col-md-10">
|
||
|
||
<form action="{{ route('user.koleksi') }}" method="GET" class="mt-5">
|
||
<div class="input-group input-group-lg shadow-lg rounded-pill overflow-hidden">
|
||
<input
|
||
type="search"
|
||
name="search"
|
||
class="form-control search-input-custom"
|
||
placeholder="Cari Koleksi, Judul, Penulis, atau Subjek..."
|
||
aria-label="Cari Buku" />
|
||
<button class="btn search-button-custom" type="submit">
|
||
<i class="bi bi-search me-2"></i> Cari
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="menu-desktop d-none d-lg-flex align-items-center justify-content-center mt-4">
|
||
<a class="menu-item" href="{{ url('/login') }}">
|
||
<i class="bi bi-box-arrow-in-right"></i>
|
||
<span>Login</span>
|
||
</a>
|
||
|
||
<a class="menu-item" href="{{ route('user.profile') }}">
|
||
<i class="bi bi-person-circle"></i>
|
||
<span>Profil</span>
|
||
</a>
|
||
<a class="menu-item" href="{{ route('user.koleksi') }}">
|
||
<i class="bi bi-book"></i>
|
||
<span>Koleksi</span>
|
||
</a>
|
||
<a class="menu-item" href="{{ route('user.layanan') }}">
|
||
<i class="bi bi-gear"></i>
|
||
<span>Layanan</span>
|
||
</a>
|
||
<a class="menu-item" href="{{ route('user.fasilitas') }}">
|
||
<i class="bi bi-building"></i>
|
||
<span>Fasilitas</span>
|
||
</a>
|
||
<a class="menu-item" href="{{ route('user.kontak-lokasi') }}">
|
||
<i class="bi bi-geo-alt"></i>
|
||
<span>Kontak</span>
|
||
</a>
|
||
</div>
|
||
<div class="menu-border mx-auto mt-3"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script>
|
||
function closeOffcanvas() {
|
||
const offcanvasEl = document.querySelector('#offcanvasMenuTop');
|
||
const offcanvas = bootstrap.Offcanvas.getInstance(offcanvasEl);
|
||
if (offcanvas) offcanvas.hide();
|
||
}
|
||
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
const menuDesktop = document.querySelector(".menu-desktop");
|
||
const body = document.body;
|
||
const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
|
||
const pixelRatio = window.devicePixelRatio;
|
||
|
||
if (isMobile && pixelRatio <= 1.3) {
|
||
document.body.classList.add("force-desktop");
|
||
if (menuDesktop) {
|
||
menuDesktop.classList.remove("d-none");
|
||
menuDesktop.classList.add("d-flex");
|
||
}
|
||
|
||
document.querySelector("html").style.fontSize = "95%";
|
||
|
||
console.log("📱 Mode Desktop terdeteksi di HP → Tampilan desktop diaktifkan penuh");
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<!-- 💅 STYLE -->
|
||
<style>
|
||
.hero-background {
|
||
background: url('{{ asset("images/utama.jpg") }}') no-repeat center center;
|
||
background-size: cover;
|
||
min-height: 300px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
color: white;
|
||
position: relative;
|
||
padding-top: 80px;
|
||
}
|
||
.hero-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.45);
|
||
}
|
||
.hero-content {
|
||
margin-top: 70px;
|
||
z-index: 2;
|
||
}
|
||
.search-menu-wrapper {
|
||
margin-top: 100px;
|
||
z-index: 2;
|
||
position: relative;
|
||
}
|
||
|
||
.search-input-custom {
|
||
background: rgba(255, 255, 255, 0.15);
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
color: white;
|
||
padding: 0.8rem 1.2rem;
|
||
font-size: 1.05rem;
|
||
backdrop-filter: blur(6px);
|
||
}
|
||
.search-input-custom::placeholder {
|
||
color: rgba(255, 255, 255, 0.85);
|
||
}
|
||
.search-button-custom {
|
||
background-color: #ff8800;
|
||
color: white;
|
||
border: none;
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.search-button-custom:hover {
|
||
background-color: #ff9d26;
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.menu-desktop {
|
||
gap: 1.75rem;
|
||
padding: 1rem 0 0.5rem;
|
||
flex-wrap: nowrap;
|
||
}
|
||
.menu-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.6rem;
|
||
color: #fff;
|
||
font-weight: 600;
|
||
font-size: 1.05rem;
|
||
text-decoration: none;
|
||
transition: transform 0.18s ease, color 0.18s ease, text-shadow 0.18s ease;
|
||
}
|
||
.menu-item:hover {
|
||
color: #f8f8f8;
|
||
transform: translateY(-2px);
|
||
text-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
|
||
}
|
||
|
||
|
||
@media (max-width: 768px) {
|
||
.menu-desktop { display: none !important; }
|
||
.search-menu-wrapper { margin-top: 70px; }
|
||
}
|
||
</style>
|
||
|
||
|
||
|
||
<div class="section-box text-center mt-5" data-aos="fade-up" data-aos-id="fade-in-repeat" data-aos-delay="100">
|
||
|
||
<h2 class="fw-bold position-relative d-inline-block mb-3 w-100"
|
||
style="font-size: 2rem; color: #ff9800; margin-top: 40px;">
|
||
PUSTAKA NAWASENA BAKORWIL III MALANG
|
||
<span class="d-block mt-2"
|
||
style="width: 100%; height: 5px; background-color: #ff9800; border-radius: 3px;">
|
||
</span>
|
||
</h2>
|
||
|
||
<div class="row align-items-center mt-4">
|
||
|
||
<div class="col-md-4 mb-3" data-aos="zoom-in" data-aos-delay="100">
|
||
<img src="{{ asset('images/karasteristik (2).jpeg') }}"
|
||
alt="Pustaka Bakorwil III Malang"
|
||
class="img-fluid rounded-3 shadow border border-3 border-warning"
|
||
style="max-width: 80%; height: auto;">
|
||
</div>
|
||
|
||
<div class="col-md-8 text-start d-flex flex-column justify-content-center" data-aos="fade-left" data-aos-delay="350">
|
||
|
||
<h3 class="fw-bold text-warning mb-3" style="font-size: 2rem; line-height: 1.3;">
|
||
Explore the World of Knowledge at<br>
|
||
<span class="text-secondary">Pustaka Nawasena Bakorwil III Malang</span>
|
||
</h3>
|
||
|
||
<blockquote class="text-muted fst-italic mb-3"
|
||
style="font-size: 1.1rem; border-left: 4px solid #ff9800; padding-left: 1rem;">
|
||
"A library is a treasury of knowledge and the dwelling of the wise."<br>
|
||
<small>- Ibnu Sina (Avicena) -</small><br>
|
||
<span style="font-style: normal;">
|
||
Perpustakaan adalah gudang pengetahuan dan tempat tinggal orang-orang bijaksana.
|
||
</span>
|
||
</blockquote>
|
||
|
||
<p class="text-muted lh-lg" style="font-size: 1.05rem; text-align: justify;">
|
||
<strong>Pustaka Nawasena Bakorwil III Malang</strong> merupakan perpustakaan khusus yang berada di bawah Bakorwil III Malang — instansi Pemerintah Provinsi Jawa Timur —
|
||
dengan koleksi dan layanan informasi yang ditujukan untuk memenuhi kebutuhan informasi di lingkungan internal.
|
||
Berbeda dengan perpustakaan umum atau akademik, perpustakaan khusus Bakorwil III Malang memiliki sasaran pengguna yang terbatas
|
||
dan fokus pada bidang tertentu sesuai dengan tugas pokok dan fungsi.<br><br>
|
||
</p>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="section-box text-center mt-5" data-aos="fade-up" data-aos-id="fade-in-repeat" data-aos-delay="200">
|
||
<h2 class="fw-bold position-relative d-inline-block mb-3 w-100"
|
||
style="font-size: 2rem; color: #ff9800;">
|
||
KARAKTERISTIK
|
||
<span class="d-block mt-2"
|
||
style="width: 100%; height: 5px; background-color: #ff9800; border-radius: 3px;"></span>
|
||
</h2>
|
||
|
||
<div class="row align-items-center mt-4">
|
||
<div class="col-md-8 text-start d-flex flex-column justify-content-center" data-aos="fade-right" data-aos-delay="350">
|
||
<p class="text-muted lh-lg" style="font-size: 1.05rem; text-align: justify;">
|
||
Koleksi yang terfokus, pengguna yang terbatas (umumnya hanya pegawai atau peneliti internal), serta layanan yang bersifat mendalam dan berspesialisasi.
|
||
Koleksi yang dimiliki berupa dokumen-dokumen kebijakan, regulasi, laporan kegiatan, laporan magang mahasiswa/sekolah, arsip internal, hingga majalah referensi dari berbagai instansi.
|
||
</p>
|
||
|
||
<p class="fw-semibold text-warning mt-3" style="font-size: 2rem; line-height: 1.6;">
|
||
<em>
|
||
“Let’s grow together through reading and sharing knowledge.
|
||
The more we read, the more we connect — let’s make our library alive with curiosity and collaboration!”
|
||
</em>
|
||
</p>
|
||
</div>
|
||
|
||
<div class="col-md-4 mb-3 text-center" data-aos="zoom-in" data-aos-delay="100">
|
||
<img src="{{ asset('images/pengertian.jpeg') }}" alt="Karakteristik"
|
||
class="img-fluid rounded-3 shadow border border-3 border-warning"
|
||
style="max-width: 85%; height: auto;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="section-box text-center mt-5" data-aos="fade-up" data-aos-id="fade-in-repeat" data-aos-delay="300">
|
||
<h2 class="fw-bold position-relative d-inline-block mb-3 w-100"
|
||
style="font-size: 2rem; color: #ff9800;">
|
||
TUJUAN
|
||
<span class="d-block mt-2"
|
||
style="width: 100%; height: 5px; background-color: #ff9800; border-radius: 3px;"></span>
|
||
</h2>
|
||
|
||
<div class="row align-items-center mt-4">
|
||
<div class="col-md-4 mb-3 text-center" data-aos="zoom-in" data-aos-delay="100">
|
||
<img src="{{ asset('images/tujuan-revisi.jpeg') }}" alt="Tujuan Pustaka Nawasena"
|
||
class="img-fluid rounded-3 shadow border border-3 border-warning"
|
||
style="max-width: 60%; height: auto;">
|
||
</div>
|
||
|
||
<div class="col-md-8 text-start d-flex flex-column justify-content-center" data-aos="fade-left" data-aos-delay="350">
|
||
<p class="text-muted lh-lg" style="font-size: 1.05rem; text-align: justify;">
|
||
Menyediakan layanan informasi secara efektif dan menunjang kegiatan penelitian serta pengembangan di Bakorwil III Malang,
|
||
sekaligus mendukung program riset akademik dan pengelolaan data pemerintahan secara optimal untuk mendukung pembangunan daerah.
|
||
</p>
|
||
|
||
<p class="fw-semibold text-warning mt-3" style="font-size: 2rem; line-height: 1.6;">
|
||
<em>
|
||
“Empowering knowledge for a brighter future —
|
||
together we learn, share, and grow towards excellence!”
|
||
</em>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-box text-center mt-5" data-aos="fade-up" data-aos-id="fade-in-repeat" data-aos-delay="400">
|
||
|
||
<h2 class="fw-bold position-relative d-inline-block mb-3 w-100"
|
||
style="font-size: 2rem; color: #ff9800;">
|
||
FUNGSI
|
||
<span class="d-block mt-2"
|
||
style="width: 100%; height: 5px; background-color: #ff9800; border-radius: 3px;"></span>
|
||
</h2>
|
||
|
||
<div class="row justify-content-center align-items-start mt-4 px-3" data-aos="fade-up" data-aos-delay="350">
|
||
<div class="col-md-6 mb-4 text-start">
|
||
<h5 class="fw-bold text-success"><i class="bi bi-graph-up me-2"></i>Mendukung Pengambilan Keputusan Berbasis Data</h5>
|
||
<p class="text-muted lh-lg" style="font-size: 1.05rem; text-align: justify;">
|
||
Dalam era keterbukaan informasi, perpustakaan khusus menjadi sumber utama informasi yang dapat diandalkan
|
||
untuk mendukung pengambilan keputusan dan penyusunan kebijakan di masa mendatang.
|
||
Di Bakorwil III Malang, perpustakaan menyediakan data dan dokumen yang dibutuhkan untuk penelitian dan referensi kebijakan.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="col-md-6 mb-4 text-start">
|
||
<h5 class="fw-bold text-success"><i class="bi bi-archive me-2"></i>Pelestarian Arsip dan Dokumen Negara</h5>
|
||
<p class="text-muted lh-lg" style="font-size: 1.05rem; text-align: justify;">
|
||
Berfungsi strategis dalam pelestarian pengetahuan, dokumentasi kebijakan, serta arsip penting sebagai referensi di lingkungan internal pemerintahan.
|
||
Dokumen kebijakan, naskah peraturan, riset internal, hingga laporan evaluasi program menjadi bagian dari memori kelembagaan yang penting untuk kesinambungan pemerintah.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="col-md-6 mb-4 text-start">
|
||
<h5 class="fw-bold text-success"><i class="bi bi-journal-text me-2"></i>Mendukung Penelitian dan Inovasi Kebijakan</h5>
|
||
<p class="text-muted lh-lg" style="font-size: 1.05rem; text-align: justify;">
|
||
Bagi lembaga yang memiliki fungsi litbang (penelitian dan pengembangan), perpustakaan khusus menjadi sarana penting untuk mendukung proses riset.
|
||
Keberadaan referensi yang lengkap dan akses terhadap literatur mutakhir memungkinkan pengembangan kebijakan yang inovatif dan relevan.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="col-md-6 mb-4 text-start">
|
||
<h5 class="fw-bold text-success"><i class="bi bi-people me-2"></i>Meningkatkan Kapasitas SDM Aparatur Sipil Negara (ASN)</h5>
|
||
<p class="text-muted lh-lg" style="font-size: 1.05rem; text-align: justify;">
|
||
Dengan menyediakan sumber belajar dan referensi, perpustakaan khusus membantu dalam peningkatan kapasitas ASN melalui pelatihan, pendidikan, dan pengembangan profesional berkelanjutan.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Motivasi dalam satu container sama -->
|
||
<p class="fw-semibold text-warning mt-3 px-3" style="font-size: 2rem; line-height: 1.6;">
|
||
<em>
|
||
“Knowledge preserved is wisdom shared —
|
||
together we sustain the legacy of information for the generations to come.”
|
||
</em>
|
||
</p>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="section-box text-center mt-5" data-aos="fade-up" data-aos-id="fade-in-repeat" data-aos-delay="500">
|
||
<h2 class="fw-bold position-relative d-inline-block mb-3 w-100"
|
||
style="font-size: 2rem; color: #ff9800;">
|
||
KOLEKSI
|
||
<span class="d-block mt-2"
|
||
style="width: 100%; height: 5px; background-color: #ff9800; border-radius: 3px;"></span>
|
||
</h2>
|
||
|
||
<p class="text-muted lh-lg mx-auto" style="font-size: 1.05rem; max-width: 900px;">
|
||
Pustaka Nawasena Bakorwil III Malang memiliki beragam koleksi yang mendukung kebutuhan informasi dan pengembangan wawasan.
|
||
Koleksi ini mencakup bahan bacaan umum, referensi akademik, serta dokumen internal pemerintahan yang dapat menjadi sumber inspirasi
|
||
bagi pegawai dan peneliti di lingkungan Bakorwil.
|
||
</p>
|
||
|
||
<h5 class="text-center text-primary mb-4 mt-4 fw-semibold">Tipe Koleksi</h5>
|
||
|
||
<div class="row justify-content-center text-center" data-aos="fade-up" data-aos-delay="300">
|
||
<!-- Item 1: E-Magazine -->
|
||
<div class="col-md-3 col-sm-6 mb-4 collection-item">
|
||
<a href="{{ asset('pdf/Magazine.pdf') }}" target="_blank" class="text-decoration-none">
|
||
<img src="{{ asset('images/megazine.JPG') }}" alt="Magazine"
|
||
class="img-fluid rounded-3 shadow border border-2 border-warning"
|
||
style="width: 145px; height: 190px; object-fit: cover;">
|
||
<p class="fw-bold mt-3 text-secondary">E-MAGAZINE</p>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Item 2: Reference -->
|
||
<div class="col-md-3 col-sm-6 mb-4 collection-item">
|
||
<a href="{{ route('user.koleksi') }}" class="text-decoration-none">
|
||
<img src="{{ asset('images/perefence.jpeg') }}" alt="Reference"
|
||
class="img-fluid rounded-3 shadow border border-2 border-warning"
|
||
style="width: 145px; height: 190px; object-fit: cover;">
|
||
<p class="fw-bold mt-3 text-secondary">REFERENCE</p>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<p class="fw-semibold text-warning mt-3 px-3" style="font-size: 2rem; line-height: 1.6;">
|
||
<em>
|
||
“Discover, read, and share — every page holds a new perspective.
|
||
Let’s keep our library vibrant with curiosity and inspiration.”
|
||
</em>
|
||
</p>
|
||
|
||
<hr class="my-4" style="border-top: 3px solid #ff9800; width: 80%; margin: 2rem auto;">
|
||
<h5 class="text-center text-primary mb-3 fw-semibold">Jumlah Koleksi</h5>
|
||
<div class="row text-center justify-content-center">
|
||
<div class="col-6 col-md-3 fw-bold fs-4 text-success">
|
||
{{ \App\Models\Koleksi::distinct('title')->count('title') }} Jilid
|
||
</div>
|
||
<div class="col-6 col-md-3 fw-bold fs-4 text-success">
|
||
{{ \App\Models\Koleksi::whereNotNull('kode_eksemplar')->count() }} Eksemplar
|
||
</div>
|
||
</div>
|
||
<div id="prosedur-section" class="section-box text-center mt-5" data-aos="fade-up" data-aos-id="fade-in-repeat" data-aos-delay="600">
|
||
<h2 class="fw-bold position-relative d-inline-block mb-3 w-100"
|
||
style="font-size: 2rem; color: #ff9800;">
|
||
PROSEDUR LAYANAN
|
||
<span class="d-block mt-2"
|
||
style="width: 100%; height: 5px; background-color: #ff9800; border-radius: 3px;"></span>
|
||
</h2>
|
||
|
||
<p class="text-center small text-muted mb-4">
|
||
Urutan langkah-langkah untuk mendapatkan layanan di Perpustakaan Khusus.
|
||
</p>
|
||
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-3 col-md-6 mb-4 flowchart-item text-center" data-aos="fade-up" data-aos-delay="100">
|
||
<div class="flowchart-box shadow-sm p-3 rounded-3 border border-light">
|
||
<i class="bi bi-person-badge fs-1 text-primary"></i>
|
||
<p class="fw-bold text-primary mt-2 mb-1">LANGKAH 1</p>
|
||
<p class="small text-muted mb-0">Lakukan Registrasi dan verifikasi keanggotaan.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-3 col-md-6 mb-4 flowchart-item text-center" data-aos="fade-up" data-aos-delay="200">
|
||
<div class="flowchart-box shadow-sm p-3 rounded-3 border border-light">
|
||
<i class="bi bi-search fs-1 text-warning"></i>
|
||
<p class="fw-bold text-warning mt-2 mb-1">LANGKAH 2</p>
|
||
<p class="small text-muted mb-0">Cari & Pilih Buku yang dibutuhkan dari koleksi khusus.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-3 col-md-6 mb-4 flowchart-item text-center" data-aos="fade-up" data-aos-delay="300">
|
||
<div class="flowchart-box shadow-sm p-3 rounded-3 border border-light">
|
||
<i class="bi bi-journal-check fs-1 text-success"></i>
|
||
<p class="fw-bold text-success mt-2 mb-1">LANGKAH 3</p>
|
||
<p class="small text-muted mb-0">Lakukan Peminjaman dengan datang ditempat dan scan kartu anggota.</p> </div>
|
||
</div>
|
||
|
||
<div class="col-lg-3 col-md-6 mb-4 text-center" data-aos="fade-up" data-aos-delay="400">
|
||
<div class="flowchart-box shadow-sm p-3 rounded-3 border border-light">
|
||
<i class="bi bi-arrow-return-left fs-1 text-danger"></i>
|
||
<p class="fw-bold text-danger mt-2 mb-1">LANGKAH 4</p>
|
||
<p class="small text-muted mb-0">Lakukan Pengembalian sebelum batas waktu yang ditentukan.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="text-center small text-muted mt-4">
|
||
<i class="bi bi-info-circle me-1"></i> Jam Layanan: Senin–Jumat, 08.00 – 16.00
|
||
</p>
|
||
</div>
|
||
<div class="section-box p-5 contact-background" data-aos="fade-up" data-aos-id="fade-in-repeat" data-aos-delay="700">
|
||
<h2 class="text-white mb-4 fw-bolder text-center">KONTAK & LOKASI</h2>
|
||
<div class="row">
|
||
<div class="col-lg-6 text-white mb-4 mb-lg-0">
|
||
<h4 class="text-white mb-3">Kontak Person</h4>
|
||
<p class="mb-2"><i class="bi bi-telephone-fill me-2"></i>Telepon/WA: 085134791603</p>
|
||
<p class="mb-2"><i class="bi bi-envelope-fill me-2"></i>E-Mail: arsiptubakorwil@gmail.com</p>
|
||
<p class="mb-2"><i class="bi bi-globe me-2"></i>Website: https://bakorwilmalang.jatimprov.go.id</p>
|
||
<p class="mb-2"><i class="bi bi-geo-alt-fill me-2"></i>Alamat: Jl. Simpang Ijen No. 2 Kota Malang</p>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<h4 class="text-white mb-3">Peta Lokasi Bakorwil III Malang</h4>
|
||
<div class="map-container shadow-lg">
|
||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3951.3496328766115!2d112.63001927453488!3d-7.980644292023594!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd629e924a3502b%3A0xc023c023d6a911a!2sBakorwil%20III%20Malang!5e0!3m2!1sen!2sid!4v1700000000000!5m2!1sen!2sid" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="text-center footer-gradient mt-5 fw-bold" data-aos="fade-up" data-aos-id="fade-in-repeat" data-aos-delay="800">
|
||
<p class="mb-0">© 2025 Pustaka Nawasena Bakorwil III Malang.</p>
|
||
</footer>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||
<script>
|
||
AOS.init({
|
||
duration: 1200,
|
||
once: false,
|
||
mirror: true,
|
||
easing: 'ease-out',
|
||
offset: 50,
|
||
});
|
||
</script>
|
||
</body>
|
||
</script>
|
||
|
||
|
||
<style>
|
||
html {
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
html::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
html, body {
|
||
overflow-x: hidden !important;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
html, body {
|
||
overflow-x: clip !important;
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
/* Cegah semua elemen meluber */
|
||
* {
|
||
box-sizing: border-box;
|
||
max-width: 100vw;
|
||
}
|
||
|
||
/* Pastikan tidak ada efek samping dari header / hero */
|
||
header, .header, .hero, .hero-background {
|
||
width: 100% !important;
|
||
max-width: 100% !important;
|
||
overflow-x: clip !important;
|
||
}
|
||
|
||
.offcanvas, .modal {
|
||
max-width: 100vw;
|
||
overflow-x: hidden !important;
|
||
}
|
||
|
||
</style>
|
||
</body>
|
||
</html>
|
||
|