[ADD]支出分析画面(骨組み)の作成
This commit is contained in:
60
src/main/resources/templates/analysis.html
Normal file
60
src/main/resources/templates/analysis.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
|
||||
<title>分析画面</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2 class="text-center">支出分析</h2>
|
||||
|
||||
<table class="table text-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">カテゴリ別</th>
|
||||
<th scope="col">支出</th>
|
||||
<th scope="col">前月比</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">総支出</th>
|
||||
<td>¥234,000</td>
|
||||
<td>+¥38,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<hr class="border border-primary border-2 opacity-50">
|
||||
|
||||
<table class="table text-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">カテゴリ別</th>
|
||||
<th scope="col">支出</th>
|
||||
<th scope="col">前月比<br>コース比</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">食費</th>
|
||||
<td>¥34,000</td>
|
||||
<td>+¥8,000<br>+¥1,100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">交通費</th>
|
||||
<td>¥14,000</td>
|
||||
<td>+¥8,000<br>+¥1,100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">日用品</th>
|
||||
<td>¥4,000</td>
|
||||
<td>+¥8,000<br>+¥1,100</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user