{% extends "base.html" %} {% block title %}QuizTrainer - 首页{% endblock %} {%
block content %}
<!-- 页面头部 -->
<div class="page-header animate-fade-in">
    <h1>欢迎使用 QuizTrainer</h1>
    <div class="meta">
        <span>
            <svg
                viewBox="0 0 24 24"
                width="16"
                height="16"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <path
                    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"
                />
                <rect x="9" y="3" width="6" height="4" rx="1" />
            </svg>
            {{ stats.total_questions | default(0) }} 道已答题
        </span>
        <span>
            <svg
                viewBox="0 0 24 24"
                width="16"
                height="16"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <circle cx="12" cy="12" r="10" />
                <polyline points="12 6 12 12 16 14" />
            </svg>
            正确率 {{ stats.accuracy | default(0) }}%
        </span>
        <span>
            <svg
                viewBox="0 0 24 24"
                width="16"
                height="16"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
                <line x1="3" y1="9" x2="21" y2="9" />
                <line x1="9" y1="21" x2="9" y2="9" />
            </svg>
            {{ categories | length }} 个题库分类
        </span>
    </div>
</div>

<!-- 统计卡片 -->
<div class="stats-grid">
    <div class="stat-card animate-fade-in" style="animation-delay: 0.1s">
        <div class="icon">
            <svg
                viewBox="0 0 24 24"
                width="20"
                height="20"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <circle cx="12" cy="12" r="10" />
                <line x1="12" y1="8" x2="12" y2="12" />
                <line x1="12" y1="16" x2="12.01" y2="16" />
            </svg>
        </div>
        <div class="value">{{ stats.total_questions | default(0) }}</div>
        <div class="label">总答题数</div>
    </div>
    <div class="stat-card animate-fade-in" style="animation-delay: 0.15s">
        <div
            class="icon"
            style="background: var(--success-bg); color: var(--success)"
        >
            <svg
                viewBox="0 0 24 24"
                width="20"
                height="20"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <polyline points="20 6 9 17 4 12" />
            </svg>
        </div>
        <div class="value">{{ stats.correct_count | default(0) }}</div>
        <div class="label">答对题目</div>
    </div>
    <div class="stat-card animate-fade-in" style="animation-delay: 0.2s">
        <div class="icon" style="background: var(--accent-light)">
            <svg
                viewBox="0 0 24 24"
                width="20"
                height="20"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <line x1="18" y1="20" x2="18" y2="10" />
                <line x1="12" y1="20" x2="12" y2="4" />
                <line x1="6" y1="20" x2="6" y2="14" />
            </svg>
        </div>
        <div class="value">{{ stats.accuracy | default(0) }}%</div>
        <div class="label">正确率</div>
    </div>
    <div class="stat-card animate-fade-in" style="animation-delay: 0.25s">
        <div
            class="icon"
            style="background: var(--warning-bg); color: var(--warning)"
        >
            <svg
                viewBox="0 0 24 24"
                width="20"
                height="20"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
                <line x1="3" y1="9" x2="21" y2="9" />
                <line x1="9" y1="21" x2="9" y2="9" />
            </svg>
        </div>
        <div class="value">{{ categories | length }}</div>
        <div class="label">题库分类</div>
    </div>
</div>

<!-- 题目类型统计 -->
<div class="card mb-5 animate-fade-in" style="animation-delay: 0.3s">
    <div class="card-header">
        <h3 class="card-title">
            <svg
                viewBox="0 0 24 24"
                width="18"
                height="18"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <circle cx="12" cy="12" r="10" />
                <line x1="12" y1="16" x2="12" y2="12" />
                <line x1="12" y1="8" x2="12.01" y2="8" />
            </svg>
            题型分布
        </h3>
    </div>
    <div class="card-body">
        <div class="bar-chart">
            <div class="bar-item">
                <span class="bar-label">选择题</span>
                <div class="bar-track">
                    <div
                        class="bar-fill"
                        style="width: {{ (type_counts.choice / 15 * 100) if type_counts.choice else 0 }}%; background: var(--type-choice);"
                    ></div>
                </div>
                <span class="bar-value"
                    >{{ type_counts.choice | default(0) }}</span
                >
            </div>
            <div class="bar-item">
                <span class="bar-label">判断题</span>
                <div class="bar-track">
                    <div
                        class="bar-fill"
                        style="width: {{ (type_counts.truefalse / 15 * 100) if type_counts.truefalse else 0 }}%; background: var(--type-truefalse);"
                    ></div>
                </div>
                <span class="bar-value"
                    >{{ type_counts.truefalse | default(0) }}</span
                >
            </div>
            <div class="bar-item">
                <span class="bar-label">填空题</span>
                <div class="bar-track">
                    <div
                        class="bar-fill"
                        style="width: {{ (type_counts.fill / 15 * 100) if type_counts.fill else 0 }}%; background: var(--type-fill);"
                    ></div>
                </div>
                <span class="bar-value"
                    >{{ type_counts.fill | default(0) }}</span
                >
            </div>
            <div class="bar-item">
                <span class="bar-label">问答题</span>
                <div class="bar-track">
                    <div
                        class="bar-fill"
                        style="width: {{ (type_counts.essay / 15 * 100) if type_counts.essay else 0 }}%; background: var(--type-essay);"
                    ></div>
                </div>
                <span class="bar-value"
                    >{{ type_counts.essay | default(0) }}</span
                >
            </div>
        </div>
    </div>
</div>

