text: <html>
    <head>
      <title>Foursquare Client</title>
      <style>
        body {
          background: #fff;
          font-family: Helvetica;
          font-size: 12px;
          padding: 0;
          margin: 0;
          overflow: hidden;
        }
  
        .container {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          opacity: 0;
          -webkit-transition: opacity .2s;
        }
  
        .signed-in #signed-in,
        .signed-out #signed-out {
          opacity: 1;
        }
  
        .signed-in #signed-out,
        .signed-out #signed-in {
          display: none;
        }
  
        .header {
          background: #eee;
          border-bottom: solid 1px #ccc;
          height: 23px;
          padding: 3px;
        }
  
        .scrollable {
          width: 300px;
          height: -webkit-calc(100% - 30px);
          overflow: auto;
        }
  
        #checkins {
          list-style-type: none;
          padding: 0;
          margin: 0;
        }
  
        .checkin {
          padding: 2px;
          border-bottom: solid 1px #ccc;
          overflow: hidden;
          position: relative;
        }
  
        .checkin h3 {
          margin: 0;
          font-size: 14px;
          line-height: 20px;
          height: 20px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
  
        .checkin .photo {
          width: 40px;
          height: 40px;
          padding: 3px;
          float: left;
        }
  
        .checkin .mayor-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 18px;
          height: 17px;
        }
  
        .checkin .location {
          color: #999;
          height: 14px;
          overflow: hidden;
        }
  
        .checkin .timestamp {
          color: #999;
          font-size: 10px;
          height: 12px;
          overflow: hidden;
        }
      </style>
    </head>
    <body>
      <div id="signed-in" class="container">
        <div class="header">
          <button id="sign-out-button">Sign out</button>
        </div>
  
        <div class="scrollable">
          <ol id="checkins"></ol>
        </div>
      </div>
  
      <div id="signed-out" class="container">
        <div class="header">
          <button id="sign-in-button">Sign in with Foursquare</button>
        </div>
      </div>
  
      <script src="loader.js"></script>
      <script src="foursquare.js"></script>
      <script src="main.js"></script>
    </body>
  </html>
  