225 lines
13 KiB
HTML
225 lines
13 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: 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; }
|
||
|
||
.timeline-container { position: relative; max-width: 1000px; margin: 0 auto; padding: 20px 0; }
|
||
.timeline-container::after { content: ''; position: absolute; width: 6px; background-color: #ddd; top: 0; bottom: 0; left: 50%; margin-left: -3px; border-radius: 10px; }
|
||
.timeline-item { padding: 10px 40px; position: relative; width: 50%; box-sizing: border-box; }
|
||
.timeline-item::after { content: ''; position: absolute; width: 25px; height: 25px; right: -12px; background-color: white; border: 4px solid #3498db; top: 15px; border-radius: 50%; z-index: 1; }
|
||
.left { left: 0; }
|
||
.right { left: 50%; }
|
||
.right::after { left: -12px; }
|
||
.timeline-content { padding: 20px; background-color: white; position: relative; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s; }
|
||
.timeline-content:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0,0,0,0.15); }
|
||
.timeline-title { font-size: 1.4rem; margin-bottom: 10px; color: #2c3e50; display: flex; align-items: center; }
|
||
.timeline-title .step-number { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background-color: #3498db; color: white; border-radius: 50%; margin-right: 10px; font-weight: bold; }
|
||
.timeline-description { color: #666; margin-bottom: 15px; }
|
||
.timeline-action { text-align: right; }
|
||
.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-secondary { background-color: #95a5a6; color: white; margin-left: 10px; }
|
||
.btn-secondary:hover { background-color: #7f8c8d; }
|
||
.timeline-icon { font-size: 2rem; margin-bottom: 15px; color: #3498db; text-align: center; }
|
||
.features { display: flex; flex-wrap: wrap; justify-content: space-around; margin: 60px 0; }
|
||
.feature-card { background-color: white; border-radius: 10px; padding: 25px; margin: 15px; width: 300px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s; }
|
||
.feature-card:hover { transform: translateY(-5px); }
|
||
.feature-icon { font-size: 2.5rem; margin-bottom: 15px; color: #8e44ad; }
|
||
.feature-title { font-size: 1.2rem; margin-bottom: 10px; color: #2c3e50; }
|
||
.feature-description { color: #666; }
|
||
|
||
/* 历史记录入口样式 */
|
||
.history-section { text-align: center; margin: 60px 0; padding: 40px; background-color: white; border-radius: 10px; box-shadow: 0 2px 15px rgba(0,0,0,0.05); }
|
||
.history-title { font-size: 1.8rem; margin-bottom: 20px; color: #2c3e50; }
|
||
.history-description { color: #666; margin-bottom: 30px; max-width: 800px; margin-left: auto; margin-right: auto; }
|
||
|
||
footer { text-align: center; padding: 30px 0; margin-top: 60px; color: #7f8c8d; border-top: 1px solid #eee; }
|
||
|
||
@media screen and (max-width: 768px) {
|
||
.timeline-container::after { left: 31px; }
|
||
.timeline-item { width: 100%; padding-left: 70px; padding-right: 25px; }
|
||
.timeline-item::after { left: 18px; }
|
||
.right { left: 0%; }
|
||
h1 { font-size: 2rem; }
|
||
.navbar { flex-direction: column; gap: 15px; }
|
||
.navbar-links { width: 100%; justify-content: center; }
|
||
}
|
||
</style>
|
||
<!-- 将CDN引入替换为本地引入 -->
|
||
<link rel="stylesheet" href="../layui/css/layui.css">
|
||
<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 active">首页</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"><i class="fas fa-history"></i> 历史记录</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="features">
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><i class="fas fa-magic"></i></div>
|
||
<h3 class="feature-title">智能提示词生成</h3>
|
||
<p class="feature-description">通过结构化模板，帮助您创建精准、生动的视频首帧描述</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><i class="fas fa-image"></i></div>
|
||
<h3 class="feature-title">AI图像生成</h3>
|
||
<p class="feature-description">基于提示词生成高质量、符合教育场景的视频首帧图片</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><i class="fas fa-film"></i></div>
|
||
<h3 class="feature-title">专业分镜头脚本</h3>
|
||
<p class="feature-description">自动生成符合电影语言的分镜头脚本，提升视频专业性</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 历史记录入口 -->
|
||
<div class="history-section">
|
||
<h2 class="history-title"><i class="fas fa-history"></i> 查看历史生成内容</h2>
|
||
<p class="history-description">访问您之前创建的所有提示词、生成的图片、分镜头脚本和视频，便于查看、管理和复用您的创作成果。</p>
|
||
<a href="history.html" class="btn btn-primary">查看历史记录</a>
|
||
</div>
|
||
|
||
<div class="timeline-container">
|
||
<div class="timeline-item left">
|
||
<div class="timeline-content">
|
||
<div class="timeline-icon"><i class="fas fa-align-left"></i></div>
|
||
<h3 class="timeline-title"><span class="step-number">1</span>首帧创作</h3>
|
||
<p class="timeline-description">通过结构化模板输入时间、场景、主体和氛围生成提示词，或直接上传一张图片作为首帧，两种方式任选其一。</p>
|
||
<div class="timeline-action">
|
||
<a href="prompt_input.html" class="btn btn-primary">开始创建</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item right">
|
||
<div class="timeline-content">
|
||
<div class="timeline-icon"><i class="fas fa-camera"></i></div>
|
||
<h3 class="timeline-title"><span class="step-number">2</span>首帧图片确认</h3>
|
||
<p class="timeline-description">查看基于提示词生成的图片或确认上传的图片，可调整或重新生成直到满意。</p>
|
||
<div class="timeline-action">
|
||
<button class="btn btn-secondary" disabled>稍后进行</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item left">
|
||
<div class="timeline-content">
|
||
<div class="timeline-icon"><i class="fas fa-story-palm"></i></div>
|
||
<h3 class="timeline-title"><span class="step-number">3</span>生成分镜头</h3>
|
||
<p class="timeline-description">AI分析首帧图片，自动生成专业的分镜头脚本，包含镜号、运镜和画面内容。</p>
|
||
<div class="timeline-action">
|
||
<button class="btn btn-secondary" disabled>稍后进行</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item right">
|
||
<div class="timeline-content">
|
||
<div class="timeline-icon"><i class="fas fa-video"></i></div>
|
||
<h3 class="timeline-title"><span class="step-number">4</span>生成视频</h3>
|
||
<p class="timeline-description">基于分镜头脚本，AI生成完整的教学视频，支持下载和分享。</p>
|
||
<div class="timeline-action">
|
||
<button class="btn btn-secondary" disabled>稍后进行</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
<p>© 2023 教学视频AI生成智能体 | 让教育内容创作更简单</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
// 简单的动画效果
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 为时间轴项添加滚动动画
|
||
const timelineItems = document.querySelectorAll('.timeline-item');
|
||
const featureCards = document.querySelectorAll('.feature-card');
|
||
const historySection = document.querySelector('.history-section');
|
||
|
||
function checkElements() {
|
||
const triggerBottom = window.innerHeight * 0.8;
|
||
|
||
timelineItems.forEach(item => {
|
||
const itemTop = item.getBoundingClientRect().top;
|
||
if (itemTop < triggerBottom) {
|
||
item.style.opacity = '1';
|
||
item.style.transform = 'translateY(0)';
|
||
}
|
||
});
|
||
|
||
featureCards.forEach(card => {
|
||
const cardTop = card.getBoundingClientRect().top;
|
||
if (cardTop < triggerBottom) {
|
||
card.style.opacity = '1';
|
||
card.style.transform = 'translateY(0)';
|
||
}
|
||
});
|
||
|
||
if (historySection) {
|
||
const historyTop = historySection.getBoundingClientRect().top;
|
||
if (historyTop < triggerBottom) {
|
||
historySection.style.opacity = '1';
|
||
historySection.style.transform = 'translateY(0)';
|
||
}
|
||
}
|
||
}
|
||
|
||
// 初始化样式
|
||
timelineItems.forEach(item => {
|
||
item.style.opacity = '0';
|
||
item.style.transform = 'translateY(20px)';
|
||
item.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
|
||
});
|
||
|
||
featureCards.forEach(card => {
|
||
card.style.opacity = '0';
|
||
card.style.transform = 'translateY(20px)';
|
||
card.style.transition = 'opacity 0.5s ease, transform 0.5s ease, delay 0.1s';
|
||
});
|
||
|
||
if (historySection) {
|
||
historySection.style.opacity = '0';
|
||
historySection.style.transform = 'translateY(20px)';
|
||
historySection.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
|
||
}
|
||
|
||
// 检查可见性
|
||
checkElements();
|
||
window.addEventListener('scroll', checkElements);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |