generated from rayc2045/create-petite-app
-
Notifications
You must be signed in to change notification settings - Fork 0
/
register.html
283 lines (277 loc) · 16.6 KB
/
register.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
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/images/favicon.ico">
<title>FlyingV</title>
<meta name="title" content="flyingV">
<meta name="description" content="flyingV is a Crowdfunding platform in Asia. flyingV 是一個群眾募資平台。我們正在打造一個環境，讓不限領域的創意，能更容易地實踐。">
<meta name="keywords" content="front-end responsive utility-classes grid-layout responsive-design vue-template frontend-template animate-css front-end-template vue3 bootstrap5 petite-vue">
<meta name="author" content="Ray Chang">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://flyingv-lomoinstant.netlify.app/">
<meta property="og:title" content="flyingV">
<meta property="og:description" content="flyingV is a Crowdfunding platform in Asia. flyingV 是一個群眾募資平台。我們正在打造一個環境，讓不限領域的創意，能更容易地實踐。">
<meta property="og:image" content="https://www.flyingv.cc/images/fbshare.jpg">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://flyingv-lomoinstant.netlify.app/">
<meta property="twitter:title" content="flyingV">
<meta property="twitter:description" content="flyingV is a Crowdfunding platform in Asia. flyingV 是一個群眾募資平台。我們正在打造一個環境，讓不限領域的創意，能更容易地實踐。">
<meta property="twitter:image" content="https://www.flyingv.cc/images/fbshare.jpg">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans:300,400,500,700&display=swap" />
<!-- Styles & Scripts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<link rel="stylesheet" href="./src/styles/style.css">
<script src="/src/libraries/mdb.min.js" defer></script>
<script src="./src/scripts/script-min.js" type="module"></script>
</head>
<body
v-cloak
class="min-vh-100 d-grid overflow-x-hidden"
:class="{ 'overflow-hidden': isLoading }"
style="--animate-duration: 1.2s"
@dragstart.prevent
@vue:mounted="init"
>
<header class="mb-xl-3">
<nav class="py-1 sticky-top navbar navbar-expand-lg navbar-light bg-white shadow-none border-bottom" style="z-index: 1000001;">
<div class="position-relative container-xl justify-content-start">
<!-- toggle menu -->
<button
class="navbar-toggler text-danger"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarButtons"
aria-controls="navbarButtons"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<!-- logo -->
<a class="me-2 navbar-brand" style="height: 4rem;" href="https://www.flyingv.cc/">
<img src="https://raw.githubusercontent.com/rayc2045/flyingv-demo/main/images/logo.svg" :height="`${windowWidth < 768 ? '48' : '64'}`" alt="FlyingV Logo" loading="lazy" />
</a>
<!-- toggle navbar -->
<div class="pb-3 pb-lg-0 collapse navbar-collapse" id="navbarButtons">
<ul class="mb-2 mb-lg-0 navbar-nav">
<!-- <li class="nav-item"> -->
<!-- lang switch -->
<!-- <div class="me-1 d-sm-none nav-link dropdown">
<button
type="button"
class="px-2 py-1 position-realtive bg-white shadow-none border-dark border-1"
style="margin-top: .5rem;"
id="dropdownMenuOffset"
data-mdb-toggle="dropdown"
aria-expanded="false"
data-mdb-offset="10,20"
@click="toggleClasses($el.querySelector('i'), 'fa-caret-down fa-caret-up')"
@blur="toggleClasses($el.querySelector('i'), 'fa-caret-down fa-caret-up')"
>
<small class="pe-3">中文</small>
<i class="fas fa-caret-down text-dark"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<li><a class="dropdown-item" href="#">English</a></li>
<li><a class="dropdown-item" href="#">日本語</a></li>
</ul>
</div> -->
<!-- </li> -->
<li class="mx-2 nav-item">
<a class="nav-link text-black text-hover-danger" href="https://www.flyingv.cc/about"><small>關於</small></a>
</li>
<li class="mx-2 nav-item">
<a class="nav-link text-black text-hover-danger" href="https://www.flyingv.cc/projects/create"><small>提案</small></a>
</li>
<li class="mx-2 nav-item">
<a class="nav-link text-black text-hover-danger" href="https://www.flyingv.cc/projects"><small>探索</small></a>
</li>
</ul>
<form class="ms-lg-3 w-auto d-flex input-group form-muted">
<span class="input-group-text border-0" id="search-addon">
<i class="fas fa-search"></i>
</span>
<input type="search" class="form-control rounded" placeholder="搜尋專案" aria-label="Search" aria-describedby="search-addon">
</form>
</div>
<div class="ms-auto position-absolute d-flex dropdown" style="right: 1rem; top: .5rem;">
<!-- lang switch -->
<!-- <div class="me-1 d-none d-sm-block dropdown">
<button
type="button"
class="me-4 px-2 py-1 position-realtive bg-white shadow-none border-dark border-1"
style="margin-top: .5rem;"
id="dropdownMenuOffset"
data-mdb-toggle="dropdown"
aria-expanded="false"
data-mdb-offset="10,20"
@click="toggleClasses($el.querySelector('i'), 'fa-caret-down fa-caret-up')"
@blur="toggleClasses($el.querySelector('i'), 'fa-caret-down fa-caret-up')"
>
<small class="pe-3">中文</small>
<i class="fas fa-caret-down text-dark"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<li><a class="dropdown-item" href="#">English</a></li>
<li><a class="dropdown-item" href="#">日本語</a></li>
</ul>
</div> -->
<!-- avatar -->
<a class="ps-4 py-1 d-flex align-items-center dropdown-toggle hidden-arrow text-decoration-none border-start" href="#" id="navbarDropdownMenuAvatar" role="button" data-mdb-toggle="dropdown" aria-expanded="false" @click="toggleClasses($el.querySelector('i'), 'fa-caret-down fa-caret-up')" @blur="toggleClasses($el.querySelector('i'), 'fa-caret-down fa-caret-up')">
<img src="https://raw.githubusercontent.com/rayc2045/flyingv-demo/main/images/nonuser.svg" class="rounded-circle me-2" height="42" alt="Black and White Portrait" loading="lazy">
<i class="fas fa-caret-down text-dark"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuAvatar">
<li>
<a class="dropdown-item" href="login.html">登入</a>
</li>
<li>
<a class="dropdown-item" href="register.html">註冊</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- register section -->
<section class="mx-auto px-2 px-md-0 py-5" style="max-width: 320px; letter-spacing: 0;">
<h4 class="mb-4 fw-bold text-center">註冊</h4>
<small>
<form>
<p class="fw-bold">基本資料</p>
<div class="mb-3 form-outline form-muted">
<input class="form-control" type="text" maxlength="40" id="name" name="name" required />
<label class="form-label" style="outline: none" for="name">名稱</label>
</div>
<div class="mb-3 form-outline form-muted">
<input class="form-control" type="email" id="formEmail" name="email" required />
<label class="form-label" style="outline: none" for="formEmail">註冊信箱</label>
</div>
<div class="mb-3 form-outline form-muted">
<input class="form-control" type="password" minlength="8" id="formPassword" name="password" required />
<label class="form-label" for="formPassword">密碼</label>
</div>
<p class="fw-bold">生日</p>
<div class="mb-4">
<div class="form-outline form-muted">
<input class="form-control" type="date" id="formBirthday" name="birthday" required />
<label class="form-label" for="formBirthday">出生日期</label>
</div>
</div>
<p class="fw-bold">性別</p>
<div class="mb-4 d-flex gap-4">
<input type="radio" class="btn-check" name="gender" id="genderMale" autocomplete="off" />
<label class="col btn btn-light shadow-2" for="genderMale">男性</label>
<input type="radio" class="btn-check" name="gender" id="genderFemale" autocomplete="off" />
<label class="col btn btn-light shadow-2" for="genderFemale">女性</label>
<input type="radio" class="btn-check" name="gender" id="genderOther" autocomplete="off" />
<label class="col btn btn-light shadow-2" for="genderOther">其他</label>
</div>
<button type="submit" class="mt-2 mb-1 w-100 btn btn-danger">註冊</button>
</form>
<small class="text-muted">
註冊 flyingV 會員即表示我同意 <a class="text-danger" href="https://www.flyingv.cc/policy" target="_blank" rel="noreferrer noopener">網站使用條款</a>
</small>
<hr class="my-4">
<div class="mt-4 d-flex justify-content-between align-items-center">
<span>已經有 flyingV 帳號了？</span>
<a class="btn btn-outline-danger" href="login.html">登入</a>
</div>
</small>
</section>
</header>
<footer class="py-5 text-white bg-dark">
<div class="container-md">
<div class="mb-5 px-3 px-md-0 d-flex justify-content-between">
<!-- left -->
<div :class="`${windowWidth < 768 ? '' : 'row gap-5'}`">
<div class="col mb-5 mb-lg-0">
<p class="mb-4 mb-md-5 fw-bold">關於</p>
<small>
<ul class="list-unstyled">
<li class="my-3"><a class="text-white text-hover-danger text-decoration-none" href="https://www.flyingv.cc/about">關於我們</a></li>
<li class="my-3"><a class="text-white text-hover-danger text-decoration-none" href="https://www.flyingv.cc/jobs">人才招募</a></li>
<li class="my-3"><a class="text-white text-hover-danger text-decoration-none" href="https://www.flyingv.cc/branding">商標使用規範</a></li>
</ul>
</small>
</div>
<div class="col mb-5 mb-lg-0">
<p class="mb-4 mb-md-5 fw-bold">條款</p>
<small>
<ul class="list-unstyled">
<li class="my-3"><a class="text-white text-hover-danger text-decoration-none" href="https://www.flyingv.cc/policy">網站使用條款</a></li>
<li class="my-3"><a class="text-white text-hover-danger text-decoration-none" href="https://www.flyingv.cc/contract">提案者合約</a></li>
</ul>
</small>
</div>
<div class="col mb-5 mb-lg-0">
<p class="mb-4 mb-md-5 fw-bold">協助</p>
<small>
<ul class="list-unstyled">
<li class="my-3"><a class="text-white text-hover-danger text-decoration-none" href="https://www.flyingv.cc/faq">常見問題</a></li>
<li class="my-3"><a class="text-white text-hover-danger text-decoration-none" href="https://www.flyingv.cc/guide">使用手冊</a></li>
<li class="my-3"><a class="text-white text-hover-danger text-decoration-none" href="https://www.flyingv.cc/viki">提案百科</a></li>
</ul>
</small>
</div>
<div class="col mb-5 mb-lg-0">
<p class="mb-4 mb-md-5 fw-bold">更多</p>
<small>
<ul class="list-unstyled">
<li class="my-3"><a class="text-white text-hover-danger text-decoration-none" href="https://rolla.flyingv.cc">Rolla</a></li>
<li class="my-3">
<a
class="text-white text-hover-danger text-decoration-none"
href="https://shopee.tw/flyingv"
target="_blank" rel="noreferrer noopener"
>VCollection x
<svg style="margin-top: -3px" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 32 32" style="margin-bottom: -2px;">
<g fill="none" fill-rule="evenodd">
<path fill="#FFF" d="M18.733 20.883c-.065.234-.168.468-.31.696-.032.05-.054.087-.07.115-.506.745-1.283 1.114-2.23 1.12-.886 0-1.919-.327-3.006-.99-.136-.076-.278-.163-.424-.266-.19-.13-.24-.386-.11-.577.131-.19.387-.239.577-.108.12.081.245.163.38.244.958.582 1.839.87 2.572.87.664 0 1.202-.25 1.545-.755.021-.039.043-.06.048-.077.098-.158.169-.326.218-.489.098-.337.081-.685-.054-1-.147-.332-.43-.653-.87-.92-.294-.179-.658-.337-1.099-.456-1.12-.315-1.946-.761-2.392-1.36-.49-.657-.527-1.45-.005-2.413.348-.636 1.06-1.033 1.963-1.104.777-.06 1.712.125 2.664.609.206.103.288.353.18.56-.11.207-.354.288-.56.18-.811-.414-1.583-.571-2.224-.523-.615.05-1.082.288-1.29.67-.347.635-.342 1.135-.06 1.516.327.44 1.007.783 1.953 1.05.51.146.946.331 1.305.549.593.359.99.81 1.202 1.3.217.505.244 1.038.097 1.56M13.59 7.904c.555-.957 1.288-1.55 2.077-1.55.783 0 1.522.593 2.066 1.545.473.816.805 1.881.924 3.083h-5.991c.125-1.197.45-2.267.924-3.078m10.189 3.078H19.69c-.125-1.387-.51-2.637-1.065-3.594-.74-1.267-1.778-2.056-2.958-2.056-1.18 0-2.224.783-2.958 2.056-.554.962-.94 2.207-1.066 3.594H7.55c-.484 0-.913.402-.88.886l.826 11.45c.087 1.24.859 2.257 2.316 2.257h11.712c1.31 0 2.212-.821 2.315-2.257l.821-11.456c.039-.484-.396-.88-.88-.88"></path>
</g>
</svg>
</a>
</li>
</ul>
</small>
</div>
</div>
<!-- right -->
<h2 class="text-end">
<a class="mx-2 mb-3 mb-lg-0 d-block d-md-inline-block text-white text-hover-danger text-decoration-none" href="https://www.facebook.com/FlyingV.cc" target="_blank" rel="noreferrer noopener">
<i class="fab fa-facebook-square"></i>
</a>
<a class="mx-2 d-block d-md-inline-block text-white text-hover-danger text-decoration-none" href="https://www.instagram.com/flyingv.cc" target="_blank" rel="noreferrer noopener">
<i class="fab fa-instagram"></i>
</a>
</h2>
</div>
<div class="d-flex justify-content-center justify-md-content-between align-items-center">
<span class="d-none d-md-block">
<img src="https://raw.githubusercontent.com/rayc2045/flyingv-demo/main/images/logo.svg" height="32" style="filter: contrast(0) brightness(2);" loading="lazy">
</span>
<span class="mx-4 d-none d-md-block flex-fill border-bottom"></span>
<span :style="`${windowWidth < 768 ? 'font-size: 12px;' : ''}`">
<small>FLYINGV © 2012-{{ new Date().getFullYear() }}. ALL RIGHTS RESERVED.</small>
</span>
</div>
</div>
</footer>
<!-- Loader -->
<div
v-if="isLoading"
class="vw-100 vh-100 position-fixed start-0 top-0 d-flex justify-content-center align-items-center"
style="z-index: 1000001; background-color: rgba(0, 0, 0, .1);"
@contextmenu.prevent.stop
>
<div class="spinner-border" style="color: dimgray;"></div>
</div>
</body>
</html>