|
|
<!DOCTYPE html> |
|
|
<html lang="ja"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>履歴</title> |
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> |
|
|
<style> |
|
|
|
|
|
.list-item-thumbnail { |
|
|
width: 80px; |
|
|
height: 45px; |
|
|
object-fit: cover; |
|
|
margin-right: 10px; |
|
|
border-radius: 4px; |
|
|
flex-shrink: 0; |
|
|
} |
|
|
.list-item-content { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
flex-grow: 1; |
|
|
overflow: hidden; |
|
|
} |
|
|
.list-item-text h3 { |
|
|
white-space: nowrap; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
margin-bottom: 4px; |
|
|
} |
|
|
.list-item-text p { |
|
|
font-size: 0.8em; |
|
|
color: #666; |
|
|
margin: 0; |
|
|
} |
|
|
.list-item-empty, .list-item-error { |
|
|
text-align: center; |
|
|
color: #888; |
|
|
padding: 20px; |
|
|
} |
|
|
.list-item-error { |
|
|
color: red; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="screen"> |
|
|
<header class="header"> |
|
|
<button class="menu-btn" aria-label="メニュー" onclick="openMenu()">☰</button> |
|
|
<h1 class="title">履歴</h1> |
|
|
<button class="action-btn" aria-label="アクション"></button> |
|
|
</header> |
|
|
<main> |
|
|
<ul class="list" id="history-list"> |
|
|
{# エラーメッセージがあれば表示 #} |
|
|
{% if error_message %} |
|
|
<li class="list-item-error">履歴の取得に失敗しました: {{ error_message }}</li> |
|
|
{% endif %} |
|
|
|
|
|
{# 履歴アイテムがあればループ処理 #} |
|
|
{% if history_items %} |
|
|
{% for item in history_items %} |
|
|
<li class="list-item"> |
|
|
{# 各アイテムに学習ページへのリンクを設定 #} |
|
|
<a href="{{ url_for('learning_page', id=item.id) }}" class="list-item-button"> |
|
|
<div class="list-item-content"> |
|
|
{# サムネイルがあれば表示、なければデフォルトアイコン #} |
|
|
{% if item.thumbnail %} |
|
|
<img src="{{ item.thumbnail }}" alt="Thumbnail" class="list-item-thumbnail" onerror="this.style.display='none'; this.nextElementSibling.style.display='inline-block';"> {# 画像読み込み失敗時の代替アイコン表示用 #} |
|
|
<span class="list-item-icon" style="display: none;">📄</span> {# 代替アイコン (最初は非表示) #} |
|
|
{% else %} |
|
|
{# typeがないのでデフォルトアイコン #} |
|
|
<span class="list-item-icon">📄</span> |
|
|
{% endif %} |
|
|
<div class="list-item-text"> |
|
|
{# タイトルと日付を表示 #} |
|
|
<h3>{{ item.title }}</h3> |
|
|
<p>{{ item.date }}</p> |
|
|
</div> |
|
|
</div> |
|
|
<span class="list-arrow">></span> |
|
|
</a> |
|
|
</li> |
|
|
{% endfor %} |
|
|
{# 履歴アイテムがなく、エラーもない場合は「履歴なし」メッセージ #} |
|
|
{% elif not error_message %} |
|
|
<li class="list-item-empty">履歴はありません。</li> |
|
|
{% endif %} |
|
|
</ul> |
|
|
|
|
|
<div id="menu-overlay" class="menu-overlay" onclick="closeMenu()"></div> |
|
|
<nav id="side-menu" class="side-menu" aria-label="サイドメニュー"> |
|
|
<button class="close-menu-btn" onclick="closeMenu()" aria-label="メニューを閉じる">×</button> |
|
|
<h2>メニュー</h2> |
|
|
<ul> |
|
|
<li><button onclick="goToInput()">➕ 入力</button></li> |
|
|
<li><button onclick="goToHistory()">🕒 履歴</button></li> |
|
|
<li><button onclick="goToSettings()">⚙️ 設定</button></li> |
|
|
|
|
|
<li><hr></li> |
|
|
<li><button onclick="handleLogout()" class="logout-menu-item">ログアウト</button></li> |
|
|
</ul> |
|
|
</nav> |
|
|
</main> |
|
|
|
|
|
<footer class="footer-nav"> |
|
|
<button onclick="goToInput()" aria-label="入力"> |
|
|
<span class="nav-icon">➕</span> |
|
|
<span class="nav-text">入力</span> |
|
|
</button> |
|
|
<button onclick="goToHistory()" aria-label="履歴" class="active"> {# 現在のページをアクティブに #} |
|
|
<span class="nav-icon">🕒</span> |
|
|
<span class="nav-text">履歴</span> |
|
|
</button> |
|
|
<button onclick="goToSettings()" aria-label="設定"> |
|
|
<span class="nav-icon">⚙️</span> |
|
|
<span class="nav-text">設定</span> |
|
|
</button> |
|
|
</footer> |
|
|
</div> |
|
|
{# script.js はナビゲーション用などに必要なら残す #} |
|
|
<script src="{{ url_for('static', filename='script.js') }}"></script> |
|
|
</body> |
|
|
</html> |
