{% extends "base.html" %}

{% block title %}CTF题目生成系统{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="jumbotron">
        <h1 class="display-4">CTF题目生成系统</h1>
        <p class="lead">基于AI的智能CTF题目生成平台</p>
        <hr class="my-4">
        <p>通过选择编程语言、难度级别、漏洞类型和场景，系统将自动为您生成完整的CTF题目。</p>
        <div class="mt-4">
            {% if session.get('function_allocation') %}
                <a class="btn btn-primary btn-lg" href="{{ url_for('generate.allocate_functions') }}" role="button">继续生成题目</a>
                <a class="btn btn-outline-secondary btn-lg ml-2" href="{{ url_for('language.select_language') }}" role="button">重新开始</a>
            {% else %}
                <a class="btn btn-primary btn-lg" href="{{ url_for('language.select_language') }}" role="button">开始生成题目</a>
            {% endif %}
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-md-3">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">多语言支持</h5>
                    <p class="card-text">支持多种主流编程语言和框架，包括PHP、Python、NodeJS等，满足不同场景需求。</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">丰富场景</h5>
                    <p class="card-text">提供金融、电商、社交等多种业务场景，模拟真实环境，增加题目的实用性。</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">智能分配</h5>
                    <p class="card-text">基于AI的智能功能分配，自动规划前后端架构，生成合理的漏洞实现方案。</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">完整方案</h5>
                    <p class="card-text">生成包含前后端代码、Docker环境、部署文档的完整题目解决方案。</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">生成流程</h5>
                    <div class="list-group">
                        <div class="list-group-item">
                            <h6 class="mb-1">1. 选择编程语言</h6>
                            <small>选择题目使用的后端编程语言</small>
                        </div>
                        <div class="list-group-item">
                            <h6 class="mb-1">2. 设置难度级别</h6>
                            <small>根据目标受众设置合适的难度</small>
                        </div>
                        <div class="list-group-item">
                            <h6 class="mb-1">3. 选择漏洞类型</h6>
                            <small>选择要包含的漏洞类型和变种</small>
                        </div>
                        <div class="list-group-item">
                            <h6 class="mb-1">4. 选择业务场景</h6>
                            <small>选择漏洞所在的业务场景</small>
                        </div>
                        <div class="list-group-item">
                            <h6 class="mb-1">5. 生成题目</h6>
                            <small>自动生成完整的题目代码和环境</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">支持的漏洞类型</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <ul class="list-unstyled">
                                <li>✓ SQL注入</li>
                                <li>✓ 文件上传</li>
                                <li>✓ XSS跨站脚本</li>
                                <li>✓ 命令执行</li>
                                <li>✓ 文件包含</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul class="list-unstyled">
                                <li>✓ CSRF跨站请求伪造</li>
                                <li>✓ XXE外部实体注入</li>
                                <li>✓ SSRF服务端请求伪造</li>
                                <li>✓ 反序列化漏洞</li>
                                <li>✓ 更多漏洞类型...</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.jumbotron {
    background-color: #f8f9fa;
    padding: 4rem 2rem;
    border-radius: .3rem;
}
</style>
{% endblock %}