index.html

<!doctype html>

<head>
  <title></title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
  <p id="pageHeader">Type-a-Number!</p>
  </header>
  <div role="main">
      <div id="loginDiv" style="display: none;">Welcome! <a href="javascript:login.showLoginDialog()"><img src="img/gplus_signin_normal.png"></a></div>
      <div id="welcome" style="display: none;">
        <div id="message">Welcome, playername!</div>
        <input type="button" id="welcomeAchievements" disabled="true"  value="View achievements" onclick="welcome.showAchievements()"/>
        <input type="button" id="welcomeleaderboards" disabled="true" value="View leaderboards" onclick="welcome.showLeaderboards()" />
        <input type="button" id="playGameEasy" disabled="true" value="Play Game (Easy)" onclick="welcome.startGame(game.EASY)" />
        <input type="button" id="playGameHard" disabled="true" value="Play Game (Hard)" onclick="welcome.startGame(game.HARD)" />
        <input type="button" id="seeFriends" disabled="true" value="See my friends!" onclick="welcome.seeFriends()" />
        <input type="button" id="showAdmin" disabled="true" value="Admin tasks" onclick="welcome.showAdmin()" />
      </div>

      <div id="game" style="display:none;">
        <div id="gameMessageArea"></div>
        <input type="text" id="scoreRequestTF" accept=""/><br/>
          <div id="challengeArea" style="display:none;"></div>
          <div id="gameBragArea" style="display: none;">
              <span id="bragMessage"></span><br/>
              <div id="bragButton"><button>Challenge!</button></div>

          </div>
        <input type="button" id="submitScoreButton" value="Request Score" onclick="game.requestScore()" /><br/>
        <input type="button" id="gameLeaderboardButton" value="High Scores" onclick="game.showLeaderboard()" /><br/>
        <input type="button" id="gameBackButton" value="Back" onclick="game.back()" /><br/>
      </div>

      <div id="achievements" style="display: none;">
        <table id="achievementsTable">
          <thead>
          <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Icon</th>
          </tr>
          </thead>
          <tbody>
          </tbody>
        </table>

        <input type="button" id="achievementsBack" value="Go back" onclick="achievementTable.goBack()"/>
      </div>

      <div id="leaderboards" style="display: none;">
        <table id="leaderboardsTable">
          <thead>
          <tr>
            <th>Icon</th>
            <th>Name</th>
            <th>See it?</th>
          </tr>
          </thead>
          <tbody>
          </tbody>
        </table>

        <input type="button" id="leaderboardsBack" value="Go back" onclick="leaderboardsTable.goBack()"/>
      </div>
      <div id="leaderboard" style="display: none;">
        <div id="leaderboardTitle"></div>
        <table id="leaderboardTable">
          <thead>
          <tr>
            <th>Avatar</th>
            <th>Player</th>
            <th>Score</th>
          </tr>
          </thead>
          <tbody>
          </tbody>
        </table>

        <input type="button" id="leaderboardBack" value="Go back" onclick="leaderboardTable.goBack()"/>
      </div>

      <div id="friends" style="display: none;">
          <div id="friendsTitle"></div>
          <table id="friendsTable">
              <thead>
              <tr>
                  <th>Avatar</th>
                  <th>Player</th>
              </tr>
              </thead>
              <tbody>
              </tbody>
          </table>
          <input type="button" id="pageFriendsPrev" value="Prev" onclick="friendsTable.showPrev()"/>
          <input type="button" id="pageFriendsNext" value="Next" onclick="friendsTable.showNext()"/>

          <input type="button" id="friendsBack" value="Go back" onclick="friendsTable.goBack()"/>
      </div>


      <div id="adminPanel" style="display: none;">
          <div id="adminNotes"><strong>Note: </strong> Only developers who are listed as testers can use these functions.</div>
          <input type="button" id="resetAchievements" value="Reset Achievements" onclick="admin.resetAchievements()"/>
          <input type="button" id="resetScores" value="Reset Scores" onclick="admin.resetScores()"/>
          <input type="button" id="adminBack" value="Go back" onclick="admin.goBack()"/>
      </div>



      <div id="achUnlocked" style="display:none;" class="unlockWidget">
        <img src="" style="float: left;" class="smallIcon"/>
        <p>Achievement unlocked!<br/>
          <span id="achName">Name</span><br/>
          <span id="achDescrip">Achievement unlocked!</span>
        </p>
      </div>
      <div id="leadUnlocked" style="display:none;" class="unlockWidget">
        <img src="" style="float: left;" class="smallIcon"/>
        <p>New high score!<br/>
          <span id="leadName">Name</span><br/>
        </p>
      </div>
    </div>


  <footer>

  </footer>


  <!-- JavaScript at the bottom for fast page loading -->
  <script>
    var apisLoaded = function() {
      console.log("Ready to init");
      login.init();
    }
  </script>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

  <!-- The game scripts -->
  <script src="js/achievementManager.js"></script>
  <script src="js/achievementTable.js"></script>
  <script src="js/achievementWidget.js"></script>
  <script src="js/admin.js"></script>
  <script src="js/challenge.js"></script>
  <script src="js/constants.js"></script>
  <script src="js/friendsTable.js"></script>
  <script src="js/game.js"></script>
  <script src="js/leaderboardManager.js"></script>
  <script src="js/leaderboardsTable.js"></script>
  <script src="js/leaderboardTable.js"></script>
  <script src="js/leaderboardWidget.js"></script>
  <script src="js/login.js"></script>
  <script src="js/player.js"></script>
  <script src="js/utils.js"></script>
  <script src="js/b64Utils.js"></script>
  <script src="js/welcome.js"></script>

  <!-- Start the process of loading the Google JavaScript client library -->
  <script src="https://apis.google.com/js/client:plusone.js?onload=apisLoaded"></script>

  <!-- end scripts -->

</body>
</html>