118 lines
3.9 KiB
PHP
118 lines
3.9 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>@yield('title') | Pustaka Nawasena</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
/* RESET TOTAL */
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
background: #0f172a;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
overflow: hidden; /* Kunci layar agar tidak goyang */
|
|
}
|
|
|
|
/* HEADER: Paksa Tinggi 55px */
|
|
header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 55px !important;
|
|
background: white;
|
|
border-bottom: 2px solid #b45309;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 1.5rem;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* FOOTER: Paksa Tinggi 30px */
|
|
footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 30px !important;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* AREA KONTEN: Otomatis mengisi sisa layar */
|
|
main {
|
|
position: absolute;
|
|
top: 55px; /* Mulai tepat setelah header */
|
|
bottom: 30px; /* Berakhir tepat sebelum footer */
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-image: linear-gradient(rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.95)), url("{{ asset('images/utama.jpg') }}");
|
|
background-size: cover;
|
|
padding: 10px;
|
|
}
|
|
|
|
/* Label Kecil */
|
|
.brand-text { font-weight: 900; font-size: 1rem; color: #0f172a; line-height: 1; }
|
|
.brand-sub { font-size: 7px; font-weight: 800; color: #b45309; text-transform: uppercase; }
|
|
#clock { font-weight: 800; font-size: 1.2rem; color: #0f172a; }
|
|
#date { font-size: 8px; color: #64748b; text-transform: uppercase; }
|
|
|
|
@stack('styles')
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<div class="flex items-center gap-3">
|
|
<img src="{{ asset('images/kartu.png') }}" style="height: 30px; width: auto;">
|
|
<div class="w-[1px] h-6 bg-slate-200"></div>
|
|
<img src="{{ asset('images/bakorwil.png') }}" style="height: 30px; width: auto;">
|
|
<div>
|
|
<div class="brand-text">NAWASENA</div>
|
|
<div class="brand-sub">Smart Library Terminal</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ml-auto text-right">
|
|
<div id="clock">00:00</div>
|
|
<div id="date">MEMUAT...</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
@yield('content')
|
|
</main>
|
|
|
|
<footer>
|
|
<p style="color: rgba(255,255,255,0.4); font-size: 9px; font-weight: 700; letter-spacing: 1px;">
|
|
© 2026 BAKORWIL III MALANG • V4.2
|
|
</p>
|
|
</footer>
|
|
|
|
<script>
|
|
function updateDateTime() {
|
|
const now = new Date();
|
|
const clock = document.getElementById('clock');
|
|
const date = document.getElementById('date');
|
|
if(clock) clock.textContent = now.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
|
|
if(date) date.textContent = now.toLocaleDateString('id-ID', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
|
|
}
|
|
setInterval(updateDateTime, 1000);
|
|
updateDateTime();
|
|
</script>
|
|
@stack('scripts')
|
|
</body>
|
|
</html>
|
|
|