Added gatekeeping dialogs for PWA install requirement

src/App.vue

@@ -246,6 +246,75 @@
               </div>
             </div>
           </div>
+          <div
+            v-if="notification.type === 'pwa-install-gate-ios'"
+            class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
+          >
+            <div
+              class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
+            >
+              <div class="w-full px-6 py-6 text-slate-900 text-center">
+                <fa
+                  icon="mobile-screen-button"
+                  class="inline-block text-7xl text-slate-400 mb-4"
+                >
+                </fa>
+                <h3 class="text-2xl font-semibold mb-4">Add to Home Screen</h3>
+                <p class="text-md mb-4">
+                  To install the app, you need to add this website to your home
+                  screen.
+                </p>
+                <p class="text-md">
+                  In your Safari browser menu, tap the
+                  <span class="whitespace-nowrap">
+                    <fa
+                      icon="arrow-up-from-bracket"
+                      class="fa-fw text-slate-500 bg-slate-200 py-1 -my-1 px-0.5 rounded"
+                    >
+                    </fa>
+                    Share
+                  </span>
+                  icon and choose
+                  <b>Add to Home Screen</b> in the options. Then, open the Time
+                  Safari app on your home screen.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="notification.type === 'pwa-install-gate-android'"
+            class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
+          >
+            <div
+              class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
+            >
+              <div class="w-full px-6 py-6 text-slate-900 text-center">
+                <fa
+                  icon="mobile-screen-button"
+                  class="inline-block text-7xl text-slate-400 mb-4"
+                >
+                </fa>
+                <h3 class="text-2xl font-semibold mb-4">Add to Home Screen</h3>
+                <p class="text-md mb-4">
+                  To install the app, you need to add this website to your home
+                  screen.
+                </p>
+                <p class="text-md">
+                  In your Chrome browser menu, tap the
+                  <span class="whitespace-nowrap">
+                    <fa
+                      icon="ellipsis-vertical"
+                      class="fa-fw text-slate-500 bg-slate-200 py-1 -my-1 px-0.5 rounded"
+                    >
+                    </fa>
+                    More
+                  </span>
+                  button and choose
+                  <b>Install App</b> in the options.
+                </p>
+              </div>
+            </div>
+          </div>
         </div>
       </Notification>
     </div>

src/main.ts

@@ -13,6 +13,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import {
   faArrowLeft,
   faArrowRight,
+  faArrowUpFromBracket,
   faBurst,
   faCalendar,
   faChevronLeft,
@@ -39,6 +40,7 @@ import {
   faLongArrowAltLeft,
   faLongArrowAltRight,
   faMagnifyingGlass,
+  faMobileScreenButton,
   faPen,
   faPersonCircleCheck,
   faPersonCircleQuestion,
@@ -59,6 +61,7 @@ import {
 library.add(
   faArrowLeft,
   faArrowRight,
+  faArrowUpFromBracket,
   faBurst,
   faCalendar,
   faChevronLeft,
@@ -85,6 +88,7 @@ library.add(
   faLongArrowAltLeft,
   faLongArrowAltRight,
   faMagnifyingGlass,
+  faMobileScreenButton,
   faPen,
   faPersonCircleCheck,
   faPersonCircleQuestion,