[EDIT]スマホ画面のデザインに統一しました

This commit is contained in:
2026-09-24 15:18:15 +09:00
parent 87fbc67a02
commit ab2bb89d24
20 changed files with 1275 additions and 669 deletions

View File

@@ -1,6 +1,7 @@
body {
margin: 0;
padding: 0;
padding-top:80px;
padding-bottom:120px;
}
#calendar {

View File

@@ -4,17 +4,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>分析画面</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body class="pb-5 pt-5">
<body>
<div th:replace="~{header :: header}">
</div>
<div class="container mt-4">
<h2 class="text-center">支出分析</h2>
<div class="main-container">
<h2 class="page-title">支出分析</h2>
<div class="text-center">
<div class="calendar-title">
<a class="month-button" th:href="@{/analysis(year=${previousYear}, month=${previousMonth})}">
←
@@ -49,8 +50,8 @@
? '+' + ${analysisForm.totalDifferenceAmount}
: ${analysisForm.totalDifferenceAmount}"
th:class="${analysisForm.totalDifferenceAmount >= 0}
? 'color-danger;'
: 'color-primary;'">
? 'text-danger'
: 'text-primary'">
0
</td>
</tr>
@@ -84,16 +85,16 @@
? '+' + ${category.monthDifferenceAmount}
: ${category.monthDifferenceAmount}"
th:class="${category.monthDifferenceAmount >= 0}
? 'color-danger;'
: 'color-primary;'">
? 'text-danger'
: 'text-primary'">
</span>
<br>
<span th:text="${category.courseDifferenceAmount >= 0}
? '+' + ${category.courseDifferenceAmount}
: ${category.courseDifferenceAmount}"
th:class="${category.courseDifferenceAmount >= 0}
? 'color-danger;'
: 'color-primary;'">
? 'text-danger'
: 'text-primary'">
</span>
</td>
</tr>

View File

@@ -2,59 +2,122 @@
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>認証</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body class="pb-5 pt-5">
<div th:replace="~{header :: header}">
</div>
<main>
<h1>本人認証確認</h1>
<form th:action="@{/authentication}" th:object="${authenticationForm}" method="post">
<div>
<label for="mailAddress">メールアドレス</label>
<input type="email" id="mailAddress" th:field="*{mailAddress}">
</div>
<div>
<label for="secretQuestionId">秘密の質問</label>
<select id="secretQuestionId" th:field="*{secretQuestionId}">
<option value="">選択してください</option>
<option th:each="question : ${questionList}" th:value="${question.secretQuestionId}"
th:text="${question.questionText}">
</option>
</select>
</div>
<div>
<label for="secretAnswer">秘密の質問の回答</label>
<input type="text" id="secretAnswer" th:field="*{secretAnswer}">
</div>
<button type="submit">確認</button>
</form>
<form th:action="@{/login}" method="get">
<button type="submit">戻る</button>
</form>
</main>
<script th:if="${errorMessage}" th:inline="javascript">
alert(/*[[${errorMessage}]]*/);
</script>
<body style="padding-top:80px; padding-bottom:80px;">
<div th:replace="~{header :: header}">
</div>
<div class="main-container">
<h1 class="page-title">
本人認証
</h1>
<div class="card shadow-sm">
<div class="card-body">
<form th:action="@{/authentication}"
th:object="${authenticationForm}"
method="post">
<div class="mb-3">
<label for="mailAddress"
class="form-label">
メールアドレス
</label>
<input type="email"
id="mailAddress"
class="form-control"
th:field="*{mailAddress}"
required>
</div>
<div class="mb-3">
<label for="secretQuestionId"
class="form-label">
秘密の質問
</label>
<select id="secretQuestionId"
class="form-select"
th:field="*{secretQuestionId}">
<option value="">
選択してください
</option>
<option th:each="question : ${questionList}"
th:value="${question.secretQuestionId}"
th:text="${question.questionText}">
</option>
</select>
</div>
<div class="mb-3">
<label for="secretAnswer"
class="form-label">
秘密の質問の回答
</label>
<input type="text"
id="secretAnswer"
class="form-control"
th:field="*{secretAnswer}"
required>
</div>
<div class="d-grid gap-2">
<button type="submit"
class="btn btn-primary">
確認
</button>
</div>
</form>
</div>
</div>
<div class="d-grid mt-3">
<form th:action="@{/login}"
method="get">
<button type="submit"
class="btn btn-outline-secondary w-100">
戻る
</button>
</form>
</div>
</div>
<script th:if="${errorMessage}"
th:inline="javascript">
alert(/*[[${errorMessage}]]*/);
</script>
</body>
</html>

View File

@@ -4,10 +4,11 @@
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>フッター</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<footer th:fragment="footer" class="fixed-bottom border-top py-2" style="background-color:#E3F2FD;">
<footer th:fragment="footer" class="fixed-bottom border-top py-2 app-footer" style="background-color:#E3F2FD;">
<nav data-bs-theme="light">
<div class="card-footer text-center">

View File

