&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;鲨鱼科技项目导航&lt;/title&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .container {
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            max-width: 600px;
            width: 100%;
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 10px;
        }
        .subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 40px;
        }
        .card {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 20px;
            border-left: 4px solid #667eea;
            transition: transform 0.2s;
        }
        .card:hover {
            transform: translateX(5px);
        }
        .card h2 {
            color: #333;
            margin-bottom: 10px;
            font-size: 20px;
        }
        .card p {
            color: #666;
            margin-bottom: 15px;
        }
        .btn {
            display: inline-block;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 12px 30px;
            text-decoration: none;
            border-radius: 8px;
            font-weight: bold;
            transition: opacity 0.2s;
        }
        .btn:hover {
            opacity: 0.9;
        }
        .status {
            background: #e7f3ff;
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
            border-left: 4px solid #0066cc;
        }
        .status h3 {
            color: #0066cc;
            margin-bottom: 10px;
        }
        .status ul {
            margin-left: 20px;
            color: #333;
        }
        .status li {
            margin-bottom: 5px;
        }
        .green {
            color: #28a745;
            font-weight: bold;
        }
        .orange {
            color: #fd7e14;
            font-weight: bold;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="container"&gt;
        &lt;h1&gt;🦈 鲨鱼科技&lt;/h1&gt;
        &lt;p class="subtitle"&gt;项目导航页面&lt;/p&gt;

        &lt;div class="card"&gt;
            &lt;h2&gt;📊 管理后台&lt;/h2&gt;
            &lt;p&gt;超级管理员和运营人员使用的后台管理系统&lt;/p&gt;
            &lt;a href="shark-control-admin/frontend/dist/index.html" class="btn"&gt;进入管理后台 →&lt;/a&gt;
        &lt;/div&gt;

        &lt;div class="card"&gt;
            &lt;h2&gt;🎮 控制端&lt;/h2&gt;
            &lt;p&gt;客户使用的设备管理和控制平台&lt;/p&gt;
            &lt;a href="shark-control/index.html" class="btn"&gt;进入控制端 →&lt;/a&gt;
        &lt;/div&gt;

        &lt;div class="status"&gt;
            &lt;h3&gt;📋 启动检查清单&lt;/h3&gt;
            &lt;ul&gt;
                &lt;li&gt;XAMPP Apache: &lt;span class="orange"&gt;请确保已启动&lt;/span&gt;&lt;/li&gt;
                &lt;li&gt;XAMPP MySQL: &lt;span class="orange"&gt;请确保已启动&lt;/span&gt;&lt;/li&gt;
                &lt;li&gt;后端服务: &lt;span class="orange"&gt;运行 start-all-services.bat 启动&lt;/span&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;