49 lines
1.4 KiB
HTML
49 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-Hant">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Flags Viewer (Leaflet + zh-TW + Country Outline)</title>
|
||
|
||
<!-- Leaflet CSS -->
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||
/>
|
||
<link rel="stylesheet" href="./styles.css" />
|
||
</head>
|
||
<body>
|
||
<h1>Flags Viewer</h1>
|
||
<div class="hint">
|
||
依區域分頁瀏覽各國國旗，可搜尋國碼或國家名稱（中／英）。點擊國旗即可在地圖上移動到該國位置並描出輪廓，快速掌握地理位置與中英對照。
|
||
</div>
|
||
|
||
<div class="controls">
|
||
<div class="search-box">
|
||
<input
|
||
id="search"
|
||
type="text"
|
||
placeholder="搜尋國碼或國家名稱（例如：tw、Taiwan、台灣）"
|
||
/>
|
||
</div>
|
||
<div id="tabs" class="tabs"></div>
|
||
</div>
|
||
|
||
<div class="map-wrapper">
|
||
<div id="map-title">地圖：尚未選擇國家</div>
|
||
<div id="map"></div>
|
||
<div id="map-coord"></div>
|
||
</div>
|
||
|
||
<div id="flags" class="flag-grid"></div>
|
||
<div id="no-result" class="no-result" style="display: none">
|
||
沒有符合搜尋結果。
|
||
</div>
|
||
|
||
<!-- Leaflet JS -->
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||
<script src="./constants.js"></script>
|
||
|
||
<script src="./app.js"></script>
|
||
</body>
|
||
</html>
|