applications/inbox-desktop/assets/error-network.html

   1 <!doctype html>
   2 <html>
   3     <head>
   4         <meta charset="utf-8" />
   5
   6         <style>
   7             body {
   8                 font-family: system-ui;
   9                 margin: 0;
  10                 width: 100vw;
  11                 height: 100vh;
  12                 display: grid;
  13                 place-items: center;
  14                 text-align: center;
  15             }
  16
  17             #wrapper {
  18                 display: flex;
  19                 flex-direction: column;
  20                 align-items: center;
  21                 gap: 2rem;
  22             }
  23
  24             #header {
  25                 display: flex;
  26                 flex-direction: column;
  27                 gap: 0.5rem;
  28             }
  29
  30             #title,
  31             #description {
  32                 margin: 0 auto;
  33             }
  34
  35             #description {
  36                 max-width: 50ch;
  37             }
  38
  39             #button {
  40                 display: flex;
  41                 gap: 2rem;
  42                 -webkit-app-region: no-drag;
  43                 font-size: 1rem;
  44                 font-family: inherit;
  45                 padding: 0.5rem 1rem;
  46                 border-radius: 0.5rem;
  47                 border: solid thin #ccc;
  48                 background: transparent;
  49                 cursor: pointer;
  50                 color: inherit;
  51             }
  52
  53             #button:hover {
  54                 border-color: #aaa;
  55             }
  56
  57             #button:hover:active {
  58                 border-color: #ddd;
  59             }
  60
  61             #spinner {
  62                 width: 10em;
  63                 margin: 0 auto;
  64             }
  65         </style>
  66     </head>
  67     <body>
  68         <div id="wrapper" aria-hidden="true" aria-live="assertive" aria-atomic="true">
  69             <img id="spinner" src="./error-network.svg" />
  70             <header id="header">
  71                 <h1 id="title"></h1>
  72                 <p id="description"></p>
  73             </header>
  74             <button id="button" style="display: none" type="button"></button>
  75         </div>
  76
  77         <script type="module">
  78             const titleElement = document.getElementById("title");
  79             const descriptionElement = document.getElementById("description");
  80             const buttonElement = document.getElementById("button");
  81             const wrapperElement = document.getElementById("wrapper");
  82             const locationSearchParams = new URLSearchParams(location.search);
  83
  84             const title = locationSearchParams.get("title") || "";
  85             const description = locationSearchParams.get("description") || "";
  86             const buttonText = locationSearchParams.get("button") || "";
  87             const buttonTarget = locationSearchParams.get("buttonTarget") || "";
  88             const theme = locationSearchParams.get("theme") || "light";
  89             const draggable = locationSearchParams.has("draggable");
  90
  91             if (draggable) {
  92                 document.body.style.setProperty("-webkit-app-region-", "drag");
  93             }
  94
  95             document.documentElement.style.background = theme === "dark" ? "#666" : "#fff";
  96             document.documentElement.style.color = theme === "dark" ? "#e1e1e1" : "#222";
  97
  98             titleElement.textContent = title;
  99             descriptionElement.textContent = description;
 100             buttonElement.textContent = buttonText;
 101
 102             buttonElement.addEventListener("click", () => {
 103                 window.location.href = buttonTarget;
 104             });
 105
 106             const maxCooldown = 300;
 107             const cooldownDuration = 1000 * 60 * 60 * 2; // 2 hours
 108             const retryCooldownList = [1, 2, 5, 10, 30, 60, 180, maxCooldown];
 109
 110             buttonElement.style.display = "block";
 111             wrapperElement.removeAttribute("aria-hidden");
 112
 113             (async () => {
 114                 const firstCheckDatetime = Date.now();
 115
 116                 while (true) {
 117                     if (Date.now() - firstCheckDatetime > cooldownDuration) {
 118                         return;
 119                     }
 120
 121                     await new Promise((resolve) => {
 122                         const cooldown = retryCooldownList.length ? retryCooldownList.shift() : maxCooldown;
 123                         setTimeout(resolve, cooldown * 1000);
 124                     });
 125
 126                     try {
 127                         const response = await fetch(buttonTarget);
 128                         if (response.ok) buttonElement.click();
 129                     } catch {}
 130                 }
 131             })();
 132         </script>
 133     </body>
 134 </html>