243 lines
8.0 KiB
HTML
243 lines
8.0 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>Surpass 荣誉证书查询系统</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
|
|
<style>
|
|
:root {
|
|
--primary-color: #1a73e8;
|
|
--bg-color: #f8fafc;
|
|
--card-bg: #ffffff;
|
|
--text-main: #1e293b;
|
|
--text-muted: #64748b;
|
|
--border-color: #e2e8f0;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
background: var(--bg-color);
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
margin: 0; padding: 10px;
|
|
color: var(--text-main);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1000px;
|
|
margin: 20px auto;
|
|
background: var(--card-bg);
|
|
padding: 24px;
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
color: var(--primary-color);
|
|
font-size: clamp(20px, 5vw, 26px);
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
/* 响应式搜索区域 */
|
|
.search-section {
|
|
background: var(--bg-color);
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
margin-bottom: 24px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.search-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
/* PC端布局：搜索框占主位，日期并排 */
|
|
@media (min-width: 768px) {
|
|
.search-grid {
|
|
grid-template-columns: 2fr 1fr 1fr auto;
|
|
align-items: end;
|
|
}
|
|
}
|
|
|
|
.form-group { display: flex; flex-direction: column; }
|
|
.form-group label {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
margin-bottom: 6px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.form-control {
|
|
padding: 10px 14px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
font-size: 15px;
|
|
width: 100%;
|
|
height: 42px;
|
|
}
|
|
|
|
.form-control:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 3px rgba(26,115,232,0.1);
|
|
}
|
|
|
|
.btn-search {
|
|
height: 42px;
|
|
padding: 0 30px;
|
|
background: var(--primary-color);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.btn-search:hover { background: #1557b0; }
|
|
|
|
/* 响应式表格：移动端转为卡片流 */
|
|
.table-wrapper { overflow-x: auto; margin-top: 10px; }
|
|
|
|
.result-table { width: 100%; border-collapse: collapse; min-width: 600px; }
|
|
.result-table th {
|
|
text-align: left; padding: 14px;
|
|
background: #f1f5f9; color: var(--text-muted);
|
|
font-size: 13px; border-bottom: 2px solid var(--border-color);
|
|
}
|
|
.result-table td { padding: 14px; border-bottom: 1px solid var(--bg-color); font-size: 14px; }
|
|
|
|
@media (max-width: 640px) {
|
|
/* 针对超小屏幕，隐藏不重要的列，或让用户横向滚动 */
|
|
.hide-on-mobile { display: none; }
|
|
.container { padding: 16px; }
|
|
}
|
|
|
|
.status-valid { color: #16a34a; font-weight: 600; }
|
|
.btn-link { color: var(--primary-color); text-decoration: none; cursor: pointer; font-weight: 600; }
|
|
.loading, .no-result { text-align: center; padding: 40px; color: var(--text-muted); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<h1>证书查询系统</h1>
|
|
|
|
<div class="search-section">
|
|
<div class="search-grid">
|
|
<div class="form-group">
|
|
<label>编号 / 姓名</label>
|
|
<input type="text" id="searchTerm" class="form-control" placeholder="输入证书编号或持有人">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>颁发起（可选）</label>
|
|
<input type="date" id="dateStart" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>颁发止（可选）</label>
|
|
<input type="date" id="dateEnd" class="form-control">
|
|
</div>
|
|
<button id="searchBtn" class="btn-search">搜索</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="resultsArea">
|
|
<div class="no-result">请输入信息开始检索</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Supabase 配置
|
|
const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
|
|
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNoaXhzc3JwaGZneHZxcWlna3pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2OTE0OTEsImV4cCI6MjA5MDI2NzQ5MX0.Az_Ew2J2zdOMcSV0UNAjBS-LPqGpqhsaN4IyZ5R7iqU';
|
|
const sbClient = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
|
|
|
|
async function handleSearch() {
|
|
const term = document.getElementById('searchTerm').value.trim();
|
|
const start = document.getElementById('dateStart').value;
|
|
const end = document.getElementById('dateEnd').value;
|
|
const display = document.getElementById('resultsArea');
|
|
|
|
if (!term) {
|
|
alert("请输入证书编号或持有人姓名");
|
|
return;
|
|
}
|
|
|
|
display.innerHTML = '<div class="loading">正在检索数据库...</div>';
|
|
|
|
try {
|
|
// 构造查询：筛选编号/姓名
|
|
let query = sbClient.from('certificates').select('*');
|
|
|
|
// 模糊匹配编号或姓名
|
|
query = query.or(`cert_number.ilike.%${term}%,holder_name.ilike.%${term}%`);
|
|
|
|
// 增加可选的时间起止限定
|
|
if (start) query = query.gte('issue_date', start);
|
|
if (end) query = query.lte('issue_date', end);
|
|
|
|
const { data, error } = await query.order('issue_date', { ascending: false });
|
|
|
|
if (error) throw error;
|
|
renderResults(data);
|
|
|
|
} catch (err) {
|
|
display.innerHTML = `<div style="color:#dc2626; text-align:center;">检索失败: ${err.message}</div>`;
|
|
}
|
|
}
|
|
|
|
function renderResults(data) {
|
|
const display = document.getElementById('resultsArea');
|
|
if (!data || data.length === 0) {
|
|
display.innerHTML = '<div class="no-result">未找到匹配的证书</div>';
|
|
return;
|
|
}
|
|
|
|
let html = `
|
|
<div class="table-wrapper">
|
|
<table class="result-table">
|
|
<thead>
|
|
<tr>
|
|
<th>证书编号</th>
|
|
<th>持有人</th>
|
|
<th class="hide-on-mobile">荣誉标题</th>
|
|
<th>颁发日期</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
`;
|
|
|
|
data.forEach(item => {
|
|
html += `
|
|
<tr>
|
|
<td><strong>${item.cert_number}</strong></td>
|
|
<td>${item.holder_name}</td>
|
|
<td class="hide-on-mobile">${item.honor_title}</td>
|
|
<td>${item.issue_date || '-'}</td>
|
|
<td><a class="btn-link" onclick="goToDetail('${item.id}')">详情</a></td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
html += '</tbody></table></div>';
|
|
display.innerHTML = html;
|
|
}
|
|
|
|
function goToDetail(id) {
|
|
window.location.href = `certificate.html?id=${id}`;
|
|
}
|
|
|
|
document.getElementById('searchBtn').addEventListener('click', handleSearch);
|
|
document.getElementById('searchTerm').addEventListener('keypress', e => {
|
|
if (e.key === 'Enter') handleSearch();
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |