273 lines
12 KiB
HTML
273 lines
12 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}学习主页 - 儿童语言学习系统{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="container py-4">
|
||
<!-- 欢迎区域 -->
|
||
<div class="row mb-4">
|
||
<div class="col-12">
|
||
<div class="welcome-card bg-gradient-primary text-white rounded-4 p-4">
|
||
<div class="row align-items-center">
|
||
<div class="col-md-8">
|
||
<h2 class="fw-bold mb-2">
|
||
<i class="fas fa-sun me-2"></i>
|
||
早安，{{ current_user.name }}小朋友！
|
||
</h2>
|
||
<p class="mb-0 opacity-90">
|
||
准备好今天的语言学习之旅了吗？让我们一起探索有趣的世界吧！
|
||
</p>
|
||
</div>
|
||
<div class="col-md-4 text-end">
|
||
<i class="fas fa-rocket" style="font-size: 4rem; opacity: 0.3;"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 快速开始区域 -->
|
||
<div class="row mb-4">
|
||
<div class="col-12">
|
||
<h3 class="fw-bold mb-3">
|
||
<i class="fas fa-play-circle text-primary me-2"></i>快速开始
|
||
</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-4 mb-5">
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="quick-action-card h-100">
|
||
<div class="card border-0 shadow-sm h-100">
|
||
<div class="card-body text-center p-4">
|
||
<div class="action-icon mb-3">
|
||
<i class="fas fa-microphone text-primary"></i>
|
||
</div>
|
||
<h5 class="fw-bold mb-2">录制声音</h5>
|
||
<p class="text-muted small mb-3">
|
||
上传你的声音样本，让AI学会说话像你一样
|
||
</p>
|
||
<button class="btn btn-primary" disabled>
|
||
<i class="fas fa-upload me-2"></i>开始录制
|
||
</button>
|
||
<div class="mt-2">
|
||
<small class="text-muted">即将上线</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="quick-action-card h-100">
|
||
<div class="card border-0 shadow-sm h-100">
|
||
<div class="card-body text-center p-4">
|
||
<div class="action-icon mb-3">
|
||
<i class="fas fa-comments text-success"></i>
|
||
</div>
|
||
<h5 class="fw-bold mb-2">开始对话</h5>
|
||
<p class="text-muted small mb-3">
|
||
选择有趣的场景，和AI朋友一起聊天学习
|
||
</p>
|
||
<button class="btn btn-success" disabled>
|
||
<i class="fas fa-play me-2"></i>选择场景
|
||
</button>
|
||
<div class="mt-2">
|
||
<small class="text-muted">即将上线</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="quick-action-card h-100">
|
||
<div class="card border-0 shadow-sm h-100">
|
||
<div class="card-body text-center p-4">
|
||
<div class="action-icon mb-3">
|
||
<i class="fas fa-chart-line text-warning"></i>
|
||
</div>
|
||
<h5 class="fw-bold mb-2">查看进度</h5>
|
||
<p class="text-muted small mb-3">
|
||
了解你的学习情况，看看哪里可以做得更好
|
||
</p>
|
||
<button class="btn btn-warning" disabled>
|
||
<i class="fas fa-eye me-2"></i>查看报告
|
||
</button>
|
||
<div class="mt-2">
|
||
<small class="text-muted">即将上线</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 学习统计 -->
|
||
<div class="row mb-4">
|
||
<div class="col-12">
|
||
<h3 class="fw-bold mb-3">
|
||
<i class="fas fa-trophy text-warning me-2"></i>学习成就
|
||
</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-4 mb-5">
|
||
<div class="col-6 col-md-3">
|
||
<div class="stat-card text-center">
|
||
<div class="card border-0 bg-light">
|
||
<div class="card-body p-3">
|
||
<i class="fas fa-clock text-primary mb-2" style="font-size: 2rem;"></i>
|
||
<h4 class="fw-bold mb-0">0</h4>
|
||
<small class="text-muted">学习时长(分钟)</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-6 col-md-3">
|
||
<div class="stat-card text-center">
|
||
<div class="card border-0 bg-light">
|
||
<div class="card-body p-3">
|
||
<i class="fas fa-comments text-success mb-2" style="font-size: 2rem;"></i>
|
||
<h4 class="fw-bold mb-0">0</h4>
|
||
<small class="text-muted">对话次数</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-6 col-md-3">
|
||
<div class="stat-card text-center">
|
||
<div class="card border-0 bg-light">
|
||
<div class="card-body p-3">
|
||
<i class="fas fa-star text-warning mb-2" style="font-size: 2rem;"></i>
|
||
<h4 class="fw-bold mb-0">0</h4>
|
||
<small class="text-muted">获得星星</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-6 col-md-3">
|
||
<div class="stat-card text-center">
|
||
<div class="card border-0 bg-light">
|
||
<div class="card-body p-3">
|
||
<i class="fas fa-medal text-info mb-2" style="font-size: 2rem;"></i>
|
||
<h4 class="fw-bold mb-0">0</h4>
|
||
<small class="text-muted">完成场景</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 推荐场景预览 -->
|
||
<div class="row mb-4">
|
||
<div class="col-12">
|
||
<h3 class="fw-bold mb-3">
|
||
<i class="fas fa-sparkles text-info me-2"></i>推荐场景
|
||
</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="scenario-preview-card">
|
||
<div class="card border-0 shadow-sm h-100">
|
||
<div class="card-body p-4">
|
||
<div class="d-flex align-items-start mb-3">
|
||
<div class="scenario-icon me-3">
|
||
<i class="fas fa-handshake text-primary"></i>
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<h6 class="fw-bold mb-1">和小明交朋友</h6>
|
||
<small class="text-muted">社交互动</small>
|
||
</div>
|
||
<span class="badge bg-primary">简单</span>
|
||
</div>
|
||
<p class="text-muted small mb-3">
|
||
学习如何与新朋友进行自我介绍和基础交流
|
||
</p>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div class="scenario-stats">
|
||
<small class="text-muted">
|
||
<i class="fas fa-users me-1"></i>0人完成
|
||
</small>
|
||
</div>
|
||
<button class="btn btn-outline-primary btn-sm" disabled>
|
||
即将开放
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="scenario-preview-card">
|
||
<div class="card border-0 shadow-sm h-100">
|
||
<div class="card-body p-4">
|
||
<div class="d-flex align-items-start mb-3">
|
||
<div class="scenario-icon me-3">
|
||
<i class="fas fa-utensils text-success"></i>
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<h6 class="fw-bold mb-1">餐厅点餐</h6>
|
||
<small class="text-muted">日常生活</small>
|
||
</div>
|
||
<span class="badge bg-warning">中等</span>
|
||
</div>
|
||
<p class="text-muted small mb-3">
|
||
学习在餐厅如何礼貌地点餐和与服务员交流
|
||
</p>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div class="scenario-stats">
|
||
<small class="text-muted">
|
||
<i class="fas fa-users me-1"></i>0人完成
|
||
</small>
|
||
</div>
|
||
<button class="btn btn-outline-success btn-sm" disabled>
|
||
即将开放
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="scenario-preview-card">
|
||
<div class="card border-0 shadow-sm h-100">
|
||
<div class="card-body p-4">
|
||
<div class="d-flex align-items-start mb-3">
|
||
<div class="scenario-icon me-3">
|
||
<i class="fas fa-gamepad text-warning"></i>
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<h6 class="fw-bold mb-1">邀请朋友玩游戏</h6>
|
||
<small class="text-muted">游戏娱乐</small>
|
||
</div>
|
||
<span class="badge bg-warning">中等</span>
|
||
</div>
|
||
<p class="text-muted small mb-3">
|
||
学习如何邀请朋友一起玩游戏并协调活动
|
||
</p>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div class="scenario-stats">
|
||
<small class="text-muted">
|
||
<i class="fas fa-users me-1"></i>0人完成
|
||
</small>
|
||
</div>
|
||
<button class="btn btn-outline-warning btn-sm" disabled>
|
||
即将开放
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|