homepage
This commit is contained in:
superlishunqin
parent
5b58fdfeed
commit
2f1bef2c18
@ -1962,8 +1962,8 @@ a.btn:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero-carousel-kid .carousel-item {
|
.hero-carousel-kid .carousel-item {
|
||||||
height: 75vh;
|
height: 60vh;
|
||||||
min-height: 600px;
|
min-height: 450px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2000,7 +2000,7 @@ a.btn:hover {
|
|||||||
|
|
||||||
.kid-star {
|
.kid-star {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 2rem;
|
font-size: 1.5rem;
|
||||||
animation: kidStarFloat 4s ease-in-out infinite;
|
animation: kidStarFloat 4s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2029,7 +2029,7 @@ a.btn:hover {
|
|||||||
|
|
||||||
.kid-cloud {
|
.kid-cloud {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 2.5rem;
|
font-size: 2rem;
|
||||||
animation: kidCloudDrift 8s ease-in-out infinite;
|
animation: kidCloudDrift 8s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2043,7 +2043,7 @@ a.btn:hover {
|
|||||||
|
|
||||||
.kid-balloon {
|
.kid-balloon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 2rem;
|
font-size: 1.5rem;
|
||||||
animation: kidBalloonBob 3s ease-in-out infinite;
|
animation: kidBalloonBob 3s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2069,7 +2069,7 @@ a.btn:hover {
|
|||||||
|
|
||||||
.music-note {
|
.music-note {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 1.8rem;
|
font-size: 1.4rem;
|
||||||
animation: musicFloat 6s ease-in-out infinite;
|
animation: musicFloat 6s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2169,7 +2169,7 @@ a.btn:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero-title-kid {
|
.hero-title-kid {
|
||||||
font-size: 4rem;
|
font-size: 3.2rem;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
@ -2223,7 +2223,7 @@ a.btn:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero-subtitle-kid {
|
.hero-subtitle-kid {
|
||||||
font-size: 1.4rem;
|
font-size: 1.2rem;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
margin-bottom: 2.5rem;
|
margin-bottom: 2.5rem;
|
||||||
opacity: 0.95;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -150,164 +150,7 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 2. 核心功能展示 - 超丰富版 -->
|
<!-- 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. 学习场景世界 - 超丰富版 -->
|
|
||||||
<section class="page-section bg-kid-playground">
|
<section class="page-section bg-kid-playground">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-title-kid">
|
<div class="section-title-kid">
|
||||||
@ -531,6 +374,163 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</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. 超级行动号召区 -->
|
<!-- 4. 超级行动号召区 -->
|
||||||
<section class="page-section cta-section-mega">
|
<section class="page-section cta-section-mega">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user