<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Home Assistant Demo</title>
    <meta name="description" content="Open-source home automation platform running on Python 3 and Polymer.">
    <link rel='manifest' href='/demo/manifest.json' />
    <link rel='shortcut icon' href='/demo/favicon.ico' />
    <link rel='icon' type='image/png'
         href='/demo/favicon-192x192.png' sizes='192x192'>
    <link rel='apple-touch-icon' sizes='180x180'
         href='/demo/favicon-apple-180x180.png'>
    <meta name='apple-mobile-web-app-capable' content='yes'>
    <meta name='mobile-web-app-capable' content='yes'>
    <meta name='viewport' content='width=device-width,
          user-scalable=no' />
    <meta name='theme-color' content='#03a9f4'>
    <style>
      body {
        font-family: 'Roboto', 'Noto', sans-serif;
        font-weight: 300;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
      }

      #ha-init-skeleton {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        -webkit-justify-content: center;
        -webkit-align-items: center;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin-bottom: 83px;
        font-family: Roboto, sans-serif;
        font-size: 0pt;
        transition: font-size 2s;
      }

      #ha-init-skeleton paper-spinner {
        height: 28px;
        margin-top: 16px;
      }

      #ha-init-skeleton a {
        color: #03A9F4;
        text-decoration: none;
        font-weight: bold;
      }

      #ha-init-skeleton.error {
        font-size: 16px;
      }

      #ha-init-skeleton.error img,
      #ha-init-skeleton.error paper-spinner {
        display: none;
      }
    </style>
    <script>
      function initError() {
        document
          .getElementById('ha-init-skeleton')
          .classList.add('error');
      };
      window.noAuth = true;
      window.Polymer = {lazyRegister: true, useNativeCSSProperties: true, dom: 'shady'}
    </script>
  </head>
  <body fullbleed>
    <div id='ha-init-skeleton'>
      <img src='/static/favicon-192x192.png' height='192'>
      <paper-spinner active></paper-spinner>
      Home Assistant had trouble<br>connecting to the server.<br><br><a href='/demo/'>TRY AGAIN</a>
    </div>
    <script>
      var webComponentsSupported = (
        'registerElement' in document &&
        'import' in document.createElement('link') &&
        'content' in document.createElement('template'));
      if (!webComponentsSupported) {
        var script = document.createElement('script')
        script.async = true
        script.onerror = initError;
        script.src = '/demo/webcomponents-lite.min.js'
        document.head.appendChild(script)
      }
    </script>
    <home-assistant auth='no_password_set' icons='demo'></home-assistant>
    <script src='/demo/data.js'></script>
    <script src='/demo/core.js'></script>
    <link rel='import' href='/demo/frontend.html' onerror='initError()' async />
    <link rel='import' href='/static/mdi-demo.html' async />
    <script>
      var _gaq=[['_setAccount','UA-57927901-1'],['_trackPageview']];
      (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
      g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
      s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>
  </body>
</html>