@@ -1,43 +1,55 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>目標編集</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body class="pb-5 pt-5">
<body style="padding-top:80px; padding-bottom:80px;">
<div th:replace="~{header :: header}"></div>
<div class="main-container">
<h1>目標編集</h1>
<h1 class="page-title">目標編集</h1>
<div class="card shadow-sm">
<div class="card-body">
<form th:action="@{/goal/update}" th:object="${goalForm}" method="post">
<input type="hidden" th:field="*{goalId}">
<form th:action="@{/goal/update}" th:object="${goalForm}" method="post">
<input type="hidden" th:field="*{goalId}">
<div>
<label>目標名</label>
<input type="text" th:field="*{goalTitle}" required>
</div>
<div>
<label>目標名</label>
<input type="text" th:field="*{goalTitle}" required>
<div>
<label>目標説明</label>
<textarea th:field="*{goalSubtitle}" required></textarea>
</div>
<div>
<label>目標金額</label>
<input type="number" th:field="*{targetAmount}" required min="1">
</div>
<div>
<label>目標達成期限</label>
<input type="date" th:field="*{deadline}" th:min="${#temporals.format(#temporals.createNow(), 'yyyy-MM-dd')}" required>
</div>
</form>
</div>
<div>
<label>目標説明</label>
<textarea th:field="*{goalSubtitle}" required></textarea>
</div>
<div>
<label>目標金額</label>
<input type="number" th:field="*{targetAmount}" required min="1">
</div>
<div>
<label>目標達成期限</label>
<input type="date" th:field="*{deadline}" th:min="${#temporals.format(#temporals.createNow(), 'yyyy-MM-dd')}" required>
</div>
<button type="submit">更新する</button>
</form>
</div>
<button type="submit" class="btn btn-sm btn-primary w-100">更新する</button>
</div>
<div th:replace="~{footer :: footer}"></div>

View File

@@ -1,19 +1,22 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>目標詳細</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body class="pb-5 pt-5">
<body style="padding-top:80px; padding-bottom:80px;">
<div th:replace="~{header :: header}"></div>
<h1>目標詳細</h1>
<div class="main-container">
<h1 class="page-title">目標詳細</h1>
<table>
<table class="table">
<tr>
<th>目標名</th>
<td th:text="${goalForm.goalTitle}"></td>
@@ -40,7 +43,9 @@
</table>
<a th:href="@{/goal/edit}">編集する</a>
<a th:href="@{/goal/edit}" class="btn btn-sm btn-primary w-100">編集する</a>
</div>
<div th:replace="~{footer :: footer}"></div>

View File

@@ -4,12 +4,13 @@
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>ヘッダー</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<header th:fragment="header" class="fixed-top">
<nav class="navbar" style="background-color: #e3f2fd;" data-bs-theme="light">
<nav class="navbar app-header" style="background-color: #e3f2fd;" data-bs-theme="light">
<div class="container-fluid">
<a th:href="@{/menu}" class="navbar-brand fw-bold">Monegement</a>
<div class="d-flex gap-2">

View File

@@ -1,50 +1,101 @@
<!DOCTYPE html>
<html lang="ja"xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>ログイン</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body class="pb-5 pt-5">
<div th:replace="~{header :: header}">
</div>
<main>
<h1>ログイン</h1>
<div th:if="${errorMessage}" th:text="${errorMessage}"></div>
<form th:action="@{/login}" th:object="${loginForm}" method="post">
<div>
<label for="mailAddress">メールアドレス</label>
<input type="email"
id="mailAddress"
th:field="*{mailAddress}"
required>
</div>
<div>
<label for="password">パスワード</label>
<input type="password"
id="password"
th:field="*{password}"
required>
</div>
<div>
<button type="submit">ログイン</button>
</div>
</form>
<div>
<a th:href="@{user/register}">新規会員登録</a>
</div>
<div>
<a th:href="@{/authentication}">パスワードを忘れた方</a>
</div>
</main>
<body style="padding-top:80px; padding-bottom:80px;">
<div th:replace="~{header :: header}">
</div>
<div class="main-container">
<h1 class="page-title">
ログイン
</h1>
<div class="card shadow-sm">
<div class="card-body">
<div th:if="${errorMessage}"
class="alert alert-danger">
<span th:text="${errorMessage}">
</span>
</div>
<form th:action="@{/login}"
th:object="${loginForm}"
method="post">
<div class="mb-3">
<label for="mailAddress"
class="form-label">
メールアドレス
</label>
<input type="email"
id="mailAddress"
class="form-control"
th:field="*{mailAddress}"
required>
</div>
<div class="mb-3">
<label for="password"
class="form-label">
パスワード
</label>
<input type="password"
id="password"
class="form-control"
th:field="*{password}"
required>
</div>
<div class="d-grid">
<button type="submit"
class="btn btn-primary">
ログイン
</button>
</div>
</form>
</div>
</div>
<div class="text-center mt-3">
<a th:href="@{/user/register}">
新規会員登録
</a>
</div>
<div class="text-center mt-2">
<a th:href="@{/authentication}">
パスワードを忘れた方
</a>
</div>
</div>
</body>
</html>

View File

@@ -8,13 +8,13 @@
<title>Calendar</title>
<link rel="stylesheet" th:href="@{/css/menu.css}">
<link rel="stylesheet" th:href="@{/css/style.css}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="pb-5 pt-5">
<body>
<div th:replace="~{header :: header}"></div>
@@ -97,51 +97,67 @@
</table>
<div class="total">
<div class="card shadow-sm mb-3">
<div>
<span>収入:</span>
<span th:text="${totalIncome}"></span>
<span>円</span>
</div>
<div class="card-body">
<div>
<span>支出:</span>
<span th:text="${totalExpense}"></span>
<span>円</span>
</div>
<div class="d-flex justify-content-between mb-2">
<span>収入</span>
<span th:text="'¥' + ${totalIncome}"></span>
</div>
</div>
<div class="d-flex justify-content-between">
<span>支出</span>
<span th:text="'¥' + ${totalExpense}"></span>
</div>
</div>
<div>
<span>目標貯金</span>
<span th:text="${targetAmount}"></span>
<span>円</span>
</div>
<div>
<span>現在高</span>
<span th:text="${currentAmount}"></span>
<span>円</span>
</div>
<hr class="border border-primary border-2 opacity-50">
<div class="card shadow-sm mb-3">
<div class="card-body">
<div class="d-flex justify-content-between mb-2">
<span>目標資金</span>
<span th:text="'¥' + ${targetAmount}"></span>
</div>
<div class="d-flex justify-content-between mb-2">
<span>現在高</span>
<span th:text="'¥' + ${currentAmount}"></span>
</div>
<div class="d-flex justify-content-between">
<span>貯金額</span>
<span th:text="'¥' + ${saving}"></span>
</div>
</div>
<div>
<span>貯金額</span>
<span th:text="${saving}"></span>
<span>円</span>
</div>
<hr>
<div>
<span>達成率</span>
<span th:text="${achievementRate}"></span>
<span>%</span>
</div>
<div>
<span>達成期限</span>
<span th:text="${deadline}"></span>
<span>円</span>
<div class="card shadow-sm">
<div class="card-body">
<div class="d-flex justify-content-between mb-2">
<span>達成率</span>
<span th:text="${achievementRate} + '%'"
class="badge bg-success">
</span>
</div>
<div class="d-flex justify-content-between">
<span>達成期限</span>
<span th:text="${deadline}"></span>
</div>
</div>
</div>
<div th:replace="~{footer :: footer}"></div>

