add notification for web support

src/index.html

@@ -336,50 +336,46 @@ <h1 class="w-[40ch] text-bke-orange"></h1>
                 id="app-version"
                 class="absolute bottom-1 right-1 hidden text-xs opacity-30 group-data-[view='age-category']/app:block"
             ></div>
-            <div
-                id="notification"
-                class="notification pointer-events-none fixed inset-0 z-50 hidden overflow-hidden"
-            >
-                <div class="flex h-full w-full p-4">
-                    <div class="notification-frame self-end">
-                        <div class="notification-content flex h-full flex-col justify-between">
-                            <svg class="icon h-8 w-8 text-bke-orange">
-                                <use href="#circle-exclamation-solid" fill="currentColor"></use>
-                            </svg>
-                            <p id="message" class="mt-4"></p>
-                            <button
-                                id="restart-button"
-                                class="button-grid pointer-events-auto mt-4 hidden"
-                            >
-                                <div class="corner top-left"></div>
-                                <div class="edge top"></div>
-                                <div class="corner top-right"></div>
-                                <div class="edge left"></div>
-                                <div class="content"></div>
-                                <div class="edge right"></div>
-                                <div class="corner bottom-left"></div>
-                                <div class="edge bottom"></div>
-                                <div class="corner bottom-right"></div>
-                            </button>
-                        </div>
-
-                        <button id="close-button" class="button-grid pointer-events-auto">
-                            <div class="corner top-left"></div>
-                            <div class="edge top"></div>
-                            <div class="corner top-right"></div>
-                            <div class="edge left"></div>
-                            <div class="content">
-                                <svg class="icon">
-                                    <use href="#xmark-large-solid" fill="currentColor"></use>
-                                </svg>
-                            </div>
-                            <div class="edge right"></div>
-                            <div class="corner bottom-left"></div>
-                            <div class="edge bottom"></div>
-                            <div class="corner bottom-right"></div>
-                        </button>
+            <div id="notification" class="notification z-50 hidden">
+                <div class="corner top-left"></div>
+                <div class="edge top"></div>
+                <div class="corner top-right"></div>
+                <div class="edge left"></div>
+                <div class="content">
+                    <div class="notification-header">
+                        <svg class="icon text-bke-orange"><use href="#circle-exclamation-solid" fill="currentColor"></use></svg>
+                        <h3 class="notification-title"></h3>
                     </div>
+                    <p class="notification-message"></p>
+                    <button id="restart-button" class="button-grid">
+                        <div class="corner top-left"></div>
+                        <div class="edge top"></div>
+                        <div class="corner top-right"></div>
+                        <div class="edge left"></div>
+                        <div class="content"></div>
+                        <div class="edge right"></div>
+                        <div class="corner bottom-left"></div>
+                        <div class="edge bottom"></div>
+                        <div class="corner bottom-right"></div>
+                    </button>
+                    <button id="close-button" class="button-grid">
+                        <div class="corner top-left"></div>
+                        <div class="edge top"></div>
+                        <div class="corner top-right"></div>
+                        <div class="edge left"></div>
+                        <div class="content">
+                            <svg><use href="#xmark-large-solid" fill="currentColor"></use></svg>
+                        </div>
+                        <div class="edge right"></div>
+                        <div class="corner bottom-left"></div>
+                        <div class="edge bottom"></div>
+                        <div class="corner bottom-right"></div>
+                    </button>
                 </div>
+                <div class="edge right"></div>
+                <div class="corner bottom-left"></div>
+                <div class="edge bottom"></div>
+                <div class="corner bottom-right"></div>
             </div>
         </div>
 

src/locales/da.json

@@ -183,5 +183,11 @@
   "waitingScreen": {
     "inputPlaceholder": "Skriv dit navn her",
     "submit": "Tilføj"
+  },
+  "notifications": {
+    "webSupport": {
+      "title": "Oops!",
+      "text": "It looks like you're accessing Explorers on a device that is not supported, which could affect some features and functionality.\n For the best experience, we recommend visiting this site on a PC using Chrome or Safari. Thank you for your understanding!"
+    }
   }
 }

src/locales/de.json

@@ -185,5 +185,11 @@
   "waitingScreen": {
     "inputPlaceholder": "Gebe hier deinen Namen ein",
     "submit": "Hinzufügen"
+  },
+  "notifications": {
+    "webSupport": {
+      "title": "Oops!",
+      "text": "It looks like you're accessing Explorers on a device that is not supported, which could affect some features and functionality.\n For the best experience, we recommend visiting this site on a PC using Chrome or Safari. Thank you for your understanding!"
+    }
   }
 }

