Fixing, Temporary update message

TeaByte · Feb 18, 2024 · 277a61d · 277a61d
1 parent b9fc062
commit 277a61d
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 4 deletions.
diff --git a/components/EditorSplit.tsx b/components/EditorSplit.tsx
@@ -7,7 +7,7 @@ export default function EditorSplit(props: { slug: string }) {
   const testingcode = getTestingCode(props.slug);
   return (
     <>
-      <div class="mt-2">
+      <div class="mt-2 overflow-hidden">
         <div class="mx-2 border-[6px] border-base-300 bg-base-300 rounded-btn pb-2">
           <div
             class="h-[400px] rounded-box"

diff --git a/routes/_layout.tsx b/routes/_layout.tsx
@@ -34,6 +34,14 @@ export default async function Layout(req: Request, ctx: FreshContext) {
         <script type="module" src="/JavaScript/sw-rg.js"></script>
       </head>
       <body>
+        <section id="old-check" class="flex flex-col w-full justify-center items-center h-screen z-[99999] bg-base-300 p-5 gap-2 text-center hidden">
+          <p class="text-2xl">
+            يعتبر المتصفح الذي تستخدمه قديمًا وغير مدعوم حاليًا. يُرجى تحديث المتصفح الخاص بك أو استخدام متصفح آخر لضمان تجربة متصفح فعّالة.
+          </p>
+          <p>
+            نحن نلتزم بتوفير الدعم لمتصفحاتكم، حيث نعمل بجد لضمان تجربة موثوقة وفعّالة لجميع المستخدمين
+          </p>
+        </section>
         <NavBar />
         <ctx.Component />
       </body>

diff --git a/routes/index.tsx b/routes/index.tsx
@@ -26,14 +26,14 @@ export default function IndexPage() {
         <section class="w-fulloverflow-hidden">
           <div class="container relative w-full px-8 pt-16 mx-auto lg:px-4 z-[5]">
             <div class="flex flex-col w-full mb-12 text-center">
-              <h1 class="mb-4 text-6xl font-bold tracking-tighter lg:text-9xl">
+              <h1 class="mb-4 text-6xl font-bold tracking-tighter lg:text-8xl">
                 <span class="bg-gradient-to-br from-yellow-500 to-yellow-300 bg-clip-text text-transparent font-bold">JS</span>
                 <span class="ml-2 bg-gradient-to-bl from-base-content to-base-content/80 bg-clip-text text-transparent font-bold">نخلة</span>
               </h1>
+              {/* <CodeBox /> | It don't really look good and in small screen its an issue */}
               <p class="text-3xl mb-2">
                 تعلم بسهولة وفعالية
               </p>
-              <CodeBox />
               <p class="mx-auto text-lg leading-snug lg:w-1/2">
                 منصة تعليمية عربية. مخصصة لاكتساب مهارات لغة البرمجة جافاسكريبت بشكل ممتع ومبتكر. نتبنى نهجًا فريدًا يركز على التعلم التفاعلي والتطبيق العملي المباشر، مما يمكّن المتعلمين من فهم الأساسيات بشكل أعمق وتطبيق مهاراتهم على الفور.
               </p>

diff --git a/static/JavaScript/index.js b/static/JavaScript/index.js
@@ -6,9 +6,25 @@ if (storedTheme) {
   localStorage.setItem("selectedTheme", "nord");
 }
 
+// To check if the browser supports oklch ( is new browser ) 
+(function supportsOklch() {
+  const testElement = document.createElement('div');
+  testElement.style.color = 'oklch(var(--b3))';
+  document.body.appendChild(testElement);
+  const style = window.getComputedStyle(testElement).color;
+  document.body.removeChild(testElement);
+  return style.indexOf('oklch') !== -1;
+})()
+
 // PWA install button
 let installPrompt = null;
 document.addEventListener('DOMContentLoaded', () => {
+
+  // Check if browser is new 
+  if (!supportsOklch()) {
+    document.getElementById('old-check').style.display = 'block';
+  }
+
   if ('serviceWorker' in navigator && 'PushManager' in globalThis) {
     globalThis.addEventListener('beforeinstallprompt', (e) => {
       console.log('beforeinstallprompt fired');

diff --git a/static/styles.css b/static/styles.css
@@ -100,7 +100,7 @@ mark::before {
 .gutter {
   position: relative;
   z-index: 2;
-  background-color: oklch(var(--b3));
+  background-color: oklch(var(--b3)) !important;
   background-repeat: no-repeat;
   background-position: 50%;
   border-radius: 0.2rem;