-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
132 lines (132 loc) · 4.4 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
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ClickClick</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="welcome_Modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">歡迎來到狂按遊戲!</h3>
</div>
<div class="modal-body">
<h4>遊戲說明：</h4>
<hr>
<p>使用方向鍵來指定每隻貓一個字母，再按下Enter開始遊戲</p>
<p>先達到100點擊數者勝^_^</p>
<br>
<h4><strong>What's more?</strong></h4>
<hr>
<p>This webpage also indicates the implementation of HTTPs functionality.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Okay</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="pre_game" class="game-page" tabindex="0">
</div>
<div id="select_cat" class="game-page" tabindex="0">
<div class="container">
<div class="col-md-3" id="cat-col-1">
<div class="div-cat-img" id="cat-1">
<div class="img-circle div-cat-mask" id="cat-mask-1">
<p></p>
</div>
</div>
</div>
<div class="col-md-3" id="cat-col-2">
<div class="div-cat-img" id="cat-2">
<div class="img-circle div-cat-mask" id="cat-mask-2">
<p></p>
</div>
</div>
</div>
<div class="col-md-3" id="cat-col-3">
<div class="div-cat-img" id="cat-3">
<div class="img-circle div-cat-mask" id="cat-mask-3">
<p></p>
</div>
</div>
</div>
<div class="col-md-3" id="cat-col-4">
<div class="div-cat-img" id="cat-4">
<div class="img-circle div-cat-mask" id="cat-mask-4">
<p></p>
</div>
</div>
</div>
</div>
</div>
<div id="game_start" class="game-page" tabindex="0">
<div class="container">
<div class="row">
<div class="col-md-6" id="cat-col-1">
<div class="col-md-6">
<div class="div-cat-img" id="cat-1">
</div>
</div>
<div class="num-click" id="cat-num-1">
</div>
<div class="div-cat-background" id="cat-background-1">
<p></p>
</div>
</div>
<div class="col-md-6" id="cat-col-2">
<div class="col-md-6">
<div class="div-cat-img" id="cat-2">
</div>
</div>
<div class="num-click" id="cat-num-2">
</div>
<div class="div-cat-background" id="cat-background-2">
<p></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6" id="cat-col-3">
<div class="col-md-6">
<div class="div-cat-img" id="cat-3">
</div>
</div>
<div class="num-click" id="cat-num-3">
</div>
<div class="div-cat-background" id="cat-background-3">
<p></p>
</div>
</div>
<div class="col-md-6" id="cat-col-4">
<div class="col-md-6">
<div class="div-cat-img" id="cat-4">
</div>
</div>
<div class="num-click" id="cat-num-4">
</div>
<div class="div-cat-background" id="cat-background-4">
<p></p>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade bs-example-modal-sm" tabindex="-1" id="register" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body" style="text-align:center;">
<button id="start_btn" type="button" class="btn btn-primary btn-lg">Start ?</button>
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>