developer2guy/middleware-bridge-pro
0
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 © 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>