first commit

static/teacher.html

@@ -0,0 +1,75 @@
+<!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">
+        <div class="section-head">
+          <h2>班级管理</h2>
+          <div class="actions">
+            <button class="success" id="exportButton" type="button">导出当前班 Excel</button>
+            <label class="ghost button small" style="display:inline-flex;align-items:center;padding:0 10px;background:#eef2f7;color:#18212f;border-radius:8px;height:38px">
+              上传名单<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" style="margin-top:14px" id="managementStatus"></div>
+        <p class="hint">点击班级即切换当前开放登录班级，并查看/管理该班分组。其它班学生不能登录。</p>
+      </section>
+
+      <div class="statistics" id="statistics"></div>
+
+      <section class="panel">
+        <div class="section-head"><h2>手工新建小组</h2></div>
+        <form class="form-line" id="createGroupForm">
+          <input id="newGroupName" maxlength="30" placeholder="输入新组名，例如：第 9 组" required>
+          <button data-working type="submit">创建小组</button>
+        </form>
+      </section>
+
+      <section class="panel">
+        <div class="section-head"><h2>全部小组（成员直接可见）</h2></div>
+        <div class="grid" id="groupsGrid"></div>
+      </section>
+
+      <section class="panel">
+        <div class="section-head"><h2>未分组学生</h2></div>
+        <div id="ungroupedList"></div>
+      </section>
+    </div>
+  </main>
+
+  <script src="/shared.js"></script>
+  <script src="/teacher.js"></script>
+</body>
+</html>