-
Notifications
You must be signed in to change notification settings - Fork 1
/
form.html
297 lines (277 loc) · 16.3 KB
/
form.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
289
290
291
292
293
294
295
296
297
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="form.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div class="box">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"><img src="images/Logo only.png" alt="Logo" style="width: 50px;margin-left: 10px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse" id="navbarNavDropdown">
<ul class="nav navbar-nav mr auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Members</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Join Us</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse justify-content-end">
<ul class="nav navbar-nav mr auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Members</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Join Us</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col">
<div class="justify-content-center align-items-center">
<div class="modal-dialog">
<div class="happy">
<h2>Register</h2>
<h3>Become a Member</h3>
<br>
<p>Ready for join? Please fill the following registration form to become a member of Database Laboratory</p>
<p style="padding-top: 5px; color: #4fb677; ">SUBMISSION DEADLINE: February 25, 2019 </p>
<h5>Terms and Conditions</h5>
<p>Please, read the terms and conditions below <b>before</b> filling out the form</p>
<button type="button" class="btn btn-lg lookinside" data-toggle="modal" data-target="#lookinsides">Look In Side</button>
<h5 style="padding-top: 5px;">Additional Task</h5>
<div class="btn-group" role="group">
<button type="button" class="btn btn-unique" data-toggle="modal" data-target="#bigdata">Big Data</button>
<button type="button" class="btn btn-unique" data-toggle="modal" data-target="#product">Product</button>
<button type="button" class="btn btn-unique" data-toggle="modal" data-target="#spatial">Spatial</button>
</div>
<div class="modal fade" id="lookinsides">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modael-title">Term and Condition</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
....
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col kanan">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Registration Form</h4>
</div>
<div class="modal-body">
<div class="md-form">
<label for="Form-name">Your Name</label>
<input type="text" id="Form-name" class="form-control" placeholder="Name">
</div>
<div class="md-form">
<label for="Form-email">Your E-mail</label>
<input type="text" id="Form-email" class="form-control" placeholder="E-mail">
</div>
<div class="md-form">
<label for="Form-nim">Your Student Number (nim)</label>
<input type="text" id="Form-nim" class="form-control" placeholder="NIM">
</div>
<div class="md-form">
<label for="Form-hp">Your Phone Number</label>
<input type="text" id="Form-hp" class="form-control" placeholder="+(62)">
</div>
<div class="md-form">
<label for="Form-idLine">Your ID Line</label>
<input type="text" id="Form-idLine" class="form-control" placeholder="ID Line">
</div>
<div class="md-form">
<label for="Form-department">Your Major</label>
<input type="text" id="Form-department" class="form-control" placeholder="Major">
</div>
<div class="md-form">
<label for="Form-year">What Year Are You?</label>
<select class="custom-select" id="Form-year">
<option selected></option>
<option value="1">Class of 2016</option>
<option value="2">Class of 2017</option>
<option value="3">Class of 2018</option>
</select>
</div>
<div class="md-form" style="margin-bottom: 10px;">
<label for="Form-option1">What first group do you choose?</label>
<select class="custom-select" id="Form-option1">
<option selected>first group</option>
<option value="1">Big Data</option>
<option value="2">Spatial</option>
<option value="3">Product</option>
</select>
</div>
<div class="md-form">
<select class="custom-select" id="presentase1">
<option selected>Precentage</option>
<option>100%</option>
<option>90%</option>
<option>80%</option>
<option>70%</option>
<option>60%</option>
</select>
<label for="Form-persentase">percentage of interest</label>
<p><b>Note: </b>Persentase yang dimaksud adalah persentase minat kamu untuk bergabung pada grup pertama</p>
<hr>
</div>
<div class="md-form" style="margin-bottom: 10px;">
<label for="Form-option1">What second group do you choose?</label>
<select class="custom-select" id="Form-option2">
<option selected>Second group</option>
<option value="1">Big Data</option>
<option value="2">Spatial</option>
<option value="3">Product</option>
</select>
</div>
<div class="md-form">
<select class="custom-select" id="presentase2">
<option selected>Precentage</option>
<option>0%</option>
<option>10%</option>
<option>20%</option>
<option>30%</option>
<option>40%</option>
</select>
<label for="Form-persentase">percentage of interest</label>
<p><b>Note: </b>Persentase yang dimaksud adalah persentase minat kamu untuk bergabung pada grup kedua</p>
<hr>
</div>
<div class="md-form">
<label for="Form-motivation">Your Motivation</label>
<center><input type="file" class="filestyle" data-icon="false" id="Form-motivation"></center>
<p><b>Note:</b> Tell us about your reason want to join the database lab and what you get from the "additional task" that you have done before</p>
<p><b>Note:</b> Please make sure motivation file is less than 500KB and in <b>format</b>.pdf</p>
<hr>
</div>
<div class="md-form">
<label for="Form-photo">Your Portrait image</label>
<center><input type="file" class="filestyle" data-icon="false" id="Form-photo"></center>
<p><b>Note:</b> Please make sure image file is less than 500KB and in <b>format</b> JPG/JPEG/PNG</p>
<hr>
</div>
<div class="md-form">
<label for="Form-khs">Your KHS File</label>
<center><input type="file" class="filestyle" data-icon="false" id="Form-khs"></center>
<p><b>Note:</b> Please make sure khs file is less than 500KB and in <b>format</b>.pdf</p>
<hr>
</div>
<div class="md-form">
<label for="Form-cv">Your CV File</label>
<center><input type="file" class="filestyle" data-icon="false" id="Form-cv"></center>
<p><b>Note:</b> Please make sure cv file is less than 500KB and in <b>format</b>.pdf</p>
<hr>
</div>
<div class="md-form">
<label for="Form-ss">SCREENSHOT result of like and share</label>
<center><input type="file" class="filestyle" data-icon="false" id="Form-ss"></center>
<p><b>Note:</b> All screenshot are entered into a word file, and make sure it is less than 500KB and in the <b>format</b>.pdf</p>
<hr>
</div>
<div class="md-form">
<label for="Form-product">ADDITIONAL TASK (Product)</label>
<center><input type="file" class="filestyle" data-icon="false" id="Form-product"></center>
<p><b>Note:</b> Make sure the file is less than 2MB and in .rar / .zip format if the project
is more than 2MB: compress it fiirst on https://tinyjpg.com/ or on the img src, call through
the url whose image was uploaded at https:// ctrl .org/images</p>
<hr>
</div>
<div class="md-form">
<label for="Form-addtask">ADDITIONAL TASK</label>
<center><input type="file" class="filestyle" data-icon="false" id="Form-addtask"></center>
<p><b>Note:</b> Please make sure cv file is less than 500KB</p>
<hr>
</div>
</div>
<p><b>Note:</b> After SUBMIT, please ask our OA line: @basisdatalab to make sure your files are collected :) </p>
<div class="modal-footer">
<button type="button" class="btn">Submit</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="bigdata">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modael-title">Additional Task for Big Data</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
....
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="product">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modael-title">Additional Task for Product</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
....
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="spatial" role="document">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modael-title">Additional Task for Spatial</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
....
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>