index.template.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title><%= productName %></title>
  5. <meta charset="utf-8">
  6. <meta name="description" content="<%= productDescription %>">
  7. <meta name="format-detection" content="telephone=no">
  8. <meta name="msapplication-tap-highlight" content="no">
  9. <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<% } %>">
  10. <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
  11. <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
  12. <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
  13. <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
  14. <link rel="icon" type="image/ico" href="favicon.ico">
  15. <style>
  16. #loader {
  17. border: 12px solid #f3f3f3;
  18. border-radius: 50%;
  19. border-top: 12px solid #444444;
  20. width: 70px;
  21. height: 70px;
  22. animation: spin 1s linear infinite;
  23. }
  24. @keyframes spin {
  25. 100% {
  26. transform: rotate(360deg);
  27. }
  28. }
  29. .center {
  30. position: absolute;
  31. top: 0;
  32. bottom: 0;
  33. left: 0;
  34. right: 0;
  35. margin: auto;
  36. }
  37. .loader-back {
  38. background-color: rgba(55,55,55,0.5);
  39. }
  40. /*to make it compatible with physics.itmo.ru*/
  41. .row {
  42. margin-left: unset;
  43. margin-right: unset;
  44. margin-bottom: unset;
  45. }
  46. .q-gutter-x-md > *, .q-gutter-md > * {
  47. margin-left: 16px !important;
  48. }
  49. .q-ml-md {
  50. margin-left: 16px !important;
  51. }
  52. #q-app header.fixed-top {position: absolute;}
  53. .q-header {
  54. z-index: 1000 !important;
  55. }
  56. .q-field__control::before, .q-field__control::after {
  57. content: "" !important;
  58. }
  59. #q-app .row::before, #q-app .row::after {
  60. content: none;
  61. display: flex;
  62. }
  63. #q-app button:hover {
  64. font-family: Roboto,-apple-system,Helvetica Neue,Helvetica,Arial,sans-serif;
  65. }
  66. #q-app a {
  67. text-decoration: none;
  68. }
  69. #q-app a:hover, #q-app a:focus {
  70. color: inherit;
  71. }
  72. .col-sm-12 {
  73. padding-left: unset;
  74. padding-right: unset;
  75. }
  76. .container {
  77. padding-left: unset;
  78. padding-right: unset;
  79. margin-left: unset;
  80. margin-right: unset;
  81. }
  82. .q-page-scroller {
  83. z-index: 1;
  84. }
  85. </style>
  86. </head>
  87. <body class="loader-back">
  88. <div id="loader" class="center"></div>
  89. <!-- DO NOT touch the following DIV -->
  90. <div id="q-app"></div>
  91. <script>
  92. document.onreadystatechange = function() {
  93. if (document.readyState !== "complete") {
  94. document.querySelector(
  95. "#loader").style.visibility = "visible";
  96. } else {
  97. document.querySelector(
  98. "#loader").style.display = "none";
  99. document.querySelector(
  100. "body").style.backgroundColor = "White";
  101. }
  102. };
  103. </script>
  104. </body>
  105. </html>