forked from kbflf5/voter-registration
-
Notifications
You must be signed in to change notification settings - Fork 3
/
en-index.html
287 lines (276 loc) · 14.2 KB
/
en-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
<!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-en.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-en.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 class="navbar-brand" href="./en-index.html">
<img src="assets/nav-logo.png" alt="Nav Logo" height="50" width="50" class="navbar-brand-logo"></img>
<span class="navbar-brand-text">Voter Reg Form Filling Tool </span>
</a>
</div><!-- /.navbar-header -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#">New Voter Reg</a>
<ul class="dropdown-menu">
<li><a href="en-app.html?type=new-district">Geographical Constituencies</a></li>
<li><a href="en-app.html?type=new-functional">Traditional Functional Constituencies</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">Change of Voter Reg Info</a>
<ul class="dropdown-menu">
<li><a href="en-app.html?type=change-address">Report on Change of Particulars by an Elector in a Geographical Constituency</a></li>
<li><a href="en-app.html?type=change-functional">Report on Change of Particulars by an Individual in a Functional Constituency</a></li>
</ul>
</li>
<li><a href="en-note.html">Guidance Notes</a></li>
<li><a href="en-terms.html">Terms of use</a></li>
<li><a href="index.html">中</a></li>
</ul><!-- /.navbar-right -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<div class="banner-container">
<img class="banner" src="assets/banner-en.png" />
</div>
</header>
<main class="container" id="container-header">
<div class="content-container">
<p>The next Legislative Council Election will be held in September 2020.</p>
<p>Please register as voter to reclaim Hong Kong’s future!</p>
<p>New Voter Registration Deadline: <b>2 May 2020</b></p>
<p>Report on Change of Voter Particulars Deadline: <b>2 April 2020</b></p>
<p>
This voter registration tool can help you create an electronic voter registration form. This will allow you to submit your voter registration or report on changes to your voter information on the Registration and Electoral Office’s (the “REO”) website. We do not collect any personal data during the filling or creation of this form, all procedures are performed and completed locally on your computer.
</p>
<p class="title" id="register">Voter eligibility</p>
<p>
If you are a Hong Kong permanent resident and ordinarily reside in Hong Kong, and aged 18 or above (or will reach 18 years of age on or before 25 September (for District Council Election year) or 25 July (for Non District Council Election year) next following your application for registration), it is your basic right to vote and stand for election. For details, please refer to the <a href="en-note.html" target="_blank">application guideline</a>。
</p>
<p class="title" id="register">New registration</p>
<p><a id="register" href="en-app.html?type=new-district"><img class="img-btn" src="assets/btn-register-1-en.png" /></a></p>
<p><a id="register" href="en-app.html?type=new-functional"><img class="img-btn" src="assets/btn-register-2-en.png" /></a></p>
<p class="title" id="change_info">Change voter registration information</p>
<p>You can change the voter address, functional constituency or other registration information. Please note that you must provide your proof of your address to complete the process of changing your voter registration address. Please prepare an electronic or scanned version of the relevant documents to upload to the REO's website together with the voter registration form. (<a href="https://www.reo.gov.hk/ch/voter/aptypes.htm" target="_blank">Which documents are acceptable address proofs?</a>)</p>
<p><a id="changeAddress" href="en-app.html?type=change-address"><img class="img-btn" src="assets/btn-change-info-1-en.png" /></a></p>
<p><a id="changeAddress" href="en-app.html?type=change-functional"><img class="img-btn" src="assets/btn-change-info-2-en.png" /></a></p>
<p class="title">Checking Voter Registration Information</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-en.png" /></a></p>
<p>(Registration and Electoral Office Website)</p>
</div>
</main><!-- #container-header -->
<section class="container section-waiver" id="waiver">
<div class="content-container">
<p class="title">Terms and Disclaimer</p>
<p>You must provide clear and correct information for voter registration. If you provide unclear or incorrect information, you may fail to register as an elector. It is an offence for any person to make any false or incorrect statement, knowingly or recklessly, or to provide information that is critical or misleading to a critical extent.</p>
<p>We provide the Voter Registration Form Filling Tool (hereinafter referred to as the Tool) with the intention to simplify the cumbersome steps of completing a voter registration form. We do not collect any personal data when you are using this tool. This tool directly generates an image of the voter registration form on your device. Once loaded, this tool will not submit any information to our servers. Although the design of this tool will avoid the leakage of personal data, you must also understand that we cannot control how this tool is used, and we cannot guarantee that the network, device, operating system and browser software you use to utilise the tool are not defective (including security deficiencies), and any resulting data leakage.</p>
<p>WAIVER OF LIABILITY: In no event shall WE be liable for any consequential, incidental, indirect, special, or punitive damages incurred by you and arising out of the use of this program, whether or not such loss or damage is based in contract, warranty, tort, negligence, strict liability, indemnity, or otherwise, even if WE have advised you of the possibility of such damages. These limitations shall apply notwithstanding any failure of essential purpose of any limited remedy. The maximum total liability of us shall not be more than HK $ 1 in any event.</p>
<p>You shall fully indemnify and hold us harmless from and against any and all claims of any kind arising out of the use of this program including any and all expenses, costs, legal fees, settlements, judgments or awards incurred by you in the defense of any such claim or lawsuit.</p>
<p>By browsing this website or using this tool, you agree to the above terms and disclaimers.</p>
</div>
<br />
<div class="content-container">
<p class="title">Copyright</p>
<p>The source code for the Tool is derived from an open source project created by Keyboard Frontier. Professional Guild has made further revisions and adjustments as required. You can also contribute to this <a href="https://github.com/yulapshun/voter-registration" target="_blank">project</a>.</p>
<p>This program is a free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. For details, please visit the GNU General Public License website: <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>