View File

@@ -1,46 +1,91 @@
<!DOCTYPE html>
<html lang="ja"xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>パスワード再設定</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<!--<body class="pb-5 pt-5">-->
<!-- <div th:replace="~{header :: header}">-->
<!-- </div>-->
<main>
<h1>パスワード再設定</h1>
<form th:action="@{/password/reset}" th:object="${passwordResetForm}" method="post">
<div>
<label for="password">新しいパスワード</label>
<input type="password"
id="password"
th:field="*{password}"
minlength="8"
maxlength="255"
required>
</div>
<div>
<label for="passwordConfirm">パスワード確認</label>
<input type="password"
id="passwordConfirm"
th:field="*{passwordConfirm}"
minlength="8"
maxlength="255"
required>
</div>
<button type="submit">再設定</button>
</form>
<div th:if="${Message}">
<p th:text="${Message}"></p>
</div>
</main>
<body style="padding-top:80px; padding-bottom:80px;">
<div th:replace="~{header :: header}">
</div>
<div class="main-container">
<h1 class="page-title">
パスワード再設定
</h1>
<div class="card shadow-sm">
<div class="card-body">
<form th:action="@{/password/reset}"
th:object="${passwordResetForm}"
method="post">
<div class="mb-3">
<label for="password"
class="form-label">
新しいパスワード
</label>
<input type="password"
id="password"
class="form-control"
th:field="*{password}"
minlength="8"
maxlength="255"
required>
</div>
<div class="mb-3">
<label for="passwordConfirm"
class="form-label">
パスワード確認
</label>
<input type="password"
id="passwordConfirm"
class="form-control"
th:field="*{passwordConfirm}"
minlength="8"
maxlength="255"
required>
</div>
<div class="d-grid">
<button type="submit"
class="btn btn-primary">
再設定
</button>
</div>
</form>
</div>
</div>
<div th:if="${Message}"
class="alert alert-danger mt-3">
<span th:text="${Message}">
</span>
</div>
</div>
</body>
</html>

View File

@@ -1,69 +1,110 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>プロフィール</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body class="pb-5 pt-5">
<body>
<div th:replace="~{header :: header}">
</div>
<main>
<div>
<p>氏名</p>
<p th:text="${profileForm.userName}"></p>
</div>
<div class="main-container">
<h2 class="page-title">
プロフィール
</h2>
<div class="card shadow-sm">
<div class="card-body">
<table class="table mb-0">
<tbody>
<tr>
<th>氏名</th>
<td th:text="${profileForm.userName}"></td>
</tr>
<tr>
<th>メールアドレス</th>
<td th:text="${profileForm.mailAddress}"></td>
</tr>
<tr>
<th>生年月日</th>
<td th:text="${profileForm.birthDate}"></td>
</tr>
<tr>
<th>貯蓄金</th>
<td th:text="'¥' + ${profileForm.saving}"></td>
</tr>
<tr>
<th>年収</th>
<td th:text="'¥' + ${profileForm.annualIncome}"></td>
</tr>
<tr>
<th>月別使用可能額</th>
<td th:text="'¥' + ${profileForm.monthlyBudget}"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<p>メールアドレス</p>
<p th:text="${profileForm.mailAddress}"></p>
</div>
<div>
<p>生年月日</p>
<p th:text="${profileForm.birthDate}"></p>
</div>
<div>
<p>パスワード</p>
<form th:action="@{/password/reset}" method="get">
<button type="submit">パスワード再設定</button>
</form>
</div>
<div>
<p>貯蓄金</p>
<p th:text="${profileForm.saving}"></p>
</div>
<div>
<p>年収</p>
<p th:text="${profileForm.annualIncome}"></p>
</div>
<div>
<p>月別使用可能額</p>
<p th:text="${profileForm.monthlyBudget}"></p>
</div>
<div>
<form th:action="@{/profile/edit}" method="get">
<button type="submit">編集</button>
</form>
</div>
<form th:action="@{/logout}" method="post">
<button type="submit">ログアウト</button>
</form>
<form th:action="@{/withdraw}" method="post"
onsubmit="return confirm('本当に脱退しますか?');">
<button type="submit">脱退</button>
</form>
</main>
<div class="d-grid gap-2 mt-4">
<form th:action="@{/profile/edit}" method="get">
<button class="btn btn-primary w-100"
type="submit">
編集
</button>
</form>
<form th:action="@{/password/reset}" method="get">
<button class="btn btn-outline-primary w-100"
type="submit">
パスワード再設定
</button>
</form>
<form th:action="@{/logout}" method="post">
<button class="btn btn-secondary w-100"
type="submit">
ログアウト
</button>
</form>
<form th:action="@{/withdraw}"
method="post"
onsubmit="return confirm('本当に脱退しますか?');">
<button class="btn btn-danger w-100"
type="submit">
脱退
</button>
</form>
</div>
<div th:replace="~{footer :: footer}">
</div>

