HTML Reference

Basketball Scoreboard

This scoreboard il the most complex, in this case we have a lot of functions like timer, quarters, fouls, timeouts, bonus. However the html structure result simple and linear.

Some elements have many classes to ease graphic aspect building through few stylesheets.

FUNCTIONS: Teams/Players name, Scores, Timer, Quarter/Overtime, Fouls, Timeouts, Bonus.

<div class="container containerbasket">
  <div class="sgrlogo"></div>
  <div class="box boxtimer" id="timer">10:00</div>
  <div class="box boxteams boxhometeam" id="team_1">team_1</div>
  <div class="box boxpoints boxhomepoints" id="points_1">0</div>
  <div class="box space">-</div>
  <div class="box boxpoints boxawaypoints" id="points_2">0</div>
  <div class="box boxteams boxawayteam" id="team_2">team_2</div>
  <div class="box boxmoment boxovertimeoff" id="ovt"><span><em id="overtime">Q</em><strong id="moment">1</strong></span></div>
			
<!-- American verison (fouls and timeout are numbers)-->
  <div class="box secondliners boxfouls boxhomefouls" id="fouls_1">0</div>
  <div class="box secondliners boxfouls boxawayfouls" id="fouls_2">0</div>

<div class="box secondliners boxtimeouts boxhometimeouts" id="timeouts_1">0</div>
<div class="box secondliners boxtimeouts boxawaytimeouts" id="timeouts_2">0</div>
<!-- boxbonusoff, boxbonuson -->
<div class="box secondliners boxbonus boxhomebonus boxbonusoff" id="bonus_1">BONUS</div>
<div class="box secondliners boxbonus boxawaybonus boxbonusoff" id="bonus_2">BONUS</div>
<!-- end of American version -->
			
<!-- European version (on swithch from console) / show only fauls by little squares -->
<div class="box secondlinersEU boxfoulsEU boxhomefoulsEU" id="foulcontainereuhome">
 <div class="EUfouls EUfoulshome secondlinersEUoff" id="f1euhome"></div>
 <div class="EUfouls EUfoulshome secondlinersEUoff" id="f2euhome"></div>
 <div class="EUfouls EUfoulshome secondlinersEUoff" id="f3euhome"></div>
 <div class="EUfouls EUfoulshome secondlinersEUoff" id="f4euhome"></div>
 <div class="EUfouls EUfoulshome secondlinersEUoff" id="f5euhome"></div>
</div>
			
<div class="box secondlinersEU boxfoulsEU boxawayfoulsEU" id="foulcontainereuaway">
 <div class="EUfouls EUfoulsaway secondlinersEUoff" id="f1euaway"></div>
 <div class="EUfouls EUfoulsaway secondlinersEUoff" id="f2euaway"></div>
 <div class="EUfouls EUfoulsaway secondlinersEUoff" id="f3euaway"></div>
 <div class="EUfouls EUfoulsaway secondlinersEUoff" id="f4euaway"></div>
 <div class="EUfouls EUfoulsaway secondlinersEUoff" id="f5euaway"></div>
</div>
			
</div>