2 files changed, 41 insertions, 14 deletions
diff --git a/communities/red-right-hand/alpha.174bg.net/src/app/layout.js b/communities/red-right-hand/alpha.174bg.net/src/app/layout.js
index 1fb6dfe..ce97609 100644
--- a/communities/red-right-hand/alpha.174bg.net/src/app/layout.js
+++ b/communities/red-right-hand/alpha.174bg.net/src/app/layout.js
@@ -1,6 +1,6 @@
 import { Inter, Fira_Code } from "next/font/google";
 import "./globals.css";
-import { CommandLineIcon } from "@heroicons/react/24/solid";
+import TerminalOverlay from "@/components/TerminalOverlay";
 
 const inter = Inter({
   variable: "--font-inter",
@@ -12,18 +12,6 @@ const firaCode = Fira_Code({
   subsets: ["latin"],
 });
 
-function TerminalButton() {
-  return (
-    <a
-      href="/terminal/index.html"
-      className="fixed top-4 right-4 bg-gray-800 text-white p-3 rounded-full shadow-lg hover:bg-gray-700 transition-colors z-50"
-      title="Access the web terminal"
-    >
-      <CommandLineIcon className="h-5 w-5" />
-    </a>
-  );
-}
-
 export const metadata = {
   title: "174th Battle Group",
   description: "Vengeance Within Reach",
@@ -39,7 +27,7 @@ export default function RootLayout({ children }) {
       className={`${inter.variable} ${firaCode.variable} h-full antialiased`}
     >
       <body className="min-h-full flex flex-col">
-        <TerminalButton />
+        <TerminalOverlay />
         {children}
       </body>
     </html>
diff --git a/communities/red-right-hand/alpha.174bg.net/src/components/TerminalOverlay/index.js b/communities/red-right-hand/alpha.174bg.net/src/components/TerminalOverlay/index.js
new file mode 100644
index 0000000..6053949
--- /dev/null
+++ b/communities/red-right-hand/alpha.174bg.net/src/components/TerminalOverlay/index.js
@@ -0,0 +1,39 @@
+"use client";
+
+import { useState } from "react";
+import { CommandLineIcon, XMarkIcon } from "@heroicons/react/24/solid";
+
+export default function TerminalOverlay() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        className="fixed top-4 right-4 bg-gray-800 text-white p-3 rounded-full shadow-lg hover:bg-gray-700 transition-colors z-50"
+        title="Access the web terminal"
+      >
+        <CommandLineIcon className="h-5 w-5" />
+      </button>
+
+      {open && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70">
+          <div className="relative w-full max-w-4xl h-[80vh] bg-black rounded-lg shadow-2xl overflow-hidden">
+            <button
+              onClick={() => setOpen(false)}
+              className="absolute top-2 right-2 z-10 bg-gray-800 text-white p-1 rounded hover:bg-gray-600 transition-colors"
+              title="Close terminal"
+            >
+              <XMarkIcon className="h-5 w-5" />
+            </button>
+            <iframe
+              src="/terminal/index.html"
+              className="w-full h-full border-0"
+              title="Web Terminal"
+            />
+          </div>
+        </div>
+      )}
+    </>
+  );
+}