Team Ai
Apppublic

developer2guy/middleware-bridge-pro

sourceHugging Faceupdated 1y agoView on Hugging Face
0likes
app.html882 linesDownload Raw Back to root
1<!DOCTYPE html>2<html lang="en">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>Middleware Bridge Pro</title>7    <script src="https://cdn.tailwindcss.com"></script>8    <script src="https://unpkg.com/feather-icons"></script>9    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">11    <script>12        tailwind.config = {13            theme: {14                extend: {15                    colors: {16                        primary: {17                            50: '#f0f9ff',18                            100: '#e0f2fe',19                            200: '#bae6fd',20                            300: '#7dd3fc',21                            400: '#38bdf8',22                            500: '#0ea5e9',23                            600: '#0284c7',24                            700: '#0369a1',25                            800: '#075985',26                            900: '#0c4a6e',27                        },28                        secondary: {29                            50: '#f5f3ff',30                            100: '#ede9fe',31                            200: '#ddd6fe',32                            300: '#c4b5fd',33                            400: '#a78bfa',34                            500: '#8b5cf6',35                            600: '#7c3aed',36                            700: '#6d28d9',37                            800: '#5b21b6',38                            900: '#4c1d95',39                        }40                    }41                }42            }43        }44    </script>45    <style>46        body {47            font-family: 'Inter', sans-serif;48            background-color: #f8fafc;49        }50        .card-hover {51            transition: all 0.3s ease;52        }53        .card-hover:hover {54            transform: translateY(-5px);55            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);56        }57        .pulse-animation {58            animation: pulse 2s infinite;59        }60        @keyframes pulse {61            0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4); }62            70% { box-shadow: 0 0 0 10px rgba(14, 165, 233, 0); }63            100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }64        }65        .nav-icon {66            transition: all 0.2s ease;67        }68        .nav-icon:hover {69            transform: scale(1.1);70        }71        .nav-icon.active {72            color: #0ea5e9;73            background-color: #f0f9ff;74        }75        .screen {76            display: none;77        }78        .screen.active {79            display: block;80        }81    </style>82</head>83<body class="bg-gray-50">84    <!-- Main Container -->85    <div class="flex flex-col h-screen">86        <!-- Top Navigation -->87        <nav class="bg-white shadow-sm">88            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">89                <div class="flex justify-between h-16">90                    <div class="flex items-center">91                        <div class="flex-shrink-0 flex items-center">92                            <div class="bg-primary-600 w-8 h-8 rounded-lg flex items-center justify-center">93                                <i data-feather="layers" class="text-white"></i>94                            </div>95                            <span class="ml-2 text-xl font-bold text-gray-900">Middleware Bridge Pro</span>96                        </div>97                    </div>98                    <div class="flex items-center">99                        <button class="bg-primary-600 text-white p-1 rounded-full hover:bg-primary-700 focus:outline-none">100                            <i data-feather="settings" class="h-5 w-5"></i>101                        </button>102                    </div>103                </div>104            </div>105        </nav>106 107        <!-- Main Content Area -->108        <div class="flex flex-1 overflow-hidden">109            <!-- Sidebar Navigation -->110            <div class="w-20 bg-white shadow-md flex flex-col items-center py-4 space-y-8">111                <button class="nav-icon active p-3 rounded-xl" data-screen="dashboard">112                    <i data-feather="home" class="h-6 w-6"></i>113                    <span class="sr-only">Dashboard</span>114                </button>115                <button class="nav-icon p-3 rounded-xl" data-screen="configuration">116                    <i data-feather="settings" class="h-6 w-6"></i>117                    <span class="sr-only">Configuration</span>118                </button>119                <button class="nav-icon p-3 rounded-xl" data-screen="endpoints">120                    <i data-feather="link" class="h-6 w-6"></i>121                    <span class="sr-only">Endpoints</span>122                </button>123                <button class="nav-icon p-3 rounded-xl" data-screen="testing">124                    <i data-feather="code" class="h-6 w-6"></i>125                    <span class="sr-only">API Testing</span>126                </button>127                <button class="nav-icon p-3 rounded-xl" data-screen="monitoring">128                    <i data-feather="activity" class="h-6 w-6"></i>129                    <span class="sr-only">Monitoring</span>130                </button>131            </div>132 133            <!-- Content Area -->134            <main class="flex-1 overflow-y-auto p-6">135                <!-- Dashboard Screen -->136                <div id="dashboard" class="screen active">137                    <div class="mb-8">138                        <h1 class="text-3xl font-bold text-gray-900">System Integration Dashboard</h1>139                        <p class="mt-2 text-gray-600">Manage your middleware connections and monitor system health</p>140                    </div>141 142                    <!-- Status Cards -->143                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">144                        <div class="bg-white rounded-xl shadow-sm p-6 card-hover border-l-4 border-primary-500">145                            <div class="flex items-center">146                                <div class="p-3 rounded-lg bg-primary-100">147                                    <i data-feather="server" class="h-6 w-6 text-primary-600"></i>148                                </div>149                                <div class="ml-4">150                                    <h3 class="text-sm font-medium text-gray-500">System A Status</h3>151                                    <p class="text-2xl font-semibold text-gray-900">Connected</p>152                                </div>153                            </div>154                        </div>155 156                        <div class="bg-white rounded-xl shadow-sm p-6 card-hover border-l-4 border-secondary-500">157                            <div class="flex items-center">158                                <div class="p-3 rounded-lg bg-secondary-100">159                                    <i data-feather="database" class="h-6 w-6 text-secondary-600"></i>160                                </div>161                                <div class="ml-4">162                                    <h3 class="text-sm font-medium text-gray-500">System B Status</h3>163                                    <p class="text-2xl font-semibold text-gray-900">Connected</p>164                                </div>165                            </div>166                        </div>167 168                        <div class="bg-white rounded-xl shadow-sm p-6 card-hover border-l-4 border-green-500">169                            <div class="flex items-center">170                                <div class="p-3 rounded-lg bg-green-100">171                                    <i data-feather="activity" class="h-6 w-6 text-green-600"></i>172                                </div>173                                <div class="ml-4">174                                    <h3 class="text-sm font-medium text-gray-500">API Gateway</h3>175                                    <p class="text-2xl font-semibold text-gray-900">Active</p>176                                </div>177                            </div>178                        </div>179 180                        <div class="bg-white rounded-xl shadow-sm p-6 card-hover border-l-4 border-amber-500">181                            <div class="flex items-center">182                                <div class="p-3 rounded-lg bg-amber-100">183                                    <i data-feather="clock" class="h-6 w-6 text-amber-600"></i>184                                </div>185                                <div class="ml-4">186                                    <h3 class="text-sm font-medium text-gray-500">Uptime</h3>187                                    <p class="text-2xl font-semibold text-gray-900">99.9%</p>188                                </div>189                            </div>190                        </div>191                    </div>192 193                    <!-- Monitoring Section -->194                    <div class="bg-white rounded-xl shadow-sm overflow-hidden">195                        <div class="px-6 py-5 border-b border-gray-200">196                            <h2 class="text-lg font-medium text-gray-900">System Health Monitoring</h2>197                            <p class="mt-1 text-sm text-gray-500">Real-time performance metrics and alerts</p>198                        </div>199                        <div class="p-6">200                            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">201                                <div class="border border-gray-200 rounded-lg p-4">202                                    <div class="flex items-center">203                                        <div class="p-2 bg-green-100 rounded-lg">204                                            <i data-feather="trending-up" class="h-5 w-5 text-green-600"></i>205                                        </div>206                                        <div class="ml-3">207                                            <p class="text-sm font-medium text-gray-500">Requests per Minute</p>208                                            <p class="text-xl font-semibold text-gray-900">1,248</p>209                                        </div>210                                    </div>211                                </div>212                                <div class="border border-gray-200 rounded-lg p-4">213                                    <div class="flex items-center">214                                        <div class="p-2 bg-blue-100 rounded-lg">215                                            <i data-feather="zap" class="h-5 w-5 text-blue-600"></i>216                                        </div>217                                        <div class="ml-3">218                                            <p class="text-sm font-medium text-gray-500">Avg Response Time</p>219                                            <p class="text-xl font-semibold text-gray-900">42ms</p>220                                        </div>221                                    </div>222                                </div>223                                <div class="border border-gray-200 rounded-lg p-4">224                                    <div class="flex items-center">225                                        <div class="p-2 bg-amber-100 rounded-lg">226                                            <i data-feather="alert-triangle" class="h-5 w-5 text-amber-600"></i>227                                        </div>228                                        <div class="ml-3">229                                            <p class="text-sm font-medium text-gray-500">Error Rate</p>230                                            <p class="text-xl font-semibold text-gray-900">0.2%</p>231                                        </div>232                                    </div>233                                </div>234                            </div>235                            <div class="mt-6">236                                <div class="flex items-center justify-between">237                                    <h3 class="text-md font-medium text-gray-900">Recent Activity</h3>238                                    <button class="text-sm text-primary-600 hover:text-primary-800">View All</button>239                                </div>240                                <div class="mt-4 space-y-3">241                                    <div class="flex items-start">242                                        <div class="flex-shrink-0">243                                            <div class="h-3 w-3 rounded-full bg-green-500 pulse-animation"></div>244                                        </div>245                                        <div class="ml-3">246                                            <p class="text-sm text-gray-900">Successfully synchronized data between systems</p>247                                            <p class="text-xs text-gray-500">2 minutes ago</p>248                                        </div>249                                    </div>250                                    <div class="flex items-start">251                                        <div class="flex-shrink-0">252                                            <div class="h-3 w-3 rounded-full bg-green-500"></div>253                                        </div>254                                        <div class="ml-3">255                                            <p class="text-sm text-gray-900">API endpoint /api/frontend/data cache refreshed</p>256                                            <p class="text-xs text-gray-500">15 minutes ago</p>257                                        </div>258                                    </div>259                                    <div class="flex items-start">260                                        <div class="flex-shrink-0">261                                            <div class="h-3 w-3 rounded-full bg-amber-500"></div>262                                        </div>263                                        <div class="ml-3">264                                            <p class="text-sm text-gray-900">Connection test initiated for System B</p>265                                            <p class="text-xs text-gray-500">1 hour ago</p>266                                        </div>267                                    </div>268                                </div>269                            </div>270                        </div>271                    </div>272                </div>273 274                <!-- Configuration Screen -->275                <div id="configuration" class="screen">276                    <div class="mb-8">277                        <h1 class="text-3xl font-bold text-gray-900">System Configuration</h1>278                        <p class="mt-2 text-gray-600">Configure your middleware connections and API settings</p>279                    </div>280 281                    <!-- Configuration Section -->282                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">283                        <!-- System A Configuration -->284                        <div class="bg-white rounded-xl shadow-sm overflow-hidden">285                            <div class="px-6 py-5 border-b border-gray-200">286                                <h2 class="text-lg font-medium text-gray-900">System A Configuration</h2>287                                <p class="mt-1 text-sm text-gray-500">Frontend system connection settings</p>288                            </div>289                            <div class="p-6">290                                <form>291                                    <div class="space-y-4">292                                        <div>293                                            <label class="block text-sm font-medium text-gray-700">Database Host</label>294                                            <input type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" value="db.system-a.internal">295                                        </div>296                                        <div>297                                            <label class="block text-sm font-medium text-gray-700">Username</label>298                                            <input type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" value="frontend_user">299                                        </div>300                                        <div>301                                            <label class="block text-sm font-medium text-gray-700">Password</label>302                                            <input type="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" value="โ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ข">303                                        </div>304                                        <div>305                                            <label class="block text-sm font-medium text-gray-700">Port</label>306                                            <input type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" value="5432">307                                        </div>308                                    </div>309                                    <div class="mt-6 flex items-center justify-between">310                                        <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">311                                            <i data-feather="save" class="mr-2 h-4 w-4"></i>312                                            Save Settings313                                        </button>314                                        <button type="button" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">315                                            <i data-feather="refresh-cw" class="mr-2 h-4 w-4"></i>316                                            Test Connection317                                        </button>318                                    </div>319                                </form>320                            </div>321                        </div>322 323                        <!-- System B Configuration -->324                        <div class="bg-white rounded-xl shadow-sm overflow-hidden">325                            <div class="px-6 py-5 border-b border-gray-200">326                                <h2 class="text-lg font-medium text-gray-900">System B Configuration</h2>327                                <p class="mt-1 text-sm text-gray-500">Backend system connection settings</p>328                            </div>329                            <div class="p-6">330                                <form>331                                    <div class="space-y-4">332                                        <div>333                                            <label class="block text-sm font-medium text-gray-700">Database Host</label>334                                            <input type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" value="db.system-b.external">335                                        </div>336                                        <div>337                                            <label class="block text-sm font-medium text-gray-700">Username</label>338                                            <input type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" value="backend_user">339                                        </div>340                                        <div>341                                            <label class="block text-sm font-medium text-gray-700">Password</label>342                                            <input type="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" value="โ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ข">343                                        </div>344                                        <div>345                                            <label class="block text-sm font-medium text-gray-700">Port</label>346                                            <input type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" value="3306">347                                        </div>348                                    </div>349                                    <div class="mt-6 flex items-center justify-between">350                                        <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">351                                            <i data-feather="save" class="mr-2 h-4 w-4"></i>352                                            Save Settings353                                        </button>354                                        <button type="button" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">355                                            <i data-feather="refresh-cw" class="mr-2 h-4 w-4"></i>356                                            Test Connection357                                        </button>358                                    </div>359                                </form>360                            </div>361                        </div>362                    </div>363 364                    <!-- API Gateway Section -->365                    <div class="bg-white rounded-xl shadow-sm overflow-hidden">366                        <div class="px-6 py-5 border-b border-gray-200">367                            <h2 class="text-lg font-medium text-gray-900">API Gateway Configuration</h2>368                            <p class="mt-1 text-sm text-gray-500">Manage encrypted file retrieval and decryption</p>369                        </div>370                        <div class="p-6">371                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">372                                <div>373                                    <h3 class="text-md font-medium text-gray-900 mb-4">MIME Encrypted File Retrieval</h3>374                                    <div class="space-y-4">375                                        <div>376                                            <label class="block text-sm font-medium text-gray-700">API Endpoint</label>377                                            <input type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" value="https://api.middleware-pro.com/files/retrieve">378                                        </div>379                                        <div>380                                            <label class="block text-sm font-medium text-gray-700">Encryption Key</label>381                                            <input type="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" value="โ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ข">382                                        </div>383                                        <div>384                                            <label class="block text-sm font-medium text-gray-700">Decryption Algorithm</label>385                                            <select class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">386                                                <option>AES-256-CBC</option>387                                                <option selected>RSA-OAEP</option>388                                                <option>ChaCha20-Poly1305</option>389                                            </select>390                                        </div>391                                    </div>392                                </div>393                                <div>394                                    <h3 class="text-md font-medium text-gray-900 mb-4">Cached Endpoints</h3>395                                    <div class="bg-gray-50 rounded-lg p-4 mb-4">396                                        <div class="flex justify-between">397                                            <div>398                                                <p class="font-medium text-gray-900">/api/frontend/data</p>399                                                <p class="text-sm text-gray-500">POST โ€ข Cached: 5 min</p>400                                            </div>401                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">402                                                Active403                                            </span>404                                        </div>405                                    </div>406                                    <div class="bg-gray-50 rounded-lg p-4">407                                        <div class="flex justify-between">408                                            <div>409                                                <p class="font-medium text-gray-900">/api/processed/files</p>410                                                <p class="text-sm text-gray-500">POST โ€ข Cached: 10 min</p>411                                            </div>412                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">413                                                Active414                                            </span>415                                        </div>416                                    </div>417                                    <button class="mt-4 w-full inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">418                                        <i data-feather="plus" class="mr-2 h-4 w-4"></i>419                                        Create New Endpoint420                                    </button>421                                </div>422                            </div>423                            <div class="mt-6">424                                <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">425                                    <i data-feather="save" class="mr-2 h-4 w-4"></i>426                                    Save API Configuration427                                </button>428                            </div>429                        </div>430                    </div>431                </div>432 433                <!-- Endpoints Screen -->434                <div id="endpoints" class="screen">435                    <div class="mb-8">436                        <h1 class="text-3xl font-bold text-gray-900">Endpoint Integration</h1>437                        <p class="mt-2 text-gray-600">Create and manage API endpoints for system integration</p>438                    </div>439 440                    <!-- Create New Endpoint -->441                    <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-8">442                        <div class="px-6 py-5 border-b border-gray-200">443                            <h2 class="text-lg font-medium text-gray-900">Create New Endpoint</h2>444                            <p class="mt-1 text-sm text-gray-500">Configure a new integration endpoint</p>445                        </div>446                        <div class="p-6">447                            <form id="endpointForm">448                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">449                                    <div>450                                        <label class="block text-sm font-medium text-gray-700">Endpoint Name</label>451                                        <input type="text" id="endpointName" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="e.g., Customer Data Sync">452                                    </div>453                                    <div>454                                        <label class="block text-sm font-medium text-gray-700">HTTP Method</label>455                                        <select id="httpMethod" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">456                                            <option>GET</option>457                                            <option selected>POST</option>458                                            <option>PUT</option>459                                            <option>DELETE</option>460                                            <option>PATCH</option>461                                        </select>462                                    </div>463                                    <div class="md:col-span-2">464                                        <label class="block text-sm font-medium text-gray-700">Target URL</label>465                                        <input type="url" id="targetUrl" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="https://api.example.com/data">466                                    </div>467                                    <div>468                                        <label class="block text-sm font-medium text-gray-700">Authentication Type</label>469                                        <select id="authType" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">470                                            <option selected>None</option>471                                            <option>API Key</option>472                                            <option>Bearer Token</option>473                                            <option>Basic Auth</option>474                                            <option>OAuth 2.0</option>475                                        </select>476                                    </div>477                                    <div>478                                        <label class="block text-sm font-medium text-gray-700">Cache Duration (minutes)</label>479                                        <input type="number" id="cacheDuration" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" value="5" min="0">480                                    </div>481                                </div>482                                483                                <!-- Auth Details (hidden by default) -->484                                <div id="authDetails" class="mt-6 hidden">485                                    <h3 class="text-md font-medium text-gray-900 mb-4">Authentication Details</h3>486                                    <div id="apiKeyFields" class="space-y-4 hidden">487                                        <div>488                                            <label class="block text-sm font-medium text-gray-700">API Key Header</label>489                                            <input type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="X-API-Key">490                                        </div>491                                        <div>492                                            <label class="block text-sm font-medium text-gray-700">API Key Value</label>493                                            <input type="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="โ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ข">494                                        </div>495                                    </div>496                                    <div id="bearerTokenFields" class="space-y-4 hidden">497                                        <div>498                                            <label class="block text-sm font-medium text-gray-700">Bearer Token</label>499                                            <input type="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="โ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ข">500                                        </div>501                                    </div>502                                    <div id="basicAuthFields" class="grid grid-cols-1 md:grid-cols-2 gap-4 hidden">503                                        <div>504                                            <label class="block text-sm font-medium text-gray-700">Username</label>505                                            <input type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">506                                        </div>507                                        <div>508                                            <label class="block text-sm font-medium text-gray-700">Password</label>509                                            <input type="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">510                                        </div>511                                    </div>512                                </div>513                                514                                <div class="mt-6">515                                    <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">516                                        <i data-feather="plus" class="mr-2 h-4 w-4"></i>517                                        Create Endpoint518                                    </button>519                                </div>520                            </form>521                        </div>522                    </div>523 524                    <!-- Existing Endpoints -->525                    <div class="bg-white rounded-xl shadow-sm overflow-hidden">526                        <div class="px-6 py-5 border-b border-gray-200">527                            <h2 class="text-lg font-medium text-gray-900">Configured Endpoints</h2>528                            <p class="mt-1 text-sm text-gray-500">Manage your integration endpoints</p>529                        </div>530                        <div class="p-6">531                            <div class="space-y-6">532                                <!-- Endpoint 1 -->533                                <div class="border border-gray-200 rounded-lg p-4">534                                    <div class="flex justify-between">535                                        <div>536                                            <div class="flex items-center">537                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">538                                                    POST539                                                </span>540                                                <h3 class="ml-3 text-md font-medium text-gray-900">/api/frontend/data</h3>541                                            </div>542                                            <p class="mt-1 text-sm text-gray-500">https://api.system-a.com/data</p>543                                        </div>544                                        <div class="flex space-x-2">545                                            <button class="inline-flex items-center px-3 py-1 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">546                                                <i data-feather="edit" class="h-4 w-4 mr-1"></i> Edit547                                            </button>548                                            <button class="inline-flex items-center px-3 py-1 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">549                                                <i data-feather="play" class="h-4 w-4 mr-1"></i> Test550                                            </button>551                                        </div>552                                    </div>553                                    <div class="mt-3 flex items-center text-sm text-gray-500">554                                        <span>Auth: Bearer Token</span>555                                        <span class="mx-2">โ€ข</span>556                                        <span>Cache: 5 min</span>557                                        <span class="mx-2">โ€ข</span>558                                        <span>Last tested: 2 min ago</span>559                                    </div>560                                </div>561                                562                                <!-- Endpoint 2 -->563                                <div class="border border-gray-200 rounded-lg p-4">564                                    <div class="flex justify-between">565                                        <div>566                                            <div class="flex items-center">567                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">568                                                    GET569                                                </span>570                                                <h3 class="ml-3 text-md font-medium text-gray-900">/api/customer/info</h3>571                                            </div>572                                            <p class="mt-1 text-sm text-gray-500">https://api.crm-system.com/customers</p>573                                        </div>574                                        <div class="flex space-x-2">575                                            <button class="inline-flex items-center px-3 py-1 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">576                                                <i data-feather="edit" class="h-4 w-4 mr-1"></i> Edit577                                            </button>578                                            <button class="inline-flex items-center px-3 py-1 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">579                                                <i data-feather="play" class="h-4 w-4 mr-1"></i> Test580                                            </button>581                                        </div>582                                    </div>583                                    <div class="mt-3 flex items-center text-sm text-gray-500">584                                        <span>Auth: API Key</span>585                                        <span class="mx-2">โ€ข</span>586                                        <span>Cache: 10 min</span>587                                        <span class="mx-2">โ€ข</span>588                                        <span>Last tested: 5 min ago</span>589                                    </div>590                                </div>591                                592                                <!-- Endpoint 3 -->593                                <div class="border border-gray-200 rounded-lg p-4">594                                    <div class="flex justify-between">595                                        <div>596                                            <div class="flex items-center">597                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800">598                                                    PUT599                                                </span>600                                                <h3 class="ml-3 text-md font-medium text-gray-900">/api/inventory/update</h3>601                                            </div>602                                            <p class="mt-1 text-sm text-gray-500">https://api.warehouse.com/inventory</p>603                                        </div>604                                        <div class="flex space-x-2">605                                            <button class="inline-flex items-center px-3 py-1 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">606                                                <i data-feather="edit" class="h-4 w-4 mr-1"></i> Edit607                                            </button>608                                            <button class="inline-flex items-center px-3 py-1 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">609                                                <i data-feather="play" class="h-4 w-4 mr-1"></i> Test610                                            </button>611                                        </div>612                                    </div>613                                    <div class="mt-3 flex items-center text-sm text-gray-500">614                                        <span>Auth: Basic Auth</span>615                                        <span class="mx-2">โ€ข</span>616                                        <span>Cache: 15 min</span>617                                        <span class="mx-2">โ€ข</span>618                                        <span>Last tested: 10 min ago</span>619                                    </div>620                                </div>621                            </div>622                        </div>623                    </div>624                </div>625 626                <!-- API Testing Screen -->627                <div id="testing" class="screen">628                    <div class="mb-8">629                        <h1 class="text-3xl font-bold text-gray-900">API Testing</h1>630                        <p class="mt-2 text-gray-600">Test your configured endpoints using Swagger UI</p>631                    </div>632 633                    <!-- Swagger UI Container -->634                    <div class="bg-white rounded-xl shadow-sm overflow-hidden">635                        <div class="px-6 py-5 border-b border-gray-200">636                            <h2 class="text-lg font-medium text-gray-900">Swagger API Documentation</h2>637                            <p class="mt-1 text-sm text-gray-500">Interactive API testing interface</p>638                        </div>639                        <div class="p-6">640                            <div class="bg-gray-50 rounded-lg p-8 text-center">641                                <i data-feather="code" class="h-12 w-12 text-gray-400 mx-auto mb-4"></i>642                                <h3 class="text-lg font-medium text-gray-900 mb-2">API Testing Interface</h3>643                                <p class="text-gray-500 mb-4">Swagger UI would be embedded here in a production environment</p>644                                <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">645                                    <i data-feather="play" class="mr-2 h-4 w-4"></i>646                                    Run Test647                                </button>648                            </div>649                        </div>650                    </div>651                </div>652 653                <!-- Monitoring Screen -->654                <div id="monitoring" class="screen">655                    <div class="mb-8">656                        <h1 class="text-3xl font-bold text-gray-900">System Monitoring</h1>657                        <p class="mt-2 text-gray-600">Monitor system performance and health metrics</p>658                    </div>659 660                    <!-- Performance Metrics -->661                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">662                        <div class="bg-white rounded-xl shadow-sm overflow-hidden">663                            <div class="px-6 py-5 border-b border-gray-200">664                                <h2 class="text-lg font-medium text-gray-900">Performance Metrics</h2>665                                <p class="mt-1 text-sm text-gray-500">Real-time system performance data</p>666                            </div>667                            <div class="p-6">668                                <div class="space-y-6">669                                    <div>670                                        <div class="flex justify-between mb-1">671                                            <span class="text-sm font-medium text-gray-700">CPU Usage</span>672                                            <span class="text-sm font-medium text-gray-700">65%</span>673                                        </div>674                                        <div class="w-full bg-gray-200 rounded-full h-2.5">675                                            <div class="bg-blue-600 h-2.5 rounded-full" style="width: 65%"></div>676                                        </div>677                                    </div>678                                    <div>679                                        <div class="flex justify-between mb-1">680                                            <span class="text-sm font-medium text-gray-700">Memory Usage</span>681                                            <span class="text-sm font-medium text-gray-700">42%</span>682                                        </div>683                                        <div class="w-full bg-gray-200 rounded-full h-2.5">684                                            <div class="bg-green-600 h-2.5 rounded-full" style="width: 42%"></div>685                                        </div>686                                    </div>687                                    <div>688                                        <div class="flex justify-between mb-1">689                                            <span class="text-sm font-medium text-gray-700">Disk Usage</span>690                                            <span class="text-sm font-medium text-gray-700">28%</span>691                                        </div>692                                        <div class="w-full bg-gray-200 rounded-full h-2.5">693                                            <div class="bg-amber-600 h-2.5 rounded-full" style="width: 28%"></div>694                                        </div>695                                    </div>696                                    <div>697                                        <div class="flex justify-between mb-1">698                                            <span class="text-sm font-medium text-gray-700">Network I/O</span>699                                            <span class="text-sm font-medium text-gray-700">82%</span>700                                        </div>701                                        <div class="w-full bg-gray-200 rounded-full h-2.5">702                                            <div class="bg-purple-600 h-2.5 rounded-full" style="width: 82%"></div>703                                        </div>704                                    </div>705                                </div>706                            </div>707                        </div>708 709                        <div class="bg-white rounded-xl shadow-sm overflow-hidden">710                            <div class="px-6 py-5 border-b border-gray-200">711                                <h2 class="text-lg font-medium text-gray-900">System Logs</h2>712                                <p class="mt-1 text-sm text-gray-500">Recent system events and alerts</p>713                            </div>714                            <div class="p-6">715                                <div class="space-y-4">716                                    <div class="flex items-start">717                                        <div class="flex-shrink-0">718                                            <div class="h-3 w-3 rounded-full bg-green-500"></div>719                                        </div>720                                        <div class="ml-3">721                                            <p class="text-sm text-gray-900">System started successfully</p>722                                            <p class="text-xs text-gray-500">Today, 09:30 AM</p>723                                        </div>724                                    </div>725                                    <div class="flex items-start">726                                        <div class="flex-shrink-0">727                                            <div class="h-3 w-3 rounded-full bg-green-500"></div>728                                        </div>729                                        <div class="ml-3">730                                            <p class="text-sm text-gray-900">Endpoint /api/data synchronized</p>731                                            <p class="text-xs text-gray-500">Today, 10:15 AM</p>732                                        </div>733                                    </div>734                                    <div class="flex items-start">735                                        <div class="flex-shrink-0">736                                            <div class="h-3 w-3 rounded-full bg-amber-500"></div>737                                        </div>738                                        <div class="ml-3">739                                            <p class="text-sm text-gray-900">High memory usage detected</p>740                                            <p class="text-xs text-gray-500">Today, 11:45 AM</p>741                                        </div>742                                    </div>743                                    <div class="flex items-start">744                                        <div class="flex-shrink-0">745                                            <div class="h-3 w-3 rounded-full bg-green-500"></div>746                                        </div>747                                        <div class="ml-3">748                                            <p class="text-sm text-gray-900">Cache cleared successfully</p>749                                            <p class="text-xs text-gray-500">Today, 01:20 PM</p>750                                        </div>751                                    </div>752                                </div>753                            </div>754                        </div>755                    </div>756 757                    <!-- Alert Configuration -->758                    <div class="bg-white rounded-xl shadow-sm overflow-hidden">759                        <div class="px-6 py-5 border-b border-gray-200">760                            <h2 class="text-lg font-medium text-gray-900">Alert Configuration</h2>761                            <p class="mt-1 text-sm text-gray-500">Set up system alerts and notifications</p>762                        </div>763                        <div class="p-6">764                            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">765                                <div class="border border-gray-200 rounded-lg p-4">766                                    <div class="flex items-center justify-between">767                                        <h3 class="text-md font-medium text-gray-900">CPU Alert</h3>768                                        <div class="relative inline-block w-10 mr-2 align-middle select-none">769                                            <input type="checkbox" name="toggle" id="cpuToggle" class="checked:bg-blue-600 outline-none focus:ring-0 rounded-full" checked>770                                            <label for="cpuToggle" class="block h-6 w-10 bg-gray-300 rounded-full cursor-pointer"></label>771                                        </div>772                                    </div>773                                    <p class="mt-2 text-sm text-gray-500">Trigger when CPU usage exceeds 80%</p>774                                </div>775                                <div class="border border-gray-200 rounded-lg p-4">776                                    <div class="flex items-center justify-between">777                                        <h3 class="text-md font-medium text-gray-900">Memory Alert</h3>778                                        <div class="relative inline-block w-10 mr-2 align-middle select-none">779                                            <input type="checkbox" name="toggle" id="memoryToggle" class="checked:bg-blue-600 outline-none focus:ring-0 rounded-full" checked>780                                            <label for="memoryToggle" class="block h-6 w-10 bg-gray-300 rounded-full cursor-pointer"></label>781                                        </div>782                                    </div>783                                    <p class="mt-2 text-sm text-gray-500">Trigger when memory usage exceeds 75%</p>784                                </div>785                                <div class="border border-gray-200 rounded-lg p-4">786                                    <div class="flex items-center justify-between">787                                        <h3 class="text-md font-medium text-gray-900">Network Alert</h3>788                                        <div class="relative inline-block w-10 mr-2 align-middle select-none">789                                            <input type="checkbox" name="toggle" id="networkToggle" class="checked:bg-blue-600 outline-none focus:ring-0 rounded-full">790                                            <label for="networkToggle" class="block h-6 w-10 bg-gray-300 rounded-full cursor-pointer"></label>791                                        </div>792                                    </div>793                                    <p class="mt-2 text-sm text-gray-500">Trigger when network errors exceed threshold</p>794                                </div>795                            </div>796                        </div>797                    </div>798                </div>799            </main>800        </div>801 802        <!-- Footer -->803        <footer class="bg-white border-t border-gray-200">804            <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">805                <div class="md:flex md:items-center md:justify-between">806                    <div class="flex justify-center md:justify-start">807                        <p class="text-center text-sm text-gray-500">808                            &copy; 2023 Middleware Bridge Pro. All rights reserved.809                        </p>810                    </div>811                    <div class="mt-4 flex justify-center md:mt-0">812                        <div class="flex space-x-4">813                            <a href="#" class="text-gray-400 hover:text-gray-500">814                                <i data-feather="help-circle" class="h-5 w-5"></i>815                            </a>816                            <a href="#" class="text-gray-400 hover:text-gray-500">817                                <i data-feather="book" class="h-5 w-5"></i>818                            </a>819                            <a href="#" class="text-gray-400 hover:text-gray-500">820                                <i data-feather="github" class="h-5 w-5"></i>821                            </a>822                        </div>823                    </div>824                </div>825            </div>826        </footer>827    </div>828 829    <script>830        feather.replace();831        832        // Screen navigation833        document.querySelectorAll('.nav-icon').forEach(button => {834            button.addEventListener('click', () => {835                // Remove active class from all buttons and screens836                document.querySelectorAll('.nav-icon').forEach(btn => btn.classList.remove('active'));837                document.querySelectorAll('.screen').forEach(screen => screen.classList.remove('active'));838                839                // Add active class to clicked button840                button.classList.add('active');841                842                // Show corresponding screen843                const screenId = button.getAttribute('data-screen');844                document.getElementById(screenId).classList.add('active');845            });846        });847        848        // Show auth details based on selection849        document.getElementById('authType').addEventListener('change', function() {850            const authDetails = document.getElementById('authDetails');851            const apiKeyFields = document.getElementById('apiKeyFields');852            const bearerTokenFields = document.getElementById('bearerTokenFields');853            const basicAuthFields = document.getElementById('basicAuthFields');854            855            // Hide all auth fields856            authDetails.classList.add('hidden');857            apiKeyFields.classList.add('hidden');858            bearerTokenFields.classList.add('hidden');859            basicAuthFields.classList.add('hidden');860            861            // Show relevant fields based on selection862            if(this.value !== 'None') {863                authDetails.classList.remove('hidden');864                if(this.value === 'API Key') {865                    apiKeyFields.classList.remove('hidden');866                } else if(this.value === 'Bearer Token') {867                    bearerTokenFields.classList.remove('hidden');868                } else if(this.value === 'Basic Auth') {869                    basicAuthFields.classList.remove('hidden');870                }871            }872        });873        874        // Handle form submission875        document.getElementById('endpointForm').addEventListener('submit', function(e) {876            e.preventDefault();877            alert('Endpoint created successfully!');878            // In a real app, you would send this data to your server879        });880    </script>881</body>882</html>