forked from yulapshun/voter-registration
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
288 lines (278 loc) · 13.5 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
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>選民登記填表機</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="description" content="香港選民登記填表機。只要你是香港永久性居民、通常在香港居住及已年滿 18 歲，參與選舉就是你的基本權利。 Hong Kong voter registration.">
<script src="jquery.min.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
/* general */
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 400;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 200;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.otf) format('opentype');
}
body {
font-family: 'Noto Sans TC';
background-color: #fff;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* nav */
header {
width: 100%;
background-color: #a3bbc2;
}
header>nav.site-nav {
display: flex;
justify-content: center;
flex: 1 0;
max-width: 710px;
margin: 0 auto;
}
header>nav.site-nav>h1 {
color: #ffcd00;
}
header>nav.site-nav>ul {
font-size: 1.2em;
margin-right: 1em;
flex: 1;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
}
header>nav.site-nav>ul, .site-nav-container>nav.site-nav>ul>li{
list-style: none;
}
header>nav.site-nav>ul>li{
margin: 0 1em;
}
header>nav.site-nav>ul>li>a{
text-decoration: none;
color: #fff;
}
header>nav.site-nav>h1 {
margin-left: 1em;
}
header>.banner-container {
text-align: center;
background-color: #fff;
}
header>.banner-container>.banner {
width: 710px;
}
.img-btn {
height: 45px;
}
@media all and (max-width: 710px) {
header>nav.site-nav>ul {
flex-direction: column;
}
header>nav.site-nav>h1 {
text-align: left;
margin-left: 10%;
}
header>.banner-container>.banner {
width: 100%;
}
.img-btn {
height: 40px;
}
}
@media all and (max-width: 450px) {
.img-btn {
width: auto;
height: auto;
max-width: 100%;
max-height: 30px;
}
}
/* hero */
main {
margin-top: 0;
margin-right: 10px;
margin-left: 10px;
}
main>.content-container {
margin: 0 auto;
max-width: 710px;
}
main>.content-container .title {
font-size: 2em;
color: #7a888b;
margin-bottom: 0.5em;
margin-left: 0;
}
main>.content-container p {
color: #8e8e8e;
margin-left: 2em;
}
main>.content-container p>a>img {
margin-left: 5px;
}
@media all and (max-width: 710px) {
main {
margin-left: 10px;
margin-right: 10px;
}
}
section.section-waiver {
margin-top: 70px;
margin-right: auto;
margin-left: auto;
}
section.section-waiver>.content-container {
margin: 0 auto;
max-width: 710px
}
section.section-waiver>.content-container>.title {
font-size: 0.8em;
font-weight: bold;
color: #7a888b;
margin-bottom: 30px;
}
section.section-waiver>.content-container p {
font-size: 0.8em;
color: #8e8e8e;
}
section.container>div.section-content>p, section.container>div.section-content>amp-img,
footer.container>div.section-content>p, footer.container>div.section-content>amp-img {
margin-left: 1rem;
margin-right: 1rem;
}
footer {
margin-top: 200px;
width: 100%;
height: 120px;
background-color: #042f53;
}
</style>
<link href="https://fonts.googleapis.com/earlyaccess/notosanstc.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-app.min.css" rel="stylesheet">
<link href="assets/app.css" rel="stylesheet">
<link href="assets/dropdown.css" rel="stylesheet">
<meta property="og:type" content="website">
<meta property="og:title" content="選民登記填表機">
<meta property="og:description" content="只要你是香港永久性居民、通常在香港居住及已年滿 18 歲，參與選舉就是你的基本權利。">
<meta property="og:image" content="/assets/banner.png?20180329">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="選民登記填表機" />
<meta name="twitter:description" content="只要你是香港永久性居民、通常在香港居住及已年滿 18 歲，參與選舉就是你的基本權利。" />
<meta name="twitter:image" content="/assets/banner.png?20180329" />
<link rel="shortcut icon" href="favicon.png">
<meta name="theme-color" content="#c91f37">
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-kbfl navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="./">
<div class="navbar-brand">
<img src="assets/nav-logo.png" alt="Nav Logo" height="50" width="50" class="navbar-brand-logo" />
<span class="navbar-brand-text">選民登記填表機</span>
</div>
</a>
</div><!-- /.navbar-header -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#">新選民登記</a>
<ul class="dropdown-menu">
<li><a href="app.html?type=new-district">地方選區</a></li>
<li><a href="app.html?type=new-functional">傳統功能界別及界別分組</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">更改選民登記資料</a>
<ul class="dropdown-menu">
<li><a href="app.html?type=change-address">更改個人資料及地址（地方選區／功能界別）</a></li>
<li><a href="app.html?type=change-functional">更改功能界別的選民組別
</a></li>
</ul>
</li>
<li><a href="note.html">填表須知</a></li>
<li><a href="terms.html">使用條款</a></li>
<li><a href="en-index.html">ENG</a></li>
</ul><!-- /.navbar-right -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<div class="banner-container">
<img class="banner" src="assets/banner.png" />
</div>
</header>
<main class="container" id="container-header">
<div class="content-container">
<p>下一屆立法會選舉將於2020年9月舉行，香港人要贏，寸土必爭！</p>
<p>新登記選民截止日期：2020年5月2日</p>
<p>已登記選民更改地址或更改功能界別截止日期：2020年4月2日</p>
<p>
此選民登記填表機可協助你製作電子格式的選民登記表格，令你可於選舉事務處的上載平台提交選民登記或更改選民資料。我們不會在你填寫、製作表格的過程中收集任何個人資料，所有程序皆在你的電腦或流動裝置進行及完成。
</p>
<p class="title" id="register">選民資格</p>
<p>
只要你是香港永久性居民、通常在香港居住及已年滿 18 歲(或在隨著提出申請後的首個9月25日（區議會選舉年）或7月25日（非區議會選舉年）或之前滿18歲)，於選舉中投票和參選就是你的基本權利。詳情請參閱<a href="note.html" target="_blank">填表須知</a>。
</p>
<p class="title" id="register">新登記</p>
<p><a id="register" href="app.html?type=new-district"><img class="img-btn" src="assets/btn-register-1.png" /></a></p>
<p><a id="register" href="app.html?type=new-functional"><img class="img-btn" src="assets/btn-register-2.png" /></a></p>
<p class="title" id="change_info">更改登記資料</p>
<p>你可以更改選民地址、功能界別或其他登記資料。請注意你須提供住址證明文件以完成更改選民登記地址的程序。請預備有關文件的電子版本或掃瞄版本，以便與選民登記表格一同上傳至選舉事務處的網站。(<a href="https://www.reo.gov.hk/ch/voter/aptypes.htm" target="_blank">哪些文件是可接受的住址證明？</a>)</p>
<p><a id="changeAddress" href="app.html?type=change-address"><img class="img-btn" src="assets/btn-change-info-1.png" /></a></p>
<p><a id="changeAddress" href="app.html?type=change-functional"><img class="img-btn" src="assets/btn-change-info-2.png" /></a></p>
<p class="title">檢查選民登記資料</p>
<p><a id="externalCheck" href="https://www1.voterinfo.gov.hk/bd_reovi/OVIES/jsp/mob/intro.jsp" target="_blank"><img class="img-btn" src="assets/btn-check-info.png" /></a></p>
<p>(選舉事務處網站)</p>
</div>
</main><!-- #container-header -->
<section class="container section-waiver" id="waiver">
<div class="content-container">
<p class="title">條款及免責聲明</p>
<p>你必須提供清晰而正確的資料作選民登記。如你提供不清晰或不正確的資料，可引致你未能成功登記為選民。任何人士如明知或罔顧後果地作出任何虛假或不正確的陳述，或提供屬虛假達關鍵程度或具誤導性達關鍵程度的資料，即屬違法 。</p>
<p>我們提供此「選民登記填表機」（下稱工具）旨在簡化填寫選民登記表格的繁瑣步驟。我們只會統計網頁的流量及使用的性質及次數，我們不會收集任何你在使用此工具時填寫的個人資料。此工具在你的裝置上直接產生選民登記表格圖像，此工具一經載入，不會提交任何資料至我們的伺服器。儘管此工具的設計會避免使個人資料外洩，你亦必須明白我們不能控制你的使用方式，亦不能保證你用來使用此工具的網絡、裝置、操作系統及瀏覽器軟件沒有缺陷（包括安全缺陷），並因此造成資料外洩。</p>
<p>你同意放棄追究責任。在任何情況下，專業議政均不應對因你所引起的任何相因性、偶發性、間接性、特殊性或懲罰性賠償承擔責任，無論該等責任是衍生自合同、保證、侵權、過失、嚴格責任、免責或其它理論，以及專業議政是否已告知你發生此類損失的可能性。即使與任何有限救濟的實質目的相矛盾，此限制仍應有效。此外，在任何情況下，我們因本協定或與本協定相關原因而承擔的責任總額均不應超過港幣一元。</p>
<p>你同意讓專業議政豁免於任何所有因你使用此程式而引起的任何索賠責任要求，同時承擔專業議政在對任何此類索賠要求或訴訟做出抗辯而引致的所有任何費用、開支、律師費、調解費、裁決或賠償金。</p>
<p>當你瀏覽此網頁或使用本工具，即代表你同意上述條款及免責聲明。</p>
</div>
<br />
<div class="content-container">
<p class="title">版權</p>
<p>此選民登記填表機的程式碼是源自於鍵盤戰線的一個開源專案。專業議政根據需要作出進一步的修改及調整。你也可一同貢獻此<a href="https://github.com/yulapshun/voter-registration" target="_blank">專案</a>。</p>
<p>本程式爲自由軟體；您可依據自由軟體基金會所發表的GNU通用公共授權條款，對本程式再次發佈和/或修改；無論您依據的是本授權的第三版，或（您可選的）任何日後發行的版本。詳情請參照GNU通用公共授權：<a href='http://www.gnu.org/licenses/' target="_blank">http://www.gnu.org/licenses/</p>
</div>
</section><!-- #register -->
<footer>
</footer>
<script async src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>