huanghai/dsProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'commit'

Browse Source
This commit is contained in:
HuangHai
2025-08-21 13:33:34 +08:00
parent a1631ce070
commit f8573bd811
2 changed files with 798 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

502
dsLightRag/static/Suno/cases.html Normal file
View File

@@ -0,0 +1,502 @@
<!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: 60px 20px; background: linear-gradient(135deg, #3498db, #8e44ad); color: white; border-radius: 10px; margin-bottom: 40px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
h1 { font-size: 2.5rem; margin-bottom: 15px; font-weight: 700; }
.subtitle { font-size: 1.2rem; opacity: 0.9; max-width: 800px; margin: 0 auto; }
/* 导航栏样式 */
.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; }
/* 案例展示区域 */
.cases-container { margin: 40px 0; }
.section-title { text-align: center; font-size: 2rem; margin-bottom: 30px; color: #2c3e50; position: relative; }
.section-title::after { content: ''; display: block; width: 80px; height: 4px; background: linear-gradient(90deg, #3498db, #8e44ad); margin: 15px auto 0; border-radius: 2px; }
.cases-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 30px; }
.case-card { background-color: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s; opacity: 0; transform: translateY(20px); }
.case-card.visible { opacity: 1; transform: translateY(0); }
.case-card:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
.case-thumbnail { height: 200px; overflow: hidden; position: relative; background: linear-gradient(135deg, #f1c40f, #e74c3c); display: flex; align-items: center; justify-content: center; }
.play-icon { width: 80px; height: 80px; background-color: rgba(0,0,0,0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 36px; transition: transform 0.3s; }
.case-card:hover .play-icon { transform: scale(1.1); }
.case-content { padding: 20px; }
.case-title { font-size: 1.3rem; margin-bottom: 10px; color: #2c3e50; }
.case-meta { display: flex; justify-content: space-between; margin-bottom: 15px; color: #7f8c8d; font-size: 0.9rem; }
.case-description { color: #666; margin-bottom: 20px; }
.case-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.case-tag { background-color: #e8f4fd; color: #3498db; padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; }
.btn { padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; transition: background 0.3s; text-decoration: none; display: inline-block; }
.btn-primary { background-color: #3498db; color: white; }
.btn-primary:hover { background-color: #2980b9; }
.btn-outline { background-color: transparent; border: 1px solid #3498db; color: #3498db; margin-left: 10px; }
.btn-outline:hover { background-color: #e8f4fd; }
/* 案例详情模态框 */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 1000; overflow: auto; }
.modal-content { background-color: white; margin: 5% auto; padding: 30px; width: 90%; max-width: 800px; border-radius: 10px; position: relative; box-shadow: 0 5px 30px rgba(0,0,0,0.2); animation: modalFadeIn 0.4s; }
@keyframes modalFadeIn { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }
.close-modal { position: absolute; top: 15px; right: 20px; font-size: 28px; cursor: pointer; color: #7f8c8d; }
.modal-header { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
.modal-title { font-size: 1.8rem; color: #2c3e50; }
.modal-body { margin-bottom: 20px; }
.modal-audio-container { padding: 20px; background-color: #f8f9fa; border-radius: 6px; margin-bottom: 20px; text-align: center; }
.audio-player { width: 100%; max-width: 500px; margin: 0 auto; }
.case-details { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; }
@media (max-width: 768px) { .case-details { grid-template-columns: 1fr; } }
.detail-section { margin-bottom: 20px; }
.detail-title { font-size: 1.2rem; margin-bottom: 10px; color: #2c3e50; display: flex; align-items: center; }
.detail-title i { margin-right: 10px; color: #3498db; }
.detail-content { color: #666; line-height: 1.7; }
.process-steps { margin-top: 30px; }
.step { margin-bottom: 25px; padding-left: 30px; position: relative; }
.step::before { content: ''; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background-color: #3498db; }
.step-title { font-weight: bold; margin-bottom: 5px; color: #2c3e50; }
.step-description { color: #666; }
footer { text-align: center; padding: 30px 0; margin-top: 60px; color: #7f8c8d; border-top: 1px solid #eee; }
@media screen and (max-width: 768px) {
h1 { font-size: 2rem; }
.navbar { flex-direction: column; gap: 15px; }
.navbar-links { width: 100%; justify-content: center; }
.cases-grid { grid-template-columns: 1fr; }
.modal-content { margin: 10% auto; }
}
</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>教学音乐AI生成助手</h1>
<p class="subtitle">轻松创建专业级教学音乐，从提示词到完整音频，一站式AI生成解决方案</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 active"><i class="fas fa-star"></i> 推荐案例</a>
<a href="history.html" class="navbar-link"><i class="fas fa-history"></i> 历史记录</a>
</div>
</nav>
<!-- 案例展示区域 -->
<div class="cases-container">
<h2 class="section-title">优秀教学音乐案例</h2>
<p style="text-align: center; color: #666; margin-bottom: 40px; max-width: 800px; margin-left: auto; margin-right: auto;">探索我们平台上生成的高质量教学音乐案例，了解它们的制作过程和效果，为您的创作提供灵感。</p>
<div class="cases-grid">
<!-- 案例1 -->
<div class="case-card" data-case="case1">
<div class="case-thumbnail">
<div class="play-icon"><i class="fas fa-play"></i></div>
</div>
<div class="case-content">
<h3 class="case-title">数学课堂进行曲</h3>
<div class="case-meta">
<span><i class="fas fa-eye"></i> 2.1k 播放</span>
<span><i class="fas fa-star"></i> 4.8/5 评分</span>
</div>
<div class="case-tags">
<span class="case-tag">数学</span>
<span class="case-tag">欢快</span>
<span class="case-tag">课堂导入</span>
</div>
<p class="case-description">轻快活泼的钢琴曲，适合小学数学课堂导入，激发学生学习兴趣，营造积极向上的学习氛围。</p>
<button class="btn btn-primary view-case" data-case="case1">播放试听</button>
</div>
</div>
<!-- 案例2 -->
<div class="case-card" data-case="case2">
<div class="case-thumbnail">
<div class="play-icon"><i class="fas fa-play"></i></div>
</div>
<div class="case-content">
<h3 class="case-title">古典诗词配乐</h3>
<div class="case-meta">
<span><i class="fas fa-eye"></i> 1.8k 播放</span>
<span><i class="fas fa-star"></i> 4.9/5 评分</span>
</div>
<div class="case-tags">
<span class="case-tag">语文</span>
<span class="case-tag">古风</span>
<span class="case-tag">诗词朗诵</span>
</div>
<p class="case-description">古筝与笛子的完美结合，为古典诗词朗诵提供优雅的背景音乐，增强文学意境和情感表达。</p>
<button class="btn btn-primary view-case" data-case="case2">播放试听</button>
</div>
</div>
<!-- 案例3 -->
<div class="case-card" data-case="case3">
<div class="case-thumbnail">
<div class="play-icon"><i class="fas fa-play"></i></div>
</div>
<div class="case-content">
<h3 class="case-title">英语听力训练背景音</h3>
<div class="case-meta">
<span><i class="fas fa-eye"></i> 1.5k 播放</span>
<span><i class="fas fa-star"></i> 4.7/5 评分</span>
</div>
<div class="case-tags">
<span class="case-tag">英语</span>
<span class="case-tag">轻松</span>
<span class="case-tag">听力练习</span>
</div>
<p class="case-description">柔和的吉他与钢琴合奏，为英语听力训练创造安静舒适的环境，提高学生专注力和理解力。</p>
<button class="btn btn-primary view-case" data-case="case3">播放试听</button>
</div>
</div>
<!-- 案例4 -->
<div class="case-card" data-case="case4">
<div class="case-thumbnail">
<div class="play-icon"><i class="fas fa-play"></i></div>
</div>
<div class="case-content">
<h3 class="case-title">科学探索主题曲</h3>
<div class="case-meta">
<span><i class="fas fa-eye"></i> 1.2k 播放</span>
<span><i class="fas fa-star"></i> 4.6/5 评分</span>
</div>
<div class="case-tags">
<span class="case-tag">科学</span>
<span class="case-tag">探索</span>
<span class="case-tag">激发好奇心</span>
</div>
<p class="case-description">充满未来感的电子音乐，配合动感的节奏，为科学实验和探索活动增添活力和趣味性。</p>
<button class="btn btn-primary view-case" data-case="case4">播放试听</button>
</div>
</div>
<!-- 案例5 -->
<div class="case-card" data-case="case5">
<div class="case-thumbnail">
<div class="play-icon"><i class="fas fa-play"></i></div>
</div>
<div class="case-content">
<h3 class="case-title">历史长河叙事曲</h3>
<div class="case-meta">
<span><i class="fas fa-eye"></i> 1.3k 播放</span>
<span><i class="fas fa-star"></i> 4.7/5 评分</span>
</div>
<div class="case-tags">
<span class="case-tag">历史</span>
<span class="case-tag">史诗</span>
<span class="case-tag">叙事</span>
</div>
<p class="case-description">大气磅礴的管弦乐，带学生穿越时空，感受历史的厚重与变迁，增强历史教学的沉浸感。</p>
<button class="btn btn-primary view-case" data-case="case5">播放试听</button>
</div>
</div>
<!-- 案例6 -->
<div class="case-card" data-case="case6">
<div class="case-thumbnail">
<div class="play-icon"><i class="fas fa-play"></i></div>
</div>
<div class="case-content">
<h3 class="case-title">地理风光音乐之旅</h3>
<div class="case-meta">
<span><i class="fas fa-eye"></i> 1.1k 播放</span>
<span><i class="fas fa-star"></i> 4.5/5 评分</span>
</div>
<div class="case-tags">
<span class="case-tag">地理</span>
<span class="case-tag">世界音乐</span>
<span class="case-tag">文化探索</span>
</div>
<p class="case-description">融合世界各地民族音乐元素，配合优美的旋律，带学生领略不同国家和地区的地理风光和文化特色。</p>
<button class="btn btn-primary view-case" data-case="case6">播放试听</button>
</div>
</div>
</div>
</div>
<footer>
<p>© 2023 教学音乐AI生成助手 | 让教育内容创作更简单</p>
</footer>
</div>
<!-- 案例详情模态框 -->
<div id="caseModal" class="modal">
<div class="modal-content">
<span class="close-modal">&times;</span>
<div class="modal-header">
<h2 class="modal-title" id="modalTitle"></h2>
</div>
<div class="modal-body" id="modalBody">
<!-- 模态框内容将通过JavaScript动态填充 -->
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 案例数据
const casesData = {
case1: {
title: "数学课堂进行曲",
audio: "https://example.com/math_class.mp3",
views: "2.1k",
rating: "4.8/5",
tags: ["数学", "欢快", "课堂导入"],
description: "轻快活泼的钢琴曲，适合小学数学课堂导入，激发学生学习兴趣，营造积极向上的学习氛围。",
creator: "AI生成",
subject: "数学",
grade: "小学",
duration: "2:30",
process: [
{ title: "提示词生成", description: "输入数学课堂、欢快、钢琴曲等关键词生成提示词。" },
{ title: "音乐生成", description: "AI根据提示词生成初始音乐片段。" },
{ title: "优化调整", description: "根据教学场景需求调整节奏和旋律。" },
{ title: "最终输出", description: "生成适合课堂使用的完整音乐文件。" }
],
keyPoints: ["轻快活泼", "数学教学", "课堂导入", "注意力吸引"]
},
case2: {
title: "古典诗词配乐",
audio: "https://example.com/poetry_music.mp3",
views: "1.8k",
rating: "4.9/5",
tags: ["语文", "古风", "诗词朗诵"],
description: "古筝与笛子的完美结合，为古典诗词朗诵提供优雅的背景音乐，增强文学意境和情感表达。",
creator: "AI生成",
subject: "语文",
grade: "初中",
duration: "3:15",
process: [
{ title: "提示词生成", description: "输入古典诗词、古筝、笛子等关键词生成提示词。" },
{ title: "音乐生成", description: "AI根据提示词生成包含传统乐器元素的音乐。" },
{ title: "风格优化", description: "调整音乐风格，使其更符合古典诗词的意境。" },
{ title: "最终输出", description: "生成适合诗词朗诵的背景音乐。" }
],
keyPoints: ["古典风格", "诗词朗诵", "传统文化", "情感表达"]
},
case3: {
title: "英语听力训练背景音",
audio: "https://example.com/english_listening.mp3",
views: "1.5k",
rating: "4.7/5",
tags: ["英语", "轻松", "听力练习"],
description: "柔和的吉他与钢琴合奏，为英语听力训练创造安静舒适的环境，提高学生专注力和理解力。",
creator: "AI生成",
subject: "英语",
grade: "全学段",
duration: "4:00",
process: [
{ title: "提示词生成", description: "输入英语听力、柔和、吉他等关键词生成提示词。" },
{ title: "音乐生成", description: "AI根据提示词生成轻柔的背景音乐。" },
{ title: "音量调整", description: "确保背景音乐不会干扰听力内容的清晰度。" },
{ title: "最终输出", description: "生成适合听力训练的背景音文件。" }
],
keyPoints: ["轻柔舒缓", "英语听力", "专注力", "学习环境"]
},
case4: {
title: "科学探索主题曲",
audio: "https://example.com/science_exploration.mp3",
views: "1.2k",
rating: "4.6/5",
tags: ["科学", "探索", "激发好奇心"],
description: "充满未来感的电子音乐，配合动感的节奏，为科学实验和探索活动增添活力和趣味性。",
creator: "AI生成",
subject: "科学",
grade: "小学、初中",
duration: "2:45",
process: [
{ title: "提示词生成", description: "输入科学探索、电子音乐、动感等关键词生成提示词。" },
{ title: "音乐生成", description: "AI根据提示词生成富有未来感的电子音乐。" },
{ title: "节奏优化", description: "调整节奏使其更适合科学实验和探索活动。" },
{ title: "最终输出", description: "生成激发科学兴趣的主题音乐。" }
],
keyPoints: ["未来感", "科学探索", "动感节奏", "好奇心激发"]
},
case5: {
title: "历史长河叙事曲",
audio: "https://example.com/history_narrative.mp3",
views: "1.3k",
rating: "4.7/5",
tags: ["历史", "史诗", "叙事"],
description: "大气磅礴的管弦乐，带学生穿越时空，感受历史的厚重与变迁，增强历史教学的沉浸感。",
creator: "AI生成",
subject: "历史",
grade: "初中、高中",
duration: "3:30",
process: [
{ title: "提示词生成", description: "输入历史、史诗、管弦乐等关键词生成提示词。" },
{ title: "音乐生成", description: "AI根据提示词生成大气磅礴的管弦乐。" },
{ title: "情感调整", description: "增强音乐的叙事性和情感表达。" },
{ title: "最终输出", description: "生成适合历史教学的叙事音乐。" }
],
keyPoints: ["史诗感", "历史叙事", "情感共鸣", "沉浸体验"]
},
case6: {
title: "地理风光音乐之旅",
audio: "https://example.com/geography_tour.mp3",
views: "1.1k",
rating: "4.5/5",
tags: ["地理", "世界音乐", "文化探索"],
description: "融合世界各地民族音乐元素，配合优美的旋律，带学生领略不同国家和地区的地理风光和文化特色。",
creator: "AI生成",
subject: "地理",
grade: "初中、高中",
duration: "4:15",
process: [
{ title: "提示词生成", description: "输入地理、世界音乐、文化探索等关键词生成提示词。" },
{ title: "音乐生成", description: "AI根据提示词生成融合多种民族音乐元素的作品。" },
{ title: "风格融合", description: "确保不同音乐风格的和谐统一。" },
{ title: "最终输出", description: "生成适合地理教学的音乐作品。" }
],
keyPoints: ["世界音乐", "地理教学", "文化多样性", "沉浸式学习"]
}
};
// 模态框相关元素
const modal = document.getElementById('caseModal');
const closeModal = document.querySelector('.close-modal');
const modalTitle = document.getElementById('modalTitle');
const modalBody = document.getElementById('modalBody');
const viewButtons = document.querySelectorAll('.view-case');
// 打开模态框
viewButtons.forEach(button => {
button.addEventListener('click', function() {
const caseId = this.getAttribute('data-case');
const caseData = casesData[caseId];
// 填充模态框内容
modalTitle.textContent = caseData.title;
let tagsHtml = '';
caseData.tags.forEach(tag => {
tagsHtml += `<span class="case-tag">${tag}</span>`;
});
let processHtml = '';
caseData.process.forEach((step, index) => {
processHtml += `
<div class="step">
<div class="step-title">步骤 ${index + 1}: ${step.title}</div>
<div class="step-description">${step.description}</div>
</div>
`;
});
let keyPointsHtml = '';
caseData.keyPoints.forEach(point => {
keyPointsHtml += `<li>${point}</li>`;
});
modalBody.innerHTML = `
<div class="modal-audio-container">
<audio class="audio-player" controls>
<source src="${caseData.audio}" type="audio/mpeg">
您的浏览器不支持HTML5音频播放。
</audio>
</div>
<div class="case-details">
<div>
<div class="detail-section">
<h3 class="detail-title"><i class="fas fa-info-circle"></i> 案例信息</h3>
<div class="detail-content">
<p><strong>创作者:</strong> ${caseData.creator}</p>
<p><strong>学科:</strong> ${caseData.subject}</p>
<p><strong>适合学段:</strong> ${caseData.grade}</p>
<p><strong>时长:</strong> ${caseData.duration}</p>
</div>
</div>
<div class="detail-section">
<h3 class="detail-title"><i class="fas fa-tags"></i> 标签</h3>
<div class="detail-content" style="display: flex; flex-wrap: wrap; gap: 8px;">
${tagsHtml}
</div>
</div>
</div>
<div>
<div class="detail-section">
<h3 class="detail-title"><i class="fas fa-list"></i> 关键特点</h3>
<div class="detail-content">
<ul>${keyPointsHtml}</ul>
</div>
</div>
<div class="detail-section">
<h3 class="detail-title"><i class="fas fa-info-circle"></i> 案例描述</h3>
<div class="detail-content">
<p>${caseData.description}</p>
</div>
</div>
</div>
</div>
<div class="process-steps">
<h3 class="detail-title"><i class="fas fa-project-diagram"></i> 生成流程</h3>
${processHtml}
</div>
<div style="text-align: center; margin-top: 30px;">
<button class="btn btn-primary" onclick="window.location.href='prompt_input.html'">
<i class="fas fa-magic"></i> 生成类似音乐
</button>
</div>
`;
// 显示模态框
modal.style.display = 'block';
});
});
// 关闭模态框
closeModal.addEventListener('click', function() {
modal.style.display = 'none';
});
// 点击模态框外部关闭
window.addEventListener('click', function(event) {
if (event.target === modal) {
modal.style.display = 'none';
}
});
// 页面加载动画
const caseCards = document.querySelectorAll('.case-card');
function checkElements() {
const triggerBottom = window.innerHeight * 0.8;
caseCards.forEach((card, index) => {
const cardTop = card.getBoundingClientRect().top;
if (cardTop < triggerBottom) {
setTimeout(() => {
card.classList.add('visible');
}, index * 100);
}
});
}
// 检查可见性
checkElements();
window.addEventListener('scroll', checkElements);
});
</script>
</body>
</html>

296
dsLightRag/static/Suno/history.html Normal file
View File

@@ -0,0 +1,296 @@
<!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">&times;</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>