logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://anongit.hacktivis.me/git/pleroma-fe.git/

index.html (4545B)

    

  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.     <!-- putting styles here to avoid having to wait for styles to load up -->
  7.     <style id="splashscreen">
  8.      #splash {
  9.        --scale: 1;
  10.        width: 100vw;
  11.        height: 100vh;
  12.        display: grid;
  13.        grid-template-rows: auto;
  14.        grid-template-columns: auto;
  15.        align-content: center;
  16.        align-items: center;
  17.        justify-content: center;
  18.        justify-items: center;
  19.        flex-direction: column;
  20.        background: #0f161e;
  21.        font-family: sans-serif;
  22.        color: #b9b9ba;
  23.        position: absolute;
  24.        z-index: 9999;
  25.        font-size: calc(1vw + 1vh + 1vmin);
  26.      }
  28.      #splash-credit {
  29.        position: absolute;
  30.        font-size: 14px;
  31.        bottom: 16px;
  32.        right: 16px;
  33.      }
  35.      #splash-container {
  36.        align-items: center;
  37.      }
  39.      #mascot-container {
  40.        display: flex;
  41.        align-items: flex-end;
  42.        justify-content: center;
  43.        perspective: 60em;
  44.        perspective-origin: 0 -15em;
  45.        transform-style: preserve-3d;
  46.      }
  48.      #mascot {
  49.        width: calc(10em * var(--scale));
  50.        height: calc(10em * var(--scale));
  51.        object-fit: contain;
  52.        object-position: bottom;
  53.        transform: translateZ(-2em);
  54.      }
  56.      #throbber {
  57.        display: grid;
  58.        width: calc(5em * 0.5 * var(--scale));
  59.        height: calc(8em * 0.5 * var(--scale));
  60.        margin-left: 4.1em;
  61.        z-index: 2;
  62.        grid-template-rows: repeat(8, 1fr);
  63.        grid-template-columns: repeat(5, 1fr);
  64.        grid-template-areas: "P P . L L"
  65.                             "P P . L L"
  66.                             "P P . L L"
  67.                             "P P . L L"
  68.                             "P P . . ."
  69.                             "P P . . ."
  70.                             "P P . E E"
  71.                             "P P . E E";
  73.        --logoChunkSize: calc(2em * 0.5 * var(--scale))
  74.      }
  76.      .chunk {
  77.        background-color: #e2b188;
  78.        box-shadow: 0.01em 0.01em 0.1em 0 #e2b188;
  79.      }
  81.      #chunk-P {
  82.        grid-area: P;
  83.        border-top-left-radius:  calc(var(--logoChunkSize) / 2);
  84.      }
  86.      #chunk-L {
  87.        grid-area: L;
  88.        border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
  89.      }
  91.      #chunk-E {
  92.        grid-area: E;
  93.        border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
  94.      }
  96.      #status {
  97.        margin-top: 1em;
  98.        line-height: 2;
  99.        width: 100%;
  100.        text-align: center;
  101.      }
  103.      #statusError {
  104.        display: none;
  105.        margin-top: 1em;
  106.        font-size: calc(1vw + 1vh + 1vmin);
  107.        line-height: 2;
  108.        width: 100%;
  109.        text-align: center;
  110.      }
  112.      #statusStack {
  113.        display: none;
  114.        margin-top: 1em;
  115.        font-size: calc((1vw + 1vh + 1vmin) / 2.5);
  116.        width: calc(100vw - 5em);
  117.        padding: 1em;
  118.        text-overflow: ellipsis;
  119.        overflow-x: hidden;
  120.        text-align: left;
  121.        line-height: 2;
  122.      }
  124.      @media (prefers-reduced-motion) {
  125.        #throbber {
  126.          animation: none !important;
  127.        }
  128.      }
  129.     </style>
  130.     <style id="pleroma-eager-styles" type="text/css"></style>
  131.     <style id="pleroma-lazy-styles" type="text/css"></style>
  132.     <!--server-generated-meta-->
  133.   </head>
  134.   <body style="margin: 0; padding: 0">
  135.     <noscript>To use Pleroma, please enable JavaScript.</noscript>
  136.     <div id="splash">
  137.       <!-- we are hiding entire graphic so no point showing credit -->
  138.       <div aria-hidden="true" id="splash-credit">
  139.         Art by pipivovott
  140.       </div>
  141.       <div id="splash-container">
  142.         <div aria-hidden="true" id="mascot-container">
  143.           <div id="throbber">
  144.             <div class="chunk" id="chunk-P">
  145.             </div>
  146.             <div class="chunk" id="chunk-L">
  147.             </div>
  148.             <div class="chunk" id="chunk-E">
  149.             </div>
  150.           </div>
  151.           <img id="mascot" src="/static/pleromatan_apology.png">
  152.         </div>
  153.         <div id="status" class="css-ok">
  154.           <!-- (｡>﹏<) -->
  155.           <!-- it's a pseudographic, don't want screenreader read out nonsense -->
  156.           <span aria-hidden="true" class="initial-text">(｡&gt;﹏&lt;)</span>
  157.         </div>
  158.         <code id="statusError"></code>
  159.         <pre id="statusStack"></pre>
  160.       </div>
  161.     </div>
  162.     <div id="app" class="hidden"></div>
  163.     <div id="modal"></div>
  164.     <!-- built files will be auto injected -->
  165.     <div id="popovers" />
  166.   </body>
  167. </html>