909 lines
42 KiB
HTML
909 lines
42 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>NomadFlow · 数字游民旅居指南</title>
|
||
<meta name="description" content="探索全球旅居生活，发现最适合数字游民的目的地、工具与社区。" />
|
||
<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=Outfit:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet" />
|
||
<link rel="stylesheet" href="css/style.css" />
|
||
</head>
|
||
<body>
|
||
<!-- 加载动画 -->
|
||
<div class="loader" id="loader">
|
||
<div class="loader-inner">
|
||
<svg class="loader-globe" viewBox="0 0 80 80" fill="none">
|
||
<circle cx="40" cy="40" r="35" stroke="url(#loaderGrad)" stroke-width="3" stroke-dasharray="60 160" class="loader-ring"/>
|
||
<text x="40" y="48" text-anchor="middle" font-size="24">🌍</text>
|
||
<defs>
|
||
<linearGradient id="loaderGrad" x1="0" y1="0" x2="80" y2="80">
|
||
<stop offset="0%" stop-color="#FF6B6B"/>
|
||
<stop offset="100%" stop-color="#4ECDC4"/>
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
<p class="loader-text">NomadFlow</p>
|
||
<div class="loader-bar"><div class="loader-progress"></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 粒子背景 -->
|
||
<canvas id="particle-canvas" aria-hidden="true"></canvas>
|
||
|
||
<!-- 导航 -->
|
||
<header class="navbar" id="navbar">
|
||
<div class="nav-container">
|
||
<a href="#" class="logo">
|
||
<svg class="logo-icon" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="20" cy="20" r="18" stroke="url(#logoGrad)" stroke-width="2.5"/>
|
||
<path d="M12 22c4-8 12-8 16 0" stroke="url(#logoGrad)" stroke-width="2" stroke-linecap="round"/>
|
||
<circle cx="28" cy="14" r="3" fill="url(#logoGrad)"/>
|
||
<defs>
|
||
<linearGradient id="logoGrad" x1="0" y1="0" x2="40" y2="40">
|
||
<stop offset="0%" stop-color="#FF6B6B"/>
|
||
<stop offset="50%" stop-color="#FFE66D"/>
|
||
<stop offset="100%" stop-color="#4ECDC4"/>
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
<span>NomadFlow</span>
|
||
</a>
|
||
<nav class="nav-links">
|
||
<a href="#map" data-section="map">🗺️ 地图</a>
|
||
<a href="#destinations" data-section="destinations">🌍 目的地</a>
|
||
<a href="#visa" data-section="visa">📋 签证</a>
|
||
<a href="#data" data-section="data">📊 数据</a>
|
||
<a href="#faq" data-section="faq">❓ FAQ</a>
|
||
<a href="#community" data-section="community">🤝 社区</a>
|
||
</nav>
|
||
<button class="nav-cta" id="theme-toggle" aria-label="切换主题">
|
||
<span class="theme-icon">🌙</span>
|
||
</button>
|
||
<button class="mobile-menu-btn" id="mobile-menu-btn" aria-label="菜单">
|
||
<span></span><span></span><span></span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 实时滚动条 -->
|
||
<div class="ticker-bar">
|
||
<div class="ticker-track">
|
||
<span>🌴 小林 刚刚抵达清迈</span>
|
||
<span>💻 Marco 在里斯本完成了 Sprint</span>
|
||
<span>✈️ 今日新增 127 位游民出发</span>
|
||
<span>🏝️ 巴厘岛 Co-working 今日 89% 满座</span>
|
||
<span>📶 清迈平均网速 95Mbps</span>
|
||
<span>🌅 东京远程工作者满意度 9.1</span>
|
||
<span>🌴 小林 刚刚抵达清迈</span>
|
||
<span>💻 Marco 在里斯本完成了 Sprint</span>
|
||
<span>✈️ 今日新增 127 位游民出发</span>
|
||
<span>🏝️ 巴厘岛 Co-working 今日 89% 满座</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hero -->
|
||
<section class="hero" id="hero">
|
||
<div class="hero-bg-shapes">
|
||
<div class="shape shape-1"></div>
|
||
<div class="shape shape-2"></div>
|
||
<div class="shape shape-3"></div>
|
||
</div>
|
||
<div class="hero-content">
|
||
<div class="hero-badge reveal">
|
||
<span class="badge-dot"></span>
|
||
🚀 全球 35M+ 数字游民正在路上
|
||
</div>
|
||
<h1 class="hero-title reveal">
|
||
用一行代码<br/>
|
||
<span class="gradient-text">环游世界</span> 🌏
|
||
</h1>
|
||
<p class="hero-subtitle reveal">
|
||
<span id="typewriter"></span><span class="typewriter-cursor">|</span>
|
||
</p>
|
||
<div class="hero-actions reveal">
|
||
<a href="#destinations" class="btn btn-primary">
|
||
<span>探索目的地</span>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||
</a>
|
||
<a href="#data" class="btn btn-ghost">
|
||
<span>📈 查看数据</span>
|
||
</a>
|
||
</div>
|
||
<div class="hero-stats reveal">
|
||
<div class="stat-item">
|
||
<span class="stat-number" data-target="195">0</span>
|
||
<span class="stat-label">🗺️ 可探索国家</span>
|
||
</div>
|
||
<div class="stat-divider"></div>
|
||
<div class="stat-item">
|
||
<span class="stat-number" data-target="42">0</span>
|
||
<span class="stat-label">💰 平均月生活费 (千元)</span>
|
||
</div>
|
||
<div class="stat-divider"></div>
|
||
<div class="stat-item">
|
||
<span class="stat-number" data-target="87">0</span>
|
||
<span class="stat-label">😊 生活满意度 %</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-visual reveal">
|
||
<div class="globe-container">
|
||
<svg class="globe-svg" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<radialGradient id="globeGlow" cx="50%" cy="50%" r="50%">
|
||
<stop offset="0%" stop-color="#4ECDC4" stop-opacity="0.3"/>
|
||
<stop offset="100%" stop-color="#4ECDC4" stop-opacity="0"/>
|
||
</radialGradient>
|
||
<linearGradient id="orbitGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stop-color="#FF6B6B"/>
|
||
<stop offset="100%" stop-color="#4ECDC4"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<circle cx="200" cy="200" r="160" fill="url(#globeGlow)"/>
|
||
<circle cx="200" cy="200" r="120" fill="none" stroke="rgba(78,205,196,0.2)" stroke-width="1"/>
|
||
<circle cx="200" cy="200" r="90" fill="none" stroke="rgba(78,205,196,0.15)" stroke-width="1"/>
|
||
<ellipse cx="200" cy="200" rx="120" ry="40" fill="none" stroke="rgba(78,205,196,0.3)" stroke-width="1.5" class="orbit-ring"/>
|
||
<ellipse cx="200" cy="200" rx="40" ry="120" fill="none" stroke="rgba(255,107,107,0.3)" stroke-width="1.5" class="orbit-ring orbit-ring-2"/>
|
||
<!-- 大陆轮廓简化 -->
|
||
<path d="M160 140 Q180 130 200 135 Q220 128 240 140 Q250 155 245 170 Q235 185 220 190 Q200 195 185 188 Q165 180 160 165 Z" fill="rgba(78,205,196,0.4)" class="continent"/>
|
||
<path d="M130 210 Q145 200 160 215 Q155 235 140 240 Q125 235 130 210 Z" fill="rgba(78,205,196,0.3)" class="continent"/>
|
||
<path d="M250 200 Q270 195 280 210 Q275 230 260 235 Q245 228 250 200 Z" fill="rgba(78,205,196,0.35)" class="continent"/>
|
||
<!-- 游标点 -->
|
||
<g class="nomad-dots">
|
||
<circle cx="180" cy="155" r="5" fill="#FF6B6B" class="pulse-dot"/>
|
||
<circle cx="260" cy="215" r="5" fill="#FFE66D" class="pulse-dot"/>
|
||
<circle cx="145" cy="225" r="5" fill="#4ECDC4" class="pulse-dot"/>
|
||
<circle cx="220" cy="175" r="5" fill="#A78BFA" class="pulse-dot"/>
|
||
</g>
|
||
<!-- 飞行轨迹 -->
|
||
<path d="M180 155 Q220 140 260 215" fill="none" stroke="url(#orbitGrad)" stroke-width="2" stroke-dasharray="6 4" class="flight-path"/>
|
||
</svg>
|
||
<div class="floating-cards">
|
||
<div class="float-card fc-1">🏝️ 巴厘岛<br/><small>WiFi 98Mbps</small></div>
|
||
<div class="float-card fc-2">☕ 里斯本<br/><small>€800/月</small></div>
|
||
<div class="float-card fc-3">🏔️ 清迈<br/><small>⭐ 4.9</small></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="scroll-indicator">
|
||
<span>向下滚动</span>
|
||
<div class="scroll-arrow">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 交互地图 -->
|
||
<section class="section map-section" id="map">
|
||
<div class="container">
|
||
<div class="section-header reveal">
|
||
<span class="section-tag">🗺️ WORLD MAP</span>
|
||
<h2>全球游民热力图</h2>
|
||
<p>点击地图上的标记，探索热门数字游民聚集地</p>
|
||
</div>
|
||
<div class="map-wrapper reveal">
|
||
<div class="map-svg-container">
|
||
<svg class="world-map" viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<radialGradient id="mapGlow" cx="50%" cy="50%" r="50%">
|
||
<stop offset="0%" stop-color="#4ECDC4" stop-opacity="0.15"/>
|
||
<stop offset="100%" stop-color="#4ECDC4" stop-opacity="0"/>
|
||
</radialGradient>
|
||
<filter id="pinGlow">
|
||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
</filter>
|
||
</defs>
|
||
<rect width="1000" height="500" fill="url(#mapGlow)" rx="20"/>
|
||
<!-- 简化大陆 -->
|
||
<g class="continents" opacity="0.25">
|
||
<path d="M180 120 Q220 100 280 110 Q320 130 310 170 Q290 200 250 210 Q200 220 170 190 Q150 160 180 120Z" fill="#4ECDC4"/>
|
||
<path d="M420 100 Q480 90 530 110 Q560 140 550 180 Q520 210 470 200 Q430 180 420 140Z" fill="#4ECDC4"/>
|
||
<path d="M530 130 Q600 120 660 140 Q700 170 690 210 Q650 240 590 230 Q540 210 530 170Z" fill="#4ECDC4"/>
|
||
<path d="M700 160 Q780 150 830 180 Q860 220 840 260 Q790 280 730 260 Q690 230 700 190Z" fill="#4ECDC4"/>
|
||
<path d="M780 280 Q830 270 870 300 Q890 340 860 370 Q820 390 780 370 Q750 340 760 310Z" fill="#4ECDC4"/>
|
||
<path d="M200 260 Q250 250 290 280 Q310 320 280 360 Q240 380 200 360 Q170 330 180 290Z" fill="#4ECDC4"/>
|
||
<path d="M300 300 Q360 290 400 320 Q420 360 390 400 Q340 420 300 390 Q270 360 280 330Z" fill="#4ECDC4"/>
|
||
</g>
|
||
<!-- 网格线 -->
|
||
<g class="map-grid" opacity="0.08">
|
||
<line x1="0" y1="125" x2="1000" y2="125" stroke="#4ECDC4"/>
|
||
<line x1="0" y1="250" x2="1000" y2="250" stroke="#4ECDC4"/>
|
||
<line x1="0" y1="375" x2="1000" y2="375" stroke="#4ECDC4"/>
|
||
<line x1="250" y1="0" x2="250" y2="500" stroke="#4ECDC4"/>
|
||
<line x1="500" y1="0" x2="500" y2="500" stroke="#4ECDC4"/>
|
||
<line x1="750" y1="0" x2="750" y2="500" stroke="#4ECDC4"/>
|
||
</g>
|
||
<!-- 交互标记 -->
|
||
<g class="map-pin" data-city="bali" transform="translate(720, 310)">
|
||
<circle r="20" fill="rgba(255,107,107,0.15)" class="pin-pulse"/>
|
||
<circle r="8" fill="#FF6B6B" filter="url(#pinGlow)"/>
|
||
<text y="-16" text-anchor="middle" font-size="14">🏝️</text>
|
||
</g>
|
||
<g class="map-pin" data-city="lisbon" transform="translate(430, 195)">
|
||
<circle r="20" fill="rgba(78,205,196,0.15)" class="pin-pulse"/>
|
||
<circle r="8" fill="#4ECDC4" filter="url(#pinGlow)"/>
|
||
<text y="-16" text-anchor="middle" font-size="14">🌊</text>
|
||
</g>
|
||
<g class="map-pin" data-city="chiangmai" transform="translate(700, 240)">
|
||
<circle r="20" fill="rgba(255,230,109,0.15)" class="pin-pulse"/>
|
||
<circle r="8" fill="#FFE66D" filter="url(#pinGlow)"/>
|
||
<text y="-16" text-anchor="middle" font-size="14">🏔️</text>
|
||
</g>
|
||
<g class="map-pin" data-city="mexico" transform="translate(220, 240)">
|
||
<circle r="20" fill="rgba(167,139,250,0.15)" class="pin-pulse"/>
|
||
<circle r="8" fill="#A78BFA" filter="url(#pinGlow)"/>
|
||
<text y="-16" text-anchor="middle" font-size="14">🌃</text>
|
||
</g>
|
||
<g class="map-pin" data-city="barcelona" transform="translate(460, 200)">
|
||
<circle r="20" fill="rgba(244,114,182,0.15)" class="pin-pulse"/>
|
||
<circle r="8" fill="#F472B6" filter="url(#pinGlow)"/>
|
||
<text y="-16" text-anchor="middle" font-size="14">🏖️</text>
|
||
</g>
|
||
<g class="map-pin" data-city="tokyo" transform="translate(820, 210)">
|
||
<circle r="20" fill="rgba(96,165,250,0.15)" class="pin-pulse"/>
|
||
<circle r="8" fill="#60A5FA" filter="url(#pinGlow)"/>
|
||
<text y="-16" text-anchor="middle" font-size="14">🗼</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="map-info-panel" id="map-info-panel">
|
||
<div class="map-info-default">
|
||
<span class="map-info-icon">👆</span>
|
||
<h3>选择一个城市</h3>
|
||
<p>点击地图上的标记查看详细信息</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 目的地 -->
|
||
<section class="section destinations" id="destinations">
|
||
<div class="container">
|
||
<div class="section-header reveal">
|
||
<span class="section-tag">🌴 TOP DESTINATIONS</span>
|
||
<h2>热门旅居目的地</h2>
|
||
<p>精选全球最适合远程工作的城市，每一站都是一段新的故事</p>
|
||
</div>
|
||
<div class="dest-filters reveal">
|
||
<div class="filter-search">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
|
||
<input type="text" id="dest-search" placeholder="搜索城市..." />
|
||
</div>
|
||
<div class="filter-tags">
|
||
<button class="filter-btn active" data-filter="all">🌏 全部</button>
|
||
<button class="filter-btn" data-filter="sea">🌴 东南亚</button>
|
||
<button class="filter-btn" data-filter="europe">🏰 欧洲</button>
|
||
<button class="filter-btn" data-filter="latam">🌮 拉美</button>
|
||
<button class="filter-btn" data-filter="asia">🏯 东亚</button>
|
||
</div>
|
||
<div class="filter-sort">
|
||
<select id="dest-sort">
|
||
<option value="rating">⭐ 评分排序</option>
|
||
<option value="cost-asc">💰 价格从低到高</option>
|
||
<option value="cost-desc">💰 价格从高到低</option>
|
||
<option value="speed">📶 网速排序</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="dest-grid" id="dest-grid">
|
||
<article class="dest-card reveal" data-tilt data-id="bali" data-region="sea" data-cost="4500" data-speed="85" data-rating="9.2">
|
||
<div class="dest-img" style="--hue: 170">
|
||
<div class="dest-emoji">🏝️</div>
|
||
<div class="dest-overlay">
|
||
<span class="dest-tag">东南亚 · 热带天堂</span>
|
||
</div>
|
||
</div>
|
||
<div class="dest-body">
|
||
<h3>巴厘岛, 印尼</h3>
|
||
<p>乌布的数字游民社区闻名全球，低成本高品质生活的典范</p>
|
||
<div class="dest-meta">
|
||
<span>💰 ¥4,500/月</span>
|
||
<span>📶 85Mbps</span>
|
||
<span>🌡️ 28°C</span>
|
||
</div>
|
||
<div class="dest-rating">
|
||
<span class="stars">⭐⭐⭐⭐⭐</span>
|
||
<span>9.2 分</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<article class="dest-card reveal" data-tilt data-id="lisbon" data-region="europe" data-cost="9000" data-speed="120" data-rating="9.5">
|
||
<div class="dest-img" style="--hue: 220">
|
||
<div class="dest-emoji">🌊</div>
|
||
<div class="dest-overlay">
|
||
<span class="dest-tag">欧洲 · 海滨明珠</span>
|
||
</div>
|
||
</div>
|
||
<div class="dest-body">
|
||
<h3>里斯本, 葡萄牙</h3>
|
||
<p>D7签证友好，阳光海岸与悠久历史的完美融合</p>
|
||
<div class="dest-meta">
|
||
<span>💰 ¥9,000/月</span>
|
||
<span>📶 120Mbps</span>
|
||
<span>🌡️ 22°C</span>
|
||
</div>
|
||
<div class="dest-rating">
|
||
<span class="stars">⭐⭐⭐⭐⭐</span>
|
||
<span>9.5 分</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<article class="dest-card reveal" data-tilt data-id="chiangmai" data-region="sea" data-cost="3800" data-speed="95" data-rating="9.4">
|
||
<div class="dest-img" style="--hue: 45">
|
||
<div class="dest-emoji">🏔️</div>
|
||
<div class="dest-overlay">
|
||
<span class="dest-tag">东南亚 · 文化古城</span>
|
||
</div>
|
||
</div>
|
||
<div class="dest-body">
|
||
<h3>清迈, 泰国</h3>
|
||
<p>数字游民大本营，咖啡文化与夜市生活的天堂</p>
|
||
<div class="dest-meta">
|
||
<span>💰 ¥3,800/月</span>
|
||
<span>📶 95Mbps</span>
|
||
<span>🌡️ 30°C</span>
|
||
</div>
|
||
<div class="dest-rating">
|
||
<span class="stars">⭐⭐⭐⭐⭐</span>
|
||
<span>9.4 分</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<article class="dest-card reveal" data-tilt data-id="mexico" data-region="latam" data-cost="6500" data-speed="75" data-rating="8.8">
|
||
<div class="dest-img" style="--hue: 300">
|
||
<div class="dest-emoji">🌃</div>
|
||
<div class="dest-overlay">
|
||
<span class="dest-tag">拉美 · 活力之都</span>
|
||
</div>
|
||
</div>
|
||
<div class="dest-body">
|
||
<h3>墨西哥城, 墨西哥</h3>
|
||
<p>艺术、美食与科技交织，时区便利对接北美市场</p>
|
||
<div class="dest-meta">
|
||
<span>💰 ¥6,500/月</span>
|
||
<span>📶 75Mbps</span>
|
||
<span>🌡️ 18°C</span>
|
||
</div>
|
||
<div class="dest-rating">
|
||
<span class="stars">⭐⭐⭐⭐</span>
|
||
<span>8.8 分</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<article class="dest-card reveal" data-tilt data-id="barcelona" data-region="europe" data-cost="10500" data-speed="150" data-rating="9.1">
|
||
<div class="dest-img" style="--hue: 130">
|
||
<div class="dest-emoji">🏖️</div>
|
||
<div class="dest-overlay">
|
||
<span class="dest-tag">欧洲 · 地中海</span>
|
||
</div>
|
||
</div>
|
||
<div class="dest-body">
|
||
<h3>巴塞罗那, 西班牙</h3>
|
||
<p>高迪建筑与创业生态并存，Nomad Visa 政策领先</p>
|
||
<div class="dest-meta">
|
||
<span>💰 ¥10,500/月</span>
|
||
<span>📶 150Mbps</span>
|
||
<span>🌡️ 20°C</span>
|
||
</div>
|
||
<div class="dest-rating">
|
||
<span class="stars">⭐⭐⭐⭐⭐</span>
|
||
<span>9.1 分</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<article class="dest-card reveal" data-tilt data-id="tokyo" data-region="asia" data-cost="12000" data-speed="200" data-rating="8.6">
|
||
<div class="dest-img" style="--hue: 10">
|
||
<div class="dest-emoji">🗼</div>
|
||
<div class="dest-overlay">
|
||
<span class="dest-tag">亚洲 · 现代都市</span>
|
||
</div>
|
||
</div>
|
||
<div class="dest-body">
|
||
<h3>东京, 日本</h3>
|
||
<p>极致效率与安全，适合追求高品质生活的远程工作者</p>
|
||
<div class="dest-meta">
|
||
<span>💰 ¥12,000/月</span>
|
||
<span>📶 200Mbps</span>
|
||
<span>🌡️ 15°C</span>
|
||
</div>
|
||
<div class="dest-rating">
|
||
<span class="stars">⭐⭐⭐⭐</span>
|
||
<span>8.6 分</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<p class="dest-empty" id="dest-empty" hidden>😢 没有找到匹配的目的地，试试其他筛选条件</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 生活方式 -->
|
||
<section class="section lifestyle" id="lifestyle">
|
||
<div class="container">
|
||
<div class="section-header reveal">
|
||
<span class="section-tag">💻 NOMAD LIFE</span>
|
||
<h2>数字游民的一天</h2>
|
||
<p>自由不等于散漫，高效工作才能尽情探索</p>
|
||
</div>
|
||
<div class="timeline">
|
||
<div class="timeline-line">
|
||
<svg viewBox="0 0 4 600" preserveAspectRatio="none">
|
||
<line x1="2" y1="0" x2="2" y2="600" stroke="url(#timelineGrad)" stroke-width="3" stroke-dasharray="8 6" class="timeline-svg-line"/>
|
||
<defs>
|
||
<linearGradient id="timelineGrad" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#FF6B6B"/>
|
||
<stop offset="50%" stop-color="#FFE66D"/>
|
||
<stop offset="100%" stop-color="#4ECDC4"/>
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-time">🌅 07:00</div>
|
||
<div class="timeline-card">
|
||
<div class="timeline-icon">🧘</div>
|
||
<h3>晨间仪式</h3>
|
||
<p>瑜伽、冥想或海边跑步，用身心唤醒开启新的一天</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-time">☕ 09:00</div>
|
||
<div class="timeline-card">
|
||
<div class="timeline-icon">💻</div>
|
||
<h3>深度工作</h3>
|
||
<p>在 Co-working Space 或咖啡馆专注 4 小时，完成核心任务</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-time">🍜 13:00</div>
|
||
<div class="timeline-card">
|
||
<div class="timeline-icon">🍽️</div>
|
||
<h3>本地探索</h3>
|
||
<p>品尝地道美食，与当地人交流，感受文化碰撞</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-time">🌇 17:00</div>
|
||
<div class="timeline-card">
|
||
<div class="timeline-icon">📞</div>
|
||
<h3>跨时区协作</h3>
|
||
<p>与全球团队视频会议，灵活安排跨时区沟通</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-time">🌙 20:00</div>
|
||
<div class="timeline-card">
|
||
<div class="timeline-icon">🎉</div>
|
||
<h3>社群社交</h3>
|
||
<p>参加 Nomad Meetup，结识来自世界各地的同行者</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 数据洞察 -->
|
||
<section class="section data-section" id="data">
|
||
<div class="container">
|
||
<div class="section-header reveal">
|
||
<span class="section-tag">📊 DATA INSIGHTS</span>
|
||
<h2>旅居数据洞察</h2>
|
||
<p>用数据帮你做出更明智的目的地选择</p>
|
||
</div>
|
||
<div class="charts-grid">
|
||
<div class="chart-card reveal">
|
||
<h3>💰 月度生活成本对比</h3>
|
||
<div class="chart-wrap">
|
||
<canvas id="costChart"></canvas>
|
||
</div>
|
||
</div>
|
||
<div class="chart-card reveal">
|
||
<h3>📶 网络速度排行</h3>
|
||
<div class="chart-wrap">
|
||
<canvas id="speedChart"></canvas>
|
||
</div>
|
||
</div>
|
||
<div class="chart-card chart-wide reveal">
|
||
<h3>📈 数字游民增长趋势 (2019-2026)</h3>
|
||
<div class="chart-wrap">
|
||
<canvas id="growthChart"></canvas>
|
||
</div>
|
||
</div>
|
||
<div class="chart-card reveal">
|
||
<h3>🎯 选择因素权重</h3>
|
||
<div class="chart-wrap chart-radar">
|
||
<canvas id="radarChart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 签证指南 -->
|
||
<section class="section visa-section" id="visa">
|
||
<div class="container">
|
||
<div class="section-header reveal">
|
||
<span class="section-tag">📋 VISA GUIDE</span>
|
||
<h2>数字游民签证指南</h2>
|
||
<p>全球热门远程工作签证政策一览，助你合法旅居</p>
|
||
</div>
|
||
<div class="visa-grid">
|
||
<div class="visa-card reveal">
|
||
<div class="visa-flag">🇵🇹</div>
|
||
<h3>葡萄牙 D7 签证</h3>
|
||
<div class="visa-badge easy">⭐ 推荐</div>
|
||
<ul class="visa-details">
|
||
<li>📅 有效期：2年，可续签</li>
|
||
<li>💰 收入要求：€760/月</li>
|
||
<li>⏱️ 审批：3-6 个月</li>
|
||
<li>🏥 可享欧盟医疗</li>
|
||
</ul>
|
||
<div class="visa-progress">
|
||
<span>难度</span>
|
||
<div class="progress-bar"><div class="progress-fill" style="width:35%"></div></div>
|
||
<span class="progress-label">简单</span>
|
||
</div>
|
||
</div>
|
||
<div class="visa-card reveal">
|
||
<div class="visa-flag">🇪🇸</div>
|
||
<h3>西班牙 Nomad Visa</h3>
|
||
<div class="visa-badge hot">🔥 热门</div>
|
||
<ul class="visa-details">
|
||
<li>📅 有效期：1年，可续3年</li>
|
||
<li>💰 收入要求：€2,160/月</li>
|
||
<li>⏱️ 审批：1-3 个月</li>
|
||
<li>🌍 可申根区旅行</li>
|
||
</ul>
|
||
<div class="visa-progress">
|
||
<span>难度</span>
|
||
<div class="progress-bar"><div class="progress-fill" style="width:45%"></div></div>
|
||
<span class="progress-label">中等</span>
|
||
</div>
|
||
</div>
|
||
<div class="visa-card reveal">
|
||
<div class="visa-flag">🇮🇩</div>
|
||
<h3>印尼 B211A 签证</h3>
|
||
<div class="visa-badge budget">💰 低成本</div>
|
||
<ul class="visa-details">
|
||
<li>📅 有效期：60天，可延期</li>
|
||
<li>💰 费用：约 ¥2,000</li>
|
||
<li>⏱️ 审批：5-10 天</li>
|
||
<li>🏝️ 适合巴厘岛旅居</li>
|
||
</ul>
|
||
<div class="visa-progress">
|
||
<span>难度</span>
|
||
<div class="progress-bar"><div class="progress-fill" style="width:25%"></div></div>
|
||
<span class="progress-label">简单</span>
|
||
</div>
|
||
</div>
|
||
<div class="visa-card reveal">
|
||
<div class="visa-flag">🇹🇭</div>
|
||
<h3>泰国 LTR 签证</h3>
|
||
<div class="visa-badge new">🆕 新政策</div>
|
||
<ul class="visa-details">
|
||
<li>📅 有效期：10年</li>
|
||
<li>💰 收入要求：$80,000/年</li>
|
||
<li>⏱️ 审批：1-2 个月</li>
|
||
<li>✈️ 多次入境</li>
|
||
</ul>
|
||
<div class="visa-progress">
|
||
<span>难度</span>
|
||
<div class="progress-bar"><div class="progress-fill" style="width:60%"></div></div>
|
||
<span class="progress-label">中等</span>
|
||
</div>
|
||
</div>
|
||
<div class="visa-card reveal">
|
||
<div class="visa-flag">🇲🇽</div>
|
||
<h3>墨西哥 Temporary Resident</h3>
|
||
<div class="visa-badge budget">💰 低成本</div>
|
||
<ul class="visa-details">
|
||
<li>📅 有效期：1-4年</li>
|
||
<li>💰 收入要求：$2,500/月</li>
|
||
<li>⏱️ 审批：2-4 周</li>
|
||
<li>🌮 北美时区友好</li>
|
||
</ul>
|
||
<div class="visa-progress">
|
||
<span>难度</span>
|
||
<div class="progress-bar"><div class="progress-fill" style="width:30%"></div></div>
|
||
<span class="progress-label">简单</span>
|
||
</div>
|
||
</div>
|
||
<div class="visa-card reveal">
|
||
<div class="visa-flag">🇪🇪</div>
|
||
<h3>爱沙尼亚 DNV</h3>
|
||
<div class="visa-badge pioneer">🚀 先锋</div>
|
||
<ul class="visa-details">
|
||
<li>📅 有效期：1年</li>
|
||
<li>💰 收入要求：€3,504/月</li>
|
||
<li>⏱️ 审批：2-4 周</li>
|
||
<li>💻 全球首个数字游民签证</li>
|
||
</ul>
|
||
<div class="visa-progress">
|
||
<span>难度</span>
|
||
<div class="progress-bar"><div class="progress-fill" style="width:40%"></div></div>
|
||
<span class="progress-label">中等</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 工具箱 -->
|
||
<section class="section tools" id="tools">
|
||
<div class="container">
|
||
<div class="section-header reveal">
|
||
<span class="section-tag">🛠️ TOOLKIT</span>
|
||
<h2>游民必备工具箱</h2>
|
||
<p>精选远程工作与旅居生活的效率神器</p>
|
||
</div>
|
||
<div class="tools-grid">
|
||
<div class="tool-card reveal" data-category="work">
|
||
<div class="tool-icon-wrap">
|
||
<svg viewBox="0 0 48 48" fill="none"><rect x="6" y="10" width="36" height="26" rx="3" stroke="currentColor" stroke-width="2"/><path d="M6 18h36" stroke="currentColor" stroke-width="2"/><circle cx="24" cy="30" r="3" fill="currentColor"/></svg>
|
||
</div>
|
||
<span class="tool-emoji">💼</span>
|
||
<h3>远程协作</h3>
|
||
<p>Slack · Notion · Figma · Zoom</p>
|
||
<div class="tool-tags">
|
||
<span>团队</span><span>设计</span><span>沟通</span>
|
||
</div>
|
||
</div>
|
||
<div class="tool-card reveal" data-category="travel">
|
||
<div class="tool-icon-wrap">
|
||
<svg viewBox="0 0 48 48" fill="none"><path d="M24 4L8 14v20l16 10 16-10V14L24 4z" stroke="currentColor" stroke-width="2"/><path d="M8 14l16 10 16-10M24 24v20" stroke="currentColor" stroke-width="2"/></svg>
|
||
</div>
|
||
<span class="tool-emoji">✈️</span>
|
||
<h3>旅行规划</h3>
|
||
<p>Skyscanner · Nomad List · SafetyWing</p>
|
||
<div class="tool-tags">
|
||
<span>机票</span><span>签证</span><span>保险</span>
|
||
</div>
|
||
</div>
|
||
<div class="tool-card reveal" data-category="finance">
|
||
<div class="tool-icon-wrap">
|
||
<svg viewBox="0 0 48 48" fill="none"><circle cx="24" cy="24" r="18" stroke="currentColor" stroke-width="2"/><path d="M24 14v20M18 20h10a4 4 0 010 8h-6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
|
||
</div>
|
||
<span class="tool-emoji">💳</span>
|
||
<h3>财务管理</h3>
|
||
<p>Wise · Revolut · Xero · 多币种账户</p>
|
||
<div class="tool-tags">
|
||
<span>汇款</span><span>记账</span><span>税务</span>
|
||
</div>
|
||
</div>
|
||
<div class="tool-card reveal" data-category="connect">
|
||
<div class="tool-icon-wrap">
|
||
<svg viewBox="0 0 48 48" fill="none"><circle cx="16" cy="20" r="6" stroke="currentColor" stroke-width="2"/><circle cx="32" cy="20" r="6" stroke="currentColor" stroke-width="2"/><path d="M8 38c0-6 4-10 8-10s8 4 8 10M24 38c0-6 4-10 8-10s8 4 8 10" stroke="currentColor" stroke-width="2"/></svg>
|
||
</div>
|
||
<span class="tool-emoji">🤝</span>
|
||
<h3>社群网络</h3>
|
||
<p>Nomad List · Remote Year · 本地 Meetup</p>
|
||
<div class="tool-tags">
|
||
<span>社交</span><span>活动</span><span>合租</span>
|
||
</div>
|
||
</div>
|
||
<div class="tool-card reveal" data-category="health">
|
||
<div class="tool-icon-wrap">
|
||
<svg viewBox="0 0 48 48" fill="none"><path d="M24 8v32M8 24h32" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/><circle cx="24" cy="24" r="18" stroke="currentColor" stroke-width="2"/></svg>
|
||
</div>
|
||
<span class="tool-emoji">🏥</span>
|
||
<h3>健康保障</h3>
|
||
<p>SafetyWing · World Nomads · 运动 App</p>
|
||
<div class="tool-tags">
|
||
<span>保险</span><span>健身</span><span>心理</span>
|
||
</div>
|
||
</div>
|
||
<div class="tool-card reveal" data-category="learn">
|
||
<div class="tool-icon-wrap">
|
||
<svg viewBox="0 0 48 48" fill="none"><path d="M6 16l18-8 18 8-18 8-18-8z" stroke="currentColor" stroke-width="2"/><path d="M12 22v10c0 4 6 8 12 8s12-4 12-8V22" stroke="currentColor" stroke-width="2"/></svg>
|
||
</div>
|
||
<span class="tool-emoji">📚</span>
|
||
<h3>持续学习</h3>
|
||
<p>Coursera · Duolingo · 当地语言班</p>
|
||
<div class="tool-tags">
|
||
<span>技能</span><span>语言</span><span>文化</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FAQ -->
|
||
<section class="section faq-section" id="faq">
|
||
<div class="container">
|
||
<div class="section-header reveal">
|
||
<span class="section-tag">❓ FAQ</span>
|
||
<h2>常见问题</h2>
|
||
<p>关于数字游民生活，你可能想知道的一切</p>
|
||
</div>
|
||
<div class="faq-list">
|
||
<div class="faq-item reveal">
|
||
<button class="faq-question">
|
||
<span>💰 做数字游民需要多少启动资金？</span>
|
||
<svg class="faq-chevron" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>建议准备 3-6 个月的生活费作为缓冲。以东南亚为例，¥15,000-30,000 即可开始。包括机票、首月住宿、签证费用和应急资金。欧洲目的地建议准备 ¥50,000 以上。</p>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item reveal">
|
||
<button class="faq-question">
|
||
<span>📶 如何确保远程工作的网络稳定？</span>
|
||
<svg class="faq-chevron" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>选择网络评分高的城市，入住前用 Speedtest 测试。备用方案：本地 SIM 卡热点、随身 WiFi 设备、附近 Co-working Space。推荐携带 USB 网卡和 VPN 作为双保险。</p>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item reveal">
|
||
<button class="faq-question">
|
||
<span>🏥 旅居期间的保险怎么办？</span>
|
||
<svg class="faq-chevron" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>推荐 SafetyWing 或 World Nomads 等国际医疗保险，月费约 $40-80，覆盖全球（部分国家除外）。长期旅居者可考虑目的地国家的本地保险，费用更低、报销更方便。</p>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item reveal">
|
||
<button class="faq-question">
|
||
<span>🧾 税务问题如何处理？</span>
|
||
<svg class="faq-chevron" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>税务居民身份取决于居住天数（通常 183 天规则）。建议咨询专业税务顾问，了解双重征税协定。很多游民选择税务友好的国家（如葡萄牙、格鲁吉亚）作为基地。</p>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item reveal">
|
||
<button class="faq-question">
|
||
<span>👨👩👧 可以带娃一起做数字游民吗？</span>
|
||
<svg class="faq-chevron" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>完全可以！巴厘岛、清迈、里斯本都有成熟的数字游民家庭社区。关键是选择教育资源丰富、医疗条件好的目的地，以及保持稳定的工作节奏，给孩子规律的生活。</p>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item reveal">
|
||
<button class="faq-question">
|
||
<span>🤝 如何快速融入当地游民社区？</span>
|
||
<svg class="faq-chevron" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>加入 Nomad List、Facebook 群组和本地 Meetup 活动。入住游民友好的 Co-living 空间，参加每周的 Coworking 社交日。大部分游民社区非常开放，主动打招呼就能结识朋友。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 社区 -->
|
||
<section class="section community" id="community">
|
||
<div class="container">
|
||
<div class="section-header reveal">
|
||
<span class="section-tag">🤝 COMMUNITY</span>
|
||
<h2>游民心声</h2>
|
||
<p>来自全球数字游民的真实故事</p>
|
||
</div>
|
||
<div class="testimonials">
|
||
<div class="testimonial-card reveal">
|
||
<div class="testimonial-avatar">👩💻</div>
|
||
<div class="testimonial-content">
|
||
<div class="testimonial-stars">⭐⭐⭐⭐⭐</div>
|
||
<p>"在清迈住了 8 个月，月花费不到 4000 元，但生活质量比国内一线城市高太多了。每天早上骑摩托去咖啡馆，这种感觉无法形容。"</p>
|
||
<div class="testimonial-author">
|
||
<strong>小林</strong>
|
||
<span>前端开发 · 清迈 🇹🇭</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="testimonial-card reveal">
|
||
<div class="testimonial-avatar">👨🎨</div>
|
||
<div class="testimonial-content">
|
||
<div class="testimonial-stars">⭐⭐⭐⭐⭐</div>
|
||
<p>"里斯本的 D7 签证让我在欧洲有了基地。白天在 Alfama 区的共享办公空间工作，周末去 Sintra 徒步，完美平衡。"</p>
|
||
<div class="testimonial-author">
|
||
<strong>Marco</strong>
|
||
<span>UI 设计师 · 里斯本 🇵🇹</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="testimonial-card reveal">
|
||
<div class="testimonial-avatar">🧑💼</div>
|
||
<div class="testimonial-content">
|
||
<div class="testimonial-stars">⭐⭐⭐⭐⭐</div>
|
||
<p>"带着家人做数字游民听起来疯狂，但在巴厘岛乌布，孩子们上国际学校，我和妻子远程工作，这是我们做过最正确的决定。"</p>
|
||
<div class="testimonial-author">
|
||
<strong>张家</strong>
|
||
<span>产品经理 · 巴厘岛 🇮🇩</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cta-banner reveal">
|
||
<div class="cta-content">
|
||
<h2>准备好开始你的旅居之旅了吗？ 🌍</h2>
|
||
<p>加入 50,000+ 数字游民社区，获取目的地指南、签证攻略与独家优惠</p>
|
||
</div>
|
||
<form class="cta-form" id="subscribe-form">
|
||
<input type="email" placeholder="输入你的邮箱 📧" required />
|
||
<button type="submit" class="btn btn-primary">
|
||
<span>免费订阅</span>
|
||
<span>🚀</span>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div class="footer-brand">
|
||
<a href="#" class="logo">
|
||
<svg class="logo-icon" viewBox="0 0 40 40" fill="none"><circle cx="20" cy="20" r="18" stroke="url(#logoGrad2)" stroke-width="2.5"/><path d="M12 22c4-8 12-8 16 0" stroke="url(#logoGrad2)" stroke-width="2" stroke-linecap="round"/><circle cx="28" cy="14" r="3" fill="url(#logoGrad2)"/><defs><linearGradient id="logoGrad2" x1="0" y1="0" x2="40" y2="40"><stop offset="0%" stop-color="#FF6B6B"/><stop offset="100%" stop-color="#4ECDC4"/></linearGradient></defs></svg>
|
||
<span>NomadFlow</span>
|
||
</a>
|
||
<p>让每个人都能自由地工作和生活在这个星球上 🌏</p>
|
||
<div class="social-links">
|
||
<a href="#" aria-label="Twitter">𝕏</a>
|
||
<a href="#" aria-label="Instagram">📷</a>
|
||
<a href="#" aria-label="YouTube">▶️</a>
|
||
<a href="#" aria-label="Discord">💬</a>
|
||
</div>
|
||
</div>
|
||
<div class="footer-links">
|
||
<h4>探索</h4>
|
||
<a href="#destinations">目的地</a>
|
||
<a href="#visa">签证指南</a>
|
||
<a href="#data">数据报告</a>
|
||
<a href="#faq">常见问题</a>
|
||
</div>
|
||
<div class="footer-links">
|
||
<h4>资源</h4>
|
||
<a href="#">签证指南</a>
|
||
<a href="#">税务攻略</a>
|
||
<a href="#">保险对比</a>
|
||
<a href="#">博客</a>
|
||
</div>
|
||
<div class="footer-links">
|
||
<h4>联系</h4>
|
||
<a href="#">关于我们</a>
|
||
<a href="#">合作伙伴</a>
|
||
<a href="#">隐私政策</a>
|
||
<a href="#">hello@nomadflow.io</a>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p>© 2026 NomadFlow. Made with ❤️ for Digital Nomads everywhere.</p>
|
||
<p class="footer-emoji-bar">🌴 ☀️ 🏄♂️ 💻 🌊 🗺️ ✈️ 🏝️ 🌅</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Toast -->
|
||
<div class="toast" id="toast">
|
||
<span class="toast-icon">✅</span>
|
||
<span class="toast-msg">订阅成功！欢迎加入 NomadFlow 社区 🎉</span>
|
||
</div>
|
||
|
||
<!-- 目的地详情弹窗 -->
|
||
<div class="modal-overlay" id="modal-overlay">
|
||
<div class="modal" id="dest-modal">
|
||
<button class="modal-close" id="modal-close" aria-label="关闭">✕</button>
|
||
<div class="modal-content" id="modal-content"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 返回顶部 -->
|
||
<button class="back-to-top" id="back-to-top" aria-label="返回顶部">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
|
||
</button>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
|
||
<script src="js/main.js"></script>
|
||
</body>
|
||
</html>
|