admin/2016worldcup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: auto deploy 2026-01-20 20:09:56

Browse Source
This commit is contained in:
taimafanl
2026-01-20 20:09:56 +08:00
parent 619dd37464
commit f45680130b
3 changed files with 366 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

363
template.html
View File

@@ -1,63 +1,319 @@
<!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/" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@600;800&display=swap"
rel="stylesheet">
<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; }
:root {
--primary: #0f172a;
--accent: #d21034;
--secondary: #334155;
--success: #10b981;
--warning: #f59e0b;
--error: #ef4444;
--bg: #f8fafc;
--card-bg: #ffffff;
--border: #e2e8f0;
--text-main: #1e293b;
--text-muted: #64748b;
--radius: 12px;
--shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.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; }
* {
box-sizing: border-box;
}
/* 表格容器 */
.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; }
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: var(--bg);
color: var(--text-main);
margin: 0;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* 表头 */
th { background: #f1f5f9; padding: 16px; text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: #475569; position: sticky; top: 0; }
/* Nav & Glassy Effect */
nav {
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(8px);
padding: 16px 40px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
/* 行样式 */
.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; }
.nav-brand {
font-family: 'Outfit', sans-serif;
font-weight: 800;
letter-spacing: -0.5px;
font-size: 22px;
background: linear-gradient(to right, #fff, #94a3b8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* 标签 */
.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; }
.nav-langs {
display: flex;
gap: 15px;
align-items: center;
}
/* 详情面板 */
.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; }
.nav-langs a,
.nav-langs span {
text-decoration: none;
font-size: 13px;
font-weight: 600;
padding: 6px 12px;
border-radius: 20px;
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-langs a {
color: #94a3b8;
background: rgba(255, 255, 255, 0.05);
}
.nav-langs a:hover {
color: white;
background: rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
}
.nav-langs .active-lang {
color: white;
background: var(--accent);
box-shadow: 0 0 15px rgba(210, 16, 52, 0.4);
}
/* Hero Section */
.hero {
background: radial-gradient(circle at top right, #1e293b, #0f172a);
padding: 80px 20px;
text-align: center;
color: white;
margin-bottom: -60px;
}
.hero h1 {
font-family: 'Outfit', sans-serif;
font-size: 42px;
margin: 0 0 16px 0;
line-height: 1.1;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.hero p {
color: #94a3b8;
font-size: 18px;
max-width: 600px;
margin: 0 auto;
}
/* Container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px 60px;
position: relative;
}
/* Table Card Styles */
.card-table {
background: var(--card-bg);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
overflow: hidden;
border: 1px solid var(--border);
animation: slideUp 0.6s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.table-responsive {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
min-width: 900px;
}
th {
background: #f8fafc;
padding: 20px;
text-align: left;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
border-bottom: 2px solid var(--border);
}
.city-row {
cursor: pointer;
border-bottom: 1px solid var(--border);
transition: 0.2s;
}
.city-row:hover {
background: #f1f5f9;
}
.city-row td {
padding: 20px;
font-size: 15px;
}
.city-name-cell {
display: flex;
align-items: center;
gap: 12px;
}
.city-name-cell strong {
font-size: 16px;
color: var(--primary);
}
.tag-region {
font-size: 10px;
padding: 2px 8px;
border-radius: 100px;
background: #f1f5f9;
color: var(--secondary);
font-weight: 700;
text-transform: uppercase;
}
.tag-visa {
font-size: 12px;
padding: 6px 12px;
border-radius: 8px;
font-weight: 600;
display: inline-block;
}
.v-free {
background: #ecfdf5;
color: #065f46;
border: 1px solid #d1fae5;
}
.v-req {
background: #fff1f2;
color: #9f1239;
border: 1px solid #ffe4e6;
}
.v-warn {
background: #fffbeb;
color: #92400e;
border: 1px solid #fef3c7;
}
/* Detail Panel */
.detail-pane {
display: none;
background: #fdfdfd;
border-left: 4px solid var(--accent);
}
.detail-content {
padding: 30px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
background: linear-gradient(to bottom right, #ffffff, #f9fafb);
}
.info-box h4 {
margin: 0 0 15px 0;
font-size: 15px;
color: var(--primary);
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
}
.info-box h4::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background: var(--accent);
border-radius: 3px;
}
.info-text {
font-size: 14px;
line-height: 1.8;
color: var(--secondary);
background: white;
padding: 15px;
border-radius: 8px;
border: 1px solid var(--border);
}
footer {
text-align: center;
padding: 40px;
color: var(--text-muted);
font-size: 14px;
}
@media (max-width: 768px) {
.detail-content { grid-template-columns: 1fr; }
.hero h1 {
font-size: 32px;
}
.nav-brand {
font-size: 18px;
}
.detail-content {
grid-template-columns: 1fr;
gap: 20px;
}
nav {
padding: 16px 20px;
}
}
</style>
</head>
<body>
<nav>
@@ -65,12 +321,12 @@
<div class="nav-langs">{{languageLinks}}</div>
</nav>
<div class="container">
<header>
<h1>{{title}}</h1>
<div class="subtitle">{{metaDesc}}</div>
</header>
<div class="hero">
<h1>{{title}}</h1>
<p>{{metaDesc}}</p>
</div>
<div class="container">
<div class="card-table">
<div class="table-responsive">
<table>
@@ -83,15 +339,28 @@
</table>
</div>
</div>
<footer>
<p>&copy; 2026 World Cup Planner - Unofficial Guide</p>
</footer>
</div>
<script>
function toggleDetails(idx) {
const pane = document.getElementById('details-' + idx);
const row = document.getElementById('row-' + idx);
const isVisible = pane.style.display === 'table-row';
// Close others
document.querySelectorAll('.detail-pane').forEach(p => p.style.display = 'none');
pane.style.display = isVisible ? 'none' : 'table-row';
document.querySelectorAll('.city-row').forEach(r => r.style.background = '');
if (!isVisible) {
pane.style.display = 'table-row';
row.style.background = '#f8fafc';
}
}
</script>
</body>
</html>
</html>