<!--
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="/">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>LENS UI</title>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- style for the loader till JavaScript downloads-->
    <style>
      .loading-no-js {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .loading-bar {
        display: inline-block;
        width: 6px;
        height: 36px;
        border-radius: 4px;
        animation: loading 1s ease-in-out infinite;
      }
      .loading-bar:nth-child(1) {
        background-color: #3498db;
        animation-delay: 0;
      }
      .loading-bar:nth-child(2) {
        background-color: #c0392b;
        animation-delay: 0.09s;
      }
      .loading-bar:nth-child(3) {
        background-color: #f1c40f;
        animation-delay: .18s;
      }
      .loading-bar:nth-child(4) {
        background-color: #27ae60;
        animation-delay: .27s;
      }

      @keyframes loading {
        0% {
          transform: scale(1);
        }
        20% {
          transform: scale(1, 2.2);
        }
        40% {
          transform: scale(1);
        }
      }
    </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  </head>
  <body>

  <div class="loading-no-js" id="loader-no-js">
    <div class="loading-bar"></div>
    <div class="loading-bar"></div>
    <div class="loading-bar"></div>
    <div class="loading-bar"></div>
  </div>

    <!-- everything goes into this section. Do anything but touch this. I dare you!-->
    <section id="app">

    </section>

    <script src="target/assets/bundle.js"></script>
  </body>
</html>