152 lines
4.4 KiB
HTML
152 lines
4.4 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="main invisible" id="main">
|
|
|
|
<thead>
|
|
<tr>
|
|
<th colspan="3">Shotclock</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td class="player">
|
|
<table class="player">
|
|
<tr class="player-name active">
|
|
<td id="player1-name">Player 1</td>
|
|
</tr>
|
|
<tr class="player-score">
|
|
<td class="player-score" id="player-score-1">0</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="player-extension">Extension</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
<td class="display">
|
|
<table class="display">
|
|
<tr class="display-race">
|
|
<td class="display-break active" id="display-break1"> </td>
|
|
<td>Race to <span id="display-race">9</span></td>
|
|
<td class="display-break" id="display-break2"> </td>
|
|
</tr>
|
|
<tr class="display-time">
|
|
<td colspan="3" id="display-time">30</td>
|
|
</tr>
|
|
<tr class="display-bar">
|
|
<td colspan="3" id="display-bar"> </td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
<td class="player">
|
|
<table class="player">
|
|
<tr class="player-name">
|
|
<td id="player2-name">Player 2</td>
|
|
</tr>
|
|
<tr class="player-score">
|
|
<td class="player-score" id="player-score-2">0</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="player-extension">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 class="settings-inputs">
|
|
<td><label for="settings-time">Time</label></td>
|
|
<td><input id="settings-time" type="number"></td>
|
|
</tr>
|
|
<tr class="settings-inputs">
|
|
<td><label for="settings-race">Race to</label></td>
|
|
<td><input id="settings-race" type="number"></td>
|
|
</tr>
|
|
<tr class="settings-inputs">
|
|
<td><label for="settings-alternate">Alternate break</label></td>
|
|
<td><input id="settings-alternate" type="checkbox"></td>
|
|
</tr>
|
|
<tr class="settings-inputs">
|
|
<td><label for="settings-reset">Reset</label></td>
|
|
<td><button id="settings-reset"><i class="fa-solid fa-clock-rotate-left"></i></button></td>
|
|
</tr>
|
|
<tr class="settings-fullscreen">
|
|
<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 class="welcome-text">
|
|
<td>
|
|
<h4>Todo:</h4>
|
|
<ul>
|
|
<li>Play pool.</li>
|
|
<li>Have fun.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td id="welcome-confirm"><img src="12ball.png"></td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
<tfoot>
|
|
<tr class="controls">
|
|
<td> </td>
|
|
</tr>
|
|
</tfoot>
|
|
|
|
</table>
|
|
<script src="shotclock.js" type="text/javascript"></script>
|
|
</body>
|
|
</html>
|