Add files via upload
This commit is contained in:
lbjlaq
170
show-keys.html
Normal file
170
show-keys.html
Normal file
@ -0,0 +1,170 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>可用密钥列表-微软激活密钥</title>
|
||||
<meta name="description" content="MSTOOL - 专业的Windows和Office激活工具，提供密钥检测、确认ID获取等多种实用功能。安全可靠，完全免费。">
|
||||
<meta name="keywords" content="Windows激活,Office激活,密钥检测,确认ID获取,激活工具,MSTOOL">
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<meta name="theme-color" content="#409EFF">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body data-page="show-keys">
|
||||
<a href="#main-content" class="skip-link">跳转到主要内容</a>
|
||||
|
||||
<nav class="nav" role="navigation" aria-label="主导航">
|
||||
<div class="container">
|
||||
<div class="logo" style="text-align: center;">
|
||||
MSTOOL
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<ul>
|
||||
<li><a href="index.html">检测<br>密钥</a></li>
|
||||
<li><a href="cid.html">获取<br>ID</a></li>
|
||||
<li><a href="show-keys.html" class="active">可用<br>密钥</a></li>
|
||||
<li><a href="tool.html">激活<br>工具</a></li>
|
||||
<li><a href="about.html">关<br>于</a></li>
|
||||
<li><a href="build.html">搭建<br>教程</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container content" id="main-content">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
可用密钥列表
|
||||
<div style="font-size: 12px; color: #666; margin-top: 5px;">
|
||||
来源于互联网，没有时效性，请检测后使用
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- 添加搜索框 -->
|
||||
<div class="search-box">
|
||||
<input type="text"
|
||||
id="searchInput"
|
||||
class="form-input"
|
||||
placeholder="搜索产品或密钥..."
|
||||
aria-label="搜索产品和密钥">
|
||||
<div class="search-icon">🔍</div>
|
||||
</div>
|
||||
|
||||
<div id="product-list">
|
||||
<!-- 产品列表将通过JavaScript从keys.json加载 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
© <span id="current-year"></span> MSTOOL | 公众号：<a href="javascript:void(0);">CTRLER</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div id="loading-indicator" class="loading-indicator" role="status" aria-live="polite" style="display: none;">
|
||||
加载中...
|
||||
</div>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
<script>
|
||||
// 设置年份
|
||||
document.getElementById('current-year').textContent = new Date().getFullYear();
|
||||
|
||||
// 加载密钥数据
|
||||
fetch('data/keys.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const productList = document.getElementById('product-list');
|
||||
data.forEach((product, index) => {
|
||||
const availableKeys = product.keys.filter(key => key.activations > 0);
|
||||
const totalKeys = product.keys.length;
|
||||
const availableCount = availableKeys.length;
|
||||
|
||||
const section = document.createElement('div');
|
||||
section.className = 'product-section';
|
||||
section.innerHTML = `
|
||||
<div class="product-header" onclick="toggleProduct(this)"
|
||||
role="button"
|
||||
aria-expanded="false"
|
||||
aria-controls="product-content-${index}"
|
||||
tabindex="0">
|
||||
<div>
|
||||
${product.product}
|
||||
<span class="key-count">
|
||||
(可用: <span class="available-count">${availableCount}</span>/总数: ${totalKeys})
|
||||
</span>
|
||||
</div>
|
||||
<span class="toggle-icon" aria-hidden="true">▼</span>
|
||||
</div>
|
||||
<div class="product-content"
|
||||
id="product-content-${index}"
|
||||
role="region"
|
||||
aria-labelledby="product-header-${index}">
|
||||
<table class="keys-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>密钥</th>
|
||||
<th>
|
||||
可用次数
|
||||
<button class="sort-btn" onclick="sortTable(this)" data-order="desc" aria-label="点击按可用次数排序">
|
||||
<span class="sort-icon">↓</span>
|
||||
</button>
|
||||
</th>
|
||||
<th>更新时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${product.keys.map(key => `
|
||||
<tr>
|
||||
<td>${key.key}</td>
|
||||
<td class="${key.activations > 0 ? 'available' : 'unavailable'}">
|
||||
${key.activations}
|
||||
</td>
|
||||
<td>${key.time}</td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
productList.appendChild(section);
|
||||
});
|
||||
|
||||
// 添加搜索功能
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
searchInput.addEventListener('input', function() {
|
||||
const searchTerm = this.value.toLowerCase();
|
||||
const productSections = document.querySelectorAll('.product-section');
|
||||
|
||||
productSections.forEach(section => {
|
||||
const productHeader = section.querySelector('.product-header');
|
||||
const productTitle = productHeader.textContent.toLowerCase();
|
||||
const rows = section.querySelectorAll('tbody tr');
|
||||
let hasVisibleRows = false;
|
||||
|
||||
rows.forEach(row => {
|
||||
const key = row.querySelector('td').textContent.toLowerCase();
|
||||
const matchesSearch = productTitle.includes(searchTerm) ||
|
||||
key.includes(searchTerm);
|
||||
|
||||
row.style.display = matchesSearch ? '' : 'none';
|
||||
if (matchesSearch) {
|
||||
hasVisibleRows = true;
|
||||
}
|
||||
});
|
||||
|
||||
section.style.display = hasVisibleRows ? '' : 'none';
|
||||
|
||||
if (searchTerm && hasVisibleRows) {
|
||||
productHeader.classList.add('active');
|
||||
section.querySelector('.product-content').classList.add('show');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user