ntfy/web/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>ntfy web</title>

    <!-- Mobile view -->
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="HandheldFriendly" content="true" />

    <!-- Mobile browsers, background color -->
    <meta name="theme-color" content="#317f6f" />
    <meta name="msapplication-navbutton-color" content="#317f6f" />
    <meta name="apple-mobile-web-app-status-bar-style" content="#317f6f" />
    <link rel="apple-touch-icon" href="/static/images/apple-touch-icon.png" sizes="180x180" />
    <link rel="mask-icon" href="/static/images/ntfy-mask.svg" color="#317f6f" />

    <!-- Favicon, see favicon.io -->
    <link rel="icon" type="image/png" href="/static/images/favicon.ico" />

    <!-- Previews in Google, Slack, WhatsApp, etc. -->
    <meta
      name="description"
      content="ntfy lets you send push notifications via scripts from any computer or phone. Made with ❤ by Philipp C. Heckel, Apache License 2.0, source at https://heckel.io/ntfy."
    />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="en_US" />
    <meta property="og:site_name" content="ntfy web" />
    <meta property="og:title" content="ntfy web" />
    <meta
      property="og:description"
      content="ntfy lets you send push notifications via scripts from any computer or phone. Made with ❤ by Philipp C. Heckel, Apache License 2.0, source at https://heckel.io/ntfy."
    />
    <meta property="og:image" content="/static/images/ntfy.png" />
    <meta property="og:url" content="https://ntfy.sh" />

    <!-- Never index -->
    <meta name="robots" content="noindex, nofollow" />

    <!-- Style overrides & fonts -->
    <link rel="stylesheet" href="/static/css/app.css" type="text/css" />
    <link rel="stylesheet" href="/static/css/fonts.css" type="text/css" />

    <!-- PWA -->
    <link rel="manifest" href="/manifest.webmanifest" />

    <!-- Splash screen: painted instantly (before the JS bundle loads) and faded out by the app
       once the initial data is ready (see src/app/splash.js). Avoids the white flash + spinner
       flicker on first load. Background colors match MUI's grey[100]/grey[900] (the app's main
       background) so the handoff to the app is seamless. -->
    <style>
      html {
        background-color: #f5f5f5;
      }

      html.dark {
        background-color: #212121;
      }

      #splash {
        position: fixed;
        inset: 0;
        z-index: 200000;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f5f5f5;
        opacity: 1;
        /* Background fade = the app fading in once the logo is gone (see src/app/splash.js). */
        transition: opacity 0.1s ease-out;
      }

      html.dark #splash {
        background-color: #212121;
      }

      #splash.splash-hidden {
        opacity: 0;
        pointer-events: none;
      }

      #splash img {
        width: 112px;
        height: 112px;
        /* Gently pulse while loading; src/app/splash.js stops this and fades the logo out. */
        animation: splash-pulse 1.4s ease-in-out infinite;
      }

      @keyframes splash-pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.35;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        #splash {
          transition: none;
        }

        #splash img {
          animation: none;
        }
      }
    </style>

    <!-- Decide light/dark before first paint, reading the theme preference mirrored to
       localStorage by Prefs.js. Avoids the light/dark flash caused by the async IndexedDB read. -->
    <script>
      (function () {
        try {
          var stored = localStorage.getItem("theme");
          var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
          var dark = stored === "dark" || ((!stored || stored === "system") && prefersDark);
          if (dark) {
            document.documentElement.classList.add("dark");
          }
        } catch (e) {
          /* localStorage/matchMedia unavailable -- fall back to the default light splash */
        }
      })();
    </script>
  </head>
  <body>
    <noscript>
      ntfy web requires JavaScript, but you can also use the
      <a href="https://ntfy.sh/docs/subscribe/cli/">CLI</a> or <a href="https://ntfy.sh/docs/subscribe/phone/">Android/iOS app</a> to
      subscribe.
    </noscript>

    <!-- Static splash, removed by src/app/splash.js once the app is ready. The logo is a same-origin
     SVG precached by the service worker, so it paints right after the (instant) background. -->
    <div id="splash" aria-hidden="true">
      <img src="/static/images/ntfy-splash.svg" alt="" />
    </div>
    <div id="root"></div>
    <script src="/config.js"></script>
    <script type="module" src="/src/index.jsx"></script>
  </body>
</html>