-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhearthstone_join.html
438 lines (436 loc) · 27 KB
/
hearthstone_join.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
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="img/LOGO.gif">
<link rel="stylesheet" href="css/stone.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2016 中興校園電競賽</title>
</head>
<body class="backgroundlol">
<div class="blur">
<div class="ui page dimmer" id="predimmer">
<div class="ui container" id="alert">
<h2 class="ui inverted center aligned icon header">
<i class="send icon"></i>
Alert!
</h2>
<div class="ui stackable grid">
<div class="centered nine wide column">
<div class="ui pink large message"> If you click "Enter" to continue, it means that you have read and agreed to all the terms and regulations. </div>
</div>
</div>
<div class="ui horizontal divider"></div>
<div class="actions" style="margin-bottom: 30px;">
<a href="./hearthstone_rule.html" class="item">
<div id="no" class="ui red basic cancel inverted button">
<i class="repeat icon"></i>再看一次規章
</div>
</a>
<div id="yes" class="ui green ok inverted button">
<i class="checkmark icon"></i>Enter
</div>
</div>
<div class="ui stackable grid">
<div class="centered nine wide column">
<div class="ui blue large message"> <p>If it's not during 2015/12/28～2016/02/19,</p>the sheets you submit will be automatically ignored by our system.</div>
</div>
</div>
</div>
</div>
<div class="ui container">
<div class="ui stackable grid">
<div class="eight wide column">
<div class="ui teal inverted segment">
<h3>2016唯一信癢Χ清流盃爐石戰記大賽報名表</h3>
</div>
</div>
</div>
<form id="myform" class="ui form">
<div class="ui stackable grid">
<!-- 1 -->
<div class="row">
<div class="eight wide column">
<div class="ui raised segment">
<a class="ui red ribbon label">贏家</a>
<span class="ui teal header">就是我</span>
<div class="ui field">
<div class="ui left action input">
<a class="ui button">我叫</a>
<input type="text" name="member1_name" placeholder="">
</div>
</div>
<div class="ui field">
<div class="ui left action input">
<a class="ui button">學號</a>
<input type="text" name="member1_Sid" placeholder="">
</div>
</div>
<div class="two fields">
<div class="ui field depart-select"></div>
<div class="ui field grade-select"></div>
</div>
<div class="ui field">
<div class="ui left action input">
<a class="ui button">手機</a>
<input type="text" name="member1_Pnumber" placeholder="">
</div>
</div>
<div class="ui field">
<div class="ui left action input">
<a class="ui button">帳號</a>
<input type="text" name="member1_nick" placeholder="BattlenetID&Tag(ex:ABC#999)">
</div>
</div>
<div class="ui field">
<div class="ui left action input">
<a class="ui button">信箱</a>
<input type="text" name="member1_mail" placeholder="請填常用E-mail喔！">
</div>
</div>
<div class="ui field">
<div class="ui left action input">
<a class="ui button">臉書</a>
<input type="text" name="member1_fb" placeholder="請填臉書帳號">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="eight wide column">
<div id="lolSubmit" class="ui submit button " style="width: 162px;">我填完了</div>
</div>
</div>
</div>
<div class="ui stackable grid">
<div class="row">
<div class="sixteen wide column">
<div class="ui error message"></div>
</div>
</div>
</div>
</form>
<!-- footer segment -->
<div class="ui inverted vertical footer segment">
<div class="ui center aligned container">
<div class="ui inverted section divider"></div>
<div class="ui stackable inverted divided grid">
<div class="three wide column">
<h4 class="ui inverted header">其他報名表</h4>
<div class="ui inverted link list">
<a class="item" href="./LOL_join.html">給我LOL!</a>
<a class="item" href="./hearthstone_join.html">爐石戰記!</a>
<a class="item" href="./midroad.html">中路殺殺殺</a>
<a class="item" href="./tinyfunny.html">小小小遊戲</a>
<a class="item" href="./index.html">回首頁</a>
</div>
</div>
<div class="two wide column">
<h4 class="ui inverted header">主辦單位</h4>
<div class="ui inverted link list">
<a href="https://www.facebook.com/SA.Physics.NCHU/" target="_blank" class="item"><img src="img/PHY.jpg" data-title="主辦單位" data-content="中興大學物理系學會FB" class="pop" class="ui circular image" style="max-width: 59%;" alt="phy"></a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header">贊助商</h4>
<div class="ui inverted link list">
<a href="#" class="item">twitch</a>
<a href="#" class="item">Garena</a>
<a href="#" class="item">閃電狼</a>
<a href="#" class="item">暴雪娛樂</a>
<a href="#" class="item">萬代福影城</a>
</div>
</div>
<div class="two wide column">
<h4 class="ui inverted header"><span style="font-family:comic sans ms,cursive">twitch連結</span></h4>
<div>
<a href="http://www.twitch.tv/esports_nchu/profile0" target="_blank"><img src="http://i.imgur.com/KR58Tst.png" style="max-width: 60%;" alt="twitch" class="twit"></a>
</div>
</div>
<div class="six wide column">
<h4 class="ui inverted header">協辦單位</h4>
<a href="https://goo.gl/PNrCCW" target="_blank" class="item"><img src="img/SG.jpg" data-title="協辦單位" data-content="中興大學學生會FB" class="pop" style="max-width: 16%;" alt="SG"></a>
<a href="https://goo.gl/pxUPSj" target="_blank" class="item"><img src="img/EE.jpg" data-title="協辦單位" data-content="中興大學電機系學會FB" class="pop" style="max-width: 17.2%;" alt="EE"></a>
<a href="https://goo.gl/2qO4x3" target="_blank" class="item"><img src="img/AM.jpg" data-title="協辦單位" data-content="中興大學應數系學會FB" class="pop" style="max-width: 16%;" alt="AM"></a>
</div>
</div>
<div class="ui inverted section divider"></div>
<!-- <a href="http://nchuit.cc" target="_blank"><img src="http://i.imgur.com/WZsKt8x.png?1" class="ui centered mini image"></a> -->
<div class="ui horizontal inverted small divided link list">
<a class="item" href="http://nchuit.cc" target="_blank"><span style="font-family:comic sans ms,cursive">清流技術組 X NCHU IT</span></a>
<ul>
<li><a href="https://www.facebook.com/2016%E4%B8%AD%E8%88%88%E6%A0%A1%E5%9C%92%E9%9B%BB%E7%AB%B6-%E6%B8%85%E6%B5%81%E7%9B%83-NCHU-ES-921008901320491/?fref=nf" target="_blank"><div class="animation_button grey"><i class="fa fa-facebook-official fa-2x"></i><br />FB粉絲頁</div></a></li>
<li><a href="mailto:a0204538538@gmail.com"><div class="animation_button grey"><i class="fa fa-envelope fa-2x"></i><br />Contact</div></a></li>
<li><a href="http://nchuit.cc" target="_blank"><div class="animation_button grey"><img src="http://i.imgur.com/WZsKt8x.png?1" style="max-width: 66%;"></i><br />技術組</div></a></li>
</ul>
</div>
</div>
</div>
<div style="display: none;">
<select class="ui search fluid selection dropdown" id="depart-tmpl">
<option value="">搜尋系所or碩博班直接新增</option>
<option value="文學院">文學院</option>
<option value="管理學院">管理學院</option>
<option value="農業暨自然資源學院">農業暨自然資源學院</option>
<option value="中國文學系學士班">中國文學系學士班</option>
<option value="外國語文學系學士班">外國語文學系學士班</option>
<option value="歷史學系學士班">歷史學系學士班</option>
<option value="財務金融學系學士班">財務金融學系學士班</option>
<option value="企業管理學系學士班">企業管理學系學士班</option>
<option value="法律學系學士班">法律學系學士班</option>
<option value="會計學系學士班">會計學系學士班</option>
<option value="資訊管理學系學士班">資訊管理學系學士班</option>
<option value="景觀與遊憩學士學位學程">景觀與遊憩學士學位學程</option>
<option value="生物科技學士學位學程">生物科技學士學位學程</option>
<option value="國際農企業學士學位學程">國際農企業學士學位學程</option>
<option value="農藝學系學士班">農藝學系學士班</option>
<option value="園藝學系學士班">園藝學系學士班</option>
<option value="森林學系林學組學士班">森林學系林學組學士班</option>
<option value="森林學系木材科學組學士班">森林學系木材科學組學士班</option>
<option value="應用經濟學系學士班">應用經濟學系學士班</option>
<option value="植物病理學系學士班">植物病理學系學士班</option>
<option value="昆蟲學系學士班">昆蟲學系學士班</option>
<option value="動物科學系學士班">動物科學系學士班</option>
<option value="獸醫學系學士班A">獸醫學系學士班A</option>
<option value="獸醫學系學士班B">獸醫學系學士班B</option>
<option value="土壤環境科學系學士班">土壤環境科學系學士班</option>
<option value="生物產業機電工程學系學士班">生物產業機電工程學系學士班</option>
<option value="水土保持學系學士班">水土保持學系學士班</option>
<option value="食品暨應用生物科技學系學士班">食品暨應用生物科技學系學士班</option>
<option value="行銷學系學士班">行銷學系學士班</option>
<option value="化學系學士班">化學系學士班</option>
<option value="生命科學系學士班">生命科學系學士班</option>
<option value="應用數學系學士班">應用數學系學士班 A</option>
<option value="應用數學系學士班B">應用數學系學士班B</option>
<option value="物理學系一般物理組學士班">物理學系一般物理組學士班</option>
<option value="物理學系光電物理組學士班">物理學系光電物理組學士班</option>
<option value="資訊科學與工程學系學士班">資訊科學與工程學系學士班</option>
<option value="學士後太陽能光電系統應用學士學位學程">學士後太陽能光電系統應用學士學位學程</option>
<option value="機械工程學系學士班A">機械工程學系學士班A</option>
<option value="機械工程學系學士班B">機械工程學系學士班B</option>
<option value="土木工程學系學士班 A">土木工程學系學士班A</option>
<option value="土木工程學系學士班 B">土木工程學系學士班B</option>
<option value="環境工程學系學士班">環境工程學系學士班</option>
<option value="電機工程學系學士班 A">電機工程學系學士班A</option>
<option value="電機工程學系學士班 B">電機工程學系學士班B</option>
<option value="化學工程學系學士班">化學工程學系學士班</option>
<option value="材料科學與工程學系學士班">材料科學與工程學系學士班</option>
</select>
<select class="ui search fluid selection dropdown" id="grade-tmpl">
<option value="">搜尋系所or碩博班直接新增</option>
<option value="1">一年級</option>
<option value="2">二年級</option>
<option value="3">三年級</option>
<option value="4">四年級</option>
<option value="5">五年級</option>
</select>
</div>
<div class="ui page dimmer" id="dimmer">
<div class="content">
<div class="center">
<div class="ui text loader">Sending...</div>
</div>
</div>
</div>
<div class="ui modal" id="successShow" >
<i class="close icon"></i>
<div class="header">
非常感謝您
</div>
<div class="image content">
<div class="ui medium image">
<img src="http://i.imgur.com/YPO1LEh.gif">
</div>
<div class="description">
<div class="ui header">Thank you!</div>
<p>我們已經收到您的回覆.</p>
<p>接下來您需要做的是多多練習喔！</p>
<p>我們將在 104 學年度下學期開始後通知各位進行繳費，</p>
<p>祝福您得冠軍呦^.^</p>
</div>
</div>
<div class="actions">
<div class="ui teal buttons">
<div class="ui button">提交其他報名表</div>
<div class="ui combo bottom right pointing dropdown icon button" id="combo_dropdown">
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="./LOL_join.html"><i class="pointing right icon"></i>就愛LOL^.^</a>
<div class="divider"></div>
<a href="./midroad.html" class="item"><i class="pointing right icon"></i>中路殺殺殺</a>
<div class="divider"></div>
<a href="./hearthstone_join.html" class="item"><i class="pointing right icon"></i>爐石出牌囉</a>
<div class="divider"></div>
<a href="./tinyfunny.html" class="item"><i class="pointing right icon"></i>小小小遊戲</a>
</div>
</div>
</div>
<a href="./index.html" class="ui positive right labeled icon button">
回競賽首頁
<i class="home icon"></i>
</a>
</div>
</div>
<script>
jQuery(document).ready(function($) {
$('#predimmer')
.modal('setting', 'closable', false)
.modal('show')
// fill up select and semantic dropdown init
var depart_tmpl = $('#depart-tmpl');
$('.depart-select').each(function(i,e){
depart_tmpl.clone().removeAttr('id').attr('name','member' + (i + 1) + "_dep").appendTo($(e));
});
var grade_tmpl = $('#grade-tmpl');
$('.grade-select').each(function(i,e){
grade_tmpl.clone().removeAttr('id').attr('name','member' + ( i + 1 ) + "_grade").appendTo($(e));
});
$('select').dropdown({
allowAdditions: true,
message: {
addResult : '其他: <b>{term}</b>',
},
});
// form field rule
var player_rule_fields = {
};
for (var i = 1; i <= 1; i++) {
player_rule_fields['member' + i + '_name'] = {
identifier: 'member' + i +'_name',
rules: [
{
type : 'empty',
prompt : 'Please enter your 姓名',
}
]
};
player_rule_fields['member' + i + '_Sid'] = {
identifier: 'member' + i +'_Sid',
rules: [
{
type : 'empty',
prompt : 'Please enter your 學號',
}
]
};
player_rule_fields['member' + i + '_Pnumber'] = {
identifier: 'member' + i +'_Pnumber',
rules: [
{
type : 'empty',
prompt : 'Please enter your 手機',
}
]
};
player_rule_fields['member' + i + '_nick'] = {
identifier: 'member' + i +'_nick',
rules: [
{
type : 'empty',
prompt : 'Please enter your 帳號',
}
]
};
player_rule_fields['member' + i + '_dep'] = {
identifier: 'member' + i +'_dep',
rules: [
{
type : 'empty',
prompt : 'Please select your 系所',
}
]
};
player_rule_fields['member' + i + '_grade'] = {
identifier: 'member' + i +'_grade',
rules: [
{
type : 'empty',
prompt : 'Please select your 年級',
}
]
};
player_rule_fields['member' + i + '_mail'] = {
identifier: 'member' + i +'_mail',
rules: [
{
type : 'email',
prompt : 'Please enter your 伊媚兒 correctly.',
}
]
};
player_rule_fields['member' + i + '_fb'] = {
identifier: 'member' + i +'_fb',
rules: [
{
type : 'empty',
prompt : 'Please enter your 臉書帳號',
}
]
};
}
var submitfun = function(event){
$('#dimmer').dimmer('show');
// console.log(event);
event.preventDefault();//防止做預設的動作
var members = [];
for (var i = 1; i <= 1; i++) {
members.push({
name: jQuery("input[name=member" + i +"_name]").val(),
dep: jQuery("select[name=member" + i +"_dep]").val(),
grade: jQuery("select[name=member" + i +"_grade]").val(),
sid: jQuery("input[name=member" + i +"_Sid]").val(),
pnumber: jQuery("input[name=member" + i +"_Pnumber]").val(),
nick: jQuery("input[name=member" + i +"_nick]").val(),
mail: jQuery("input[name=member" + i +"_mail]").val(),
fb: jQuery("input[name=member" + i +"_fb]").val()
});
}
var inputData = {
members: members
};
$('#lolSubmit').addClass("disabled");
var api = "https://script.google.com/macros/s/AKfycbyiODubufuxi9nVgUh2Kwy0VzTktTWoJ7IvDpMFhfSuP4gk5_yA/exec";
$.ajax({
url: api,
dataType: 'jsonp',
data: {data: JSON.stringify(inputData), callback: "submit_callback"},
})
.done(function(data) {
console.log(data);
$('#successShow').modal("show");
console.log("show");
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
$('#dimmer').dimmer('hide');
$('#lolSubmit').removeClass("disabled");
});
return false;//多重防止
};
$('#myform').form({
on: 'blur',
fields: player_rule_fields,
onSuccess: submitfun
});
$('#input_6').popup({
on: 'focus'
});
$('#combo_dropdown')
.dropdown({action: 'combo'});
});
</script>
</div>
</div>
</body>
</html>