diff options
| author | HJ <30-hj@users.noreply.git.pleroma.social> | 2024-10-03 19:44:12 +0000 |
|---|---|---|
| committer | HJ <30-hj@users.noreply.git.pleroma.social> | 2024-10-03 19:44:12 +0000 |
| commit | 56a3bff267203017a704652117167569be0cd58a (patch) | |
| tree | 24d433ca48c796c8787e4620cf145e9d31c7d539 /index.html | |
| parent | 05c0b16a935c2799ece31845897d3a29d39e3eee (diff) | |
| parent | 51a8b20a920d1d32d9812664557db92ab9b40d4c (diff) | |
Merge branch 'splashscreen' into 'develop'
Splash screen
See merge request pleroma/pleroma-fe!1940
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 129 |
1 files changed, 127 insertions, 2 deletions
@@ -4,13 +4,138 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> <link rel="icon" type="image/png" href="/favicon.png"> + <!-- putting styles here to avoid having to wait for styles to load up --> + <style id="splashscreen"> + #splash { + --scale: 1; + width: 100vw; + height: 100vh; + display: grid; + grid-template-rows: auto; + grid-template-columns: auto; + align-content: center; + align-items: center; + justify-content: center; + justify-items: center; + flex-direction: column; + background: #0f161e; + font-family: sans-serif; + color: #b9b9ba; + position: absolute; + z-index: 9999; + font-size: calc(1vw + 1vh + 1vmin); + } + + #splash-credit { + position: absolute; + font-size: 14px; + bottom: 16px; + right: 16px; + } + + #splash-container { + align-items: center; + } + + #mascot-container { + display: flex; + align-items: flex-end; + justify-content: center; + perspective: 60em; + perspective-origin: 0 -15em; + transform-style: preserve-3d; + } + + #mascot { + width: calc(10em * var(--scale)); + height: calc(10em * var(--scale)); + object-fit: contain; + object-position: bottom; + transform: translateZ(-2em); + } + + #throbber { + display: grid; + width: calc(5em * 0.5 * var(--scale)); + height: calc(8em * 0.5 * var(--scale)); + margin-left: 4.1em; + z-index: 2; + grid-template-rows: repeat(8, 1fr); + grid-template-columns: repeat(5, 1fr); + grid-template-areas: "P P . L L" + "P P . L L" + "P P . L L" + "P P . L L" + "P P . . ." + "P P . . ." + "P P . E E" + "P P . E E"; + } + + .chunk { + background-color: #e2b188; + box-shadow: 0.01em 0.01em 0.1em 0 #e2b188; + } + + #chunk-P { + grid-area: P; + border-top-left-radius: calc(var(--logoChunkSize) / 2); + } + + #chunk-L { + grid-area: L; + border-bottom-right-radius: calc(var(--logoChunkSize) / 2); + } + + #chunk-E { + grid-area: E; + border-bottom-right-radius: calc(var(--logoChunkSize) / 2); + } + + #status { + margin-top: 1em; + line-height: 2; + width: 100%; + text-align: center; + } + + @media (prefers-reduced-motion) { + #throbber { + animation: none !important; + } + } + </style> <style id="pleroma-eager-styles" type="text/css"></style> <style id="pleroma-lazy-styles" type="text/css"></style> <!--server-generated-meta--> </head> - <body class="hidden"> + <body style="margin: 0; padding: 0"> <noscript>To use Pleroma, please enable JavaScript.</noscript> - <div id="app"></div> + <div id="splash"> + <!-- we are hiding entire graphic so no point showing credit --> + <div aria-hidden="true" id="splash-credit"> + Art by pipivovott + </div> + <div id="splash-container"> + <div aria-hidden="true" id="mascot-container"> + <div id="throbber"> + <div class="chunk" id="chunk-P"> + </div> + <div class="chunk" id="chunk-L"> + </div> + <div class="chunk" id="chunk-E"> + </div> + </div> + <img id="mascot" src="/static/pleromatan_apology.png"> + </div> + <div id="status" class="css-ok"> + <!-- (｡>﹏<) --> + <!-- it's a pseudographic, don't want screenreader read out nonsense --> + <span aria-hidden="true" class="initial-text">(｡>﹏<)</span> + </div> + </div> + </div> + <div id="app" class="hidden"></div> <div id="modal"></div> <!-- built files will be auto injected --> <div id="popovers" /> |