Adding login and logut page

leaky-ships/pages/dev/index.tsx

@@ -3,20 +3,15 @@ import { faEye, faLeftLong } from "@fortawesome/pro-regular-svg-icons"
 import { faCirclePlay } from "@fortawesome/pro-thin-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { useState } from "react"
+import Logo from "../../components/Logo"
+import BurgerMenu from "../../components/BurgerMenu"
 
 export default function Home() {
   const [heWantsToPlay, setHeWantsToPlay] = useState(false)
   return (
     <div id="box">
-      <button id="navExpand">
-        <img id="burgerMenu" src="/assets/burger-menu.png" alt="Burger Menu" />
-      </button>
-      <div id="shield">
-        <div id="width">
-          <h1>Leaky</h1>
-          <h1>Ships</h1>
-        </div>
-      </div>
+      <BurgerMenu />
+      <Logo />
       {!heWantsToPlay ? (
         <>
           <div id="videoWrapper">

leaky-ships/pages/dev/login.tsx

@@ -0,0 +1,65 @@
+import { faSpinnerThird } from "@fortawesome/pro-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import React, { useState } from "react"
+
+function login() {
+  const [loading, setLoading] = useState(false)
+  return (
+    <div className="flex h-screen w-full items-center justify-center bg-gray-900 bg-[url('/images/wallpaper.jpg')] bg-cover bg-center bg-no-repeat">
+      <div className="rounded-xl bg-gray-800 bg-opacity-50 px-16 py-10 shadow-lg backdrop-blur-md max-sm:px-8">
+        <div className="text-white">
+          <div className="mb-8 flex flex-col items-center">
+            <img
+              className="rounded-full shadow-lg"
+              src="/logo512.png"
+              width="150"
+              alt="Avatar"
+            />
+            <h1 className="mb-2 text-2xl">Leaky Ships</h1>
+            <span className="text-gray-300">
+              {loading ? "Logging in..." : "Enter Login Details"}
+            </span>
+          </div>
+          {loading ? (
+            <FontAwesomeIcon
+              className="my-16 mx-24 animate-spin text-6xl"
+              icon={faSpinnerThird}
+              onClick={() => setLoading(false)}
+            />
+          ) : (
+            <form action="#">
+              <div className="mb-4 text-lg">
+                <input
+                  className="rounded-3xl border-none bg-blue-400 bg-opacity-50 px-6 py-2 text-center text-inherit placeholder-slate-200 shadow-lg outline-none backdrop-blur-md"
+                  type="text"
+                  name="name"
+                  placeholder="Username or email"
+                />
+              </div>
+
+              <div className="mb-4 text-lg">
+                <input
+                  className="rounded-3xl border-none bg-blue-400 bg-opacity-50 px-6 py-2 text-center text-inherit placeholder-slate-200 shadow-lg outline-none backdrop-blur-md"
+                  type="Password"
+                  name="name"
+                  placeholder="Password"
+                />
+              </div>
+              <div className="mt-8 flex justify-center text-lg text-black">
+                <button
+                  type="submit"
+                  className="rounded-3xl bg-blue-400 bg-opacity-50 px-10 py-2 text-white shadow-xl backdrop-blur-md transition-colors duration-300 hover:bg-blue-600"
+                  onClick={() => setLoading(true)}
+                >
+                  Login
+                </button>
+              </div>
+            </form>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default login

leaky-ships/pages/dev/logout.tsx

@@ -0,0 +1,38 @@
+import { faSpinnerThird } from "@fortawesome/pro-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { useRouter } from "next/router"
+import React, { useEffect } from "react"
+
+function logout() {
+  const router = useRouter()
+
+  useEffect(() => {
+    const timeout = setTimeout(() => router.push("/dev"), 2000)
+    return () => clearTimeout(timeout)
+  }, [])
+
+  return (
+    <div className="flex h-screen w-full items-center justify-center bg-gray-900 bg-[url('/images/wallpaper.jpg')] bg-cover bg-center bg-no-repeat">
+      <div className="rounded-xl bg-gray-800 bg-opacity-50 px-16 py-10 shadow-lg backdrop-blur-md max-sm:px-8">
+        <div className="text-white">
+          <div className="mb-8 flex flex-col items-center">
+            <img
+              className="rounded-full shadow-lg"
+              src="/logo512.png"
+              width="150"
+              alt="Avatar"
+            />
+            <h1 className="mb-2 text-2xl">Leaky Ships</h1>
+            <span className="text-gray-300">Logging out...</span>
+          </div>
+          <FontAwesomeIcon
+            className="my-16 mx-24 animate-spin text-6xl"
+            icon={faSpinnerThird}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default logout

leaky-ships/pages/index.tsx

@@ -21,6 +21,21 @@ export default function Home() {
             Homepage
           </Link>
         </p>
+        <p>
+          <Link href="/dev/Lobby" target="_blank">
+            Lobby
+          </Link>
+        </p>
+        <p>
+          <Link href="/dev/login" target="_blank">
+            Login
+          </Link>
+        </p>
+        <p>
+          <Link href="/dev/logout" target="_blank">
+            Logout
+          </Link>
+        </p>
         <p>
           <Link href="/dev/grid" target="_blank">
             Grid Effect