From 2f1bef2c1861c3d6b69d4af22d15b36d566ee45c Mon Sep 17 00:00:00 2001
From: superlishunqin <852326703@qq.com>
Date: Mon, 22 Sep 2025 07:06:02 +0800
Subject: [PATCH] homepage

---
 app/static/css/style.css |  67 ++++++++-
 app/templates/index.html | 316 +++++++++++++++++++--------------------
 2 files changed, 217 insertions(+), 166 deletions(-)

diff --git a/app/static/css/style.css b/app/static/css/style.css
index 935789e..7e3ab48 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -1962,8 +1962,8 @@ a.btn:hover {
 }
 
 .hero-carousel-kid .carousel-item {
-    height: 75vh;
-    min-height: 600px;
+    height: 60vh;
+    min-height: 450px;
     position: relative;
 }
 
@@ -2000,7 +2000,7 @@ a.btn:hover {
 
 .kid-star {
     position: absolute;
-    font-size: 2rem;
+    font-size: 1.5rem;
     animation: kidStarFloat 4s ease-in-out infinite;
 }
 
@@ -2029,7 +2029,7 @@ a.btn:hover {
 
 .kid-cloud {
     position: absolute;
-    font-size: 2.5rem;
+    font-size: 2rem;
     animation: kidCloudDrift 8s ease-in-out infinite;
 }
 
@@ -2043,7 +2043,7 @@ a.btn:hover {
 
 .kid-balloon {
     position: absolute;
-    font-size: 2rem;
+    font-size: 1.5rem;
     animation: kidBalloonBob 3s ease-in-out infinite;
 }
 
@@ -2069,7 +2069,7 @@ a.btn:hover {
 
 .music-note {
     position: absolute;
-    font-size: 1.8rem;
+    font-size: 1.4rem;
     animation: musicFloat 6s ease-in-out infinite;
 }
 
@@ -2169,7 +2169,7 @@ a.btn:hover {
 }
 
 .hero-title-kid {
-    font-size: 4rem;
+    font-size: 3.2rem;
     font-weight: 900;
     line-height: 1.1;
     margin-bottom: 2rem;
@@ -2223,7 +2223,7 @@ a.btn:hover {
 }
 
 .hero-subtitle-kid {
-    font-size: 1.4rem;
+    font-size: 1.2rem;
     line-height: 1.8;
     margin-bottom: 2.5rem;
     opacity: 0.95;
@@ -4036,3 +4036,54 @@ a.btn:hover {
     }
 }
 
+
+
+/* 轮播图尺寸优化 */
+.hero-carousel-kid {
+    max-height: 60vh;
+}
+
+.hero-carousel-kid .carousel-item {
+    height: 60vh;
+    min-height: 450px;
+    max-height: 600px;
+}
+
+.kid-caption {
+    bottom: 20%;
+}
+
+/* 响应式轮播图优化 */
+@media (max-width: 768px) {
+    .hero-carousel-kid .carousel-item {
+        height: 50vh;
+        min-height: 400px;
+    }
+    
+    .hero-title-kid {
+        font-size: 2.5rem;
+    }
+    
+    .hero-subtitle-kid {
+        font-size: 1rem;
+    }
+    
+    .kid-caption {
+        bottom: 15%;
+    }
+}
+
+@media (max-width: 576px) {
+    .hero-carousel-kid .carousel-item {
+        height: 45vh;
+        min-height: 350px;
+    }
+    
+    .hero-title-kid {
+        font-size: 2rem;
+    }
+    
+    .hero-subtitle-kid {
+        font-size: 0.9rem;
+    }
+}
diff --git a/app/templates/index.html b/app/templates/index.html
index 1c779c7..2f4e955 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -150,164 +150,7 @@
     </svg>
 </div>
 
-<!-- 2. 核心功能展示 - 超丰富版 -->
-<section class="page-section bg-kid-wonderland">
-    <div class="container">
-        <div class="section-title-kid">
-            <h2 class="title-with-stars">✨ 我们的神奇功能 ✨</h2>
-            <p class="subtitle-rainbow">🎯 专为3-6岁小朋友精心设计的语言学习体验</p>
-            <div class="title-decoration">
-                <span class="deco-star">⭐</span>
-                <span class="deco-heart">💖</span>
-                <span class="deco-star">⭐</span>
-            </div>
-        </div>
-
-        <!-- 数据统计展示 -->
-        <div class="stats-showcase mb-5">
-            <div class="row g-4">
-                <div class="col-md-3 col-6">
-                    <div class="stat-card stat-users">
-                        <div class="stat-icon">👶</div>
-                        <div class="stat-number" data-count="1000">0</div>
-                        <div class="stat-label">快乐小用户</div>
-                    </div>
-                </div>
-                <div class="col-md-3 col-6">
-                    <div class="stat-card stat-conversations">
-                        <div class="stat-icon">💬</div>
-                        <div class="stat-number" data-count="5000">0</div>
-                        <div class="stat-label">有趣对话</div>
-                    </div>
-                </div>
-                <div class="col-md-3 col-6">
-                    <div class="stat-card stat-improvement">
-                        <div class="stat-icon">📈</div>
-                        <div class="stat-number" data-count="95">0</div>
-                        <div class="stat-label">%进步率</div>
-                    </div>
-                </div>
-                <div class="col-md-3 col-6">
-                    <div class="stat-card stat-satisfaction">
-                        <div class="stat-icon">😊</div>
-                        <div class="stat-number" data-count="98">0</div>
-                        <div class="stat-label">%满意度</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- 功能卡片 -->
-        <div class="row g-4 mb-5">
-            <div class="col-lg-6">
-                <div class="feature-card-advanced voice-clone-card">
-                    <div class="feature-header">
-                        <div class="feature-icon-big">🎤</div>
-                        <h4>🪄 神奇语音克隆</h4>
-                    </div>
-                    <div class="feature-body">
-                        <div class="feature-demo">
-                            <div class="voice-wave-demo">
-                                <div class="wave-bar"></div>
-                                <div class="wave-bar"></div>
-                                <div class="wave-bar"></div>
-                                <div class="wave-bar"></div>
-                                <div class="wave-bar"></div>
-                            </div>
-                            <p class="demo-text">只需3分钟录音，AI就能学会你的声音！</p>
-                        </div>
-                        <div class="feature-benefits">
-                            <div class="benefit-item">
-                                <span class="benefit-icon">🎯</span>
-                                <span>激发学习兴趣</span>
-                            </div>
-                            <div class="benefit-item">
-                                <span class="benefit-icon">🌟</span>
-                                <span>提升自信心</span>
-                            </div>
-                            <div class="benefit-item">
-                                <span class="benefit-icon">🎉</span>
-                                <span>个性化体验</span>
-                            </div>
-                        </div>
-                        <button class="btn btn-feature-try" onclick="location.href='{{ url_for('voice_clone.voice_clone_page') if current_user.is_authenticated else url_for('auth.login') }}'">
-                            <span class="btn-icon">🚀</span>
-                            立即体验
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-6">
-                <div class="feature-card-advanced ai-chat-card">
-                    <div class="feature-header">
-                        <div class="feature-icon-big">🤖</div>
-                        <h4>🧠 智能AI老师</h4>
-                    </div>
-                    <div class="feature-body">
-                        <div class="chat-demo">
-                            <div class="chat-bubble ai-bubble">
-                                <span class="typing-indicator">
-                                    <span></span>
-                                    <span></span>
-                                    <span></span>
-                                </span>
-                                你好小朋友！今天想聊什么呢？
-                            </div>
-                            <div class="chat-bubble user-bubble">
-                                我想和小兔子做朋友！
-                            </div>
-                        </div>
-                        <div class="ai-features">
-                            <div class="ai-feature">📚 个性化教学</div>
-                            <div class="ai-feature">🎯 实时评估</div>
-                            <div class="ai-feature">🌈 情感理解</div>
-                        </div>
-                        <button class="btn btn-feature-try" onclick="location.href='{{ url_for('main.dashboard') if current_user.is_authenticated else url_for('auth.login') }}'">
-                            <span class="btn-icon">💬</span>
-                            开始对话
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- 学习步骤 -->
-        <div class="learning-steps">
-            <h3 class="steps-title">🌟 学习就这么简单！</h3>
-            <div class="steps-container">
-                <div class="step-item">
-                    <div class="step-number">1</div>
-                    <div class="step-icon">🎤</div>
-                    <div class="step-title">录制声音</div>
-                    <div class="step-desc">录制3分钟声音样本</div>
-                </div>
-                <div class="step-arrow">→</div>
-                <div class="step-item">
-                    <div class="step-number">2</div>
-                    <div class="step-icon">🎭</div>
-                    <div class="step-title">选择场景</div>
-                    <div class="step-desc">挑选喜欢的对话场景</div>
-                </div>
-                <div class="step-arrow">→</div>
-                <div class="step-item">
-                    <div class="step-number">3</div>
-                    <div class="step-icon">💬</div>
-                    <div class="step-title">快乐对话</div>
-                    <div class="step-desc">和AI老师愉快聊天</div>
-                </div>
-                <div class="step-arrow">→</div>
-                <div class="step-item">
-                    <div class="step-number">4</div>
-                    <div class="step-icon">📈</div>
-                    <div class="step-title">查看进步</div>
-                    <div class="step-desc">获得专业评估反馈</div>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
-
-<!-- 3. 学习场景世界 - 超丰富版 -->
+<!-- 2. 学习场景世界 - 超丰富版 -->
 <section class="page-section bg-kid-playground">
     <div class="container">
         <div class="section-title-kid">
@@ -531,6 +374,163 @@
     </div>
 </section>
 
+<!-- 3. 核心功能展示 - 超丰富版 -->
+<section class="page-section bg-kid-wonderland">
+    <div class="container">
+        <div class="section-title-kid">
+            <h2 class="title-with-stars">✨ 我们的神奇功能 ✨</h2>
+            <p class="subtitle-rainbow">🎯 专为3-6岁小朋友精心设计的语言学习体验</p>
+            <div class="title-decoration">
+                <span class="deco-star">⭐</span>
+                <span class="deco-heart">💖</span>
+                <span class="deco-star">⭐</span>
+            </div>
+        </div>
+
+        <!-- 数据统计展示 -->
+        <div class="stats-showcase mb-5">
+            <div class="row g-4">
+                <div class="col-md-3 col-6">
+                    <div class="stat-card stat-users">
+                        <div class="stat-icon">👶</div>
+                        <div class="stat-number" data-count="1000">0</div>
+                        <div class="stat-label">快乐小用户</div>
+                    </div>
+                </div>
+                <div class="col-md-3 col-6">
+                    <div class="stat-card stat-conversations">
+                        <div class="stat-icon">💬</div>
+                        <div class="stat-number" data-count="5000">0</div>
+                        <div class="stat-label">有趣对话</div>
+                    </div>
+                </div>
+                <div class="col-md-3 col-6">
+                    <div class="stat-card stat-improvement">
+                        <div class="stat-icon">📈</div>
+                        <div class="stat-number" data-count="95">0</div>
+                        <div class="stat-label">%进步率</div>
+                    </div>
+                </div>
+                <div class="col-md-3 col-6">
+                    <div class="stat-card stat-satisfaction">
+                        <div class="stat-icon">😊</div>
+                        <div class="stat-number" data-count="98">0</div>
+                        <div class="stat-label">%满意度</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 功能卡片 -->
+        <div class="row g-4 mb-5">
+            <div class="col-lg-6">
+                <div class="feature-card-advanced voice-clone-card">
+                    <div class="feature-header">
+                        <div class="feature-icon-big">🎤</div>
+                        <h4>🪄 神奇语音克隆</h4>
+                    </div>
+                    <div class="feature-body">
+                        <div class="feature-demo">
+                            <div class="voice-wave-demo">
+                                <div class="wave-bar"></div>
+                                <div class="wave-bar"></div>
+                                <div class="wave-bar"></div>
+                                <div class="wave-bar"></div>
+                                <div class="wave-bar"></div>
+                            </div>
+                            <p class="demo-text">只需3分钟录音，AI就能学会你的声音！</p>
+                        </div>
+                        <div class="feature-benefits">
+                            <div class="benefit-item">
+                                <span class="benefit-icon">🎯</span>
+                                <span>激发学习兴趣</span>
+                            </div>
+                            <div class="benefit-item">
+                                <span class="benefit-icon">🌟</span>
+                                <span>提升自信心</span>
+                            </div>
+                            <div class="benefit-item">
+                                <span class="benefit-icon">🎉</span>
+                                <span>个性化体验</span>
+                            </div>
+                        </div>
+                        <button class="btn btn-feature-try" onclick="location.href='{{ url_for('voice_clone.voice_clone_page') if current_user.is_authenticated else url_for('auth.login') }}'">
+                            <span class="btn-icon">🚀</span>
+                            立即体验
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-6">
+                <div class="feature-card-advanced ai-chat-card">
+                    <div class="feature-header">
+                        <div class="feature-icon-big">🤖</div>
+                        <h4>🧠 智能AI老师</h4>
+                    </div>
+                    <div class="feature-body">
+                        <div class="chat-demo">
+                            <div class="chat-bubble ai-bubble">
+                                <span class="typing-indicator">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </span>
+                                你好小朋友！今天想聊什么呢？
+                            </div>
+                            <div class="chat-bubble user-bubble">
+                                我想和小兔子做朋友！
+                            </div>
+                        </div>
+                        <div class="ai-features">
+                            <div class="ai-feature">📚 个性化教学</div>
+                            <div class="ai-feature">🎯 实时评估</div>
+                            <div class="ai-feature">🌈 情感理解</div>
+                        </div>
+                        <button class="btn btn-feature-try" onclick="location.href='{{ url_for('main.dashboard') if current_user.is_authenticated else url_for('auth.login') }}'">
+                            <span class="btn-icon">💬</span>
+                            开始对话
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 学习步骤 -->
+        <div class="learning-steps">
+            <h3 class="steps-title">🌟 学习就这么简单！</h3>
+            <div class="steps-container">
+                <div class="step-item">
+                    <div class="step-number">1</div>
+                    <div class="step-icon">🎤</div>
+                    <div class="step-title">录制声音</div>
+                    <div class="step-desc">录制3分钟声音样本</div>
+                </div>
+                <div class="step-arrow">→</div>
+                <div class="step-item">
+                    <div class="step-number">2</div>
+                    <div class="step-icon">🎭</div>
+                    <div class="step-title">选择场景</div>
+                    <div class="step-desc">挑选喜欢的对话场景</div>
+                </div>
+                <div class="step-arrow">→</div>
+                <div class="step-item">
+                    <div class="step-number">3</div>
+                    <div class="step-icon">💬</div>
+                    <div class="step-title">快乐对话</div>
+                    <div class="step-desc">和AI老师愉快聊天</div>
+                </div>
+                <div class="step-arrow">→</div>
+                <div class="step-item">
+                    <div class="step-number">4</div>
+                    <div class="step-icon">📈</div>
+                    <div class="step-title">查看进步</div>
+                    <div class="step-desc">获得专业评估反馈</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
 <!-- 4. 超级行动号召区 -->
 <section class="page-section cta-section-mega">
     <div class="container">