205 lines
9.9 KiB
HTML
205 lines
9.9 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}首页 - 儿童语言学习系统{% endblock %}
|
||
|
||
{% block content %}
|
||
<!-- 1. 修复后的轮播图英雄区域 -->
|
||
<div id="heroCarousel" class="carousel slide hero-carousel-fixed" data-bs-ride="carousel">
|
||
<!-- 指示器 -->
|
||
<div class="carousel-indicators">
|
||
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
||
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
||
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
||
</div>
|
||
|
||
<!-- 轮播内容 -->
|
||
<div class="carousel-inner">
|
||
<!-- 第一个轮播项：语音克隆 -->
|
||
<div class="carousel-item active">
|
||
<img src="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" class="d-block w-100" alt="孩子在学习">
|
||
<div class="carousel-overlay"></div>
|
||
<div class="floating-decorations">
|
||
<div class="float-emoji">🎤</div>
|
||
<div class="float-emoji">🗣️</div>
|
||
<div class="float-emoji">✨</div>
|
||
<div class="float-emoji">🎵</div>
|
||
</div>
|
||
<div class="carousel-caption d-md-block">
|
||
<div class="hero-badge">🎉 AI语音黑科技</div>
|
||
<h1 class="hero-title">
|
||
<span class="highlight">听自己的声音</span><br>
|
||
快乐学说话！
|
||
</h1>
|
||
<p class="hero-subtitle">
|
||
哇！我们有个超酷的魔法，能让电脑学会说话像你一样好听！
|
||
再也不怕开口说话啦～
|
||
</p>
|
||
{% if not current_user.is_authenticated %}
|
||
<a href="{{ url_for('auth.register') }}" class="btn btn-hero">
|
||
<i class="fas fa-rocket me-2"></i>来试试这个魔法
|
||
</a>
|
||
{% else %}
|
||
<a href="{{ url_for('main.dashboard') }}" class="btn btn-hero">
|
||
<i class="fas fa-play me-2"></i>开始我的冒险
|
||
</a>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第二个轮播项：场景对话 -->
|
||
<div class="carousel-item">
|
||
<img src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" class="d-block w-100" alt="儿童游戏场景">
|
||
<div class="carousel-overlay"></div>
|
||
<div class="floating-decorations">
|
||
<div class="float-emoji">🏪</div>
|
||
<div class="float-emoji">🍕</div>
|
||
<div class="float-emoji">👫</div>
|
||
<div class="float-emoji">🎭</div>
|
||
</div>
|
||
<div class="carousel-caption d-md-block">
|
||
<div class="hero-badge">🎮 超多好玩场景</div>
|
||
<h1 class="hero-title">
|
||
<span class="highlight">像玩游戏一样</span><br>
|
||
练习说话！
|
||
</h1>
|
||
<p class="hero-subtitle">
|
||
去餐厅点好吃的、跟小朋友交朋友、当个小老板...
|
||
在各种好玩的情景里，自然而然学会表达！
|
||
</p>
|
||
<a href="{{ url_for('main.dashboard') if current_user.is_authenticated else url_for('auth.login') }}" class="btn btn-hero">
|
||
<i class="fas fa-gamepad me-2"></i>去玩场景游戏
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第三个轮播项：智能评估 -->
|
||
<div class="carousel-item">
|
||
<img src="https://images.unsplash.com/photo-1509909756405-be0199881695?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" class="d-block w-100" alt="孩子学习成长">
|
||
<div class="carousel-overlay"></div>
|
||
<div class="floating-decorations">
|
||
<div class="float-emoji">📊</div>
|
||
<div class="float-emoji">🌟</div>
|
||
<div class="float-emoji">🏆</div>
|
||
<div class="float-emoji">💡</div>
|
||
</div>
|
||
<div class="carousel-caption d-md-block">
|
||
<div class="hero-badge">🎯 智能小助手</div>
|
||
<h1 class="hero-title">
|
||
<span class="highlight">每次进步</span><br>
|
||
我们都看得见！
|
||
</h1>
|
||
<p class="hero-subtitle">
|
||
AI老师会仔细听你说的每一句话，告诉你哪里说得棒棒的，
|
||
哪里还能更棒！就像有个贴心的小伙伴在身边～
|
||
</p>
|
||
<a href="{{ url_for('main.dashboard') if current_user.is_authenticated else url_for('auth.login') }}" class="btn btn-hero">
|
||
<i class="fas fa-chart-line me-2"></i>看看我的成长
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 控制器 -->
|
||
<button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
|
||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||
<span class="visually-hidden">Previous</span>
|
||
</button>
|
||
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
|
||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||
<span class="visually-hidden">Next</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 波浪分隔符 -->
|
||
<div class="wavy-divider"></div>
|
||
|
||
<!-- 2. 特色功能 -->
|
||
<section class="page-section bg-light-kid">
|
||
<div class="container">
|
||
<div class="section-title">
|
||
<h2>为什么选择我们？</h2>
|
||
<p>创新技术 × 教育理念 = 完美的学习体验</p>
|
||
</div>
|
||
<div class="row g-4">
|
||
<div class="col-md-6 col-lg-3">
|
||
<div class="kid-feature-card">
|
||
<div class="icon-bubble" style="background-color: #e3f2fd;"><i class="fas fa-microphone-alt text-primary"></i></div>
|
||
<h5>语音克隆技术</h5>
|
||
<p>克隆孩子的声音，听到"自己"说话，激发学习兴趣。</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-lg-3">
|
||
<div class="kid-feature-card">
|
||
<div class="icon-bubble" style="background-color: #e0f7fa;"><i class="fas fa-robot" style="color:#00BCD4;"></i></div>
|
||
<h5>智能对话系统</h5>
|
||
<p>AI老师提供个性化、有趣的对话学习体验。</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-lg-3">
|
||
<div class="kid-feature-card">
|
||
<div class="icon-bubble" style="background-color: #fffde7;"><i class="fas fa-chart-line" style="color:#FFC107;"></i></div>
|
||
<h5>科学评估体系</h5>
|
||
<p>基于官方指南的四维度评估，科学跟踪进展。</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-lg-3">
|
||
<div class="kid-feature-card">
|
||
<div class="icon-bubble" style="background-color: #fbe9e7;"><i class="fas fa-gamepad" style="color:#FF5722;"></i></div>
|
||
<h5>场景化学习</h5>
|
||
<p>丰富的生活场景，在真实对话中提升语言能力。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3. 学习场景展示 -->
|
||
<section class="page-section">
|
||
<div class="container">
|
||
<div class="section-title">
|
||
<h2>丰富的学习场景</h2>
|
||
<p>在游戏中学习，在对话中成长</p>
|
||
</div>
|
||
<div class="row g-4">
|
||
<div class="col-md-4">
|
||
<div class="scenario-card-new">
|
||
<div class="scenario-icon"><i class="fas fa-handshake"></i></div>
|
||
<h5>社交互动</h5>
|
||
<p>学习如何交朋友、邀请游戏，培养社交语言技能。</p>
|
||
<div class="tags"><span class="tag">交朋友</span><span class="tag">团队合作</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="scenario-card-new">
|
||
<div class="scenario-icon" style="background-color: #e8f5e9; color: #4CAF50;"><i class="fas fa-utensils"></i></div>
|
||
<h5>日常生活</h5>
|
||
<p>模拟餐厅点餐、超市购物等真实生活情景。</p>
|
||
<div class="tags"><span class="tag">点餐</span><span class="tag">购物</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="scenario-card-new">
|
||
<div class="scenario-icon" style="background-color: #fff3e0; color: #FB8C00;"><i class="fas fa-puzzle-piece"></i></div>
|
||
<h5>游戏娱乐</h5>
|
||
<p>在角色扮演和趣味问答中，快乐地组织语言。</p>
|
||
<div class="tags"><span class="tag">益智游戏</span><span class="tag">角色扮演</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 4. 行动号召 -->
|
||
<section class="page-section cta-section-kid">
|
||
<div class="container text-center">
|
||
<h2>准备好开始奇妙的语言之旅了吗？</h2>
|
||
<p class="mb-4">立即加入我们，让孩子在快乐中成长，在对话中发现语言的魅力！</p>
|
||
{% if not current_user.is_authenticated %}
|
||
<a href="{{ url_for('auth.register') }}" class="btn btn-lg btn-kid-accent shadow-lg">
|
||
<i class="fas fa-rocket me-2"></i>立即开始免费体验
|
||
</a>
|
||
{% endif %}
|
||
</div>
|
||
</section>
|
||
{% endblock %}
|