This repository has been archived by the owner on May 25, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (111 loc) · 4.23 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Chih-Yung Liang">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Are you the matchmaker?</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/game.css">
</head>
<body>
<div id="first-page">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
<img class="img-responsive logo" src="img/logo.png">
</div>
</div>
<p class="lead subtitle text-center">
交大外文105級外文公演
</p>
<p class="text-center" id="big-text">
Are you the matchmaker?
</p>
<form method="POST" action="#" id="name-form">
<div class="row" id="name-prompt">
<div class="col-md-2 col-md-offset-3 col-xs-4 col-xs-offset-1 text-right">
挑戰者：
</div>
<div class="col-md-4 col-xs-5">
<input type="text" id="player-name" required autofocus>
</div>
</div>
<p class="text-center">
<button type="submit" class="btn" id="start-btn">Start</button>
</p>
</form>
</div>
</div>
<div id="second-page">
<div class="row">
<div class="col-sm-2 col-sm-offset-1 hidden-xs">
<img class="img-responsive logo" src="img/logo.png">
</div>
<div class="col-md-12 col-sm-6 col-xs-12 text-center"><span id="counter">0</span>seconds</div>
</div>
<div class="container">
<div id="card-panel">
</div>
</div>
</div>
<div id="third-page">
<div class="row">
<div class="col-sm-2 col-sm-offset-1 col-xs-10 col-xs-offset-1">
<img class="img-responsive logo" src="img/logo.png">
</div>
</div>
<div class="container">
<p class="text-center" id="name-congra">恭喜<span id="show-name">XXX</span></p>
<p class="text-center" id="finish-mission">以<span id="result-second">25</span>秒完成任務</p>
<p class="text-center" id="are-matchmaker">記憶達人! You are the matchmaker!</p>
<p class="text-center" id="back-to-page">回粉絲專頁參與抽獎!</p>
<p class="text-center"><a class="btn btn-success" id="grade-download" download="matchmaker.png" target="_blank">下載我的成績單</a></p>
<p class="text-center" id="page-link"><a href="https://www.facebook.com/nctufl105/"><img id="FB-img" src="img/FB.png">交大外文105級畢業公演《緣來愛上你》</p></a>
<div class="row">
<div class="col-sm-2 col-sm-offset-9 col-xs-4 col-xs-offset-4" id="polka">
<img src="img/polka_cc.png" class="img-responsive">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<script src="js/jquery.tinytimer.min.js"></script>
<script src="js/card-game.js"></script>
<script>
$(document).ready(function() {
$('#second-page, #third-page').hide()
cardGame.prepare()
$('#player-name').tooltip({
title: "請輸入您的名字",
trigger: "manual"
})
$('#name-form').submit(function() {
event.preventDefault()
if ($('#player-name').val() == '') {
$('#player-name').tooltip('show')
return
}
$('#first-page').slideUp(function() {
$('#second-page').slideDown(function() {
cardGame.start()
})
})
})
var music = $('<audio autoplay loop>').appendTo('body').html(
'<source src="music/Denis-Murphys-Polka_CC.mp3" type="audio/mp3">'
)[0].load()
})
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-70349839-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>