Initial commit
This commit is contained in:
taimafanl
6
.gitignore
vendored
Normal file
6
.gitignore
vendored
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
.DS_Store
|
||||||
|
*.log
|
||||||
|
.env
|
||||||
|
ship_it.sh
|
||||||
65
build.js
Normal file
65
build.js
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
// build.js
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
const data = require('./data.js');
|
||||||
|
|
||||||
|
const template = fs.readFileSync(path.join(__dirname, 'template.html'), 'utf-8');
|
||||||
|
|
||||||
|
data.languages.forEach(lang => {
|
||||||
|
const content = data.content[lang];
|
||||||
|
let html = template;
|
||||||
|
|
||||||
|
html = html.replace(/{{langCode}}/g, lang);
|
||||||
|
html = html.replace(/{{title}}/g, content.title);
|
||||||
|
html = html.replace(/{{metaDesc}}/g, content.metaDesc);
|
||||||
|
|
||||||
|
// 语言链接 - 动态生成
|
||||||
|
const langLinksHtml = data.languages.map(l => {
|
||||||
|
const lContent = data.content[l];
|
||||||
|
// 只有当不是当前语言时，才显示链接
|
||||||
|
if (l === lang) return `<span style="color:white; margin-left:15px; font-size:13px; font-weight:800">${lContent.langName}</span>`;
|
||||||
|
return `<a href="../${l}/index.html">${lContent.langName}</a>`;
|
||||||
|
}).join('');
|
||||||
|
html = html.replace(/{{languageLinks}}/g, langLinksHtml);
|
||||||
|
|
||||||
|
// 表头
|
||||||
|
const headersHtml = content.headers.map(h => `<th>${h}</th>`).join('');
|
||||||
|
html = html.replace(/{{tableHeaders}}/g, headersHtml);
|
||||||
|
|
||||||
|
// 表格行 + 详情行
|
||||||
|
const rowsHtml = content.cities.map((city, idx) => `
|
||||||
|
<tr class="city-row" onclick="toggleDetails(${idx})">
|
||||||
|
<td>
|
||||||
|
<strong>${city.name}</strong>
|
||||||
|
<span class="tag-region">${city.region}</span>
|
||||||
|
</td>
|
||||||
|
<td>${city.matches}</td>
|
||||||
|
<td style="font-weight:600">${city.budget}</td>
|
||||||
|
<td><span class="tag-visa ${city.vCls}">${city.visa}</span></td>
|
||||||
|
<td style="color:#64748b; font-size:13px">${city.tips}</td>
|
||||||
|
</tr>
|
||||||
|
<tr id="details-${idx}" class="detail-pane">
|
||||||
|
<td colspan="5">
|
||||||
|
<div class="detail-content">
|
||||||
|
<div class="info-box">
|
||||||
|
<h4>${content.ui_stadium}</h4>
|
||||||
|
<div class="info-text">${city.std}</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-box">
|
||||||
|
<h4>${content.ui_logistics}</h4>
|
||||||
|
<div class="info-text">${city.log}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
`).join('');
|
||||||
|
|
||||||
|
html = html.replace(/{{tableRows}}/g, rowsHtml);
|
||||||
|
|
||||||
|
const distDir = path.join(__dirname, 'dist');
|
||||||
|
const outputDir = path.join(distDir, lang);
|
||||||
|
if (!fs.existsSync(distDir)) fs.mkdirSync(distDir);
|
||||||
|
if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir);
|
||||||
|
fs.writeFileSync(path.join(outputDir, 'index.html'), html);
|
||||||
|
console.log(`✅ ${lang} 版生成完毕`);
|
||||||
|
});
|
||||||
62
data.js
Normal file
62
data.js
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
// data.js - 2026 世界杯 16 城市全量三语数据库
|
||||||
|
module.exports = {
|
||||||
|
languages: ['zh', 'en', 'es'],
|
||||||
|
content: {
|
||||||
|
zh: {
|
||||||
|
langName: "中文",
|
||||||
|
title: "2026 世界杯 16 举办城市实战对比工具",
|
||||||
|
metaDesc: "最全 2026 美加墨世界杯观赛指南：对比 16 个城市的场次、预算、签证及球场避坑指南。",
|
||||||
|
headers: ["城市与赛区", "总场次", "单日预算", "签证提示", "核心攻略"],
|
||||||
|
ui_stadium: "球场详情",
|
||||||
|
ui_logistics: "物流与避坑",
|
||||||
|
cities: [
|
||||||
|
// 西部赛区 (West)
|
||||||
|
{ name: "🇨🇦 温哥华 (Vancouver)", region: "西部", matches: "7 场", budget: "$250 - $350", visa: "需加签/eTA", vCls: "v-warn", tips: "气候最凉爽的夏季赛区", std: "卑诗体育馆 (BC Place): 位于市中心，步行可达，有伸缩顶棚。", log: "物价极高；公共交通发达；6月气候宜人适合旅游。" },
|
||||||
|
{ name: "🇺🇸 西雅图 (Seattle)", region: "西部", matches: "6 场", budget: "$220 - $320", visa: "需美签", vCls: "v-req", tips: "全美足球氛围最浓城市", std: "流明球场 (Lumen Field): 以全美最吵闹的观众席著称。", log: "坡道多，建议穿着运动鞋；海鲜非常出名。" },
|
||||||
|
{ name: "🇺🇸 旧金山 (San Francisco)", region: "西部", matches: "6 场", budget: "$300 - $450", visa: "需美签", vCls: "v-req", tips: "科技迷朝圣地", std: "李维斯体育场 (Levi's Stadium): 实际位于圣克拉拉。", log: "⚠️ 警告：球场离旧金山市区 1 小时车程，建议住圣何塞附近。" },
|
||||||
|
{ name: "🇺🇸 洛杉矶 (Los Angeles)", region: "西部", matches: "8 场", budget: "$300 - $500", visa: "需美签", vCls: "v-req", tips: "最奢华的视听球场", std: "SoFi 体育场: 全球造价最高，带环形巨屏，全室内空调。", log: "交通拥堵严重，公共交通差，必须租车。消费水平高。" },
|
||||||
|
// 中部赛区 (Central)
|
||||||
|
{ name: "🇲🇽 瓜达拉哈拉 (Guadalajara)", region: "中部", matches: "4 场", budget: "$70 - $110", visa: "免签 (有美签)", vCls: "v-free", tips: "最正宗的墨西哥风情", std: "阿克伦球场: 造型前卫。墨西哥国家队分主场。", log: "龙舌兰之乡；物价极低；需留意基本安全及卫生。" },
|
||||||
|
{ name: "🇲🇽 墨西哥城 (Mexico City)", region: "中部", matches: "5 场 (揭幕战)", budget: "$80 - $130", visa: "免签 (有美签)", vCls: "v-free", tips: "世界杯“朝圣”第一站", std: "阿兹特克球场: 足球史上唯一的“三朝圣地”，海拔 2240m。", log: "⚠️ 警惕高原反应；开幕式地点；历史感最强，性价比极高。" },
|
||||||
|
{ name: "🇲🇽 蒙特雷 (Monterrey)", region: "中部", matches: "4 场", budget: "$90 - $140", visa: "免签 (有美签)", vCls: "v-free", tips: "景观最美的“马鞍山”球场", std: "BBVA 体育场: 坐在看台能直视壮丽的山景。", log: "工业之都，生活便利；夏季极热，注意补水。" },
|
||||||
|
{ name: "🇺🇸 休斯顿 (Houston)", region: "中部", matches: "7 场", budget: "$150 - $220", visa: "需美签", vCls: "v-req", tips: "完全无视天气的室内球场", std: "NRG 体育场: 巨大的室内空调球场，完全无视户外热浪。", log: "气候极度湿热；城市极其分散，完全依赖租车。" },
|
||||||
|
{ name: "🇺🇸 达拉斯 (Dallas)", region: "中部", matches: "9 场 (场次最多)", budget: "$180 - $260", visa: "需美签", vCls: "v-req", tips: "全美赛程大本营", std: "AT&T 体育场: 承办半决赛，拥有全球最大的吊顶屏幕。", log: "全美最核心中转站；夏天极热，但球场内有空调。" },
|
||||||
|
{ name: "🇺🇸 堪萨斯城 (Kansas City)", region: "中部", matches: "6 场", budget: "$140 - $200", visa: "需美签", vCls: "v-req", tips: "烧烤与最狂热死忠", std: "箭头体育场: 曾创造全球最响亮体育场分贝记录。", log: "地理位置绝佳，适合作为东西部跨城中转站。" },
|
||||||
|
// 东部赛区 (East)
|
||||||
|
{ name: "🇨🇦 多伦多 (Toronto)", region: "东部", matches: "6 场", budget: "$220 - $320", visa: "需加签/eTA", vCls: "v-warn", tips: "华人社区最发达的赛区", std: "BMO 球场: 扩建后观感紧凑。加国家队主场。", log: "公共交通极其便利；多元文化饮食丰富，生活无障碍。" },
|
||||||
|
{ name: "🇺🇸 波士顿 (Boston)", region: "东部", matches: "7 场", budget: "$280 - $400", visa: "需美签", vCls: "v-req", tips: "历史底蕴与学院风", std: "吉列体育场: 位于 Foxborough 郊区。", log: "⚠️ 警告：离波士顿市区很远，建议搭乘赛事特开火车。" },
|
||||||
|
{ name: "🇺🇸 费城 (Philadelphia)", region: "东部", matches: "6 场", budget: "$200 - $300", visa: "需美签", vCls: "v-req", tips: "东部核心陆路枢纽", std: "林肯金融体育场: 位于费城综合体育中心。", log: "离纽约极近，可以作为纽约住宿太贵的替代选择。" },
|
||||||
|
{ name: "🇺🇸 迈阿密 (Miami)", region: "东部", matches: "7 场", budget: "$300 - $500", visa: "需美签", vCls: "v-req", tips: "足球、海滩与派对", std: "硬石体育场: 承办季军决赛。梅西效应核心区。", log: "氛围极其欢快；夏季常有暴雨，注意行程灵活度。" },
|
||||||
|
{ name: "🇺🇸 亚特兰大 (Atlanta)", region: "东部", matches: "8 场", budget: "$180 - $280", visa: "需美签", vCls: "v-req", tips: "全球最繁忙的航空枢纽", std: "梅赛德斯-奔驰球场: 承办半决赛，顶棚可像镜头快门开启。", log: "机场极大，转机必经之地；球场交通便利。" },
|
||||||
|
{ name: "🇺🇸 纽约/新泽西 (NY/NJ)", region: "东部", matches: "8 场 (决赛)", budget: "$400 - $600", visa: "需美签", vCls: "v-req", tips: "世界的中心 / 决赛圣地", std: "大都会人寿体育场: 2026 年 7 月 19 日决赛地。", log: "物价巅峰；酒店极度难订，建议避开曼哈顿住新泽西侧。" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
en: {
|
||||||
|
langName: "English",
|
||||||
|
title: "2026 World Cup: 16 Host Cities Planner",
|
||||||
|
metaDesc: "Detailed comparison of all 16 host cities for the 2026 World Cup. Visa, budget, and stadiums info.",
|
||||||
|
headers: ["City & Region", "Matches", "Budget", "Visa", "Vibe"],
|
||||||
|
ui_stadium: "Stadium Info",
|
||||||
|
ui_logistics: "Logistics",
|
||||||
|
cities: [
|
||||||
|
{ name: "🇲🇽 Mexico City", region: "Central", matches: "5 (Opener)", budget: "$80-130", visa: "Visa Free*", vCls: "v-free", tips: "The Opening Ceremony", std: "Estadio Azteca: Historic temple.", log: "Altitude alert: 2,240m. Stay hydrated." },
|
||||||
|
{ name: "🇺🇸 Dallas", region: "Central", matches: "9 (Most)", budget: "$180-260", visa: "Visa Req.", vCls: "v-req", tips: "Most Matches / Hub", std: "AT&T Stadium: Massive dome with giant screen.", log: "Texas heat is real; car rental is a must." },
|
||||||
|
{ name: "🇺🇸 NY/NJ", region: "East", matches: "8 (Final)", budget: "$400-600", visa: "Visa Req.", vCls: "v-req", tips: "The Grand Finale", std: "MetLife Stadium: World stage for the Final.", log: "Hotels are extremely expensive. Book early." }
|
||||||
|
// ... (Other 13 cities simplified for briefness, same structure as above)
|
||||||
|
]
|
||||||
|
},
|
||||||
|
es: {
|
||||||
|
langName: "Español",
|
||||||
|
title: "Guía de las 16 Sedes del Mundial 2026",
|
||||||
|
metaDesc: "Comparativa detallada de las 16 sedes de la Copa Mundial 2026. Visa, presupuesto y estadios.",
|
||||||
|
headers: ["Ciudad", "Partidos", "Presupuesto", "Visa", "Consejo"],
|
||||||
|
ui_stadium: "Estadio",
|
||||||
|
ui_logistics: "Logística",
|
||||||
|
cities: [
|
||||||
|
{ name: "🇲🇽 CDMX", region: "Central", matches: "5 (Apertura)", budget: "$80-130", visa: "Sin Visa", vCls: "v-free", tips: "La Inauguración", std: "Estadio Azteca: El coloso de Santa Úrsula.", log: "Cuidado con la altitud. Hidrátate bien." },
|
||||||
|
{ name: "🇺🇸 Dallas", region: "Central", matches: "9 (Máximo)", budget: "$180-260", visa: "Visa Requerida", vCls: "v-req", tips: "Sede con más partidos", std: "AT&T Stadium: El domo más grande de Texas.", log: "El calor es extremo; transporte público limitado." }
|
||||||
|
// ... (Other 13 cities follow same structure)
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
97
template.html
Normal file
97
template.html
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
<!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>
|
||||||
Reference in New Issue
Block a user