83 lines
2.9 KiB
HTML
83 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Naga数据提交系统</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>📊 Naga数据提交系统</h1>
|
||
<p class="subtitle">请填写以下信息提交您的数据</p>
|
||
</header>
|
||
|
||
<!-- 提交表单 -->
|
||
<section class="form-section">
|
||
<h2>提交新数据</h2>
|
||
<form id="submitForm">
|
||
<div class="form-group">
|
||
<label for="name">提交人 <span class="required">*</span></label>
|
||
<input type="text" id="name" name="name" required placeholder="请输入人名">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="link">牌谱链接 <span class="required">*</span></label>
|
||
<input type="url" id="link" name="link" required placeholder="https://example.com/link">
|
||
<span class="hint">请输入完整的 URL 地址</span>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="note">备注说明</label>
|
||
<textarea id="note" name="note" rows="4" placeholder="请输入备注说明 (选填，最多200字)" maxlength="200"></textarea>
|
||
<span class="hint char-count">当前字数: <span id="noteCount">0</span> / 200</span>
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-primary">提交数据</button>
|
||
</form>
|
||
</section>
|
||
|
||
<!-- 数据列表 -->
|
||
<section class="data-section">
|
||
<div class="section-header">
|
||
<h2>数据列表</h2>
|
||
<button onclick="loadData()" class="btn btn-secondary">🔄 刷新</button>
|
||
</div>
|
||
|
||
<div class="table-container">
|
||
<table id="dataTable">
|
||
<thead>
|
||
<tr>
|
||
<th class="sortable" onclick="sortTable('id')">序号 <span class="sort-icon">⇅</span></th>
|
||
<th class="sortable" onclick="sortTable('submitTime')">提交时间 <span class="sort-icon">⇅</span></th>
|
||
<th class="sortable" onclick="sortTable('name')">提交人 <span class="sort-icon">⇅</span></th>
|
||
<th>牌谱链接</th>
|
||
<th>备注说明</th>
|
||
<th class="sortable" onclick="sortTable('hasNaga')">是否有 Naga <span class="sort-icon">⇅</span></th>
|
||
<th>Naga 链接</th>
|
||
<th>Naga 说明</th>
|
||
<th>图片</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="dataTableBody">
|
||
<tr>
|
||
<td colspan="9" class="loading">加载中...</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- 图片查看模态框 -->
|
||
<div id="imageModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close">×</span>
|
||
<div id="modalImages" class="modal-images"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="main.js"></script>
|
||
</body>
|
||
</html> |