<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="LarAdmin - 基于 Laravel + Laravel-S + Swoole + Vue3 的高性能后台管理系统">
    <title>LarAdmin - 高性能后台管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header */
        header {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 20px 0;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 100;
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            color: white;
            text-decoration: none;
        }

        .nav-links {
            display: flex;
            gap: 30px;
            list-style: none;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
            transition: opacity 0.3s;
        }

        .nav-links a:hover {
            opacity: 0.8;
        }

        /* Hero Section */
        .hero {
            padding: 200px 0 100px;
            text-align: center;
            color: white;
        }

        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }

        .hero p {
            font-size: 18px;
            margin-bottom: 40px;
            opacity: 0.9;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .btn {
            display: inline-block;
            padding: 15px 40px;
            background: white;
            color: #667eea;
            text-decoration: none;
            border-radius: 30px;
            font-weight: bold;
            transition: transform 0.3s, box-shadow 0.3s;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        .btn-primary {
            background: white;
            color: #667eea;
            margin-right: 15px;
        }

        .btn-secondary {
            background: transparent;
            color: white;
            border: 2px solid white;
        }

        /* Features Section */
        .features {
            padding: 100px 0;
            background: white;
        }

        .section-title {
            text-align: center;
            font-size: 36px;
            margin-bottom: 60px;
            color: #333;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }

        .feature-card {
            padding: 40px;
            background: #f8f9fa;
            border-radius: 10px;
            transition: transform 0.3s;
        }

        .feature-card:hover {
            transform: translateY(-5px);
        }

        .feature-icon {
            font-size: 48px;
            margin-bottom: 20px;
        }

        .feature-card h3 {
            font-size: 24px;
            margin-bottom: 15px;
            color: #667eea;
        }

        .feature-card p {
            color: #666;
        }

        /* Tech Stack Section */
        .tech-stack {
            padding: 100px 0;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }

        .tech-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
        }

        .tech-item {
            text-align: center;
            padding: 30px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .tech-item h4 {
            color: #667eea;
            margin-top: 15px;
        }

        /* Architecture Section */
        .architecture {
            padding: 100px 0;
            background: white;
        }

        .architecture-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }

        .architecture-text h3 {
            font-size: 28px;
            margin-bottom: 20px;
            color: #667eea;
        }

        .architecture-text p {
            margin-bottom: 15px;
            color: #666;
        }

        .architecture-list {
            list-style: none;
        }

        .architecture-list li {
            padding: 10px 0;
            padding-left: 30px;
            position: relative;
            color: #555;
        }

        .architecture-list li:before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #667eea;
            font-weight: bold;
        }

        /* Footer */
        footer {
            padding: 40px 0;
            background: #333;
            color: white;
            text-align: center;
        }

        footer p {
            opacity: 0.8;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 36px;
            }

            .architecture-content {
                grid-template-columns: 1fr;
            }

            .nav-links {
                display: none;
            }
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fadeInUp {
            animation: fadeInUp 0.6s ease-out;
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <nav>
                <a href="#" class="logo">🚀 LarAdmin</a>
                <ul class="nav-links">
                    <li><a href="#features">特性</a></li>
                    <li><a href="#tech">技术栈</a></li>
                    <li><a href="#architecture">架构</a></li>
                    <li><a href="/admin">后台管理</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="hero">
        <div class="container animate-fadeInUp">
            <h1>高性能后台管理系统</h1>
            <p>基于 Laravel 12 + Swoole + Vue3 构建的现代化后台管理系统，提供卓越的性能和开发效率</p>
            <div>
                <a href="/admin" class="btn btn-primary">进入后台管理</a>
                <a href="https://github.com/hhxsv5/laravel-s" target="_blank" class="btn btn-secondary">查看文档</a>
            </div>
        </div>
    </section>

    <section class="features" id="features">
        <div class="container">
            <h2 class="section-title">核心特性</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">⚡</div>
                    <h3>高性能</h3>
                    <p>基于 Swoole 协程框架，提供卓越的并发处理能力，轻松应对高并发场景</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🧩</div>
                    <h3>模块化</h3>
                    <p>采用 Laravel Modules 实现模块化架构，业务模块独立管理，易于扩展和维护</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🔐</div>
                    <h3>完整权限</h3>
                    <p>基于 RBAC 的权限控制系统，支持用户、角色、权限、部门管理</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🎨</div>
                    <h3>现代前端</h3>
                    <p>基于 Vue 3 + Ant Design Vue + Vite 构建的现代化管理界面</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📊</div>
                    <h3>数据管理</h3>
                    <p>支持数据导入导出、在线编辑、批量操作等功能</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🌐</div>
                    <h3>实时通信</h3>
                    <p>内置 WebSocket 支持，实现实时消息推送和在线状态同步</p>
                </div>
            </div>
        </div>
    </section>

    <section class="tech-stack" id="tech">
        <div class="container">
            <h2 class="section-title">技术栈</h2>
            <div class="tech-grid">
                <div class="tech-item">
                    <div style="font-size: 36px;">🐘</div>
                    <h4>PHP 8.2+</h4>
                </div>
                <div class="tech-item">
                    <div style="font-size: 36px;">🔷</div>
                    <h4>Laravel 12</h4>
                </div>
                <div class="tech-item">
                    <div style="font-size: 36px;">🚀</div>
                    <h4>Swoole</h4>
                </div>
                <div class="tech-item">
                    <div style="font-size: 36px;">⚡</div>
                    <h4>Laravel-S</h4>
                </div>
                <div class="tech-item">
                    <div style="font-size: 36px;">💚</div>
                    <h4>Vue 3</h4>
                </div>
                <div class="tech-item">
                    <div style="font-size: 36px;">🎨</div>
                    <h4>Ant Design</h4>
                </div>
                <div class="tech-item">
                    <div style="font-size: 36px;">💾</div>
                    <h4>MySQL 8.0+</h4>
                </div>
                <div class="tech-item">
                    <div style="font-size: 36px;">🔴</div>
                    <h4>Redis 6.0+</h4>
                </div>
            </div>
        </div>
    </section>

    <section class="architecture" id="architecture">
        <div class="container">
            <h2 class="section-title">系统架构</h2>
            <div class="architecture-content">
                <div class="architecture-text">
                    <h3>模块化设计</h3>
                    <p>项目采用清晰的分层架构，将业务逻辑合理划分：</p>
                    <ul class="architecture-list">
                        <li>基础模块（Auth、System）：核心功能模块</li>
                        <li>业务模块：使用 Laravel Modules 独立管理</li>
                        <li>Controller 层：处理 HTTP 请求</li>
                        <li>Service 层：业务逻辑处理</li>
                        <li>Model 层：数据模型定义</li>
                        <li>统一的 API 响应格式</li>
                        <li>完整的权限控制系统</li>
                        <li>WebSocket 实时通信支持</li>
                    </ul>
                </div>
                <div class="architecture-diagram">
                    <div style="background: #f8f9fa; padding: 30px; border-radius: 10px;">
                        <h4 style="text-align: center; margin-bottom: 20px; color: #667eea;">快速开始</h4>
                        <pre style="background: #333; color: #fff; padding: 20px; border-radius: 5px; overflow-x: auto;"><code># 一键安装
composer run setup

# 或手动安装
composer install
cp .env.example .env
php artisan key:generate
php artisan migrate
php artisan db:seed
php artisan jwt:secret

# 启动开发服务
composer run dev

# 或启动 Swoole（生产环境）
php bin/laravels start

# 访问后台
# http://localhost:8000/admin</code></pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <p>&copy; 2024 LarAdmin. Built with ❤️ using Laravel & Swoole & Vue3</p>
        </div>
    </footer>
</body>
</html>
