<!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"> <style type="text/css"> html { height: 100%; background: #000000; /* Old browsers */ background: -moz-linear-gradient(top, #000000 0%, #888888 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#888888)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #000000 0%,#888888 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #000000 0%,#888888 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #000000 0%,#888888 100%); /* IE10+ */ background: linear-gradient(to bottom, #000000 0%,#888888 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#888888',GradientType=0 ); /* IE6-9 */ font-family: arial, "Numbus Sans L Bold", sans-serif; font-weight: bold; text-align: center; } .button { background: rgb(242,245,246); /* Old browsers */ background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); /* IE6-9 */ border-radius: 0.3em; color: black; } #scoreboard *[id] { cursor: pointer; -moz-user-select: none; -khtml-user-select: none; user-select: none; } #team-a { position: absolute; left: 25%; width: 3em; margin-left: -1.5em; top: 0; } #team-b { position: absolute; right: 25%; width: 3em; margin-right: -1.5em; top: 0; } img, p { margin: 0.1em; } .name { color: white; font-size: 50%; height: 4em; } .score { position: relative; top: -0.3em; width: 2.2em; margin: auto; } #timeouts { font-size: 30%; position: absolute; top: 6.2em; left: 50%; width: 4.5em; margin-left: -2.25em; } .label { font-size: 80%; } .to { margin: 1em 0; width: 2em; } #timeouts-a { float: left; } #timeouts-b { float: right; } #pcol { font-size: 66%; position: absolute; left: 25%; width: 5em; margin-left: -2.5em; bottom: 0; } .text { width: 6em; font-size: 50%; margin: 0.1em auto; } .timer { width: 4em; margin: 0.1em auto; } #jcol { font-size: 66%; position: absolute; right: 25%; width: 5em; margin-right: -2.5em; bottom: 0; } </style> <script type="text/javascript" src="res/scoreboard.js"></script> <script type="text/javascript"> longnames = true; tenths = false; </script> </head> <body> <!-- HTML5 says not to use tables for layout. Since this is a highly-styled page, it looks awful without CSS. Sorry. --> <div id="scoreboard"> <div id="team-a"> <p class="name" id="name-a" onclick="handle(event);">Home</p> <p class="score button" id="score-a" onclick="handle(event);">-</p> </div> <div id="timeouts"> <p class="label button">Timeouts</p> <p class="to button" id="timeouts-a" onclick="handle(event);">0</p> <p class="to button" id="timeouts-b" onclick="handle(event);">0</p> </div> <div id="team-b"> <p class="name" id="name-b" onclick="handle(event);">Home</p> <p class="score button" id="score-b" onclick="handle(event);">-</p> </div> <div id="pcol"> <p class="text button" id="periodtext" onclick="handle(event);"></p> <p class="timer button"><span id="period" onclick="handle(event);">--:--</span></p> </div> <div id="jcol"> <p class="text button" id="jtxt"> <span id="jamtext" onclick="handle(event);"></span> <span id="jamno" onclick="handle(event);">0</span> </p> <p class="timer button"><span id="jam" onclick="handle(event);">-:--</span></p> </div> </div> </body> </html>