Ubuntu
73 lines
2.9 KiB
HTML
73 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>{{ source.name }} - Audiobook</title>
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
</head>
|
|
<body class="light-mode">
|
|
<div class="app">
|
|
<!-- Header with back button -->
|
|
<header class="header">
|
|
<button class="nav-btn back-btn" onclick="goBack()">
|
|
<span class="nav-icon">◀</span>
|
|
<span class="nav-text">返回</span>
|
|
</button>
|
|
<h1 class="header-title">{{ source.name }}</h1>
|
|
<button class="theme-toggle" onclick="toggleTheme()">🌙</button>
|
|
</header>
|
|
|
|
<!-- Search Bar -->
|
|
<div class="search-bar">
|
|
<input type="text" id="searchInput" class="search-input" placeholder="搜索故事标题或作者..." onkeyup="searchStories()">
|
|
<span class="search-icon">🔍</span>
|
|
</div>
|
|
|
|
<!-- Stories List -->
|
|
<main class="main-content">
|
|
<div class="stories-list" id="storiesList">
|
|
{% for story in stories %}
|
|
<a href="/play/{{ source.id }}/{{ story.id }}" class="story-item" data-title="{{ story.title | lower }}" data-author="{{ story.author | lower }}">
|
|
<div class="story-number">{{ loop.index }}</div>
|
|
<div class="story-info">
|
|
<h3 class="story-title">{{ story.title }}</h3>
|
|
<p class="story-meta">
|
|
<span class="author">{{ story.author }}</span>
|
|
{% if story.year %}
|
|
<span class="year">· {{ story.year }}</span>
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
<div class="story-arrow">▶</div>
|
|
</a>
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<p>暂无故事</p>
|
|
<p class="empty-subtitle">No stories found in this source</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/static/js/app.js"></script>
|
|
<script>
|
|
function searchStories() {
|
|
const query = document.getElementById('searchInput').value.toLowerCase();
|
|
const items = document.querySelectorAll('.story-item');
|
|
|
|
items.forEach(item => {
|
|
const title = item.dataset.title;
|
|
const author = item.dataset.author;
|
|
if (title.includes(query) || author.includes(query)) {
|
|
item.style.display = 'flex';
|
|
} else {
|
|
item.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|