<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Lazy Loading</title>
  <style>
    body {
      text-align: center
    }

    a {
        text-decoration: none;
        color: black;
    }

    .previous {
        box-sizing: border-box;
        position: relative;
        width: 2em;
        height: 2em;
        border: .2em solid #000;
        border-radius: 50%;
        position: fixed;
        left: 10px;
        top: 10px;
    }
    .previous:before {
        box-sizing: border-box;
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        margin-top: auto;
        margin-bottom: auto;
        margin-left: -.65em;
        width: 0;
        height: 0;
        border-top: .45em solid transparent;
        border-bottom: .45em solid transparent;
        border-right: .6em solid #000;
    }
    .previous:after {
        box-sizing: border-box;
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        margin-top: auto;
        margin-bottom: auto;
        margin-left: -.2em;
        width: 0;
        height: 0;
        border-top: .45em solid transparent;
        border-bottom: .45em solid transparent;
        border-right: .6em solid #000;
    }
  </style>
</head>

<body>
  
  {% if url %}
      <p>
        <a href="{{request.scheme}}://{{request.get_host}}{{ url }}">{{request.scheme}}://{{request.get_host}}{{ url }}</a>
        loading... 
      </p>


      <div class="loader" title="ttl: {{ ttl }}">

        <svg width="200px"  height="200px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-cube" style="background: none;"><g transform="translate(25,25)"><rect ng-attr-x="{{config.dp}}" ng-attr-y="{{config.dp}}" ng-attr-width="{{config.blockSize}}" ng-attr-height="{{config.blockSize}}" ng-attr-fill="{{config.c1}}" x="-17.5" y="-17.5" width="35" height="35" fill="#ffb6bb" transform="scale(1.2581 1.2581)"><animateTransform attributeName="transform" type="scale" calcMode="spline" values="1.5;1" keyTimes="0;1" dur="1s" keySplines="0 0.5 0.5 1" begin="-0.3s" repeatCount="indefinite"></animateTransform></rect></g><g transform="translate(75,25)"><rect ng-attr-x="{{config.dp}}" ng-attr-y="{{config.dp}}" ng-attr-width="{{config.blockSize}}" ng-attr-height="{{config.blockSize}}" ng-attr-fill="{{config.c2}}" x="-17.5" y="-17.5" width="35" height="35" fill="#ffe691" transform="scale(1.35895 1.35895)"><animateTransform attributeName="transform" type="scale" calcMode="spline" values="1.5;1" keyTimes="0;1" dur="1s" keySplines="0 0.5 0.5 1" begin="-0.2s" repeatCount="indefinite"></animateTransform></rect></g><g transform="translate(25,75)"><rect ng-attr-x="{{config.dp}}" ng-attr-y="{{config.dp}}" ng-attr-width="{{config.blockSize}}" ng-attr-height="{{config.blockSize}}" ng-attr-fill="{{config.c3}}" x="-17.5" y="-17.5" width="35" height="35" fill="#95d5ee" transform="scale(1.0073 1.0073)"><animateTransform attributeName="transform" type="scale" calcMode="spline" values="1.5;1" keyTimes="0;1" dur="1s" keySplines="0 0.5 0.5 1" begin="0s" repeatCount="indefinite"></animateTransform></rect></g><g transform="translate(75,75)"><rect ng-attr-x="{{config.dp}}" ng-attr-y="{{config.dp}}" ng-attr-width="{{config.blockSize}}" ng-attr-height="{{config.blockSize}}" ng-attr-fill="{{config.c4}}" x="-17.5" y="-17.5" width="35" height="35" fill="#585872" transform="scale(1.00084 1.00084)"><animateTransform attributeName="transform" type="scale" calcMode="spline" values="1.5;1" keyTimes="0;1" dur="1s" keySplines="0 0.5 0.5 1" begin="-0.1s" repeatCount="indefinite"></animateTransform></rect></g></svg>

      </div>

      <script>
          setTimeout(function () {
              top.location.reload()
          }, '{{ polling_seconds }}' * 1000)
      </script>
      
  {% else %}
      Page not found or is expired!
  {% endif %}

  <p>
    <a href="#" onclick="history.back(-1);" class="previous">&nbsp;&nbsp;&nbsp;&nbsp;</a>
  </p>


</body>
</html>
