mail/src/tpl/add-account.html

<div class="view-add-account">

  <h1>Select email account</h1>

  <ul>
    <li class="whiteout disabled" popover="#whiteout-info" wo-touch="onError({message:'Whiteout Mailbox coming soon!', sync:true})">
      <div><img src="img/whiteout_logo.svg" alt="Whiteout Mailbox"></div>
    </li>
    <li class="google" popover="#google-info" wo-touch="connectToGoogle()">
      <div><img src="img/google_logo.png" alt="Google Mail"></div>
    </li>
    <li class="outlook" popover="#outlook-info" wo-touch="connectToOutlook()">
      <div><img src="img/outlook_logo.jpg" alt="Outlook.com"></div>
    </li>
    <li class="yahoo" popover="#yahoo-info" wo-touch="connectToYahoo()">
      <div><img src="img/yahoo_logo.png" alt="Yahoo! Mail"></div>
    </li>
    <li class="gmx" popover="#gmx-info" wo-touch="connectToGmx()">
      <div><img src="img/gmx_logo.jpg" alt="GMX.net"></div>
    </li>
    <li class="webde" popover="#webde-info" wo-touch="connectToWebde()">
      <div><img src="img/webde_logo.jpg" alt="Web.de"></div>
    </li>
    <li class="tonline" popover="#tonline-info" wo-touch="connectToTonline()">
      <div><img src="img/tonline_logo.jpg" alt="T-Online"></div>
    </li>
    <li class="other" popover="#custom-info" wo-touch="connectOther()">
      <h3>Custom server...</h3>
    </li>
  </ul>

</div>

<!-- popovers -->
<div id="google-info" class="popover right desktop-only" ng-controller="PopoverCtrl">
  <div class="arrow"></div>
  <div class="popover-title"><b>Google Account</b></div>
  <div class="popover-content">
    <p>Connect Whiteout Mail to your Gmail or Google Apps account.</p>
    <p>Encrypted and cleartext messages are stored on Google's servers.</p>
    <p>Your emails and password remain on your device and are never sent to our servers.</p>
  </div>
</div><!--/.popover-->

<div id="whiteout-info" class="popover right desktop-only" ng-controller="PopoverCtrl">
  <div class="arrow"></div>
  <div class="popover-title"><b>Whiteout Mailbox (coming soon)</b></div>
  <div class="popover-content">
    <p>Connect Whiteout Mail to your fully encrypted Whiteout Mailbox (hosted in Europe).</p>
    <p>Incoming cleartext messages are encrypted with your public PGP key before being stored in your inbox.</p>
    <p>This way your email is protected against hackers and can only be read on your device.</p>
  </div>
</div><!--/.popover-->

<div id="yahoo-info" class="popover right desktop-only" ng-controller="PopoverCtrl">
  <div class="arrow"></div>
  <div class="popover-title"><b>Yahoo Mail</b></div>
  <div class="popover-content">
    <p>Connect Whiteout Mail to your Yahoo Mail account.</p>
    <p>Encrypted and cleartext messages are stored on Yahoo's servers.</p>
    <p>Your emails and password remain on your device and are never sent to our servers.</p>
  </div>
</div><!--/.popover-->

<div id="tonline-info" class="popover right desktop-only" ng-controller="PopoverCtrl">
  <div class="arrow"></div>
  <div class="popover-title"><b>T-Online Account</b></div>
  <div class="popover-content">
    <p>Connect Whiteout Mail to your T-Online account.</p>
    <p>Encrypted and cleartext messages are stored on T-Online's servers.</p>
    <p>Your emails and password remain on your device and are never sent to our servers.</p>
  </div>
</div><!--/.popover-->

<div id="outlook-info" class="popover right desktop-only" ng-controller="PopoverCtrl">
  <div class="arrow"></div>
  <div class="popover-title"><b>Outlook.com Account</b></div>
  <div class="popover-content">
    <p>Connect Whiteout Mail to your Outlook.com account.</p>
    <p>Encrypted and cleartext messages are stored on Microsoft's servers.</p>
    <p>Your emails and password remain on your device and are never sent to our servers.</p>
  </div>
</div><!--/.popover-->

<div id="gmx-info" class="popover right desktop-only" ng-controller="PopoverCtrl">
  <div class="arrow"></div>
  <div class="popover-title"><b>GMX.net Account</b></div>
  <div class="popover-content">
    <p>Connect Whiteout Mail to your GMX.net account.</p>
    <p>Encrypted and cleartext messages are stored on GMX's servers.</p>
    <p>Your emails and password remain on your device and are never sent to our servers.</p>
  </div>
</div><!--/.popover-->

<div id="webde-info" class="popover right desktop-only" ng-controller="PopoverCtrl">
  <div class="arrow"></div>
  <div class="popover-title"><b>Web.de Account</b></div>
  <div class="popover-content">
    <p>Connect Whiteout Mail to your Web.de account.</p>
    <p>Encrypted and cleartext messages are stored on Web.de's servers.</p>
    <p>Your emails and password remain on your device and are never sent to our servers.</p>
  </div>
</div><!--/.popover-->

<div id="custom-info" class="popover right desktop-only" ng-controller="PopoverCtrl">
  <div class="arrow"></div>
  <div class="popover-title"><b>Custom server</b></div>
  <div class="popover-content">
    <p>Connect Whiteout Mail to your own email server.</p>
    <p>Encrypted and cleartext messages are stored on your server.</p>
    <p>Your emails and password remain on your device and are never sent to our servers.</p>
  </div>
</div><!--/.popover-->