src/locales/en.json

@@ -183,5 +183,11 @@
   "waitingScreen": {
     "inputPlaceholder": "Write your name here",
     "submit": "Add"
+  },
+  "notifications": {
+    "webSupport": {
+      "title": "Oops!",
+      "text": "It looks like you're accessing Explorers on a device that is not supported, which could affect some features and functionality.\n For the best experience, we recommend visiting this site on a PC using Chrome or Safari. Thank you for your understanding!"
+    }
   }
 }

src/locales/es.json

@@ -183,5 +183,11 @@
   "waitingScreen": {
     "inputPlaceholder": "Write your name",
     "submit": "Add"
+  },
+  "notifications": {
+    "webSupport": {
+      "title": "Oops!",
+      "text": "It looks like you're accessing Explorers on a device that is not supported, which could affect some features and functionality.\n For the best experience, we recommend visiting this site on a PC using Chrome or Safari. Thank you for your understanding!"
+    }
   }
 }

src/locales/fi.json

@@ -183,5 +183,11 @@
   "waitingScreen": {
     "inputPlaceholder": "Kirjoita nimesi tähän",
     "submit": "Lisää"
+  },
+  "notifications": {
+    "webSupport": {
+      "title": "Oops!",
+      "text": "It looks like you're accessing Explorers on a device that is not supported, which could affect some features and functionality.\n For the best experience, we recommend visiting this site on a PC using Chrome or Safari. Thank you for your understanding!"
+    }
   }
 }

src/locales/fr.json

@@ -183,5 +183,11 @@
   "waitingScreen": {
     "inputPlaceholder": "Write your name here",
     "submit": "Add"
+  },
+  "notifications": {
+    "webSupport": {
+      "title": "Oops!",
+      "text": "It looks like you're accessing Explorers on a device that is not supported, which could affect some features and functionality.\n For the best experience, we recommend visiting this site on a PC using Chrome or Safari. Thank you for your understanding!"
+    }
   }
 }

src/locales/hu.json

@@ -183,5 +183,11 @@
   "waitingScreen": {
     "inputPlaceholder": "Írd ide a neved",
     "submit": "Hozzáadás"
+  },
+  "notifications": {
+    "webSupport": {
+      "title": "Oops!",
+      "text": "It looks like you're accessing Explorers on a device that is not supported, which could affect some features and functionality.\n For the best experience, we recommend visiting this site on a PC using Chrome or Safari. Thank you for your understanding!"
+    }
   }
 }

src/locales/it.json

@@ -183,5 +183,11 @@
   "waitingScreen": {
     "inputPlaceholder": "Inserisci il tuo nome qui",
     "submit": "Aggiungere"
+  },
+  "notifications": {
+    "webSupport": {
+      "title": "Oops!",
+      "text": "It looks like you're accessing Explorers on a device that is not supported, which could affect some features and functionality.\n For the best experience, we recommend visiting this site on a PC using Chrome or Safari. Thank you for your understanding!"
+    }
   }
 }

src/locales/nl.json

@@ -183,5 +183,11 @@
   "waitingScreen": {
     "inputPlaceholder": "Schrijf hier je naam",
     "submit": "Bevestig"
+  },
+  "notifications": {
+    "webSupport": {
+      "title": "Oops!",
+      "text": "It looks like you're accessing Explorers on a device that is not supported, which could affect some features and functionality.\n For the best experience, we recommend visiting this site on a PC using Chrome or Safari. Thank you for your understanding!"
+    }
   }
 }

src/locales/no.json

@@ -183,5 +183,11 @@
       "quiz": "quizer"
     },
     "activityDescLabel": "Mentor veiledning"
+  },
+  "notifications": {
+    "webSupport": {
+      "title": "Oops!",
+      "text": "It looks like you're accessing Explorers on a device that is not supported, which could affect some features and functionality.\n For the best experience, we recommend visiting this site on a PC using Chrome or Safari. Thank you for your understanding!"
+    }
   }
 }

src/locales/pl.json

@@ -183,5 +183,11 @@
   "waitingScreen": {
     "inputPlaceholder": "Wpisz tutaj swoje imię",
     "submit": "Dodaj"
+  },
+  "notifications": {
+    "webSupport": {
+      "title": "Oops!",
+      "text": "It looks like you're accessing Explorers on a device that is not supported, which could affect some features and functionality.\n For the best experience, we recommend visiting this site on a PC using Chrome or Safari. Thank you for your understanding!"
+    }
   }
 }

src/locales/pt-pt.json

