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>API Testing - 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 src="https://unpkg.com/swagger-ui-dist@4/swagger-ui-bundle.js"></script>12 <link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@4/swagger-ui.css">13 <script>14 tailwind.config = {15 theme: {16 extend: {17 colors: {18 primary: {19 50: '#f0f9ff',20 100: '#e0f2fe',21 200: '#bae6fd',22 300: '#7dd3fc',23 400: '#38bdf8',24 500: '#0ea5e9',25 600: '#0284c7',26 700: '#0369a1',27 800: '#075985',28 900: '#0c4a6e',29 }30 }31 }32 }33 }34 </script>35 <style>36 body {37 font-family: 'Inter', sans-serif;38 background-color: #f8fafc;39 }40 .card-hover {41 transition: all 0.3s ease;42 }43 .card-hover:hover {44 transform: translateY(-5px);45 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);46 }47 #swagger-ui {48 background: white;49 padding: 20px;50 border-radius: 0.75rem;51 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);52 }53 .swagger-ui .topbar {54 display: none;55 }56 </style>57</head>58<body class="bg-gray-50">59 <!-- Navigation -->60 <nav class="bg-white shadow-sm">61 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">62 <div class="flex justify-between h-16">63 <div class="flex items-center">64 <div class="flex-shrink-0 flex items-center">65 <div class="bg-primary-600 w-8 h-8 rounded-lg flex items-center justify-center">66 <i data-feather="layers" class="text-white"></i>67 </div>68 <span class="ml-2 text-xl font-bold text-gray-900">Middleware Bridge Pro</span>69 </div>70 <div class="hidden sm:ml-6 sm:flex sm:space-x-8">71 <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>72 <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>73 <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>74 <a href="#" class="border-primary-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">API Testing</a>75 </div>76 </div>77 <div class="flex items-center">78 <button class="bg-primary-600 text-white p-1 rounded-full hover:bg-primary-700 focus:outline-none">79 <i data-feather="settings" class="h-5 w-5"></i>80 </button>81 </div>82 </div>83 </div>84 </nav>85 86 <!-- Main Content -->87 <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">88 <!-- API Testing Header -->89 <div class="mb-8">90 <h1 class="text-3xl font-bold text-gray-900">API Testing</h1>91 <p class="mt-2 text-gray-600">Test your configured endpoints using Swagger UI</p>92 </div>93 94 <!-- Swagger UI Container -->95 <div class="bg-white rounded-xl shadow-sm overflow-hidden">96 <div class="px-6 py-5 border-b border-gray-200">97 <h2 class="text-lg font-medium text-gray-900">Swagger API Documentation</h2>98 <p class="mt-1 text-sm text-gray-500">Interactive API testing interface</p>99 </div>100 <div class="p-6">101 <div id="swagger-ui"></div>102 </div>103 </div>104 </main>105 106 <footer class="bg-white mt-12">107 <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">108 <div class="md:flex md:items-center md:justify-between">109 <div class="flex justify-center md:justify-start">110 <p class="text-center text-sm text-gray-500">111 © 2023 Middleware Bridge Pro. All rights reserved.112 </p>113 </div>114 <div class="mt-4 flex justify-center md:mt-0">115 <div class="flex space-x-6">116 <a href="#" class="text-gray-400 hover:text-gray-500">117 <i data-feather="help-circle" class="h-5 w-5"></i>118 </a>119 <a href="#" class="text-gray-400 hover:text-gray-500">120 <i data-feather="book" class="h-5 w-5"></i>121 </a>122 </div>123 </div>124 </div>125 </div>126 </footer>127 128 <script>129 feather.replace();130 131 // Initialize Swagger UI132 window.onload = function() {133 const ui = SwaggerUIBundle({134 url: "https://petstore.swagger.io/v2/swagger.json", // In a real app, this would be your API spec135 dom_id: '#swagger-ui',136 deepLinking: false,137 presets: [138 SwaggerUIBundle.presets.apis,139 SwaggerUIStandalonePreset140 ],141 plugins: [142 SwaggerUIBundle.plugins.DownloadUrl143 ],144 layout: "StandaloneLayout"145 });146 };147 </script>148</body>149</html>