<!--
  ~ 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>

<head>
  <meta charset="utf-8">
  <title>DLab</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=9;IE=10;IE=Edge,chrome=1" />
  <meta name="format-detection" content="telephone=no" />
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <style type="text/css">
    body,
    html {
      height: 100%;
    }

    .app-loading {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

    .app-loading .spinner {
      height: 200px;
      width: 200px;
      animation: rotate 2s linear infinite;
      transform-origin: center center;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }

    .app-loading .spinner .path {
      stroke-dasharray: 20, 200;
      stroke-dashoffset: 0;
      animation: dash 1.5s ease-in-out infinite;
      stroke-linecap: round;
      stroke: #35afd5;
    }

    @keyframes rotate {
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes dash {
      0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
      }

      50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
      }

      100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
      }
    }

  </style>
</head>

<body>
  <app-root>
    <div class="app-loading">
      <div class="logo">
        <svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 140.5 47.1" width="100px" height="100px"
          style="enable-background:new 0 0 140.5 47.1;" xml:space="preserve">
          <path fill="#35AFD5"
            d="M0.9,46C0.3,45.4,0,44.6,0,43.7V3.1c0-0.8,0.3-1.7,0.9-2.2C1.5,0.3,2.3,0,3.1,0H14c4.2-0.1,8.3,1,12,3 c3.5,1.9,6.3,4.8,8.2,8.3c2,3.7,3,7.9,3,12.1c0.1,4.2-0.9,8.4-2.9,12.1c-1.9,3.5-4.8,6.4-8.3,8.3c-3.7,2-7.8,3.1-12.1,3H3.1 C2.3,46.9,1.5,46.6,0.9,46z M14,41.3c3.1,0.1,6.2-0.7,8.9-2.3c2.6-1.5,4.7-3.7,6.1-6.4c1.5-2.9,2.2-6,2.2-9.3 c0.1-3.2-0.7-6.4-2.2-9.2c-1.4-2.7-3.5-4.9-6.1-6.4c-2.7-1.5-5.8-2.3-8.9-2.3H6.2v35.8H14z M41.8,46.2C41.3,45.6,41,44.8,41,44V3.4 c0-0.8,0.3-1.6,0.9-2.2c0.6-0.6,1.3-0.9,2.1-0.9c1.7,0,3.1,1.3,3.1,3c0,0,0,0.1,0,0.1v37.5h21.8c1.7,0,3.1,1.4,3.1,3.1 c0,1.7-1.4,3.1-3.1,3.1c0,0,0,0,0,0H44C43.2,47.1,42.4,46.8,41.8,46.2z M96.2,16c2.5,1.4,4.5,3.5,5.9,6c1.5,2.6,2.2,5.5,2.2,8.5 v13.4c0,1.7-1.4,3.1-3.1,3.1c-1.7,0-3.1-1.4-3.1-3.1v-2.2c-4.8,5.7-13,7.1-19.4,3.3c-2.4-1.5-4.3-3.5-5.5-6c-1.4-2.6-2-5.5-2-8.5 c0-3,0.7-5.9,2.1-8.4c1.4-2.5,3.5-4.6,6-6c2.6-1.5,5.5-2.2,8.4-2.2C90.7,13.8,93.6,14.5,96.2,16z M93.2,40.2c1.6-1,2.9-2.3,3.8-4 c0.9-1.8,1.4-3.7,1.4-5.7c0-2-0.5-4-1.4-5.8c-2.8-5.1-9.2-7-14.4-4.2c-0.1,0.1-0.2,0.1-0.3,0.2c-1.6,1-2.9,2.3-3.8,4 c-1,1.8-1.4,3.8-1.4,5.8c0,2,0.5,4,1.4,5.7c0.9,1.7,2.2,3,3.8,4C85.7,42.2,89.8,42.2,93.2,40.2L93.2,40.2z M132.9,16 c2.4,1.5,4.3,3.5,5.5,6c1.4,2.6,2,5.5,2,8.5c0,3-0.7,5.9-2.2,8.5c-1.4,2.5-3.5,4.6-6,6c-2.6,1.5-5.5,2.2-8.4,2.2 c-5.9,0.1-11.4-3.1-14.3-8.2c-1.5-2.6-2.2-5.5-2.2-8.5V3.1c0-0.8,0.3-1.6,0.9-2.2c1.3-1.1,3.2-1.1,4.4,0c0.6,0.6,0.9,1.4,0.8,2.2 v16.2C118.3,13.5,126.5,12.1,132.9,16z M129.3,40.3c1.6-1,2.9-2.4,3.8-4c1-1.8,1.4-3.8,1.4-5.8c0-2-0.5-4-1.4-5.7 c-0.9-1.7-2.2-3-3.8-4c-4.9-3-11.4-1.4-14.4,3.5c-0.1,0.2-0.2,0.3-0.3,0.5c-0.9,1.8-1.4,3.7-1.4,5.7c0,2,0.4,4,1.4,5.8 c2.8,5.1,9.2,7,14.4,4.2C129.1,40.4,129.2,40.3,129.3,40.3z M41,0.1h6.2v5.3H41V0.1z M0,0h6.1v5.3H0V0z M0,41.5h6.1v5.3H0V41.5z  M65.9,40.9H72v6.2h-6.1V40.9z M41,41.9h3.5v5.2H41V41.9z M98.2,41.3h6.1v5.6h-6.1V41.3z M107.4,0h6.1v5.4h-6.1V0z" />
        </svg>
      </div>
      <svg class="spinner" viewBox="25 25 50 50">
        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="1" stroke-miterlimit="10" />
      </svg>
    </div>
  </app-root>
</body>

</html>