<?php
$pageTitle = '使用说明';
$pageCss = '/css/help.css';
require_once '../includes/header.php';
?>

<style>
.help-container {
    padding: 16px;
}

.help-header {
    background: white;
    color: #1f2937;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1px solid #e5e7eb;
}

.help-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.help-subtitle {
    font-size: 14px;
    color: #9ca3af;
}

.help-section {
    background: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1px solid #e5e7eb;
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.help-item {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #f0f0f0;
}

.help-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.item-title {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.item-content {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
}

.contact-info {
    background: #ecfdf5;
    padding: 16px;
    border-radius: 8px;
    margin-top: 16px;
}

.contact-title {
    font-size: 15px;
    font-weight: 600;
    color: #059669;
    margin-bottom: 8px;
}

.contact-detail {
    font-size: 14px;
    color: #333;
    line-height: 1.8;
}
</style>

<div class="help-container">
    <div class="help-header">
        <div class="help-title">使用说明</div>
        <div class="help-subtitle">欢迎使用一课校园管理系统</div>
    </div>

    <div class="help-section">
        <div class="section-title">功能介绍</div>
        
        <div class="help-item">
            <div class="item-title">📅 查课表</div>
            <div class="item-content">
                查看和管理您的个人课程表，支持查看每日课程详情，也可以自定义添加课程。
            </div>
        </div>
        
        <div class="help-item">
            <div class="item-title">📊 查成绩</div>
            <div class="item-content">
                查询各学期各科成绩，自动计算平均GPA，按学期筛选查看成绩详情。
            </div>
        </div>
        
        <div class="help-item">
            <div class="item-title">🏫 空教室查询</div>
            <div class="item-content">
                根据教学楼、星期、节次查询空闲教室，方便您找到自习和上课的场所。
            </div>
        </div>
        
        <div class="help-item">
            <div class="item-title">📚 学业详情</div>
            <div class="item-content">
                查看您的GPA、总学分、必修学分、选修学分、班级排名等学业统计信息。
            </div>
        </div>
        
        <div class="help-item">
            <div class="item-title">➕ 自定义课程</div>
            <div class="item-content">
                添加、编辑、删除自定义课程，支持设置课程名称、教师、地点、时间等信息。
            </div>
        </div>
    </div>

    <div class="help-section">
        <div class="section-title">使用指南</div>
        
        <div class="help-item">
            <div class="item-title">1. 首页导航</div>
            <div class="item-content">
                首页展示今日课表和功能分类，点击底部导航可以快速切换到大厅、课表、我的页面。
            </div>
        </div>
        
        <div class="help-item">
            <div class="item-title">2. 课表查看</div>
            <div class="item-content">
                在课表页面，可以查看每周的课程安排，点击周几可以切换查看不同日期的课程。
            </div>
        </div>
        
        <div class="help-item">
            <div class="item-title">3. 添加课程</div>
            <div class="item-content">
                在自定义课程页面，填写课程名称、教师、地点、时间等信息，点击添加即可完成课程创建。
            </div>
        </div>
        
        <div class="help-item">
            <div class="item-title">4. 空教室查询</div>
            <div class="item-content">
                选择教学楼、星期、节次和周次，点击查询即可找到符合条件的空闲教室。
            </div>
        </div>
    </div>

    <div class="help-section">
        <div class="section-title">常见问题</div>
        
        <div class="help-item">
            <div class="item-title">Q: 如何添加课程？</div>
            <div class="item-content">
                A: 进入"自定义课程"页面，填写课程信息后点击"添加课程"按钮即可。
            </div>
        </div>
        
        <div class="help-item">
            <div class="item-title">Q: 成绩数据如何导入？</div>
            <div class="item-content">
                A: 目前系统支持手动录入成绩数据，后续将支持从教务系统批量导入。
            </div>
        </div>
        
        <div class="help-item">
            <div class="item-title">Q: 如何修改个人信息？</div>
            <div class="item-content">
                A: 在"我的"页面，点击"编辑资料"可以修改个人信息。
            </div>
        </div>
    </div>

    <div class="help-section">
        <div class="section-title">联系我们</div>
        
        <div class="contact-info">
            <div class="contact-title">技术支持</div>
            <div class="contact-detail">
                如有任何问题或建议，欢迎联系我们的技术支持团队。<br>
                我们将在24小时内回复您的咨询。
            </div>
        </div>
    </div>
</div>

<!-- 底部导航 -->
<div class="bottom-nav">
    <div class="nav-item" onclick="location.href='../index.php'">
        <div class="nav-icon">
            <i class="fas fa-home"></i>
        </div>
        <div class="nav-name">大厅</div>
    </div>
    <div class="nav-item" onclick="location.href='schedule.php'">
        <div class="nav-icon">
            <i class="fas fa-calendar-alt"></i>
        </div>
        <div class="nav-name">课表</div>
    </div>
    <div class="nav-item" onclick="location.href='profile.php'">
        <div class="nav-icon">
            <i class="fas fa-user"></i>
        </div>
        <div class="nav-name">我的</div>
    </div>
</div>

<?php require_once '../includes/footer.php'; ?>
