Spaces:

Agents-MCP-Hackathon
/

hermes

Running

App Files Files Community

Googolplexic commited on Jun 7, 2025

Commit

c79f5fa

1 Parent(s): 7766a85

certainly some ui

Browse files

Files changed (4) hide show

keygenServer/client/app/globals.css +104 -12
keygenServer/client/app/layout.tsx +7 -11
keygenServer/client/app/main/page.tsx +131 -31
keygenServer/client/app/page.tsx +27 -7

keygenServer/client/app/globals.css CHANGED Viewed

@@ -1,26 +1,118 @@
 @import "tailwindcss";
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
 }
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
   }
 }
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
 }

 @import "tailwindcss";
 :root {
+  --background: #e6e7ee;
+  --foreground: #1a202c;
+  --text-muted: #2d3748;
+  --text-button: #2d3748;
+  --text-button-hover: #1a202c;
+  --shadow-light: #ffffff;
+  --shadow-dark: #a3b1c6;
+  --primary: #667eea;
+  --primary-dark: #5a67d8;
+  --success: #48bb78;
+  --error: #f56565;
+  --warning: #ed8936;
 }
 @media (prefers-color-scheme: dark) {
   :root {
+    --background: #2d3748;
+    --foreground: #e2e8f0;
+    --text-muted: #a0aec0;
+    --text-button: #e2e8f0;
+    --text-button-hover: #f7fafc;
+    --shadow-light: #374151;
+    --shadow-dark: #1a202c;
+    --primary: #667eea;
+    --primary-dark: #5a67d8;
   }
 }
 body {
   background: var(--background);
   color: var(--foreground);
+  font-family: var(--font-vollkorn), serif;
+  min-height: 100vh;
+}
+/* Neumorphic utility classes */
+.neuro-container {
+  background: var(--background);
+  box-shadow:
+    20px 20px 60px var(--shadow-dark),
+    -20px -20px 60px var(--shadow-light);
+  border-radius: 20px;
+}
+.neuro-inset {
+  background: var(--background);
+  box-shadow:
+    inset 8px 8px 16px var(--shadow-dark),
+    inset -8px -8px 16px var(--shadow-light);
+  border-radius: 12px;
+}
+.neuro-button {
+  background: var(--background);
+  color: var(--text-button);
+  box-shadow:
+    8px 8px 16px var(--shadow-dark),
+    -8px -8px 16px var(--shadow-light);
+  border-radius: 12px;
+  transition: all 0.2s ease;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.neuro-button:hover {
+  color: var(--text-button-hover);
+  transform: translateY(-1px);
+  box-shadow:
+    10px 10px 20px var(--shadow-dark),
+    -10px -10px 20px var(--shadow-light);
+}
+.neuro-button:active {
+  transform: translateY(1px);
+  box-shadow:
+    inset 4px 4px 8px var(--shadow-dark),
+    inset -4px -4px 8px var(--shadow-light);
 }
+.neuro-input {
+  background: var(--background);
+  box-shadow:
+    inset 6px 6px 12px var(--shadow-dark),
+    inset -6px -6px 12px var(--shadow-light);
+  border-radius: 8px;
+  border: none;
+  outline: none;
+}
+.neuro-card {
+  background: var(--background);
+  box-shadow:
+    15px 15px 30px var(--shadow-dark),
+    -15px -15px 30px var(--shadow-light);
+  border-radius: 16px;
+}
+/* Text color utilities */
+.text-primary {
+  color: var(--foreground);
+}
+.text-secondary {
+  color: var(--text-muted);
+}
+.text-button {
+  color: var(--text-button);
+}
+.text-button:hover {
+  color: var(--text-button-hover);
+}

keygenServer/client/app/layout.tsx CHANGED Viewed

@@ -1,20 +1,16 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
   subsets: ["latin"],
 });
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
 };
 export default function RootLayout({
@@ -25,7 +21,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         {children}
       </body>

 import type { Metadata } from "next";
+import { Vollkorn } from "next/font/google";
 import "./globals.css";
+const vollkorn = Vollkorn({
+  variable: "--font-vollkorn",
   subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
 });
 export const metadata: Metadata = {
+  title: "API Key Generator",
+  description: "Generate and manage your API keys",
 };
 export default function RootLayout({
   return (
     <html lang="en">
       <body
+        className={`${vollkorn.variable} antialiased font-vollkorn`}
       >
         {children}
       </body>

keygenServer/client/app/main/page.tsx CHANGED Viewed

@@ -10,7 +10,6 @@ export default function MainPage() {
   const [apiKey, setApiKey] = useState('');
   const [error, setError] = useState('');
   const router = useRouter();
   useEffect(() => {
     const unsub = auth.onAuthStateChanged((user) => {
       if (!user) {
@@ -22,7 +21,7 @@ export default function MainPage() {
       }
     });
     return () => unsub();
-  }, []);
   const generateApiKey = async () => {
     try {
@@ -47,40 +46,141 @@ export default function MainPage() {
     }
   };
-  if (loading) return <p>Loading...</p>;
-  return (
-    <main className="p-4">
-      <h1 className="text-xl mb-4">Welcome, {userDisplayName}!</h1>
-      <div className="space-y-4">
-        <button
-          onClick={generateApiKey}
-          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-        >
-          Generate API Key
-        </button>
-        {apiKey && (
-          <div className="mt-4 p-4 bg-gray-100 rounded">
-            <p className="font-semibold">Your API Key:</p>
-            <code className="block mt-2 p-2 bg-white rounded border">{apiKey}</code>
-          </div>
-        )}
-        {error && (
-          <div className="mt-4 p-4 bg-red-100 text-red-700 rounded">
-            {error}
           </div>
-        )}
-        <button
-          onClick={() => auth.signOut().then(() => router.push('/'))}
-          className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
-        >
-          Logout
-        </button>
       </div>
-    </main>
   );
 }

   const [apiKey, setApiKey] = useState('');
   const [error, setError] = useState('');
   const router = useRouter();
   useEffect(() => {
     const unsub = auth.onAuthStateChanged((user) => {
       if (!user) {
       }
     });
     return () => unsub();
+  }, [router]);
   const generateApiKey = async () => {
     try {
     }
   };
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(apiKey);
+      // You could add a toast notification here
+    } catch (err) {
+      console.error('Failed to copy to clipboard:', err);
+    }
+  };
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="neuro-container p-4 md:p-8">
+          <div className="flex items-center space-x-3">
+            <div className="animate-spin rounded-full h-6 w-6 md:h-8 md:w-8 border-b-2 border-gray-600"></div>
+            <span className="text-base md:text-lg text-secondary">Loading...</span>
+          </div>
+        </div>
+      </div>
+    );
+  } return (
+    <div className="min-h-screen p-3 md:p-6 flex justify-center items-center">
+      <div className="w-full max-w-4xl py-4 md:py-8">
+        {/* Header */}
+        <div className="neuro-container p-4 md:p-8 mb-6 md:mb-8">
+          <div className="flex justify-between items-center gap-4">
+            <div>
+              <h1 className="text-xl md:text-3xl font-bold text-primary mb-2">
+                Welcome back, {userDisplayName}!
+              </h1>
+              <p className="text-sm md:text-base text-secondary">
+                Generate your MCP API key for monitoring external APIs
+              </p>
+            </div>
+            <button
+              onClick={() => auth.signOut().then(() => router.push('/'))}
+              className="neuro-button px-3 py-2 md:px-6 md:py-3 text-sm md:text-base text-button font-medium"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+        {/* Main Content */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8">
+          {/* API Key Generation */}          <div className="neuro-card p-4 md:p-8">
+            <h2 className="text-lg md:text-2xl font-semibold text-primary mb-4 md:mb-6">
+              Generate MCP API Key
+            </h2>
+            <div className="space-y-6">
+              <button
+                onClick={generateApiKey}
+                className="neuro-button w-full py-3 px-4 md:py-4 md:px-6 text-base md:text-lg font-semibold text-button"
+              >
+                <span className="flex items-center justify-center space-x-2">
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v-2L2.257 8.257a6 6 0 017.743-7.743L15 7z" />
+                  </svg>
+                  <span>Generate New MCP API Key</span>
+                </span>
+              </button>
+              {apiKey && (<div className="neuro-inset p-4 md:p-6">
+                <div className="flex justify-between items-center mb-3">
+                  <h3 className="text-sm md:text-base font-semibold text-primary">Your MCP API Key</h3><button
+                    onClick={copyToClipboard}
+                    className="neuro-button px-3 py-2 text-sm text-button"
+                    title="Copy to clipboard"
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                    </svg>
+                  </button>
+                </div>
+                <div className="neuro-input p-4">
+                  <code className="text-sm text-primary font-mono break-all">
+                    {apiKey}
+                  </code>
+                </div>                  <p className="text-xs text-secondary mt-2">
+                  Keep this MCP API key secure - use it for monitoring external APIs
+                </p>
+              </div>
+              )}
+              {error && (
+                <div className="neuro-inset p-4 border-l-4 border-red-400">
+                  <div className="flex items-center">
+                    <svg className="w-5 h-5 text-red-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <span className="text-red-700 font-medium">{error}</span>
+                  </div>
+                </div>
+              )}
+            </div>
           </div>
+          {/* User Info & Instructions */}
+          <div className="space-y-4 md:space-y-8">
+            {/* User Profile */}            <div className="neuro-card p-4 md:p-8">
+              <h2 className="text-lg md:text-2xl font-semibold text-primary mb-4 md:mb-6">
+                Account Information
+              </h2>
+              <div className="space-y-4">
+                <div className="neuro-inset p-4">                  <label className="text-sm font-medium text-secondary">Email</label>
+                  <p className="text-primary font-medium">{userEmail}</p>
+                </div>
+                <div className="neuro-inset p-4">                  <label className="text-sm font-medium text-secondary">Display Name</label>
+                  <p className="text-primary font-medium">{userDisplayName}</p>
+                </div>
+              </div>
+            </div>
+            {/* Usage Instructions */}            <div className="neuro-card p-4 md:p-8">
+              <h2 className="text-lg md:text-2xl font-semibold text-primary mb-4 md:mb-6">
+                How to Use Your MCP API Key
+              </h2>
+              <div className="space-y-4 text-sm md:text-base text-secondary">
+                <div className="flex items-start space-x-3">
+                  <span className="flex-shrink-0 w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-semibold">1</span>
+                  <p>Use this key with the MCP API monitoring system to track external APIs</p>
+                </div>
+                <div className="flex items-start space-x-3">
+                  <span className="flex-shrink-0 w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-semibold">2</span>
+                  <p>Set up API monitoring rules for automated external API calls</p>
+                </div>
+                <div className="flex items-start space-x-3">
+                  <span className="flex-shrink-0 w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-semibold">3</span>
+                  <p>Monitor API responses and receive alerts when external services change</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
+    </div>
   );
 }

keygenServer/client/app/page.tsx CHANGED Viewed

@@ -16,13 +16,33 @@ export default function LoginPage() {
     }
   };
-  return (
-    <main className="p-4">
-      <h1 className="text-xl mb-4">Sign In</h1>
-      <button onClick={signInWithGoogle} className="bg-blue-500 text-white px-4 py-2 rounded">
-        Sign in with Google
-      </button>
-    </main>
   );
 }

     }
   };
+  return (<div className="min-h-screen flex items-center justify-center p-3 md:p-6">
+    <div className="neuro-container w-full max-w-md p-4 md:p-8">        <div className="text-center mb-6 md:mb-8">
+      <h1 className="text-2xl md:text-4xl font-bold mb-2 text-primary">
+        MCP API Monitor
+      </h1>
+      <p className="text-sm md:text-lg text-secondary">
+        Sign in to generate your MCP API key for monitoring external APIs
+      </p>
+    </div>        <div className="space-y-4 md:space-y-6">          <button
+      onClick={signInWithGoogle}
+      className="neuro-button w-full py-3 px-4 md:py-4 md:px-6 text-base md:text-lg font-semibold text-button space-x-3"
+    >
+      <svg className="w-5 h-5 md:w-6 md:h-6" viewBox="0 0 24 24">
+        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
+        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
+        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
+        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
+      </svg>
+      <span>Continue with Google</span>
+    </button>          <div className="neuro-inset p-4">
+          <p className="text-sm text-secondary text-center">
+            Generate your MCP API key to start monitoring external APIs
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
   );
 }