[ADD]:htmlファイル追加
This commit is contained in:
h-seya
333
src/main/resources/templates/login.html
Normal file
333
src/main/resources/templates/login.html
Normal file
@@ -0,0 +1,333 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ja">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ログイン | 社内備品・図書管理システム</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
|
||||
background: linear-gradient(160deg, #cfe0f5 0%, #e8f0fa 45%, #d8e6f5 100%);
|
||||
}
|
||||
|
||||
/* ヘッダーバー */
|
||||
.header-bar {
|
||||
background-color: #16325c;
|
||||
color: #ffffff;
|
||||
padding: 18px 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header-bar svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* 中央エリア */
|
||||
.content-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 56px 16px 40px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: #ffffff;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
padding: 40px 36px 32px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 18px rgba(20, 40, 70, 0.10);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.book-icon-circle {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin: 0 auto 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.book-icon-circle svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
color: #1a56c4;
|
||||
}
|
||||
|
||||
.login-card h1 {
|
||||
font-size: 22px;
|
||||
margin: 0 0 8px;
|
||||
color: #1c2733;
|
||||
}
|
||||
|
||||
.login-card p.subtitle {
|
||||
font-size: 13px;
|
||||
color: #6b7686;
|
||||
margin: 0 0 28px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
text-align: left;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #33404f;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.required-badge {
|
||||
background-color: #e5484d;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
padding: 2px 7px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.input-with-icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-with-icon svg.left-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #9aa4b2;
|
||||
}
|
||||
|
||||
.input-with-icon input {
|
||||
width: 100%;
|
||||
padding: 11px 12px 11px 36px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #d7dde5;
|
||||
border-radius: 6px;
|
||||
background-color: #fafbfc;
|
||||
}
|
||||
|
||||
.input-with-icon input:focus {
|
||||
outline: none;
|
||||
border-color: #1a56c4;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.toggle-password {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #9aa4b2;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn-login {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
margin-top: 6px;
|
||||
background-color: #1a56c4;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-login svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.btn-login:hover {
|
||||
background-color: #15479f;
|
||||
}
|
||||
|
||||
.forgot-text {
|
||||
font-size: 12px;
|
||||
color: #6b7686;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: #fdecea;
|
||||
color: #c0392b;
|
||||
font-size: 13px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* ご利用にあたってボックス */
|
||||
.info-box {
|
||||
max-width: 420px;
|
||||
margin: 18px auto 0;
|
||||
background-color: #eaf2fc;
|
||||
border: 1px solid #d3e3f7;
|
||||
border-radius: 8px;
|
||||
padding: 16px 18px;
|
||||
font-size: 12px;
|
||||
color: #4a5768;
|
||||
}
|
||||
|
||||
.info-box .info-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: bold;
|
||||
color: #1c2733;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.info-box .info-title svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: #1a56c4;
|
||||
}
|
||||
|
||||
.info-box ul {
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.info-box li {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="header-bar">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<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>
|
||||
社内備品・図書管理システム
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<div>
|
||||
<div class="login-card">
|
||||
<div class="book-icon-circle">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<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>
|
||||
</div>
|
||||
<h1>ログイン</h1>
|
||||
<p class="subtitle">社員IDとパスワードを入力して、システムにログインしてください。</p>
|
||||
|
||||
<% if (request.getAttribute("errorMessage") !=null) { %>
|
||||
<div class="error-message">
|
||||
<%= request.getAttribute("errorMessage") %>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<form method="post" action="LoginServlet">
|
||||
<div class="form-group">
|
||||
<label for="employeeId">社員ID <span class="required-badge">必須</span></label>
|
||||
<div class="input-with-icon">
|
||||
<svg class="left-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
<input type="text" id="employeeId" name="employeeId"
|
||||
placeholder="社員IDを入力してください（例：123456）" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">パスワード <span class="required-badge">必須</span></label>
|
||||
<div class="input-with-icon">
|
||||
<svg class="left-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="11" width="18" height="11" rx="2" />
|
||||
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
||||
</svg>
|
||||
<input type="password" id="password" name="password" placeholder="パスワードを入力してください"
|
||||
required>
|
||||
<button type="button" class="toggle-password" onclick="togglePassword()">
|
||||
<svg id="eyeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-login">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
|
||||
<polyline points="10 17 15 12 10 7" />
|
||||
<line x1="15" y1="12" x2="3" y2="12" />
|
||||
</svg>
|
||||
ログイン
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="forgot-text">パスワードお忘れの方は管理者までご連絡ください</p>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<div class="info-title">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<line x1="12" y1="16" x2="12" y2="12" />
|
||||
<line x1="12" y1="8" x2="12.01" y2="8" />
|
||||
</svg>
|
||||
ご利用にあたって
|
||||
</div>
|
||||
<ul>
|
||||
<li>当システムの利用は、当社の業務に関連する方に限定されています。</li>
|
||||
<li>不正なアクセスや利用は、社内規程に基づき厳正に対処します。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function togglePassword() {
|
||||
const input = document.getElementById('password');
|
||||
input.type = (input.type === 'password') ? 'text' : 'password';
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
18
src/main/resources/templates/topmenu.html
Normal file
18
src/main/resources/templates/topmenu.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>トップメニュー - ShareBooks</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>
|
||||
テスト
|
||||
</h1>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user