View File

@@ -1,72 +1,116 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>プロフィール編集</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body class="pb-5 pt-5">
<body>
<div th:replace="~{header :: header}">
</div>
<main>
<h1>プロフィール編集</h1>
<form th:action="@{/profile/edit}"th:object="${profileEditForm}"method="post">
<div>
<label>氏名</label>
<input type="text"
th:field="*{userName}"
maxlength="100"
required>
</div>
<div>
<label>メールアドレス</label>
<input type="email"
th:field="*{mailAddress}"
maxlength="255"
required>
</div>
<div>
<label>パスワード</label>
<input type="password"
value="********"
disabled>
</div>
<div>
<label>貯蓄金</label>
<input type="number"
th:field="*{saving}"
min="0"
required>
</div>
<div>
<label>年収</label>
<input type="number"
th:field="*{annualIncome}"
min="0"
required>
</div>
<div>
<label>月別使用可能額</label>
<input type="number"
th:field="*{monthlyBudget}"
min="0"
required>
</div>
<div>
<button type="submit">確認</button>
</div>
</form>
</main>
<div class="main-container">
<h1 class="page-title">
プロフィール編集
</h1>
<div class="card shadow-sm">
<form th:action="@{/profile/edit}"
th:object="${profileEditForm}"
method="post">
<div class="card-body">
<div class="mb-3">
<label class="form-label">
氏名
</label>
<input type="text"
class="form-control"
th:field="*{userName}"
maxlength="100"
required>
</div>
<div class="mb-3">
<label class="form-label">
メールアドレス
</label>
<input type="email"
class="form-control"
th:field="*{mailAddress}"
maxlength="255"
required>
</div>
<div class="mb-3">
<label class="form-label">
パスワード
</label>
<input type="password"
class="form-control"
value="********"
disabled>
</div>
<div class="mb-3">
<label class="form-label">
貯蓄金
</label>
<input type="number"
class="form-control"
th:field="*{saving}"
min="0"
required>
</div>
<div class="mb-3">
<label class="form-label">
年収
</label>
<input type="number"
class="form-control"
th:field="*{annualIncome}"
min="0"
required>
</div>
<div class="mb-3">
<label class="form-label">
月別使用可能額
</label>
<input type="number"
class="form-control"
th:field="*{monthlyBudget}"
min="0"
required>
</div>
</div>
<div class="d-grid">
<button type="submit"
class="btn btn-primary">
確認
</button>
</div>
</form>
</div>
</div>
<div th:replace="~{footer :: footer}">
</div>

View File

@@ -4,17 +4,18 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
<title>コース選択</title>
</head>
<body>
<body style="padding-top:80px; padding-bottom:80px;">
<div th:replace="~{header :: header}"></div>
<h1>コース選択</h1>
<h1 class="page-title">コース選択</h1>
<form th:action="${mode == 'regist'} ? @{/user/register/return}: @{/change}" method="post">
<button type="submit">確定</button>
<button type="submit" class="btn btn-primary">確定</button>
<div class="accordion" id="accordionExample">
<div class="accordion-item" th:each="course:${courseList}">
<h2 class="accordion-header d-flex align-items-center">

View File

@@ -2,70 +2,135 @@
<html>
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>Insert title here</title>
<link rel="stylesheet" th:href="@{/css/menu.css}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body class="pb-5 pt-5">
<body style="padding-top:80px; padding-bottom:80px;">
<div th:replace="~{header :: header}"></div>
<h1>取引登録</h1>
<div class="main-container">
<form th:action="@{/transaction/create}" th:object="${transactionForm}" method="post">
<h1 class="page-title">
取引登録
</h1>
<div>
<label for="transactionDate">日付</label>
<input type="date" id="transactionDate" name="transactionDate" th:value="*{transactionDate}">
</div>
<div class="card shadow-sm">
<br>
<div class="card-body">
<div>
<label for="transactionType">収入・支出</label>
<form th:action="@{/transaction/create}"
th:object="${transactionForm}"
method="post">
<select id="transactionType" th:field="*{transactionType}">
<div class="mb-3">
<option value="">選択してください</option>
<option value="1">支出</option>
<option value="2">収入</option>
<label for="transactionDate"
class="form-label">
日付
</label>
</select>
</div>
<input type="date"
id="transactionDate"
class="form-control"
th:field="*{transactionDate}">
<br>
</div>
<div>
<label for="categoryId">カテゴリ</label>
<div class="mb-3">
<select id="categoryId" th:field="*{categoryId}">
<label for="transactionType"
class="form-label">
収入・支出
</label>
<option value="">選択してください</option>
<select id="transactionType"
class="form-select"
th:field="*{transactionType}">
<option th:each="category : ${categoryFormList}" th:value="${category.categoryId}"
th:text="${category.categoryName}">
</option>
<option value="">
選択してください
</option>
</select>
</div>
<option value="1">
支出
</option>
<br>
<option value="2">
収入
</option>
<div>
<label for="amount">金額</label>
</select>
<input type="number" id="amount" th:field="*{amount}" min="0" placeholder="金額を入力してください">
</div>
</div>
<br>
<input type="hidden" name="today" id="today" th:value="${today}">
<div class="mb-3">
<button type="submit">登録</button>
<label for="categoryId"
class="form-label">
カテゴリ
</label>
</form>
<select id="categoryId"
class="form-select"
th:field="*{categoryId}">
<option value="">
選択してください
</option>
<option th:each="category : ${categoryFormList}"
th:value="${category.categoryId}"
th:text="${category.categoryName}">
</option>
</select>
</div>
<div class="mb-3">
<label for="amount"
class="form-label">
金額
</label>
<input type="number"
id="amount"
class="form-control"
th:field="*{amount}"
min="0"
placeholder="金額を入力してください">
</div>
<input type="hidden"
name="today"
th:value="${today}">
<div class="d-grid">
<button type="submit"
class="btn btn-primary">
登録
</button>
</div>
</form>
</div>
</div>
</div>
<div th:replace="~{footer :: footer}"></div>

