<!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://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css'>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Long+Cang&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
</head>
<body>
<h1>随机点名系统</h1>
<div id="message" style="display:none; position:fixed; top:20px; left:50%; transform:translateX(-50%); background-color:rgba(0, 0, 0, 0.5); color:white; padding:10px; border-radius:5px; white-space:nowrap;">
</div>
<div class="container">
<div class="file-upload">
<button
data-tooltip="导入名单"
id="fileButton" style="background: none; border: none; cursor: pointer;">
<img src="file-icon.svg" alt="选择文件" style="width: 40px; height: 40px;" />
</button>
<span id="fileName" style="display: none;">未选择文件</span>
</div>
<div class="modal" id="uploadModal">
<div class="modal-content">
<span class="close-button" id="closeButton">×</span>
<div class="upload-box" id="uploadBox">
<p id="uploadText">点击或拖拽文件到此处上传</p>
<input type="file" id="fileInput" style="display: none;"/>
<div class="pic">↓</div>
</div>
<div class="button-container">
<button id="cancelButton">取消</button>
<button id="okButton">确定</button>
</div>
</div>
</div>
<div class="button-row">
<button id="drawButton" onclick="startDraw()" style="margin-bottom: 40px;">开始点名</button>
</div>
<div class="button-row">
<button id="onClass" onclick="onClass()" style="width:15% ;">到场</button>
</div>
<div class="button-row">
<button id="correctButton" onclick="repeatCorrectly()">准确重复问题</button>
<button id="incorrectButton" onclick="repeatIncorrectly()">重复不准确</button>
</div>
<div class="rating">
<input type="radio" name="rating" id="5" value="3" />
<label for="5" data-value="5"><i class="icon ion-md-star-outline"></i><span class="star-number hidden">3</span></label>
<input type="radio" name="rating" id="4" value="2" />
<label for="4" data-value="4"><i class="icon ion-md-star-outline"></i><span class="star-number hidden">2</span></label>
<input type="radio" name="rating" id="3" value="1.5" />
<label for="3" data-value="3"><i class="icon ion-md-star-outline"></i><span class="star-number hidden">1.5</span></label>
<input type="radio" name="rating" id="2" value="1" />
<label for="2" data-value="2"><i class="icon ion-md-star-outline"></i><span class="star-number hidden">1</span></label>
<input type="radio" name="rating" id="1" value="0.5" />
<label for="1" data-value="1"><i class="icon ion-md-star-outline"></i><span class="star-number hidden">0.5</span></label>
</div>
<!--<input type="text" id="manualPoints" placeholder="手动加减积分 (范围 0.5 到 3)" /> -->
<div class="button-row">
<!--<button id="manualButton" onclick="updatePoints()" disabled>更新积分</button> -->
<button id="resetButton" onclick="resetAllPoints()" >重置所有积分</button>
</div>
<div class="view-student-row">
<button onclick="viewStudentList()">查看学生名单</button>
</div>
</div>
<div id="scrollingNames"></div>
<div id="selectedStudent"></div>
<div class="tooltip" id="tooltip"></div>
<canvas id="particleCanvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.1/xlsx.full.min.js"></script>
<script src="mainPage.js"></script>
</body>
</html>