Unsupported browser

src/main.jsx

@@ -11,6 +11,7 @@ import PlayVideo from './pages/components/playVideo.jsx'
 import VitualNovelHandler from './pages/vistualNovelHandler.jsx';
 import EndPage from './pages/endPage.jsx';
 import LanguageSelection from './pages/languageSelection.jsx';
+import Unsupported from './pages/unsupportedOS.jsx'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
@@ -24,6 +25,7 @@ createRoot(document.getElementById('root')).render(
         <Route path='/vs/:char/:lang/:step' element={<VitualNovelHandler />} />
         <Route path='/end' element={<EndPage />} />
         <Route path='/lang' element={<LanguageSelection />} />
+        <Route path='/unsupported' element={<Unsupported/>}/>
 
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>

src/pages/languageSelection.jsx

@@ -11,6 +11,21 @@ function languageSelection() {
         sessionStorage.setItem("lang", lang);
     }, [lang]);
 
+    const userAgent = navigator.userAgent;
+    const isSafari = userAgent.includes("Safari");
+
+    const buttonSet = isSafari ? (
+        <>
+            <BlackButton text="ภาษาไทย" to='/unsupported' onClick={() => setLang("Thai")} />
+            <BlackButton text="English" to='/unsupported' onClick={() => setLang("English")} />
+        </>
+    ) : (
+        <>
+            <BlackButton text="ภาษาไทย" to='/warn' onClick={() => setLang("Thai")} />
+            <BlackButton text="English" to='/warn' onClick={() => setLang("English")} />
+        </>
+    );
+
     return (
         <div style={{
             display: 'flex',
@@ -28,12 +43,7 @@ function languageSelection() {
             gap: '1rem',
             marginTop: '1rem'
         }}>
-        <BlackButton text="ภาษาไทย" to='/warn' onClick={(e) => {
-            setLang("Thai");
-        }}/>
-        <BlackButton text="English" to='/warn' onClick={(e) => {
-            setLang("English");
-        }}/>
+            {buttonSet}
         </div>
         </div>
     );

src/pages/unsupportedOS.jsx

@@ -0,0 +1,41 @@
+import BlackButton from './components/customButton';
+import { useState } from 'react';
+
+function unsupportedOS() {
+    const [lang] = useState(() => {
+        return sessionStorage.getItem("lang") || 'English';
+    });
+
+    const text = {
+        title: lang === 'Thai' ? 'บราว์เซอร์นี้ไม่รองรับเว็ปไชต์นี้!' : 'Your browser is unsupported!',
+        continue: lang === 'Thai' ? 'ดำเนินการต่อ' : 'Continue',
+        body: lang === 'Thai' ? 'อาจมีปัญหาในการแสดงผลหรือบางส่วนทำงานไม่ถูกต้อง' : 'There may be glitches and broken elements'
+    }
+
+    return(
+  	  <div style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+        flexDirection: 'column',
+      }}
+      >
+        <label className='title'>{text.title}</label>
+
+        <div style={{
+          height: '8vh'
+        }}/>
+
+        <label className="body">
+          {text.body}
+        </label>
+        <div style={{
+            height: '8vh'
+        }}/>
+            <BlackButton text={text.continue} to='/warn' />
+  	  </div>
+    )
+}
+
+export default unsupportedOS