Add MGZon logo to OAuth button

views/index.ejs

@@ -8,30 +8,29 @@
     <meta name="keywords" content="portfolio, API, Node.js, Express, MongoDB, developer, OAuth, JWT">
     <meta name="author" content="Ibrahim Al-Asfar">
     <meta name="robots" content="index, follow">
-
+    
     <!-- Open Graph / Social Media -->
     <meta property="og:title" content="Ibrahim Al-Asfar Portfolio API">
-    <meta property="og:description"
-        content="Full-stack web developer portfolio API with authentication and AI features">
+    <meta property="og:description" content="Full-stack web developer portfolio API with authentication and AI features">
     <meta property="og:type" content="website">
     <meta property="og:url" content="https://mgzon-server.hf.space">
     <meta property="og:image" content="https://mgzon-server.hf.space/images/logo.png">
-
+    
     <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="Ibrahim Al-Asfar Portfolio API">
     <meta name="twitter:description" content="Full-stack web developer portfolio API">
     <meta name="twitter:image" content="https://mgzon-server.hf.space/images/logo.png">
-
+    
     <!-- Favicon -->
     <link rel="icon" type="image/png" href="/images/logo.png">
     <link rel="apple-touch-icon" href="/images/logo.png">
-
+    
     <title>Ibrahim Al-Asfar Portfolio API</title>
 
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
-
+    
     <!-- Font Awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 
@@ -48,7 +47,6 @@
                 opacity: 0;
                 transform: translateY(30px);
             }
-
             to {
                 opacity: 1;
                 transform: translateY(0);
@@ -56,15 +54,8 @@
         }
 
         @keyframes float {
-
-            0%,
-            100% {
-                transform: translateY(0px);
-            }
-
-            50% {
-                transform: translateY(-10px);
-            }
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
         }
 
         .animate-fadeInUp {
@@ -155,342 +146,98 @@
             border-radius: 0.75rem;
         }
 
