-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
82 lines (79 loc) · 3.54 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
<!DOCTYPE html>
<html>
<head>
<title>Capitals Game</title>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<link rel='stylesheet' type='text/css' href='main.css'>
<script src='app.js'></script>
</head>
<body>
<div id ="cardPanel" class="card-panel black center-align" style="display: none;">
<span id="gameText" class="white-text"></span>
<button id="submitAnswer" class="waves-effect waves-light btn green lighten-1 modal-trigger" href="#modal2" disabled>Submit Answer</button>
</div>
<ul id="slide-out" class="side-nav">
<div class="row">
<h2 class="center-align">Find the Capital!</h2>
</div>
<div class="row">
<h5 class="center-align">How smart are you?</h5>
</div>
<div class="row">
<div class="input-field col s12 m12 center-align">
<select class="icons" id="difficulty-drop-down">
<option value="" disabled selected>Pick One:</option>
<option value="easy" data-icon="images/dumb.jpeg" class="left circle"><b>EASY</b> - Is Portugal in Spain?</option>
<option value="medium" data-icon="images/normal.jpeg" class="left circle"><b>NORMAL</b> - Not too shabby...</option>
<option value="hard" data-icon="images/yoda.jpeg" class="left circle"><b>HARD</b> - Very smart I am.</option>
</select>
<label>Difficulty Setting</label>
</div>
</div>
<div class="row">
<h5 id="setPlayerName" class="center-align">Let's do this, </h5>
</div>
<div class="container center-align">
<button id="startGameButton" class="btn-large light-green lighten-1 waves-effect waves-light center-align">Start Game!</button>
</div>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="mdi-navigation-menu menu-icon"></i></a>
<div id='map'>
</div>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content center-align">
<h4>Hello! What should we call you?</h4>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s4 offset-s4">
<input placeholder="Bob" id="userName" type="text" class="validate">
<label for="first_name">Name</label>
</div>
</div>
</form>
</div>
<button id="popupButton" class="modal-action modal-close waves-effect waves-green btn-large light-green center-align">Let's Go!</button>
</div>
</div>
<!-- Modal Structure -->
<div id="modal2" class="modal">
<div class="modal-content center-align">
<h4 id="gameOverMessage">Congratulations!</h4>
<h5 id="finalResultMessage"></h5>
</div>
<div class="modal-footer">
<button class="modal-action modal-close waves-effect waves-green btn-large red lighten-2 center-align">Close</button>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<!-- ?libraries=geometry -->
<script src="map.js" type="text/javascript"></script>
<script src="game.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>