Compare commits
2 Commits
47947636a1
...
dd8fc3151f
| Author | SHA1 | Date | |
|---|---|---|---|
| dd8fc3151f | |||
| 2687c00f35 |
@@ -1,90 +1,113 @@
|
||||
body
|
||||
{font-family:
|
||||
"Meiryo","Hiragino Sans",sans-serif;
|
||||
margin:0;color:#222;
|
||||
background:#f6f7f9}
|
||||
header.top
|
||||
{display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
background:#176a78;color:#fff;
|
||||
padding:10px 20px
|
||||
/* ----------------------------------------------------
|
||||
Login Layout & Animation Styles (Updated)
|
||||
---------------------------------------------------- */
|
||||
body {
|
||||
font-family: "Meiryo", "Hiragino Sans", sans-serif;
|
||||
margin: 0;
|
||||
color: #222;
|
||||
background: #f6f7f9;
|
||||
}
|
||||
header.top form
|
||||
{display:inline;
|
||||
margin:0}
|
||||
header.top .user
|
||||
{margin-right:12px
|
||||
header.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #176a78;
|
||||
color: #fff;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
main
|
||||
{max-width:960px;
|
||||
margin:24px auto;
|
||||
padding:0 16px
|
||||
header.top form { display: inline; margin: 0; }
|
||||
header.top .user { margin-right: 12px; }
|
||||
main { max-width: 960px; margin: 24px auto; padding: 0 16px; }
|
||||
h1 { font-size: 20px; }
|
||||
.card { background: #fff; border: 1px solid #dde; border-radius: 6px; padding: 20px; margin-bottom: 16px; }
|
||||
label { display: block; margin: 10px 0 4px; font-weight: bold; }
|
||||
input[type=text], input[type=password], input[type=email] { width: 100%; max-width: 360px; padding: 6px; box-sizing: border-box; }
|
||||
button, .btn { display: inline-block; background: #176a78; color: #fff; border: 0; border-radius: 4px; padding: 7px 16px; cursor: pointer; text-decoration: none; font-size: 14px; }
|
||||
button.sub, .btn.sub { background: #6b7b80; }
|
||||
.error { background: #fdecea; color: #b3261e; border: 1px solid #f5c2be; padding: 8px 12px; border-radius: 4px; margin-bottom: 12px; }
|
||||
.info { background: #e8f4ea; color: #1b5e20; border: 1px solid #bfdcc3; padding: 8px 12px; border-radius: 4px; margin-bottom: 12px; }
|
||||
table { border-collapse: collapse; width: 100%; background: #fff; }
|
||||
th, td { border: 1px solid #dde; padding: 6px 8px; text-align: left; font-size: 14px; }
|
||||
th { background: #eaf4f6; }
|
||||
.menu a { display: block; margin: 8px 0; }
|
||||
|
||||
/* Flexbox Layout: ဘယ်ဘက် Icon နှင့် ညာဘက် Login အချက်အလက်များ ဘေးချင်းယှဉ်ရန် */
|
||||
.login-container-flex {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 35px; /* Icon နှင့် Form ကြား အကွာအဝေး */
|
||||
}
|
||||
h1
|
||||
{font-size:20px
|
||||
|
||||
/* ဘယ်ဘက်ခြမ်း Icon Box Styling */
|
||||
.avatar-box {
|
||||
flex-shrink: 0;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
background: #eaf4f6;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.4s ease;
|
||||
cursor: pointer;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.card
|
||||
{background:#fff;
|
||||
border:1px solid #dde;
|
||||
border-radius:6px;
|
||||
padding:20px;
|
||||
margin-bottom:16px
|
||||
|
||||
.avatar-box:hover {
|
||||
transform: scale(1.08);
|
||||
background: #d5edf1;
|
||||
}
|
||||
label
|
||||
{display:block;
|
||||
margin:10px 0 4px;
|
||||
font-weight:bold
|
||||
|
||||
/* ညာဘက်ခြမ်း Form Area ကို အပြည့်အသုံးပြုရန် */
|
||||
.form-content-area {
|
||||
flex-grow: 1;
|
||||
}
|
||||
input[type=text],input[type=password],input[type=email]
|
||||
{width:100%;
|
||||
max-width:360px;
|
||||
padding:6px;
|
||||
box-sizing:border-box
|
||||
|
||||
/* 1. FALSE / ERROR State (တုန်ခါမည်) */
|
||||
.card.shake {
|
||||
animation: shake 0.4s ease-in-out;
|
||||
}
|
||||
button,.btn
|
||||
{display:inline-block;
|
||||
background:#176a78;
|
||||
color:#fff;border:0;
|
||||
border-radius:4px;
|
||||
padding:7px 16px;
|
||||
cursor:pointer;
|
||||
text-decoration:none;
|
||||
font-size:14px
|
||||
|
||||
.avatar-box.error-state {
|
||||
background: #fdecea !important;
|
||||
animation: pulseError 0.4s ease-in-out;
|
||||
}
|
||||
button.sub,.btn.sub
|
||||
{background:#6b7b80
|
||||
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
20%, 60% { transform: translateX(-8px); }
|
||||
40%, 80% { transform: translateX(8px); }
|
||||
}
|
||||
.error
|
||||
{background:#fdecea;color:#b3261e;
|
||||
border:1px solid #f5c2be;
|
||||
padding:8px 12px;
|
||||
border-radius:4px;
|
||||
margin-bottom:12px
|
||||
|
||||
@keyframes pulseError {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.15); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
.info
|
||||
{background:#e8f4ea;
|
||||
color:#1b5e20;
|
||||
border:1px solid #bfdcc3;
|
||||
padding:8px 12px;
|
||||
border-radius:4px;
|
||||
margin-bottom:12px
|
||||
|
||||
/* 2. TRUE / SUCCESS State (အောင်မြင်မှု Animation) */
|
||||
.avatar-box.success-state {
|
||||
background: #e8f4ea !important;
|
||||
animation: successFly 0.6s ease-in-out forwards;
|
||||
}
|
||||
table
|
||||
{border-collapse:collapse;
|
||||
width:100%;
|
||||
background:#fff
|
||||
|
||||
@keyframes successFly {
|
||||
0% { transform: scale(1); }
|
||||
40% { transform: scale(1.2) translateY(-8px); }
|
||||
100% { transform: scale(0.9) translateY(-20px); opacity: 0.8; }
|
||||
}
|
||||
th,td
|
||||
{border:1px solid #dde;
|
||||
padding:6px 8px;
|
||||
text-align:left;
|
||||
font-size:14px
|
||||
}
|
||||
th
|
||||
{background:#eaf4f6
|
||||
}
|
||||
.menu a
|
||||
{display:block;
|
||||
margin:8px 0
|
||||
|
||||
/* Responsive (ဖုန်းစခရင်သေးများတွင် အောက်သို့ ဆင်းသွားစေရန်) */
|
||||
@media (max-width: 600px) {
|
||||
.login-container-flex {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.form-content-area {
|
||||
width: 100%;
|
||||
}
|
||||
input[type=text], input[type=password], input[type=email] {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
@@ -1,123 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ログイン</title>
|
||||
<link rel="stylesheet" th:href="@{/css/style.css}">
|
||||
<meta charset="UTF-8">
|
||||
<title>ログイン</title>
|
||||
|
||||
<!-- Lordicon Script -->
|
||||
<script src="https://cdn.lordicon.com/lordicon.js"></script>
|
||||
|
||||
<link rel="stylesheet" th:href="@{/css/style.css}">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<h1>書籍貸出管理システム</h1>
|
||||
<div class="card">
|
||||
<h2>ログイン</h2>
|
||||
<div class="error" th:if="${errorMessage}" th:text="${errorMessage}"></div>
|
||||
<form th:action="@{/login}" method="post">
|
||||
<label for="mailAddress">メールアドレス</label>
|
||||
<input type="text" id="mailAddress" name="mailAddress" th:value="${mailAddress}"
|
||||
autocomplete="username">
|
||||
<label for="password">パスワード</label>
|
||||
<input type="password" id="password" name="password" autocomplete="current-password">
|
||||
<p><button type="submit">ログイン</button></p>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
<main>
|
||||
<h1>書籍貸出管理システム</h1>
|
||||
<div class="card" id="loginCard">
|
||||
|
||||
<!-- Main Flex Container: ဘယ်ဘက် Icon နှင့် ညာဘက် Form Area ကို ဘေးချင်းယှဉ်ရန် -->
|
||||
<div class="login-container-flex">
|
||||
|
||||
<!-- ဘယ်ဘက်ခြမ်းရှိ Lordicon Avatar Box -->
|
||||
<div class="avatar-box" id="avatarBox">
|
||||
<lord-icon
|
||||
id="lordIcon"
|
||||
src="https://cdn.lordicon.com/dxjqoygy.json"
|
||||
trigger="hover"
|
||||
colors="primary:#176a78,secondary:#08a88a"
|
||||
style="width:90px;height:90px">
|
||||
</lord-icon>
|
||||
</div>
|
||||
|
||||
<!-- ညာဘက်ခြမ်းရှိ Login Content (ခေါင်းစဉ်နှင့် Form အားလုံး ပါဝင်သည်) -->
|
||||
<div class="form-content-area">
|
||||
<h2>ログイン</h2>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div class="error" th:if="${errorMessage}" th:text="${errorMessage}"></div>
|
||||
|
||||
<form th:action="@{/login}" method="post" id="loginForm">
|
||||
<label for="mailAddress">メールアドレス</label>
|
||||
<input type="text" id="mailAddress" name="mailAddress" th:value="${mailAddress}" autocomplete="username">
|
||||
|
||||
<label for="password">パスワード</label>
|
||||
<input type="password" id="password" name="password" autocomplete="current-password">
|
||||
|
||||
<p><button type="submit">ログイン</button></p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const loginCard = document.getElementById('loginCard');
|
||||
const lordIcon = document.getElementById('lordIcon');
|
||||
const avatarBox = document.getElementById('avatarBox');
|
||||
const errorDiv = document.querySelector('.error');
|
||||
const loginForm = document.getElementById('loginForm');
|
||||
|
||||
// 1. Icon နှိပ်လျှင် Animation လှုပ်ရှားရန်
|
||||
if (lordIcon) {
|
||||
lordIcon.addEventListener('click', () => {
|
||||
lordIcon.setAttribute('trigger', 'morph');
|
||||
setTimeout(() => {
|
||||
lordIcon.setAttribute('trigger', 'hover');
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
// 2. Login မှားယွင်းသောအခါ (False / Error) -> Card Shake Animation & Icon Color Change
|
||||
if (errorDiv) {
|
||||
loginCard.classList.add('shake');
|
||||
if (avatarBox) {
|
||||
avatarBox.classList.add('error-state');
|
||||
}
|
||||
if (lordIcon) {
|
||||
lordIcon.setAttribute('colors', 'primary:#b3261e,secondary:#f5c2be');
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Login နှိပ်လိုက်ချိန် (True / Success Animation State)
|
||||
if (loginForm) {
|
||||
loginForm.addEventListener('submit', function(e) {
|
||||
if (avatarBox && lordIcon) {
|
||||
avatarBox.classList.add('success-state');
|
||||
lordIcon.setAttribute('colors', 'primary:#1b5e20,secondary:#81c784');
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<!--<!DOCTYPE html>-->
|
||||
<!--<html xmlns:th="http://www.thymeleaf.org">-->
|
||||
|
||||
<!--<head>-->
|
||||
<!-- <meta charset="UTF-8">-->
|
||||
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
|
||||
|
||||
<!-- 外部スクリプトの読み込み -->
|
||||
<!-- <script th:src="@{/js/common.js}"></script>-->
|
||||
|
||||
<!-- CSSの読み込み -->
|
||||
<!-- <link rel="stylesheet" th:href="@{/css/all.css}" type="text/css">-->
|
||||
<!-- <link rel="stylesheet" th:href="@{/css/style.css}" type="text/css">-->
|
||||
|
||||
<!-- <title>ログイン</title>-->
|
||||
<!--<head>>-->
|
||||
<!-- <meta charset="UTF-8">-->
|
||||
<!-- <title>ログイン</title>-->
|
||||
<!-- <link rel="stylesheet" th:href="@{/css/style.css}">-->
|
||||
<!--</head>-->
|
||||
|
||||
<!--<body>-->
|
||||
|
||||
<!-- <div class="loginContainer">-->
|
||||
|
||||
<!-- <h1>ログイン</h1>-->
|
||||
|
||||
<!-- <form th:action="@{/doLogin}"-->
|
||||
<!-- method="post"-->
|
||||
<!-- th:object="${loginInfoForm}">-->
|
||||
|
||||
<!-- エラーメッセージ -->
|
||||
<!-- <div class="msgBox error"-->
|
||||
<!-- th:if="${messageError != null}">-->
|
||||
<!-- <span class="error"-->
|
||||
<!-- th:text="${messageError.message}"></span>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <table>-->
|
||||
<!-- メールアドレス -->
|
||||
<!-- <tr>-->
|
||||
<!-- <th class="header">メールアドレス</th>-->
|
||||
<!-- <td>-->
|
||||
<!-- <input-->
|
||||
<!-- id="mailAddress"-->
|
||||
<!-- type="text"-->
|
||||
<!-- th:field="*{mailAddress}"-->
|
||||
<!-- placeholder="メールアドレス"-->
|
||||
<!-- required-->
|
||||
<!-- />-->
|
||||
<!-- </td>-->
|
||||
<!-- </tr>-->
|
||||
|
||||
<!-- パスワード -->
|
||||
<!-- <tr>-->
|
||||
<!-- <th class="header">パスワード</th>-->
|
||||
<!-- <td>-->
|
||||
<!-- <input-->
|
||||
<!-- id="password"-->
|
||||
<!-- type="password"-->
|
||||
<!-- th:field="*{password}"-->
|
||||
<!-- placeholder="パスワード"-->
|
||||
<!-- required-->
|
||||
<!-- />-->
|
||||
<!-- </td>-->
|
||||
<!-- </tr>-->
|
||||
|
||||
<!-- ボタン -->
|
||||
<!-- <tr>-->
|
||||
<!-- <td class="btnArea" colspan="2">-->
|
||||
<!-- <input-->
|
||||
<!-- type="submit"-->
|
||||
<!-- value="ログイン"-->
|
||||
<!-- />-->
|
||||
|
||||
<!-- <button-->
|
||||
<!-- type="button"-->
|
||||
<!-- onclick="clearInput()">-->
|
||||
<!-- リセット-->
|
||||
<!-- </button>-->
|
||||
<!-- </td>-->
|
||||
<!-- </tr>-->
|
||||
<!-- </table>-->
|
||||
|
||||
<!-- </form>-->
|
||||
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- 入力内容のリセット -->
|
||||
<!-- <script>-->
|
||||
<!-- function clearInput() {-->
|
||||
<!-- document.getElementById('mailAddress').value = '';-->
|
||||
<!-- document.getElementById('password').value = '';-->
|
||||
<!-- }-->
|
||||
<!-- </script>-->
|
||||
|
||||
<!--<main>-->
|
||||
<!-- <h1>書籍貸出管理システム</h1>-->
|
||||
<!-- <div class="card">-->
|
||||
<!-- <h2>ログイン</h2>-->
|
||||
<!-- <div class="error" th:if="${errorMessage}" th:text="${errorMessage}"></div>-->
|
||||
<!-- <form th:action="@{/login}" method="post">-->
|
||||
<!-- <label for="mailAddress">メールアドレス</label>-->
|
||||
<!-- <input type="text" id="mailAddress" name="mailAddress" th:value="${mailAddress}" autocomplete="username">-->
|
||||
<!-- <label for="password">パスワード</label>-->
|
||||
<!-- <input type="password" id="password" name="password" autocomplete="current-password">-->
|
||||
<!-- <p><button type="submit">ログイン</button></p>-->
|
||||
<!-- </form>-->
|
||||
<!-- </div>-->
|
||||
<!--</main>-->
|
||||
<!--</body>-->
|
||||
<!--</html>-->
|
||||
Reference in New Issue
Block a user