<!DOCTYPE html>
<html>
<head>
  <title>Signal</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="stylesheets/options.css">
  <link href='/images/icon_128.png' rel='shortcut icon'>
</head>
<body>
  <div id='install' class='main'>
    <div id='step1' class='step'>
      <img id='signal-icon' src='/images/icon_250.png'/>
      <div class='nav'>
        <h1 data-i18n='installWelcome'></h1>
        <p data-i18n='installTagline'></p>
        <div> <a class='button step2' data-i18n='installGetStartedButton'></a> </div>
        <span class='dot step1 selected'></span>
        <span class='dot step2'></span>
        <span class='dot step3'></span>
      </div>
    </div>

    <div id='step2' class='step'>
      <img id='signal-phone' src='/images/signal-phone.png'>
      <div class='nav'>
        <p id="installSignalLink"></p>
        <div> <a class='button step3' data-i18n='installIHaveSignalButton'></a> </div>
        <p id="installFollowUs"></p>
        <span class='dot step1'></span>
        <span class='dot step2 selected'></span>
        <span class='dot step3'></span>
      </div>
    </div>

    <div id='step3' class='step'>
      <div id="qr"></div>
      <p data-i18n='installAndroidInstructions'></p>
      <div class='nav'>
        <span class='dot step1'></span>
        <span class='dot step2'></span>
        <span class='dot step3 selected'></span>
      </div>
    </div>

    <div id='step4' class='step'>
        <p data-i18n='installLinkingWithNumber'></p>
        <h2 class='number'></h2>
        <img id='signal-computer' src='/images/signal-laptop.png'>
        <p data-i18n='installComputerName'></p>
        <div>
          <input type='text' id='device-name' spellcheck='false'></input>
        </div>
        <div class='nav'>
          <div> <a class='button' id='sync' data-i18n='installFinalButton'></a> </div>
        </div>
    </div>

    <div id='step5' class='step'>
      <img id='signal-icon' src='/images/icon_250.png'/>
      <div class='progress-dialog'>
        <p class='status'></p>
        <div class='bar-container'><div class='bar progress-bar'></div></div>
      </div>
      <div class='nav'>
      </div>
    </div>

    <div id='stepTooManyDevices' class='step'>
      <div class='error-dialog clearfix'>
        <div class='panel' data-i18n='installTooManyDevices'></div>
        <div class='nav'>
          <button class='ok step3' data-i18n='ok'></button>
        </div>
      </div>
    </div>

  </div>

  <script type="text/javascript" src="js/components.js"></script>
  <script type="text/javascript" src="js/database.js"></script>

  <script type="text/javascript" src="js/libphonenumber-util.js"></script>
  <script type="text/javascript" src="js/models/messages.js"></script>
  <script type="text/javascript" src="js/models/conversations.js"></script>

  <script type="text/javascript" src="js/chromium.js"></script>
  <script type="text/javascript" src="js/views/whisper_view.js"></script>
  <script type="text/javascript" src="js/views/phone-input-view.js"></script>
  <script type="text/javascript" src="js/views/install_view.js"></script>
  <script type="text/javascript" src="js/options.js"></script>
</body>
</html>