{% extends "base.html" %}

{% block title %}FlashExam - 智能化网络考试系统{% endblock %}

{% block head %}
<style>
    .hero-section {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 4rem 0;
        margin-bottom: 3rem;
    }
    .feature-card {
        transition: transform 0.3s ease;
        height: 100%;
    }
    .feature-card:hover {
        transform: translateY(-5px);
    }
    .quick-start {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: white;
        border-radius: 15px;
        padding: 2rem;
    }
</style>
{% endblock %}

{% block content %}
<!-- 英雄区域 -->
<div class="hero-section">
    <div class="container text-center">
        <h1 class="display-4 fw-bold mb-3">
            <i class="bi bi-mortarboard-fill text-warning"></i>
            FlashExam
        </h1>
        <p class="lead mb-4">AI驱动的智能化网络考试系统</p>
        <p class="fs-5 mb-4">融合本地大语言模型与深度语义理解技术，开创主观题自动评分的新范式</p>
        
        <a href="{{ url_for('auth.login') }}" class="btn btn-light btn-lg">
            <i class="bi bi-box-arrow-in-right"></i> 立即登录
        </a>
    </div>
</div>

<div class="container">
    <!-- 系统特色 -->
    <section class="mb-5">
        <h2 class="text-center mb-4">🎯 系统特色</h2>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card feature-card border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i class="bi bi-brain text-primary" style="font-size: 3rem;"></i>
                        </div>
                        <h5 class="card-title">AI智能评分</h5>
                        <p class="card-text">支持本地大语言模型，实现主观题智能评分，准确率达85%以上</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card feature-card border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i class="bi bi-speedometer2 text-success" style="font-size: 3rem;"></i>
                        </div>
                        <h5 class="card-title">高效便捷</h5>
                        <p class="card-text">支持CSV批量导入，一键组卷，实时监控，让考试管理变得简单高效</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card feature-card border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i class="bi bi-shield-check text-warning" style="font-size: 3rem;"></i>
                        </div>
                        <h5 class="card-title">安全可靠</h5>
                        <p class="card-text">多层安全保护，完善的权限控制，确保考试公平性和数据安全性</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 支持的题目类型 -->
    <section class="mb-5">
        <h2 class="text-center mb-4">📝 题目类型支持</h2>
        <div class="row g-3">
            <div class="col-md-3 col-sm-6">
                <div class="card border-primary h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-circle-fill text-primary mb-2"></i>
                        <h6>选择题</h6>
                        <small class="text-muted">支持单选、多选</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="card border-success h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-check-circle-fill text-success mb-2"></i>
                        <h6>判断题</h6>
                        <small class="text-muted">简洁高效</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="card border-info h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-pencil-fill text-info mb-2"></i>
                        <h6>简答题</h6>
                        <small class="text-muted">AI智能评分</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="card border-warning h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-code-slash text-warning mb-2"></i>
                        <h6>代码题</h6>
                        <small class="text-muted">代码阅读与实践</small>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 快速开始 -->
    <section class="mb-5">
        <div class="quick-start">
            <h2 class="text-center mb-4">🚀 快速开始</h2>
            <div class="row">
                <div class="col-md-6">
                    <h5><i class="bi bi-person-workspace"></i> 教师用户</h5>
                    <ol class="list-unstyled">
                        <li class="mb-2"><i class="bi bi-1-circle"></i> 登录教师端管理界面</li>
                        <li class="mb-2"><i class="bi bi-2-circle"></i> 批量导入学生信息</li>
                        <li class="mb-2"><i class="bi bi-3-circle"></i> 导入或创建题目</li>
                        <li class="mb-2"><i class="bi bi-4-circle"></i> 创建并发布考试</li>
                        <li class="mb-2"><i class="bi bi-5-circle"></i> 查看分析学生成绩</li>
                    </ol>
                </div>
                <div class="col-md-6">
                    <h5><i class="bi bi-person"></i> 学生用户</h5>
                    <ol class="list-unstyled">
                        <li class="mb-2"><i class="bi bi-1-circle"></i> 使用学号登录系统</li>
                        <li class="mb-2"><i class="bi bi-2-circle"></i> 选择可用的考试</li>
                        <li class="mb-2"><i class="bi bi-3-circle"></i> 在线完成答题</li>
                        <li class="mb-2"><i class="bi bi-4-circle"></i> 提交查看结果</li>
                        <li class="mb-2"><i class="bi bi-5-circle"></i> 查看历史成绩</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <!-- 技术优势 -->
    <section class="mb-5">
        <h2 class="text-center mb-4">🔧 技术优势</h2>
        <div class="row g-4">
            <div class="col-md-6">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title">
                            <i class="bi bi-cpu text-primary"></i>
                            AI技术栈
                        </h5>
                        <ul class="list-unstyled">
                            <li><i class="bi bi-check-circle text-success"></i> 本地大语言模型支持</li>
                            <li><i class="bi bi-check-circle text-success"></i> 多层语义理解算法</li>
                            <li><i class="bi bi-check-circle text-success"></i> 深度语义相似度计算</li>
                            <li><i class="bi bi-check-circle text-success"></i> 智能关键词提取</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title">
                            <i class="bi bi-globe text-success"></i>
                            Web技术栈
                        </h5>
                        <ul class="list-unstyled">
                            <li><i class="bi bi-check-circle text-success"></i> Flask现代Web框架</li>
                            <li><i class="bi bi-check-circle text-success"></i> Bootstrap响应式设计</li>
                            <li><i class="bi bi-check-circle text-success"></i> SQLite轻量级数据库</li>
                            <li><i class="bi bi-check-circle text-success"></i> 安全会话管理</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 统计数据 -->
    <section class="mb-5">
        <div class="row text-center">
            <div class="col-md-3 col-sm-6 mb-3">
                <div class="card border-0">
                    <div class="card-body">
                        <h3 class="text-primary">8+</h3>
                        <p class="mb-0">题目类型</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 mb-3">
                <div class="card border-0">
                    <div class="card-body">
                        <h3 class="text-success">85%+</h3>
                        <p class="mb-0">AI评分准确率</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 mb-3">
                <div class="card border-0">
                    <div class="card-body">
                        <h3 class="text-info">500+</h3>
                        <p class="mb-0">并发用户支持</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 mb-3">
                <div class="card border-0">
                    <div class="card-body">
                        <h3 class="text-warning">0.5s</h3>
                        <p class="mb-0">页面响应时间</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
{% endblock %}