-        .p-2 {
-            padding: 0.5rem;
-        }
-
-        .p-3 {
-            padding: 0.75rem;
-        }
-
-        .p-4 {
-            padding: 1rem;
-        }
-
-        .p-5 {
-            padding: 1.25rem;
-        }
-
-        .p-6 {
-            padding: 1.5rem;
-        }
-
-        .py-8 {
-            padding-top: 2rem;
-            padding-bottom: 2rem;
-        }
-
-        .py-12 {
-            padding-top: 3rem;
-            padding-bottom: 3rem;
-        }
-
-        .py-16 {
-            padding-top: 4rem;
-            padding-bottom: 4rem;
-        }
-
-        .py-20 {
-            padding-top: 5rem;
-            padding-bottom: 5rem;
-        }
-
-        .px-4 {
-            padding-left: 1rem;
-            padding-right: 1rem;
-        }
-
-        .px-8 {
-            padding-left: 2rem;
-            padding-right: 2rem;
-        }
-
-        .text-center {
-            text-align: center;
-        }
-
-        .text-white {
-            color: white;
-        }
-
-        .text-gray-600 {
-            color: #4b5563;
-        }
-
-        .text-gray-800 {
-            color: #1f2937;
-        }
-
-        .text-xl {
-            font-size: 1.25rem;
-        }
-
-        .text-2xl {
-            font-size: 1.5rem;
-        }
-
-        .text-3xl {
-            font-size: 1.875rem;
-        }
-
-        .text-5xl {
-            font-size: 3rem;
-        }
-
-        .font-bold {
-            font-weight: 700;
-        }
-
-        .font-semibold {
-            font-weight: 600;
-        }
-
-        .bg-white {
-            background-color: white;
-        }
-
-        .bg-gray-800 {
-            background-color: #1f2937;
-        }
-
-        .bg-green-500 {
-            background-color: #10b981;
-        }
-
-        .bg-red-500 {
-            background-color: #ef4444;
-        }
-
-        .mb-2 {
-            margin-bottom: 0.5rem;
-        }
-
-        .mb-4 {
-            margin-bottom: 1rem;
-        }
-
-        .mb-6 {
-            margin-bottom: 1.5rem;
-        }
-
-        .mb-8 {
-            margin-bottom: 2rem;
-        }
-
-        .mb-12 {
-            margin-bottom: 3rem;
-        }
-
-        .mt-2 {
-            margin-top: 0.5rem;
-        }
-
-        .mr-2 {
-            margin-right: 0.5rem;
-        }
-
-        .ml-2 {
-            margin-left: 0.5rem;
-        }
-
-        .flex {
-            display: flex;
-        }
-
-        .inline-flex {
-            display: inline-flex;
-        }
-
-        .grid {
-            display: grid;
-        }
-
-        .items-center {
-            align-items: center;
-        }
-
-        .justify-center {
-            justify-content: center;
-        }
-
-        .justify-between {
-            justify-content: space-between;
-        }
-
-        .gap-4 {
-            gap: 1rem;
-        }
-
-        .gap-6 {
-            gap: 1.5rem;
-        }
-
-        .gap-8 {
-            gap: 2rem;
-        }
-
-        .max-w-2xl {
-            max-width: 42rem;
-        }
-
-        .max-w-7xl {
-            max-width: 80rem;
-        }
-
-        .mx-auto {
-            margin-left: auto;
-            margin-right: auto;
-        }
-
-        .w-12 {
-            width: 3rem;
-        }
-
-        .h-12 {
-            height: 3rem;
-        }
-
-        .w-16 {
-            width: 4rem;
-        }
-
-        .h-16 {
-            height: 4rem;
-        }
-
-        .w-3 {
-            width: 0.75rem;
-        }
-
-        .h-3 {
-            height: 0.75rem;
-        }
-
-        .rounded-full {
-            border-radius: 9999px;
-        }
-
-        .cursor-pointer {
-            cursor: pointer;
-        }
-
-        .animate-pulse {
-            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-        }
-
+        .p-2 { padding: 0.5rem; }
+        .p-3 { padding: 0.75rem; }
+        .p-4 { padding: 1rem; }
+        .p-5 { padding: 1.25rem; }
+        .p-6 { padding: 1.5rem; }
+        .py-8 { padding-top: 2rem; padding-bottom: 2rem; }
+        .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
+        .py-16 { padding-top: 4rem; padding-bottom: 4rem; }
+        .py-20 { padding-top: 5rem; padding-bottom: 5rem; }
+        .px-4 { padding-left: 1rem; padding-right: 1rem; }
+        .px-8 { padding-left: 2rem; padding-right: 2rem; }
+        .text-center { text-align: center; }
+        .text-white { color: white; }
+        .text-gray-600 { color: #4b5563; }
+        .text-gray-800 { color: #1f2937; }
+        .text-xl { font-size: 1.25rem; }
+        .text-2xl { font-size: 1.5rem; }
+        .text-3xl { font-size: 1.875rem; }
+        .text-5xl { font-size: 3rem; }
+        .font-bold { font-weight: 700; }
+        .font-semibold { font-weight: 600; }
+        .bg-white { background-color: white; }
+        .bg-gray-800 { background-color: #1f2937; }
+        .bg-green-500 { background-color: #10b981; }
+        .bg-red-500 { background-color: #ef4444; }
+        .mb-2 { margin-bottom: 0.5rem; }
+        .mb-4 { margin-bottom: 1rem; }
+        .mb-6 { margin-bottom: 1.5rem; }
+        .mb-8 { margin-bottom: 2rem; }
+        .mb-12 { margin-bottom: 3rem; }
+        .mt-2 { margin-top: 0.5rem; }
+        .mr-2 { margin-right: 0.5rem; }
+        .ml-2 { margin-left: 0.5rem; }
+        .flex { display: flex; }
+        .inline-flex { display: inline-flex; }
+        .grid { display: grid; }
+        .items-center { align-items: center; }
+        .justify-center { justify-content: center; }
+        .justify-between { justify-content: space-between; }
+        .gap-4 { gap: 1rem; }
+        .gap-6 { gap: 1.5rem; }
+        .gap-8 { gap: 2rem; }
+        .max-w-2xl { max-width: 42rem; }
+        .max-w-7xl { max-width: 80rem; }
+        .mx-auto { margin-left: auto; margin-right: auto; }
+        .w-12 { width: 3rem; }
+        .h-12 { height: 3rem; }
+        .w-16 { width: 4rem; }
+        .h-16 { height: 4rem; }
+        .w-3 { width: 0.75rem; }
+        .h-3 { height: 0.75rem; }
+        .rounded-full { border-radius: 9999px; }
+        .cursor-pointer { cursor: pointer; }
+        .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+        
         @keyframes pulse {
-
-            0%,
-            100% {
-                opacity: 1;
-            }
-
-            50% {
-                opacity: .5;
-            }
-        }
-
-        .sticky {
-            position: sticky;
-        }
-
-        .top-0 {
-            top: 0;
-        }
-
-        .z-50 {
-            z-index: 50;
-        }
-
-        .absolute {
-            position: absolute;
-        }
-
-        .relative {
-            position: relative;
-        }
-
-        .inset-0 {
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-        }
-
-        .overflow-hidden {
-            overflow: hidden;
-        }
-
-        .bg-opacity-10 {
-            opacity: 0.1;
-        }
-
-        .transition {
-            transition-property: all;
-            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-            transition-duration: 150ms;
-        }
-
-        .hover\:shadow-xl:hover {
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-        }
-
-        .hover\:shadow-2xl:hover {
-            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-        }
-
-        .hover\:bg-gray-900:hover {
-            background-color: #111827;
-        }
-
-        .hover\:text-purple-600:hover {
-            color: #7c3aed;
-        }
-
-        .hover\:scale-105:hover {
-            transform: scale(1.05);
-        }
-
+            0%, 100% { opacity: 1; }
+            50% { opacity: .5; }
+        }
+        
+        .sticky { position: sticky; }
+        .top-0 { top: 0; }
+        .z-50 { z-index: 50; }
+        .absolute { position: absolute; }
+        .relative { position: relative; }
+        .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
+        .overflow-hidden { overflow: hidden; }
+        .bg-opacity-10 { opacity: 0.1; }
+        .transition { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+        .hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
+        .hover\:shadow-2xl:hover { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
+        .hover\:bg-gray-900:hover { background-color: #111827; }
+        .hover\:text-purple-600:hover { color: #7c3aed; }
+        .hover\:scale-105:hover { transform: scale(1.05); }
+        
         @media (min-width: 640px) {
-            .sm\:px-6 {
-                padding-left: 1.5rem;
-                padding-right: 1.5rem;
-            }
+            .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
         }
-
+        
         @media (min-width: 768px) {
-            .md\:grid-cols-2 {
-                grid-template-columns: repeat(2, minmax(0, 1fr));
-            }
-
-            .md\:grid-cols-3 {
-                grid-template-columns: repeat(3, minmax(0, 1fr));
-            }
-
-            .md\:grid-cols-4 {
-                grid-template-columns: repeat(4, minmax(0, 1fr));
-            }
-
-            .md\:text-6xl {
-                font-size: 3.75rem;
-            }
+            .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+            .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+            .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+            .md\:text-6xl { font-size: 3.75rem; }
         }
-
+        
         @media (min-width: 1024px) {
-            .lg\:grid-cols-3 {
-                grid-template-columns: repeat(3, minmax(0, 1fr));
-            }
-
-            .lg\:grid-cols-4 {
-                grid-template-columns: repeat(4, minmax(0, 1fr));
-            }
-
-            .lg\:px-8 {
-                padding-left: 2rem;
-                padding-right: 2rem;
-            }
+            .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+            .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+            .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
         }
-
+        
         /* Toast notification */
         .toast {
             position: fixed;
@@ -499,34 +246,25 @@
             background: white;
             border-radius: 8px;
             padding: 12px 20px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
             z-index: 1000;
             animation: slideIn 0.3s ease;
         }
-
+        
         @keyframes slideIn {
             from {
                 transform: translateX(100%);
                 opacity: 0;
             }
-
             to {
                 transform: translateX(0);
                 opacity: 1;
             }
         }
-
-        .toast.success {
-            border-left: 4px solid #10b981;
-        }
-
-        .toast.error {
-            border-left: 4px solid #ef4444;
-        }
-
-        .toast.info {
-            border-left: 4px solid #3b82f6;
-        }
+        
+        .toast.success { border-left: 4px solid #10b981; }
+        .toast.error { border-left: 4px solid #ef4444; }
+        .toast.info { border-left: 4px solid #3b82f6; }
     </style>
 </head>
 
@@ -545,16 +283,13 @@
                     </h1>
                 </div>
                 <div class="flex items-center space-x-4">
-                    <a href="/api-docs" target="_blank" class="text-gray-600 hover:text-purple-600 transition"
-                        title="API Documentation">
+                    <a href="/api-docs" target="_blank" class="text-gray-600 hover:text-purple-600 transition" title="API Documentation">
                         <i class="fas fa-book text-lg"></i>
                     </a>
-                    <a href="https://github.com/Mark-Lasfar" target="_blank"
-                        class="text-gray-600 hover:text-purple-600 transition" title="GitHub">
+                    <a href="https://github.com/Mark-Lasfar" target="_blank" class="text-gray-600 hover:text-purple-600 transition" title="GitHub">
                         <i class="fab fa-github text-lg"></i>
                     </a>
-                    <a href="https://linkedin.com/in/ibrahim-elasfar" target="_blank"
-                        class="text-gray-600 hover:text-purple-600 transition" title="LinkedIn">
+                    <a href="https://linkedin.com/in/ibrahim-elasfar" target="_blank" class="text-gray-600 hover:text-purple-600 transition" title="LinkedIn">
                         <i class="fab fa-linkedin text-lg"></i>
                     </a>
                 </div>
@@ -575,18 +310,14 @@
                     Welcome to My Portfolio API
                 </h1>
                 <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
-                    Full-stack web developer passionate about building modern web applications with cutting-edge
-                    technologies.
+                    Full-stack web developer passionate about building modern web applications with cutting-edge technologies.
                 </p>
                 <div class="flex flex-wrap justify-center gap-4">
-                    <a href="/api-docs"
-                        class="gradient-bg text-white px-8 py-3 rounded-lg font-semibold btn-hover inline-flex items-center">
+                    <a href="/api-docs" class="gradient-bg text-white px-8 py-3 rounded-lg font-semibold btn-hover inline-flex items-center">
                         <i class="fas fa-rocket mr-2"></i>
                         Explore API
                     </a>
-                    <a href="#test-api"
-                        class="bg-gray-800 text-white px-8 py-3 rounded-lg font-semibold btn-hover inline-flex items-center"
-                        id="test-api-btn">
+                    <a href="#test-api" class="bg-gray-800 text-white px-8 py-3 rounded-lg font-semibold btn-hover inline-flex items-center" id="test-api-btn">
                         <i class="fas fa-vial mr-2"></i>
                         Test API
                     </a>
@@ -632,56 +363,45 @@
         <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">🔐 Authentication Providers</h2>
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
             <!-- Google OAuth -->
-            <a href="/auth/google" class="bg-white rounded-xl shadow-lg p-6 card-hover text-center group"
-                target="_blank">
+            <a href="/auth/google" class="bg-white rounded-xl shadow-lg p-6 card-hover text-center group" target="_blank">
                 <div class="w-16 h-16 mx-auto mb-4">
                     <i class="fab fa-google text-5xl text-red-500 group-hover:scale-110 transition-transform"></i>
                 </div>
                 <h3 class="font-semibold text-gray-800">Sign in with Google</h3>
                 <p class="text-xs text-gray-500 mt-2">OAuth 2.0</p>
-                <span
-                    class="inline-block mt-3 text-purple-600 text-sm opacity-0 group-hover:opacity-100 transition">Click
-                    to test →</span>
+                <span class="inline-block mt-3 text-purple-600 text-sm opacity-0 group-hover:opacity-100 transition">Click to test →</span>
             </a>
 
             <!-- Facebook OAuth -->
-            <a href="/auth/facebook" class="bg-white rounded-xl shadow-lg p-6 card-hover text-center group"
-                target="_blank">
+            <a href="/auth/facebook" class="bg-white rounded-xl shadow-lg p-6 card-hover text-center group" target="_blank">
                 <div class="w-16 h-16 mx-auto mb-4">
                     <i class="fab fa-facebook text-5xl text-blue-600 group-hover:scale-110 transition-transform"></i>
                 </div>
                 <h3 class="font-semibold text-gray-800">Sign in with Facebook</h3>
                 <p class="text-xs text-gray-500 mt-2">OAuth 2.0</p>
-                <span
-                    class="inline-block mt-3 text-purple-600 text-sm opacity-0 group-hover:opacity-100 transition">Click
-                    to test →</span>
+                <span class="inline-block mt-3 text-purple-600 text-sm opacity-0 group-hover:opacity-100 transition">Click to test →</span>
             </a>
 
             <!-- GitHub OAuth -->
-            <a href="/auth/github" class="bg-white rounded-xl shadow-lg p-6 card-hover text-center group"
-                target="_blank">
+            <a href="/auth/github" class="bg-white rounded-xl shadow-lg p-6 card-hover text-center group" target="_blank">
                 <div class="w-16 h-16 mx-auto mb-4">
                     <i class="fab fa-github text-5xl text-gray-800 group-hover:scale-110 transition-transform"></i>
                 </div>
                 <h3 class="font-semibold text-gray-800">Sign in with GitHub</h3>
                 <p class="text-xs text-gray-500 mt-2">OAuth 2.0</p>
-                <span
-                    class="inline-block mt-3 text-purple-600 text-sm opacity-0 group-hover:opacity-100 transition">Click
-                    to test →</span>
+                <span class="inline-block mt-3 text-purple-600 text-sm opacity-0 group-hover:opacity-100 transition">Click to test →</span>
             </a>
 
-            <!-- MGZon OAuth -->
+                        <!-- MGZon OAuth -->
             <a href="/auth/mgz" class="bg-white rounded-xl shadow-lg p-6 card-hover text-center group" target="_blank">
                 <div class="w-16 h-16 mx-auto mb-4">
-                    <img src="https://mgzon-server.hf.space/images/logo.png" alt="MGZon"
+                    <img src="https://mgzon-server.hf.space/images/logo.png" alt="MGZon" 
                         class="w-16 h-16 rounded-full mx-auto group-hover:scale-110 transition-transform"
                         onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'w-16 h-16 gradient-bg rounded-full flex items-center justify-center mx-auto group-hover:scale-110 transition-transform\'><i class=\'fas fa-globe text-white text-2xl\'></i></div>'">
                 </div>
                 <h3 class="font-semibold text-gray-800">Sign in with MGZon</h3>
                 <p class="text-xs text-gray-500 mt-2">OAuth 2.0</p>
-                <span
-                    class="inline-block mt-3 text-purple-600 text-sm opacity-0 group-hover:opacity-100 transition">Click
-                    to test →</span>
+                <span class="inline-block mt-3 text-purple-600 text-sm opacity-0 group-hover:opacity-100 transition">Click to test →</span>
             </a>
         </div>
     </div>
@@ -693,8 +413,7 @@
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
                     <label class="block text-sm font-medium text-gray-700 mb-2">Endpoint</label>
-                    <select id="api-endpoint"
-                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+                    <select id="api-endpoint" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                         <option value="/api/health">GET /api/health</option>
                         <option value="/api/projects">GET /api/projects</option>
                         <option value="/api/skills">GET /api/skills</option>
@@ -704,9 +423,7 @@
                 </div>
                 <div>
                     <label class="block text-sm font-medium text-gray-700 mb-2">Request Body (JSON)</label>
-                    <textarea id="api-body" rows="3"
-                        class="w-full px-4 py-2 border border-gray-300 rounded-lg font-mono text-sm"
-                        placeholder='{"email": "test@example.com", "password": "12345678"}'></textarea>
+                    <textarea id="api-body" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg font-mono text-sm" placeholder='{"email": "test@example.com", "password": "12345678"}'></textarea>
                 </div>
             </div>
             <div class="mt-4 flex justify-center">
@@ -717,8 +434,7 @@
             </div>
             <div class="mt-6">
                 <label class="block text-sm font-medium text-gray-700 mb-2">Response</label>
-                <pre id="api-response"
-                    class="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto font-mono text-sm max-h-96">Click "Send Request" to test API...</pre>
+                <pre id="api-response" class="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto font-mono text-sm max-h-96">Click "Send Request" to test API...</pre>
             </div>
         </div>
     </div>
@@ -734,8 +450,7 @@
                 </div>
                 <code class="text-sm text-gray-700">/api/projects</code>
                 <p class="text-gray-500 text-sm mt-2">Get all public projects</p>
-                <button onclick="testEndpoint('/api/projects')"
-                    class="mt-3 text-purple-600 text-sm hover:underline">Test →</button>
+                <button onclick="testEndpoint('/api/projects')" class="mt-3 text-purple-600 text-sm hover:underline">Test →</button>
             </div>
 
             <div class="bg-white rounded-lg shadow-md p-5 card-hover">
@@ -745,8 +460,7 @@
                 </div>
                 <code class="text-sm text-gray-700">/api/skills</code>
                 <p class="text-gray-500 text-sm mt-2">Get all skills</p>
-                <button onclick="testEndpoint('/api/skills')" class="mt-3 text-purple-600 text-sm hover:underline">Test
-                    →</button>
+                <button onclick="testEndpoint('/api/skills')" class="mt-3 text-purple-600 text-sm hover:underline">Test →</button>
             </div>
 
             <div class="bg-white rounded-lg shadow-md p-5 card-hover">
@@ -756,8 +470,7 @@
                 </div>
                 <code class="text-sm text-gray-700">/api/health</code>
                 <p class="text-gray-500 text-sm mt-2">Check system health</p>
-                <button onclick="testEndpoint('/api/health')" class="mt-3 text-purple-600 text-sm hover:underline">Test
-                    →</button>
+                <button onclick="testEndpoint('/api/health')" class="mt-3 text-purple-600 text-sm hover:underline">Test →</button>
             </div>
 
             <div class="bg-white rounded-lg shadow-md p-5 card-hover">
@@ -767,9 +480,7 @@
                 </div>
                 <code class="text-sm text-gray-700">/api/register</code>
                 <p class="text-gray-500 text-sm mt-2">Create new account</p>
-                <button
-                    onclick="testEndpoint('/api/register', 'POST', {email: 'test@example.com', password: '12345678', username: 'testuser'})"
-                    class="mt-3 text-purple-600 text-sm hover:underline">Test →</button>
+                <button onclick="testEndpoint('/api/register', 'POST', {email: 'test@example.com', password: '12345678', username: 'testuser'})" class="mt-3 text-purple-600 text-sm hover:underline">Test →</button>
             </div>
 
             <div class="bg-white rounded-lg shadow-md p-5 card-hover">
@@ -779,8 +490,7 @@
                 </div>
                 <code class="text-sm text-gray-700">/api/login</code>
                 <p class="text-gray-500 text-sm mt-2">Authenticate user</p>
-                <button onclick="testEndpoint('/api/login', 'POST', {email: 'admin@elasfar.com', password: 'admin123'})"
-                    class="mt-3 text-purple-600 text-sm hover:underline">Test →</button>
+                <button onclick="testEndpoint('/api/login', 'POST', {email: 'admin@elasfar.com', password: 'admin123'})" class="mt-3 text-purple-600 text-sm hover:underline">Test →</button>
             </div>
 
             <div class="bg-white rounded-lg shadow-md p-5 card-hover">
@@ -790,8 +500,7 @@
                 </div>
                 <code class="text-sm text-gray-700">/auth/google</code>
                 <p class="text-gray-500 text-sm mt-2">Google OAuth Login</p>
-                <a href="/auth/google" target="_blank"
-                    class="mt-3 text-purple-600 text-sm hover:underline inline-block">Open →</a>
+                <a href="/auth/google" target="_blank" class="mt-3 text-purple-600 text-sm hover:underline inline-block">Open →</a>
             </div>
         </div>
     </div>
@@ -871,13 +580,13 @@
         async function testEndpoint(url, method = 'GET', body = null) {
             const responseDiv = document.getElementById('api-response');
             responseDiv.textContent = 'Loading...';
-
+            
             try {
                 const options = { method, headers: { 'Content-Type': 'application/json' } };
                 if (body && method !== 'GET') {
                     options.body = JSON.stringify(body);
                 }
-
+                
                 const response = await fetch(url, options);
                 const data = await response.json();
                 responseDiv.textContent = JSON.stringify(data, null, 2);
@@ -897,10 +606,10 @@
 
                 document.getElementById('db-status').innerHTML = data.mongodb === 'connected' ? 'MongoDB Connected ✅' : 'MongoDB Error ❌';
                 document.getElementById('db-status').className = data.mongodb === 'connected' ? 'text-green-600' : 'text-red-600';
-
+                
                 document.getElementById('cloudinary-status').innerHTML = data.cloudinary === 'configured' ? 'Cloudinary Active ✅' : 'Cloudinary Not Configured ⚠️';
                 document.getElementById('cloudinary-status').className = data.cloudinary === 'configured' ? 'text-green-600' : 'text-yellow-600';
-
+                
                 document.getElementById('sentry-status').innerHTML = data.sentry === 'configured' ? 'Sentry Active ✅' : 'Sentry Not Configured ⚠️';
                 document.getElementById('sentry-status').className = data.sentry === 'configured' ? 'text-green-600' : 'text-yellow-600';
             } catch (error) {
@@ -916,7 +625,7 @@
             const endpoint = document.getElementById('api-endpoint').value;
             const bodyText = document.getElementById('api-body').value;
             let body = null;
-
+            
             if (bodyText && (endpoint.includes('/register') || endpoint.includes('/login'))) {
                 try {
                     body = JSON.parse(bodyText);
@@ -925,14 +634,14 @@
                     return;
                 }
             }
-
+            
             const method = endpoint.includes('/register') || endpoint.includes('/login') ? 'POST' : 'GET';
             await testEndpoint(endpoint, method, body);
         });
 
         // Load stats on page load
         fetchStats();
-
+        
         // Refresh stats every 30 seconds
         setInterval(fetchStats, 30000);
 
@@ -957,7 +666,7 @@
                 document.body.style.opacity = '1';
             }, 100);
         });
-
+        
         // Show welcome toast
         setTimeout(() => {
             showToast('Welcome to Portfolio API! 🚀', 'info');