Project/Project(프로젝트) Library
관리자 페이지
by Son
2023. 5. 31.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>시립도서관</title>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="/static/css/reset.css">
<link rel="stylesheet" href="/static/css/common.css">
<link rel="stylesheet" href="/static/css/header.css">
<link rel="stylesheet" href="/static/css/admin/admin_common.css">
<link rel="stylesheet" href="/static/css/admin/left_aside.css">
<link rel="stylesheet" href="/static/css/admin/book_search.css">
</head>
<body>
<div id="container">
<header class="header-container">
<h1 class="brand-logo"><a href="/index">시립 도서관</a></h1>
<ul class="menu-container">
<li><a href="">도서관이용안내</a></li>
<li><a href="">자료검색▪이용</a></li>
<li><a href="">참여마당</a></li>
<li><a href="">독서공감</a></li>
<li><a href="">책으로 행복한 청주</a></li>
<li><a href="">도서관소개</a></li>
<li><a href="">작은도서관</a></li>
<li><a href="">나의도서관</a></li>
</ul>
<ul class="account-container">
<li><a href="/account/login">로그인</a></li>
<li><a href="/account/register">회원가입</a></li>
</ul>
</header>
<main class="main-container">
<aside class="left-aside">
<div class="aside-title">
<h1 class="title-text-h1">관리자 시스템</h1>
</div>
<nav class="main-menu">
<h2 class="title-text-h2">도서정보관리</h2>
<ul class="sub-menu">
<a href="/templates/admin/book_search.html"><li>도서정보 조회</li></a>
<a href="/templates/admin/book_register.html"><li>도서정보 등록</li></a>
</ul>
<h2 class="title-text-h2">회원정보관리</h2>
<ul class="sub-menu">
<a href=""><li>회원정보 조회</li></a>
</ul>
</nav>
</aside>
<div class="content-container">
<h1 class="content-title">도서정보 조회</h1>
<div class="content-main">
<div class="content-items">
<div class="left-items">
<button type="button" class="delete-button">삭제</button>
</div>
<div class="right-items">
<select class="category-select">
<option value="">전체조회</option>
<option value="경제/경영">경제/경영</option>
<option value="소설">소설</option>
<option value="자기계발">자기계발</option>
</select>
<input type="search" class="search-input">
<button type="button" class="search-button">검색</button>
</div>
</div>
<div class="table-container">
<table class="content-table">
<thead>
<tr>
<th><input type="checkbox" class="delete-checkall"></th>
<th>아이디</th>
<th>도서코드</th>
<th>도서명</th>
<th>저자</th>
<th>출판사</th>
<th>출판일</th>
<th>분류</th>
<th>상태</th>
<th>수정</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="page-controller">
<a href="" class="disabled">이전</a>
<ul class="page-numbers">
<a href=""><li>1</li></a>
<a href=""><li>2</li></a>
<a href=""><li>3</li></a>
<a href=""><li>4</li></a>
<a href=""><li>5</li></a>
</ul>
<a href="">다음</a>
</div>
</div>
</div>
</main>
</div>
<script src="/static/js/admin/book_search.js"></script>
</body>
</html>
.content-items {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
width: 100%;
}
.delete-button {
border: 1px solid #ff4141;
padding: 5px 10px;
}
.delete-button:hover {
background-color: #ff4141;
color: white;
}
.table-container {
border: 1px solid #202020;
width: 100%;
height: 450px;
}
.content-table {
border: 1px solid #202020;
width: 100%;
}
.content-table th, .content-table td {
height: 21px;
text-align: center;
}
.content-table td .fa-solid {
cursor: pointer;
}
.page-controller {
display: flex;
justify-content: center;
margin-top: 20px;
}
.page-numbers {
display: flex;
}
.page-controller a {
display: flex;
justify-content: center;
align-items: center;
margin: 0px 5px;
border: 1px solid #202020;
border-radius: 4px;
width: 30px;
height: 30px;
font-weight: 600;
font-size: 12px;
}
.page-controller a:hover {
background-color: #202020;
color: white;
}
.page-controller .disabled {
background-color: #202020;
color: white;
cursor: default;
}
.left-aside {
width: 20%;
height: 100%;
border-right: 4px solid #202020;
background-color: #202020;
}
.aside-title {
display: flex;
justify-content: center;
align-items: center;
border-bottom: 3px solid #202020;
width: 100%;
height: 100px;
background-color: white;
}
.title-text-h1 {
font-size: 24px;
color: #202020;
}
.main-menu {
padding: 20px 0px;
background-color: #101010;
color: white;
}
.title-text-h2 {
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid #505050;
border-bottom: 1px solid #505050;
height: 80px;
font-size: 18px;
}
.sub-menu a li {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
font-size: 14px;
color: white;
}
.sub-menu a li:hover {
background-color: #505050;
}
