113 lines
4.3 KiB
HTML
113 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-TW">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>用戶管理系統</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>用戶管理系統</h1>
|
|
|
|
<div class="nav-links">
|
|
<a href="add_user.html" class="nav-link">新增用戶</a>
|
|
</div>
|
|
|
|
<!-- 過濾和分頁控制 -->
|
|
<div class="filter-container">
|
|
<div class="filter-group">
|
|
<label for="min-age">最小年齡:</label>
|
|
<input type="number" id="min-age" min="0" max="150">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label for="max-age">最大年齡:</label>
|
|
<input type="number" id="max-age" min="0" max="150">
|
|
</div>
|
|
<button id="filter-btn">過濾</button>
|
|
<button id="reset-filter-btn">重置</button>
|
|
</div>
|
|
|
|
<!-- 用戶列表 -->
|
|
<div class="table-container">
|
|
<table id="users-table">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>姓名</th>
|
|
<th>電子郵件</th>
|
|
<th>年齡</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="users-list">
|
|
<!-- 用戶資料將由 JavaScript 動態填充 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 分頁控制 -->
|
|
<div class="pagination-container">
|
|
<button id="prev-page" disabled>上一頁</button>
|
|
<span id="page-info">第 <span id="current-page">1</span> 頁，共 <span id="total-pages">1</span> 頁</span>
|
|
<button id="next-page" disabled>下一頁</button>
|
|
<div class="page-size">
|
|
<label for="page-limit">每頁顯示:</label>
|
|
<select id="page-limit">
|
|
<option value="5">5</option>
|
|
<option value="10" selected>10</option>
|
|
<option value="20">20</option>
|
|
<option value="50">50</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 批量匯入 -->
|
|
<div class="import-container">
|
|
<h2>批量匯入用戶</h2>
|
|
<form id="import-form" enctype="multipart/form-data">
|
|
<div class="form-group">
|
|
<label for="import-file">選擇檔案 (Excel 或 CSV):</label>
|
|
<input type="file" id="import-file" name="file" accept=".csv, .xlsx, .xls" required>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="submit" id="import-btn">匯入</button>
|
|
</div>
|
|
</form>
|
|
<div class="import-info">
|
|
<p>支援的檔案格式: CSV, Excel (.xlsx, .xls)</p>
|
|
<p>檔案必須包含以下欄位: name, email, age</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 編輯用戶表單 (僅在編輯模式顯示) -->
|
|
<div class="form-container" id="edit-form-container" style="display: none;">
|
|
<h2 id="form-title">編輯用戶</h2>
|
|
<form id="user-form">
|
|
<input type="hidden" id="user-id">
|
|
<div class="form-group">
|
|
<label for="name">姓名:</label>
|
|
<input type="text" id="name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">電子郵件:</label>
|
|
<input type="email" id="email" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="age">年齡:</label>
|
|
<input type="number" id="age" min="0" required>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="submit" id="save-btn">更新</button>
|
|
<button type="button" id="cancel-btn">取消</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 訊息提示 -->
|
|
<div id="message" class="message"></div>
|
|
</div>
|
|
|
|
<script src="js/script.js"></script>
|
|
</body>
|
|
</html> |