diff --git a/main.js b/main.js
new file mode 100644
index 0000000..e0a14c6
--- /dev/null
+++ b/main.js
@@ -0,0 +1,299 @@
+const randomPhrases = [
+    "就决定是你了！: ${name} (${id}), 积分: ${score}",
+    "真相只有一个！: ${name} (${id}), 积分: ${score}",
+    "你被选中了！: ${name} (${id}), 积分: ${score}",
+    "幸运儿是你！: ${name} (${id}), 积分: ${score}",
+    "命运之轮转动！: ${name} (${id}), 积分: ${score}",
+    "你想成为一个【大人物】吗？: ${name} (${id}), pipis: ${score}",
+    "你醒啦？你现在是一个 ${name} 了，不要忘了(${id}), 你还能活 ${score}天"
+];
+
+function load2D_bg(){
+    var background = document.getElementById("background");
+    var range = 40;
+    var calcValue = function calcValue(a, b) {
+        return (a / b * range - range / 2).toFixed(1);
+    };
+    var timeout = void 0;
+    document.addEventListener('mousemove',
+    function(_ref) {
+        var x = _ref.x,
+        y = _ref.y;
+        if (timeout) {
+            window.cancelAnimationFrame(timeout);
+        }
+        timeout = window.requestAnimationFrame(function() {
+            var yValue = calcValue(y, window.innerHeight);
+            var xValue = calcValue(x, window.innerWidth);
+            
+                    
+            background.style.backgroundPositionX = xValue * 1 -200+ "px ";
+            background.style.backgroundPositionY =  (-yValue * 0.75-50 ) + "px";
+        })
+    },false);
+
+}
+
+function load2D_bg2(){
+    var background = document.getElementById("background2");
+    var range = 40;
+    var calcValue = function calcValue(a, b) {
+        return (a / b * range - range / 2).toFixed(1);
+    };
+    var timeout = void 0;
+    document.addEventListener('mousemove',
+    function(_ref) {
+        var x = _ref.x,
+        y = _ref.y;
+        if (timeout) {
+            window.cancelAnimationFrame(timeout);
+        }
+        timeout = window.requestAnimationFrame(function() {
+            var yValue = calcValue(y, window.innerHeight);
+            var xValue = calcValue(x, window.innerWidth);
+            
+            background.style.backgroundPositionX = xValue *1 -200+ "px ";
+            background.style.backgroundPositionY =  (-yValue * 0.75-50 ) + "px";
+        })
+    },false);
+
+}
+
+function load2D_bg2_2(){
+    var background = document.getElementById("background2");
+    document.onmousemove=function(){
+        console.log(window.outerHeight);
+        background.style.opacity=1-(getMousePos()/window.outerHeight*2.5);
+    }
+}
+
+function getMousePos(event) {
+    var e = event || window.event;
+    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
+    var y = e.pageY || e.clientY + scrollY;
+    return y;
+}
+
+function load2D_yinghua(){
+    var background = document.getElementById("yinghua");
+    var range = 40;
+    var calcValue = function calcValue(a, b) {
+        return (a / b * range - range / 2).toFixed(1);
+    };
+    var timeout = void 0;
+    document.addEventListener('mousemove',
+    function(_ref) {
+        var x = _ref.x,
+        y = _ref.y;
+        if (timeout) {
+            window.cancelAnimationFrame(timeout);
+        }
+        timeout = window.requestAnimationFrame(function() {
+            var yValue = calcValue(y, window.innerHeight);
+            var xValue = calcValue(x, window.innerWidth);
+            background.style.backgroundPositionX = xValue * 1.5 -200+ "px ";
+            background.style.backgroundPositionY =  (-yValue * 1-50 ) + "px";
+        })
+    },false);
+
+}
+var i=0;
+
+
+function startExtraction() {
+    // 渐隐现有画面
+    document.querySelector('.proflieCard').style.transition = 'opacity 1s';
+    document.querySelector('.proflieCard').style.opacity = '0';
+
+    // 1秒后显示新画面
+    setTimeout(function() {
+        document.querySelector('.proflieCard').style.display = 'none';
+        document.querySelector('.newScreen').style.display = 'block';
+        document.querySelector('.newScreen').style.opacity = '1';
+    }, 1000);
+}
+
+
+function importFile() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.xlsx';
+
+    input.onchange = function(event) {
+        const file = event.target.files[0];
+        if (file) {
+            const formData = new FormData();
+            formData.append('file', file);
+
+            fetch('http://127.0.0.1:5000/upload', {
+                method: 'POST',
+                body: formData
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        alert('导入成功');
+                    } else {
+                        alert('导入失败');
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    alert('导入失败');
+                });
+        }
+    };
+
+    input.click();
+}
+
+function drawStudent() {
+    // 发送请求到服务器的 /select_student 路由
+    fetch('http://127.0.0.1:5000/select_student')
+        .then(response => {
+            // 确保我们得到了一个成功的响应
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        })
+        .then(data => {
+            // 将抽取的学生信息显示在界面上
+            if (data && data.name && data.id) {
+                const studentInfo = document.getElementById('selectedStudent');
+                const randomPhrase = randomPhrases[Math.floor(Math.random() * randomPhrases.length)];
+                const phraseWithData = randomPhrase
+                    .replace('${name}', data.name)
+                    .replace('${id}', data.id)
+                    .replace('${score}', data.score);
+
+                studentInfo.innerHTML = `
+                    <p style="font-size: 24px;">${phraseWithData}</p>
+                    <button class = button1 id = "arrivedButton">到达课堂</button>
+                    <div id="scoreButtons" style="display: none;">
+                        <button class = button1 id="repeatedButton" style="margin: 40px 0; left = 1cm">正确重复</button>
+                        <button class = button1 id="distractedButton" style="margin: 10px 0;">上课走神</button>
+                        <br>
+                        <input type="number" id="correctInput" placeholder="输入分数" style = "width: 200px;">
+                        <button class = button1 id="addScoreButton" style="margin: 10px 0;">加分</button>
+                    </div>
+                `;
+
+                // 添加事件监听器
+                const arrivedButton = document.getElementById('arrivedButton');
+                const repeatedButton = document.getElementById('repeatedButton');
+                const distractedButton = document.getElementById('distractedButton');
+                const correctInput = document.getElementById('correctInput');
+                const addScoreButton = document.getElementById('addScoreButton');
+                const scoreButtons = document.getElementById('scoreButtons');
+
+                arrivedButton.onclick = () => {
+                    updateScore(data.id, 1, 0, 0);
+                    scoreButtons.style.display = 'block';
+                };
+
+                repeatedButton.onclick = () => updateScore(data.id, 0, 1, 0);
+                distractedButton.onclick = () => updateScore(data.id, 0, 2, 0);
+                addScoreButton.onclick = () => {
+                    const correct = parseFloat(correctInput.value) || 0;
+                    updateScore(data.id, 0, 0, correct);
+                };
+                if (data.score >= 1) {
+                    fetch(`http://127.0.0.1:5000/check_probability?id=${data.id}`)
+                        .then(response => response.json())
+                        .then(probData => {
+                            if (probData.probability < 0.02) {
+                                alert(`恭喜${data.name}同学喜提超级无敌终极宇宙至尊非酋称号！！！`);
+                            } else if (probData.probability < 0.1) {
+                                alert(`恭喜${data.name}同学喜提万中挑一的非酋称号！！！`);
+                            }
+                        })
+                        .catch(error => {
+                            console.error('Error:', error);
+                        });
+                }
+            } else {
+                const studentInfo = document.getElementById('selectedStudent');
+                studentInfo.innerHTML = '<p>No student selected.</p>';
+            }
+        })
+        .catch(error => {
+            console.error('你的fetch被GAY了:', error);
+        });
+}
+
+
+function updateScore(studentId, arrived, repeated, correct) {
+    fetch('http://127.0.0.1:5000/update_score', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            id: studentId,
+            arrived: arrived,
+            repeated: repeated,
+            correct: correct
+        })
+    })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                alert(`更新积分成功。新的积分: ${data.score}`);
+            } else {
+                alert(`难以更新积分: ${data.error}`);
+            }
+        })
+        .catch(error => {
+            console.error('你的fetch被GAY了:', error);
+        });
+}
+
+function exportFile() {
+    fetch('http://127.0.0.1:5000/export_file')
+        .then(response => response.blob())
+        .then(blob => {
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'students.xlsx';
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            alert('导出文件失败');
+        });
+}
+
+function drawTenStudents() {
+    // 发送请求到服务器的 /select_ten_students 路由
+    fetch('http://127.0.0.1:5000/select_ten_students')
+        .then(response => {
+            // 确保我们得到了一个成功的响应
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        })
+        .then(data => {
+            // 将抽取的十个学生信息显示在界面上
+            if (data && data.students) {
+                const studentInfo = document.getElementById('selectedStudent');
+                studentInfo.innerHTML = ''; // 清空之前的内容
+
+                data.students.forEach(student => {
+                    studentInfo.innerHTML += `
+                        <p style="font-size: 24px;">人多力量大！！！: ${student.name} (${student.id}), 积分: ${student.score}</p>
+                    `;
+                });
+            } else {
+                const studentInfo = document.getElementById('selectedStudent');
+                studentInfo.innerHTML = '<p>No students selected.</p>';
+            }
+        })
+        .catch(error => {
+            console.error('你的fetch被GAY了:', error);
+        });
+}