[EDIT]:ログイン画面、トップメニュー画面への遷移のみ
This commit is contained in:
h-seya
21
src/main/java/com/example/demo/LoginController.java
Normal file
21
src/main/java/com/example/demo/LoginController.java
Normal file
@@ -0,0 +1,21 @@
|
||||
package com.example.demo;
|
||||
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
|
||||
@Controller
|
||||
public class LoginController {
|
||||
|
||||
// 初期画面
|
||||
@GetMapping("/login")
|
||||
public String login() {
|
||||
return "login";
|
||||
}
|
||||
|
||||
// ログイン処理が実行された後
|
||||
@GetMapping("/topmenu")
|
||||
public String topmenu() {
|
||||
return "topmenu";
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,10 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ja">
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ログイン - ShareBooks</title>
|
||||
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
@@ -233,7 +234,7 @@
|
||||
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
|
||||
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
|
||||
</svg>
|
||||
社内備品・図書管理システム
|
||||
ShareBooks
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
@@ -249,11 +250,12 @@
|
||||
<h1>ログイン</h1>
|
||||
<p class="subtitle">社員IDとパスワードを入力して、システムにログインしてください。</p>
|
||||
|
||||
<% if (request.getAttribute("errorMessage") !=null) { %>
|
||||
<div class="error-message">
|
||||
<%= request.getAttribute("errorMessage") %>
|
||||
</div>
|
||||
<% } %>
|
||||
<!-- JSP処理なのでコメントアウト-->
|
||||
<!-- <% if (request.getAttribute("errorMessage") !=null) { %>-->
|
||||
<!-- <div class="error-message">-->
|
||||
<!-- <%= request.getAttribute("errorMessage") %>-->
|
||||
<!-- </div>-->
|
||||
<!-- <% } %>-->
|
||||
|
||||
<form method="post" action="LoginServlet">
|
||||
<div class="form-group">
|
||||
|
||||
@@ -1,17 +1,637 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>トップメニュー - ShareBooks</title>
|
||||
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Yu Gothic", "Meiryo", sans-serif;
|
||||
color: #18243a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* ===== ヘッダー ===== */
|
||||
.header {
|
||||
height: 58px;
|
||||
border-bottom: 1px solid #d8e0e8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 18px 0 20px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
gap: 9px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.book-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.user {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bell {
|
||||
font-size: 22px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: -5px;
|
||||
background: #e33;
|
||||
color: #fff;
|
||||
border-radius: 9px;
|
||||
font-size: 8px;
|
||||
min-width: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logout {
|
||||
height: 34px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #a8b3c0;
|
||||
border-radius: 5px;
|
||||
background: #fff;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ===== レイアウト ===== */
|
||||
.layout {
|
||||
display: flex;
|
||||
min-height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
/* ===== サイドバー ===== */
|
||||
.sidebar {
|
||||
width: 180px;
|
||||
flex: 0 0 180px;
|
||||
background: #082957;
|
||||
color: #fff;
|
||||
padding: 10px 8px;
|
||||
}
|
||||
|
||||
.side-label {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
margin: 4px 9px 12px;
|
||||
}
|
||||
|
||||
.side-menu {
|
||||
min-height: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.side-menu.active {
|
||||
background: #1267d9;
|
||||
}
|
||||
|
||||
.side-icon {
|
||||
font-size: 18px;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ===== メイン ===== */
|
||||
.content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 16px 20px 15px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 26px;
|
||||
margin: 0 0 3px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #4d596b;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 15px;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.menu-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 181px;
|
||||
border: 1px solid #e0e5eb;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 7px #1e344d12;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 16px 10px;
|
||||
transition: .15s;
|
||||
}
|
||||
|
||||
.card:hover,
|
||||
.system-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px #1e344d22;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 59px;
|
||||
height: 59px;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: #e6f0ff;
|
||||
color: #3175d2;
|
||||
}
|
||||
|
||||
.green {
|
||||
background: #e8f7ea;
|
||||
color: #55a768;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background: #fff5d8;
|
||||
color: #c39b31;
|
||||
}
|
||||
|
||||
.purple {
|
||||
background: #f1eaff;
|
||||
color: #8a68ca;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background: #fff0e3;
|
||||
color: #e3974e;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: #fde9eb;
|
||||
color: #d77a82;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-size: 13px;
|
||||
margin: 0 0 6px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.card p {
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
color: #5b6575;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 9px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
/* ===== システム管理 ===== */
|
||||
.system-section {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.system-card {
|
||||
width: 265px;
|
||||
height: 96px;
|
||||
border: 1px solid #e0e5eb;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 7px #1e344d12;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
transition: .15s;
|
||||
}
|
||||
|
||||
.system-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background: #e8f1ff;
|
||||
color: #3978d2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 25px;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.system-card h3 {
|
||||
font-size: 13px;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
.system-card p {
|
||||
font-size: 10px;
|
||||
color: #5b6575;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ===== お知らせ ===== */
|
||||
.notice-section {
|
||||
margin-top: 15px;
|
||||
border-top: 1px solid #e4e8ee;
|
||||
padding-top: 9px;
|
||||
}
|
||||
|
||||
.notice-heading {
|
||||
display: flex;
|
||||
gap: 7px;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.notice-heading h2 {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.count {
|
||||
background: #e84242;
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
font-size: 9px;
|
||||
padding: 2px 6px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.notice-box {
|
||||
border: 1px solid #e1e6ec;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.notice {
|
||||
min-height: 36px;
|
||||
display: grid;
|
||||
grid-template-columns: 72px 270px 1fr 125px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 12px;
|
||||
border-bottom: 1px solid #edf0f3;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.notice:last-child {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.type {
|
||||
min-width: 51px;
|
||||
width: max-content;
|
||||
padding: 3px 5px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
font-size: 9px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.danger {
|
||||
background: #fde6e4;
|
||||
color: #d9362e;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background: #fff0d9;
|
||||
color: #dc7b11;
|
||||
}
|
||||
|
||||
.success {
|
||||
background: #e7f7e9;
|
||||
color: #36924a;
|
||||
}
|
||||
|
||||
.message,
|
||||
.target {
|
||||
font-weight: bold;
|
||||
color: #39465a;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.date {
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ===== フッター ===== */
|
||||
.footer {
|
||||
height: 42px;
|
||||
border-top: 1px solid #dfe4ea;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #687386;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* ===== レスポンシブ ===== */
|
||||
@media (max-width : 1100px) {
|
||||
.menu-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.menu-grid.user-grid {
|
||||
grid-template-columns: repeat(3, minmax(200px, 250px));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width : 700px) {
|
||||
.user {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 160px;
|
||||
flex-basis: 160px;
|
||||
}
|
||||
|
||||
.menu-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.menu-grid.user-grid {
|
||||
grid-template-columns: repeat(2, minmax(200px, 250px));
|
||||
}
|
||||
|
||||
.notice {
|
||||
grid-template-columns: 60px 1fr;
|
||||
height: auto;
|
||||
padding: 7px 10px;
|
||||
}
|
||||
|
||||
.target,
|
||||
.date {
|
||||
grid-column: 2;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width : 480px) {
|
||||
.layout {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.menu-grid.user-grid {
|
||||
grid-template-columns: minmax(220px, 250px);
|
||||
}
|
||||
|
||||
.system-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>
|
||||
テスト
|
||||
</h1>
|
||||
|
||||
<!-- ===== ヘッダー ===== -->
|
||||
<header class="header">
|
||||
|
||||
<div class="header-title">
|
||||
<span class="book-icon">📖</span> ShareBooks
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
|
||||
<span class="user">
|
||||
<%=session.getAttribute("employeeName")%>（<%=roleName%>）
|
||||
</span>
|
||||
|
||||
<form action="${pageContext.request.contextPath}/logout" method="post"
|
||||
onsubmit="return confirm('ログアウトしますか？');">
|
||||
|
||||
<button type="submit" class="logout">ログアウト</button>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="layout">
|
||||
|
||||
<!-- ===== サイドバー ===== -->
|
||||
<aside class="sidebar">
|
||||
|
||||
<div class="side-label">
|
||||
<%=isAdmin ? "共通画面" : "一般メニュー" %>
|
||||
</div>
|
||||
|
||||
<a class="side-menu active" href="${pageContext.request.contextPath}/topmenu.jsp"> <span
|
||||
class="side-icon">⌂</span> トップメニュー
|
||||
</a>
|
||||
|
||||
</aside>
|
||||
|
||||
<!-- ===== メイン ===== -->
|
||||
<main class="content">
|
||||
|
||||
<h1 class="title">トップメニュー</h1>
|
||||
|
||||
<!-- ===== 重要なお知らせ ===== -->
|
||||
<section class="notice-section">
|
||||
|
||||
<div class="notice-heading">
|
||||
<h2>重要なお知らせ</h2>
|
||||
<span class="count">1件</span>
|
||||
</div>
|
||||
|
||||
<div class="notice-box">
|
||||
|
||||
<div class="notice">
|
||||
<span class="type danger">返却期限</span> <span class="message">
|
||||
返却期限が超過している図書があります。 </span> <span class="target"> 対象図書： </span> <span class="date">
|
||||
2026/09/16 09:10 </span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 超過お知らせと下の文言は1行分空けたい -->
|
||||
|
||||
<section>
|
||||
|
||||
<h2 class="section-title">各一覧メニュー</h2>
|
||||
|
||||
<div class="menu-grid <%=isAdmin ? " admin-grid" : "user-grid" %>">
|
||||
|
||||
<!-- ===== 共通：社内図書一覧 ===== -->
|
||||
<a class="card" href="${pageContext.request.contextPath}/BookServlet">
|
||||
|
||||
<div class="icon green">📖</div>
|
||||
|
||||
<h3>社内図書一覧</h3>
|
||||
|
||||
<p>
|
||||
登録されている図書の<br> 一覧を表示します。
|
||||
</p> <span class="arrow">›</span>
|
||||
</a>
|
||||
|
||||
<!-- ===== 管理者のみ ===== -->
|
||||
<% if (isAdmin) { %>
|
||||
|
||||
<a class="card" href="${pageContext.request.contextPath}/lendList">
|
||||
<div class="icon orange">📅</div>
|
||||
|
||||
<h3>
|
||||
※管理者機能<br> 貸出中図書一覧
|
||||
</h3>
|
||||
|
||||
<p>
|
||||
貸出中の備品・図書の<br> 一覧を表示します。
|
||||
</p>
|
||||
|
||||
<span class="arrow"></span>
|
||||
</a>
|
||||
|
||||
<a class="card" href="${pageContext.request.contextPath}/approvalReceive">
|
||||
<div class="icon red">▱</div>
|
||||
|
||||
<h3>
|
||||
※管理者機能<br> 寄贈申請受信ボックス
|
||||
</h3>
|
||||
|
||||
<p>
|
||||
図書寄贈申請の<br> 受信一覧を確認します。
|
||||
</p>
|
||||
|
||||
<span class="arrow">›</span>
|
||||
|
||||
</a>
|
||||
|
||||
<% } %>
|
||||
|
||||
</div>
|
||||
|
||||
<h2 class="section-title">寄贈申請・新規登録メニュー</h2>
|
||||
|
||||
<div class="menu-grid <%=isAdmin ? " admin-grid" : "user-grid" %>">
|
||||
|
||||
<!-- ===== 共通：寄贈申請 ===== -->
|
||||
<a class="card" href="${pageContext.request.contextPath}/bookApproval">
|
||||
|
||||
<div class="icon yellow">📗</div>
|
||||
|
||||
<h3>寄贈申請</h3>
|
||||
|
||||
<p>
|
||||
図書の寄贈申請を<br> 行います。
|
||||
</p> <span class="arrow">›</span>
|
||||
</a>
|
||||
|
||||
<!-- ===== 管理者のみ ===== -->
|
||||
|
||||
<% if (isAdmin) { %>
|
||||
|
||||
<a class="card" href="${pageContext.request.contextPath}/insertBook">
|
||||
|
||||
<div class="icon yellow">📗</div>
|
||||
|
||||
<h3>
|
||||
※管理者機能<br> 新規図書登録
|
||||
</h3>
|
||||
|
||||
<p>
|
||||
図書の新規登録を<br> 行います。
|
||||
</p> <span class="arrow">›</span>
|
||||
</a>
|
||||
|
||||
<% } %>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ===== パスワード再設定 ===== -->
|
||||
<section class="system-section <%=isAdmin ? " admin-system" : "user-system" %>">
|
||||
|
||||
<h2 class="section-title">システム管理メニュー</h2>
|
||||
|
||||
<a class="system-card" href="passwordChange.jsp">
|
||||
|
||||
<div class="system-icon">🔑</div>
|
||||
|
||||
<div>
|
||||
<h3>パスワード再設定</h3>
|
||||
<p>現在のパスワードを変更します。</p>
|
||||
</div> <span class="arrow">›</span>
|
||||
|
||||
</a>
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer class="footer"> © 2026 社内備品・図書管理システム </footer>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user