User:Lch 333/Check.js
注意：保存之后，你必须清除浏览器缓存才能看到做出的更改。Google Chrome、Firefox、Microsoft Edge及Safari：按住⇧ Shift键并单击工具栏的“刷新”按钮。参阅Help:绕过浏览器缓存以获取更多帮助。
<!DOCTYPE JavaScript>
<JavaScript lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用戶資格檢查工具 - 管理員版</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', 'Microsoft JhengHei', sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: #333;
line-height: 1.6;
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1000px;
margin: 0 auto;
background-color: white;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
padding: 30px;
position: relative;
overflow: hidden;
}
.container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #3498db, #2ecc71, #e74c3c, #f39c12);
}
h1 {
text-align: center;
margin-bottom: 25px;
color: #2c3e50;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
h1 i {
color: #3498db;
}
.search-section {
display: flex;
margin-bottom: 30px;
gap: 10px;
}
input[type="text"] {
flex: 1;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
transition: border-color 0.3s;
}
input[type="text"]:focus {
border-color: #3498db;
outline: none;
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}
button {
background-color: #3498db;
color: white;
border: none;
border-radius: 6px;
padding: 12px 20px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s;
font-weight: 500;
}
button:hover {
background-color: #2980b9;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 25px;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
}
.tab {
padding: 10px 18px;
background-color: #f8f9fa;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s;
font-size: 14px;
color: #555;
border: 1px solid #e9ecef;
}
.tab:hover {
background-color: #e9ecef;
}
.tab.active {
background-color: #3498db;
color: white;
border-color: #3498db;
}
.result-card {
border-radius: 8px;
padding: 25px;
background-color: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
margin-top: 20px;
display: none;
border: 1px solid #e9ecef;
}
.user-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.username {
font-size: 24px;
font-weight: 600;
color: #2c3e50;
}
.status {
padding: 6px 15px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
}
.status.eligible {
background-color: #e8f6ef;
color: #27ae60;
border: 1px solid #a3e4bc;
}
.status.not-eligible {
background-color: #fdedec;
color: #e74c3c;
border: 1px solid #f5b7b1;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.info-item {
display: flex;
flex-direction: column;
padding: 15px;
background-color: #f8f9fa;
border-radius: 6px;
border-left: 4px solid #3498db;
}
.info-label {
font-size: 14px;
color: #7f8c8d;
margin-bottom: 5px;
}
.info-value {
font-size: 18px;
font-weight: 500;
color: #2c3e50;
}
.activity-meter {
margin-top: 25px;
}
.meter-label {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.meter-bar {
height: 12px;
background-color: #ecf0f1;
border-radius: 6px;
overflow: hidden;
}
.meter-fill {
height: 100%;
border-radius: 6px;
transition: width 0.5s ease;
}
.low-activity {
background-color: #e74c3c;
width: 30%;
}
.medium-activity {
background-color: #f39c12;
width: 60%;
}
.high-activity {
background-color: #27ae60;
width: 90%;
}
.loading {
text-align: center;
padding: 20px;
display: none;
}
.error-message {
color: #e74c3c;
text-align: center;
padding: 15px;
background-color: #fdedec;
border-radius: 6px;
margin-top: 20px;
display: none;
border: 1px solid #f5b7b1;
}
.sample-users {
margin-top: 30px;
text-align: center;
}
.sample-users p {
margin-bottom: 10px;
color: #7f8c8d;
}
.sample-buttons {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.sample-btn {
background-color: #95a5a6;
padding: 8px 15px;
font-size: 14px;
}
.sample-btn:hover {
background-color: #7f8c8d;
}
.tab-content {
display: none;
padding: 20px;
background-color: #f8f9fa;
border-radius: 6px;
margin-top: 15px;
border: 1px solid #e9ecef;
}
.tab-content.active {
display: block;
}
.tab-content h3 {
margin-bottom: 15px;
color: #2c3e50;
border-bottom: 1px solid #dee2e6;
padding-bottom: 10px;
}
.tab-content ul {
list-style-type: none;
}
.tab-content li {
padding: 8px 0;
border-bottom: 1px solid #e9ecef;
}
.tab-content li:last-child {
border-bottom: none;
}
@media (max-width: 768px) {
.container {
padding: 20px;
}
.search-section {
flex-direction: column;
}
.info-grid {
grid-template-columns: 1fr;
}
.tabs {
overflow-x: auto;
padding-bottom: 10px;
}
.user-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
.icon {
display: inline-block;
width: 20px;
text-align: center;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1><i class="icon">🔍</i> 用戶資格檢查工具 - 管理員版</h1>
<div class="search-section">
<input type="text" id="usernameInput" placeholder="請輸入用戶名">
<button id="searchBtn">檢查資格</button>
</div>
<div class="tabs">
<div class="tab active" data-tab="overview">用戶概覽</div>
<div class="tab" data-tab="discussion">討論頁</div>
<div class="tab" data-tab="contributions">貢獻</div>
<div class="tab" data-tab="deleted">已刪貢獻</div>
<div class="tab" data-tab="editreport">編輯報告</div>
<div class="tab" data-tab="created">所創條目</div>
<div class="tab" data-tab="logs">日誌</div>
<div class="tab" data-tab="blocklog">封鎖日誌</div>
<div class="tab" data-tab="rightslog">除權紀錄</div>
<div class="tab" data-tab="granted">授予權限</div>
<div class="tab" data-tab="check">檢查資格</div>
</div>
<div class="loading" id="loadingIndicator">
<p>正在查詢用戶資料...</p>
</div>
<div class="error-message" id="errorMessage">
找不到該用戶，請檢查用戶名是否正確
</div>
<div class="result-card" id="resultCard">
<div class="user-header">
<div class="username" id="resultUsername">用戶名</div>
<div class="status" id="eligibilityStatus">符合資格</div>
</div>
<div class="tab-content active" id="overview">
<div class="info-grid">
<div class="info-item">
<span class="info-label">用戶名</span>
<span class="info-value" id="displayUsername">-</span>
</div>
<div class="info-item">
<span class="info-label">註冊時間</span>
<span class="info-value" id="registrationDate">-</span>
</div>
<div class="info-item">
<span class="info-label">編輯次數</span>
<span class="info-value" id="editCount">-</span>
</div>
<div class="info-item">
<span class="info-label">最近封禁日期</span>
<span class="info-value" id="lastBanDate">-</span>
</div>
</div>
<div class="activity-meter">
<div class="meter-label">
<span>編輯活躍程度</span>
<span id="activityLevelText">低</span>
</div>
<div class="meter-bar">
<div class="meter-fill" id="activityMeter"></div>
</div>
</div>
</div>
<div class="tab-content" id="discussion">
<h3>討論頁內容</h3>
<p>顯示用戶討論頁的相關信息...</p>
<ul>
<li>討論主題1 - 2023-10-15</li>
<li>討論主題2 - 2023-09-22</li>
<li>討論主題3 - 2023-08-05</li>
</ul>
</div>
<div class="tab-content" id="contributions">
<h3>用戶貢獻</h3>
<p>顯示用戶的編輯貢獻列表...</p>
<ul>
<li>條目A - 2023-11-10 (12次編輯)</li>
<li>條目B - 2023-10-28 (8次編輯)</li>
<li>條目C - 2023-09-15 (5次編輯)</li>
</ul>
</div>
<div class="tab-content" id="deleted">
<h3>已刪除的貢獻</h3>
<p>顯示用戶已刪除的編輯內容...</p>
<ul>
<li>已刪除條目X - 2023-07-12</li>
<li>已刪除條目Y - 2023-05-03</li>
</ul>
</div>
<div class="tab-content" id="editreport">
<h3>編輯報告</h3>
<p>顯示用戶的編輯統計和報告...</p>
<ul>
<li>本月編輯: 42次</li>
<li>上月編輯: 56次</li>
<li>主要編輯領域: 科技、歷史</li>
</ul>
</div>
<div class="tab-content" id="created">
<h3>創建的條目</h3>
<p>顯示用戶創建的新條目...</p>
<ul>
<li>新條目1 - 2023-11-05</li>
<li>新條目2 - 2023-08-19</li>
<li>新條目3 - 2023-06-30</li>
</ul>
</div>
<div class="tab-content" id="logs">
<h3>用戶日誌</h3>
<p>顯示用戶的活動日誌...</p>
<ul>
<li>2023-11-12: 上傳文件</li>
<li>2023-11-08: 修改個人資料</li>
<li>2023-10-25: 參與投票</li>
</ul>
</div>
<div class="tab-content" id="blocklog">
<h3>封鎖日誌</h3>
<p>顯示用戶的封鎖記錄...</p>
<ul>
<li>2023-02-15 至 2023-02-22 (7天) - 原因: 編輯戰</li>
<li>2022-08-10 至 2022-08-12 (2天) - 原因: 不當言論</li>
</ul>
</div>
<div class="tab-content" id="rightslog">
<h3>權限變更記錄</h3>
<p>顯示用戶權限的變更歷史...</p>
<ul>
<li>2023-09-01: 自動確認用戶</li>
<li>2022-12-15: 巡查權限授予</li>
<li>2022-05-20: 回退權限移除</li>
</ul>
</div>
<div class="tab-content" id="granted">
<h3>授予的權限</h3>
<p>顯示用戶當前擁有的權限...</p>
<ul>
<li>自動確認用戶 ✓</li>
<li>巡查權限 ✓</li>
<li>回退權限 ✗</li>
<li>管理員權限 ✗</li>
</ul>
</div>
<div class="tab-content" id="check">
<h3>資格檢查結果</h3>
<p>根據以下標準評估用戶資格：</p>
<ul>
<li id="check1">註冊時間 ≥ 30天: 檢查中...</li>
<li id="check2">編輯次數 ≥ 500次: 檢查中...</li>
<li id="check3">最近90天有編輯: 檢查中...</li>
<li id="check4">無近期封禁: 檢查中...</li>
<li id="check5">無嚴重違規: 檢查中...</li>
</ul>
<div style="margin-top: 20px; padding: 15px; border-radius: 6px; background-color: #e8f4fd; border-left: 4px solid #3498db;">
<strong>最終資格判定: </strong><span id="finalVerdict">等待檢查...</span>
</div>
</div>
</div>
<div class="sample-users">
<p>快速測試（點擊用戶名自動填入）</p>
<div class="sample-buttons">
<button class="sample-btn" data-user="編輯達人">編輯達人</button>
<button class="sample-btn" data-user="活躍貢獻者">活躍貢獻者</button>
<button class="sample-btn" data-user="新進用戶">新進用戶</button>
<button class="sample-btn" data-user="被封禁用戶">被封禁用戶</button>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const usernameInput = document.getElementById('usernameInput');
const searchBtn = document.getElementById('searchBtn');
const loadingIndicator = document.getElementById('loadingIndicator');
const errorMessage = document.getElementById('errorMessage');
const resultCard = document.getElementById('resultCard');
const resultUsername = document.getElementById('resultUsername');
const displayUsername = document.getElementById('displayUsername');
const registrationDate = document.getElementById('registrationDate');
const editCount = document.getElementById('editCount');
const lastBanDate = document.getElementById('lastBanDate');
const eligibilityStatus = document.getElementById('eligibilityStatus');
const activityMeter = document.getElementById('activityMeter');
const activityLevelText = document.getElementById('activityLevelText');
const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');
// 資格檢查項目
const checkItems = [
document.getElementById('check1'),
document.getElementById('check2'),
document.getElementById('check3'),
document.getElementById('check4'),
document.getElementById('check5')
];
const finalVerdict = document.getElementById('finalVerdict');
// 範例用戶按鈕
const sampleButtons = document.querySelectorAll('.sample-btn');
// 模擬用戶資料庫
const userDatabase = {
'編輯達人': {
username: '編輯達人',
registrationDate: '2018-05-12',
editCount: 5420,
lastBanDate: '無',
activityLevel: 'high',
recentEdit: true,
seriousViolation: false
},
'活躍貢獻者': {
username: '活躍貢獻者',
registrationDate: '2020-11-03',
editCount: 1850,
lastBanDate: '無',
activityLevel: 'medium',
recentEdit: true,
seriousViolation: false
},
'新進用戶': {
username: '新進用戶',
registrationDate: '2023-02-28',
editCount: 42,
lastBanDate: '無',
activityLevel: 'low',
recentEdit: true,
seriousViolation: false
},
'被封禁用戶': {
username: '被封禁用戶',
registrationDate: '2019-07-15',
editCount: 320,
lastBanDate: '2023-10-05',
activityLevel: 'low',
recentEdit: false,
seriousViolation: true
}
};
// 檢查用戶資格
function checkUserEligibility(userData) {
// 計算註冊天數
const regDate = new Date(userData.registrationDate);
const today = new Date();
const daysSinceReg = Math.floor((today - regDate) / (1000 * 60 * 60 * 24));
// 資格條件
const conditions = [
daysSinceReg >= 30,
userData.editCount >= 500,
userData.recentEdit,
userData.lastBanDate === '無',
!userData.seriousViolation
];
// 更新檢查項目顯示
const conditionTexts = [
`註冊時間 ≥ 30天: ${daysSinceReg}天 ${conditions[0] ? '✓' : '✗'}`,
`編輯次數 ≥ 500次: ${userData.editCount}次 ${conditions[1] ? '✓' : '✗'}`,
`最近90天有編輯: ${userData.recentEdit ? '是 ✓' : '否 ✗'}`,
`無近期封禁: ${userData.lastBanDate === '無' ? '是 ✓' : '否 ✗'}`,
`無嚴重違規: ${!userData.seriousViolation ? '是 ✓' : '否 ✗'}`
];
checkItems.forEach((item, index) => {
item.textContent = conditionTexts[index];
item.style.color = conditions[index] ? '#27ae60' : '#e74c3c';
item.style.fontWeight = conditions[index] ? '600' : 'normal';
});
// 判斷總資格
const isEligible = conditions.every(condition => condition);
finalVerdict.textContent = isEligible ? '符合資格 ✓' : '不符合資格 ✗';
finalVerdict.style.color = isEligible ? '#27ae60' : '#e74c3c';
finalVerdict.style.fontWeight = '600';
return isEligible;
}
// 獲取用戶資料（模擬API請求）
function fetchUserData(username) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (userDatabase[username]) {
resolve(userDatabase[username]);
} else {
reject(new Error('用戶不存在'));
}
}, 1200); // 模擬網路延遲
});
}
// 更新UI顯示用戶資料
function displayUserData(userData) {
resultUsername.textContent = userData.username;
displayUsername.textContent = userData.username;
registrationDate.textContent = userData.registrationDate;
editCount.textContent = userData.editCount.toLocaleString();
lastBanDate.textContent = userData.lastBanDate;
// 設定活躍程度
let activityClass, activityText;
switch(userData.activityLevel) {
case 'low':
activityClass = 'low-activity';
activityText = '低';
break;
case 'medium':
activityClass = 'medium-activity';
activityText = '中';
break;
case 'high':
activityClass = 'high-activity';
activityText = '高';
break;
}
activityMeter.className = 'meter-fill ' + activityClass;
activityLevelText.textContent = activityText;
// 判斷資格
const isEligible = checkUserEligibility(userData);
if (isEligible) {
eligibilityStatus.textContent = '符合資格';
eligibilityStatus.className = 'status eligible';
} else {
eligibilityStatus.textContent = '不符合資格';
eligibilityStatus.className = 'status not-eligible';
}
// 顯示結果卡片
resultCard.style.display = 'block';
}
// 處理搜索
function handleSearch() {
const username = usernameInput.value.trim();
if (!username) {
alert('請輸入用戶名');
return;
}
// 顯示載入指示器
loadingIndicator.style.display = 'block';
errorMessage.style.display = 'none';
resultCard.style.display = 'none';
// 獲取用戶資料
fetchUserData(username)
.then(userData => {
loadingIndicator.style.display = 'none';
displayUserData(userData);
})
.catch(error => {
loadingIndicator.style.display = 'none';
errorMessage.style.display = 'block';
console.error('錯誤:', error);
});
}
// 切換標籤頁
function switchTab(tabId) {
// 移除所有標籤頁的active類
tabs.forEach(tab => tab.classList.remove('active'));
tabContents.forEach(content => content.classList.remove('active'));
// 添加active類到當前標籤頁
document.querySelector(`.tab[data-tab="${tabId}"]`).classList.add('active');
document.getElementById(tabId).classList.add('active');
}
// 事件監聽器
searchBtn.addEventListener('click', handleSearch);
usernameInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
handleSearch();
}
});
// 標籤頁事件
tabs.forEach(tab => {
tab.addEventListener('click', function() {
const tabId = this.getAttribute('data-tab');
switchTab(tabId);
});
});
// 範例用戶按鈕事件
sampleButtons.forEach(button => {
button.addEventListener('click', function() {
const username = this.getAttribute('data-user');
usernameInput.value = username;
handleSearch();
});
});
});
</script>
</body>
</JavaScript>