676 lines
33 KiB
HTML
676 lines
33 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}首页 - 儿童语言学习系统{% endblock %}
|
||
|
||
{% block content %}
|
||
<!-- 1. 童趣轮播图英雄区域 -->
|
||
<div id="heroCarousel" class="carousel slide hero-carousel-kid" 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-1596464716127-f2a82984de30?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" class="d-block w-100" alt="快乐学习的小朋友">
|
||
<div class="carousel-overlay-kid"></div>
|
||
|
||
<!-- 童趣装饰元素 -->
|
||
<div class="kid-decorations">
|
||
<div class="kid-star kid-star-1">⭐</div>
|
||
<div class="kid-star kid-star-2">🌟</div>
|
||
<div class="kid-star kid-star-3">✨</div>
|
||
<div class="kid-cloud kid-cloud-1">☁️</div>
|
||
<div class="kid-cloud kid-cloud-2">☁️</div>
|
||
<div class="kid-balloon kid-balloon-1">🎈</div>
|
||
<div class="kid-balloon kid-balloon-2">🎈</div>
|
||
<div class="kid-balloon kid-balloon-3">🎈</div>
|
||
</div>
|
||
|
||
<!-- 音乐符号动画 -->
|
||
<div class="music-notes">
|
||
<div class="music-note music-note-1">🎵</div>
|
||
<div class="music-note music-note-2">🎶</div>
|
||
<div class="music-note music-note-3">🎵</div>
|
||
<div class="music-note music-note-4">🎶</div>
|
||
</div>
|
||
|
||
<div class="carousel-caption d-md-block kid-caption">
|
||
<div class="hero-badge-kid">🎤 神奇的声音魔法</div>
|
||
<h1 class="hero-title-kid">
|
||
<span class="rainbow-text">听自己的声音</span><br>
|
||
<span class="bounce-text">快乐学说话！</span>
|
||
</h1>
|
||
<p class="hero-subtitle-kid">
|
||
🌈 哇！我们有个超级厉害的魔法，能让电脑学会说话像你一样好听！<br>
|
||
🚀 再也不怕开口说话啦，来和AI老师一起玩吧～
|
||
</p>
|
||
{% if not current_user.is_authenticated %}
|
||
<a href="{{ url_for('auth.register') }}" class="btn btn-hero-kid btn-magic">
|
||
<i class="fas fa-rocket me-2"></i>🎉 来试试这个魔法
|
||
</a>
|
||
{% else %}
|
||
<a href="{{ url_for('main.dashboard') }}" class="btn btn-hero-kid btn-adventure">
|
||
<i class="fas fa-play me-2"></i>🏃♂️ 开始我的冒险
|
||
</a>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第二个轮播项：场景对话 -->
|
||
<div class="carousel-item">
|
||
<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-kid"></div>
|
||
|
||
<!-- 游戏装饰元素 -->
|
||
<div class="kid-decorations">
|
||
<div class="kid-toy toy-1">🧸</div>
|
||
<div class="kid-toy toy-2">🎲</div>
|
||
<div class="kid-toy toy-3">🎭</div>
|
||
<div class="kid-game game-1">🏪</div>
|
||
<div class="kid-game game-2">🍕</div>
|
||
<div class="kid-game game-3">👫</div>
|
||
<div class="kid-spark spark-1">💫</div>
|
||
<div class="kid-spark spark-2">✨</div>
|
||
</div>
|
||
|
||
<div class="carousel-caption d-md-block kid-caption">
|
||
<div class="hero-badge-kid">🎮 超多好玩场景</div>
|
||
<h1 class="hero-title-kid">
|
||
<span class="rainbow-text">像玩游戏一样</span><br>
|
||
<span class="wiggle-text">练习说话！</span>
|
||
</h1>
|
||
<p class="hero-subtitle-kid">
|
||
🏪 去餐厅点好吃的、🤝 跟小朋友交朋友、👔 当个小老板...<br>
|
||
🎭 在各种好玩的情景里，自然而然学会表达！
|
||
</p>
|
||
<a href="{{ url_for('main.dashboard') if current_user.is_authenticated else url_for('auth.login') }}" class="btn btn-hero-kid btn-play">
|
||
<i class="fas fa-gamepad me-2"></i>🎲 去玩场景游戏
|
||
</a>
|
||
</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-kid"></div>
|
||
|
||
<!-- 成长装饰元素 -->
|
||
<div class="kid-decorations">
|
||
<div class="kid-trophy trophy-1">🏆</div>
|
||
<div class="kid-trophy trophy-2">🥇</div>
|
||
<div class="kid-star star-big">🌟</div>
|
||
<div class="kid-rocket rocket-1">🚀</div>
|
||
<div class="kid-flower flower-1">🌸</div>
|
||
<div class="kid-flower flower-2">🌺</div>
|
||
<div class="kid-rainbow">🌈</div>
|
||
</div>
|
||
|
||
<div class="carousel-caption d-md-block kid-caption">
|
||
<div class="hero-badge-kid">🎯 智能小助手</div>
|
||
<h1 class="hero-title-kid">
|
||
<span class="rainbow-text">每次进步</span><br>
|
||
<span class="scale-text">我们都看得见！</span>
|
||
</h1>
|
||
<p class="hero-subtitle-kid">
|
||
🤖 AI老师会仔细听你说的每一句话，告诉你哪里说得棒棒的，<br>
|
||
📈 哪里还能更棒！就像有个贴心的小伙伴在身边～
|
||
</p>
|
||
<a href="{{ url_for('main.dashboard') if current_user.is_authenticated else url_for('auth.login') }}" class="btn btn-hero-kid btn-growth">
|
||
<i class="fas fa-chart-line me-2"></i>📊 看看我的成长
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 控制器 -->
|
||
<button class="carousel-control-prev kid-control" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
|
||
<span class="kid-arrow-prev">◀️</span>
|
||
<span class="visually-hidden">Previous</span>
|
||
</button>
|
||
<button class="carousel-control-next kid-control" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
|
||
<span class="kid-arrow-next">▶️</span>
|
||
<span class="visually-hidden">Next</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 童趣波浪分隔符 -->
|
||
<div class="kid-wavy-divider">
|
||
<svg viewBox="0 0 1440 120" xmlns="http://www.w3.org/2000/svg">
|
||
<path fill="#ffffff" d="M0,80L80,85.3C160,91,320,101,480,96C640,91,800,69,960,64C1120,59,1280,69,1360,74.7L1440,80L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z">
|
||
<animate attributeName="d" dur="10s" repeatCount="indefinite"
|
||
values="M0,80L80,85.3C160,91,320,101,480,96C640,91,800,69,960,64C1120,59,1280,69,1360,74.7L1440,80L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z;
|
||
M0,96L80,90.7C160,85,320,75,480,80C640,85,800,107,960,112C1120,117,1280,107,1360,101.3L1440,96L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z;
|
||
M0,80L80,85.3C160,91,320,101,480,96C640,91,800,69,960,64C1120,59,1280,69,1360,74.7L1440,80L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z"/>
|
||
</path>
|
||
</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. 学习场景世界 - 超丰富版 -->
|
||
<section class="page-section bg-kid-playground">
|
||
<div class="container">
|
||
<div class="section-title-kid">
|
||
<h2 class="title-with-emojis">🌍 奇妙的学习世界 🌍</h2>
|
||
<p class="subtitle-fun">🎪 12+精彩场景，让每次对话都是一场冒险！</p>
|
||
<div class="title-decoration">
|
||
<span class="deco-balloon">🎈</span>
|
||
<span class="deco-gift">🎁</span>
|
||
<span class="deco-balloon">🎈</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 场景分类导航 -->
|
||
<div class="scenario-nav">
|
||
<button class="scenario-nav-btn active" data-category="all">
|
||
<span class="nav-icon">🌟</span>全部场景
|
||
</button>
|
||
<button class="scenario-nav-btn" data-category="social">
|
||
<span class="nav-icon">👫</span>社交互动
|
||
</button>
|
||
<button class="scenario-nav-btn" data-category="daily">
|
||
<span class="nav-icon">🏠</span>日常生活
|
||
</button>
|
||
<button class="scenario-nav-btn" data-category="fun">
|
||
<span class="nav-icon">🎪</span>游戏娱乐
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 场景卡片网格 -->
|
||
<div class="scenarios-grid">
|
||
<!-- 社交互动场景 -->
|
||
<div class="scenario-card-new" data-category="social">
|
||
<div class="scenario-thumbnail">
|
||
<div class="scenario-bg social-bg"></div>
|
||
<div class="scenario-emoji">🤝</div>
|
||
<div class="scenario-difficulty">😊 简单</div>
|
||
</div>
|
||
<div class="scenario-content">
|
||
<h5>👫 和小明交朋友</h5>
|
||
<p>学习自我介绍，练习礼貌用语，培养社交技能</p>
|
||
<div class="scenario-stats">
|
||
<span class="stat">⏱️ 10-15分钟</span>
|
||
<span class="stat">🎯 5-8个问题</span>
|
||
</div>
|
||
<div class="scenario-tags">
|
||
<span class="tag">自我介绍</span>
|
||
<span class="tag">礼貌用语</span>
|
||
</div>
|
||
<div class="scenario-preview">
|
||
<button class="btn-preview" onclick="showPreview('friend')">
|
||
<i class="fas fa-play"></i> 预览对话
|
||
</button>
|
||
<button class="btn-start">
|
||
<i class="fas fa-rocket"></i> 开始体验
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="scenario-card-new" data-category="social">
|
||
<div class="scenario-thumbnail">
|
||
<div class="scenario-bg social-bg"></div>
|
||
<div class="scenario-emoji">🎉</div>
|
||
<div class="scenario-difficulty">😎 中等</div>
|
||
</div>
|
||
<div class="scenario-content">
|
||
<h5>🎂 生日派对邀请</h5>
|
||
<p>学习邀请朋友参加聚会，表达邀请和感谢</p>
|
||
<div class="scenario-stats">
|
||
<span class="stat">⏱️ 12-18分钟</span>
|
||
<span class="stat">🎯 6-10个问题</span>
|
||
</div>
|
||
<div class="scenario-tags">
|
||
<span class="tag">邀请表达</span>
|
||
<span class="tag">聚会礼仪</span>
|
||
</div>
|
||
<div class="scenario-preview">
|
||
<button class="btn-preview" onclick="showPreview('party')">
|
||
<i class="fas fa-play"></i> 预览对话
|
||
</button>
|
||
<button class="btn-start">
|
||
<i class="fas fa-rocket"></i> 开始体验
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 日常生活场景 -->
|
||
<div class="scenario-card-new" data-category="daily">
|
||
<div class="scenario-thumbnail">
|
||
<div class="scenario-bg daily-bg"></div>
|
||
<div class="scenario-emoji">🍕</div>
|
||
<div class="scenario-difficulty">😊 简单</div>
|
||
</div>
|
||
<div class="scenario-content">
|
||
<h5>🏪 餐厅点餐小达人</h5>
|
||
<p>模拟真实点餐场景，学习食物名称和点餐礼仪</p>
|
||
<div class="scenario-stats">
|
||
<span class="stat">⏱️ 8-12分钟</span>
|
||
<span class="stat">🎯 4-6个问题</span>
|
||
</div>
|
||
<div class="scenario-tags">
|
||
<span class="tag">食物词汇</span>
|
||
<span class="tag">服务礼仪</span>
|
||
</div>
|
||
<div class="scenario-preview">
|
||
<button class="btn-preview" onclick="showPreview('restaurant')">
|
||
<i class="fas fa-play"></i> 预览对话
|
||
</button>
|
||
<button class="btn-start">
|
||
<i class="fas fa-rocket"></i> 开始体验
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="scenario-card-new" data-category="daily">
|
||
<div class="scenario-thumbnail">
|
||
<div class="scenario-bg daily-bg"></div>
|
||
<div class="scenario-emoji">🛒</div>
|
||
<div class="scenario-difficulty">😎 中等</div>
|
||
</div>
|
||
<div class="scenario-content">
|
||
<h5>🛍️ 超市购物助手</h5>
|
||
<p>体验购物流程，学习商品分类和数量表达</p>
|
||
<div class="scenario-stats">
|
||
<span class="stat">⏱️ 15-20分钟</span>
|
||
<span class="stat">🎯 8-12个问题</span>
|
||
</div>
|
||
<div class="scenario-tags">
|
||
<span class="tag">商品名称</span>
|
||
<span class="tag">数量计算</span>
|
||
</div>
|
||
<div class="scenario-preview">
|
||
<button class="btn-preview" onclick="showPreview('shopping')">
|
||
<i class="fas fa-play"></i> 预览对话
|
||
</button>
|
||
<button class="btn-start">
|
||
<i class="fas fa-rocket"></i> 开始体验
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 游戏娱乐场景 -->
|
||
<div class="scenario-card-new" data-category="fun">
|
||
<div class="scenario-thumbnail">
|
||
<div class="scenario-bg fun-bg"></div>
|
||
<div class="scenario-emoji">🧩</div>
|
||
<div class="scenario-difficulty">🤩 有趣</div>
|
||
</div>
|
||
<div class="scenario-content">
|
||
<h5>🎭 小小演员训练营</h5>
|
||
<p>角色扮演游戏，发挥想象力，练习情感表达</p>
|
||
<div class="scenario-stats">
|
||
<span class="stat">⏱️ 20-25分钟</span>
|
||
<span class="stat">🎯 10-15个问题</span>
|
||
</div>
|
||
<div class="scenario-tags">
|
||
<span class="tag">角色扮演</span>
|
||
<span class="tag">创意表达</span>
|
||
</div>
|
||
<div class="scenario-preview">
|
||
<button class="btn-preview" onclick="showPreview('actor')">
|
||
<i class="fas fa-play"></i> 预览对话
|
||
</button>
|
||
<button class="btn-start">
|
||
<i class="fas fa-rocket"></i> 开始体验
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="scenario-card-new" data-category="fun">
|
||
<div class="scenario-thumbnail">
|
||
<div class="scenario-bg fun-bg"></div>
|
||
<div class="scenario-emoji">🎨</div>
|
||
<div class="scenario-difficulty">🤩 有趣</div>
|
||
</div>
|
||
<div class="scenario-content">
|
||
<h5>🌈 创意故事大王</h5>
|
||
<p>编织奇妙故事，锻炼逻辑思维和语言组织能力</p>
|
||
<div class="scenario-stats">
|
||
<span class="stat">⏱️ 25-30分钟</span>
|
||
<span class="stat">🎯 12-18个问题</span>
|
||
</div>
|
||
<div class="scenario-tags">
|
||
<span class="tag">故事创作</span>
|
||
<span class="tag">逻辑思维</span>
|
||
</div>
|
||
<div class="scenario-preview">
|
||
<button class="btn-preview" onclick="showPreview('story')">
|
||
<i class="fas fa-play"></i> 预览对话
|
||
</button>
|
||
<button class="btn-start">
|
||
<i class="fas fa-rocket"></i> 开始体验
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 场景预览弹窗 -->
|
||
<div id="scenarioPreview" class="scenario-preview-modal">
|
||
<div class="preview-content">
|
||
<div class="preview-header">
|
||
<h4 id="previewTitle">对话预览</h4>
|
||
<button class="preview-close" onclick="closePreview()">×</button>
|
||
</div>
|
||
<div class="preview-body">
|
||
<div id="previewChat" class="preview-chat">
|
||
<!-- 动态加载对话内容 -->
|
||
</div>
|
||
</div>
|
||
<div class="preview-footer">
|
||
<button class="btn btn-preview-close" onclick="closePreview()">关闭预览</button>
|
||
<button class="btn btn-preview-start">立即开始体验</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 4. 超级行动号召区 -->
|
||
<section class="page-section cta-section-mega">
|
||
<div class="container">
|
||
<!-- 背景装饰 -->
|
||
<div class="cta-mega-decorations">
|
||
<div class="cta-floating floating-1">🚀</div>
|
||
<div class="cta-floating floating-2">⭐</div>
|
||
<div class="cta-floating floating-3">🌈</div>
|
||
<div class="cta-floating floating-4">🎈</div>
|
||
<div class="cta-floating floating-5">✨</div>
|
||
<div class="cta-floating floating-6">🎉</div>
|
||
</div>
|
||
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-6">
|
||
<div class="cta-content">
|
||
<h2 class="cta-mega-title">
|
||
🌟 开启孩子的<br>
|
||
<span class="highlight-text">语言天赋之旅</span>
|
||
</h2>
|
||
<p class="cta-mega-subtitle">
|
||
🎯 专业教育团队 × AI黑科技 × 童趣设计<br>
|
||
让每个孩子都能自信表达，快乐成长！
|
||
</p>
|
||
|
||
<!-- 优势列表 -->
|
||
<div class="cta-benefits">
|
||
<div class="benefit-row">
|
||
<div class="benefit-icon">🆓</div>
|
||
<div class="benefit-text">
|
||
<strong>完全免费体验</strong>
|
||
<small>无需付费，立即开始学习</small>
|
||
</div>
|
||
</div>
|
||
<div class="benefit-row">
|
||
<div class="benefit-icon">🎯</div>
|
||
<div class="benefit-text">
|
||
<strong>个性化AI老师</strong>
|
||
<small>根据孩子特点调整教学方式</small>
|
||
</div>
|
||
</div>
|
||
<div class="benefit-row">
|
||
<div class="benefit-icon">📱</div>
|
||
<div class="benefit-text">
|
||
<strong>随时随地学习</strong>
|
||
<small>手机、平板、电脑都能用</small>
|
||
</div>
|
||
</div>
|
||
<div class="benefit-row">
|
||
<div class="benefit-icon">🏆</div>
|
||
<div class="benefit-text">
|
||
<strong>专业教育认证</strong>
|
||
<small>基于《3-6岁儿童发展指南》</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{% if not current_user.is_authenticated %}
|
||
<div class="cta-actions">
|
||
<a href="{{ url_for('auth.register') }}" class="btn btn-cta-mega">
|
||
<span class="btn-icon">🚀</span>
|
||
<span class="btn-text">立即免费注册</span>
|
||
<span class="btn-shine"></span>
|
||
</a>
|
||
<div class="cta-promise">
|
||
<small>💝 承诺：30秒注册，3分钟体验，无任何费用</small>
|
||
</div>
|
||
</div>
|
||
{% else %}
|
||
<div class="cta-actions">
|
||
<a href="{{ url_for('main.dashboard') }}" class="btn btn-cta-mega">
|
||
<span class="btn-icon">🏃♂️</span>
|
||
<span class="btn-text">进入学习中心</span>
|
||
<span class="btn-shine"></span>
|
||
</a>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="cta-visual">
|
||
<!-- 3D风格的设备展示 -->
|
||
<div class="device-showcase">
|
||
<div class="device phone">
|
||
<div class="device-screen">
|
||
<div class="app-interface">
|
||
<div class="app-header">🎤 语音学习</div>
|
||
<div class="app-content">
|
||
<div class="chat-message ai">
|
||
<span class="avatar">🤖</span>
|
||
<span class="text">小朋友，我们来聊天吧！</span>
|
||
</div>
|
||
<div class="chat-message user">
|
||
<span class="text">好的！我想学说话</span>
|
||
<span class="avatar">😊</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="device tablet">
|
||
<div class="device-screen">
|
||
<div class="progress-interface">
|
||
<div class="progress-title">📈 学习进度</div>
|
||
<div class="progress-stats">
|
||
<div class="stat-circle">
|
||
<span class="number">85%</span>
|
||
<span class="label">完成度</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 用户评价气泡 -->
|
||
<div class="testimonial-bubbles">
|
||
<div class="testimonial-bubble bubble-1">
|
||
<div class="bubble-content">
|
||
<div class="user-info">
|
||
<span class="avatar">👶</span>
|
||
<span class="name">小明妈妈</span>
|
||
</div>
|
||
<p>"孩子现在特别爱说话，每天都要和AI老师聊天！"</p>
|
||
</div>
|
||
</div>
|
||
<div class="testimonial-bubble bubble-2">
|
||
<div class="bubble-content">
|
||
<div class="user-info">
|
||
<span class="avatar">👧</span>
|
||
<span class="name">小红</span>
|
||
</div>
|
||
<p>"听到自己的声音给我讲故事，太神奇了！"</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{% endblock %}
|