72 lines
3.6 KiB
HTML
72 lines
3.6 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="importBtn" class="action-btn action-btn-primary">⬆ Import</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 />
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<script>window.__DOXA_API_SPEC_URL__ = "__DOXA_API_SPEC_PATH__";</script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|