OpenAsar/src/splash/index.html

<video loop autoplay src="https://goosemod.com/vid/discord_loading.webm"></video>

<div id="text">Launching...</div>

<div id="bar-container"></div>
<div id="bar-fill"></div>

<div id="debug"></div>

<style>
  :root {
    --background-primary: #282b30;
    --background-secondary: rgba(255, 255, 255, 0.1);
    --brand-experiment: #5865F2;
    --header-primary: #fff;
    --text-muted: #72767d;
  }

  @font-face {
    font-family: Whitney;
    font-weight: 400;
    font-style: normal;
    src: url(https://goosemod.com/font/whitney_400.woff) format("woff");
  }

  html, body {
    -webkit-app-region: drag;
    overflow: hidden;

    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;

    background: var(--background-primary);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  * {
    font-family: 'Whitney', sans-serif;

    box-sizing: border-box;
    -webkit-user-select: none;
    cursor: default;
  }

  video {
    width: 200px;
    height: 150px;
    object-fit: cover;
  }

  #text {
    font-size: 7vw;
    text-align: center;

    color: var(--header-primary);
    font-weight: 400;
    font-style: italic;
    font-size: 16px;

    text-transform: uppercase;

    width: 100%;
  }

  #bar-container, #bar-fill {
    margin-top: 10px;
    transform: translate(-50%, -50%);

    width: 180px;
    height: 8px;

    border-radius: 4px;

    visibility: hidden;
  }

  #bar-container {
    position: absolute;
    background: var(--background-secondary);
  }

  #bar-fill {
    background-color: var(--brand-experiment);
    width: 0;

    transform: translate(0%, -50%);
    left: 10%;
  }

  #debug {
    position: absolute;
    bottom: 6px;
    right: 6px;

    text-align: right;
    font-size: 10px;
    color: var(--text-muted);
    white-space: pre;
  }
</style>

<script>
  const text = document.querySelector('#text');

  const barContainer = document.querySelector('#bar-container');
  const barFill = document.querySelector('#bar-fill');

  DiscordSplash.signalReady();

  const outOfStates = [ 'downloading-updates', 'installing-updates' ];
  DiscordSplash.onStateUpdate(({ status, current, total, progress }) => {
    text.textContent = status.replaceAll('-', ' ') + '...';
    if (outOfStates.includes(state)) text.textContent += ` (${current}/${total})`;

    if (progress) {
      barContainer.style.visibility = 'visible';
      barFill.style.visibility = 'visible';

      barFill.style.width = 80 * (progress / 100) + '%';
    } else {
      barContainer.style.display = '';
      barFill.style.display = '';
    }
  });

  document.querySelector('#debug').textContent = DiscordSplash.getDebugInfo();

  DiscordSplash.getCSS((css) => {
    document.body.classList.add('theme-dark'); // Theme compat

    const cssInject = document.createElement('style');
    cssInject.appendChild(document.createTextNode(css));
    document.body.appendChild(cssInject);
  });
</script>