index.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  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. margin-left: -1.5em;
  51. transform: translateZ(-2em);
  52. }
  53. #throbber {
  54. display: grid;
  55. width: calc(5em * 0.5 * var(--scale));
  56. height: calc(8em * 0.5 * var(--scale));
  57. margin-left: 4.1em;
  58. z-index: 2;
  59. grid-template-rows: repeat(8, 1fr);
  60. grid-template-columns: repeat(5, 1fr);
  61. grid-template-areas: "P P L L L L"
  62. "P P L L L L"
  63. "P P . . . ."
  64. "P P . . . ."
  65. "P P . . . ."
  66. "P P . . . ."
  67. "P P E E E E"
  68. "P P E E E E";
  69. }
  70. .chunk {
  71. background-color: #e2b188;
  72. box-shadow: 0.01em 0.01em 0.1em 0 #e2b188;
  73. }
  74. #chunk-P {
  75. grid-area: P;
  76. border-top-left-radius: calc(var(--logoChunkSize) / 2);
  77. }
  78. #chunk-L {
  79. grid-area: L;
  80. border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
  81. }
  82. #chunk-E {
  83. grid-area: E;
  84. border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
  85. }
  86. #status {
  87. margin-top: 1em;
  88. line-height: 2;
  89. width: 100%;
  90. text-align: center;
  91. }
  92. @media (prefers-reduced-motion) {
  93. #throbber {
  94. animation: none !important;
  95. }
  96. }
  97. </style>
  98. <style id="pleroma-eager-styles" type="text/css"></style>
  99. <style id="pleroma-lazy-styles" type="text/css"></style>
  100. <!--server-generated-meta-->
  101. </head>
  102. <body style="margin: 0; padding: 0">
  103. <noscript>To use Pleroma, please enable JavaScript.</noscript>
  104. <div id="splash">
  105. <!-- we are hiding entire graphic so no point showing credit -->
  106. <div aria-hidden="true" id="splash-credit">
  107. Art by pipivovott
  108. </div>
  109. <div id="splash-container">
  110. <div aria-hidden="true" id="mascot-container">
  111. <div id="throbber">
  112. <div class="chunk" id="chunk-P">
  113. </div>
  114. <div class="chunk" id="chunk-L">
  115. </div>
  116. <div class="chunk" id="chunk-E">
  117. </div>
  118. </div>
  119. <img id="mascot" src="/static/pleromatan_apology.png">
  120. </div>
  121. <div id="status" class="css-ok">
  122. <!-- (。>﹏<) -->
  123. <!-- it's a pseudographic, don't want screenreader read out nonsense -->
  124. <span aria-hidden="true" class="initial-text">(╥‸╥)</span>
  125. </div>
  126. </div>
  127. </div>
  128. <div id="app" class="hidden"></div>
  129. <div id="modal"></div>
  130. <!-- built files will be auto injected -->
  131. <div id="popovers" />
  132. </body>
  133. </html>