98 lines
4.2 KiB
HTML
98 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="{{langCode}}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{title}}</title>
|
|
<meta name="description" content="{{metaDesc}}">
|
|
|
|
<link rel="alternate" hreflang="zh" href="https://yoursite.com/zh/" />
|
|
<link rel="alternate" hreflang="en" href="https://yoursite.com/en/" />
|
|
<link rel="alternate" hreflang="es" href="https://yoursite.com/es/" />
|
|
|
|
<style>
|
|
:root { --primary: #003366; --accent: #d21034; --gold: #b8975a; --bg: #f8fafc; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: #334155; margin: 0; line-height: 1.5; }
|
|
|
|
/* 导航 */
|
|
nav { background: #0f172a; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; color: white; position: sticky; top: 0; z-index: 1000; }
|
|
.nav-brand { font-weight: 800; letter-spacing: 1px; font-size: 18px; }
|
|
.nav-langs a { color: #94a3b8; text-decoration: none; margin-left: 15px; font-size: 13px; font-weight: 600; transition: 0.3s; }
|
|
.nav-langs a:hover { color: white; }
|
|
|
|
.container { max-width: 1100px; margin: 30px auto; padding: 0 15px; }
|
|
|
|
header { text-align: center; margin-bottom: 40px; }
|
|
h1 { color: var(--primary); font-size: 32px; margin-bottom: 10px; }
|
|
.subtitle { color: #64748b; font-size: 16px; }
|
|
|
|
/* 表格容器 */
|
|
.card-table { background: white; border-radius: 16px; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); overflow: hidden; }
|
|
.table-responsive { overflow-x: auto; }
|
|
table { width: 100%; border-collapse: collapse; min-width: 850px; }
|
|
|
|
/* 表头 */
|
|
th { background: #f1f5f9; padding: 16px; text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: #475569; position: sticky; top: 0; }
|
|
|
|
/* 行样式 */
|
|
.city-row { cursor: pointer; border-bottom: 1px solid #f1f5f9; transition: all 0.2s; }
|
|
.city-row:hover { background: #fdfeff; }
|
|
.city-row td { padding: 16px; font-size: 15px; }
|
|
|
|
/* 标签 */
|
|
.tag-region { font-size: 11px; padding: 2px 6px; border-radius: 4px; background: #e2e8f0; margin-left: 8px; font-weight: normal; }
|
|
.tag-visa { font-size: 12px; padding: 4px 8px; border-radius: 6px; font-weight: 700; }
|
|
.v-free { background: #dcfce7; color: #166534; }
|
|
.v-req { background: #fee2e2; color: #991b1b; }
|
|
.v-warn { background: #fef3c7; color: #92400e; }
|
|
|
|
/* 详情面板 */
|
|
.detail-pane { display: none; background: #fcfdfe; }
|
|
.detail-content { padding: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; border-bottom: 2px solid #f1f5f9; }
|
|
.info-box h4 { margin: 0 0 12px 0; font-size: 14px; color: var(--accent); display: flex; align-items: center; }
|
|
.info-box h4::before { content: ''; display: inline-block; width: 4px; height: 14px; background: var(--accent); margin-right: 8px; }
|
|
.info-text { font-size: 14px; line-height: 1.7; color: #475569; }
|
|
|
|
@media (max-width: 768px) {
|
|
.detail-content { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<nav>
|
|
<div class="nav-brand">FIFA 2026 PLANNER</div>
|
|
<div class="nav-langs">{{languageLinks}}</div>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
<header>
|
|
<h1>{{title}}</h1>
|
|
<div class="subtitle">{{metaDesc}}</div>
|
|
</header>
|
|
|
|
<div class="card-table">
|
|
<div class="table-responsive">
|
|
<table>
|
|
<thead>
|
|
<tr>{{tableHeaders}}</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{tableRows}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleDetails(idx) {
|
|
const pane = document.getElementById('details-' + idx);
|
|
const isVisible = pane.style.display === 'table-row';
|
|
document.querySelectorAll('.detail-pane').forEach(p => p.style.display = 'none');
|
|
pane.style.display = isVisible ? 'none' : 'table-row';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|