-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·264 lines (246 loc) · 13.2 KB
/
index.html
File metadata and controls
executable file
·264 lines (246 loc) · 13.2 KB
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
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/layouts/tanks.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Tanks For Waiting. Your E-queueing solution.">
<link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
<title>Tanks For Waiting!</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<!--<![endif]-->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/layouts/marketing-old-ie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="css/layouts/marketing.css">
<!--<![endif]-->
</head>
<body>
<div class="everything">
<!-- <div class="header">
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
<a class="pure-menu-heading" href="#">Tanks For Waiting.</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#story" class="pure-menu-link">Our Story</a></li>
<li class="pure-menu-item"><a href="#about" class="pure-menu-link">Features</a></li>
<li class="pure-menu-item"><a href="#contact" class="pure-menu-link">Get in Contact</a></li>
<li class="pure-menu-item"><a href="#bio" class="pure-menu-link">About Us</a></li>
<li class="pure-menu-item"><a href="#acknowledgements" class="pure-menu-link">Acknowledgements</a></li>
</ul>
</div>
</div> -->
<div class="splash-container">
<div class="splash">
<div class="tfw-game" ng-app="tanks-for-waiting" ng-controller="GameController">
<div class="grid">
<div class="instructions col-1-3" ng-show="gameRunning">
<h4 class="instructions-headers">Controls</h4>
<p class="instructions-para">
Use the arrow keys to control the direction and movement of your tank.
</p>
<br>
<br>
<h4 class="instructions-headers">Instructions</h4>
<p class="instructions-para">
Maneuver about the map and run over targets to score points.
</p>
</div>
<div class="col-2-3">
<div class="tfw-score">
<p ng-show="gameRunning">Player Score:
<span ng-show="gameRunning">{{score.$value}}</span>
</p>
</div>
<div class="tfw-canvas" ng-show="gameRunning">
<canvas id="screen" width="500" height="500" style="background-color: black"></canvas>
</div>
</div>
</div>
<div ng-hide="gameRunning">
<img class="pure-img splash-head" src="img/tankslogo.png"></img>
<p class="splash-subhead is-center">
Blow your waiting times away!
<br>
<br>
<a href="#" id="switch" class="pure-button pure-button-primary is-center" ng-click="startGame()"><i id="spin-one" class="fa fa-cog fa-spin hide-me"></i> Try the game! <i id="spin-two" class="fa fa-cog fa-spin hide-me"></i></a>
<a href="https://youtu.be/MPjyhy8zrHg" id="mobile" class="pure-button pure-button-primary is-center">View demo!</a>
</p>
</div>
</div>
</div>
</div>
<a name="story"></a>
<div class="content-wrapper">
<div class="ribbon-teal l-box-lrg pure-g">
<h2 class="content-head content-head-ribbon">Our Story</h2>
<div class="pure-u-1">
<p class="story">
Tanks For Waiting is the answer to your online support queue woes. An HTML5 game that can be embedded directly into your support page, Tanks For Waiting provides much needed relief for customers while they wait for the next available technician. Next time
you have a support backlog just tell your customers "Tanks For Waiting".
</p>
</div>
</div>
<a name="about"></a>
<div class="ribbon-orange l-box-lrg pure-g">
<h2 class="content-head content-head-ribbon">Features</h2>
<div class="pure-g">
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<h3 class="content-subhead">
<img class="content-subhead pure-img-responsive icon" src="img/noun_38901_cc.png"></img>Simple to play
</h3>
<p>
The retro design and simple controls makes Tanks For Waiting a great fit for people with all levels of technical ability.
</p>
</div>
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<h3 class="content-subhead">
<img class="content-subhead pure-img-responsive icon" src="img/noun_38901_cc.png"></img>Happy Customers
</h3>
<p>
After playing a round or two of Tanks For Waiting, customers will forget they were even waiting. Happier customers will lead to more productive support sessions.
</p>
</div>
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<h3 class="content-subhead">
<img class="content-subhead pure-img-responsive icon" src="img/noun_38901_cc.png"></img>Low response times
</h3>
<p>
By keeping the customer on the help page, your technicians can spend less time waiting for customers to begin the conversation and spend more time creating customer solutions.
</p>
</div>
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<h3 class="content-subhead">
<img class="content-subhead pure-img-responsive icon" src="img/noun_38901_cc.png"></img>Pricing that works
</h3>
<p>
We are commited to finding a pricing plan that works for you.
<a class="non-underlined-link" id="calltoaction" href="#contact">Get in touch</a> to discuss your plan today!
</p>
</div>
</div>
</div>
<a name="contact"></a>
<div class="ribbon-teal l-box-lrg">
<h2 class="content-head content-head-ribbon">Get in Contact</h2>
<div class="pure-g">
<div class="l-box-lrg pure-u-1 pure-u-md-1-2">
<div class="content-subhead">
<form class="pure-form pure-form-stacked" action="https://docs.google.com/forms/d/1keKLHX6Cj48_8E7tUfeZXrmq5lRXoi7cACr6ZCdtLAY/formResponse" method="POST">
<fieldset>
<label for="entry.297707843">Your Name</label>
<input type="text" name="entry.297707843" value="" class="entry" id="entry_297707843" dir="auto" aria-label="Name">
<label for="entry.12434793">Your Company</label>
<input type="text" name="entry.12434793" value="" class="entry" id="entry_12434793" dir="auto" aria-label="Company">
<label for="entry.921176545">Your Email</label>
<input type="text" name="entry.921176545" value="" class="ss-q-short entry" id="entry_921176545" dir="auto" aria-label="Your Email Address" aria-required="true" required="" pattern=".*@..*">
<label for="entry.1935973671">Your Message </label>
<textarea name="entry.1935973671" rows="4" cols="" class="ss-q-long entry" id="entry_1935973671" dir="auto" aria-label="Message" aria-required="true" required=""></textarea>
<button type="submit" class="pure-button pure-button-primary">Send us a message</button>
</fieldset>
</form>
</div>
</div>
<div class="l-box-lrg pure-u-1 pure-u-md-1-2">
<div class="content-subhead">
<img id="target-picture" class="pure-img-responsive" src="img/tank-target.png"></img>
</div>
</div>
</div>
</div>
<a name="bio"></a>
<div class="ribbon-orange l-box-lrg pure-g">
<h2 class="content-head content-head-ribbon">About us</h2>
<div class="pure-g">
<div class="l-box pure-u-1 pure-u-md-1-3 pure-u-lg-1-6">
<a href="https://github.com/Shea-Wolfe" title="Will Butts aka. Shea_Wolfe on Github">
<img class="pure-img-responsive" width="200" height="200" src="https://avatars0.githubusercontent.com/u/13772101?v=3&s=460"></img>
</a>
</div>
<div class="l-box pure-u-1 pure-u-md-2-3 pure-u-lg-1-3">
<p>
William Butts is a Python engineer with a love of list comprehensions and games. Every new challenge is a puzzle and he won't stop until everything is solved.
</p>
<div class="pure-g">
<div class="pure-1-3">
<a href="mailto:wbutts1023@gmail.com">
<img class="pure-img mail" src="img/mail.png" width="32px" height="32px"></img>
</a>
</div>
<div class="pure-1-3">
<a href="https://github.com/Shea-Wolfe" title="Will Butts aka. Shea_Wolfe on Github">
<img class="pure-img github" src="img/GitHub-Mark-32px.png"></img>
</a>
</div>
<div class="pure-1-3">
<a href="https://www.linkedin.com/in/william-butts-60124327" title="Will Butts on Linkedin">
<img class="pure-img linkedin" src="img/In-2C-34px-R.png"></img>
</a>
</div>
</div>
</div>
<div class="l-box pure-u-1 pure-u-md-1-3 pure-u-lg-1-6">
<a href="https://github.com/jmcreasman" title="Jonathan Creasman on Github">
<img class="pure-img-responsive" width="200" height="200" src="https://avatars2.githubusercontent.com/u/13600903?v=3&s=460"></img>
</a>
</div>
<div class="l-box pure-u-1 pure-u-md-2-3 pure-u-lg-1-3">
<p>
Jonathan Creasman is a Front-End engineer with a passion for learning and discovery. When he’s not buried deep in JavaScript he enjoys studying early American history and traveling to new places.
</p>
<div class="pure-g">
<div class="pure-1-3">
<a href="mailto:jmcreasman89@gmail.com">
<img class="pure-img mail" src="img/mail.png" width="32px" height="32px"></img>
</a>
</div>
<div class="pure-1-3">
<a href="https://github.com/jmcreasman" title="Jonathan Creasman on Github">
<img class="pure-img github" src="img/GitHub-Mark-32px.png"></img>
</a>
</div>
<div class="pure-1-3">
<a href="https://www.linkedin.com/in/jonathan-creasman-39a04648" title="Jonathan Creasman on Linkedin">
<img class="pure-img linkedin" src="img/In-2C-34px-R.png"></img>
</a>
</div>
</div>
</div>
</div>
</div>
<a name="acknowledgements"></a>
<div class="ribbon-teal l-box-lrg pure-g">
<h2 class="content-head content-head-ribbon">Acknowledgements</h2>
<div class="pure-u-1">
<ul class="acknowledgements">
<li>The Iron Yard Durham</li>
<li>David Rogers: Primary project supervisor </li>
<li>Danai Adkisson: Secondary project supervisor </li>
<li>Mary Rose Cook: <a href=https://vimeo.com/105955605 title="Mary live-codes a JavaScript game from scratch">Video tutorial</a> introducing game concepts in JavaScript <a style="font-family:Press Start 2P" href=https://vimeo.com/105955605 title="Mary live-codes a JavaScript game from scratch">👾</a></li>
<li><a href="http://thelivingtree.deviantart.com/gallery/">Timothy Creasman</a>: Tanks For Waiting logo design</li>
<li><a href=https://soundcloud.com/dr-lakata>Dr. Lakata</a>: Tanks for Waiting Trailer Music</li>
<li>Tank Icon by Renan Ferreira Santos from the Noun Project</li>
</ul>
</div>
</div>
<div class="footer l-box is-center">
Tanks-For-Waiting! Built as part of The Iron Yard Durham Cohort 5.
</div>
</div>
</div>
</body>
<script src="https://tanks-for-waiting.firebaseapp.com/bower_components/jquery/dist/jquery.js"></script>
<script src="https://tanks-for-waiting.firebaseapp.com/bower_components/angular/angular.js"></script>
<script src="https://tanks-for-waiting.firebaseapp.com/bower_components/angular-route/angular-route.js"></script>
<script src="https://tanks-for-waiting.firebaseapp.com/bower_components/firebase/firebase.js"></script>
<script src="https://tanks-for-waiting.firebaseapp.com/bower_components/angularfire/dist/angularfire.min.js"></script>
<script src="https://tanks-for-waiting.firebaseapp.com/js/main.js"></script>
<script src="https://tanks-for-waiting.firebaseapp.com/js/gameController.js"></script>
<script src="main.js"></script>
</html>