Skip to content

Commit

Permalink
[refactor] 질문 내역을 볼 수 있는 페이지를 시각적으로 더 이쁘게 변경
Browse files Browse the repository at this point in the history
  • Loading branch information
@The-Martin-Kim
The-Martin-Kim authored Sep 20, 2024
1 parent 92e979d commit efcc818
Showing 1 changed file with 169 additions and 41 deletions.
210 changes: 169 additions & 41 deletions src/main/resources/templates/admin/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,48 +2,176 @@
<html lang="ko-kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GPT-ADMIN-MAIN</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

body {
background-color: #f5f5f5;
padding: 20px;
}

h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}

table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

th, td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}

th {
background-color: #4a90e2;
color: white;
}

td a {
text-decoration: none;
color: #4a90e2;
}

td a:hover {
text-decoration: underline;
}

tr:nth-child(even) {
background-color: #f9f9f9;
}

div {
text-align: center;
}

a {
margin: 0 10px;
text-decoration: none;
color: #4a90e2;
font-weight: bold;
}

a:hover {
color: #357abd;
}

.pagination a {
margin: 0 5px;
padding: 8px 16px;
background-color: #f1f1f1;
border: 1px solid #ddd;
color: #4a90e2;
border-radius: 4px;
}

.pagination a:hover {
background-color: #4a90e2;
color: white;
}

form {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 400px;
margin: 20px auto;
}

input[type="text"], input[type="password"] {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}

input[type="text"]:focus, input[type="password"]:focus {
border-color: #4a90e2;
outline: none;
}

button {
width: 100%;
padding: 12px;
background-color: #4a90e2;
color: white;
border: none;
border-radius: 4px;
font-size: 18px;
cursor: pointer;
}

button:hover {
background-color: #357abd;
}

@media (max-width: 768px) {
table, th, td {
font-size: 14px;
}

form {
padding: 20px;
}

input[type="text"], input[type="password"], button {
font-size: 14px;
}
}
</style>
</head>
<body>
<h1>GPT 관리자 페이지</h1>
<div>
<table>
<tr>
<th>게시글 번호</th>
<th>제목</th>
<th>작성 시간</th>
</tr>

<tr th:each="history: ${histories}">
<td th:text="${history.id}"></td>
<td><a th:href="@{/history/{id}(id = ${history.id})}" th:text="${history.question}"/></td>
<td th:text="${history.talkedTime}"></td>
</tr>
</table>

<!-- 첫 페이지로 이동 -->
<a th:href="@{/admin/main(page=0)}">첫 페이지 </a>

<!-- 이전 페이지 이동 (# 붙을 시 이동하지 않음) -->
<!-- <a th:href="${histories.first} ? '#' : @{/admin/main(page=${histories.number - 1})}"> 이전 페이지 </a>-->

<span th:each="page: ${#numbers.sequence(pageIndex.getStartPageNumber, pageIndex.getEndPageNumber)}">
<a th:href="@{/admin/main(page=${page})}" th:text="${page+1}"></a>
</span>

<!-- 다음 페이지 이동 (# 붙을 시 이동하지 않음) -->
<!-- <a th:href="${histories.last} ? '#' : @{/admin/main(page=${histories.number + 1})}"> 다음 페이지</a>-->

<!-- 마지막 페이지로 이동 -->
<a th:href="@{/admin/main(page=0)}" th:if="${histories.totalPages == 0}">마지막 페이지</a>
<a th:href="@{/admin/main(page=${histories.totalPages - 1})}" th:if="${histories.totalPages != 0}">마지막 페이지</a>
</div>

<form method="post" th:action="@{/admin/join}" >
<input type="text" name="userId" placeholder="새로운 관리자 ID를 입력해주세요">
<input type="password" name="password" placeholder="새로운 관리자 비밀번호를 입력해주세요">
<button type="submit" th:text="회원가입"></button>
</form>
</div>
<h1>AIIA-GPT는 이러한 질문들을 받아냈습니다.</h1>
<div>
<table>
<thead>
<tr>
<th>NO</th>
<th>질문 내용</th>
<th>질문한 시간</th>
</tr>
</thead>
<tbody>
<tr th:each="history: ${histories}">
<td th:text="${history.id}"></td>
<td><a th:href="@{/history/{id}(id = ${history.id})}" th:text="${history.question}"></a></td>
<td th:text="${history.talkedTime}"></td>
</tr>
</tbody>
</table>

<!-- 페이지 네비게이션 -->
<div class="pagination">
<a th:href="@{/admin/main(page=0)}">첫 페이지</a>
<span th:each="page: ${#numbers.sequence(pageIndex.getStartPageNumber, pageIndex.getEndPageNumber)}">
<a th:href="@{/admin/main(page=${page})}" th:text="${page+1}"></a>
</span>
<a th:href="@{/admin/main(page=${histories.totalPages - 1})}">마지막 페이지</a>
</div>

<!-- 관리자 등록 폼 -->
<form method="post" th:action="@{/admin/join}">
<input type="text" name="userId" placeholder="새로운 관리자 ID를 입력해주세요" required>
<input type="password" name="password" placeholder="새로운 관리자 비밀번호를 입력해주세요" required>
<button type="submit">회원가입</button>
</form>
</div>
</body>
</html>
</html>

0 comments on commit efcc818

Please sign in to comment.