<!DOCTYPE html>
<html>
  <head>
    <title><%= productName %></title>

    <meta charset="utf-8">
    <meta name="description" content="<%= productDescription %>">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">

    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
    <link rel="icon" type="image/ico" href="favicon.ico">
          <style>
              #loader {
                  border: 12px solid #f3f3f3;
                  border-radius: 50%;
                  border-top: 12px solid #444444;
                  width: 70px;

                  height: 70px;
                  animation: spin 1s linear infinite;
              }

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

              .center {
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  right: 0;
                  margin: auto;
              }
              .loader-back {
                  background-color: rgba(55,55,55,0.5);
              }
              /*to make it compatible with physics.itmo.ru*/
      .row {
          margin-left: unset;
          margin-right: unset;
          margin-bottom: unset;
      }
      .q-gutter-x-md > *, .q-gutter-md > * {
          margin-left: 16px !important;
      }
      .q-ml-md {
          margin-left: 16px !important;
      }
      #q-app header.fixed-top {position: absolute;}
      .q-header {
          z-index: 1000 !important;
      }
      .q-field__control::before, .q-field__control::after {
          content: "" !important;
      }
      #q-app .row::before, #q-app .row::after {
          content: none;
          display: flex;
      }
      #q-app button:hover {
          font-family: Roboto,-apple-system,Helvetica Neue,Helvetica,Arial,sans-serif;
      }
      #q-app a {
          text-decoration: none;
      }
      #q-app a:hover, #q-app a:focus {
          color: inherit;
      }
      .col-sm-12 {
          padding-left: unset;
          padding-right: unset;
      }
      .container {
          padding-left: unset;
          padding-right: unset;
          margin-left: unset;
          margin-right: unset;
      }
      .q-page-scroller {
          z-index: 1;
      }
      </style>

  </head>
  <body class="loader-back">
      <div id="loader" class="center"></div>
  <!-- DO NOT touch the following DIV -->
    <div id="q-app"></div>
  <script>
      document.onreadystatechange = function() {
          if (document.readyState !== "complete") {
              document.querySelector(
                  "#loader").style.visibility = "visible";
          } else {
              document.querySelector(
                  "#loader").style.display = "none";
              document.querySelector(
                  "body").style.backgroundColor = "White";

          }
      };
  </script>
  </body>
</html>
