-
Notifications
You must be signed in to change notification settings - Fork 20
/
Copy pathindex.html
210 lines (208 loc) · 16.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="制縣等級台灣版" />
<meta property="og:url" content="https://travel.tonypai.com.tw/" />
<meta property="og:description" content="從小到大，你在台灣的哪些地方待過呢？當紅的制縣等級出台灣版啦！" />
<meta property="og:image" content="https://i.imgur.com/g3Y34Mt.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<title>制縣等級台灣版</title>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.5/canvg.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/javascript-canvas-to-blob/3.14.0/js/canvas-to-blob.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<link rel="stylesheet" href="./styles.css?v=c8733ae917b63c04f01617cb9dfd97c50a1f7b2e" />
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-P4F6BQZ');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<div id="contextMenu" class="contextMenu">
<div class="row menuItem menuTitle">
<p id="menuTitle"></p>
</div>
<div id="lv4" class="row menuItem menuButton red-border">
<p>久居（超過三年）</p>
</div>
<div id="lv3" class="row menuItem menuButton yellow-border">
<p>居住（一年以上）</p>
</div>
<div id="lv2" class="row menuItem menuButton green-border">
<p>短居（一個月以上）</p>
</div>
<div id="lv1" class="row menuItem menuButton blue-border">
<p>旅遊</p>
</div>
<div id="lv0" class="row menuItem menuButton">
<p>以上皆非</p>
</div>
</div>
<div class="lockedMenu">
<a href="https://github.com/tpai/taiwan-travel-level" target="_blank">
<svg class="github" aria-labelledby="simpleicons-github-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-github-icon">GitHub icon</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
</a>
<button id="saveAs" class="button">產生圖片</a>
</div>
<div class="default">
<div class="map">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg id="map" version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 750 1124" style="enable-background:new 0 0 750 1124;" xml:space="preserve">
<style type="text/css">
.st0{fill:#B4DEF7;}
.st1{fill:#FFFFFF;}
.st2{fill:#333333;}
.st3{font-family:'FZLTZHB--B51-0';}
.st4{font-size:52.1035px;}
.st5{font-size:48px;}
.st6{font-size:20px;}
.st7{fill:#FF7A7A;}
.st8{fill:#F5A623;}
.st9{fill:#88B14B;}
.st10{fill:#27BBEE;}
.st11{fill:#FFFFFF;stroke:#555555;stroke-miterlimit:10;}
.st12{fill:#555555;}
.st13{fill:#FFFFFF;stroke:#333333;stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10;}
.st14{fill:#FFFFFF;stroke:#333333;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st15{fill:#FFFFFF;stroke:#333333;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;}
.st16{font-size:23.0006px;}
.st17{fill:#FFFFFF;stroke:#333333;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st18{fill:#FFFFFF;stroke:#333333;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<rect x="-0.2" y="0" class="st0" width="750.2" height="1124"/>
<path class="st1" d="M719,1102H28c-2.8,0-5-2.2-5-5v-55.3c0-2.8,2.2-5,5-5h691c2.8,0,5,2.2,5,5v55.3C724,1099.8,721.8,1102,719,1102
z"/>
<text transform="matrix(1 0 0 1 46.5859 91.9209)"><tspan x="0" y="0" class="st2 st3 st4">制縣等級 </tspan><tspan id="total" x="222.9" y="0" class="st2 st3 st5">0</tspan></text>
<text transform="matrix(1 0 0 1 104.6665 1075.2633)" class="st2 st3 st6">久居</text>
<circle class="st7" cx="69.3" cy="1069.3" r="19"/>
<g>
<path class="st1" d="M70.6,1076.2v-2.1h-5.8c-0.7,0-1.3-0.2-1.6-0.5c-0.4-0.3-0.5-0.8-0.5-1.3c0-0.1,0-0.3,0.1-0.4
c0.1-0.1,0.1-0.3,0.2-0.5c0.1-0.2,0.2-0.3,0.3-0.5s0.3-0.3,0.4-0.6l6.1-8.1c0.4-0.5,0.7-0.9,1-1.2c0.3-0.2,0.6-0.4,0.9-0.4
c1.2,0,1.7,0.7,1.7,2v8.9H74c0.6,0,1.1,0.1,1.4,0.2c0.4,0.2,0.5,0.5,0.5,1.1c0,0.4-0.1,0.8-0.4,1c-0.3,0.2-0.7,0.3-1.3,0.3h-0.7
v2.1c0,0.6-0.1,1-0.4,1.3c-0.3,0.3-0.6,0.4-1,0.4c-0.4,0-0.8-0.1-1-0.4C70.8,1077.2,70.6,1076.8,70.6,1076.2z M65.7,1071.5h4.9
v-6.7L65.7,1071.5z"/>
</g>
<text transform="matrix(1 0 0 1 233.336 1075.2623)" class="st2 st3 st6">居住</text>
<circle class="st8" cx="199" cy="1069.3" r="19"/>
<g>
<path class="st1" d="M198.4,1067.4c0.7,0,1.3-0.2,1.8-0.6s0.8-1,0.8-1.8c0-0.6-0.2-1.1-0.6-1.5c-0.4-0.4-1-0.6-1.6-0.6
c-0.5,0-0.9,0.1-1.2,0.2s-0.5,0.3-0.7,0.5s-0.3,0.5-0.5,0.8c-0.2,0.3-0.3,0.7-0.4,1c-0.1,0.2-0.2,0.3-0.4,0.4s-0.4,0.1-0.7,0.1
c-0.3,0-0.6-0.1-0.8-0.4c-0.3-0.2-0.4-0.6-0.4-1c0-0.4,0.1-0.8,0.4-1.3c0.2-0.4,0.6-0.9,1.1-1.3c0.5-0.4,1-0.7,1.7-1
c0.7-0.2,1.5-0.4,2.3-0.4c0.7,0,1.4,0.1,2,0.3c0.6,0.2,1.1,0.5,1.6,0.9c0.5,0.4,0.8,0.8,1,1.3s0.3,1,0.3,1.6c0,0.8-0.2,1.4-0.5,2
s-0.8,1.1-1.4,1.6c0.6,0.3,1.1,0.7,1.5,1.1c0.4,0.4,0.7,0.9,0.9,1.4c0.2,0.5,0.3,1,0.3,1.6c0,0.7-0.1,1.4-0.4,2
c-0.3,0.6-0.7,1.2-1.2,1.7c-0.5,0.5-1.2,0.9-1.9,1.2c-0.7,0.3-1.6,0.4-2.5,0.4c-0.9,0-1.7-0.2-2.5-0.5c-0.7-0.3-1.3-0.7-1.8-1.2
c-0.5-0.5-0.8-1-1.1-1.5c-0.2-0.5-0.4-1-0.4-1.3c0-0.4,0.1-0.8,0.4-1.1c0.3-0.3,0.6-0.4,1.1-0.4c0.2,0,0.4,0.1,0.6,0.2
c0.2,0.1,0.3,0.3,0.4,0.5c0.4,1.1,0.8,1.9,1.3,2.4c0.5,0.5,1.1,0.8,1.9,0.8c0.5,0,0.9-0.1,1.4-0.3c0.4-0.2,0.8-0.6,1.1-1
c0.3-0.5,0.4-1,0.4-1.6c0-0.9-0.2-1.6-0.7-2.1c-0.5-0.5-1.2-0.8-2-0.8c-0.2,0-0.4,0-0.7,0c-0.3,0-0.5,0-0.6,0c-0.4,0-0.7-0.1-1-0.3
c-0.2-0.2-0.3-0.5-0.3-0.9c0-0.4,0.1-0.7,0.4-0.9c0.3-0.2,0.7-0.3,1.2-0.3H198.4z"/>
</g>
<text transform="matrix(1 0 0 1 362.0052 1075.2633)" class="st2 st3 st6">短居</text>
<circle class="st9" cx="328.7" cy="1069.3" r="19"/>
<g>
<path class="st1" d="M326.7,1075h6c0.6,0,1.1,0.1,1.4,0.4s0.5,0.6,0.5,1c0,0.4-0.1,0.7-0.4,1s-0.6,0.4-1.1,0.4h-8.4
c-0.6,0-1-0.2-1.3-0.5c-0.3-0.3-0.5-0.7-0.5-1.1c0-0.3,0.1-0.6,0.3-1.1c0.2-0.5,0.4-0.8,0.7-1.1c1-1.1,1.9-2,2.8-2.7
c0.8-0.8,1.4-1.2,1.8-1.5c0.6-0.4,1.1-0.9,1.6-1.3c0.4-0.4,0.7-0.9,1-1.4c0.2-0.5,0.3-0.9,0.3-1.4c0-0.5-0.1-0.9-0.3-1.3
c-0.2-0.4-0.6-0.7-1-0.9c-0.4-0.2-0.8-0.3-1.3-0.3c-1,0-1.8,0.4-2.4,1.3c-0.1,0.1-0.2,0.4-0.4,0.9c-0.2,0.5-0.4,0.9-0.6,1.2
c-0.2,0.3-0.6,0.4-1,0.4c-0.4,0-0.7-0.1-1-0.4c-0.3-0.3-0.4-0.6-0.4-1c0-0.5,0.1-1.1,0.4-1.7c0.2-0.6,0.6-1.1,1.1-1.6
c0.5-0.5,1.1-0.8,1.8-1.1c0.7-0.3,1.6-0.4,2.5-0.4c1.2,0,2.2,0.2,3,0.6c0.5,0.2,1,0.6,1.4,1c0.4,0.4,0.7,0.9,0.9,1.5
c0.2,0.6,0.3,1.1,0.3,1.7c0,0.9-0.2,1.8-0.7,2.6c-0.5,0.8-0.9,1.4-1.4,1.8c-0.5,0.4-1.3,1.1-2.5,2.1c-1.1,0.9-1.9,1.7-2.4,2.2
C327.1,1074.5,326.9,1074.7,326.7,1075z"/>
</g>
<text transform="matrix(1 0 0 1 490.6747 1075.2633)" class="st2 st3 st6">旅遊</text>
<circle class="st10" cx="458.3" cy="1069.3" r="19"/>
<g>
<path class="st1" d="M457.3,1076v-10.4c-1.9,1.5-3.2,2.2-3.9,2.2c-0.3,0-0.6-0.1-0.9-0.4c-0.2-0.3-0.4-0.6-0.4-0.9
c0-0.4,0.1-0.7,0.4-0.9c0.2-0.2,0.7-0.4,1.3-0.7c0.9-0.4,1.7-0.9,2.2-1.4c0.6-0.5,1-1,1.5-1.6c0.4-0.6,0.7-1,0.8-1.1
c0.1-0.1,0.4-0.2,0.7-0.2c0.4,0,0.7,0.2,1,0.5s0.4,0.7,0.4,1.3v13.1c0,1.5-0.5,2.3-1.6,2.3c-0.5,0-0.8-0.2-1.1-0.5
C457.5,1077.1,457.3,1076.6,457.3,1076z"/>
</g>
<text transform="matrix(1 0 0 1 619.3439 1075.2633)" class="st2 st3 st6">以上皆非</text>
<circle class="st11" cx="588" cy="1069.3" r="19"/>
<g>
<path class="st12" d="M593.9,1069.4c0,1.3-0.1,2.3-0.2,3.2s-0.4,1.7-0.8,2.5c-0.5,0.9-1.2,1.6-2,2.1s-1.7,0.7-2.8,0.7
c-1.2,0-2.2-0.3-3.1-1c-0.9-0.7-1.6-1.6-2.1-2.7c-0.2-0.6-0.4-1.3-0.5-2.1c-0.1-0.8-0.2-1.6-0.2-2.5c0-1.2,0.1-2.2,0.2-3.1
c0.1-0.9,0.3-1.7,0.6-2.4c0.5-1.1,1.1-1.9,2-2.5c0.9-0.6,1.9-0.9,3.1-0.9c0.8,0,1.5,0.1,2.1,0.4c0.6,0.3,1.2,0.6,1.7,1.1
c0.5,0.5,0.9,1.1,1.2,1.8C593.6,1065.3,593.9,1067.1,593.9,1069.4z M590.7,1069.2c0-1.4-0.1-2.5-0.3-3.4s-0.5-1.6-0.8-2
c-0.4-0.5-0.9-0.7-1.7-0.7c-1,0-1.7,0.5-2.1,1.5c-0.4,1-0.6,2.6-0.6,4.7c0,1.4,0.1,2.6,0.3,3.5c0.2,0.9,0.5,1.6,0.8,2.1
c0.4,0.5,0.9,0.7,1.6,0.7c0.7,0,1.3-0.2,1.7-0.7c0.4-0.5,0.7-1.2,0.8-2.1C590.6,1071.8,590.7,1070.6,590.7,1069.2z"/>
</g>
<g>
<polygon id="屏東1" class="st13" points="366,979 349.3,894 288.1,834.2 302.4,749.9 384.7,712.7 411.5,760.7 367.7,828.1 405.8,897.9
401.7,988.4 384.7,959.7 "/>
<polygon id="台東1" class="st13" points="405.8,897.9 367.7,828.1 411.5,760.7 384.7,712.7 438.1,628.7 498.1,677.8 533.7,595.7 552.2,595.8
509.3,725.4 437.8,795.8 "/>
<polygon id="花蓮" class="st13" points="619.8,374.7 552.2,595.8 533.7,595.7 498.1,677.8 424.9,618.1 488,542.1 533.7,366.6 576.4,372.8
583.6,357.7 "/>
<polygon id="宜蘭1" class="st13" points="619.8,374.7 583.6,357.7 576.4,372.8 533.7,366.6 514.5,315.8 554.8,282.3 626.7,217.8 675,199.4
630.4,256.9 642.3,318.1 "/>
<polygon id="高雄" class="st13" points="288.1,834.2 240.6,783.7 229.3,725.6 278.9,724.2 348.9,632.9 415.5,583.2 442.5,596.8 424.9,618.1
438.1,628.7 384.7,712.7 302.4,749.9 "/>
<polygon id="台南" class="st13" points="229.3,725.6 225.9,705.6 201.7,691.7 217.8,626.1 284.1,601.9 309.7,606.9 337.6,647.7 278.9,724.2
"/>
<polygon id="嘉義" class="st13" points="217.8,626.1 217.8,571.7 302.6,546.1 374.4,552.2 415.5,583.2 348.9,632.9 337.6,647.7 309.7,606.9
284.1,601.9 "/>
<polygon id="南投" class="st13" points="527.2,391.6 488,542.1 442.5,596.8 415.5,583.2 374.4,552.2 340.9,549.4 343.6,451 "/>
<polygon id="雲林" class="st13" points="217.8,571.7 247.4,494.2 342.2,503.9 340.9,549.4 302.6,546.1 "/>
<polygon id="彰化" class="st13" points="302.4,398.1 247.4,494.2 342.2,503.9 343.6,451 "/>
<polygon id="台中" class="st13" points="341.3,342.5 302.4,398.1 343.6,451 527.2,391.6 533.7,366.6 514.5,315.8 421.7,374.7 380.6,374.7
"/>
<polygon id="苗栗" class="st13" points="393.6,270.5 341.3,342.5 380.6,374.7 421.7,374.7 483,334.9 437.8,326 444,298.1 "/>
<polygon id="新竹" class="st13" points="428.2,224 393.6,270.5 444,298.1 437.8,326 484.1,335.1 514.5,315.8 526.4,305.9 504.5,262.4 "/>
<polygon id="桃園" class="st13" points="496,165.8 527.2,193.5 516.7,234.2 554.8,282.3 526.4,305.9 504.5,262.4 428.2,224 "/>
<polygon id="新北" class="st13" points="527.2,156.5 496,165.8 527.2,193.5 516.7,234.2 554.8,282.3 626.7,217.8 675,199.4 652.7,185.9
651.1,165.8 626.7,165.8 602.5,158.9 605.1,142.8 552.2,125.1 "/>
<polygon id="台北" class="st13" points="542.3,165.8 548,204.2 583.6,216.3 595.9,199.4 566.2,150.3 "/>
<path id="金門" class="st14" d="M112.2,335.9c0,0,2.2,26.9,3.3,26.1c1.1-0.8,20.4-13.1,20.4-13.1l25.7,10.5l-2.8-34.8l-22.9,12.7L112.2,335.9
z"/>
<polygon id="澎湖1" class="st14" points="115.1,522.2 126.5,537.9 140,554.5 109,570 103,557 117.6,543.7 106.8,526.2 "/>
<polygon id="澎湖2" class="st14" points="103,533.1 94.5,529.6 84.3,554.5 94.5,554.5 "/>
<polygon id="澎湖3" class="st14" points="93.7,591.2 105.7,598.7 93.7,608.8 "/>
<polygon id="馬祖1" class="st15" points="108.7,170.3 112.2,185.1 92.4,185.1 "/>
<path id="馬祖2" class="st15" d="M82.6,193.9c0.6,0,19.5,4.7,19.5,4.7l-16.6,10.6L82.6,193.9z"/>
<text transform="matrix(1 0 0 1 318.8428 799.5312)" class="st2 st3 st16 city">屏東</text>
<text transform="matrix(1 0 0 1 325.2979 695.7734)" class="st2 st3 st16 city">高雄</text>
<text transform="matrix(1 0 0 1 234.8994 672.2617)" class="st2 st3 st16 city">台南</text>
<text transform="matrix(1 0 0 1 85.5078 507.6504)" class="st2 st3 st16 city">澎湖</text>
<text transform="matrix(1 0 0 1 92.9629 320.0596)" class="st2 st3 st16 city">金門</text>
<text transform="matrix(1 0 0 1 122.9629 202.666)" class="st2 st3 st16 city">馬祖</text>
<text transform="matrix(1 0 0 1 279.8779 585.8145)" class="st2 st3 st16 city">嘉義</text>
<text transform="matrix(1 0 0 1 264.5449 531.9668)" class="st2 st3 st16 city">雲林</text>
<text transform="matrix(1 0 0 1 279.8779 474.7217)" class="st2 st3 st16 city">彰化</text>
<text transform="matrix(1 0 0 1 337.9268 406.8701)" class="st2 st3 st16 city">台中</text>
<text transform="matrix(1 0 0 1 367.0664 342.2969)" class="st2 st3 st16 city">苗栗</text>
<text transform="matrix(1 0 0 1 435.5566 276.6172)" class="st2 st3 st16 city">新竹</text>
<text transform="matrix(1 0 0 1 462.1357 226.0161)" class="st2 st3 st16 city">桃園</text>
<text transform="matrix(1 0 0 1 538.5488 242.1167)" class="st2 st3 st16 city">新北</text>
<text transform="matrix(1 0 0 1 561.3633 323.5898)" class="st2 st3 st16 city">宜蘭</text>
<text transform="matrix(1 0 0 1 517.918 511.1729)" class="st2 st3 st16 city">花蓮</text>
<text transform="matrix(1 0 0 1 431.3779 720.7334)" class="st2 st3 st16 city">台東</text>
<text transform="matrix(1 0 0 1 545.2627 192.9224)" class="st2 st3 st16 city">台北</text>
<text transform="matrix(1 0 0 1 400.5039 507.9443)" class="st2 st3 st16 city">南投</text>
</g>
<polygon id="台東2" class="st17" points="603,739 619,739 615,757 "/>
<polygon id="台東3" class="st17" points="607.5,941.5 625.5,941.5 622.5,952.5 635.5,964.5 630.5,970.5 607.5,953.5 "/>
<polygon id="屏東2" class="st17" points="270.5,874.5 276.5,882.5 263.5,889.5 "/>
<polygon id="基隆" class="st18" points="603,159 589,166 611,193 623,185 617,176 630.7,167 "/>
<text transform="matrix(1 0 0 1 620.2627 149.9224)" class="st2 st3 st16 city">基隆</text>
<polygon id="宜蘭2" class="st15" points="662,249 657,253 662,258 667,253 "/>
</svg>
</div>
<div class="bottomBar">
<a id="ref" href="https://zhung.com.tw/japanex/" target="_blank">Refer To Japanex</a>
</div>
</a>
</div>
<script src="./index.js?v=c8733ae917b63c04f01617cb9dfd97c50a1f7b2e"></script>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P4F6BQZ"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
</body>
</html>