-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·212 lines (208 loc) · 10.2 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
<!DOCTYPE html>
<html>
<head>
<title>T3 - The Tic Tac Toe Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Do not add `link` tags-->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!-- Do not add `script` tags-->
<script src="public/vendor.js" type="text/javascript" charset="utf-8" defer></script>
<script src="public/application.js" type="text/javascript" charset="utf-8" defer></script>
</head>
<body class="container-fluid"> <!-- Start of main body -->
<div class="row"> <!-- Start of title div -->
<div class="col-xs-12">
<h1 class="welcome">Welcome to T3!</h1>
<h2 class="sub-welcome">The Frinkiac-7 Game of Tic-Tac-Toe!</h2>
</div>
</div> <!-- End of title div -->
<div> <!-- Start of welcome div -->
<div class="row">
<div class="col-md-12">
<p class="intro">
<img class="frink" src="https://i.imgur.com/3ifSZOb.png" alt="Professor Frink"> T3 is a tic-tac-toe (3 Ts...T3...get it?) game which pays homage to Professor John I.Q. Nerdelbaum Frink Jr. and one of his greatest creations which was the <strong>Frinkiac-7</strong> mainframe. Click <a href="http://www.criticalcommons.org/Members/ccManager/clips/simpsonss7e23muchapuaboutnothingfrinkiac7.mp4/view" target="new"> here</a> if you're unfamiliar with his genius.
</p>
</div>
</div>
</div> <!-- End of welcome div -->
<div class="row" id="pre-login"> <!-- Start of pre-login/game instructions div -->
<div class="col-sm-12"></div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<p class="test">
<strong>Ways to Play</strong>
<br />
</p>
<ol class="test">
<li>Take turns with friends using the same computer.</li>
<li>Kill time when the boss isn't looking and play against yourself!</li>
</ol>
<p>All you need to do is sign-in with your account and you're all set! What's that? You don't have an account? No problem! Just click on the 'Sign Up' link in the navigation bar above.</p>
</div>
<div class="col-md-3"></div>
</div> <!-- End of game instructions div -->
<div class="row"> <!-- Start of user login-in/sign-up div -->
<!-- <div class="col-sm-12"> -->
<div class="col-md-3"></div>
<div class="col-md-3 button-center"> <!-- Start of sign-in div -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#sign-in-modal">
Sign in!
</button>
<div class="modal fade" id="sign-in-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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 black">T3 User Login</h3>
</div>
<div class="modal-body">
<h3 class="black" id="sign-in-modal-msg">Sign in to play!</h3>
<form id="sign-in-form">
<div class="form-group">
<label for="email" class="control-label">Enter your email</label>
<input name="credentials[email]" type="text" class="form-control" placeholder="user@domain.com">
<label for="password" class="control-label">Enter your password</label>
<input name="credentials[password]" type="password" class="form-control" placeholder="Enter your password">
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Sign-In</button>
</form>
</div>
</div>
</div>
</div>
</div> <!-- End of sign-in div -->
<div class="col-md-3 button-center"> <!-- Start of sign-up div -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#sign-up-modal">
Sign up!
</button>
<div class="modal fade" id="sign-up-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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 black">T3 User Sign-Up</h3>
</div>
<div class="modal-body">
<h3 class="black" id="sign-up-modal-msg">Sign up to play!</h3>
<form id="sign-up-form">
<div class="form-group">
<label for="email" class="control-label">Enter your email</label>
<input name="credentials[email]" type="text" class="form-control" placeholder="user@domain.com">
<label for="password" class="control-label">Enter your password</label>
<input name="credentials[password]" type="password" class="form-control" placeholder="Enter your password">
<label for="password" class="control-label">Please re-enter your password</label>
<input name="credentials[password_confirmation]" type="password" class="form-control" placeholder="Confirm your password">
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Sign-Up</button>
</form>
</div>
</div>
</div>
</div>
</div> <!-- End of sign-up div -->
<div class="col-md-3"></div>
<!-- </div> -->
</div> <!-- End of user login-in/sign-up div -->
</div> <!-- End of pre-login/game instructions div -->
<div class="row text-center" id="post-login"> <!-- Start of post-login/game play div -->
<div class="col-md-3">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#chng-pw-modal">
Change password
</button>
<div class="modal fade" id="chng-pw-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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 black">Change Password</h3>
</div>
<div class="modal-body">
<h3 class="black" id="chng-pw-modal-msg">Sign up to play!</h3>
<form id="chng-pw-form">
<div class="form-group">
<label for="password" class="control-label">Enter your current password</label>
<input name="passwords[old]" type="password" class="form-control" placeholder="Enter your current password">
<label for="password" class="control-label">Enter your new password</label>
<input name="passwords[new]" type="password" class="form-control" placeholder="Enter your new password">
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Change Password</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<button id="get-open-gms" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#get-open-gms-modal">
See Game Stats
</button>
</div>
<div class="col-md-3">
<button id="strt-gms-btn" type="button" class="btn btn-primary btn-lg">
Start New Game
</button>
</div>
<div class="col-md-3">
<button id="sign-out-btn" type="button" class="btn btn-primary btn-lg">
Sign Out
</button>
</div>
</div> <!-- End of post-login/game play div -->
<div class="gameboard" id="game-board"> <!-- Start game board div -->
<div class="row article">
<div class="col-xs-6 col-md-4 cell box teal message" id="gridPos00">
PICK ME
</div>
<div class="col-xs-6 col-md-4 cell box grey message" id="gridPos01">
PICK ME
</div>
<div class="col-xs-6 col-md-4 cell box teal message" id="gridPos02">
PICK ME
</div>
</div>
<div class="row article">
<div class="col-xs-6 col-md-4 cell box grey message" id="gridPos10">
PICK ME
</div>
<div class="col-xs-6 col-md-4 cell box teal message" id="gridPos11">
PICK ME
</div>
<div class="col-xs-6 col-md-4 cell box grey message" id="gridPos12">
PICK ME
</div>
</div>
<div class="row article">
<div class="col-xs-6 col-md-4 cell box teal message" id="gridPos20">
PICK ME
</div>
<div class="col-xs-6 col-md-4 cell box grey message" id="gridPos21">
PICK ME
</div>
<div class="col-xs-6 col-md-4 cell box teal message" id="gridPos22">
PICK ME
</div>
</div>
</div> <!-- End game board div -->
<!-- Modal -->
<div class="modal fade large-modal" id="get-open-gms-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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>
<h4 class="modal-title" id="myModalLabel">Previous Game Stats</h4>
</div>
<div id="get-open-gms-msg" class="modal-body">
<h3></h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body> <!-- End of main body -->
</html>