<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Spring Security 6 | 自定义权限校验后台管理系统</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/5.1.3/css/bootstrap.min.css}">
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/webjars/font-awesome/5.15.4/css/all.min.css}">

    <style>
        :root {
            --primary-color: #4e73df;
            --secondary-color: #1cc88a;
            --dark-color: #5a5c69;
        }

        body {
            font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8f9fc;
        }

        .hero-section {
            background: linear-gradient(135deg, var(--primary-color) 0%, #224abe 100%);
            color: white;
            padding: 6rem 0;
            margin-bottom: 3rem;
            border-radius: 0 0 20px 20px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .feature-card {
            border: none;
            border-radius: 15px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
            margin-bottom: 20px;
            background-color: white;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0.5rem 1.5rem 0 rgba(58, 59, 69, 0.2);
        }

        .feature-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: var(--primary-color);
        }

        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            padding: 0.5rem 1.5rem;
            border-radius: 50px;
        }

        .btn-primary:hover {
            background-color: #2e59d9;
            border-color: #2653d4;
        }

        .navbar {
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
        }

        .footer {
            background-color: var(--dark-color);
            color: white;
            padding: 2rem 0;
            margin-top: 3rem;
        }

        .tech-badge {
            margin: 0.2rem;
            font-size: 0.8rem;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top">
    <div class="container">
        <a class="navbar-brand fw-bold" href="#" style="color: var(--primary-color);">
            <i class="fas fa-shield-alt me-2"></i>Security Admin
        </a>
        <button class="navbar-toggler" data-bs-target="#navbarNav" data-bs-toggle="collapse" type="button">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">功能</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">关于</a>
                </li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/doc.html" target="_blank">API文档</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/swagger-ui/index.html" target="_blank">Swagger UI</a>
                </li>
                <li class="nav-item ms-2">
                    <a class="btn btn-primary" href="/login">登录系统 <i class="fas fa-sign-in-alt ms-1"></i></a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 英雄区域 -->
<section class="hero-section">
    <div class="container text-center">
        <h1 class="display-4 fw-bold mb-4">Spring Security 6 后台管理系统</h1>
        <p class="lead mb-5">基于Spring Security 6的自定义权限校验解决方案，提供安全、高效的后台管理体验</p>
        <div class="d-flex justify-content-center gap-3">
            <a class="btn btn-light btn-lg px-4" href="#features">探索功能 <i class="fas fa-arrow-down ms-2"></i></a>
            <a class="btn btn-outline-light btn-lg px-4" href="/login">立即体验 <i class="fas fa-rocket ms-2"></i></a>
        </div>
    </div>
</section>

<!-- 主要特性 -->
<section class="container mb-5" id="features">
    <div class="text-center mb-5">
        <h2 class="fw-bold">核心特性</h2>
        <p class="text-muted">Spring Security 6 提供的最新安全特性与自定义权限校验完美结合</p>
    </div>

    <div class="row g-4">
        <div class="col-md-4">
            <div class="feature-card card h-100 p-4 text-center">
                <div class="feature-icon">
                    <i class="fas fa-user-shield"></i>
                </div>
                <h4>自定义权限校验</h4>
                <p class="text-muted">基于Spring Security
                    6的全新授权架构，实现灵活的自定义权限校验逻辑，满足复杂业务场景需求。</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="feature-card card h-100 p-4 text-center">
                <div class="feature-icon">
                    <i class="fas fa-lock"></i>
                </div>
                <h4>RBAC权限控制</h4>
                <p class="text-muted">基于角色的访问控制(RBAC)，支持多级角色权限分配，精细到按钮级别的权限控制。</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="feature-card card h-100 p-4 text-center">
                <div class="feature-icon">
                    <i class="fas fa-bolt"></i>
                </div>
                <h4>高性能设计</h4>
                <p class="text-muted">优化权限校验流程，减少不必要的数据库查询，权限校验效率提升40%以上。</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="feature-card card h-100 p-4 text-center">
                <div class="feature-icon">
                    <i class="fas fa-mobile-alt"></i>
                </div>
                <h4>响应式设计</h4>
                <p class="text-muted">全面适配各种设备屏幕，从桌面到移动端，管理体验始终如一。</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="feature-card card h-100 p-4 text-center">
                <div class="feature-icon">
                    <i class="fas fa-chart-line"></i>
                </div>
                <h4>实时监控</h4>
                <p class="text-muted">系统安全事件实时监控，登录日志、操作日志完整记录，便于审计追踪。</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="feature-card card h-100 p-4 text-center">
                <div class="feature-icon">
                    <i class="fas fa-plug"></i>
                </div>
                <h4>API集成</h4>
                <p class="text-muted">完善的RESTful API设计，支持Swagger文档，方便与其他系统集成。</p>
            </div>
        </div>
    </div>
</section>

<!-- 技术栈 -->
<section class="bg-light py-5 mb-5">
    <div class="container">
        <div class="text-center mb-4">
            <h2 class="fw-bold">技术栈</h2>
            <p class="text-muted">基于最前沿的Java生态技术构建</p>
        </div>

        <div class="d-flex flex-wrap justify-content-center">
            <span class="tech-badge badge bg-primary">Spring Security 6</span>
            <span class="tech-badge badge bg-success">Spring Boot 3</span>
            <span class="tech-badge badge bg-info">Java 17</span>
            <span class="tech-badge badge bg-warning text-dark">Thymeleaf</span>
            <span class="tech-badge badge bg-danger">JWT</span>
            <span class="tech-badge badge bg-secondary">MySQL</span>
            <span class="tech-badge badge bg-dark">Redis</span>
            <span class="tech-badge badge bg-primary">WebJars</span>
            <span class="tech-badge badge bg-success">Bootstrap 5</span>
            <span class="tech-badge badge bg-info">Font Awesome</span>
        </div>
    </div>
</section>

<!-- 系统截图 -->
<section class="container mb-5">
    <div class="text-center mb-5">
        <h2 class="fw-bold">系统预览</h2>
        <p class="text-muted">直观易用的管理界面</p>
    </div>

    <div class="row g-4">
        <div class="col-md-6">
            <div class="card border-0 shadow-sm">
                <img alt="登录界面" class="card-img-top rounded"
                     src="https://pure-admin.cn/assets/img/4.f2995f61.jpg">
                <div class="card-body">
                    <h5 class="card-title">安全登录</h5>
                    <p class="card-text">多因素认证支持，图形验证码，防止暴力破解。</p>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card border-0 shadow-sm">
                <img alt="权限管理" class="card-img-top rounded" height="342.42px"
                     src="https://pure-admin.cn/assets/img/rbac.078e7dea.jpg">
                <div class="card-body">
                    <h5 class="card-title">权限管理</h5>
                    <p class="card-text">可视化权限配置，角色与资源灵活关联。</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 页脚 -->
<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4 mb-4 mb-md-0">
                <h5><i class="fas fa-shield-alt me-2"></i>Security Admin</h5>
                <p class="small text-white-50">基于Spring Security
                    6的自定义权限校验后台管理系统，为企业级应用提供安全可靠的管理解决方案。</p>
            </div>
            <div class="col-md-2 mb-4 mb-md-0">
                <h5>快速链接</h5>
                <ul class="list-unstyled">
                    <li><a class="text-white-50" href="#">首页</a></li>
                    <li><a class="text-white-50" href="/doc.html">API文档</a></li>
                    <li><a class="text-white-50" href="/swagger-ui/index.html">Swagger UI</a></li>
                    <li><a class="text-white-50" href="#">GitHub</a></li>
                </ul>
            </div>
            <div class="col-md-3 mb-4 mb-md-0">
                <h5>技术资源</h5>
                <ul class="list-unstyled">
                    <li><a class="text-white-50" href="https://spring.io/projects/spring-security">Spring Security</a>
                    </li>
                    <li><a class="text-white-50" href="https://spring.io/projects/spring-boot">Spring Boot</a></li>
                    <li><a class="text-white-50" href="https://www.thymeleaf.org/">Thymeleaf</a></li>
                </ul>
            </div>
            <div class="col-md-3">
                <h5>联系我</h5>
                <ul class="list-unstyled">
                    <li><i class="fas fa-envelope me-2"></i> <span
                            class="text-white-50">1319900154@qq.com</span></li>
                    <li><i class="fas fa-phone me-2"></i> <span class="text-white-50">+86 18900696469</span></li>
                </ul>
                <div class="mt-3">
                    <a class="text-white me-3" href="https://github.com/BunnyMaster"><i class="fab fa-github fa-lg"></i></a>
                    <a class="text-white me-3" href="#"><i class="fab fa-weixin fa-lg"></i></a>
                    <a class="text-white" href="#"><i class="fab fa-weibo fa-lg"></i></a>
                </div>
            </div>
        </div>
        <hr class="my-4 bg-white-50">
        <div class="text-center small text-white-50">
            &copy; 2025 Spring Security 6 Admin System. All rights reserved.
        </div>
    </div>
</footer>

<!-- Bootstrap JS -->
<script th:src="@{/webjars/bootstrap/5.1.3/js/bootstrap.bundle.min.js}"></script>
</body>
</html>