view release on metacpan or  search on metacpan

share/seeded-pages/api-dashboard.page  view on Meta::CPAN

TITLE: API Dashboard
:--------------------------------------------------------------------------------:
BOOKMARK: api-dashboard
:--------------------------------------------------------------------------------:
NOTE: A Postman-style request workspace with collection import/export, multiple request tabs, and bookmark-backed request dispatch.
:--------------------------------------------------------------------------------:
HTML: <script src="/js/jquery.js"></script>
<style>
.api-postman-shell { display:grid; gap:18px; }
.api-card { border:1px solid #d9d3c7; background:linear-gradient(180deg, #fffaf1 0%, #fffdf8 100%); border-radius:18px; box-shadow:0 10px 30px rgba(31,42,46,0.08); overflow:hidden; }
.api-card h2, .api-card h3 { margin:0; }
.api-sidebar-header, .api-main-toolbar { padding:16px 18px; border-bottom:1px solid #e6ddcf; background:#f7efe0; }
.api-sidebar-body, .api-main-body { padding:18px; }
.api-shell-tabs, .api-response-tabs, .api-collection-tabs, .api-tab-strip { display:flex; gap:6px; flex-wrap:wrap; align-items:flex-end; border-bottom:1px solid #d8ccb8; }
.api-shell-tabs { padding:0 12px; }
.api-response-tabs, .api-collection-tabs, .api-tab-strip { margin:0; }
.api-shell-tab, .api-response-tab, .api-collection-tab, .api-tab {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid #d1b783;
  border-bottom:0;
  border-radius:12px 12px 0 0;
  background:#efe3cd;
  color:#6a4512;
  cursor:pointer;
  font-weight:700;
  padding:10px 16px;
  margin:0 0 -1px;
}
.api-shell-tab[aria-selected="true"], .api-response-tab[aria-selected="true"], .api-collection-tab[aria-selected="true"], .api-tab.is-active {
  background:#fffdf8;
  border-color:#d8ccb8;
  color:#1f2a2e;
}
.api-shell-panel[hidden], .api-response-panel[hidden] { display:none !important; }
.api-toolbar-group { display:flex; gap:10px; flex-wrap:wrap; }
.api-toolbar-group button, .api-request-actions button { border:1px solid #d1b783; border-radius:999px; background:#fff7e7; color:#6a4512; cursor:pointer; font-weight:600; padding:9px 14px; }
.api-toolbar-group button:hover, .api-request-actions button:hover { background:#f7e1af; }
.api-toolbar-group input[type=file] { color:#6a4512; font-weight:600; max-width:280px; }
.api-toolbar-group input[type=file]::file-selector-button { border:1px solid #d1b783; border-radius:999px; background:#fff7e7; color:#6a4512; cursor:pointer; font-weight:600; padding:9px 14px; margin-right:10px; }
.api-toolbar-group input[type=file]::file-selector-button:hover { background:#f7e1af; }
.api-collection-tree { display:grid; gap:12px; }
.api-collection-card { border:1px solid #eadfca; border-radius:0 14px 14px 14px; padding:14px; background:#fffdf8; }
.api-collection-card.is-active { border-color:#0b7a75; box-shadow:0 0 0 2px rgba(11,122,117,0.10); }
.api-collection-card h3 { font-size:1rem; margin-bottom:8px; }
.api-node-list { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.api-node-list ul { list-style:none; margin:8px 0 0 14px; padding:0 0 0 10px; display:grid; gap:6px; border-left:1px dashed #d8ccb8; }
.api-node-button { width:100%; text-align:left; border:1px solid #e9dec8; border-radius:10px; background:#fff; padding:8px 10px; cursor:pointer; color:#1f2a2e; }
.api-node-button:hover { border-color:#0b7a75; color:#0b7a75; }
.api-node-button.is-active { border-color:#0b7a75; background:#e7f5f4; color:#0b7a75; font-weight:700; }
.api-node-folder { font-weight:700; background:#f8f1e4; }
.api-empty { color:#6a767b; font-style:italic; }
.api-location { margin:0 0 12px; padding:10px 12px; border:1px dashed #d8ccb8; border-radius:12px; background:#fffdf8; color:#6a4512; font-size:0.92rem; line-height:1.5; }
.api-tab-close { border:0; background:transparent; color:inherit; cursor:pointer; padding:0; font-size:1rem; line-height:1; }
.api-editor-grid { display:grid; gap:14px; grid-template-columns:repeat(2, minmax(0, 1fr)); }
.api-field { display:grid; gap:6px; }
.api-field label { font-weight:700; color:#6a4512; }
.api-field input, .api-field select, .api-field textarea { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #d8ccb8; border-radius:12px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:0.95rem; ba...
.api-field textarea { min-height:140px; resize:vertical; }
.api-field-full { grid-column:1 / -1; }
.api-token-shell, .api-auth-shell { border:1px solid #e6ddcf; border-radius:14px; padding:12px; background:#fffaf1; }
.api-token-help { margin:0; color:#6a767b; font-size:0.9rem; }
.api-token-fields { display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); margin-top:12px; }
.api-token-field { display:grid; gap:6px; }
.api-token-field input { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #d8ccb8; border-radius:12px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:0.95rem; background:#fffefb; }
.api-auth-head { display:flex; gap:12px; justify-content:space-between; align-items:flex-start; }
.api-auth-head label { display:block; margin-bottom:6px; }
.api-auth-toggle { border:1px solid #d1b783; border-radius:999px; background:#fff7e7; color:#6a4512; cursor:pointer; font-weight:600; padding:9px 14px; white-space:nowrap; }
.api-auth-toggle:hover { background:#f7e1af; }
.api-auth-fields { display:grid; gap:14px; grid-template-columns:repeat(2, minmax(0, 1fr)); margin-top:12px; }
.api-auth-group { display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-column:1 / -1; }
.api-auth-group[hidden] { display:none !important; }
.api-auth-summary { margin:0; color:#6a767b; line-height:1.5; }
.api-inline-toggles { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.api-inline-toggles label { font-weight:600; color:#1f2a2e; display:inline-flex; gap:6px; align-items:center; }
.api-request-actions { display:flex; gap:10px; flex-wrap:wrap; }
.api-response-shell { display:grid; gap:0; }
.api-response-panel { padding:0; }
.api-response-box { border:1px solid #d8ccb8; border-radius:14px 14px 0 0; overflow:hidden; background:#fffdf8; }
.api-response-box header { padding:10px 14px; background:#f7efe0; font-weight:700; color:#6a4512; border-bottom:1px solid #e6ddcf; }
.api-response-box pre { margin:0; padding:14px; min-height:220px; white-space:pre-wrap; overflow:auto; background:#1f2a2e; color:#f4efe3; }
.api-response-preview { display:none; padding:14px; min-height:220px; background:#f4f1eb; border-top:1px solid #e6ddcf; }
.api-response-preview.is-visible { display:block; }
.api-response-preview img, .api-response-preview iframe, .api-response-preview object { width:100%; max-width:100%; min-height:220px; border:0; border-radius:12px; background:#fff; }
.api-response-meta { display:flex; gap:10px; flex-wrap:wrap; }
.api-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#e6f4f3; color:#0b7a75; font-weight:700; }
.api-chip.is-error { background:#fde9e9; color:#9f2020; }
.api-banner { border:1px solid #d1b783; border-radius:14px; background:#fff6e2; color:#6a4512; padding:12px 14px; display:none; margin-bottom:12px; }
@media (max-width: 980px) {
  .api-editor-grid { grid-template-columns:1fr; }
  .api-auth-fields, .api-auth-group { grid-template-columns:1fr; }
  .api-auth-head { flex-direction:column; }
}
</style>
<div class="api-postman-shell">
  <div class="api-shell-tabs" role="tablist" aria-label="API Dashboard Sections">
    <button type="button" id="api-shell-tab-collections" class="api-shell-tab" role="tab" aria-selected="false" aria-controls="api-shell-panel-collections" data-api-shell-tab="collections">Collections</button>
    <button type="button" id="api-shell-tab-workspace" class="api-shell-tab" role="tab" aria-selected="false" aria-controls="api-shell-panel-workspace" data-api-shell-tab="workspace">Workspace</button>
  </div>
  <aside class="api-card api-shell-panel" id="api-shell-panel-collections" role="tabpanel" aria-labelledby="api-shell-tab-collections" data-api-shell-panel="collections">
    <div class="api-sidebar-header">
      <h2>Collections</h2>
      <p style="margin:8px 0 0;color:#6a767b">Import and export Postman collection JSON, then open requests in local tabs.</p>
    </div>
    <div class="api-sidebar-body">
      <div class="api-toolbar-group" style="margin-bottom:14px">
        <button type="button" id="api-new-collection">New Collection</button>
        <button type="button" id="api-rename-collection">Rename Collection</button>
        <button type="button" id="api-delete-collection">Delete Collection</button>
        <button type="button" id="api-export-collection">Export Postman Collection</button>
        <input id="api-import-file" type="file" accept=".json,application/json" aria-label="Import Postman Collection">
      </div>
      <div id="api-banner" class="api-banner"></div>
      <div id="api-collection-location" class="api-location">Current Location: Workspace root</div>