296 lines
17 KiB
HTML
296 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>历史记录 - 教学音乐AI生成助手</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; }
|
|
body { background-color: #f5f7fa; color: #333; line-height: 1.6; }
|
|
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
|
|
header { text-align: center; padding: 40px 20px; background: linear-gradient(135deg, #3498db, #8e44ad); color: white; border-radius: 10px; margin-bottom: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
|
|
h1 { font-size: 2rem; margin-bottom: 10px; font-weight: 700; }
|
|
|
|
/* 导航栏样式 */
|
|
.navbar { background-color: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-radius: 6px; margin-bottom: 30px; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
|
|
.navbar-brand { font-size: 1.5rem; font-weight: bold; color: #3498db; text-decoration: none; }
|
|
.navbar-links { display: flex; gap: 20px; }
|
|
.navbar-link { color: #333; text-decoration: none; padding: 8px 15px; border-radius: 6px; transition: background 0.3s; }
|
|
.navbar-link:hover { background-color: #f5f7fa; }
|
|
.navbar-link.active { background-color: #e8f4fd; color: #3498db; font-weight: 500; }
|
|
|
|
/* 筛选栏样式 */
|
|
.filter-bar { background-color: white; padding: 15px 20px; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 30px; display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
|
|
.filter-group { display: flex; flex-direction: column; }
|
|
.filter-label { font-weight: 500; margin-bottom: 5px; color: #555; }
|
|
.filter-input, .filter-select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
|
|
.filter-button { padding: 8px 15px; background-color: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background 0.3s; align-self: flex-end; }
|
|
.filter-button:hover { background-color: #2980b9; }
|
|
|
|
/* 历史记录列表样式 */
|
|
.history-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px; margin-bottom: 40px; }
|
|
.history-item { background-color: white; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: transform 0.3s, box-shadow 0.3s; }
|
|
.history-item:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0,0,0,0.1); }
|
|
.history-item-header { padding: 15px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
|
|
.history-item-title { font-size: 1.2rem; font-weight: 600; color: #2c3e50; }
|
|
.history-item-date { color: #7f8c8d; font-size: 0.9rem; }
|
|
.history-item-content { padding: 15px; }
|
|
.history-item-preview { width: 100%; height: 120px; background: linear-gradient(135deg, #f39c12, #e74c3c); border-radius: 6px; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; }
|
|
.play-icon { width: 50px; height: 50px; background-color: rgba(0,0,0,0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; cursor: pointer; transition: transform 0.3s; }
|
|
.play-icon:hover { transform: scale(1.1); }
|
|
.history-item-description { color: #666; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
|
|
.history-item-type { display: inline-block; padding: 3px 8px; background-color: #e8f4fd; color: #3498db; border-radius: 4px; font-size: 0.8rem; margin-right: 5px; }
|
|
.history-item-actions { display: flex; justify-content: space-between; margin-top: 15px; }
|
|
.btn { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background 0.3s; text-decoration: none; display: inline-block; }
|
|
.btn-primary { background-color: #3498db; color: white; }
|
|
.btn-primary:hover { background-color: #2980b9; }
|
|
.btn-secondary { background-color: #95a5a6; color: white; }
|
|
.btn-secondary:hover { background-color: #7f8c8d; }
|
|
.btn-danger { background-color: #e74c3c; color: white; }
|
|
.btn-danger:hover { background-color: #c0392b; }
|
|
|
|
/* 分页样式 */
|
|
.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
|
|
.pagination-button { padding: 8px 15px; background-color: white; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; transition: background 0.3s; }
|
|
.pagination-button:hover { background-color: #f5f7fa; }
|
|
.pagination-button.active { background-color: #3498db; color: white; border-color: #3498db; }
|
|
.pagination-button:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
|
|
/* 模态框样式 */
|
|
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
|
|
.modal-content { background-color: white; margin: 10% auto; padding: 20px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); max-width: 500px; text-align: center; }
|
|
.close-modal { float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
|
|
.close-modal:hover { color: #7f8c8d; }
|
|
.modal-header { margin-bottom: 20px; }
|
|
.modal-title { color: #2c3e50; }
|
|
|
|
footer { text-align: center; padding: 30px 0; margin-top: 60px; color: #7f8c8d; border-top: 1px solid #eee; }
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.navbar { flex-direction: column; gap: 15px; }
|
|
.navbar-links { width: 100%; justify-content: center; }
|
|
.filter-bar { flex-direction: column; align-items: stretch; }
|
|
.filter-button { align-self: stretch; }
|
|
.history-list { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>历史记录</h1>
|
|
<p>查看和管理您之前生成的教学音乐内容</p>
|
|
</header>
|
|
|
|
<nav class="navbar">
|
|
<a href="index.html" class="navbar-brand">教学音乐AI</a>
|
|
<div class="navbar-links">
|
|
<a href="index.html" class="navbar-link">首页</a>
|
|
<a href="prompt_input.html" class="navbar-link">音乐创作</a>
|
|
<a href="cases.html" class="navbar-link"><i class="fas fa-star"></i> 推荐案例</a>
|
|
<a href="history.html" class="navbar-link active"><i class="fas fa-history"></i> 历史记录</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 筛选栏 -->
|
|
<div class="filter-bar">
|
|
<div class="filter-group">
|
|
<label class="filter-label">音乐类型</label>
|
|
<select class="filter-select" id="music-type">
|
|
<option value="all">全部类型</option>
|
|
<option value="classical">古典</option>
|
|
<option value="pop">流行</option>
|
|
<option value="folk">民谣</option>
|
|
<option value="electronic">电子</option>
|
|
<option value="traditional">传统</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-group">
|
|
<label class="filter-label">日期范围</label>
|
|
<input type="date" class="filter-input" id="date-from">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label class="filter-label">至</label>
|
|
<input type="date" class="filter-input" id="date-to">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label class="filter-label">关键词</label>
|
|
<input type="text" class="filter-input" id="keyword" placeholder="输入关键词搜索">
|
|
</div>
|
|
<button class="filter-button" id="search-button"><i class="fas fa-search"></i> 搜索</button>
|
|
</div>
|
|
|
|
<!-- 历史记录列表 -->
|
|
<div class="history-list" id="history-list">
|
|
<!-- 历史记录1 -->
|
|
<div class="history-item">
|
|
<div class="history-item-header">
|
|
<div class="history-item-title">数学课堂进行曲</div>
|
|
<div class="history-item-date">2023-11-15</div>
|
|
</div>
|
|
<div class="history-item-content">
|
|
<div class="history-item-preview">
|
|
<div class="play-icon"><i class="fas fa-play"></i></div>
|
|
</div>
|
|
<div>
|
|
<span class="history-item-type">数学</span>
|
|
<span class="history-item-type">欢快</span>
|
|
</div>
|
|
<p class="history-item-description">轻快活泼的钢琴曲，适合小学数学课堂导入，激发学生学习兴趣，营造积极向上的学习氛围。</p>
|
|
<div class="history-item-actions">
|
|
<button class="btn btn-primary play-music" data-audio="https://example.com/math_class.mp3"><i class="fas fa-play"></i> 播放</button>
|
|
<a href="prompt_input.html" class="btn btn-secondary"><i class="fas fa-redo"></i> 复用</a>
|
|
<button class="btn btn-danger"><i class="fas fa-trash-alt"></i> 删除</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 历史记录2 -->
|
|
<div class="history-item">
|
|
<div class="history-item-header">
|
|
<div class="history-item-title">古典诗词配乐</div>
|
|
<div class="history-item-date">2023-11-10</div>
|
|
</div>
|
|
<div class="history-item-content">
|
|
<div class="history-item-preview">
|
|
<div class="play-icon"><i class="fas fa-play"></i></div>
|
|
</div>
|
|
<div>
|
|
<span class="history-item-type">语文</span>
|
|
<span class="history-item-type">古风</span>
|
|
</div>
|
|
<p class="history-item-description">古筝与笛子的完美结合，为古典诗词朗诵提供优雅的背景音乐，增强文学意境和情感表达。</p>
|
|
<div class="history-item-actions">
|
|
<button class="btn btn-primary play-music" data-audio="https://example.com/poetry_music.mp3"><i class="fas fa-play"></i> 播放</button>
|
|
<a href="prompt_input.html" class="btn btn-secondary"><i class="fas fa-redo"></i> 复用</a>
|
|
<button class="btn btn-danger"><i class="fas fa-trash-alt"></i> 删除</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 历史记录3 -->
|
|
<div class="history-item">
|
|
<div class="history-item-header">
|
|
<div class="history-item-title">英语听力训练背景音</div>
|
|
<div class="history-item-date">2023-11-05</div>
|
|
</div>
|
|
<div class="history-item-content">
|
|
<div class="history-item-preview">
|
|
<div class="play-icon"><i class="fas fa-play"></i></div>
|
|
</div>
|
|
<div>
|
|
<span class="history-item-type">英语</span>
|
|
<span class="history-item-type">轻松</span>
|
|
</div>
|
|
<p class="history-item-description">柔和的吉他与钢琴合奏，为英语听力训练创造安静舒适的环境，提高学生专注力和理解力。</p>
|
|
<div class="history-item-actions">
|
|
<button class="btn btn-primary play-music" data-audio="https://example.com/english_listening.mp3"><i class="fas fa-play"></i> 播放</button>
|
|
<a href="prompt_input.html" class="btn btn-secondary"><i class="fas fa-redo"></i> 复用</a>
|
|
<button class="btn btn-danger"><i class="fas fa-trash-alt"></i> 删除</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 历史记录4 -->
|
|
<div class="history-item">
|
|
<div class="history-item-header">
|
|
<div class="history-item-title">科学探索主题曲</div>
|
|
<div class="history-item-date">2023-10-28</div>
|
|
</div>
|
|
<div class="history-item-content">
|
|
<div class="history-item-preview">
|
|
<div class="play-icon"><i class="fas fa-play"></i></div>
|
|
</div>
|
|
<div>
|
|
<span class="history-item-type">科学</span>
|
|
<span class="history-item-type">探索</span>
|
|
</div>
|
|
<p class="history-item-description">充满未来感的电子音乐，配合动感的节奏，为科学实验和探索活动增添活力和趣味性。</p>
|
|
<div class="history-item-actions">
|
|
<button class="btn btn-primary play-music" data-audio="https://example.com/science_exploration.mp3"><i class="fas fa-play"></i> 播放</button>
|
|
<a href="prompt_input.html" class="btn btn-secondary"><i class="fas fa-redo"></i> 复用</a>
|
|
<button class="btn btn-danger"><i class="fas fa-trash-alt"></i> 删除</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<div class="pagination">
|
|
<button class="pagination-button" disabled><i class="fas fa-chevron-left"></i></button>
|
|
<button class="pagination-button active">1</button>
|
|
<button class="pagination-button" disabled><i class="fas fa-chevron-right"></i></button>
|
|
</div>
|
|
|
|
<!-- 音频播放器模态框 -->
|
|
<div id="audioModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close-modal">×</span>
|
|
<div class="modal-header">
|
|
<h2 class="modal-title" id="audioModalTitle"></h2>
|
|
</div>
|
|
<div class="modal-body">
|
|
<audio id="modalAudioPlayer" controls style="width: 100%; margin-bottom: 20px;">
|
|
您的浏览器不支持HTML5音频播放。
|
|
</audio>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>© 2023 教学音乐AI生成助手 | 让教育内容创作更简单</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
// 模拟数据加载
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 音频播放器模态框
|
|
const audioModal = document.getElementById('audioModal');
|
|
const closeAudioModal = audioModal.querySelector('.close-modal');
|
|
const audioModalTitle = document.getElementById('audioModalTitle');
|
|
const modalAudioPlayer = document.getElementById('modalAudioPlayer');
|
|
const playButtons = document.querySelectorAll('.play-music');
|
|
|
|
// 打开音频播放器模态框
|
|
playButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const audioUrl = this.getAttribute('data-audio');
|
|
const musicTitle = this.closest('.history-item').querySelector('.history-item-title').textContent;
|
|
|
|
audioModalTitle.textContent = musicTitle;
|
|
modalAudioPlayer.src = audioUrl;
|
|
audioModal.style.display = 'block';
|
|
modalAudioPlayer.play();
|
|
});
|
|
});
|
|
|
|
// 关闭音频播放器模态框
|
|
closeAudioModal.addEventListener('click', function() {
|
|
audioModal.style.display = 'none';
|
|
modalAudioPlayer.pause();
|
|
});
|
|
|
|
// 点击模态框外部关闭
|
|
window.addEventListener('click', function(event) {
|
|
if (event.target === audioModal) {
|
|
audioModal.style.display = 'none';
|
|
modalAudioPlayer.pause();
|
|
}
|
|
});
|
|
|
|
// 搜索按钮点击事件
|
|
document.getElementById('search-button').addEventListener('click', function() {
|
|
const musicType = document.getElementById('music-type').value;
|
|
const dateFrom = document.getElementById('date-from').value;
|
|
const dateTo = document.getElementById('date-to').value;
|
|
const keyword = document.getElementById('keyword').value;
|
|
|
|
// 这里可以添加搜索逻辑
|
|
console.log('搜索条件:', { musicType, dateFrom, dateTo, keyword });
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |