115 lines
6.9 KiB
HTML
115 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>SampleApi</title>
|
|
<base href="__DOXA_API_BASE__" />
|
|
<link rel="stylesheet" href="app.css" />
|
|
<style>
|
|
:root {
|
|
--accent: #6366f1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app" class="app-shell">
|
|
<!-- Top bar -->
|
|
<header class="topbar">
|
|
<div class="topbar-brand">
|
|
<span class="brand-mark">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M4 6L10 12L4 18" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M13 18H20" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" />
|
|
</svg>
|
|
</span>
|
|
<span class="brand-title" id="brandTitle">SampleApi</span>
|
|
<span class="brand-version" id="brandVersion"></span>
|
|
</div>
|
|
<div class="api-switcher"><select id="apiSelector"><option>Default API</option></select></div><div class="topbar-search">
|
|
<svg viewBox="0 0 24 24" fill="none" class="search-icon"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2" /><path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>
|
|
<input id="searchInput" type="text" placeholder="Search endpoints (press /)" autocomplete="off" />
|
|
<kbd>/</kbd>
|
|
</div>
|
|
<div class="topbar-actions">
|
|
<div class="action-group">
|
|
<button id="dashboardBtn" class="action-btn" title="View Analytics Dashboard">
|
|
<svg viewBox="0 0 24 24" fill="none" width="15" height="15" style="vertical-align:-2px;margin-right:4px;"><rect x="3" y="3" width="7" height="7" stroke="currentColor" stroke-width="2"/><rect x="14" y="3" width="7" height="7" stroke="currentColor" stroke-width="2"/><rect x="3" y="14" width="7" height="7" stroke="currentColor" stroke-width="2"/><rect x="14" y="14" width="7" height="7" stroke="currentColor" stroke-width="2"/></svg>Dashboard
|
|
</button>
|
|
<button id="authBtn" class="action-btn" title="Manage authentication">
|
|
<svg viewBox="0 0 24 24" fill="none" width="15" height="15" style="vertical-align:-2px;margin-right:4px;"><rect x="5" y="11" width="14" height="9" rx="2" stroke="currentColor" stroke-width="2" /><path d="M8 11V7a4 4 0 018 0v4" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>Auth
|
|
<span class="badge-dot" id="authBadgeDot" style="display:none;"></span>
|
|
</button>
|
|
<button id="consoleBtn" class="action-btn" title="Open API console">
|
|
<svg viewBox="0 0 24 24" fill="none" width="15" height="15" style="vertical-align:-2px;margin-right:4px;"><path d="M4 5h16v14H4z" stroke="currentColor" stroke-width="2" /><path d="M7 9l3 3-3 3M13 15h4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>Console
|
|
</button>
|
|
<button id="importBtn" class="action-btn action-btn-primary">⬆ Import</button>
|
|
<button id="compareBtn" class="action-btn" title="Compare against another spec">⇄ Compare</button>
|
|
<button id="exportDoxaApiBtn" class="action-btn">DoxaApi</button>
|
|
<button id="exportOpenApiBtn" class="action-btn">OpenAPI</button>
|
|
<button id="exportSwaggerBtn" class="action-btn">Swagger</button>
|
|
</div>
|
|
|
|
<input id="importFile" type="file" accept=".json" hidden />
|
|
<input id="diffFile" type="file" accept=".json" hidden />
|
|
<button id="themeToggle" class="icon-btn" title="Toggle theme" aria-label="Toggle theme">
|
|
<svg class="icon-sun" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="4" stroke="currentColor" stroke-width="2" /><path d="M12 2V4M12 20V22M4 12H2M22 12H20M19.07 4.93L17.66 6.34M6.34 17.66L4.93 19.07M19.07 19.07L17.66 17.66M6.34 6.34L4.93 4.93" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>
|
|
<svg class="icon-moon" viewBox="0 0 24 24" fill="none"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" /></svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="body-grid">
|
|
<!-- Left nav: groups + endpoint list -->
|
|
<nav class="nav-pane" id="navPane">
|
|
<div id="navContent" class="nav-content"></div>
|
|
</nav>
|
|
|
|
<!-- Middle: endpoint detail -->
|
|
<main class="detail-pane" id="detailPane">
|
|
<div id="detailContent" class="detail-content"></div>
|
|
</main>
|
|
|
|
<!-- Right: try it out / response -->
|
|
<aside class="try-pane" id="tryPane">
|
|
<div id="tryContent" class="try-content"></div>
|
|
</aside>
|
|
|
|
<!-- Dashboard Panel (initially hidden) -->
|
|
<div id="dashboardPanel" class="dashboard-panel" style="display: none;">
|
|
<div class="dashboard-header">
|
|
<h2>API Analytics</h2>
|
|
<button id="closeDashboard" class="close-btn" title="Close Dashboard">×</button>
|
|
</div>
|
|
<div class="dashboard-content">
|
|
<div class="dashboard-stats">
|
|
<div class="stat-card">
|
|
<div class="stat-label">Total Endpoints</div>
|
|
<div class="stat-value" id="totalEndpoints">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Total Requests</div>
|
|
<div class="stat-value" id="totalRequests">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Errors</div>
|
|
<div class="stat-value error-red" id="totalErrors">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Avg Response</div>
|
|
<div class="stat-value" id="avgResponse">0ms</div>
|
|
</div>
|
|
</div>
|
|
<div id="topEndpointsChart" class="metric-chart"></div>
|
|
<div id="recentRequestsTable" class="recent-requests"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modalRoot"></div>
|
|
|
|
<script>window.__DOXA_API_SPEC_URL__ = "__DOXA_API_SPEC_PATH__";</script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |