-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (117 loc) · 5.21 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BrandMaster - Team building for virtual teams</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="center" id="pageContainer">
<div id="avatarContainer">
<img id="avatar" class="img" src="images/avatar_grey_small.png" alt="avatar"></img>
<br/><span id="avatarName"></span>
</div>
<div id="resetContainer">
</div>
<div id="header">
<div id="b" class="header tile">
<strong>b</strong>
</div>
<div id="m" class="header tile">
<strong>m</strong>
</div>
<div class="header" id="brand">
Brand
</div>
<div class="header" id="master">
Master
</div>
<div id="shadow" class="center"><img class="img" src="images/shadow_small.png" alt="shadow"></img></div>
</div>
<div class="container center" id="endBanner">
</div>
<div class="container" id="rules">
<div class="title">Objective</div>
<div class="blurb">
Teams take turns to identify their companies products, by linking them with one word clues or 'master brands'. One team member (the Brand Master) sets the clues, the others team members (the Marketeers) must guess the products based on that clue.<p><span class="read_more">Read More ...</span></p>
<div id="moreRules">
<p><strong>Brand Master</strong><br/>See’s all the products your team and other teams are developing and must conceptualise one word Masterbrands to link your products together. They enter their clue/master brand and the number of products they are trying to link.</p><p><strong>Marketeers</strong><br/>Choose products from the board that match the Brand Masters clues. You will receive a one word clue and a number that reflects the number of products linked. Marketeers receive a bonus guess each round to help identify unguessed products from previous rounds, these do not need to be taken).</p><p><strong>Time</strong><br/>Teams have 2 minutes per turn (to both provide a masterbrand and making all respective guesses).</p><p><strong>Turns</strong><br/>Turns end once all guesses are made (including the bonus guess), if a wrong answer is provided (guessing another teams product), if the team decides to end their turn early, or the 2 minutes elapse.</p>
</div>
</div>
<!--<div class="title">Rules</div>
<div class="blurb">
Here are some initial rules <span class="toggler"> more...</span>
<div id="moreRules">Here are some more rules</div>
</div>-->
</div>
<div class="center" id="playerentry">
<div id="errMsg"></div>
<form id="homePageForm">
<label class="label paleGrey" for="pname">Your Name</label>
<input class="input" type="text" id="pname" placeholder="Enter your name"/>
<div id="options">
</div>
<button class="btn-primary" type="button" id="joinBtn">Join game</button>
</form>
</div>
<div id="teamTable" class="container">
</div>
<div class="center" id="waitMsg"></div>
<div class="container center" id="teamsWrap">
<div id="scoreTable"></div>
<!--<div id="errors"></div>-->
<div id="numPlayers"></div>
<div id="role"></div>
</div>
<div class="container" id="board">
</div>
<div class="container" id="actions">
</div>
<!-- Teams Modal -->
<div id="teamsModal" class="modal">
<!--Modal Content -->
<div id="teamsModalContent" class="modal-content">
</div>
</div>
<!-- Correct Modal -->
<div id="correctModal" class="modal">
<!--Modal Content -->
<div class="modal-content">
<p><img class="img" src="images/happy_face_small.png" alt="correct" style="width:25%"></img></p>
<p><strong>Whoohoo! That's correct!</strong></p>
<p><span id="modalMsg"></span></p>
</div>
</div>
<!-- Incorrect Modal -->
<div id="incorrectModal" class="modal">
<!--Modal Content -->
<div class="modal-content">
<p><img class="img" src="images/sad_face_small.png" alt="incorrect" style="width:25%"></img></p>
<p><strong>It's good, but it's not right!</strong></p>
<p>Your turn ends...</p>
</div>
</div>
<!-- confirm Modal -->
<div id="confirmModal" class="modal">
<!--Modal Content -->
<div class="modal-content">
<p style="font-size; 26px;">Are you sure you want to select '<span style="font-weight:500;" id="wordToConfirm"></span>'?</p>
<input class="btn-secondary" id="nope" type="button" value="Nope"></input><input class="btn-primary" id="yes" type="button" value="Yes we do!"></input>
</div>
</div>
<div id="btmShadow" class="center"><img class="img" src="images/shadow_small.png" alt="shadow"></img></div>
<div class="container center" id="historyWrap">
<div id="history">
</div>
</div>
<!-- Javascript files added to the end of body for bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>-->
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="./api/config"></script> <!-- Loaded via REST API -->
<script src="./client.js"></script>
</div>
</body>
</html>