<!DOCTYPE html> <!-- Roller Derby Scoreboard Copyright © 2011 Neale Pickett This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see <http://www.gnu.org/licenses/>. --> <html> <head> <title>LADD Scoreboard</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="res/scoreboard.css"> <style type="text/css"> #jam { bottom: auto; top: 2em; } #jamtext { bottom: auto; top: 1.5em; } #jamno { bottom: auto; top: 3em; } .timeouts { margin: 0em 6em; } .jammer { margin: 0em 3em; } /* * Penalties */ #penalties-a, #penalties-b { position: absolute; font-size: 13%; bottom: 2px; border-collapse: collapse; } #penalties-a { left: 0; } #penalties-b { right: 0; } #penalties td { cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.075); padding: 0; vertical-align: bottom; } #penalties .minors td { height: 3em; } #penalties .majors td { height: 8em; } #penalties .minors div { background-color: #880; color: black; } #penalties .majors div { background-color: #800; } #penalties .sk8ers td { font-family: sans-serif; vertical-align: top; width: 1em; line-height: 75%; } </style> <script type="text/javascript" src="logos/logos.js"></script> <script type="text/javascript" src="res/scoreboard.js"></script> <script type="text/javascript" src="res/penalties.js"></script> <script type="text/javascript"> tenths = true; </script> </head> <body> <div id="scoreboard"> <p class="left"> <img class="logo" id="logo-a" src="" alt="A" onclick="handle(event);"> <span class="timeouts" id="timeouts-a" onclick="handle(event);">0</span> <span class="jammer" id="jammer-a" onclick="handle(event);">★</span> <span class="score" id="score-a" onclick="handle(event);">-</span> </p> <p class="center"> <span id="period" onclick="handle(event);">--:--</span> <span id="jam" onclick="handle(event);">-:--.-</span> <span id="jamtext" onclick="handle(event);"></span> <span id="jamno" onclick="handle(event);">0</span> </p> <p class="right"> <img class="logo" id="logo-b" src="" alt="B" onclick="handle(event);"> <span class="timeouts" id="timeouts-b" onclick="handle(event);">0</span> <span class="jammer" id="jammer-b" onclick="handle(event);">★</span> <span class="score" id="score-b" onclick="handle(event);">-</span> </p> </div> <div id="penalties"> <table id="penalties-a"> <tr class="majors"></tr> <tr class="sk8ers"></tr> </table> <!-- Right here would be an excellent place for a sponsor logo --> <table id="penalties-b"> <tr class="majors"></tr> <tr class="sk8ers"></tr> </table> </div> <div id="notice"> <div id="notice-1">Power Jam</div> <div id="notice-2">Grand Slam</div> <div id="notice-3">Ouch</div> <div id="notice-4">OMG</div> </div> </body> </html>