-
Notifications
You must be signed in to change notification settings - Fork 1
/
KumiteScoreDashboard.html
99 lines (82 loc) · 4.14 KB
/
KumiteScoreDashboard.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kumite Scoring Board</title>
<link rel = "stylesheet" type = "text/css" href = "resources/css/style.css"/> <!-- For layout -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- For Icons -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="resources/js/functions.js"></script> <!-- DO NOT REMOVE THIS LINE: Logics/ required animations for the web applications -->
</head>
<body onpageshow="initializePointZonesAndTimer()" onkeyup="setTimerButton(event)" onkeydown="keyCodeShortcut(event)">
<!-- blueRedDiv: Blue (AO) & Red (AKA) background that will provide the interface -->
<div id="blueRedDiv">
<!-- Then on each side of the background, label with AO and AKA -->
<!--LEFT-->
<div id="left-AO">AO
<div id="AO_PointZone" onclick="aoPointZoneAdd()"><!-- Values from JS function in onpageshow attribute in body tag --></div>
<!-- 3 buttons for the fouls for each category: CHUKOKU, KEIKOKU, HANSHUKO-CHUI -->
<!-- Depending on the respective dojos preferences, they can choose to comment out the SENSHU options-->
<div>
<label>SENSHU </label>
<input type="checkbox" id="senshuAO">
</div>
<div id="cat1FoulsAO">
<button id="Cat1_AO_C" onclick="cat1_AO_C()">C</button>
<button id="Cat1_AO_K" onclick="cat1_AO_K()">K</button>
<button id="Cat1_AO_HC" onclick="cat1_AO_HC()">HC</button>
</div>
<div id="cat2FoulsAO">
<button id="Cat2_AO_C" onclick="cat2_AO_C()">C</button>
<button id="Cat2_AO_K" onclick="cat2_AO_K()">K</button>
<button id="Cat2_AO_HC" onclick="cat2_AO_HC()">HC</button>
</div>
</div>
<!--CENTRE-->
<div id="center-timer">
<b id="timerDisplay"><!-- Values from JS function in onpageshow attribute in body tag --></b>
<div id="pause"></div>
<div id="resume"></div>
<div id="buttonDiv">
<!-- Buttons to minus the points of each side; JS to be written -->
<button id="AO-minus" onclick="aoPointZoneMinus()" class="glyphicon glyphicon-minus"></button>
<button id="AKA-minus" onclick="akaPointZoneMinus()" class="glyphicon glyphicon-minus"></button>
</div>
<!-- Box for labels of fouls-->
<div id="foulsLabelBox">
<div><b>Category 1</b></div>
<br/>
<div><b>Category 2</b></div>
</div>
</div>
<!--RIGHT-->
<div id="right-AKA">AKA
<div id="AKA_PointZone" onclick="akaPointZoneAdd()"><!-- Values from JS function in onpageshow attribute in body tag --> </div>
<div>
<label>SENSHU </label>
<input type="checkbox" id="senshuAKA">
</div>
<div id="cat1FoulsAKA">
<button id="Cat1_AKA_C" onclick="cat1_AKA_C()">C</button>
<button id="Cat1_AKA_K" onclick="cat1_AKA_K()">K</button>
<button id="Cat1_AKA_HC" onclick="cat1_AKA_HC()">HC</button>
</div>
<div id="cat2FoulsAKA">
<button id="Cat2_AKA_C" onclick="cat2_AKA_C()">C</button>
<button id="Cat2_AKA_K" onclick="cat2_AKA_K()">K</button>
<button id="Cat2_AKA_HC" onclick="cat2_AKA_HC()">HC</button>
</div>
</div>
<!-- Instead of a guided tour, include a hover-over shortcut key menu -->
<div>
<p><i id="helpIcon" class="fa fa-question-circle-o w3-hover-opacity" onclick="document.getElementById('helpIconModal').style.display='block'"></i></p>
<div id="helpIconModal" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">
<img class="w3-modal-content" src="resources/img/keyboard-layout-table.png" alt="Instructions for shortcut keys">
</div>
<!-- The icon I want to use is fa-exchange-alt currently not showing -->
<p><i id="exchangeIcon" class="fa fa-exchange w3-hover-opacity" onclick="toggleSwitchBackground()"></i></p>
</div>
</div>
</body>
</html>