<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<title>Perpustakaan Digital MAN 2 Sleman</title>

<style>
body{
	margin:0;
	font-family:'Segoe UI',sans-serif;
	background:linear-gradient(135deg,#eef2f7,#f8fbff);
}

/* ================= SIDEBAR ================= */
.sidebar{
	position:fixed;
	left:0;
	top:0;
	width:240px;
	height:100%;
	background:linear-gradient(180deg,#1e293b,#0f172a);
	color:white;
	transition:.3s;
	overflow-y:auto;
	box-shadow:4px 0 20px rgba(0,0,0,.08);
}

.sidebar h3{
	text-align:center;
	padding:20px 0 5px;
	margin:0;
	font-weight:600;
	font-size:16px;
}

.sidebar center{
	font-size:12px;
	color:#94a3b8;
}

.sidebar a{
	display:flex;
	align-items:center;
	gap:10px;
	color:#cbd5e1;
	padding:12px 20px;
	text-decoration:none;
	font-size:14px;
	transition:.2s;
}

.sidebar a:hover{
	background:rgba(255,255,255,.07);
	padding-left:24px;
	color:white;
}

.sidebar a.active{
	background:linear-gradient(90deg,#0d6efd,#4e73df);
	color:white;
}

/* ================= CONTENT ================= */
.content{
	margin-left:240px;
	padding:25px;
	transition:.3s;
}

/* ================= TOPBAR ================= */
.topbar{
	background:white;
	padding:15px 25px;
	margin:-25px -25px 25px -25px;
	font-size:16px;
	font-weight:600;
	box-shadow:0 6px 15px rgba(0,0,0,.05);
	display:flex;
	align-items:center;
	gap:10px;
}

.topbar img{
	opacity:.8;
}

/* ================= DASHBOARD CARD ================= */
.dashboard{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:20px;
}

.card{
	color:white;
	padding:22px;
	border-radius:16px;
	min-height:130px;
	box-shadow:0 10px 25px rgba(0,0,0,.06);
	transition:.3s;
	position:relative;
	overflow:hidden;
}

.card:hover{
	transform:translateY(-6px);
}

.card h1{
	margin:0;
	font-size:34px;
	font-weight:700;
}

.card small{
	opacity:.8;
}

/* COLOR VARIANTS */
.blue{background:linear-gradient(135deg,#2196f3,#1976d2);}
.teal{background:linear-gradient(135deg,#00acc1,#00838f);}
.orange{background:linear-gradient(135deg,#f9a825,#f57f17);}
.green{background:linear-gradient(135deg,#43a047,#2e7d32);}
.purple{background:linear-gradient(135deg,#5c6bc0,#3949ab);}
.red{background:linear-gradient(135deg,#e53935,#b71c1c);}

/* LOGOUT */
.logout{
	background:#b71c1c;
	margin:15px;
	text-align:center;
	border-radius:10px;
}

/* COLLAPSE */
.sidebar.collapsed{
	width:0;
	overflow:hidden;
}

.content.collapsed{
	margin-left:0;
}
</style>

<script>
document.addEventListener("DOMContentLoaded",function(){

	const sidebar=document.querySelector('.sidebar');
	const content=document.querySelector('.content');
	const toggle=document.getElementById('toggleSidebar');

	if(localStorage.getItem('sidebar')==='hide'){
		sidebar.classList.add('collapsed');
		content.classList.add('collapsed');
	}

	toggle.addEventListener('click',function(){
		sidebar.classList.toggle('collapsed');
		content.classList.toggle('collapsed');

		if(sidebar.classList.contains('collapsed')){
			localStorage.setItem('sidebar','hide');
		}else{
			localStorage.setItem('sidebar','show');
		}
	});
});
</script>

</head>
<body>
