index.html Repository Demand-Radar Original path index.htmlRole SOURCE Size 133270 bytes Lines 4046 SHA-256 bece94e1f815694e3db00dfa1480618e6692d3f0ab5c0ce667fb22f2bd33f6e4Displayed range 1–500 Previous file/page · Project index · Next file/page
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Market Demand Radar — Workbench</title>
<style>
:root {
color-scheme: dark;
--bg: #111318;
--panel: #191d24;
--panel2: #202631;
--line: #343b48;
--text: #eef2f7;
--muted: #99a4b3;
--good: #46c37b;
--bad: #ff6b6b;
--warn: #f0b44d;
--accent: #7ba7ff;
--info: #84b6ff;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font: 15px/1.45 system-ui, -apple-system, Segoe UI, sans-serif;
}
header {
position: sticky;
top: 0;
z-index: 10;
background: rgba(17, 19, 24, 0.96);
border-bottom: 1px solid var(--line);
padding: 14px 20px;
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
}
header h1 {
margin: 0;
font-size: 18px;
}
.grow { flex: 1; }
.tab-nav {
display: flex;
gap: 8px;
width: 100%;
padding-top: 6px;
border-top: 1px solid var(--line);
}
.tab-btn {
border: 1px solid var(--line);
border-radius: 999px;
background: #2a3140;
color: var(--text);
padding: 8px 12px;
font-weight: 600;
cursor: pointer;
}
.tab-btn.active {
border-color: #6f9aff;
background: #1f3d6f;
color: #eaf2ff;
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
}
.layout {
display: grid;
grid-template-columns: minmax(360px, 520px) minmax(500px, 1fr);
gap: 16px;
padding: 16px;
}
@media (max-width: 1000px) {
.layout { grid-template-columns: 1fr; }
}
.panel {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
}
.panel-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
h2, h3 { margin: 0 0 12px; }
h2 { font-size: 17px; }
h3 { font-size: 14px; color: var(--muted); margin-top: 18px; }
label {
display: block;
margin: 10px 0 5px;
color: var(--muted);
}
input, textarea, select, button {
font: inherit;
}
input, textarea, select {
width: 100%;
background: #10141a;
color: var(--text);
border: 1px solid var(--line);
border-radius: 8px;
padding: 9px 10px;
}
textarea {
min-height: 88px;
resize: vertical;
}
.short { min-height: 58px; }
.row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.checks {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px 12px;
margin: 8px 0;
}
.checks label {
color: var(--text);
margin: 0;
display: flex;
gap: 7px;
align-items: center;
}
.checks input { width: auto; }
button {
border: 0;
border-radius: 8px;
padding: 9px 14px;
cursor: pointer;
background: var(--accent);
color: #071021;
font-weight: 700;
}
button.secondary {
background: #303846;
color: var(--text);
}
button.danger {
background: #573035;
color: #ffd9d9;
}
button.success {
background: #2f7d52;
color: #e9fff2;
}
button:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
}
.status {
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid var(--line);
border-radius: 999px;
padding: 5px 9px;
font-size: 13px;
}
.dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--muted);
}
.good .dot { background: var(--good); }
.bad .dot { background: var(--bad); }
.warn .dot { background: var(--warn); }
.muted { color: var(--muted); }
pre {
margin: 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
background: #0d1015;
border: 1px solid var(--line);
border-radius: 9px;
padding: 12px;
max-height: 58vh;
overflow: auto;
font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.meta {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
font-size: 13px;
color: var(--muted);
}
.chip {
border: 1px solid var(--line);
border-radius: 999px;
padding: 3px 7px;
}
.contract {
margin: 10px 0;
padding: 9px 10px;
border-radius: 8px;
border: 1px solid var(--line);
}
.contract.good {
border-color: #2d7049;
background: #14241a;
}
.contract.bad {
border-color: #7c3d3d;
background: #2c1818;
}
.history-item {
border-left: 3px solid var(--line);
padding: 8px 10px;
margin: 8px 0;
background: var(--panel2);
border-radius: 0 8px 8px 0;
}
code { color: #b8ccff; }
.seed-editor-wrap {
padding: 16px 16px 0;
}
.seed-editor {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px;
}
.seed-editor[hidden] { display: none; }
.seed-toolbar {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 12px;
}
.seed-summary {
color: var(--muted);
margin-right: auto;
}
.seed-table-wrap {
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 10px;
}
.seed-table {
width: 100%;
border-collapse: collapse;
min-width: 1050px;
background: #11151b;
}
.seed-table th,
.seed-table td {
border-bottom: 1px solid var(--line);
padding: 8px;
vertical-align: top;
text-align: left;
}
.seed-table th {
background: #202631;
color: var(--muted);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.seed-table tr:last-child td { border-bottom: 0; }
.seed-table tr.seed-disabled { opacity: 0.5; }
.seed-table input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 5px auto 0;
display: block;
}
.seed-table input[type="text"],
.seed-table textarea,
.seed-table select {
width: 100%;
min-width: 0;
margin: 0;
background: #0d1117;
}
.seed-table textarea { min-height: 64px; }
.seed-id,
.seed-source {
font: 12px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
color: var(--muted);
white-space: nowrap;
}
.seed-delete {
padding: 6px 9px;
background: #573035;
color: #ffd9d9;
}
.seed-count-good {
color: var(--good);
font-weight: 700;
}
.plan-badge {
border: 1px solid var(--line);
border-radius: 10px;
padding: 10px 12px;
background: #121722;
margin: 8px 0 10px;
line-height: 1.35;
}
.plan-badge .dirty {
color: var(--warn);
font-weight: 700;
}
.notice {
border: 1px solid #355b85;
background: #15253a;
border-radius: 10px;
padding: 9px 10px;
color: #cde4ff;
margin-top: 8px;
font-size: 13px;
}
.ok-line {
color: var(--good);
font-weight: 700;
margin-top: 8px;
min-height: 20px;
}
.error-line {
color: var(--bad);
font-weight: 700;
margin-top: 8px;
min-height: 20px;
}
.saved-layout {
display: grid;
grid-template-columns: minmax(300px, 460px) minmax(420px, 1fr);
gap: 16px;
padding: 16px;
}
@media (max-width: 1100px) {
.saved-layout { grid-template-columns: 1fr; }
}
.list-table-wrap {
overflow: auto;
border: 1px solid var(--line);
border-radius: 10px;
}
.list-table {
width: 100%;
border-collapse: collapse;
min-width: 680px;
}
.list-table th,
.list-table td {
border-bottom: 1px solid var(--line);
padding: 8px;
text-align: left;
vertical-align: top;
}
.list-table th {
color: var(--muted);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
background: #202631;
}
.list-table tr:last-child td { border-bottom: 0; }
.version-row {
border: 1px solid var(--line);
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
background: #121722;
}
.version-row .head {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
}
.version-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.preview-seeds {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
font-size: 13px;
}
.preview-seeds th,
.preview-seeds td {
border-bottom: 1px solid var(--line);
padding: 6px;
text-align: left;
vertical-align: top;
}
.preview-seeds th {
color: var(--muted);
font-size: 11px;
text-transform: uppercase;
background: #1f2633;
}
.preview-seeds tr:last-child td { border-bottom: 0; }
.query-plan-layout {
display: grid;
grid-template-columns: 1fr;