234 lines
6.2 KiB
PHP
234 lines
6.2 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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>(주)Kuls Admin</title>
|
|
<link href="/include/bootstrap/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
|
|
|
|
</head>
|
|
<body>
|
|
<div id="root">
|
|
<div id="sidebar">
|
|
<div class="head-logo"><!--로고--></div>
|
|
<div id="side-pos">Admin Page</div>
|
|
<div id="side-nav">
|
|
<ul id="side-gnb">
|
|
<li><div><i class="bi bi-arrow-right-short selmnu"></i><i class="bi bi-patch-plus-fill"></i>Dash Board<i class="bi bi-chevron-right selmnusub"></i></div></li>
|
|
<li><div><i class="bi bi-arrow-right-short selmnu"></i><i class="bi bi-palette"></i>사원관리<i class="bi bi-chevron-right selmnusub"></i></div></li>
|
|
<li class="hassub open">
|
|
<div><i class="bi bi-arrow-right-short selmnu"></i><i class="bi bi-pc-display-horizontal"></i>컨테이너관리<i class="bi bi-chevron-down selmnusub"></i></div>
|
|
<ul id="side-lnb">
|
|
<li><div><i class="bi bi-arrow-right-short selmnu"></i><i class="bi bi-person-check"></i>입출입현황</div></li>
|
|
<li class="active"><div><i class="bi bi-arrow-right-short selmnu"></i><i class="bi bi-person-plus"></i>재고현황</div></li>
|
|
<li><div><i class="bi bi-arrow-right-short selmnu"></i><i class="bi bi-person-square"></i>상태푯기</div></li>
|
|
</ul>
|
|
</li>
|
|
<li><div><i class="bi bi-arrow-right-short selmnu"></i><i class="bi bi-gear-fill"></i>관리<i class="bi bi-chevron-right selmnusub"></i></div></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div id="main">
|
|
<div class="header-static">
|
|
<div class="header-status"> <i class="bi bi-list"> Dash Board</i> 우성 서비스 : 상단 대쉬보드 / 현위치 / 로그인 / mnb / Info 등등</div>
|
|
<div class="header-bcrumb"> <i class="bi bi-caret-right mr-3"></i> Admin Home > Home </div>
|
|
</div>
|
|
<div class="body">본문
|
|
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
|
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
|
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
|
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
|
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
|
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
|
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
|
|
|
|
<style>
|
|
/*
|
|
https://bootstrap.build/app
|
|
|
|
** 메인색
|
|
#1F2937 - prim
|
|
#BAC5D7 - secon
|
|
#F0BC74 - X
|
|
#F1F1E6 - X
|
|
$spacer : 0.5rem
|
|
$font-size-base: 0.85rem
|
|
$input-btn-padding-y : .25rem
|
|
$input-btn-padding-x : .5rem
|
|
$input-btn-padding-y-sm : .15rem
|
|
$input-btn-padding-x-sm : .4rem
|
|
$input-btn-padding-y-lg : .3rem
|
|
$input-btn-padding-x-lg : .7em
|
|
*/
|
|
#root {
|
|
border:none;
|
|
}
|
|
|
|
#root #sidebar {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
float: left;
|
|
width: 250px;
|
|
color: #fff;
|
|
background: #1F2937;
|
|
z-index: 100;
|
|
|
|
-webkit-transition: left 0.3s;
|
|
transition: left 0.3s;
|
|
}
|
|
|
|
#root #sidebar .head-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 64px;
|
|
padding: 0 20px;
|
|
background-image: url("/include/img/kuls_ict.png");
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
background-size: 70%;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
#root #sidebar #side-pos {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 46px;
|
|
font-size: x-large;
|
|
background: #00000033;
|
|
}
|
|
|
|
#root #sidebar #side-nav {
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
margin-top: 110px;
|
|
width:100%;
|
|
height: calc(100% - 110px);
|
|
overflow: auto;
|
|
}
|
|
|
|
#root #main {
|
|
position:relative;
|
|
width: 100%;
|
|
padding-left: 250px;
|
|
flex-basis: calc(100% - 250px);
|
|
background: #F4F5F7;
|
|
z-index: 50;
|
|
|
|
-webkit-transition: left 0.3s;
|
|
transition: left 0.3s;
|
|
}
|
|
|
|
#root #main .header-static {
|
|
position: sticky;
|
|
top:0;
|
|
height: 110px;
|
|
background: #F4F5F7;
|
|
z-index: 2;
|
|
}
|
|
|
|
#root #main .header-static .header-status {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 64px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
#root #main .header-static .header-status .bi {
|
|
font-size: x-large;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
#root #main .header-static .header-bcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 46px;
|
|
padding: 5px 20px;
|
|
border-top: 1px #BAC5D7 solid;
|
|
border-bottom: 1px #BAC5D7 solid;
|
|
}
|
|
|
|
#root #main .body {
|
|
padding: 30px;
|
|
z-index: 1;
|
|
}
|
|
|
|
#root ul, #root li {
|
|
list-style-type: none;
|
|
margin-left: 0px;
|
|
padding-left: 0px;
|
|
}
|
|
|
|
#root #sidebar #side-gnb {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#root #sidebar #side-gnb > li > div {
|
|
padding: 10px;
|
|
padding-left: 20px;
|
|
/*border-bottom: solid 1px #2D3C50;*/
|
|
}
|
|
|
|
#root #sidebar #side-gnb > li #side-lnb > li > div {
|
|
padding: 10px;
|
|
padding-left: 40px;
|
|
/*border-bottom: solid 1px #2D3C50;*/
|
|
}
|
|
|
|
#root #sidebar #side-nav li {
|
|
position: relative;
|
|
}
|
|
|
|
#root #sidebar #side-nav li .bi {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#root #sidebar #side-nav li .bi.selmnu, #root #sidebar #side-nav li .bi.selmnusub{
|
|
display: none;
|
|
}
|
|
|
|
#root #sidebar #side-nav li.active > div > .bi.selmnu {
|
|
display: block;
|
|
position: absolute;
|
|
color: #F0BC74;
|
|
font-size: large;
|
|
left: 3px;
|
|
top: 8px;
|
|
}
|
|
|
|
#root #sidebar #side-nav li.hassub .bi.selmnusub {
|
|
display: block;
|
|
position: absolute;
|
|
right: 3px;
|
|
top: 10px;
|
|
|
|
-webkit-transition-duration: 0.5s;
|
|
transition-duration: 0.5s;
|
|
}
|
|
|
|
#root #sidebar #side-nav li.hassub.open .bi.selmnusub {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
#root #sidebar #side-gnb > li:hover {
|
|
background-color: #fff3;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#root #sidebar #side-gnb > li #side-lnb > li:hover {
|
|
background-color: #0003;
|
|
cursor: pointer;
|
|
}
|
|
</style> |