view release on metacpan or  search on metacpan

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

TITLE: SQL Dashboard
:--------------------------------------------------------------------------------:
BOOKMARK: sql-dashboard
:--------------------------------------------------------------------------------:
STASH: 
:--------------------------------------------------------------------------------:
HTML: <style>
.sql-shell { display:grid; gap:18px; color:#24313c; }
.sql-banner { padding:12px 14px; border:1px solid #d5c36a; background:#fff6d6; color:#563f00; }
.sql-banner.is-error { border-color:#d89a9a; background:#fff1f1; color:#7f1d1d; }
.sql-main-tabs, .sql-subtabs { display:flex; gap:0; flex-wrap:wrap; align-items:flex-end; border-bottom:1px solid #aeb9c3; }
.sql-main-tab, .sql-subtab { display:inline-block; margin:0 4px -1px 0; padding:10px 14px; border:1px solid #aeb9c3; border-bottom:1px solid #aeb9c3; background:linear-gradient(180deg, #f6f8fa 0%, #dfe7ef 100%); color:#20303b; text-decoration:none; f...
.sql-main-tab.is-active, .sql-subtab.is-active { background:#ffffff; border-bottom-color:#ffffff; position:relative; top:1px; }
.sql-panel { display:none; border:1px solid #bcc7cf; background:#ffffff; padding:16px; }
.sql-panel.is-active { display:block; }
.sql-grid { display:grid; gap:16px; }
.sql-two-col { grid-template-columns: minmax(320px, 1fr) minmax(360px, 2fr); }
.sql-card { border:1px solid #d8dee3; background:#fbfcfd; padding:14px; }
.sql-card h3 { margin-top:0; }
.sql-form-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
.sql-form-grid label, .sql-stack label { display:grid; gap:6px; font-weight:600; color:#24313c; }
.sql-form-grid input, .sql-form-grid textarea, .sql-stack textarea, .sql-stack select, .sql-stack input { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #b8c1c9; background:#fff; font-family:monospace; }
.sql-stack { display:grid; gap:12px; }
.sql-toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.sql-action { display:inline-flex; align-items:center; gap:4px; padding:2px 0; border:none; background:transparent; color:#345068; text-decoration:none; font-weight:600; font-size:13px; line-height:1.3; }
.sql-action:hover, .sql-action:focus { color:#102131; text-decoration:underline; }
.sql-action.sql-action-quiet { color:#617181; font-weight:500; }
.sql-badge { display:inline-block; padding:4px 8px; border:1px solid #d5dde3; background:#f8fafb; color:#465560; font-size:12px; }
.sql-workspace-panels { border:1px solid #cbd3da; background:#f7fafc; }
.sql-workspace-panel { display:none; padding:18px; }
.sql-workspace-panel.is-active { display:block; }
.sql-workspace-nav { display:grid; gap:16px; align-content:start; padding:14px; border:1px solid #cbd3da; background:linear-gradient(180deg, #eef3f7 0%, #e6edf3 100%); }
.sql-workspace-editor { display:grid; gap:14px; align-content:start; padding:0; background:#fbfcfd; }
.sql-nav-section { display:grid; gap:10px; }
.sql-nav-section h3, .sql-nav-section h4 { margin:0; }
.sql-nav-header { display:flex; gap:10px; align-items:center; justify-content:space-between; }
.sql-list { border:1px solid #c2ccd4; background:#ffffff; }
.sql-list-row { display:grid; grid-template-columns: minmax(0, 1fr) auto; gap:8px; align-items:start; padding:0; border-top:1px solid #d7dee4; }
.sql-list-row:first-child { border-top:none; }
.sql-list-row.is-active { background:#dce8f3; }
.sql-list-item { display:block; padding:10px 12px; color:#1d2b35; text-decoration:none; min-width:0; }
.sql-list-item.is-active { font-weight:700; }
.sql-list-item small { display:block; margin-top:4px; color:#5b6873; font-weight:400; }
.sql-inline-delete { display:inline-flex; align-items:center; justify-content:center; min-width:30px; padding:10px 8px; color:#7a2030; text-decoration:none; font-size:12px; font-weight:700; }
.sql-inline-delete:hover, .sql-inline-delete:focus { text-decoration:none; color:#5a0f20; background:#f8dde2; }
.sql-inline-action { display:inline-flex; align-items:center; justify-content:center; min-width:54px; padding:10px 8px; color:#345068; text-decoration:none; font-size:12px; font-weight:700; }
.sql-inline-action:hover, .sql-inline-action:focus { text-decoration:none; color:#102131; background:#dce8f3; }
.sql-inline-fields { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
.sql-editor-frame { display:grid; gap:10px; border:1px solid #d2dae0; background:#ffffff; padding:12px; }
.sql-editor-frame label { display:grid; gap:8px; font-weight:700; color:#24313c; }
.sql-editor-frame textarea { width:100%; min-height:220px; max-height:72vh; box-sizing:border-box; padding:12px 14px; border:1px solid #b8c1c9; background:#fff; font-family:monospace; line-height:1.5; resize:none; overflow:hidden; }
.sql-editor-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; padding-top:8px; border-top:1px solid #dbe2e8; }
.sql-editor-actions-left { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.sql-editor-note { color:#63727e; font-size:12px; }
.sql-result-info { min-height:120px; padding:12px; border:1px solid #c5d0d8; background:#16212a; color:#edf3f7; white-space:pre-wrap; overflow:auto; }
.sql-result-html { margin-top:12px; overflow:auto; }
.sql-result-html table { width:100%; border-collapse:collapse; }
.sql-result-html th, .sql-result-html td { border:1px solid #d0d8df; padding:8px 10px; text-align:left; vertical-align:top; }
.sql-result-html th { background:#eef3f7; }
.sql-help { margin:0; color:#4b5a66; font-size:13px; }
.sql-schema-grid { display:grid; grid-template-columns: minmax(260px, 1fr) minmax(320px, 1fr); gap:16px; }
.sql-schema-toolbar { display:grid; gap:10px; margin-bottom:12px; }
.sql-schema-toolbar label { display:grid; gap:6px; font-weight:600; color:#24313c; }
.sql-schema-toolbar input { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #b8c1c9; background:#fff; font-family:monospace; }
.sql-empty { padding:12px; border:1px dashed #bcc7cf; background:#f8fafb; color:#55636d; }
.sql-checkbox { display:flex; gap:10px; align-items:center; font-weight:600; color:#24313c; }
@media (max-width: 920px) {
  .sql-two-col, .sql-schema-grid { grid-template-columns: 1fr; }
  .sql-editor-actions { align-items:flex-start; }
}
</style>
<div class="sql-shell">
  <div id="sql-banner" class="sql-banner" hidden></div>
  <nav class="sql-main-tabs" aria-label="SQL Dashboard Sections">
    <a href="#" class="sql-main-tab is-active" data-sql-main-tab="profiles" role="tab" aria-selected="true">Connection Profiles</a>
    <a href="#" class="sql-main-tab" data-sql-main-tab="workspace" role="tab" aria-selected="false">SQL Workspace</a>
    <a href="#" class="sql-main-tab" data-sql-main-tab="schema" role="tab" aria-selected="false">Schema Explorer</a>
  </nav>

  <section id="sql-panel-profiles" class="sql-panel is-active">
    <div class="sql-grid sql-two-col">
      <div class="sql-card">
        <div class="sql-toolbar">
          <a href="#" id="sql-profile-new" class="sql-action">New Profile</a>
          <a href="#" id="sql-profile-save" class="sql-action">Save Profile</a>