码桶
发现社区成员的开源项目
admin.html12 KB
<!DOCTYPE html>
<html lang="zh-Hant">
<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 class="admin-body">
<!-- 登入層 -->
<div class="login-overlay" id="loginOverlay" style="display:none;">
<div class="login-box">
<h2>🔐 管理後台登入</h2>
<input type="password" id="loginPwd" placeholder="請輸入密碼">
<button id="loginBtn">登入</button>
<p class="login-hint">請輸入管理密碼</p>
</div>
</div>
<!-- 主內容 -->
<div id="mainContent" style="display:none;">
<div class="admin-header">
<span>域名管理後台</span>
<span>
<a href="javascript:void(0)" id="viewSiteBtn">查看前台</a> |
<a href="javascript:void(0)" id="logoutBtn">登出</a>
</span>
</div>
<div class="admin-container">
<!-- 統計 -->
<div class="stats-bar">
<div class="stat-card"><div class="num" id="statTotal">0</div><div class="label">域名總數</div></div>
<div class="stat-card"><div class="num" id="statAvailable">0</div><div class="label">在售中</div></div>
<div class="stat-card"><div class="num" id="statPending">0</div><div class="label">洽談中</div></div>
<div class="stat-card"><div class="num" id="statSold">0</div><div class="label">已售出</div></div>
<div class="stat-card"><div class="num" id="statValue">$0</div><div class="label">在售總值</div></div>
</div>
<!-- 新增/編輯表單 -->
<div class="admin-section-title" id="formTitle">新增域名</div>
<form id="domainForm">
<div class="form-row">
<label>分類</label>
<input type="text" id="formCategory" list="categoryList" placeholder="如：數字類、商務類" required style="width:180px;">
<datalist id="categoryList"></datalist>
<label style="width:auto;margin-left:10px;">狀態</label>
<select id="formStatus">
<option value="available">在售</option>
<option value="pending">洽談中</option>
<option value="sold">已售</option>
</select>
</div>
<div class="form-row">
<label>域名</label>
<input type="text" id="formName" placeholder="如：6666.HK" required>
</div>
<div class="form-row">
<label>售價</label>
<input type="number" id="formPrice" placeholder="如：15000" required style="width:150px;">
<label style="width:auto;margin-left:10px;">幣別</label>
<select id="formCurrency">
<option value="HKD">HKD 港幣</option>
<option value="USD">USD 美元</option>
<option value="CNY">CNY 人民幣</option>
<option value="TWD">TWD 台幣</option>
</select>
</div>
<div class="form-row">
<label>聯絡郵箱</label>
<input type="text" id="formContact" placeholder="如：[email protected]（留空則使用預設）">
</div>
<div class="form-row">
<button type="submit" class="btn btn-primary" id="submitBtn">新增</button>
<button type="button" class="btn" id="cancelBtn" style="display:none;background:#999;color:#FFF;">取消編輯</button>
</div>
</form>
<div style="height:20px;"></div>
<!-- 工具列 -->
<div class="admin-section-title">域名列表</div>
<div class="toolbar">
<input type="text" id="adminSearch" placeholder="搜尋域名或分類..." style="width:200px;">
<select id="adminStatusFilter">
<option value="all">全部狀態</option>
<option value="available">在售</option>
<option value="pending">洽談中</option>
<option value="sold">已售</option>
</select>
<div class="spacer"></div>
<button class="btn btn-success btn-sm" id="batchBtn">批量匯入</button>
<button class="btn btn-primary btn-sm" id="exportBtn">導出JSON</button>
<button class="btn btn-warning btn-sm" onclick="document.getElementById('importFile').click()">匯入JSON</button>
<input type="file" id="importFile" accept=".json" style="display:none;">
<button class="btn btn-danger btn-sm" id="clearBtn">清空全部</button>
</div>
<!-- 批量匯入區 -->
<div id="batchArea" style="display:none;margin-bottom:15px;background:#FFF5FF;padding:15px;border-radius:5px;">
<p style="font-size:13px;color:#666;margin-bottom:8px;">
每行一條，格式：<strong>分類, 域名, 價格</strong>（逗號或製表符分隔）<br>
範例：<code>商務類, www.ticket.hk, 10000</code>
</p>
<textarea id="batchInput" rows="6" style="width:100%;font-family:monospace;font-size:13px;padding:8px;border:1px solid #ccc;border-radius:3px;" placeholder="商務類, www.ticket.hk, 10000 商務類, www.hotel.hk, 20000 科技類, ai.hk, 50000"></textarea>
<button class="btn btn-success btn-sm" id="batchSubmit" style="margin-top:8px;">開始匯入</button>
</div>
<!-- 密碼修改區 -->
<div id="pwdArea" style="display:none;margin-bottom:15px;background:#FFF5FF;padding:15px;border-radius:5px;">
<form id="pwdForm">
<div class="form-row">
<label>原密碼</label>
<input type="password" id="oldPwd" required style="width:180px;">
</div>
<div class="form-row">
<label>新密碼</label>
<input type="password" id="newPwd" required style="width:180px;">
</div>
<div class="form-row">
<label>確認密碼</label>
<input type="password" id="confirmPwd" required style="width:180px;">
</div>
<button type="submit" class="btn btn-primary btn-sm">確認修改</button>
</form>
</div>
<!-- 列表表格 -->
<table class="admin-table">
<thead>
<tr>
<th>分類</th>
<th>域名</th>
<th style="text-align:right;">售價</th>
<th>幣別</th>
<th>狀態</th>
<th>聯絡</th>
<th>操作</th>
</tr>
</thead>
<tbody id="adminTableBody"></tbody>
</table>
<div style="margin-top:20px;text-align:right;">
<button class="btn btn-sm" style="background:#990000;color:#FFF;" id="settingsBtn">網站設置</button>
<button class="btn btn-sm" style="background:#ddd;" id="pwdBtn">修改密碼</button>
</div>
<!-- 網站設置區 -->
<div id="settingsArea" style="display:none;margin-top:15px;background:#FFF5FF;padding:20px;border-radius:5px;border:1px solid #FF99FF;">
<div class="admin-section-title" style="margin-bottom:15px;">網站設置（前台顯示內容）</div>
<form id="settingsForm">
<!-- 標題區 -->
<div style="font-weight:bold;color:#990000;margin-bottom:8px;">標題區</div>
<div class="form-row">
<label>英文標題</label>
<input type="text" id="setTitleEn" style="flex:1;">
</div>
<div class="form-row">
<label>中文標題</label>
<input type="text" id="setTitleZh" style="flex:1;">
</div>
<div class="form-row">
<label>簡介文字</label>
<textarea id="setIntroText" rows="3" style="flex:1;padding:6px 10px;border:1px solid #ccc;border-radius:3px;font-family:inherit;font-size:14px;"></textarea>
</div>
<div style="height:12px;"></div>
<!-- 特點列表 -->
<div style="font-weight:bold;color:#990000;margin-bottom:8px;">特點列表（前台首頁三個要點）</div>
<div class="form-row">
<label>要點一標題</label>
<input type="text" id="setF1Title" style="width:160px;">
<label style="width:auto;margin-left:10px;">描述</label>
<input type="text" id="setF1Desc" style="flex:1;">
</div>
<div class="form-row">
<label>要點二標題</label>
<input type="text" id="setF2Title" style="width:160px;">
<label style="width:auto;margin-left:10px;">描述</label>
<input type="text" id="setF2Desc" style="flex:1;">
</div>
<div class="form-row">
<label>要點三標題</label>
<input type="text" id="setF3Title" style="width:160px;">
<label style="width:auto;margin-left:10px;">描述</label>
<input type="text" id="setF3Desc" style="flex:1;">
</div>
<div style="height:12px;"></div>
<!-- 聯絡資訊 -->
<div style="font-weight:bold;color:#990000;margin-bottom:8px;">聯絡資訊</div>
<div class="form-row">
<label>聯絡人一</label>
<input type="text" id="setContactPerson" style="width:180px;">
<label style="width:auto;margin-left:10px;">聯絡人二</label>
<input type="text" id="setContactPerson2" style="width:180px;">
</div>
<div class="form-row">
<label>聯絡電話</label>
<input type="text" id="setContactPhone" style="width:180px;">
<label style="width:auto;margin-left:10px;">WhatsApp號碼</label>
<input type="text" id="setWhatsappNumber" placeholder="如：85265166666" style="width:180px;">
</div>
<div class="form-row">
<label>電郵一</label>
<input type="text" id="setEmail1" style="width:180px;">
<label style="width:auto;margin-left:10px;">電郵二</label>
<input type="text" id="setEmail2" style="width:180px;">
</div>
<div class="form-row">
<label>預設幣別</label>
<select id="setCurrency" style="width:120px;">
<option value="HKD">HKD 港幣</option>
<option value="USD">USD 美元</option>
<option value="CNY">CNY 人民幣</option>
<option value="TWD">TWD 台幣</option>
</select>
</div>
<div style="height:12px;"></div>
<!-- 聯絡頁面 -->
<div style="font-weight:bold;color:#990000;margin-bottom:8px;">聯絡頁面設置</div>
<div class="form-row">
<label>頁面英文標題</label>
<input type="text" id="setContactTitleEn" style="flex:1;">
</div>
<div class="form-row">
<label>頁面中文標題</label>
<input type="text" id="setContactTitleZh" style="flex:1;">
</div>
<div class="form-row">
<label>聯絡頁簡介</label>
<textarea id="setContactIntro" rows="2" style="flex:1;padding:6px 10px;border:1px solid #ccc;border-radius:3px;font-family:inherit;font-size:14px;"></textarea>
</div>
<div style="height:12px;"></div>
<!-- 額外聯絡方式 -->
<div style="font-weight:bold;color:#990000;margin-bottom:8px;">額外聯絡方式（可選，留空不顯示）</div>
<div class="form-row">
<label>微信 ID</label>
<input type="text" id="setWechatId" style="flex:1;">
</div>
<div class="form-row">
<label>Telegram</label>
<input type="text" id="setTelegramId" placeholder="如：username" style="flex:1;">
</div>
<div class="form-row">
<label>地址</label>
<input type="text" id="setAddress" style="flex:1;">
</div>
<div class="form-row">
<label>營業時間</label>
<input type="text" id="setBusinessHours" placeholder="如：星期一至五 9:00-18:00" style="flex:1;">
</div>
<div class="form-row" style="margin-top:15px;">
<button type="submit" class="btn btn-primary">儲存設置</button>
<button type="button" class="btn" style="background:#ddd;" id="resetSettingsBtn">恢復預設</button>
</div>
</form>
</div>
</div>
</div>
<script src="js/sync.js"></script>
<script src="js/data.js"></script>
<script src="js/admin.js"></script>
</body>
</html>