404

Wadie-ess · Aug 22, 2023 · 60e4c2f · 60e4c2f
1 parent bbab04f
commit 60e4c2f
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 7 deletions.
diff --git a/frontend/code/public/images/Error.gif b/frontend/code/public/images/Error.gif
diff --git a/frontend/code/src/404/assest/Font.tsx b/frontend/code/src/404/assest/Font.tsx
@@ -0,0 +1,11 @@
+export const Font = () => {
+    return (
+        <svg className="absolute flex z-20 items-center top-[28%] left-[32%]  h-2/6 w-2/6 justify-center auth-container " width="720" height="371" viewBox="0 0 720 371" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M124.814 296.8V110.113L159.501 109.519L54.8469 230.317L49.8069 212.509H215.83V252.874H33.7975L14.2305 215.18L128.668 87.2593H173.435V296.8H124.814ZM612.254 296.8V110.113L646.941 109.519L542.287 230.317L537.247 212.509H703.271V252.874H521.238L501.671 215.18L616.108 87.2593H660.875V296.8H612.254Z" fill="white"/>
+            <circle cx="383.751" cy="169.917" r="61.2982" transform="rotate(-179.609 383.751 169.917)" fill="white"/>
+            <rect x="306.516" y="297.18" width="17.5138" height="81.6719" transform="rotate(-145.593 306.516 297.18)" fill="white"/>
+            <path d="M440.706 192.467C454.351 192.467 465.412 181.393 465.412 167.733C465.412 154.073 454.351 143 440.706 143C427.061 143 416 154.073 416 167.733C416 181.393 427.061 192.467 440.706 192.467Z" fill="white" stroke="black" strokeWidth="9"/>
+        </svg>
+
+    )
+}
diff --git a/frontend/code/src/404/assest/font.svg b/frontend/code/src/404/assest/font.svg
diff --git a/frontend/code/src/404/index.tsx b/frontend/code/src/404/index.tsx
@@ -0,0 +1,11 @@
+import {Font} from './assest/Font'
+export const Error = () =>
+{
+    return (
+        <div className=" flex flex-col bg-black h-screen z-0 w-screen relative">
+            <Font/>
+            <div className=" absolute flex z-10 items-center top-1/4 left-1/4  h-1/2 w-1/2 justify-center auth-container overflow-hidden bg-[url(./images/Error.gif)] bg-luxury bg-no-repeat bg-cover bg-center"></div>
+            <h1 className='absolute text-white text-3xl z-30 font-lexend top-[64%] left-[39%]'>Page Not Found</h1>
+        </div>
+    )
+}
diff --git a/frontend/code/src/Auth/index.tsx b/frontend/code/src/Auth/index.tsx
@@ -6,10 +6,10 @@ export const Login =  () =>
 {
 
     return (
-      <div className="auth-container overflow-hidden  flex flex-col items-center justify-center h-screen bg-[url(./images/bg.gif)] bg-luxury bg-no-repeat bg-cover bg-center">
-      <div className="overlay absolute h-full w-full bg-black opacity-40 z-10"></div>
-      <div className="auth-section p-16 absolute top-[25%] sm:top-[30%] xl:top-[35%] z-50 flex flex-col items-center gap-y-20">
-          <div className="logo-container flex flex-col justify-center">
+      <div className="overflow-hidden  flex flex-col items-center justify-center h-screen bg-[url(./images/bg.gif)] bg-luxury bg-no-repeat bg-cover bg-center">
+      <div className="absolute h-full w-full bg-black opacity-40 z-10"></div>
+      <div className="p-16 absolute top-[25%] sm:top-[30%] xl:top-[35%] z-50 flex flex-col items-center gap-y-20">
+          <div className=" flex flex-col justify-center">
               <img  src={pingpong} alt="Logo" />
           </div>
           <Link to="/layout">

diff --git a/frontend/code/src/images/Error.gif b/frontend/code/src/images/Error.gif
diff --git a/frontend/code/src/index.css b/frontend/code/src/index.css
@@ -1,3 +1,5 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+@import url('https://fonts.googleapis.com/css2?family=Lexend+Peta:wght@400;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
diff --git a/frontend/code/src/index.tsx b/frontend/code/src/index.tsx
@@ -5,7 +5,7 @@ import {Login} from './Auth'
 import {Main} from './Auth/main'
 import {Lobby} from './Lobby/index'
 import {Layout} from './Layout/index'
-
+import {Error} from './404/index'
 import reportWebVitals from './reportWebVitals';
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 
@@ -20,6 +20,8 @@ root.render(
         <Route path="/main" element={<Main/>}></Route>
         <Route path="/lobby" element={<Lobby/>}></Route>
         <Route path="/layout" element={<Layout/>}></Route>
+        <Route path="/*" element={<Error/>}></Route>
+
       </Routes>
     </BrowserRouter>
 

diff --git a/frontend/code/tailwind.config.js b/frontend/code/tailwind.config.js
@@ -5,8 +5,14 @@ module.exports = {
     "./src/**/**/*.{js,jsx,ts,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        poppins: ['Poppins', 'sans-serif'],
+        lexend: ['Lexend Peta', 'sans-serif'],
+      },
+    },
   },
+
   plugins: [require("daisyui")],
   daisyui: {
     themes: [