-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
223 lines (196 loc) · 11.1 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
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
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<title>Tweety | A Twitter Game</title>
<meta name="description" content="A tough but fun Twitter game where you have to match celebrities to their tweets.">
<meta name="keywords" content="Twitter,tweety,midnightjabber,celebs,celebrities,game,match">
<link rel="stylesheet" href="libs/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="libs/font-awesome/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<script src="libs/jquery/jquery.min.js"></script>
<link rel="stylesheet" href="css/cssShake.css">
<link rel="stylesheet" href="css/TimeCircles.css">
<!-- Twitter Emoji Rendering Library -->
<script src="https://twemoji.maxcdn.com/twemoji.min.js"></script>
<script src="js/TimeCircles.js"></script>
<script src="js/analytics.js"></script>
<!--<script src="js/twitterApi.js"></script>-->
<link rel="stylesheet" href="main.css">
<script src="main.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.18/dist/jquery.flip.min.js"></script>
</head>
<body>
<audio class="incorrectSound" preload>
<source src="audio/incorrect.mp3" type="audio/mp3">
</audio>
<audio class="correctSound" preload>
<source src="audio/correct.mp3" type="audio/mp3">
</audio>
<div class="timer" data-timer="120"></div>
<p class="score"></p>
<div id="pageScroll">
<div class="section">
<span class="beta">beta</span>
<h1 class="gameHeading"><span class="headingAnimation">Tweety | A Twitter Game</span></h1>
<div class="initialButtons">
<span class="initialButton startButton fa fa-play"></span>
</div>
<span class="animated bounce infinite downArrow fa fa-angle-down"></span>
</div>
<div class="section">
<h1 class="ruleHeading"><span class="wrapLines">Stats</span></h1>
<div class="row">
<div class="statsColumn column-1">
<span class="statsLogos fa fa-list-ol"></span>
<h2>Games Played</h2>
<span class="value"></span>
</div>
<div class="statsColumn column-2">
<span class="statsLogos fa fa-bar-chart"></span>
<h2>Highest Score</h2>
<span class="value"></span>
</div>
<div class="statsColumn column-3">
<span class="statsLogos fa fa-clock-o"></span>
<h2>Fastest Game</h2>
<span class="value"></span>
</div>
</div>
</div>
<div class="section profileSection">
<h1 class="ruleHeading .profileHeading"><span class="wrapLines">Your Profile</span></h1>
<div class="loginProfile">
</div>
</div>
<div class="section">
<h1 class="ruleHeading"><span class="wrapLines">Selection</span></h1>
<div class="flipCard">
<div class="front">
<img src="images/selection.gif">
</div>
<div class="back">
<ul>
<li>Try to match the Celeb/Personality with their tweet.</li>
<li>Click on any card to select it.</li>
<li>Clicking outside a card will de-select the selected card.</li>
<li><strong>Beware</strong>, If you click on a Celeb first and then on a Tweet or vice-versa, it will count as a pair selection.</li>
<li>There is no restriction on click direction. You can click a Celeb first and then a tweet or a Tweet First and then a Celeb.</li>
</ul>
</div>
</div>
</div>
<div class="section">
<h1 class="ruleHeading"><span class="wrapLines">Correct Selection</span></h1>
<div class="flipCard">
<div class="front">
<img src="images/correctSelection.gif">
</div>
<div class="back">
<ul>
<li>Selecting two cards from different columns consecutively will count as a pair selection.</li>
<li>If the selection is <span class="green">correct</span>, the highlighted pair will gain a <span class="green">green</span> border signalling that these have been matched correctly.</li>
<li>For selecting a correct pair you will gain some points. Duh!</li>
<li>You will get <span class="green">BONUS</span> points for correctly selecting pairs consecutively.</li>
<li>These points are based on the time you have left and the number of correct matches till now.</li>
<li>This means, <i><u>a correct selection at 118 seconds will gain alot more points than one at 90 seconds</u></i>.</li>
<li>Once a correct pair has been matched, these cards are not clickable/selectable in any manner.</li>
</ul>
</div>
</div>
</div>
<div class="section">
<h1 class="ruleHeading"><span class="wrapLines">Incorrect Selection</span></h1>
<div class="flipCard">
<div class="front">
<img src="images/incorrectSelection.gif">
</div>
<div class="back">
<ul>
<li>If the selection is <span class="red">incorrect</span>, the highlighted pair will gain a <span class="red">red</span> border and shake vigourously, signalling that these have been matched incorrectly.</li>
<li>For selecting an incorrect pair <b><i><u>There is a penalty!</u></i></b>.</li>
<li><b><span class="red">For every incorrect selection, you lose 10 seconds</span></b>.</li>
<li>Be careful, you score is dependant on the time you have left and therefore technically, every incorrect selection loses you potential points. </li>
</ul>
</div>
</div>
</div>
</div>
<!-- <table class="table">
<thead>
<tr>
<th>User</th>
<th>tweet</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="userCard">
<div class="userImg">
<img src="https://pbs.twimg.com/profile_images/611819905227186176/Pns9Sq9g.jpg" alt="">
</div>
<div class="userInfo">
<div class="userName">Iggy</div>
<div class="userHandle">@Iggy</div>
</div>
<div class="followButton">
<div class="followContent">
<a href="https://twitter.com/intent/follow?screen_name=@IGGYAZALEA">
<span class="fa fa-twitter"></span>
<p class="text">Follow</p>
</a>
</div>
</div>
</div>
</td>
<td>
<div class="tweetCard">
<p>They should have always spelt Italy EATALY cause after two days off there I'm feeling like this (sorry Lyon)
<div class="imgLink linkOne">http://t.co/6GwiY9QqNR</div>
<div class="imgLink linkTwo">http://t.co/6GwiY9QqNR</div>
<img class="tweetImg imgOne" width="450px" style="display: none;" height="auto" src="http://pbs.twimg.com/media/B-TqQ-sCYAAPC4C.jpg">
<img class="tweetImg imgTwo" style="display: none;" width="450px" height="auto" src="https://pbs.twimg.com/profile_images/608889976084832256/HX_nRhqq.jpg">
</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="userCard">
<div class="userImg">
<img src="https://pbs.twimg.com/profile_images/611819905227186176/Pns9Sq9g.jpg" alt="">
</div>
<div class="userInfo">
<div class="userName">Iggy</div>
<div class="userHandle">@Iggy</div>
</div>
<div class="followButton">
<div class="followContent">
<a href="https://twitter.com/intent/follow?screen_name=@IGGYAZALEA">
<span class="fa fa-twitter"></span>
<p class="text">Follow</p>
</a>
</div>
</div>
</div>
</td>
<td>
<div class="tweetCard">
<p>They should have always spelt Italy EATALY cause after two days off there I'm feeling like this (sorry Lyon)
<div class="imgLink linkOne">http://t.co/6GwiY9QqNR</div>
<div class="imgLink linkTwo">http://t.co/6GwiY9QqNR</div>
<img class="tweetImg imgOne" width="450px" style="display: none;" height="auto" src="http://pbs.twimg.com/media/B-TqQ-sCYAAPC4C.jpg">
<img class="tweetImg imgTwo" style="display: none;" width="450px" height="auto" src="https://pbs.twimg.com/profile_images/608889976084832256/HX_nRhqq.jpg">
</p>
</div>
</td>
</tr>
</tbody>
</table> -->
<span class="addTableHere"></span>
</body>
</html>