scripts/js/channels_demo.html Repository BOT_EU Original path scripts/js/channels_demo.htmlRole SOURCE Size 142548 bytes Lines 4086 SHA-256 7e528e63dfeb6cc53efe82fd51aed56a548de52e8bcd317f9de4f5f285aab9d3Displayed 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>Channels demo</title>
<style>
body { margin: 0; font-family: system-ui, Arial; background: #000000; color: #e8eef7; overflow-x: auto; }
.wrap { padding: 10px 10px 20px; min-width: 1500px; }
canvas { width: 100%; height: 256px; background: #000000; border-radius: 12px; display:block; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin: 10px 0; }
.pill { padding: 6px 10px; border-radius: 999px; background:#000000; border:1px solid rgba(255,255,255,0.16); font-size: 13px; }
.pillToggle { display:inline-flex; align-items:center; gap:8px; }
.pillToggle input { margin: 0; }
a.pill { color: #d7ecff; text-decoration: none; display:inline-block; }
button { padding: 8px 12px; border-radius: 10px; border: 0; background:#2a3d57; color:#e8eef7; cursor:pointer; }
button:hover { filter:brightness(1.1); }
.muted { opacity: .8; }
.cornerBrand {
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(180px, 22vw, 300px);
min-height: 42px;
border-radius: 0;
background: transparent;
border: 0;
padding: 0;
overflow: hidden;
pointer-events: none;
}
.cornerBrand img {
width: auto;
height: 52px;
max-width: 100%;
object-fit: contain;
display: block;
filter: none;
mix-blend-mode: normal;
}
#link4h {
background: linear-gradient(180deg, #2e4c72 0%, #203754 100%);
border: 1px solid rgba(168, 210, 255, 0.65);
font-weight: 700;
box-shadow: 0 0 0 1px rgba(87, 145, 207, 0.18) inset;
}
#link4h:hover { filter: brightness(1.16); }
.zoomBtns {
display: inline-flex;
gap: 6px;
margin-left: auto;
}
.zoomBtn {
width: 32px;
height: 32px;
padding: 0;
border-radius: 8px;
font-size: 18px;
font-weight: 700;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.timelineWrap {
margin-top: 2px;
padding: 6px 10px 4px;
border-radius: 10px;
background: rgba(8, 8, 8, 0.88);
border: 1px solid rgba(255,255,255,0.10);
}
.historyWrap {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(8, 8, 8, 0.88);
border: 1px solid rgba(255,255,255,0.10);
}
.historyGrid {
display: grid;
grid-template-columns: 220px minmax(300px, 1fr) minmax(300px, 1fr);
gap: 8px;
align-items: end;
}
.historyField {
display: grid;
gap: 4px;
font-size: 12px;
opacity: .92;
}
.historyField input,
.historyField select {
height: 34px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.14);
background: #101a29;
color: #e8eef7;
padding: 0 10px;
}
.historyActions {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.dangerBtn {
margin-left: auto;
background: linear-gradient(180deg, #6b1e1e 0%, #431313 100%);
border: 1px solid rgba(255, 148, 148, 0.45);
color: #ffdede;
font-weight: 700;
}
.dangerBtn:hover { filter: brightness(1.1); }
.historyHint {
font-size: 12px;
opacity: .82;
margin-top: 8px;
}
.timelineHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 12px;
opacity: .9;
margin-bottom: 4px;
}
.timelineSliders {
position: relative;
height: 16px;
}
.timelineSliders input[type="range"] {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin: 0;
pointer-events: none;
background: transparent;
-webkit-appearance: none;
appearance: none;
height: 16px;
}
.timelineSliders input[type="range"]::-webkit-slider-runnable-track {
height: 4px;
border-radius: 999px;
background: rgba(255,255,255,0.16);
}
.timelineSliders input[type="range"]::-moz-range-track {
height: 4px;
border-radius: 999px;
background: rgba(255,255,255,0.16);
}
.timelineSliders input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
margin-top: -4px;
border: 1px solid rgba(255,255,255,0.8);
background: #74b6ff;
pointer-events: auto;
cursor: ew-resize;
}
.timelineSliders input[type="range"]::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.8);
background: #74b6ff;
pointer-events: auto;
cursor: ew-resize;
}
.toggleDock {
position: static;
margin-top: 10px;
z-index: 1;
border-radius: 12px;
background: #04180f;
border: 1px solid rgba(255,255,255,0.10);
padding: 10px;
backdrop-filter: none;
}
.toggleTitle { font-size: 13px; opacity: .82; margin-bottom: 8px; }
.toggleGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 12px; }
.tick { display:flex; gap:8px; align-items:flex-start; font-size: 13px; }
.tick input { margin-top: 2px; }
.tick small { display:block; opacity: .72; font-size: 11px; margin-top: 2px; }
.tabRow { display:flex; gap:8px; margin: 4px 0 8px; }
.tabBtn {
padding: 7px 12px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.14);
background: #132033;
color:#e8eef7;
cursor:pointer;
font-size: 13px;
}
.tabBtn.active { background:#2a3d57; border-color: rgba(147,198,255,0.55); }
.panelHidden { display:none; }
.topToolbar { display: none; }
.tabRow { display: none; }
.toggleDock { display: none; }
.priceMeta { font-size: 13px; opacity:.86; margin: 6px 0; }
.priceGrid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
gap: 10px;
align-items: start;
}
.priceMainWrap {
display: grid;
grid-template-columns: repeat(4, minmax(220px, 1fr));
gap: 10px;
min-width: 0;
}
.priceBigWrap {
min-width: 0;
display: grid;
gap: 10px;
}
.signalGrid { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:10px; margin-top: 10px; background:#04180f; border:1px solid rgba(255,255,255,0.10); border-radius:12px; padding:10px; }
.signalCard {
background:#000000;
border:1px solid rgba(255,255,255,0.12);
border-radius: 12px;
padding: 10px;
}
.signalCard h4 { margin: 0 0 8px; font-size: 13px; }
.signalHead { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom: 8px; }
.signalValue { font-weight:700; color:#cfe9ff; }
.inlineAction { margin-left: auto; padding: 6px 10px; font-size: 12px; border-radius: 8px; }
.inlineFlagToggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
color: #d3f6e6;
user-select: none;
white-space: nowrap;
}
.inlineFlagToggle input {
margin: 0;
transform: translateY(1px);
}
.metricsCols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 12px; }
.metricCol { display: grid; gap: 6px; }
.metricLine { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13px; }
.metricLine .k { opacity: .9; }
.metricLine .v { font-weight: 700; color: #cfe9ff; }
.legendWrap { display:none; }
.legendPills { display:none; }
.copyActionBtn {
margin-left: auto;
background: linear-gradient(180deg, #4aa3ff 0%, #2f6fe0 100%);
border: 1px solid rgba(176, 220, 255, 0.85);
box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset;
color: #f2fbff;
font-weight: 700;
padding: 8px 12px;
}
.copyActionBtn:hover { filter: brightness(1.12); }
.priceCard {
background:#000000;
border:1px solid rgba(255,255,255,0.10);
border-radius: 12px;
padding: 10px;
}
.priceCardWide { grid-column: 1 / -1; }
.priceCard h4 { margin: 0 0 8px; font-size: 13px; opacity:.9; }
.priceList { display:grid; gap:6px; }
.priceRow { display:flex; justify-content:space-between; gap:8px; font-size: 12.5px; }
.priceRow span:first-child { opacity:.86; }
.priceRow span:last-child { font-weight: 600; color:#cfe9ff; }
.bigSplit {
display: grid;
grid-template-columns: repeat(2, minmax(300px, 1fr));
gap: 10px;
}
.bigCol {
background: #000000;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 10px;
padding: 8px;
}
#panelPoints { background:#04180f; border:1px solid rgba(255,255,255,0.10); border-radius:12px; padding:10px; margin-top:0; }
.metricToggle { margin-right: 6px; transform: translateY(1px); }
.groupToggleLabel { display:inline-flex; align-items:center; gap:6px; font-size:12px; opacity:.95; }
.groupToggleLabel input { margin:0; transform: translateY(1px); }
.bigCol h5 { margin: 0 0 8px; font-size: 12.5px; opacity: .92; }
.loadingOverlay {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(8, 12, 18, 0.72);
z-index: 60;
}
.loadingCard {
width: min(540px, 92vw);
border-radius: 14px;
background: #0f1620;
border: 1px solid rgba(255,255,255,0.10);
padding: 14px;
box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}
.loadingHead { display:flex; align-items:center; gap:10px; font-size: 15px; margin-bottom: 10px; }
.spinner {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.25);
border-top-color: #8ac6ff;
animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.stepList { margin: 0; padding-left: 18px; display:grid; gap:5px; font-size: 13px; opacity: .9; }
.stepDone { color: #84f0b3; }
.progressBar {
height: 8px;
border-radius: 99px;
background: rgba(255,255,255,0.12);
overflow: hidden;
margin-top: 10px;
}
.progressFill {
height: 100%;
width: 8%;
background: linear-gradient(90deg, #6db6ff, #9f7dff);
transition: width 220ms ease;
}
.botUiLayout {
display: grid;
grid-template-columns: minmax(760px, 2fr) minmax(380px, 1fr);
gap: 10px;
align-items: start;
}
.chartCol,
.sideCol {
min-width: 0;
display: grid;
gap: 10px;
align-content: start;
}
.chartCol canvas {
min-height: 470px;
height: 470px;
}
.cmdPanel,
.linePanel,
.ordersPanel,
.logsPanel {
background: #04180f;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 12px;
padding: 10px;
min-height: 0;
}
.panelTitle {
font-size: 12px;
opacity: .9;
margin-bottom: 8px;
letter-spacing: 0.2px;
}
.panelHeadRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.panelToggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
opacity: .9;
user-select: none;
white-space: nowrap;
}
.panelToggle input { margin: 0; }
.logsToggles {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.timelineHeadRight {
display: inline-flex;
align-items: center;
gap: 8px;
}
.btnResetY {
padding: 4px 9px;
border-radius: 8px;
border: 1px solid rgba(147,198,255,0.55);
background: #132033;
color: #e8eef7;
font-size: 11.5px;
line-height: 1;
cursor: pointer;
}
.btnResetY:hover { filter: brightness(1.1); }
.monoPanel {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
font-size: 12px;
line-height: 1.45;
color: #d9f2e8;
background: #000000;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
padding: 8px;
max-height: 380px;
overflow: auto;
}
.summaryLine { display: block; }
.summaryLine.positive { color: #8bf0a3; font-weight: 700; }
.summaryLine.negative { color: #ff9393; font-weight: 700; }
.summaryLine.buyVal { color: #8bf0a3; font-weight: 700; }
.summaryLine.sellVal { color: #ff9393; font-weight: 700; }
.summaryTokenBuy { color: #8bf0a3; font-weight: 700; }
.summaryTokenSell { color: #ff9393; font-weight: 700; }
.summaryTokenPctPos { color: #8bf0a3; font-weight: 700; }
.summaryTokenPctNeg { color: #ff9393; font-weight: 700; }
.summaryTokenQuote { color: #6cd4ff; font-weight: 700; }
.ordersPanel { min-height: 210px; }
.cmdPanel .ordersPanel {
margin-top: 10px;
min-height: 210px;
background: #000000;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 10px;
padding: 8px;
}
.logsPanel { min-height: 180px; }
.logsPanelFull {
grid-column: 1 / -1;
}
.ordersTable {
display: grid;
gap: 4px;
max-height: 300px;
overflow: auto;
padding-right: 4px;
}
.orderRow {
display: grid;
grid-template-columns: 52px 92px 1fr 1fr 22px;
gap: 6px;
align-items: center;
padding: 4px 6px;
border-radius: 8px;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.07);
font-size: 11.5px;
}
.orderRow.sell { border-color: rgba(255, 120, 120, 0.25); }
.orderRow.buy { border-color: rgba(120, 220, 140, 0.25); }
.orderSide.sell { color: #ff9393; font-weight: 700; }
.orderSide.buy { color: #8bf0a3; font-weight: 700; }
.orderNowRow {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 3px 6px;
border-radius: 6px;
background: rgba(80,140,220,0.10);
border: 1px solid rgba(100,170,255,0.18);
font-size: 11.5px;
color: #6cd4ff;
font-weight: 700;
}
.orderEditBtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px; height: 16px;
border: none;
background: rgba(255,255,255,0.06);
border-radius: 4px;
cursor: pointer;
color: #aaa;
font-size: 11px;
padding: 0;
margin-left: 2px;
vertical-align: middle;
transition: background .15s, color .15s;
}
.orderEditBtn:hover { background: rgba(100,180,255,0.25); color: #fff; }
.orderDeleteBtn {
display: inline-flex;