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=Inter:wght@400;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_writing.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> |