444 lines
20 KiB
HTML
444 lines
20 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}学习主页 - 儿童语言学习系统{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="dashboard-container">
|
||
<!-- 彩虹背景装饰 -->
|
||
<div class="rainbow-bg"></div>
|
||
|
||
<!-- 天空太阳 -->
|
||
<div class="sky-sun"></div>
|
||
|
||
<!-- 天空云朵 -->
|
||
<div class="sky-clouds">
|
||
<div class="cloud cloud1"></div>
|
||
<div class="cloud cloud2"></div>
|
||
<div class="cloud cloud3"></div>
|
||
</div>
|
||
|
||
<!-- 天空星星 -->
|
||
<div class="sky-stars">
|
||
<div class="star star1"></div>
|
||
<div class="star star2"></div>
|
||
<div class="star star3"></div>
|
||
<div class="star star4"></div>
|
||
<div class="star star5"></div>
|
||
</div>
|
||
|
||
<div class="container py-4">
|
||
<!-- 欢迎区域 - 更活泼的设计 -->
|
||
<div class="row mb-4">
|
||
<div class="col-12">
|
||
<div class="welcome-card-kid">
|
||
<div class="floating-shapes">
|
||
<div class="shape shape-1">🌟</div>
|
||
<div class="shape shape-2">🎈</div>
|
||
<div class="shape shape-3">🎊</div>
|
||
<div class="shape shape-4">✨</div>
|
||
</div>
|
||
<div class="row align-items-center">
|
||
<div class="col-md-8">
|
||
<h1 class="welcome-title">
|
||
<span class="wave">👋</span>
|
||
早安，<span class="highlight">{{ current_user.name }}</span>小朋友！
|
||
</h1>
|
||
<p class="welcome-subtitle">
|
||
🚀 准备好今天的语言学习冒险了吗？让我们一起探索神奇的语言世界吧！
|
||
</p>
|
||
</div>
|
||
<div class="col-md-4 text-end">
|
||
<div class="welcome-mascot">
|
||
<i class="fas fa-robot"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 推荐场景区域 - 前置并增加更多场景 -->
|
||
<div class="row mb-4">
|
||
<div class="col-12">
|
||
<div class="section-header">
|
||
<h2 class="section-title">
|
||
🌈 今日推荐场景
|
||
<span class="badge bg-gradient-fun">超人气</span>
|
||
</h2>
|
||
<p class="section-subtitle">选择你喜欢的场景，开始有趣的对话学习！</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-4 mb-5">
|
||
<!-- 社交互动场景 -->
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="scenario-card-kid social-card">
|
||
<div class="scenario-header">
|
||
<div class="scenario-icon-big">
|
||
<i class="fas fa-handshake"></i>
|
||
</div>
|
||
<span class="difficulty-badge easy">简单</span>
|
||
</div>
|
||
<div class="scenario-content">
|
||
<h5 class="scenario-title">和小兔子交朋友</h5>
|
||
<p class="scenario-desc">遇到了可爱的小兔子，快来学习如何打招呼和交朋友吧！</p>
|
||
<div class="scenario-tags">
|
||
<span class="tag tag-social">社交互动</span>
|
||
<span class="tag tag-basic">基础对话</span>
|
||
</div>
|
||
</div>
|
||
<div class="scenario-footer">
|
||
<div class="scenario-stats">
|
||
<span><i class="fas fa-users me-1"></i>168人完成</span>
|
||
<span><i class="fas fa-star me-1"></i>4.8分</span>
|
||
</div>
|
||
<button class="btn btn-scenario-play" data-scenario="1">
|
||
<i class="fas fa-play me-2"></i>开始冒险
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="scenario-card-kid daily-card">
|
||
<div class="scenario-header">
|
||
<div class="scenario-icon-big">
|
||
<i class="fas fa-utensils"></i>
|
||
</div>
|
||
<span class="difficulty-badge medium">中等</span>
|
||
</div>
|
||
<div class="scenario-content">
|
||
<h5 class="scenario-title">美食小当家</h5>
|
||
<p class="scenario-desc">来到神奇餐厅，学会如何礼貌点餐，成为小小美食家！</p>
|
||
<div class="scenario-tags">
|
||
<span class="tag tag-daily">日常生活</span>
|
||
<span class="tag tag-polite">礼貌用语</span>
|
||
</div>
|
||
</div>
|
||
<div class="scenario-footer">
|
||
<div class="scenario-stats">
|
||
<span><i class="fas fa-users me-1"></i>142人完成</span>
|
||
<span><i class="fas fa-star me-1"></i>4.9分</span>
|
||
</div>
|
||
<button class="btn btn-scenario-play" data-scenario="2">
|
||
<i class="fas fa-play me-2"></i>开始冒险
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="scenario-card-kid fun-card">
|
||
<div class="scenario-header">
|
||
<div class="scenario-icon-big">
|
||
<i class="fas fa-gamepad"></i>
|
||
</div>
|
||
<span class="difficulty-badge medium">中等</span>
|
||
</div>
|
||
<div class="scenario-content">
|
||
<h5 class="scenario-title">游戏时间</h5>
|
||
<p class="scenario-desc">邀请小伙伴一起玩游戏，学会分享和合作的乐趣！</p>
|
||
<div class="scenario-tags">
|
||
<span class="tag tag-fun">游戏娱乐</span>
|
||
<span class="tag tag-cooperation">团队合作</span>
|
||
</div>
|
||
</div>
|
||
<div class="scenario-footer">
|
||
<div class="scenario-stats">
|
||
<span><i class="fas fa-users me-1"></i>95人完成</span>
|
||
<span><i class="fas fa-star me-1"></i>4.7分</span>
|
||
</div>
|
||
<button class="btn btn-scenario-play" data-scenario="3">
|
||
<i class="fas fa-play me-2"></i>开始冒险
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新增场景 -->
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="scenario-card-kid learning-card">
|
||
<div class="scenario-header">
|
||
<div class="scenario-icon-big">
|
||
<i class="fas fa-book-open"></i>
|
||
</div>
|
||
<span class="difficulty-badge easy">简单</span>
|
||
</div>
|
||
<div class="scenario-content">
|
||
<h5 class="scenario-title">图书馆探险</h5>
|
||
<p class="scenario-desc">在神奇图书馆里寻找宝藏，学会如何借书和爱护书籍！</p>
|
||
<div class="scenario-tags">
|
||
<span class="tag tag-learning">学习探索</span>
|
||
<span class="tag tag-reading">阅读习惯</span>
|
||
</div>
|
||
</div>
|
||
<div class="scenario-footer">
|
||
<div class="scenario-stats">
|
||
<span><i class="fas fa-users me-1"></i>73人完成</span>
|
||
<span><i class="fas fa-star me-1"></i>4.6分</span>
|
||
</div>
|
||
<button class="btn btn-scenario-play" data-scenario="4">
|
||
<i class="fas fa-play me-2"></i>开始冒险
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="scenario-card-kid nature-card">
|
||
<div class="scenario-header">
|
||
<div class="scenario-icon-big">
|
||
<i class="fas fa-leaf"></i>
|
||
</div>
|
||
<span class="difficulty-badge fun">有趣</span>
|
||
</div>
|
||
<div class="scenario-content">
|
||
<h5 class="scenario-title">大自然课堂</h5>
|
||
<p class="scenario-desc">走进森林，认识小动物们，学会保护环境的重要性！</p>
|
||
<div class="scenario-tags">
|
||
<span class="tag tag-nature">自然探索</span>
|
||
<span class="tag tag-environment">环保意识</span>
|
||
</div>
|
||
</div>
|
||
<div class="scenario-footer">
|
||
<div class="scenario-stats">
|
||
<span><i class="fas fa-users me-1"></i>89人完成</span>
|
||
<span><i class="fas fa-star me-1"></i>4.8分</span>
|
||
</div>
|
||
<button class="btn btn-scenario-play" data-scenario="5">
|
||
<i class="fas fa-play me-2"></i>开始冒险
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="scenario-card-kid creative-card">
|
||
<div class="scenario-header">
|
||
<div class="scenario-icon-big">
|
||
<i class="fas fa-palette"></i>
|
||
</div>
|
||
<span class="difficulty-badge fun">有趣</span>
|
||
</div>
|
||
<div class="scenario-content">
|
||
<h5 class="scenario-title">小小艺术家</h5>
|
||
<p class="scenario-desc">在彩虹画室里创作美丽作品，用语言描述你的艺术创想！</p>
|
||
<div class="scenario-tags">
|
||
<span class="tag tag-creative">创意表达</span>
|
||
<span class="tag tag-art">艺术启蒙</span>
|
||
</div>
|
||
</div>
|
||
<div class="scenario-footer">
|
||
<div class="scenario-stats">
|
||
<span><i class="fas fa-users me-1"></i>56人完成</span>
|
||
<span class="tag tag-new">新场景</span>
|
||
</div>
|
||
<button class="btn btn-scenario-play" data-scenario="6">
|
||
<i class="fas fa-play me-2"></i>开始冒险
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 我的专属声音区域 -->
|
||
<div class="row mb-4">
|
||
<div class="col-12">
|
||
<div class="section-header">
|
||
<h2 class="section-title">
|
||
🎤 我的专属声音
|
||
<span class="badge bg-gradient-voice">AI魔法</span>
|
||
</h2>
|
||
<p class="section-subtitle">让AI学会你的声音，创造专属于你的语音助手！</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-4 mb-5">
|
||
<div class="col-lg-8">
|
||
<div class="voice-clone-card">
|
||
<div class="voice-clone-content">
|
||
<div class="row align-items-center">
|
||
<div class="col-md-8">
|
||
<div id="voice-status-display">
|
||
<!-- 动态加载状态 -->
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 text-center">
|
||
<div class="voice-clone-visual">
|
||
<div class="voice-wave-container">
|
||
<div class="voice-wave"></div>
|
||
<div class="voice-wave"></div>
|
||
<div class="voice-wave"></div>
|
||
<div class="voice-wave"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="voice-clone-actions">
|
||
<a href="{{ url_for('voice_clone.voice_clone_page') }}" class="btn btn-voice-main">
|
||
<i class="fas fa-microphone me-2"></i>录制我的声音
|
||
</a>
|
||
<button class="btn btn-voice-secondary" id="quick-test-btn" disabled>
|
||
<i class="fas fa-magic me-2"></i>快速测试
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-4">
|
||
<div class="voice-tips-card">
|
||
<h6 class="tips-title">💡 录音小贴士</h6>
|
||
<ul class="tips-list">
|
||
<li><i class="fas fa-check text-success me-2"></i>在安静的地方录音</li>
|
||
<li><i class="fas fa-check text-success me-2"></i>说话要清晰洪亮</li>
|
||
<li><i class="fas fa-check text-success me-2"></i>录制3-10秒即可</li>
|
||
<li><i class="fas fa-check text-success me-2"></i>用自然的语调</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 快速开始区域 -->
|
||
<div class="row mb-4">
|
||
<div class="col-12">
|
||
<div class="section-header">
|
||
<h2 class="section-title">
|
||
⚡ 快速开始
|
||
</h2>
|
||
<p class="section-subtitle">选择你想要的功能，立即开始学习冒险！</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-4 mb-5">
|
||
<div class="col-md-6 col-lg-3">
|
||
<div class="quick-action-card-kid test-card">
|
||
<div class="action-icon-container">
|
||
<i class="fas fa-flask"></i>
|
||
</div>
|
||
<h6 class="action-title">API 测试</h6>
|
||
<p class="action-desc">体验语音技术的神奇魔法</p>
|
||
<a href="{{ url_for('voice_test.voice_test_page') }}" class="btn btn-action-test">
|
||
<i class="fas fa-rocket me-2"></i>开始测试
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 col-lg-3">
|
||
<div class="quick-action-card-kid record-card">
|
||
<div class="action-icon-container">
|
||
<i class="fas fa-microphone"></i>
|
||
</div>
|
||
<h6 class="action-title">录制声音</h6>
|
||
<p class="action-desc">让AI学会你的声音</p>
|
||
<a href="{{ url_for('voice_clone.voice_clone_page') }}" class="btn btn-action-record">
|
||
<i class="fas fa-upload me-2"></i>开始录制
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 col-lg-3">
|
||
<div class="quick-action-card-kid chat-card">
|
||
<div class="action-icon-container">
|
||
<i class="fas fa-comments"></i>
|
||
</div>
|
||
<h6 class="action-title">开始对话</h6>
|
||
<p class="action-desc">和AI朋友聊天学习</p>
|
||
<button class="btn btn-action-chat" disabled>
|
||
<i class="fas fa-play me-2"></i>选择场景
|
||
</button>
|
||
<div class="coming-soon">即将上线</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 col-lg-3">
|
||
<div class="quick-action-card-kid progress-card">
|
||
<div class="action-icon-container">
|
||
<i class="fas fa-chart-line"></i>
|
||
</div>
|
||
<h6 class="action-title">学习报告</h6>
|
||
<p class="action-desc">查看你的学习成果</p>
|
||
<button class="btn btn-action-progress" disabled>
|
||
<i class="fas fa-eye me-2"></i>查看报告
|
||
</button>
|
||
<div class="coming-soon">即将上线</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 学习成就区域 -->
|
||
<div class="row mb-4">
|
||
<div class="col-12">
|
||
<div class="section-header">
|
||
<h2 class="section-title">
|
||
🏆 我的学习成就
|
||
</h2>
|
||
<p class="section-subtitle">看看你在语言学习路上取得的进步！</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<div class="col-6 col-lg-3">
|
||
<div class="achievement-card time-card">
|
||
<div class="achievement-icon">
|
||
<i class="fas fa-clock"></i>
|
||
</div>
|
||
<div class="achievement-number">0</div>
|
||
<div class="achievement-label">学习时长(分钟)</div>
|
||
<div class="achievement-progress">
|
||
<div class="progress-bar" style="width: 0%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-6 col-lg-3">
|
||
<div class="achievement-card conversation-card">
|
||
<div class="achievement-icon">
|
||
<i class="fas fa-comments"></i>
|
||
</div>
|
||
<div class="achievement-number">0</div>
|
||
<div class="achievement-label">对话次数</div>
|
||
<div class="achievement-progress">
|
||
<div class="progress-bar" style="width: 0%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-6 col-lg-3">
|
||
<div class="achievement-card star-card">
|
||
<div class="achievement-icon">
|
||
<i class="fas fa-star"></i>
|
||
</div>
|
||
<div class="achievement-number">0</div>
|
||
<div class="achievement-label">获得星星</div>
|
||
<div class="achievement-progress">
|
||
<div class="progress-bar" style="width: 0%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-6 col-lg-3">
|
||
<div class="achievement-card medal-card">
|
||
<div class="achievement-icon">
|
||
<i class="fas fa-medal"></i>
|
||
</div>
|
||
<div class="achievement-number">0</div>
|
||
<div class="achievement-label">完成场景</div>
|
||
<div class="achievement-progress">
|
||
<div class="progress-bar" style="width: 0%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
|
||
{% endblock %}
|