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>Endpoints - 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="index.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">Dashboard</a>69 <a href="#" 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="#" class="border-primary-500 text-gray-900 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 <button class="bg-primary-600 text-white p-1 rounded-full hover:bg-primary-700 focus:outline-none">76 <i data-feather="settings" class="h-5 w-5"></i>77 </button>78 </div>79 </div>80 </div>81 </nav>82 83 <!-- Main Content -->84 <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">85 <!-- Endpoints Header -->86 <div class="mb-8">87 <h1 class="text-3xl font-bold text-gray-900">Endpoint Integration</h1>88 <p class="mt-2 text-gray-600">Create and manage API endpoints for system integration</p>89 </div>90 91 <!-- Create New Endpoint -->92 <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-8">93 <div class="px-6 py-5 border-b border-gray-200">94 <h2 class="text-lg font-medium text-gray-900">Create New Endpoint</h2>95 <p class="mt-1 text-sm text-gray-500">Configure a new integration endpoint</p>96 </div>97 <div class="p-6">98 <form id="endpointForm">99 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">100 <div>101 <label class="block text-sm font-medium text-gray-700">Endpoint Name</label>102 <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">103 </div>104 <div>105 <label class="block text-sm font-medium text-gray-700">HTTP Method</label>106 <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">107 <option>GET</option>108 <option selected>POST</option>109 <option>PUT</option>110 <option>DELETE</option>111 <option>PATCH</option>112 </select>113 </div>114 <div class="md:col-span-2">115 <label class="block text-sm font-medium text-gray-700">Target URL</label>116 <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">117 </div>118 <div>119 <label class="block text-sm font-medium text-gray-700">Authentication Type</label>120 <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">121 <option selected>None</option>122 <option>API Key</option>123 <option>Bearer Token</option>124 <option>Basic Auth</option>125 <option>OAuth 2.0</option>126 </select>127 </div>128 <div>129 <label class="block text-sm font-medium text-gray-700">Cache Duration (minutes)</label>130 <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">131 </div>132 </div>133 134 <!-- Auth Details (hidden by default) -->135 <div id="authDetails" class="mt-6 hidden">136 <h3 class="text-md font-medium text-gray-900 mb-4">Authentication Details</h3>137 <div id="apiKeyFields" class="space-y-4 hidden">138 <div>139 <label class="block text-sm font-medium text-gray-700">API Key Header</label>140 <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">141 </div>142 <div>143 <label class="block text-sm font-medium text-gray-700">API Key Value</label>144 <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="••••••••">145 </div>146 </div>147 <div id="bearerTokenFields" class="space-y-4 hidden">148 <div>149 <label class="block text-sm font-medium text-gray-700">Bearer Token</label>150 <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="••••••••">151 </div>152 </div>153 <div id="basicAuthFields" class="grid grid-cols-1 md:grid-cols-2 gap-4 hidden">154 <div>155 <label class="block text-sm font-medium text-gray-700">Username</label>156 <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">157 </div>158 <div>159 <label class="block text-sm font-medium text-gray-700">Password</label>160 <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">161 </div>162 </div>163 </div>164 165 <div class="mt-6">166 <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">167 <i data-feather="plus" class="mr-2 h-4 w-4"></i>168 Create Endpoint169 </button>170 </div>171 </form>172 </div>173 </div>174 175 <!-- Existing Endpoints -->176 <div class="bg-white rounded-xl shadow-sm overflow-hidden">177 <div class="px-6 py-5 border-b border-gray-200">178 <h2 class="text-lg font-medium text-gray-900">Configured Endpoints</h2>179 <p class="mt-1 text-sm text-gray-500">Manage your integration endpoints</p>180 </div>181 <div class="p-6">182 <div class="space-y-6">183 <!-- Endpoint 1 -->184 <div class="border border-gray-200 rounded-lg p-4">185 <div class="flex justify-between">186 <div>187 <div class="flex items-center">188 <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">189 POST190 </span>191 <h3 class="ml-3 text-md font-medium text-gray-900">/api/frontend/data</h3>192 </div>193 <p class="mt-1 text-sm text-gray-500">https://api.system-a.com/data</p>194 </div>195 <div class="flex space-x-2">196 <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">197 <i data-feather="edit" class="h-4 w-4 mr-1"></i> Edit198 </button>199 <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">200 <i data-feather="play" class="h-4 w-4 mr-1"></i> Test201 </button>202 </div>203 </div>204 <div class="mt-3 flex items-center text-sm text-gray-500">205 <span>Auth: Bearer Token</span>206 <span class="mx-2">•</span>207 <span>Cache: 5 min</span>208 <span class="mx-2">•</span>209 <span>Last tested: 2 min ago</span>210 </div>211 </div>212 213 <!-- Endpoint 2 -->214 <div class="border border-gray-200 rounded-lg p-4">215 <div class="flex justify-between">216 <div>217 <div class="flex items-center">218 <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">219 GET220 </span>221 <h3 class="ml-3 text-md font-medium text-gray-900">/api/customer/info</h3>222 </div>223 <p class="mt-1 text-sm text-gray-500">https://api.crm-system.com/customers</p>224 </div>225 <div class="flex space-x-2">226 <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">227 <i data-feather="edit" class="h-4 w-4 mr-1"></i> Edit228 </button>229 <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">230 <i data-feather="play" class="h-4 w-4 mr-1"></i> Test231 </button>232 </div>233 </div>234 <div class="mt-3 flex items-center text-sm text-gray-500">235 <span>Auth: API Key</span>236 <span class="mx-2">•</span>237 <span>Cache: 10 min</span>238 <span class="mx-2">•</span>239 <span>Last tested: 5 min ago</span>240 </div>241 </div>242 243 <!-- Endpoint 3 -->244 <div class="border border-gray-200 rounded-lg p-4">245 <div class="flex justify-between">246 <div>247 <div class="flex items-center">248 <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800">249 PUT250 </span>251 <h3 class="ml-3 text-md font-medium text-gray-900">/api/inventory/update</h3>252 </div>253 <p class="mt-1 text-sm text-gray-500">https://api.warehouse.com/inventory</p>254 </div>255 <div class="flex space-x-2">256 <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">257 <i data-feather="edit" class="h-4 w-4 mr-1"></i> Edit258 </button>259 <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">260 <i data-feather="play" class="h-4 w-4 mr-1"></i> Test261 </button>262 </div>263 </div>264 <div class="mt-3 flex items-center text-sm text-gray-500">265 <span>Auth: Basic Auth</span>266 <span class="mx-2">•</span>267 <span>Cache: 15 min</span>268 <span class="mx-2">•</span>269 <span>Last tested: 10 min ago</span>270 </div>271 </div>272 </div>273 </div>274 </div>275 </main>276 277 <footer class="bg-white mt-12">278 <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">279 <div class="md:flex md:items-center md:justify-between">280 <div class="flex justify-center md:justify-start">281 <p class="text-center text-sm text-gray-500">282 © 2023 Middleware Bridge Pro. All rights reserved.283 </p>284 </div>285 <div class="mt-4 flex justify-center md:mt-0">286 <div class="flex space-x-6">287 <a href="#" class="text-gray-400 hover:text-gray-500">288 <i data-feather="help-circle" class="h-5 w-5"></i>289 </a>290 <a href="#" class="text-gray-400 hover:text-gray-500">291 <i data-feather="book" class="h-5 w-5"></i>292 </a>293 </div>294 </div>295 </div>296 </div>297 </footer>298 299 <script>300 feather.replace();301 302 // Show auth details based on selection303 document.getElementById('authType').addEventListener('change', function() {304 const authDetails = document.getElementById('authDetails');305 const apiKeyFields = document.getElementById('apiKeyFields');306 const bearerTokenFields = document.getElementById('bearerTokenFields');307 const basicAuthFields = document.getElementById('basicAuthFields');308 309 // Hide all auth fields310 authDetails.classList.add('hidden');311 apiKeyFields.classList.add('hidden');312 bearerTokenFields.classList.add('hidden');313 basicAuthFields.classList.add('hidden');314 315 // Show relevant fields based on selection316 if(this.value !== 'None') {317 authDetails.classList.remove('hidden');318 if(this.value === 'API Key') {319 apiKeyFields.classList.remove('hidden');320 } else if(this.value === 'Bearer Token') {321 bearerTokenFields.classList.remove('hidden');322 } else if(this.value === 'Basic Auth') {323 basicAuthFields.classList.remove('hidden');324 }325 }326 });327 328 // Handle form submission329 document.getElementById('endpointForm').addEventListener('submit', function(e) {330 e.preventDefault();331 alert('Endpoint created successfully!');332 // In a real app, you would send this data to your server333 });334 </script>335</body>336</html>