153 lines
4.2 KiB
HTML
153 lines
4.2 KiB
HTML
<html>
|
|
<head>
|
|
<link href="http://fonts.cdnfonts.com/css/seven-segment" rel="stylesheet">
|
|
<link href="http://fonts.cdnfonts.com/css/profession" rel="stylesheet">
|
|
|
|
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
|
|
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
|
|
referrerpolicy="no-referrer" rel="stylesheet"/>
|
|
|
|
<link href="shotclock.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
|
|
<table class="invisible" id="main">
|
|
|
|
<thead>
|
|
<tr>
|
|
<th colspan="3">Shotclock</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td class="player" id="player1">
|
|
<table>
|
|
<tr>
|
|
<td class="player-name active">Player 1</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="player-score" data-player="1">0</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="player-extension active">Extension</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
<td class="display">
|
|
<table>
|
|
<tr>
|
|
<td class="display-break active" id="display-break-player1"> </td>
|
|
<td>Race to <span class="display-race">9</span></td>
|
|
<td class="display-break" id="display-break-player2"> </td>
|
|
</tr>
|
|
<tr>
|
|
<td class="display-timer" colspan="3">30</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="display-bar" colspan="3"> </td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
<td class="player" id="player2">
|
|
<table>
|
|
<tr>
|
|
<td class="player-name">Player 2</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="player-score" data-player="2">0</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="player-extension active">Extension</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
<tfoot>
|
|
<tr class="controls">
|
|
<td id="controls-play"><i class="fa-solid fa-play"></i></td>
|
|
<td id="controls-switch"><i class="fa-solid fa-arrows-rotate"></i></td>
|
|
<td id="controls-settings"><i class="fa-solid fa-gear"></i></td>
|
|
</tr>
|
|
</tfoot>
|
|
|
|
</table>
|
|
|
|
<table class="modal invisible" id="settings">
|
|
|
|
<thead>
|
|
<tr>
|
|
<th colspan="2">Settings</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td><label for="settings-time">Time</label></td>
|
|
<td><input id="settings-time" type="number"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="settings-race">Race to</label></td>
|
|
<td><input id="settings-race" type="number"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="settings-alternate">Alternate break</label></td>
|
|
<td><input id="settings-alternate" type="checkbox"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="settings-reset">Reset Game</label></td>
|
|
<td>
|
|
<button id="settings-reset"><i class="fa-solid fa-clock-rotate-left"></i></button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="settings-fullscreen">Recover Fullscreen</label></td>
|
|
<td>
|
|
<button id="settings-fullscreen"><i class="fa-solid fa-up-right-and-down-left-from-center"></i></button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
<tfoot>
|
|
<tr class="controls">
|
|
<td id="settings-cancel"><i class="fa-solid fa-xmark"></i></td>
|
|
<td id="settings-save"><i class="fa-solid fa-save"></i></td>
|
|
</tr>
|
|
</tfoot>
|
|
|
|
</table>
|
|
|
|
|
|
<table class="modal" id="welcome">
|
|
|
|
<thead>
|
|
<tr>
|
|
<th colspan="2">Welcome</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td class="welcome-text">
|
|
<h4>Todo:</h4>
|
|
<p>
|
|
Play pool. Have fun. Keep an eye on the clock.<br>
|
|
<img id="welcome-confirm" src="12ball.png">
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
<tfoot>
|
|
<tr class="controls">
|
|
<td id="welcome-play"><i class="fa-solid fa-play"></i></td>
|
|
</tr>
|
|
</tfoot>
|
|
|
|
</table>
|
|
<script src="shotclock.js" type="text/javascript"></script>
|
|
</body>
|
|
</html>
|