${city.name}
${city.tag}
${city.desc}
💰${city.cost}月生活费
📶${city.speed}网速
🌡️${city.temp}均温
✨ 亮点特色
${city.highlights.map((h) => `- ${h}
`).join('')}
👥 活跃游民: ${city.nomads} · ⭐ 评分: ${city.rating}
`;
overlay.classList.add('open');
document.body.style.overflow = 'hidden';
}
function closeModal() {
overlay.classList.remove('open');
document.body.style.overflow = '';
}
cards.forEach((card) => {
card.addEventListener('click', () => openModal(card.dataset.id));
});
closeBtn?.addEventListener('click', closeModal);
overlay.addEventListener('click', (e) => {
if (e.target === overlay) closeModal();
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
});
}
/* ----- FAQ Accordion ----- */
function initFAQ() {
const items = document.querySelectorAll('.faq-item');
items.forEach((item) => {
const btn = item.querySelector('.faq-question');
btn?.addEventListener('click', () => {
const wasActive = item.classList.contains('active');
items.forEach((i) => i.classList.remove('active'));
if (!wasActive) item.classList.add('active');
});
});
}
/* ----- Back to Top ----- */
function initBackToTop() {
const btn = document.getElementById('back-to-top');
if (!btn) return;
window.addEventListener('scroll', () => {
btn.classList.toggle('visible', window.scrollY > 600);
}, { passive: true });
btn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
}
/* ----- Nav Section Highlight ----- */
function initNavHighlight() {
const links = document.querySelectorAll('.nav-links a[data-section]');
const sections = [...links].map((l) => document.getElementById(l.dataset.section)).filter(Boolean);
if (!sections.length) return;
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const id = entry.target.id;
links.forEach((l) => l.classList.toggle('active', l.dataset.section === id));
}
});
},
{ threshold: 0.3, rootMargin: '-80px 0px -50% 0px' }
);
sections.forEach((s) => observer.observe(s));
}
function initParticles() {
const canvas = document.getElementById('particle-canvas');
if (!canvas) return;
const ctx = canvas.getContext('2d');
let particles = [];
let animId;
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
function createParticles() {
const count = Math.min(Math.floor(window.innerWidth / 12), 120);
particles = Array.from({ length: count }, () => ({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: Math.random() * 2 + 0.5,
speedX: (Math.random() - 0.5) * 0.3,
speedY: (Math.random() - 0.5) * 0.3,
opacity: Math.random() * 0.5 + 0.1,
hue: [0, 45, 170, 280][Math.floor(Math.random() * 4)],
}));
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach((p, i) => {
p.x += p.speedX;
p.y += p.speedY;
if (p.x < 0) p.x = canvas.width;
if (p.x > canvas.width) p.x = 0;
if (p.y < 0) p.y = canvas.height;
if (p.y > canvas.height) p.y = 0;
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fillStyle = `hsla(${p.hue}, 70%, 60%, ${p.opacity})`;
ctx.fill();
particles.slice(i + 1).forEach((p2) => {
const dx = p.x - p2.x;
const dy = p.y - p2.y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < 120) {
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(p2.x, p2.y);
ctx.strokeStyle = `hsla(${p.hue}, 70%, 60%, ${0.08 * (1 - dist / 120)})`;
ctx.lineWidth = 0.5;
ctx.stroke();
}
});
});
animId = requestAnimationFrame(draw);
}
resize();
createParticles();
draw();
window.addEventListener('resize', () => {
resize();
createParticles();
});
}
/* ----- Navbar Scroll Effect ----- */
function initNavbar() {
const navbar = document.getElementById('navbar');
if (!navbar) return;
const onScroll = () => {
navbar.classList.toggle('scrolled', window.scrollY > 50);
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
}
/* ----- Theme Toggle ----- */
function initThemeToggle() {
const btn = document.getElementById('theme-toggle');
if (!btn) return;
const saved = localStorage.getItem('nomad-theme');
if (saved === 'light') {
document.documentElement.setAttribute('data-theme', 'light');
btn.querySelector('.theme-icon').textContent = '☀️';
}
btn.addEventListener('click', () => {
const isLight = document.documentElement.getAttribute('data-theme') === 'light';
if (isLight) {
document.documentElement.removeAttribute('data-theme');
btn.querySelector('.theme-icon').textContent = '🌙';
localStorage.setItem('nomad-theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
btn.querySelector('.theme-icon').textContent = '☀️';
localStorage.setItem('nomad-theme', 'light');
}
updateChartThemes();
});
}
/* ----- Mobile Menu ----- */
function initMobileMenu() {
const btn = document.getElementById('mobile-menu-btn');
const links = document.querySelector('.nav-links');
if (!btn || !links) return;
btn.addEventListener('click', () => {
links.classList.toggle('open');
btn.classList.toggle('active');
});
links.querySelectorAll('a').forEach((a) => {
a.addEventListener('click', () => {
links.classList.remove('open');
btn.classList.remove('active');
});
});
}
/* ----- Scroll Reveal ----- */
function initScrollReveal() {
const reveals = document.querySelectorAll('.reveal');
if (!reveals.length) return;
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry, i) => {
if (entry.isIntersecting) {
const delay = entry.target.dataset.delay || 0;
setTimeout(() => {
entry.target.classList.add('visible');
}, delay);
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.1, rootMargin: '0px 0px -50px 0px' }
);
reveals.forEach((el, i) => {
el.style.transitionDelay = `${(i % 6) * 0.1}s`;
observer.observe(el);
});
}
/* ----- Animated Counters ----- */
function initCounters() {
const counters = document.querySelectorAll('.stat-number');
if (!counters.length) return;
const animate = (el) => {
const target = parseInt(el.dataset.target, 10);
const duration = 2000;
const start = performance.now();
const step = (now) => {
const progress = Math.min((now - start) / duration, 1);
const eased = 1 - Math.pow(1 - progress, 3);
el.textContent = Math.floor(eased * target);
if (progress < 1) requestAnimationFrame(step);
else el.textContent = target;
};
requestAnimationFrame(step);
};
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
animate(entry.target);
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.5 }
);
counters.forEach((c) => observer.observe(c));
}
/* ----- 3D Tilt Effect ----- */
function initTiltEffect() {
const cards = document.querySelectorAll('[data-tilt]');
cards.forEach((card) => {
card.addEventListener('mousemove', (e) => {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = ((y - centerY) / centerY) * -8;
const rotateY = ((x - centerX) / centerX) * 8;
card.style.transform = `perspective(800px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-8px)`;
});
card.addEventListener('mouseleave', () => {
card.style.transform = '';
});
});
}
/* ----- Charts ----- */
let chartInstances = {};
function getChartColors() {
const isLight = document.documentElement.getAttribute('data-theme') === 'light';
return {
text: isLight ? '#475569' : '#94a3b8',
grid: isLight ? 'rgba(0,0,0,0.06)' : 'rgba(255,255,255,0.06)',
accent: ['#FF6B6B', '#FFE66D', '#4ECDC4', '#A78BFA', '#F472B6', '#60A5FA'],
};
}
function initCharts() {
if (typeof Chart === 'undefined') return;
Chart.defaults.font.family = "'Outfit', 'Noto Sans SC', sans-serif";
Chart.defaults.color = getChartColors().text;
initCostChart();
initSpeedChart();
initGrowthChart();
initRadarChart();
}
function initCostChart() {
const ctx = document.getElementById('costChart');
if (!ctx) return;
const colors = getChartColors();
chartInstances.cost = new Chart(ctx, {
type: 'bar',
data: {
labels: ['清迈 🇹🇭', '巴厘岛 🇮🇩', '墨西哥城 🇲🇽', '里斯本 🇵🇹', '巴塞罗那 🇪🇸', '东京 🇯🇵'],
datasets: [{
label: '月生活费 (千元人民币)',
data: [3.8, 4.5, 6.5, 9.0, 10.5, 12.0],
backgroundColor: colors.accent.map((c) => c + '99'),
borderColor: colors.accent,
borderWidth: 2,
borderRadius: 8,
borderSkipped: false,
}],
},
options: {
responsive: true,
maintainAspectRatio: false,
animation: { duration: 2000, easing: 'easeOutQuart' },
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(17, 24, 39, 0.9)',
padding: 12,
cornerRadius: 8,
callbacks: {
label: (ctx) => ` ¥${ctx.parsed.y.toFixed(1)},000/月`,
},
},
},
scales: {
y: {
beginAtZero: true,
grid: { color: colors.grid },
ticks: { callback: (v) => `¥${v}k` },
},
x: { grid: { display: false } },
},
},
});
}
function initSpeedChart() {
const ctx = document.getElementById('speedChart');
if (!ctx) return;
const colors = getChartColors();
chartInstances.speed = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['东京 200', '巴塞罗那 150', '里斯本 120', '清迈 95', '巴厘岛 85', '墨西哥城 75'],
datasets: [{
data: [200, 150, 120, 95, 85, 75],
backgroundColor: colors.accent,
borderColor: 'transparent',
borderWidth: 0,
hoverOffset: 12,
}],
},
options: {
responsive: true,
maintainAspectRatio: false,
cutout: '65%',
animation: { animateRotate: true, duration: 2000 },
plugins: {
legend: {
position: 'right',
labels: { padding: 12, usePointStyle: true, pointStyle: 'circle' },
},
tooltip: {
callbacks: { label: (ctx) => ` ${ctx.parsed} Mbps` },
},
},
},
});
}
function initGrowthChart() {
const ctx = document.getElementById('growthChart');
if (!ctx) return;
const colors = getChartColors();
chartInstances.growth = new Chart(ctx, {
type: 'line',
data: {
labels: ['2019', '2020', '2021', '2022', '2023', '2024', '2025', '2026'],
datasets: [{
label: '全球数字游民 (百万人)',
data: [7.3, 10.9, 15.5, 24.0, 28.5, 31.2, 33.8, 35.6],
borderColor: colors.accent[2],
backgroundColor: colors.accent[2] + '20',
fill: true,
tension: 0.4,
pointRadius: 5,
pointBackgroundColor: colors.accent[2],
pointBorderColor: '#0a0e17',
pointBorderWidth: 2,
pointHoverRadius: 8,
}],
},
options: {
responsive: true,
maintainAspectRatio: false,
animation: { duration: 2500, easing: 'easeOutQuart' },
interaction: { intersect: false, mode: 'index' },
plugins: {
legend: { display: false },
tooltip: {
callbacks: { label: (ctx) => ` ${ctx.parsed.y}M 人` },
},
},
scales: {
y: {
beginAtZero: true,
grid: { color: colors.grid },
ticks: { callback: (v) => `${v}M` },
},
x: { grid: { display: false } },
},
},
});
}
function initRadarChart() {
const ctx = document.getElementById('radarChart');
if (!ctx) return;
const colors = getChartColors();
chartInstances.radar = new Chart(ctx, {
type: 'radar',
data: {
labels: ['生活成本 💰', '网络速度 📶', '安全性 🛡️', '社群活跃 🤝', '气候环境 🌤️', '签证便利 📋'],
datasets: [{
label: '清迈',
data: [95, 80, 85, 95, 70, 90],
borderColor: colors.accent[2],
backgroundColor: colors.accent[2] + '30',
pointBackgroundColor: colors.accent[2],
}, {
label: '里斯本',
data: [60, 90, 92, 80, 85, 95],
borderColor: colors.accent[0],
backgroundColor: colors.accent[0] + '30',
pointBackgroundColor: colors.accent[0],
}],
},
options: {
responsive: true,
maintainAspectRatio: false,
animation: { duration: 2000 },
scales: {
r: {
beginAtZero: true,
max: 100,
grid: { color: colors.grid },
angleLines: { color: colors.grid },
pointLabels: { font: { size: 11 } },
ticks: { display: false },
},
},
plugins: {
legend: {
position: 'bottom',
labels: { padding: 16, usePointStyle: true },
},
},
},
});
}
function updateChartThemes() {
const colors = getChartColors();
Chart.defaults.color = colors.text;
Object.values(chartInstances).forEach((chart) => {
if (!chart) return;
if (chart.options.scales?.y) chart.options.scales.y.grid.color = colors.grid;
if (chart.options.scales?.x) chart.options.scales.x.grid = { color: colors.grid, display: chart.options.scales.x.grid?.display ?? false };
if (chart.options.scales?.r) {
chart.options.scales.r.grid.color = colors.grid;
chart.options.scales.r.angleLines.color = colors.grid;
}
chart.update();
});
}
/* ----- Subscribe Form ----- */
function initSubscribeForm() {
const form = document.getElementById('subscribe-form');
const toast = document.getElementById('toast');
if (!form || !toast) return;
form.addEventListener('submit', (e) => {
e.preventDefault();
const input = form.querySelector('input');
if (!input.value) return;
toast.classList.add('show');
input.value = '';
setTimeout(() => toast.classList.remove('show'), 4000);
});
}
/* ----- Smooth anchor highlight ----- */
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener('click', (e) => {
const target = document.querySelector(anchor.getAttribute('href'));
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth' });
}
});
});