{% extends "base.html" %}

{% block title %}首页{% endblock %}
{% block page_title %}首页{% endblock %}

{% block styles %}
<link href="{{ url_for('static', filename='css/pages/home-new.css') }}" rel="stylesheet">
<style>
/* 方向展示区域 */
.categories-section {
    margin-bottom: 2rem;
}

.category-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.category-item {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.category-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--primary);
    color: inherit;
}

.category-icon-box {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.category-info {
    flex: 1;
}

.category-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.category-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* 快速开始区域优化 */
.quick-start {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title i {
    color: var(--primary);
}

.steps-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 100px;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}

.step-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.step-arrow {
    color: var(--text-muted);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .category-showcase {
        grid-template-columns: 1fr;
    }
    
    .steps-row {
        flex-direction: column;
    }
    
    .step-arrow {
        transform: rotate(90deg);
    }
}
</style>
{% endblock %}

{% block content %}
<!-- 英雄区域 -->
<div class="hero-section">
    <div class="hero-content">
        <h1 class="hero-heading">AI驱动的CTF题目生成系统</h1>
        <p class="hero-lead">基于大语言模型的智能CTF题目生成与管理平台，支持多方向、多阶段、一键部署</p>
        <div class="hero-cta">
            <a class="hero-btn hero-btn-primary" href="{{ url_for('wizard.select_category') }}">
                <i class="fas fa-magic me-2"></i>开始生成题目
            </a>
            <a class="hero-btn hero-btn-secondary" href="{{ url_for('deployment.index') }}">
                <i class="fas fa-rocket me-2"></i>部署管理
            </a>
        </div>
    </div>
</div>

<!-- 功能卡片 -->
<div class="features-grid">
    <div class="feature-card">
        <div class="feature-icon"><i class="fas fa-robot"></i></div>
        <h3 class="feature-title">AI智能生成</h3>
        <p class="feature-text">基于Claude/OpenAI，多阶段生成完整CTF题目，包含代码、Docker配置、Writeup等</p>
    </div>
    <div class="feature-card">
        <div class="feature-icon"><i class="fas fa-layer-group"></i></div>
        <h3 class="feature-title">多方向支持</h3>
        <p class="feature-text">支持Web安全、密码学、二进制漏洞、逆向工程、杂项等多个CTF方向</p>
    </div>
    <div class="feature-card">
        <div class="feature-icon"><i class="fas fa-rocket"></i></div>
        <h3 class="feature-title">一键部署</h3>
        <p class="feature-text">Docker容器化部署，自动生成docker-compose配置，快速上线运行</p>
    </div>
    <div class="feature-card">
        <div class="feature-icon"><i class="fas fa-book"></i></div>
        <h3 class="feature-title">知识库管理</h3>
        <p class="feature-text">支持知识库文件管理、自动分类，AI从知识库中学习并生成题目</p>
    </div>
    <div class="feature-card">
        <div class="feature-icon"><i class="fas fa-sliders-h"></i></div>
        <h3 class="feature-title">灵活配置</h3>
        <p class="feature-text">可视化表单设计器、Prompt模板管理、阶段配置，满足不同需求</p>
    </div>
    <div class="feature-card">
        <div class="feature-icon"><i class="fas fa-code"></i></div>
        <h3 class="feature-title">多语言支持</h3>
        <p class="feature-text">支持PHP、Python、Node.js、Java等多种编程语言环境</p>
    </div>
</div>

<!-- 方向展示 -->
{% if categories %}
<div class="categories-section">
    <h2 class="section-title">
        <i class="fas fa-folder-open"></i>可用方向
    </h2>
    <div class="category-showcase">
        {% for category in categories %}
        <a href="{{ url_for('wizard.dynamic_wizard', category_id=category.id) }}" class="category-item">
            <div class="category-icon-box">
                <i class="{{ (category.icon or 'folder') | icon_class }}"></i>
            </div>
            <div class="category-info">
                <div class="category-name">{{ category.name }}</div>
                <div class="category-desc">{{ category.description or '点击开始生成题目' }}</div>
            </div>
        </a>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- 快速开始 -->
<div class="quick-start">
    <h2 class="section-title">
        <i class="fas fa-rocket"></i>快速开始
    </h2>
    <div class="steps-row">
        <div class="step-item">
            <span class="step-number">1</span>
            <span class="step-text">选择方向</span>
        </div>
        <div class="step-arrow"><i class="fas fa-chevron-right"></i></div>
        <div class="step-item">
            <span class="step-number">2</span>
            <span class="step-text">填写需求</span>
        </div>
        <div class="step-arrow"><i class="fas fa-chevron-right"></i></div>
        <div class="step-item">
            <span class="step-number">3</span>
            <span class="step-text">AI生成</span>
        </div>
        <div class="step-arrow"><i class="fas fa-chevron-right"></i></div>
        <div class="step-item">
            <span class="step-number">4</span>
            <span class="step-text">部署测试</span>
        </div>
    </div>
    <p class="text-center text-muted mt-3" style="font-size: 0.9rem;">
        <i class="fas fa-info-circle me-1"></i>
        系统会根据您选择的方向和需求，自动调用AI生成完整的CTF题目，包括源代码、Docker配置、部署脚本等
    </p>
</div>
{% endblock %}