312 lines
18 KiB
HTML
312 lines
18 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; }
|
||
|
||
/* 表单样式 */
|
||
.form-container { background-color: white; border-radius: 10px; padding: 30px; margin-bottom: 40px; box-shadow: 0 2px 15px rgba(0,0,0,0.05); }
|
||
.form-title { font-size: 1.8rem; margin-bottom: 20px; color: #2c3e50; text-align: center; }
|
||
.form-group { margin-bottom: 25px; }
|
||
.form-label { display: block; margin-bottom: 10px; font-weight: 500; color: #2c3e50; }
|
||
.form-input { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; transition: border 0.3s; }
|
||
.form-input:focus { border-color: #3498db; outline: none; }
|
||
.form-select { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; background-color: white; transition: border 0.3s; }
|
||
.form-select:focus { border-color: #3498db; outline: none; }
|
||
.form-helper { font-size: 14px; color: #7f8c8d; margin-top: 5px; }
|
||
.btn { padding: 12px 25px; 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; }
|
||
.form-actions { text-align: center; margin-top: 30px; }
|
||
|
||
/* 结果展示区域 */
|
||
.result-container { background-color: white; border-radius: 10px; padding: 30px; margin-bottom: 40px; box-shadow: 0 2px 15px rgba(0,0,0,0.05); display: none; }
|
||
.result-title { font-size: 1.8rem; margin-bottom: 20px; color: #2c3e50; text-align: center; }
|
||
.result-content { background-color: #f8f9fa; padding: 20px; border-radius: 6px; border: 1px solid #eee; font-size: 16px; line-height: 1.6; min-height: 100px; word-break: break-all; }
|
||
.result-actions { text-align: center; margin-top: 20px; }
|
||
|
||
/* 功能特点区域 */
|
||
.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; }
|
||
|
||
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; }
|
||
.feature-card { width: 100%; max-width: 300px; }
|
||
}
|
||
</style>
|
||
<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">首页</a>
|
||
<a href="prompt_input.html" class="navbar-link active">音乐创作</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-music"></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-sliders-h"></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-magic"></i></div>
|
||
<h3 class="feature-title">AI智能生成</h3>
|
||
<p class="feature-description">基于提示词生成高质量、符合教学场景的音乐内容</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提示词生成表单 -->
|
||
<div class="form-container">
|
||
<h2 class="form-title"><i class="fas fa-magic"></i> 音乐提示词生成器</h2>
|
||
<form id="musicPromptForm">
|
||
<div class="form-group">
|
||
<label for="style" class="form-label">1. 音乐风格与时代</label>
|
||
<select id="style" class="form-select" required>
|
||
<option value="">请选择音乐风格</option>
|
||
<option value="华语流行">华语流行</option>
|
||
<option value="City Pop">City Pop</option>
|
||
<option value="古风">古风</option>
|
||
<option value="民谣">民谣</option>
|
||
<option value="电子 R&B">电子 R&B</option>
|
||
<option value=" Classical">古典</option>
|
||
<option value="爵士">爵士</option>
|
||
<option value="摇滚">摇滚</option>
|
||
</select>
|
||
<div class="form-helper">示例：「华语流行」「City Pop」「古风」</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="mood" class="form-label">2. 情绪与场景</label>
|
||
<select id="mood" class="form-select" required>
|
||
<option value="">请选择情绪与场景</option>
|
||
<option value="夏日海边">夏日海边</option>
|
||
<option value="深夜治愈">深夜治愈</option>
|
||
<option value="热血励志">热血励志</option>
|
||
<option value="国风江湖">国风江湖</option>
|
||
<option value="安静学习">安静学习</option>
|
||
<option value="欢快活泼">欢快活泼</option>
|
||
<option value="庄重严肃">庄重严肃</option>
|
||
<option value="温馨感人">温馨感人</option>
|
||
</select>
|
||
<div class="form-helper">示例：「夏日海边」「深夜治愈」「热血励志」</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="vocal" class="form-label">3. 主唱性别与音色</label>
|
||
<select id="vocal" class="form-select" required>
|
||
<option value="">请选择主唱风格</option>
|
||
<option value="清澈男声">清澈男声</option>
|
||
<option value="温柔女声">温柔女声</option>
|
||
<option value="童声合唱">童声合唱</option>
|
||
<option value="沙哑烟嗓">沙哑烟嗓</option>
|
||
<option value="甜美女声">甜美女声</option>
|
||
<option value="低沉男声">低沉男声</option>
|
||
<option value="高亢女声">高亢女声</option>
|
||
<option value="中性嗓音">中性嗓音</option>
|
||
</select>
|
||
<div class="form-helper">示例：「清澈男声」「温柔女声」「童声合唱」</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="tempo" class="form-label">4. 节拍与速度</label>
|
||
<select id="tempo" class="form-select" required>
|
||
<option value="">请选择节拍与速度</option>
|
||
<option value="4/4 拍 100 BPM">4/4 拍 100 BPM</option>
|
||
<option value="6/8 拍 85 BPM 慢摇">6/8 拍 85 BPM 慢摇</option>
|
||
<option value="4/4 拍 120 BPM">4/4 拍 120 BPM</option>
|
||
<option value="3/4 拍 90 BPM">3/4 拍 90 BPM</option>
|
||
<option value="4/4 拍 80 BPM">4/4 拍 80 BPM</option>
|
||
<option value="4/4 拍 140 BPM">4/4 拍 140 BPM</option>
|
||
</select>
|
||
<div class="form-helper">示例：「4/4 拍 100 BPM」「6/8 拍 85 BPM 慢摇」</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="instruments" class="form-label">5. 乐器与编曲亮点</label>
|
||
<select id="instruments" class="form-select" required>
|
||
<option value="">请选择乐器配置</option>
|
||
<option value="木吉他主奏">木吉他主奏</option>
|
||
<option value="钢琴弦乐">钢琴弦乐</option>
|
||
<option value="古筝+电子鼓">古筝+电子鼓</option>
|
||
<option value="808 鼓点+萨克斯">808 鼓点+萨克斯</option>
|
||
<option value="小提琴+钢琴">小提琴+钢琴</option>
|
||
<option value="吉他+贝斯+鼓">吉他+贝斯+鼓</option>
|
||
<option value="电子合成器">电子合成器</option>
|
||
<option value="笛子+古筝">笛子+古筝</option>
|
||
</select>
|
||
<div class="form-helper">示例：「木吉他主奏」「钢琴弦乐」「古筝+电子鼓」</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="theme" class="form-label">6. 主题/歌词关键词</label>
|
||
<input type="text" id="theme" class="form-input" placeholder="请输入主题关键词" required>
|
||
<div class="form-helper">示例：「把星星装进信封」「江湖路远，少年不老」「知识就是力量」</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="teachingSubject" class="form-label">7. 教学科目（可选）</label>
|
||
<input type="text" id="teachingSubject" class="form-input" placeholder="例如：数学、语文、英语等">
|
||
<div class="form-helper">添加教学科目可以让音乐更贴合特定学科的学习氛围</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary"><i class="fas fa-magic"></i> 生成音乐提示词</button>
|
||
<button type="button" id="resetForm" class="btn btn-secondary"><i class="fas fa-undo"></i> 重置</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- 结果展示区域 -->
|
||
<div id="resultContainer" class="result-container">
|
||
<h2 class="result-title"><i class="fas fa-music"></i> 生成的音乐提示词</h2>
|
||
<div id="resultContent" class="result-content"></div>
|
||
<div class="result-actions">
|
||
<button id="copyResult" class="btn btn-primary"><i class="fas fa-copy"></i> 复制提示词</button>
|
||
<button id="generateMusic" class="btn btn-secondary"><i class="fas fa-play"></i> 生成音乐</button>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
<p>© 2023 教学音乐AI生成助手 | 让教育内容创作更简单</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 表单提交事件
|
||
const form = document.getElementById('musicPromptForm');
|
||
const resultContainer = document.getElementById('resultContainer');
|
||
const resultContent = document.getElementById('resultContent');
|
||
const resetFormBtn = document.getElementById('resetForm');
|
||
const copyResultBtn = document.getElementById('copyResult');
|
||
const generateMusicBtn = document.getElementById('generateMusic');
|
||
|
||
form.addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
|
||
// 获取表单数据
|
||
const style = document.getElementById('style').value;
|
||
const mood = document.getElementById('mood').value;
|
||
const vocal = document.getElementById('vocal').value;
|
||
const tempo = document.getElementById('tempo').value;
|
||
const instruments = document.getElementById('instruments').value;
|
||
const theme = document.getElementById('theme').value;
|
||
const teachingSubject = document.getElementById('teachingSubject').value;
|
||
|
||
// 生成提示词
|
||
let prompt = `${style} ${mood}，${vocal}，${tempo}，配${instruments}，主题围绕'${theme}'`;
|
||
if (teachingSubject) {
|
||
prompt += `，适合${teachingSubject}教学使用`;
|
||
}
|
||
prompt += `，时长 2 分钟。`;
|
||
|
||
// 显示结果
|
||
resultContent.textContent = prompt;
|
||
resultContainer.style.display = 'block';
|
||
|
||
// 滚动到结果区域
|
||
resultContainer.scrollIntoView({ behavior: 'smooth' });
|
||
});
|
||
|
||
// 重置表单
|
||
resetFormBtn.addEventListener('click', function() {
|
||
form.reset();
|
||
resultContainer.style.display = 'none';
|
||
});
|
||
|
||
// 复制结果
|
||
copyResultBtn.addEventListener('click', function() {
|
||
const textToCopy = resultContent.textContent;
|
||
navigator.clipboard.writeText(textToCopy).then(function() {
|
||
// 显示复制成功提示
|
||
const originalText = copyResultBtn.innerHTML;
|
||
copyResultBtn.innerHTML = '<i class="fas fa-check"></i> 已复制';
|
||
setTimeout(function() {
|
||
copyResultBtn.innerHTML = originalText;
|
||
}, 2000);
|
||
});
|
||
});
|
||
|
||
// 生成音乐
|
||
generateMusicBtn.addEventListener('click', function() {
|
||
alert('音乐生成功能已触发，正在处理您的请求...');
|
||
// 这里可以添加实际的音乐生成逻辑
|
||
});
|
||
|
||
// 添加页面加载动画
|
||
const featureCards = document.querySelectorAll('.feature-card');
|
||
|
||
function checkElements() {
|
||
const triggerBottom = window.innerHeight * 0.8;
|
||
|
||
featureCards.forEach(card => {
|
||
const cardTop = card.getBoundingClientRect().top;
|
||
if (cardTop < triggerBottom) {
|
||
card.style.opacity = '1';
|
||
card.style.transform = 'translateY(0)';
|
||
}
|
||
});
|
||
}
|
||
|
||
// 初始化样式
|
||
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';
|
||
});
|
||
|
||
// 检查可见性
|
||
checkElements();
|
||
window.addEventListener('scroll', checkElements);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |