You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
318 lines
7.9 KiB
318 lines
7.9 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<style>
|
|
/* Global */
|
|
:root {
|
|
--text-color: #f0f4f5;
|
|
--background-color: #263343;
|
|
--accent-color: #d49466;
|
|
}
|
|
|
|
* {
|
|
/* Tells the browser to account for any border and
|
|
padding in the values you specify for an element's
|
|
width and height. */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: 'Source Sans Pro';
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
/* Nav container */
|
|
.navbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 12px;
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
/* Logo with text */
|
|
.navbar__logo {
|
|
margin-left: 40%;
|
|
font-size: 35px;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.navbar__logo i {
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
/* Menu */
|
|
.navbar__menu {
|
|
color: #f0f4f5;
|
|
display: flex;
|
|
padding-left: 0;
|
|
margin-right: 50px;
|
|
list-style: none;
|
|
}
|
|
|
|
.navbar__menu li {
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.navbar__menu li:hover {
|
|
background-color: var(--accent-color);
|
|
border-radius: 4px;
|
|
}
|
|
.navbar__icons {
|
|
list-style: none;
|
|
color: var(--text-color);
|
|
display: flex;
|
|
padding-left: 0;
|
|
}
|
|
|
|
/* Icons */
|
|
.navbar__icons li {
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
/* Toggle button */
|
|
.navbar__toggleBtn {
|
|
display: none;
|
|
position: absolute;
|
|
right: 32px;
|
|
font-size: 24px;
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
input[id="menuicon"] {display:none;}
|
|
input[id="menuicon"] + label {display:block;margin:30px;width:60px;height:50px;position:absolute;cursor:pointer;}
|
|
input[id="menuicon"] + label span {display:block;position:absolute;width:100%;height:5px;border-radius:30px;background:#000;transition:all .35s;}
|
|
input[id="menuicon"] + label span:nth-child(1) {top:0;}
|
|
input[id="menuicon"] + label span:nth-child(2) {top:50%;transform:translateY(-50%);} /* 비슷하게 사용할 수 있는 style top:calc(50% - 2.5px); margin-top:-2.5px;*/
|
|
input[id="menuicon"] + label span:nth-child(3) {bottom:0;}
|
|
input[id="menuicon"]:checked + label {z-index:2;}
|
|
input[id="menuicon"]:checked + label span {background:#fff;}
|
|
input[id="menuicon"]:checked + label span:nth-child(1) {top:50%;transform:translateY(-50%) rotate(45deg);}
|
|
input[id="menuicon"]:checked + label span:nth-child(2) {opacity:0;}
|
|
input[id="menuicon"]:checked + label span:nth-child(3) {bottom:50%;transform:translateY(50%) rotate(-45deg);}
|
|
div[class="sidebar"] {width:300px;height:100%;background:#222;position:fixed;top:0;left:-300px;z-index:1;transition:all .35s;}
|
|
input[id="menuicon"]:checked + label + div {left:0;}
|
|
|
|
|
|
|
|
|
|
|
|
.sidemenu {
|
|
position: relative;
|
|
left: 0px;
|
|
top: 120px;
|
|
color: white;
|
|
font-size: 20px;
|
|
margin-top: 60px;
|
|
list-style: none;
|
|
}
|
|
|
|
#naver_id_login, .next {
|
|
margin-top: 25%;
|
|
text-align: center;
|
|
}
|
|
|
|
.imgfile {
|
|
margin-top: 20%;
|
|
margin-left: 39%;
|
|
}
|
|
|
|
|
|
|
|
/* For small screen */
|
|
@media screen and (max-width: 768px) {
|
|
|
|
.navbar__menu {
|
|
display: none;
|
|
}
|
|
|
|
input[id="menuicon"] {display:none;}
|
|
input[id="menuicon"] + label {display:block;margin:30px;width:60px;height:50px;position:absolute;cursor:pointer;}
|
|
input[id="menuicon"] + label span {display:block;position:absolute;width:100%;height:5px;border-radius:30px;background:#000;transition:all .35s;}
|
|
input[id="menuicon"] + label span:nth-child(1) {top:0;}
|
|
input[id="menuicon"] + label span:nth-child(2) {top:50%;transform:translateY(-50%);} /* 비슷하게 사용할 수 있는 style top:calc(50% - 2.5px); margin-top:-2.5px;*/
|
|
input[id="menuicon"] + label span:nth-child(3) {bottom:0;}
|
|
input[id="menuicon"]:checked + label {z-index:2;}
|
|
input[id="menuicon"]:checked + label span {background:#fff;}
|
|
input[id="menuicon"]:checked + label span:nth-child(1) {top:50%;transform:translateY(-50%) rotate(45deg);}
|
|
input[id="menuicon"]:checked + label span:nth-child(2) {opacity:0;}
|
|
input[id="menuicon"]:checked + label span:nth-child(3) {bottom:50%;transform:translateY(50%) rotate(-45deg);}
|
|
div[class="sidebar"] {width:300px;height:100%;background:#222;position:fixed;top:0;left:-300px;z-index:1;transition:all .35s;}
|
|
input[id="menuicon"]:checked + label + div {left:0;}
|
|
}
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
caption {
|
|
display: none;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.board_list_wrap {
|
|
padding: 50px;
|
|
}
|
|
|
|
.board_list {
|
|
width: 100%;
|
|
border-top: 2px solid navy;
|
|
}
|
|
|
|
.board_list tr {
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
.board_list th,
|
|
.board_list td {
|
|
padding: 10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.board_list td {
|
|
text-align: center;
|
|
}
|
|
|
|
.board_list .tit {
|
|
text-align: left;
|
|
}
|
|
|
|
.board_list .tit:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.board_list_wrap .paging {
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
font-size: 0;
|
|
}
|
|
.board_list_wrap .paging a {
|
|
display: inline-block;
|
|
margin-left: 10px;
|
|
padding: 5px 10px;
|
|
border-radius: 100px;
|
|
font-size: 12px;
|
|
}
|
|
.board_list_wrap .paging a:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.board_list_wrap .paging a.bt {
|
|
border: 1px solid #eee;
|
|
background: #eee;
|
|
}
|
|
|
|
.board_list_wrap .paging a.num {
|
|
border: 1px solid navy;
|
|
font-weight: 600;
|
|
color: navy;
|
|
}
|
|
|
|
.board_list_wrap .paging a.num.on {
|
|
background: navy;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
{% comment %} <link rel="stylesheet" href="./main.css" />
|
|
<link rel="stylesheet" href="./notice.css"> {% endcomment %}
|
|
<link
|
|
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<title>Main</title>
|
|
<script
|
|
src="https://kit.fontawesome.com/2d323a629b.js"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar">
|
|
<!-- Logo with text -->
|
|
<div class="navbar__logo">
|
|
<i class="fab fa-accusoft"></i>
|
|
<a href='../'>소확프</a>
|
|
</div>
|
|
<!-- Menu -->
|
|
<ul class="navbar__menu">
|
|
<li><a href="#">문의사항</a></li>
|
|
{% if user.is_authenticated %}
|
|
<li><a href="{% url 'user:mypage' %}">마이페이지</a>
|
|
<li><a href="{% url 'user:logout' %}">로그아웃 </a>
|
|
{% else %}
|
|
<li><a href="{% url 'user:login' %}">로그인</a></li>
|
|
{% endif %}
|
|
</ul>
|
|
|
|
<!-- Toggle button -->
|
|
<a href="#" class="navbar__toggleBtn">
|
|
<i class="fas fa-bars"></i>
|
|
</a>
|
|
<input type="checkbox" id="menuicon">
|
|
<label for="menuicon">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</label>
|
|
<div class = "sidebar">
|
|
<ul class="side">
|
|
<li class="sidemenu"><a href="{% url 'user:delivery' %}">배달비</a></li>
|
|
<li class="sidemenu"><a href="{% url 'user:taxi' %}">택시비</a></li>
|
|
<li class="sidemenu"><a href="#">문의사항</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<div class="board_list_wrap">
|
|
<table class="board_list">
|
|
배 달
|
|
<thead>
|
|
<tr>
|
|
<th>번호</th>
|
|
<th>제목</th>
|
|
<th>글쓴이</th>
|
|
<th>작성일</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for board_ds in board_d %}
|
|
<tr class="text-center">
|
|
<th scope="row">
|
|
<span>{{ board_ds.id }}</span>
|
|
</th>
|
|
<td>
|
|
<a href="detail/{{ board_ds.id }}">
|
|
<span>{{ board_ds.title }}</span>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span>{{ board_ds.author }}</span>
|
|
</td>
|
|
<td>
|
|
<span>{{ board_ds.created_date | date:"Y-m-d h:i" }}</span>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</tbody>
|
|
</table>
|
|
{% if user.is_authenticated %}
|
|
<a class="btn btn-primary" href="/board_delivery" role="button">글쓰기</a>
|
|
{% endif %}
|
|
</div>
|
|
</body>
|
|
</html>
|