a
This commit is contained in:
Ubuntu
@@ -0,0 +1,61 @@
|
||||
<!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>Audiobook Player</title>
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
</head>
|
||||
<body class="light-mode">
|
||||
<div class="app">
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<h1 class="header-title">📚 Audiobook</h1>
|
||||
<button class="theme-toggle" onclick="toggleTheme()">🌙</button>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<div class="welcome">
|
||||
<h2>选择阅读来源</h2>
|
||||
<p class="subtitle">Select your reading source</p>
|
||||
</div>
|
||||
|
||||
<div class="sources-grid">
|
||||
{% for source in sources %}
|
||||
<a href="/list/{{ source.id }}" class="source-card">
|
||||
<div class="source-icon">
|
||||
{% if 'library' in source.id.lower() %}
|
||||
📚
|
||||
{% elif 'poetry' in source.id.lower() %}
|
||||
📝
|
||||
{% elif 'loyal' in source.id.lower() %}
|
||||
🎧
|
||||
{% else %}
|
||||
📖
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="source-info">
|
||||
<h3 class="source-name">{{ source.name }}</h3>
|
||||
<p class="source-count">{{ source.count }} 个项目</p>
|
||||
</div>
|
||||
<div class="source-arrow">→</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<p>暂无内容</p>
|
||||
<p class="empty-subtitle">No media sources found</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<p>© 2026 Audiobook Player</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,72 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,147 @@
|
||||
<!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>{{ title }} - Audiobook</title>
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
</head>
|
||||
<body class="light-mode player-page">
|
||||
<div class="app">
|
||||
<!-- Fixed Player Bar (80px height) -->
|
||||
<div class="player-bar" id="playerBar">
|
||||
<div class="player-controls">
|
||||
<button class="nav-btn back-btn" onclick="goBack()">
|
||||
<span class="nav-icon">◀</span>
|
||||
</button>
|
||||
|
||||
<div class="player-info">
|
||||
<h3 class="player-title">{{ title }}</h3>
|
||||
<p class="player-author">{{ author }}</p>
|
||||
</div>
|
||||
|
||||
<button class="play-btn" id="playBtn" onclick="togglePlay()">
|
||||
<span class="play-icon">▶</span>
|
||||
</button>
|
||||
|
||||
<button class="close-btn" onclick="closePlayer()">
|
||||
<span class="close-icon">✕</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Audio Element -->
|
||||
<audio id="audioPlayer" preload="none"></audio>
|
||||
</div>
|
||||
|
||||
<!-- Speed Control Bar -->
|
||||
<div class="speed-control-bar" id="speedControlBar">
|
||||
<button class="speed-btn" data-rate="-30%" onclick="setSpeed(this, '-30%')">慢</button>
|
||||
<button class="speed-btn active" data-rate="-10%" onclick="setSpeed(this, '-10%')">正常</button>
|
||||
<button class="speed-btn" data-rate="+10%" onclick="setSpeed(this, '+10%')">快</button>
|
||||
</div>
|
||||
|
||||
<!-- Content Area (scrollable) -->
|
||||
<main class="content-area player-with-speed" id="contentArea">
|
||||
<article class="story-content" id="storyContent">
|
||||
<header class="content-header">
|
||||
<h1>{{ title }}</h1>
|
||||
<p class="content-meta">
|
||||
<span class="author">{{ author }}</span>
|
||||
{% if year %}
|
||||
<span class="year">{{ year }}</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="content-body" id="contentBody">
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
|
||||
<div class="content-end">
|
||||
<p>— End of Story —</p>
|
||||
<button class="back-to-list" onclick="goBack()">返回列表</button>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/app.js"></script>
|
||||
<script>
|
||||
// Story content
|
||||
const storyContent = {{ content | tojson }};
|
||||
const storyTitle = {{ title | tojson }};
|
||||
|
||||
// Audio state
|
||||
let isPlaying = false;
|
||||
let audioPlayer = document.getElementById('audioPlayer');
|
||||
let playBtn = document.getElementById('playBtn');
|
||||
let currentSpeed = '-10%';
|
||||
|
||||
// Toggle play/pause
|
||||
function togglePlay() {
|
||||
if (isPlaying) {
|
||||
pauseAudio();
|
||||
} else {
|
||||
playAudio();
|
||||
}
|
||||
}
|
||||
|
||||
function playAudio() {
|
||||
const text = storyContent || storyTitle;
|
||||
if (!text) return;
|
||||
|
||||
const streamUrl = `/api/stream?text=${encodeURIComponent(text)}&rate=${encodeURIComponent(currentSpeed)}`;
|
||||
audioPlayer.src = streamUrl;
|
||||
audioPlayer.play();
|
||||
|
||||
isPlaying = true;
|
||||
updatePlayButton();
|
||||
}
|
||||
|
||||
function pauseAudio() {
|
||||
audioPlayer.pause();
|
||||
isPlaying = false;
|
||||
updatePlayButton();
|
||||
}
|
||||
|
||||
function updatePlayButton() {
|
||||
playBtn.innerHTML = isPlaying ? '<span class="pause-icon">⏸</span>' : '<span class="play-icon">▶</span>';
|
||||
}
|
||||
|
||||
// Speed control
|
||||
function setSpeed(btn, rate) {
|
||||
document.querySelectorAll('.speed-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
currentSpeed = rate;
|
||||
|
||||
if (isPlaying) {
|
||||
pauseAudio();
|
||||
playAudio();
|
||||
}
|
||||
}
|
||||
|
||||
// Handle audio ended
|
||||
audioPlayer.addEventListener('ended', () => {
|
||||
isPlaying = false;
|
||||
updatePlayButton();
|
||||
});
|
||||
|
||||
// Handle audio error
|
||||
audioPlayer.addEventListener('error', (e) => {
|
||||
console.error('Audio error:', e);
|
||||
isPlaying = false;
|
||||
updatePlayButton();
|
||||
});
|
||||
|
||||
function closePlayer() {
|
||||
pauseAudio();
|
||||
window.location.href = '/list/{{ source_id }}';
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
pauseAudio();
|
||||
window.history.back();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user