<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FutureOSS - 首页</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.1.0/remixicon.min.css">
    <link rel="stylesheet" href="/static/css/main.css">
    <style>
        .home-content {
            padding: 40px;
        }
        .welcome-banner {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px;
            border-radius: 16px;
            margin-bottom: 30px;
        }
        .welcome-banner h2 {
            font-size: 32px;
            margin-bottom: 16px;
        }
        .welcome-banner p {
            font-size: 18px;
            opacity: 0.9;
        }
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        .feature-card {
            background: white;
            padding: 24px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .feature-card h3 {
            color: #333;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .feature-card p {
            color: #666;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div class="app">
        <aside class="sidebar">
            <nav class="sidebar-nav">
                <a href="/" class="nav-item active" title="首页">
                    <i class="ri-home-4-line"></i>
                </a>
                <a href="/dashboard" class="nav-item" title="仪表盘">
                    <i class="ri-dashboard-line"></i>
                </a>
                <a href="/plugins" class="nav-item" title="插件管理">
                    <i class="ri-puzzle-line"></i>
                </a>
                <a href="/settings" class="nav-item" title="设置">
                    <i class="ri-settings-3-line"></i>
                </a>
            </nav>
            <div class="sidebar-footer">
                <button class="settings-btn" title="设置">
                    <i class="ri-settings-3-line"></i>
                </button>
            </div>
        </aside>

        <main class="content">
            <div class="content-body">
                <div class="home-content">
                    <div class="welcome-banner">
                        <h2>👋 欢迎使用 FutureOSS</h2>
                        <p>一切皆为插件的轻量级框架</p>
                    </div>
                    
                    <div class="features-grid">
                        <div class="feature-card">
                            <h3><i class="ri-plug-line"></i> 插件化架构</h3>
                            <p>所有功能皆可通过插件扩展，灵活定制您的系统</p>
                        </div>
                        <div class="feature-card">
                            <h3><i class="ri-shield-check-line"></i> 安全隔离</h3>
                            <p>进程级沙箱保护，确保插件运行安全</p>
                        </div>
                        <div class="feature-card">
                            <h3><i class="ri-global-line"></i> 多语言支持</h3>
                            <p>内置国际化框架，支持全球多种语言</p>
                        </div>
                        <div class="feature-card">
                            <h3><i class="ri-box-3-line"></i> 轻松部署</h3>
                            <p>Docker 容器化部署，一键启动服务</p>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="/static/js/main.js"></script>
</body>
</html>
