leaderboard.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="OCC Programming Club Website.">
    <meta name="author" content="OCC Programming Club">
    <link rel="icon" type="image/png" href="icon.png" />

    <title>OCC Programming Club</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/jumbotron-narrow.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

  <style type="text/css">
    .dreamloLBTable { border-collapse:collapse;text-align:center;width: 200px; }
    .dreamloLBTable th { border-bottom: 1px solid #EEEEEE;font-weight:bold;margin:0;padding:4px; }
    .dreamloLBTable td { border-bottom: 1px solid#EEEEEE;margin:0;padding:4px; }
  </style>

  </head>

  <body>

    <div class="container">
      <div class="header">
        <nav>
          <div class="navbar-header navbar-default">
            <button type="button" class="navbar-toggle collapsed dark" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <h4 class="text-muted hidden-xs"><a href="index.html"><img id="logo" src="img/logo.png"/>OCC Programming Club</a></h4>
            <h4 class="text-muted visible-xs"><a href="index.html"><img id="logo" src="img/logo.png"/></a></h4>
          </div>

          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav nav-pills navbar-right hidden-xs">
              <li role="presentation"><a href="index.html">Home</a></li>
              <li role="presentation"><a href="resources.html">Resources</a></li>
              <li role="presentation" class="active"><a href="leaderboard.html">Leaderboard<span class="sr-only">(current)</span></a></li>
            </ul>
            <ul class="nav nav-pills nav-stacked navbar-right hidden-sm hidden-md hidden-lg">
              <li role="presentation"><a href="index.html">Home</a></li>
              <li role="presentation"><a href="resources.html">Resources</a></li>
              <li role="presentation" class="active"><a href="leaderboard.html">Leaderboard<span class="sr-only">(current)</span></a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </nav>
      </div>

      <div class="jumbotron" style="margin-top:30px">
        <h1>Club's Leaderboard <sup><span style="font-size: 11px;" class="label label-warning">BETA</span></sup></h1>
        <br>

        <p class="lead">Here you will find statistics from the <b>top problem solvers</b> of the club.</p>
        <p><small>Note: This feature is at a very early stage and may not have essential functionalities.</small></p>
      </div>

      <div class="row">
        <div class="col-md-12">
          <h4>The Leaderboard</h4>
          During our meetings, we will occassionaly perform little coding competitions. Every time a club member (individually or in a team) completes a problem, he or she will receive a score based on <b>delivery</b> and <b>performance</b>. Alternatively, a club member may also win points for presenting a topic during our <i>Discussion time</i>.
        </div>
      </div>

      <br>

      <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
          <h3 class="text-center">The Scores</h3>

          <script src="http://dreamlo.com/lb/54fd2c996e51b60dfc1b0f7c/js" type="text/javascript"></script>
        </div>
        <div class="col-md-1"></div>
      </div>

      <div class="row">
        <div class="col-md-12">
          <p class="text-center">
            <h6><b>Disclaimer</b>: A high score does not mean better skills or more knowledge.
              It merely reflects the <i>activity level</i> of a club member.</h6>
          </p>
        </div>
      </div>

    <br>

      <footer class="footer">
        <p>&copy; OCC Programming Club 2015</p>
      </footer>

    </div> <!-- /container -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="js/ie10-viewport-bug-workaround.js"></script>

    <script>
      var els = document.getElementsByClassName('dreamloLBTable');
      els[0].className = 'table table-condensed table-hover';
    </script>
  </body>
</html>