diff --git a/点名详细页面.html b/点名详细页面.html
new file mode 100644
index 0000000..408e649
--- /dev/null
+++ b/点名详细页面.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>点名详细页面</title>
+    <link rel="stylesheet" href="style_3.css">
+</head>
+
+<body>
+    <div class="background-container">
+        <div class="firstcontainer">
+            <button class="getpeople" onclick="startRollCall()">点击开始点名</button>
+            <label for="displayName" class="text1">姓名</label>
+            <input type="text" id="displayName" class="mytext1">
+            <label for="displayStudentID" class="text2">学号</label>
+            <input type="text" id="displayStudentID" class="mytext2">
+            <text3 class="text3">出勤</text3>
+            <svg class="signal1" xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54"
+                fill="none">
+                <!-- SVG content -->
+            </svg>
+            <text4 class="text4">缺勤</text4>
+            <svg class="signal2" xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54"
+                fill="none">
+                <!-- SVG content -->
+            </svg>
+            <text5 class="text5">答题积分</text5>
+            <input type="text" id="answerPoints" class="mytext3">
+            <text6 class="text6">确认</text6>
+            <svg class="signal3" xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54"
+                fill="none">
+                <!-- SVG content -->
+            </svg>
+            <button onclick="confirmPoints()">确认加分</button>
+        </div>
+    </div>
+
+    <script>
+        function startRollCall() {
+            fetch('http://localhost:3001/api/get-random-student')
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Network response was not ok');
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    document.getElementById("displayName").value = data.name;
+                    document.getElementById("displayStudentID").value = data.student_id;
+                    // 默认出勤积分为1
+                    addAttendancePoints(data.student_id);
+                })
+                .catch(error => {
+                    console.error('There was a problem with the fetch operation:', error);
+                    alert('信息导入失败，请重试。错误信息：' + error.message);
+                });
+        }
+
+        function addAttendancePoints(studentId) {
+            fetch('http://localhost:3001/api/add-attendance-points', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ student_id: studentId }),
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(data => {
+                console.log('Attendance points added:', data);
+            })
+            .catch(error => {
+                console.error('There was a problem adding attendance points:', error);
+            });
+        }
+
+        function confirmPoints() {
+            const studentId = document.getElementById("displayStudentID").value;
+            const points = document.getElementById("answerPoints").value;
+
+            if (!studentId || isNaN(points)) {
+                alert('请先选择一个学生并输入有效的积分数。');
+                return;
+            }
+
+            fetch('http://localhost:3001/api/confirm-points', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ student_id: studentId, points: parseInt(points, 10) }),
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(data => {
+                console.log('Points confirmed and updated:', data);
+                alert('积分更新成功！');
+            })
+            .catch(error => {
+                console.error('There was a problem confirming points:', error);
+                alert('积分更新失败。错误信息：' + error.message);
+            });
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
