362 lines
22 KiB
HTML
362 lines
22 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: 200px; object-fit: cover; border-radius: 6px; margin-bottom: 15px; }
|
||
.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; }
|
||
|
||
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="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="content-type">
|
||
<option value="all">全部内容</option>
|
||
<option value="prompt">提示词</option>
|
||
<option value="image">生成图片</option>
|
||
<option value="script">分镜头脚本</option>
|
||
<option value="video">视频</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">
|
||
<img src="https://picsum.photos/350/200?random=1" alt="视频预览" class="history-item-preview">
|
||
<div>
|
||
<span class="history-item-type">视频</span>
|
||
<span class="history-item-type">脚本</span>
|
||
<span class="history-item-type">提示词</span>
|
||
</div>
|
||
<p class="history-item-description">本视频讲解了代数表达式的基本概念、书写规则和求值方法，通过生动的动画演示帮助学生理解抽象概念。</p>
|
||
<div class="history-item-actions">
|
||
<a href="#" class="btn btn-primary"><i class="fas fa-play"></i> 查看</a>
|
||
<a href="#" 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">
|
||
<img src="https://picsum.photos/350/200?random=2" alt="图片预览" class="history-item-preview">
|
||
<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">
|
||
<a href="#" class="btn btn-primary"><i class="fas fa-eye"></i> 查看</a>
|
||
<a href="#" 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">
|
||
<img src="https://picsum.photos/350/200?random=3" alt="脚本预览" class="history-item-preview">
|
||
<div>
|
||
<span class="history-item-type">脚本</span>
|
||
<span class="history-item-type">提示词</span>
|
||
</div>
|
||
<p class="history-item-description">专业分镜头脚本，详细讲解化学元素周期表的结构、规律和应用，包含5个主要镜头和转场效果。</p>
|
||
<div class="history-item-actions">
|
||
<a href="#" class="btn btn-primary"><i class="fas fa-file-alt"></i> 查看</a>
|
||
<a href="#" 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">
|
||
<img src="https://picsum.photos/350/200?random=4" alt="视频预览" class="history-item-preview">
|
||
<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">
|
||
<a href="#" class="btn btn-primary"><i class="fas fa-play"></i> 查看</a>
|
||
<a href="#" 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>
|
||
|
||
<!-- 新增项目 5 -->
|
||
<div class="history-item">
|
||
<div class="history-item-header">
|
||
<div class="history-item-title">生物细胞结构 - 动物细胞模型</div>
|
||
<div class="history-item-date">2023-10-20</div>
|
||
</div>
|
||
<div class="history-item-content">
|
||
<img src="https://picsum.photos/350/200?random=5" alt="图片预览" class="history-item-preview">
|
||
<div>
|
||
<span class="history-item-type">图片</span>
|
||
<span class="history-item-type">提示词</span>
|
||
</div>
|
||
<p class="history-item-description">高精度3D动物细胞结构模型图片，清晰展示细胞核、线粒体、内质网等细胞器，标注详细功能说明。</p>
|
||
<div class="history-item-actions">
|
||
<a href="#" class="btn btn-primary"><i class="fas fa-eye"></i> 查看</a>
|
||
<a href="#" 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>
|
||
|
||
<!-- 新增项目 6 -->
|
||
<div class="history-item">
|
||
<div class="history-item-header">
|
||
<div class="history-item-title">英语语法 - 现在完成时</div>
|
||
<div class="history-item-date">2023-10-15</div>
|
||
</div>
|
||
<div class="history-item-content">
|
||
<img src="https://picsum.photos/350/200?random=6" alt="视频预览" class="history-item-preview">
|
||
<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">
|
||
<a href="#" class="btn btn-primary"><i class="fas fa-play"></i> 查看</a>
|
||
<a href="#" 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>
|
||
|
||
<!-- 新增项目 7 -->
|
||
<div class="history-item">
|
||
<div class="history-item-header">
|
||
<div class="history-item-title">地理 - 板块构造学说</div>
|
||
<div class="history-item-date">2023-10-10</div>
|
||
</div>
|
||
<div class="history-item-content">
|
||
<img src="https://picsum.photos/350/200?random=7" alt="脚本预览" class="history-item-preview">
|
||
<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">
|
||
<a href="#" class="btn btn-primary"><i class="fas fa-file-alt"></i> 查看</a>
|
||
<a href="#" 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>
|
||
|
||
<!-- 新增项目 8 -->
|
||
<div class="history-item">
|
||
<div class="history-item-header">
|
||
<div class="history-item-title">音乐 - 古典音乐流派</div>
|
||
<div class="history-item-date">2023-10-05</div>
|
||
</div>
|
||
<div class="history-item-content">
|
||
<img src="https://picsum.photos/350/200?random=8" alt="图片预览" class="history-item-preview">
|
||
<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">
|
||
<a href="#" class="btn btn-primary"><i class="fas fa-eye"></i> 查看</a>
|
||
<a href="#" 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>
|
||
|
||
<!-- 新增项目 9 -->
|
||
<div class="history-item">
|
||
<div class="history-item-header">
|
||
<div class="history-item-title">计算机科学 - 数据结构基础</div>
|
||
<div class="history-item-date">2023-09-28</div>
|
||
</div>
|
||
<div class="history-item-content">
|
||
<img src="https://picsum.photos/350/200?random=9" alt="视频预览" class="history-item-preview">
|
||
<div>
|
||
<span class="history-item-type">视频</span>
|
||
<span class="history-item-type">脚本</span>
|
||
<span class="history-item-type">提示词</span>
|
||
</div>
|
||
<p class="history-item-description">生动讲解链表、栈、队列、树等基本数据结构的概念、实现和应用场景，通过动画演示数据结构的操作过程。</p>
|
||
<div class="history-item-actions">
|
||
<a href="#" class="btn btn-primary"><i class="fas fa-play"></i> 查看</a>
|
||
<a href="#" 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">2</button>
|
||
<button class="pagination-button">3</button>
|
||
<button class="pagination-button">...</button>
|
||
<button class="pagination-button">10</button>
|
||
<button class="pagination-button"><i class="fas fa-chevron-right"></i></button>
|
||
</div>
|
||
|
||
<footer>
|
||
<p>© 2023 教学视频AI生成智能体 | 让教育内容创作更简单</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
// 模拟数据加载
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 这里可以添加实际的数据加载逻辑
|
||
console.log('历史记录页面加载完成');
|
||
|
||
// 搜索按钮点击事件
|
||
document.getElementById('search-button').addEventListener('click', function() {
|
||
const contentType = document.getElementById('content-type').value;
|
||
const dateFrom = document.getElementById('date-from').value;
|
||
const dateTo = document.getElementById('date-to').value;
|
||
const keyword = document.getElementById('keyword').value;
|
||
|
||
// 这里可以添加实际的搜索逻辑
|
||
console.log('搜索条件:', { contentType, dateFrom, dateTo, keyword });
|
||
alert('搜索功能将在后端集成后实现');
|
||
});
|
||
|
||
// 为删除按钮添加确认提示
|
||
document.querySelectorAll('.btn-danger').forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
if (confirm('确定要删除这条记录吗？')) {
|
||
// 这里可以添加实际的删除逻辑
|
||
alert('删除功能将在后端集成后实现');
|
||
}
|
||
});
|
||
});
|
||
|
||
// 为查看和复用按钮添加提示
|
||
document.querySelectorAll('.btn-primary, .btn-secondary').forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
alert('此功能将在后端集成后实现');
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |