066eb8f820
Music Creation Page: - Vinyl 3D flip to view lyrics, tonearm animation, glow rotation effect - Circular SVG progress ring, speech bubble feedback, confirm dialog - Playlist modal, free creation input, lyrics formatting optimization - MiniMax API real music generation with SSE streaming progress Backend: - FastAPI proxy server.py for MiniMax API calls - Music + lyrics file persistence to Capybara music/ directory - GET /api/playlist endpoint for auto-building playlist from files UI/UX Refinements: - frontend-design skill compliance across all pages - Glassmorphism effects, modal interactions, scroll tap prevention - iPhone 12 Pro responsive layout (390x844) Flutter Development Preparation: - Installed flutter-expert skill with 6 reference docs - Added 5 Cursor Rules: official Flutter, clean architecture, UI performance, testing, Dart standards Assets: - 9 Capybara music MP3 files + lyrics TXT files - MiniMax API documentation Co-authored-by: Cursor <cursoragent@cursor.com>
73 lines
2.2 KiB
HTML
73 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
|
<title>Airhub - 故事生成中</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=DM+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
background: #FDF9F3;
|
|
}
|
|
|
|
/* Force Warm Sand */
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="loading-container">
|
|
<!-- Center Image -->
|
|
<img src="kapi写作中.png" alt="Writing Capybara" class="kapi-writing-img">
|
|
|
|
<!-- Dynamic Text -->
|
|
<div class="loading-text" id="loading-text">构思故事中...</div>
|
|
|
|
<!-- Progress Bar -->
|
|
<div class="progress-track">
|
|
<div class="progress-fill" id="progress-fill"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Progress Logic
|
|
const texts = [
|
|
{ pct: 20, text: "正在收集灵感碎片..." },
|
|
{ pct: 50, text: "正在往故事里撒魔法粉..." },
|
|
{ pct: 80, text: "正在编制最后的魔法..." },
|
|
{ pct: 98, text: "大功告成！" }
|
|
];
|
|
|
|
let progress = 0;
|
|
const fill = document.getElementById('progress-fill');
|
|
const textEl = document.getElementById('loading-text');
|
|
|
|
const interval = setInterval(() => {
|
|
progress += 1; // 0 to 100
|
|
|
|
// Visual Updates
|
|
fill.style.width = `${progress}%`;
|
|
|
|
// Text Updates
|
|
const target = texts.find(t => t.pct === progress);
|
|
if (target) {
|
|
textEl.innerText = target.text;
|
|
textEl.style.opacity = 0;
|
|
setTimeout(() => textEl.style.opacity = 1, 100); // Fade effect
|
|
}
|
|
|
|
if (progress >= 100) {
|
|
clearInterval(interval);
|
|
// Redirect
|
|
setTimeout(() => {
|
|
window.location.href = 'story-detail.html';
|
|
}, 500);
|
|
}
|
|
}, 35); // Total time ~3.5s
|
|
</script>
|
|
</body>
|
|
|
|
</html> |