View File

@@ -2,61 +2,109 @@
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>収支詳細</title>
<link rel="stylesheet" th:href="@{/css/transaction_detail.css}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body class="pb-5 pt-5">
<body>
<div th:replace="~{header :: header}"></div>
<h1 th:text="${today}"></h1>
<div class="main-container">
<div>
<ul>
<li th:each="transactionForm : ${transactionFormList}" class="transaction-item">
<h2 class="page-title"
th:text="${today}">
</h2>
<div>
<p>
カテゴリ名:
<span th:text="${transactionForm.categoryName}"></span>
<br>
金額:
<span th:text="${transactionForm.amount}"></span>
</p>
</div>
<div th:each="transactionForm : ${transactionFormList}"
class="card shadow-sm mb-3">
<div class="transaction-buttons">
<div class="card-body">
<form th:action="@{/transaction/delete}" method="post">
<input type="hidden" name="today" th:value="${today}">
<input type="hidden" name="transactionId" th:value="${transactionForm.transactionId}">
<button type="submit">削除</button>
</form>
<div class="d-flex justify-content-between">
<form th:action="@{/transaction/update}" method="get">
<input type="hidden" name="today" th:value="${today}">
<input type="hidden" name="transactionId" th:value="${transactionForm.transactionId}">
<button type="submit">編集</button>
</form>
<span class="fw-bold"
th:text="${transactionForm.categoryName}">
</span>
</div>
<span th:text="'¥' + ${transactionForm.amount}">
</span>
</div>
<div class="d-flex justify-content-end gap-2 mt-3">
<form th:action="@{/transaction/update}"
method="get">
<input type="hidden"
name="today"
th:value="${today}">
<input type="hidden"
name="transactionId"
th:value="${transactionForm.transactionId}">
<button class="btn btn-sm btn-primary"
type="submit">
編集
</button>
</form>
<form th:action="@{/transaction/delete}"
method="post">
<input type="hidden"
name="today"
th:value="${today}">
<input type="hidden"
name="transactionId"
th:value="${transactionForm.transactionId}">
<button class="btn btn-sm btn-danger"
type="submit">
削除
</button>
</form>
</div>
</div>
</div>
<div class="d-grid mt-4">
<form th:action="@{/transaction/create}"
method="get">
<input type="hidden"
name="today"
th:value="${today}">
<button class="btn btn-success w-100"
type="submit">
新規登録
</button>
</form>
</div>
<hr>
<hr>
</li>
</ul>
</div>
<form th:action="@{/transaction/create}" method="get">
<input type="hidden" name="today" id="today" th:value="${today}">
<button type="submit">新規登録</button>
</form>
<div th:replace="~{footer :: footer}"></div>
</body>

View File

@@ -2,17 +2,19 @@
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>一覧</title>
<link rel="stylesheet" th:href="@{/css/menu.css}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body class="pb-5 pt-5">
<body>
<div th:replace="~{header :: header}"></div>
<div class="main-container">
<div class="calendar-title">
<a class="month-button" th:href="@{/transaction/list(
@@ -40,20 +42,27 @@
<div th:each="transactionForm : ${transactionFormMap}">
<div th:each="transactionForm : ${transactionFormMap}"
th:if="${!transactionForm.value.isEmpty()}"
class="card shadow-sm mb-3">
<div class="card-body">
<a th:href="@{/transaction/detail(todayDates=${transactionForm.key})}">
<h3 th:text="${transactionForm.key}"></h3>
<a th:href="@{/transaction/detail(todayDates=${transactionForm.key})}" class="text-decoration-none">
<h3 th:text="${transactionForm.key}" class="fw-bold"></h3>
</a>
<ul>
<li th:each="transaction : ${transactionForm.value}">
<p>カテゴリ名:<span th:text="${transaction.categoryName}"></span>
<br>金額:<span th:text="${transaction.amount}"></span>
</p>
<hr />
</li>
</ul>
<div th:each="transaction : ${transactionForm.value}"
class="d-flex justify-content-between mb-2">
 
<span th:text="${transaction.categoryName}">
</span>
 
<span th:text="'¥' + ${transaction.amount}">
</span>
 
</div>
</div>
</div>
<div th:replace="~{footer :: footer}"></div>

View File

@@ -2,74 +2,139 @@
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" th:href="@{/css/menu.css}">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>取引更新</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body class="pb-5 pt-5">
<body style="padding-top:80px; padding-bottom:80px;">
<div th:replace="~{header :: header}"></div>
<div th:replace="~{header :: header}">
</div>
<h1>取引登録</h1>
<div class="main-container">
<form th:action="@{/transaction/update}" th:object="${transactionForm}" method="post">
<h1 class="page-title">
取引更新
</h1>
<input type="hidden" name="transactionId" th:value="${transactionId}">
<div>
<label for="transactionDate">日付</label>
<input type="date" id="transactionDate" name="transactionDate" th:value="*{transactionDate}">
</div>
<div class="card shadow-sm">
<br>
<div class="card-body">
<div>
<label for="transactionType">収入・支出</label>
<form th:action="@{/transaction/update}"
th:object="${transactionForm}"
method="post">
<select id="transactionType" th:field="*{transactionType}">
<input type="hidden"
name="transactionId"
th:value="${transactionId}">
<option value="">選択してください</option>
<option value="0">支出</option>
<option value="1">収入</option>
<input type="hidden"
name="today"
th:value="${today}">
</select>
</div>
<div class="mb-3">
<label for="transactionDate" class="form-label">
日付
</label>
<input type="date"
id="transactionDate"
class="form-control"
name="transactionDate"
th:value="*{transactionDate}">
</div>
<br>
<div class="mb-3">
<div>
<label for="categoryId">カテゴリ</label>
<label for="transactionType"
class="form-label">
収入・支出
</label>
<select id="categoryId" th:field="*{categoryId}">
<select id="transactionType"
class="form-select"
th:field="*{transactionType}">
<option value="">選択してください</option>
<option value="">
選択してください
</option>
<option th:each="category : ${categoryFormList}" th:value="${category.categoryId}"
th:text="${category.categoryName}">
</option>
<option value="0">
支出
</option>
</select>
</div>
<option value="1">
収入
</option>
<br>
</select>
<div>
<label for="amount">金額</label>
</div>
<input type="number" id="amount" th:field="*{amount}" min="0" placeholder="金額を入力してください">
</div>
<div class="mb-3">
<br>
<input type="hidden" name="today" id="today" th:value="${today}">
<label for="categoryId"
class="form-label">
カテゴリ
</label>
<button type="submit">登録</button>
<select id="categoryId"
class="form-select"
th:field="*{categoryId}">
</form>
<option value="">
選択してください
</option>
<div th:replace="~{footer :: footer}"></div>
<option th:each="category : ${categoryFormList}"
th:value="${category.categoryId}"
th:text="${category.categoryName}">
</option>
</select>
</div>
<div class="mb-4">
<label for="amount"
class="form-label">
金額
</label>
<input type="number"
id="amount"
class="form-control"
th:field="*{amount}"
min="0"
placeholder="金額を入力してください">
</div>
<div class="d-grid">
<button type="submit"
class="btn btn-primary">
更新
</button>
</div>
</form>
</div>
</div>
</div>
<div th:replace="~{footer :: footer}">
</div>
</body>

View File

@@ -1,128 +1,227 @@
<!DOCTYPE html>
<html lang="ja"xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>新規会員登録</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>新規会員登録</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet"
th:href="@{/css/style.css}">
</head>
<body class="pb-5 pt-5">
<div th:replace="~{header :: header}">
</div>
<main>
<h1>新規会員登録</h1>
<form th:action="@{/user/register/course}" th:object="${userForm}" method="post">
<div>
<label for="userName">氏名</label>
<input type="text"
id="userName"
th:field="*{userName}"
maxlength="100"
required>
</div>
<div>
<label for="mailAddress">メールアドレス</label>
<input type="email"
id="mailAddress"
th:field="*{mailAddress}"
maxlength="255"
required>
</div>
<div>
<label for="birthDate">生年月日</label>
<input type="date"
id="birthDate"
th:field="*{birthDate}"
required>
</div>
<div>
<label for="password">パスワード</label>
<input type="password"
id="password"
th:field="*{password}"
minlength="8"
maxlength="255"
required>
</div>
<div>
<label for="secretQuestionId">秘密の質問</label>
<select id="secretQuestionId"
th:field="*{secretQuestionId}"
required>
<option value="">選択してください</option>
<option th:each="question : ${session.questionList}"
th:value="${question.secretQuestionId}"
th:text="${question.questionText}">
</option>
</select>
</div>
<div>
<label for="secretAnswer">秘密の質問の回答</label>
<input type="text"
id="secretAnswer"
th:field="*{secretAnswer}"
maxlength="100"
required>
</div>
<div>
<label for="saving">貯蓄金</label>
<input type="number"
id="saving"
th:field="*{saving}"
min="0"
required>
</div>
<div>
<label for="annualIncome">年収</label>
<input type="number"
id="annualIncome"
th:field="*{annualIncome}"
min="0"
required>
</div>
<div>
<label for="monthlyBudget">月別使用可能金額</label>
<input type="number"
id="monthlyBudget"
th:field="*{monthlyBudget}"
min="0"
required>
</div>
<div>
<label for="goalId">目標</label>
<input type="number"
id="goalId"
th:field="*{goalId}"
min="0"
required>
</div>
<div>
<label>コース</label>
<input type="hidden" th:field="*{courseId}">
<button type="submit">コース選択</button>
</div>
<div>
<button type="submit">作成</button>
</div>
</form>
<form th:action="@{/login}" method="get">
<button type="submit">戻る</button>
</form>
</main>
<body style="padding-top:80px; padding-bottom:80px;">
<div th:replace="~{header :: header}">
</div>
<div class="main-container">
<h1 class="page-title">
新規会員登録
</h1>
<div class="card shadow-sm">
<div class="card-body">
<form th:action="@{/user/register/course}"
th:object="${userForm}"
method="post">
<div class="mb-3">
<label for="userName"
class="form-label">
氏名
</label>
<input type="text"
id="userName"
class="form-control"
th:field="*{userName}"
maxlength="100"
required>
</div>
<div class="mb-3">
<label for="mailAddress"
class="form-label">
メールアドレス
</label>
<input type="email"
id="mailAddress"
class="form-control"
th:field="*{mailAddress}"
maxlength="255"
required>
</div>
<div class="mb-3">
<label for="birthDate"
class="form-label">
生年月日
</label>
<input type="date"
id="birthDate"
class="form-control"
th:field="*{birthDate}"
required>
</div>
<div class="mb-3">
<label for="password"
class="form-label">
パスワード
</label>
<input type="password"
id="password"
class="form-control"
th:field="*{password}"
minlength="8"
maxlength="255"
required>
</div>
<div class="mb-3">
<label for="secretQuestionId"
class="form-label">
秘密の質問
</label>
<select id="secretQuestionId"
class="form-select"
th:field="*{secretQuestionId}"
required>
<option value="">
選択してください
</option>
<option th:each="question : ${session.questionList}"
th:value="${question.secretQuestionId}"
th:text="${question.questionText}">
</option>
</select>
</div>
<div class="mb-3">
<label for="secretAnswer"
class="form-label">
秘密の質問の回答
</label>
<input type="text"
id="secretAnswer"
class="form-control"
th:field="*{secretAnswer}"
maxlength="100"
required>
</div>
<div class="mb-3">
<label for="saving"
class="form-label">
貯蓄金
</label>
<input type="number"
id="saving"
class="form-control"
th:field="*{saving}"
min="0"
required>
</div>
<div class="mb-3">
<label for="annualIncome"
class="form-label">
年収
</label>
<input type="number"
id="annualIncome"
class="form-control"
th:field="*{annualIncome}"
min="0"
required>
</div>
<div class="mb-3">
<label for="monthlyBudget"
class="form-label">
月別使用可能金額
</label>
<input type="number"
id="monthlyBudget"
class="form-control"
th:field="*{monthlyBudget}"
min="0"
required>
</div>
<div class="mb-3">
<label for="goalId"
class="form-label">
目標ID
</label>
<input type="number"
id="goalId"
class="form-control"
th:field="*{goalId}"
min="0"
required>
</div>
<input type="hidden"
th:field="*{courseId}">
<div class="d-grid gap-2 mt-4">
<button type="submit"
class="btn btn-outline-primary">
コース選択
</button>
<button type="submit"
class="btn btn-primary">
作成
</button>
</div>
</form>
</div>
</div>
<div class="d-grid mt-3">
<form th:action="@{/login}"
method="get">
<button type="submit"
class="btn btn-outline-secondary">
戻る
</button>
</form>
</div>
</div>
</body>
</html>

View File

@@ -2,43 +2,48 @@
<html>
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>新規会員登録確認</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body class="pb-5 pt-5">
<body>
<div th:replace="~{header :: header}">
</div>
<main>
<h1>新規会員登録確認</h1>
<div class="main-container">
<h1 class="page-title">新規会員登録確認</h1>
<div class="card shadow-sm">
 
<div class="card-body">
<form th:action="@{/user/register/complete}" th:object="${userForm}" method="post">
<div>
<label for="userName">氏名</label>
<input type="text" id="userName" th:field="*{userName}" maxlength="100" readonly>
<div class="mb-3">
<label for="userName" class="form-label">氏名</label>
<input type="text" id="userName" class="form-control" th:field="*{userName}" maxlength="100" readonly>
</div>
<div>
<label for="mailAddress">メールアドレス</label>
<input type="email" id="mailAddress" th:field="*{mailAddress}" maxlength="255" readonly>
<div class="mb-3">
<label for="mailAddress" class="form-label">メールアドレス</label>
<input type="email" id="mailAddress" class="form-control" th:field="*{mailAddress}" maxlength="255" readonly>
</div>
<div>
<label for="birthDate">生年月日</label>
<input type="date" id="birthDate" name="birthDate" th:value="*{birthDate}" required readonly>
<div class="mb-3">
<label for="birthDate" class="form-label">生年月日</label>
<input type="date" id="birthDate" class="form-control" name="birthDate" th:value="*{birthDate}" required readonly>
</div>
<div>
<label for="password">パスワード</label>
<input type="password" id="password" name="password" th:value="*{password}" minlength="8"
<div class="mb-3">
<label for="password" class="form-label">パスワード</label>
<input type="password" id="password" class="form-control" name="password" th:value="*{password}" minlength="8"
maxlength="255" required readonly>
</div>
<div>
<label for="secretQuestionId">秘密の質問</label>
<div class="mb-3">
<label for="secretQuestionId" class="form-label">秘密の質問</label>
<select id="secretQuestionId" th:field="*{secretQuestionId}" required readonly>
<option value="">選択してください</option>
<option th:each="question : ${session.questionList}" th:value="${question.secretQuestionId}"
@@ -47,50 +52,58 @@
</select>
</div>
<div>
<label for="secretAnswer">秘密の質問の回答</label>
<input type="text" id="secretAnswer" th:field="*{secretAnswer}" maxlength="100" readonly>
<div class="mb-3">
<label for="secretAnswer" class="form-label">秘密の質問の回答</label>
<input type="text" id="secretAnswer" class="form-control" th:field="*{secretAnswer}" maxlength="100" readonly>
</div>
<div>
<label for="saving">貯蓄金</label>
<input type="number" id="saving" th:field="*{saving}" min="0" readonly>
<div class="mb-3">
<label for="saving" class="form-label">貯蓄金</label>
<input type="number" id="saving" class="form-control" th:field="*{saving}" min="0" readonly>
</div>
<div>
<label for="annualIncome">年収</label>
<input type="number" id="annualIncome" th:field="*{annualIncome}" min="0" readonly>
<div class="mb-3">
<label for="annualIncome" class="form-label">年収</label>
<input type="number" id="annualIncome" class="form-control" th:field="*{annualIncome}" min="0" readonly>
</div>
<div>
<label for="monthlyBudget">月別使用可能金額</label>
<input type="number" id="monthlyBudget" th:field="*{monthlyBudget}" min="0" readonly>
<div class="mb-3">
<label for="monthlyBudget" class="form-label">月別使用可能金額</label>
<input type="number" id="monthlyBudget" class="form-control" th:field="*{monthlyBudget}" min="0" readonly>
</div>
<div>
<label for="goalId">目標</label>
<input type="number" id="goalId" th:field="*{goalId}" min="0" readonly>
<div class="mb-3">
<label for="goalId" class="form-label">目標</label>
<input type="number" id="goalId" class="form-control" th:field="*{goalId}" min="0" readonly>
</div>
<div>
<label>コース</label>
<input type="hidden" th:field="*{courseId}">
<div class="mb-4">
<label class="form-label">コース</label>
<div class="d-flex justify-content-between align-items-center">
<input type="hidden" class="form-control" th:field="*{courseId}">
<span th:text="${selectedCourseName}">未選択</span>
<button type="submit">コース選択</button>
<button type="submit" class="btn btn-outline-primary btn-sm">コース選択</button>
</div>
</div>
<div>
<button type="submit">作成</button>
</div>
<div>
<form th:action="@{/user/register}" method="get">
<button type="submit">戻る</button>
</form>
<div class="d-grid">
<button type="submit" class="btn btn-primary">
作成
</button>
</div>
</form>
</div>
</div>
<div class="d-grid mt-3">
<form th:action="@{/user/register}" method="get">
<button type="submit" class="btn btn-outline-secondary">
戻る
</button>
</form>
</div>
</main>
</div>
</body>

