index.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
  6. <link rel="icon" type="image/png" href="/favicon.png">
  7. <!-- putting styles here to avoid having to wait for styles to load up -->
  8. <style id="splashscreen">
  9. #splash {
  10. --scale: 1;
  11. width: 100vw;
  12. height: 100vh;
  13. display: grid;
  14. grid-template-rows: auto;
  15. grid-template-columns: auto;
  16. align-content: center;
  17. align-items: center;
  18. justify-content: center;
  19. justify-items: center;
  20. flex-direction: column;
  21. background: #0f161e;
  22. font-family: sans-serif;
  23. color: #b9b9ba;
  24. position: absolute;
  25. z-index: 9999;
  26. font-size: calc(1vw + 1vh + 1vmin);
  27. }
  28. #splash-credit {
  29. position: absolute;
  30. font-size: 14px;
  31. bottom: 16px;
  32. right: 16px;
  33. }
  34. #splash-container {
  35. align-items: center;
  36. }
  37. #mascot-container {
  38. display: flex;
  39. align-items: flex-end;
  40. justify-content: center;
  41. perspective: 60em;
  42. perspective-origin: 0 -15em;
  43. transform-style: preserve-3d;
  44. }
  45. #mascot {
  46. width: calc(10em * var(--scale));
  47. height: calc(10em * var(--scale));
  48. object-fit: contain;
  49. object-position: bottom;
  50. transform: translateZ(-2em);
  51. }
  52. #throbber {
  53. display: grid;
  54. width: calc(5em * 0.5 * var(--scale));
  55. height: calc(8em * 0.5 * var(--scale));
  56. margin-left: 4.1em;
  57. z-index: 2;
  58. grid-template-rows: repeat(8, 1fr);
  59. grid-template-columns: repeat(5, 1fr);
  60. grid-template-areas: "P P . L L"
  61. "P P . L L"
  62. "P P . L L"
  63. "P P . L L"
  64. "P P . . ."
  65. "P P . . ."
  66. "P P . E E"
  67. "P P . E E";
  68. }
  69. .chunk {
  70. background-color: #e2b188;
  71. box-shadow: 0.01em 0.01em 0.1em 0 #e2b188;
  72. }
  73. #chunk-P {
  74. grid-area: P;
  75. border-top-left-radius: calc(var(--logoChunkSize) / 2);
  76. }
  77. #chunk-L {
  78. grid-area: L;
  79. border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
  80. }
  81. #chunk-E {
  82. grid-area: E;
  83. border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
  84. }
  85. #status {
  86. margin-top: 1em;
  87. line-height: 2;
  88. width: 100%;
  89. text-align: center;
  90. }
  91. @media (prefers-reduced-motion) {
  92. #throbber {
  93. animation: none !important;
  94. }
  95. }
  96. </style>
  97. <style id="pleroma-eager-styles" type="text/css"></style>
  98. <style id="pleroma-lazy-styles" type="text/css"></style>
  99. <!--server-generated-meta-->
  100. </head>
  101. <body style="margin: 0; padding: 0">
  102. <noscript>To use Pleroma, please enable JavaScript.</noscript>
  103. <div id="splash">
  104. <!-- we are hiding entire graphic so no point showing credit -->
  105. <div aria-hidden="true" id="splash-credit">
  106. Art by pipivovott
  107. </div>
  108. <div id="splash-container">
  109. <div aria-hidden="true" id="mascot-container">
  110. <div id="throbber">
  111. <div class="chunk" id="chunk-P">
  112. </div>
  113. <div class="chunk" id="chunk-L">
  114. </div>
  115. <div class="chunk" id="chunk-E">
  116. </div>
  117. </div>
  118. <img id="mascot" src="/static/pleromatan_apology.png">
  119. </div>
  120. <div id="status" class="css-ok">
  121. <!-- (。>﹏<) -->
  122. <!-- it's a pseudographic, don't want screenreader read out nonsense -->
  123. <span aria-hidden="true" class="initial-text">(。&gt;﹏&lt;)</span>
  124. </div>
  125. </div>
  126. </div>
  127. <div id="app" class="hidden"></div>
  128. <div id="modal"></div>
  129. <!-- built files will be auto injected -->
  130. <div id="popovers" />
  131. </body>
  132. </html>