@@ -183,5 +183,11 @@
   "waitingScreen": {
     "inputPlaceholder": "Write your name",
     "submit": "Add"
+  },
+  "notifications": {
+    "webSupport": {
+      "title": "Oops!",
+      "text": "It looks like you're accessing Explorers on a device that is not supported, which could affect some features and functionality.\n For the best experience, we recommend visiting this site on a PC using Chrome or Safari. Thank you for your understanding!"
+    }
   }
 }

src/locales/ro.json

@@ -183,5 +183,11 @@
   "waitingScreen": {
     "inputPlaceholder": "Introdu numele aici",
     "submit": "Adaugă"
+  },
+  "notifications": {
+    "webSupport": {
+      "title": "Oops!",
+      "text": "It looks like you're accessing Explorers on a device that is not supported, which could affect some features and functionality.\n For the best experience, we recommend visiting this site on a PC using Chrome or Safari. Thank you for your understanding!"
+    }
   }
 }

src/locales/ru.json

@@ -183,5 +183,11 @@
   "waitingScreen": {
     "inputPlaceholder": "Введите свое имя здесь",
     "submit": "Добавить в"
+  },
+  "notifications": {
+    "webSupport": {
+      "title": "Oops!",
+      "text": "It looks like you're accessing Explorers on a device that is not supported, which could affect some features and functionality.\n For the best experience, we recommend visiting this site on a PC using Chrome or Safari. Thank you for your understanding!"
+    }
   }
 }

src/locales/tr.json

@@ -183,5 +183,11 @@
   "waitingScreen": {
     "inputPlaceholder": "Adınızı buraya girin ",
     "submit": "İsminizi ekleyin"
+  },
+  "notifications": {
+    "webSupport": {
+      "title": "Oops!",
+      "text": "It looks like you're accessing Explorers on a device that is not supported, which could affect some features and functionality.\n For the best experience, we recommend visiting this site on a PC using Chrome or Safari. Thank you for your understanding!"
+    }
   }
 }

src/script.js

@@ -33,12 +33,13 @@ _appInsights.trackPageView({ name: 'Home' })
 const experience = new Experience()
 
 
-const notification = document.getElementById('notification')
-const message = document.getElementById('message')
-const closeButton = document.getElementById('close-button')
+const notification = document.querySelector('.notification')
+const message = document.querySelector('.notification-message')
+const title = document.querySelector('.notification-title')
+const closeButton = document.querySelector('#close-button')
 const restartButton = document.querySelector('#restart-button')
 
-    // New app version notification
+// New app version notification
 function showNotification() {
     gsap.fromTo(
         notification,
@@ -56,6 +57,17 @@ function showNotification() {
     )
 }
 
+closeButton.addEventListener('click', () => {
+    gsap.to(notification, {
+        duration: 1,
+        x: '-100%',
+        ease: 'power3.in',
+        onComplete: () => {
+            notification.classList.add('hidden')
+        },
+    })
+})
+
 if (isElectron()) {
     document.body.classList.add('electron')
 
@@ -74,22 +86,10 @@ if (isElectron()) {
         showNotification()
     })
 
-    closeButton.addEventListener('click', () => {
-        gsap.to(notification, {
-            duration: 1,
-            x: '-100%',
-            ease: 'power3.in',
-            onComplete: () => {
-                notification.classList.add('hidden')
-            },
-        })
-    })
-
     restartButton.addEventListener('click', () => {
         window.electronAPI.restartApp()
     })
 } else {
-
     // Register Service Worker
     if ('serviceWorker' in navigator) {
         window.addEventListener('load', () => {
@@ -180,10 +180,29 @@ window.onload = async () => {
     await configureClient()
     await handleRedirectCallback()
 }
+
 window.addEventListener(_e.ACTIONS.ROUTE_CHANGED, async ({ detail }) => {
     window.location.search = detail.replace('/?', '')
     await configureClient()
     await handleRedirectCallback()
 })
 
+// Detecting unsupported browsers
+function isSupportedBrowser() {
+    const userAgent = navigator.userAgent;
+    return /Chrome|Safari/.test(userAgent) && !/Edge|OPR|Firefox/.test(userAgent);
+}
+
+// Detecting mobile devices (optional, if you want to show it based on devices)
+function isMobileDevice() {
+    return /Mobi|Android/i.test(navigator.userAgent);
+}
+
+// Showing notification if unsupported browser or device is detected
+if (!isSupportedBrowser() || isMobileDevice()) {
 
+    title.innerHTML = _s.notifications.webSupport.title
+    message.innerHTML =  _s.notifications.webSupport.text
+    restartButton.classList.add('hidden')
+    showNotification()
+}