View File

@@ -1,56 +1,65 @@
<!DOCTYPE html>
<html lang="ja"xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>新規会員登録</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body class="pb-5 pt-5">
<body>
<div th:replace="~{header :: header}">
</div>
<main>
<h1>新規会員登録</h1>
<div class="main-container">
<form th:action="@{/user/register/confirm}" th:object="${userForm}" method="get">
<div>
<label for="userName">氏名</label>
<input type="text"
id="userName"
th:field="*{userName}"
maxlength="100"
<h1 class="page-title">新規会員登録</h1>
<div class="card shadow-sm">
<div class="card-body">
<form th:action="@{/user/register/confirm}" th:object="${userForm}" method="get">
<div class="mb-3">
<label for="userName" class="form-label">氏名</label>
<input type="text"
id="userName"
class="form-control"
th:field="*{userName}"
maxlength="100"
required>
</div>
<div class="mb-3">
<label for="mailAddress" class="form-label">メールアドレス</label>
<input type="email"
id="mailAddress"
class="form-control"
th:field="*{mailAddress}"
maxlength="255"
required>
</div>
<div class="mb-3">
<label for="birthDate" class="form-label">生年月日</label>
<input type="date" id="birthDate" name="birthDate" class="form-control" th:value="*{birthDate}"
required>
</div>
<div>
<label for="mailAddress">メールアドレス</label>
<input type="email"
id="mailAddress"
th:field="*{mailAddress}"
maxlength="255"
required>
</div>
<div>
<label for="birthDate">生年月日</label>
<input type="date" id="birthDate" name="birthDate" th:value="*{birthDate}"
required>
</div>
<div>
<label for="password">パスワード</label>
<div class="mb-3">
<label for="password" class="form-label">パスワード</label>
<input type="password"
id="password"
name="password"
class="form-control"
th:value="*{password}"
minlength="8"
maxlength="255"
required>
</div>
<div>
<label for="secretQuestionId">秘密の質問</label>
<div class="mb-3">
<label for="secretQuestionId" class="form-label">秘密の質問</label>
<select id="secretQuestionId"
th:field="*{secretQuestionId}"
required>
@@ -62,67 +71,83 @@
</select>
</div>
<div>
<label for="secretAnswer">秘密の質問の回答</label>
<div class="mb-3">
<label for="secretAnswer" class="form-label">秘密の質問の回答</label>
<input type="text"
id="secretAnswer"
class="form-control"
th:field="*{secretAnswer}"
maxlength="100"
required>
</div>
<div>
<label for="saving">貯蓄金</label>
<div class="mb-3">
<label for="saving" class="form-label">貯蓄金</label>
<input type="number"
id="saving"
class="form-control"
th:field="*{saving}"
min="0"
required>
</div>
<div>
<label for="annualIncome">年収</label>
<div class="mb-3">
<label for="annualIncome" class="form-label">年収</label>
<input type="number"
id="annualIncome"
class="form-control"
th:field="*{annualIncome}"
min="0"
required>
</div>
<div>
<label for="monthlyBudget">月別使用可能金額</label>
<div class="mb-3">
<label for="monthlyBudget" class="form-label">月別使用可能金額</label>
<input type="number"
id="monthlyBudget"
class="form-control"
th:field="*{monthlyBudget}"
min="0"
required>
</div>
<div>
<label for="goalId">目標</label>
<div class="mb-3">
<label for="goalId" class="form-label">目標</label>
<input type="number"
id="goalId"
class="form-control"
th:field="*{goalId}"
min="0"
required>
</div>
<div>
<label>コース</label>
<div class="mb-4">
<label class="form-label">コース</label>
<div class="d-flex justify-content-between align-items-center">
<input type="hidden" th:field="*{courseId}">
<span th:text="${selectedCourseName}">未選択</span>
<button type="submit">コース選択</button>
<button type="submit" class="btn btn-outline-primary btn-sm">
コース選択
</button>
</div>
</div>
<div>
<button type="submit">作成</button>
<div class="d-grid">
<button type="submit" class="btn btn-primary">作成</button>
</div>
</form>
</div>
</div>
<div class="d-grid mt-3">
<form th:action="@{/login}" method="get">
<button type="submit">戻る</button>
<button type="submit" class="btn btn-outline-secondary">戻る</button>
</form>
</main>
</div>
</div>
</body>
</html>