223 lines
6.2 KiB
HTML
223 lines
6.2 KiB
HTML
<html>
|
|
<head>
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
<link rel="manifest" href="/site.webmanifest">
|
|
<meta name="msapplication-TileColor" content="#da532c">
|
|
<meta name="theme-color" content="#ffffff">
|
|
|
|
<link href="//fonts.cdnfonts.com/css/seven-segment" rel="stylesheet">
|
|
<link href="//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="shtclck.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
|
|
<table class="invisible" id="main">
|
|
|
|
<thead>
|
|
<tr>
|
|
<th colspan="3">shtclck</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">60</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>
|
|
<tr>
|
|
<td><label for="settings-about">About</label></td>
|
|
<td>
|
|
<button id="settings-about"><i class="fa-solid fa-info"></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.
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
<tfoot>
|
|
<tr class="controls">
|
|
<td id="welcome-play"><i class="fa-solid fa-play"></i></td>
|
|
</tr>
|
|
</tfoot>
|
|
|
|
</table>
|
|
|
|
<table class="modal invisible" id="about">
|
|
|
|
<thead>
|
|
<tr>
|
|
<th colspan="2">about</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td class="about-text">
|
|
<h4>shtclck by froxxxy</h4>
|
|
<p>
|
|
for more info / issues / suggestions / ...<br>
|
|
visit the<br>
|
|
<a href="https://github.com/froxxxy/shtclck"><i class="fa-brands fa-github"></i> project</a>
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
<tfoot>
|
|
<tr class="controls">
|
|
<td id="about-cancel"><i class="fa-solid fa-play"></i></td>
|
|
</tr>
|
|
</tfoot>
|
|
|
|
</table>
|
|
<div id="prompt" class="invisible">
|
|
|
|
<table>
|
|
|
|
<tbody>
|
|
<tr class="prompt-input prompt-number">
|
|
<td colspan="2"><label for="prompt-number">Time</label></td>
|
|
</tr>
|
|
<tr class="prompt-input prompt-number">
|
|
<td colspan="2"><input id="prompt-number" type="number"></td>
|
|
</tr>
|
|
<tr class="prompt-input prompt-text">
|
|
<td colspan="2"><label for="prompt-text">Time</label></td>
|
|
</tr>
|
|
<tr class="prompt-input prompt-text">
|
|
<td colspan="2"><input id="prompt-text" type="text"></td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
<tfoot>
|
|
<tr class="controls">
|
|
<td id="prompt-cancel"><i class="fa-solid fa-xmark"></i></td>
|
|
<td id="prompt-save"><i class="fa-solid fa-save"></i></td>
|
|
</tr>
|
|
</tfoot>
|
|
|
|
</table>
|
|
</div>
|
|
<img id="logo" src="12ball.png">
|
|
<script src="shtclck.js" type="text/javascript"></script>
|
|
</body>
|
|
</html>
|