index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, minimum-scale=0.75, maximum-scale=1"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <title>Slithering</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/snake.css">
  <link rel="apple-touch-icon" type="image/png" href="img/icon-128.png" sizes="128x128">
  <link rel="icon" type="image/png" href="img/icon-32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="img/icon-16.png">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script src="js/jquery.snake.js"></script>
  <script src="js/common.js"></script>
</head>
<body>
<div id="inner-body">
  <div id="share">
    <iframe id="tweet-button" allowtransparency="true" frameborder="0" scrolling="no"
            style="width:58px; height:20px;"
            data-url="https://marketplace.firefox.com/app/slithering/" data-text="I'm playing Slithering" data-via="firefox" data-hashtags="apps"></iframe>
  </div>

  <h1>Slithering</h1>
  <div id="snake-col-map">
    <div id="controls">
      <button id="controls-up" class="controls-vertical" onmousedown="Snake.changeDirection(Snake.direction.up)"></button>
      <button id="controls-down" class="controls-vertical" onmousedown="Snake.changeDirection(Snake.direction.down)"></button>
      <button id="controls-left" class="controls-horizontal" onmousedown="Snake.changeDirection(Snake.direction.left)"></button>
      <button id="controls-right" class="controls-horizontal" onmousedown="Snake.changeDirection(Snake.direction.right)"></button>
    </div>
    <div id="map1">
      <span id="map-msg">
        <!-- click to give focus to the document -->
        <a href="#start" id="start-game" class="button">Start game!</a>
      </span>
    </div>
    <div id="stats">
      <span class="right">Eaten:
        <span id="stats-eaten">0</span> /
        <span id="stats-totcherries">0</span>
      </span>
      Level: <span id="stats-level">0</span> |
      Lives: <span id="stats-lives">0</span> |
      Score: <span id="stats-score">0</span> |
      Time Bonus: <span id="stats-bonus">0</span>
    </div>
  </div>

  <div id="meta">
    <section id="instructions">
      <h2>Game instructions</h2>
      <p><img src="img/slithering.png" align="right" height="120" width="120" />
      Use the keyboard arrow keys to control the snake. Eat the specified amount of cherries to advance to the next level,
      without slithering into yourself or a wall. The speed and length of the snake will increase with every cherry eaten.
      The game ends when you have used up all of your lives, or when you finish all levels.
      </p>
    </section>

    <section id="shortcut-keys">
      <h2>Shortcut keys</h2>
      <ul class="keyboard">
        <li>Press <span class="key" onclick="Snake.pause();">P</span> to <span class="shortcut">P</span>ause/Resume Game</li>
        <li>Press <span class="key" onclick="Snake.newGame(true);">N</span> to start a <span class="shortcut">N</span>ew Game</li>
        <!-- <li>Press <span class="key" onclick="Snake.toggleGrid();">G</span> to Toggle <span class="shortcut">G</span>rid</li> -->
      </ul>
      <ul class="touch">
        <li class="key" onclick="Snake.pause();">Pause</li>
        <li class="key" onclick="Snake.newGame(true);">New Game</li>
      </ul>
    </section>
    <section id="installer" class="installed">
      <h2>Install this application</h2>
      <div>
        <p>With Mozilla Firefox, you can install this game to your computer for use while you're disconnected from the internet. Learn more at <a href="https://marketplace.firefox.com/app/slithering/">the Firefox Marketplace</a>.</p>
        <a class="button" onclick="install()" >Install</a>
      </div>
    </section>
    <section class="notInstalledYet">
      <h2>Application installed</h2>
      <div>
        <p>Slithering has now been installed. If you are on Windows, find it in your Start Menu. On Mac OS X find it in your Applications folder. Have fun!</p>
      </div>
    </section>
  </div>
  <div class="clear"></div>
  </div>
  <div id="purchaseNowOverlay">
    <div id="purchaseNow">
      <h2>Get Slithering today</h2>
      <div>
        <p>Get this app along with many other fan favorites today at the Firefox Marketplace.</p>
        <a class="button" href="https://marketplace.firefox.com/app/slithering/">Get Slithering</a>
      </div>
    </div>
</div>
</body>
</html>