<!-- 快速开始答题 -->
<div class="card mb-5 animate-fade-in" style="animation-delay: 0.35s">
    <div class="card-header">
        <h3 class="card-title">
            <svg
                viewBox="0 0 24 24"
                width="18"
                height="18"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <polygon points="5 3 19 12 5 21 5 3" />
            </svg>
            快速开始
        </h3>
    </div>
    <div class="card-body">
        <form action="{{ url_for('quiz') }}" method="get" id="quickQuizForm">
            <div class="filter-bar">
                <label>
                    <span class="label-text">题型</span>
                    <select name="type" style="min-width: 120px">
                        <option value="">全部题型</option>
                        <option value="choice">选择题</option>
                        <option value="truefalse">判断题</option>
                        <option value="fill">填空题</option>
                        <option value="essay">问答题</option>
                    </select>
                </label>
                <label>
                    <span class="label-text">难度</span>
                    <select name="difficulty" style="min-width: 100px">
                        <option value="">全部难度</option>
                        <option value="easy">简单</option>
                        <option value="medium">中等</option>
                        <option value="hard">困难</option>
                    </select>
                </label>
                <label>
                    <span class="label-text">题数</span>
                    <select name="count" style="min-width: 80px">
                        <option value="5">5题</option>
                        <option value="10" selected>10题</option>
                        <option value="15">15题</option>
                        <option value="20">20题</option>
                    </select>
                </label>
                <label>
                    <span class="label-text">模式</span>
                    <select name="mode" style="min-width: 100px">
                        <option value="practice">练习模式</option>
                        <option value="exam">考试模式</option>
                    </select>
                </label>
                <button type="submit" class="btn btn-primary">
                    <svg
                        viewBox="0 0 24 24"
                        width="16"
                        height="16"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <polygon points="5 3 19 12 5 21 5 3" />
                    </svg>
                    开始答题
                </button>
            </div>
        </form>
    </div>
</div>

<!-- 题库分类 -->
<div class="section animate-fade-in" style="animation-delay: 0.4s">
    <div
        class="section-title"
        style="
            font-size: 17px;
            font-weight: 600;
            color: var(--text-primary);
            padding: 10px 14px;
            background: var(--bg-section-title);
            border-left: 3px solid var(--accent);
            border-radius: 3px;
            margin-bottom: 16px;
        "
    >
        <svg
            viewBox="0 0 24 24"
            width="18"
            height="18"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            style="
                margin-right: 8px;
                display: inline-block;
                vertical-align: middle;
            "
        >
            <path
                d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"
            />
        </svg>
        题库分类
    </div>

    {% if categories %}
    <div class="category-grid">
        {% for category in categories %}
        <a
            href="{{ url_for('quiz', category=category.name) }}"
            class="category-card"
        >
            <h3>{{ category.name }}</h3>
            <p>
                难度分布: 简单 {{ category.difficulty_dist.easy }} / 中等 {{
                category.difficulty_dist.medium }} / 困难 {{
                category.difficulty_dist.hard }}
            </p>
            <div class="category-stats">
                <div class="category-stat">
                    <svg
                        viewBox="0 0 24 24"
                        width="14"
                        height="14"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <circle cx="12" cy="12" r="10" />
                        <line x1="12" y1="8" x2="12" y2="12" />
                        <line x1="12" y1="16" x2="12.01" y2="16" />
                    </svg>
                    <strong>{{ category.question_count }}</strong> 道题目
                </div>
            </div>
        </a>
        {% endfor %}
    </div>
    {% else %}
    <div class="card">
        <div class="card-body text-center" style="padding: 40px">
            <svg
                viewBox="0 0 24 24"
                width="48"
                height="48"
                fill="none"
                stroke="var(--text-muted)"
                stroke-width="1.5"
                style="margin-bottom: 16px; opacity: 0.5"
            >
                <path
                    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"
                />
                <rect x="9" y="3" width="6" height="4" rx="1" />
            </svg>
            <h3
                style="
                    font-size: 16px;
                    color: var(--text-secondary);
                    margin-bottom: 8px;
                "
            >
                暂无题库
            </h3>
            <p style="font-size: 14px; color: var(--text-muted)">
                请先添加题目到题库
            </p>
        </div>
    </div>
    {% endif %}
</div>

<!-- 最近答题记录 -->
{% if stats.recent_history %}
<div class="section animate-fade-in" style="animation-delay: 0.45s">
    <div
        class="section-title"
        style="
            font-size: 17px;
            font-weight: 600;
            color: var(--text-primary);
            padding: 10px 14px;
            background: var(--bg-section-title);
            border-left: 3px solid var(--accent);
            border-radius: 3px;
            margin-bottom: 16px;
        "
    >
        <svg
            viewBox="0 0 24 24"
            width="18"
            height="18"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            style="
                margin-right: 8px;
                display: inline-block;
                vertical-align: middle;
            "
        >
            <circle cx="12" cy="12" r="10" />
            <polyline points="12 6 12 12 16 14" />
        </svg>
        最近答题
    </div>

    <div class="history-list">
        {% for item in stats.recent_history[:5] %}
        <div class="history-item">
            <div
                class="history-result {% if item.is_correct %}correct{% else %}wrong{% endif %}"
            >
                {% if item.is_correct %}
                <svg
                    viewBox="0 0 24 24"
                    width="18"
                    height="18"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <polyline points="20 6 9 17 4 12" />
                </svg>
                {% else %}
                <svg
                    viewBox="0 0 24 24"
                    width="18"
                    height="18"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <line x1="18" y1="6" x2="6" y2="18" />
                    <line x1="6" y1="6" x2="18" y2="18" />
                </svg>
                {% endif %}
            </div>
            <div class="history-content">
                <div class="history-meta">
                    <span>{{ item.timestamp[:10] }}</span>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %} {% endblock %}