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>Dashboard - 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 }29 }30 }31 }32 </script>33 <style>34 body {35 font-family: 'Inter', sans-serif;36 background-color: #f8fafc;37 }38 .card-hover {39 transition: all 0.3s ease;40 }41 .card-hover:hover {42 transform: translateY(-5px);43 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);44 }45 .pulse-animation {46 animation: pulse 2s infinite;47 }48 @keyframes pulse {49 0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4); }50 70% { box-shadow: 0 0 0 10px rgba(14, 165, 233, 0); }51 100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }52 }53 </style>54</head>55<body class="bg-gray-50">56 <!-- Navigation -->57 <nav class="bg-white shadow-sm">58 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">59 <div class="flex justify-between h-16">60 <div class="flex items-center">61 <div class="flex-shrink-0 flex items-center">62 <div class="bg-primary-600 w-8 h-8 rounded-lg flex items-center justify-center">63 <i data-feather="layers" class="text-white"></i>64 </div>65 <span class="ml-2 text-xl font-bold text-gray-900">Middleware Bridge Pro</span>66 </div>67 <div class="hidden sm:ml-6 sm:flex sm:space-x-8">68 <a href="#" class="border-primary-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>69 <a href="configuration.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Configuration</a>70 <a href="endpoints.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Endpoints</a>71 <a href="swagger.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">API Testing</a>72 </div>73 </div>74 <div class="flex items-center">75 <div class="ml-3 relative">76 <div class="flex items-center space-x-3">77 <span class="text-sm font-medium text-gray-700">Admin User</span>78 <button id="user-menu-button" class="bg-primary-600 text-white p-1 rounded-full hover:bg-primary-700 focus:outline-none">79 <i data-feather="user" class="h-5 w-5"></i>80 </button>81 </div>82 </div>83 </div>84 </div>85 </div>86 </nav>87 88 <!-- Main Content -->89 <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">90 <!-- Dashboard Header -->91 <div class="mb-8">92 <h1 class="text-3xl font-bold text-gray-900">System Integration Dashboard</h1>93 <p class="mt-2 text-gray-600">Manage your middleware connections and monitor system health</p>94 </div>95 96 <!-- Status Cards -->97 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">98 <div class="bg-white rounded-xl shadow-sm p-6 card-hover border-l-4 border-primary-500">99 <div class="flex items-center">100 <div class="p-3 rounded-lg bg-primary-100">101 <i data-feather="server" class="h-6 w-6 text-primary-600"></i>102 </div>103 <div class="ml-4">104 <h3 class="text-sm font-medium text-gray-500">System A Status</h3>105 <p class="text-2xl font-semibold text-gray-900">Connected</p>106 </div>107 </div>108 </div>109 110 <div class="bg-white rounded-xl shadow-sm p-6 card-hover border-l-4 border-secondary-500">111 <div class="flex items-center">112 <div class="p-3 rounded-lg bg-secondary-100">113 <i data-feather="database" class="h-6 w-6 text-secondary-600"></i>114 </div>115 <div class="ml-4">116 <h3 class="text-sm font-medium text-gray-500">System B Status</h3>117 <p class="text-2xl font-semibold text-gray-900">Connected</p>118 </div>119 </div>120 </div>121 122 <div class="bg-white rounded-xl shadow-sm p-6 card-hover border-l-4 border-green-500">123 <div class="flex items-center">124 <div class="p-3 rounded-lg bg-green-100">125 <i data-feather="activity" class="h-6 w-6 text-green-600"></i>126 </div>127 <div class="ml-4">128 <h3 class="text-sm font-medium text-gray-500">API Gateway</h3>129 <p class="text-2xl font-semibold text-gray-900">Active</p>130 </div>131 </div>132 </div>133 134 <div class="bg-white rounded-xl shadow-sm p-6 card-hover border-l-4 border-amber-500">135 <div class="flex items-center">136 <div class="p-3 rounded-lg bg-amber-100">137 <i data-feather="clock" class="h-6 w-6 text-amber-600"></i>138 </div>139 <div class="ml-4">140 <h3 class="text-sm font-medium text-gray-500">Uptime</h3>141 <p class="text-2xl font-semibold text-gray-900">99.9%</p>142 </div>143 </div>144 </div>145 </div>146 147 <!-- Configuration Section -->148 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">149 <!-- System A Configuration -->150 <div class="bg-white rounded-xl shadow-sm overflow-hidden">151 <div class="px-6 py-5 border-b border-gray-200">152 <h2 class="text-lg font-medium text-gray-900">System A Configuration</h2>153 <p class="mt-1 text-sm text-gray-500">Frontend system connection settings</p>154 </div>155 <div class="p-6">156 <form>157 <div class="space-y-4">158 <div>159 <label class="block text-sm font-medium text-gray-700">Database Host</label>160 <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">161 </div>162 <div>163 <label class="block text-sm font-medium text-gray-700">Username</label>164 <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">165 </div>166 <div>167 <label class="block text-sm font-medium text-gray-700">Password</label>168 <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="••••••••">169 </div>170 <div>171 <label class="block text-sm font-medium text-gray-700">Port</label>172 <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">173 </div>174 </div>175 <div class="mt-6 flex items-center justify-between">176 <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">177 <i data-feather="save" class="mr-2 h-4 w-4"></i>178 Save Settings179 </button>180 <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">181 <i data-feather="refresh-cw" class="mr-2 h-4 w-4"></i>182 Test Connection183 </button>184 </div>185 </form>186 </div>187 </div>188 189 <!-- System B Configuration -->190 <div class="bg-white rounded-xl shadow-sm overflow-hidden">191 <div class="px-6 py-5 border-b border-gray-200">192 <h2 class="text-lg font-medium text-gray-900">System B Configuration</h2>193 <p class="mt-1 text-sm text-gray-500">Backend system connection settings</p>194 </div>195 <div class="p-6">196 <form>197 <div class="space-y-4">198 <div>199 <label class="block text-sm font-medium text-gray-700">Database Host</label>200 <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">201 </div>202 <div>203 <label class="block text-sm font-medium text-gray-700">Username</label>204 <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">205 </div>206 <div>207 <label class="block text-sm font-medium text-gray-700">Password</label>208 <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="••••••••">209 </div>210 <div>211 <label class="block text-sm font-medium text-gray-700">Port</label>212 <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">213 </div>214 </div>215 <div class="mt-6 flex items-center justify-between">216 <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">217 <i data-feather="save" class="mr-2 h-4 w-4"></i>218 Save Settings219 </button>220 <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">221 <i data-feather="refresh-cw" class="mr-2 h-4 w-4"></i>222 Test Connection223 </button>224 </div>225 </form>226 </div>227 </div>228 </div>229 230 <!-- API Gateway Section -->231 <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-8">232 <div class="px-6 py-5 border-b border-gray-200">233 <h2 class="text-lg font-medium text-gray-900">API Gateway Configuration</h2>234 <p class="mt-1 text-sm text-gray-500">Manage encrypted file retrieval and decryption</p>235 </div>236 <div class="p-6">237 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">238 <div>239 <h3 class="text-md font-medium text-gray-900 mb-4">MIME Encrypted File Retrieval</h3>240 <div class="space-y-4">241 <div>242 <label class="block text-sm font-medium text-gray-700">API Endpoint</label>243 <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">244 </div>245 <div>246 <label class="block text-sm font-medium text-gray-700">Encryption Key</label>247 <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="••••••••••••••••">248 </div>249 <div>250 <label class="block text-sm font-medium text-gray-700">Decryption Algorithm</label>251 <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">252 <option>AES-256-CBC</option>253 <option selected>RSA-OAEP</option>254 <option>ChaCha20-Poly1305</option>255 </select>256 </div>257 </div>258 </div>259 <div>260 <h3 class="text-md font-medium text-gray-900 mb-4">Cached Endpoints</h3>261 <div class="bg-gray-50 rounded-lg p-4 mb-4">262 <div class="flex justify-between">263 <div>264 <p class="font-medium text-gray-900">/api/frontend/data</p>265 <p class="text-sm text-gray-500">POST • Cached: 5 min</p>266 </div>267 <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">268 Active269 </span>270 </div>271 </div>272 <div class="bg-gray-50 rounded-lg p-4">273 <div class="flex justify-between">274 <div>275 <p class="font-medium text-gray-900">/api/processed/files</p>276 <p class="text-sm text-gray-500">POST • Cached: 10 min</p>277 </div>278 <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">279 Active280 </span>281 </div>282 </div>283 <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">284 <i data-feather="plus" class="mr-2 h-4 w-4"></i>285 Create New Endpoint286 </button>287 </div>288 </div>289 <div class="mt-6">290 <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">291 <i data-feather="save" class="mr-2 h-4 w-4"></i>292 Save API Configuration293 </button>294 </div>295 </div>296 </div>297 298 <!-- Monitoring Section -->299 <div class="bg-white rounded-xl shadow-sm overflow-hidden">300 <div class="px-6 py-5 border-b border-gray-200">301 <h2 class="text-lg font-medium text-gray-900">System Health Monitoring</h2>302 <p class="mt-1 text-sm text-gray-500">Real-time performance metrics and alerts</p>303 </div>304 <div class="p-6">305 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">306 <div class="border border-gray-200 rounded-lg p-4">307 <div class="flex items-center">308 <div class="p-2 bg-green-100 rounded-lg">309 <i data-feather="trending-up" class="h-5 w-5 text-green-600"></i>310 </div>311 <div class="ml-3">312 <p class="text-sm font-medium text-gray-500">Requests per Minute</p>313 <p class="text-xl font-semibold text-gray-900">1,248</p>314 </div>315 </div>316 </div>317 <div class="border border-gray-200 rounded-lg p-4">318 <div class="flex items-center">319 <div class="p-2 bg-blue-100 rounded-lg">320 <i data-feather="zap" class="h-5 w-5 text-blue-600"></i>321 </div>322 <div class="ml-3">323 <p class="text-sm font-medium text-gray-500">Avg Response Time</p>324 <p class="text-xl font-semibold text-gray-900">42ms</p>325 </div>326 </div>327 </div>328 <div class="border border-gray-200 rounded-lg p-4">329 <div class="flex items-center">330 <div class="p-2 bg-amber-100 rounded-lg">331 <i data-feather="alert-triangle" class="h-5 w-5 text-amber-600"></i>332 </div>333 <div class="ml-3">334 <p class="text-sm font-medium text-gray-500">Error Rate</p>335 <p class="text-xl font-semibold text-gray-900">0.2%</p>336 </div>337 </div>338 </div>339 </div>340 <div class="mt-6">341 <div class="flex items-center justify-between">342 <h3 class="text-md font-medium text-gray-900">Recent Activity</h3>343 <button class="text-sm text-primary-600 hover:text-primary-800">View All</button>344 </div>345 <div class="mt-4 space-y-3">346 <div class="flex items-start">347 <div class="flex-shrink-0">348 <div class="h-3 w-3 rounded-full bg-green-500 pulse-animation"></div>349 </div>350 <div class="ml-3">351 <p class="text-sm text-gray-900">Successfully synchronized data between systems</p>352 <p class="text-xs text-gray-500">2 minutes ago</p>353 </div>354 </div>355 <div class="flex items-start">356 <div class="flex-shrink-0">357 <div class="h-3 w-3 rounded-full bg-green-500"></div>358 </div>359 <div class="ml-3">360 <p class="text-sm text-gray-900">API endpoint /api/frontend/data cache refreshed</p>361 <p class="text-xs text-gray-500">15 minutes ago</p>362 </div>363 </div>364 <div class="flex items-start">365 <div class="flex-shrink-0">366 <div class="h-3 w-3 rounded-full bg-amber-500"></div>367 </div>368 <div class="ml-3">369 <p class="text-sm text-gray-900">Connection test initiated for System B</p>370 <p class="text-xs text-gray-500">1 hour ago</p>371 </div>372 </div>373 </div>374 </div>375 </div>376 </div>377 </main>378 379 <footer class="bg-white mt-12">380 <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">381 <div class="md:flex md:items-center md:justify-between">382 <div class="flex justify-center md:justify-start">383 <p class="text-center text-sm text-gray-500">384 © 2023 Middleware Bridge Pro. All rights reserved.385 </p>386 </div>387 <div class="mt-4 flex justify-center md:mt-0">388 <div class="flex space-x-6">389 <a href="#" class="text-gray-400 hover:text-gray-500">390 <i data-feather="help-circle" class="h-5 w-5"></i>391 </a>392 <a href="#" class="text-gray-400 hover:text-gray-500">393 <i data-feather="book" class="h-5 w-5"></i>394 </a>395 <a href="#" class="text-gray-400 hover:text-gray-500">396 <i data-feather="github" class="h-5 w-5"></i>397 </a>398 </div>399 </div>400 </div>401 </div>402 </footer>403 404 <script>405 feather.replace();406 407 // Check if user is logged in408 document.addEventListener('DOMContentLoaded', function() {409 const token = localStorage.getItem('authToken');410 if (!token) {411 window.location.href = 'login.html';412 }413 });414 </script>415</body>416</html>