diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e1c6ff0
--- /dev/null
+++ b/index.html
@@ -0,0 +1,135 @@
+<!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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            text-align: center;
+            background: linear-gradient(to bottom, #d4efea, #ffffff);
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+
+        h1 {
+            color: #333;
+            margin: 0 auto;
+            text-align: center;
+        }
+
+        button {
+            padding: 10px 20px;
+            background-color: #428ddd;
+            color: white;
+            border: none;
+            cursor: pointer;
+            margin-top: 20px;
+        }
+
+        button:hover {
+            background-color: #2d81da;
+        }
+
+        #excelDataDisplay div {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        #excelDataDisplay div:not(:first-child) {
+            border-bottom: 1px solid #000;
+        }
+
+        #excelDataDisplay span {
+            padding: 5px;
+        }
+
+        .sticky-nav {
+            position: sticky;
+            top: 0;
+            background-color: #d4efea;
+            z-index: 1000;
+        }
+
+        #page1 {
+            background-image: url('对吗.jpg'), url('对吗.jpg');
+            background-position: left, right;
+            background-repeat: no-repeat;
+            background-size: contain;
+
+        }
+
+        /* 设置选项卡背景颜色 */
+        .nav-link {
+            background-color: #a3daea;
+            color: #000000;
+        }
+
+        .nav-link.active {
+            background-color: #becfe27a;
+            color: #000000;
+        }
+    </style>
+</head>
+
+<body>
+    <!-- 设置选项卡 -->
+    <div class="sticky-nav">
+        <ul class="nav nav-tabs" id="myTab" role="tablist">
+            <li class="nav-item" role="presentation">
+                <button class="nav-link active" id="page1-tab" data-bs-toggle="tab" data-bs-target="#page1" role="tab"
+                    aria-controls="page1" aria-selected="true">主页面</button>
+            </li>
+
+            <li class="nav-item" role="presentation">
+                <button class="nav-link" id="page2-tab" data-bs-toggle="tab" data-bs-target="#page2" role="tab"
+                    aria-controls="page2" aria-selected="false">名单</button>
+            </li>
+        </ul>
+    </div>
+
+    <div class="tab-content" id="myTabContent">
+        <div class="tab-pane fade show active" id="page1" role="tabpanel" aria-labelledby="page1-tab">
+            <h1>点名系统</h1>
+            <p><input type="file" id="excelFileInput" accept=".xlsx,.xls"></p>
+            <p><button id="callButton">点名</button></p>
+            <div id="selectedStudentInfo"></div>
+            <p>学生是否到达教室<button id="arriveClassroom">到</button></p>
+            <p>
+                学生是否准确重复所提问的问题
+                <button id="repeatedQuestionYes">是</button>
+                <button id="repeatedQuestionNo">否</button>
+            </p>
+            <p>
+                根据回答情况增加分数：<input type="number" id="addScoreInput">
+                <!-- 最大值3， 最小值0.5， 步幅0.1  -->
+                <button id="addScoreButton" max="3" min="0.5" sep="0.1">增加分数</button>
+            </p>
+
+        </div>
+
+        <div class="tab-pane fade" id="page2" role="tabpanel" aria-labelledby="page2-tab">
+            <h1>学生名单</h1>
+            <div id="excelDataDisplay">
+                <div style="display: flex; justify-content: space-between;">
+                    <span>学号</span>
+                    <span>姓名</span>
+                    <span>积分</span>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
+    <script src="index.js"></script>
+</body>
+
+</html>
\ No newline at end of file
