102 lines
5.0 KiB
HTML
102 lines
5.0 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>分组管理后台</title>
|
||
<link rel="stylesheet" href="/style.css">
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<div class="brand"><i class="brand-mark">师</i><span>分组管理后台</span></div>
|
||
<div class="toolbar hidden" id="teacherToolbar">
|
||
<span class="chip" id="teacherChip"></span>
|
||
<button class="ghost" id="logoutButton" type="button">退出</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="page">
|
||
<div id="loginArea" class="login-wrap">
|
||
<form class="login-card" id="loginForm">
|
||
<h1 class="title">教师登录</h1>
|
||
<p class="subtitle">请使用教师后台账号登录，管理开放班级和分组。</p>
|
||
<label for="username">教师账号</label>
|
||
<input id="username" autocomplete="username" required>
|
||
<label for="password">密码</label>
|
||
<input id="password" type="password" autocomplete="current-password" required>
|
||
<button class="full" data-working type="submit">登录后台</button>
|
||
<div class="notice" id="loginNotice"></div>
|
||
<p class="hint">默认账号 teacher，默认密码 teacher123。首次使用后请及时修改密码。</p>
|
||
</form>
|
||
</div>
|
||
|
||
<div id="mainArea" class="hidden">
|
||
<section class="panel class-panel">
|
||
<div class="section-head">
|
||
<h2>当前班级</h2>
|
||
<div class="actions">
|
||
<button class="success" id="exportButton" type="button">导出当前班 Excel</button>
|
||
<label class="ghost button small import-label">
|
||
上传名单<input id="importFile" type="file" accept=".xlsx" class="hidden">
|
||
</label>
|
||
<button class="warning" id="lockButton" type="button">停止学生操作</button>
|
||
</div>
|
||
</div>
|
||
<div class="class-tabs" id="classTabs"></div>
|
||
<div class="status-row" id="managementStatus"></div>
|
||
<p class="hint">点击班级即切换当前开放登录班级，并查看/管理该班分组。其它班学生不能登录。</p>
|
||
</section>
|
||
|
||
<nav class="admin-tabs" role="tablist" aria-label="教师管理功能">
|
||
<button class="admin-tab active" id="groupsTab" data-tab="groups" aria-controls="groupsPanel" aria-selected="true" type="button">小组管理</button>
|
||
<button class="admin-tab" id="ungroupedTab" data-tab="ungrouped" aria-controls="ungroupedPanel" aria-selected="false" type="button">未分组学生</button>
|
||
<button class="admin-tab" id="settingsTab" data-tab="settings" aria-controls="settingsPanel" aria-selected="false" type="button">设置与安全</button>
|
||
</nav>
|
||
|
||
<section class="panel tab-panel" id="groupsPanel" role="tabpanel" aria-labelledby="groupsTab">
|
||
<div class="statistics" id="statistics"></div>
|
||
|
||
<div class="section-head"><h2>手工新建小组</h2></div>
|
||
<form class="form-line create-group-line" id="createGroupForm">
|
||
<input id="newGroupName" maxlength="30" placeholder="输入新组名，例如：第 9 组" required>
|
||
<button data-working type="submit">创建小组</button>
|
||
</form>
|
||
|
||
<div class="section-head groups-head"><h2>全部小组（成员直接可见）</h2></div>
|
||
<div class="grid" id="groupsGrid"></div>
|
||
</section>
|
||
|
||
<section class="panel tab-panel hidden" id="ungroupedPanel" role="tabpanel" aria-labelledby="ungroupedTab">
|
||
<div class="section-head"><h2>未分组学生</h2></div>
|
||
<div id="ungroupedList"></div>
|
||
</section>
|
||
|
||
<section class="panel tab-panel hidden" id="settingsPanel" role="tabpanel" aria-labelledby="settingsTab">
|
||
<div class="section-head"><h2>设置与安全</h2></div>
|
||
<h3>分组上限</h3>
|
||
<form class="form-line" id="groupLimitForm">
|
||
<input id="groupLimit" type="number" min="2" max="100" required>
|
||
<span>人</span>
|
||
<button data-working type="submit">保存上限</button>
|
||
</form>
|
||
<p class="hint">调整后立即对所有班级生效；已有小组不会被自动拆分。</p>
|
||
<div class="notice" id="groupLimitNotice"></div>
|
||
|
||
<div class="settings-divider"></div>
|
||
<h3>账号安全</h3>
|
||
<form class="form-line settings-password-line" id="teacherPasswordForm">
|
||
<input id="teacherOldPassword" type="password" autocomplete="current-password" placeholder="原密码" required>
|
||
<input id="teacherNewPassword" type="password" autocomplete="new-password" minlength="8" placeholder="新密码（至少 8 位）" required>
|
||
<input id="teacherConfirmPassword" type="password" autocomplete="new-password" minlength="8" placeholder="确认新密码" required>
|
||
<button data-working type="submit">修改密码</button>
|
||
</form>
|
||
<div class="notice" id="teacherPasswordNotice"></div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
|
||
<script src="/shared.js"></script>
|
||
<script src="/teacher.js"></script>
|
||
</body>
|
||
</html>
|