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 (4960B)

    

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