plexdeck/loading.html at main · Farathim89/plexdeck · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<!-- SPDX-License-Identifier: GPL-3.0-or-later -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline';" />
    <title>PlexDeck</title>
    <style>
      /* Loading screen while Plex starts. --plex / --tb-bg come from the theme. */
      html, body { margin: 0; height: 100%; overflow: hidden; forced-color-adjust: none; }
      body {
        background: radial-gradient(ellipse at center, #1c1c1c 0%, var(--tb-bg, #141414) 70%);
        display: grid; place-items: center;
        font-family: "Segoe UI", system-ui, sans-serif; color: #e5e5e5;
        transition: opacity .3s ease;
      }
      body.done { opacity: 0; }
      .box { display: flex; flex-direction: column; align-items: center; gap: 22px; animation: in .5s ease both; }
      .logo { display: flex; align-items: center; gap: 14px; font-size: 34px; font-weight: 700; letter-spacing: .5px; }
      .logo svg { width: 46px; height: 46px; fill: var(--plex, #e5a00d); }
      .spinner {
        width: 36px; height: 36px; border-radius: 50%;
        border: 3px solid rgba(255, 255, 255, .12); border-top-color: var(--plex, #e5a00d);
        animation: spin .9s linear infinite;
      }
      .text { font-size: 14px; color: #9a9a9a; letter-spacing: .3px; }
      @keyframes spin { to { transform: rotate(360deg); } }
      @keyframes in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="logo">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 3h5.5l5.5 9-5.5 9H7l5.5-9z" /></svg>
        PlexDeck
      </div>
      <div class="spinner" role="progressbar" aria-label="Loading"></div>
      <div class="text">Loading your library…</div>
    </div>
    <script src="i18n-dom.js"></script>
  </body>
</html>