tore/dashbord-top-uslug-b2c-po-re-8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: tore:bfbace06974d06e44c55ec598844dcbe23419d03
Branches Tags
tore:main
tore:pages
..
compare: tore:e0dc58fdb7596e4f371eeb402cad218bdcb9377e
Branches Tags
tore:pages
tore:main

No commits in common. "bfbace06974d06e44c55ec598844dcbe23419d03" and "e0dc58fdb7596e4f371eeb402cad218bdcb9377e" have entirely different histories.
bfbace0697 ... e0dc58fdb7

1 changed files with 26 additions and 11 deletions
Show Stats Expand all files Collapse all files

37
index.html
View File

@ -7,30 +7,45 @@
<link rel="stylesheet" href="./design-system/kt-ai-tokens.css"> <link rel="stylesheet" href="./design-system/kt-ai-tokens.css">
<link rel="stylesheet" href="./design-system/kt-ai-components.css"> <link rel="stylesheet" href="./design-system/kt-ai-components.css">
<link rel="stylesheet" href="./design-system/kt-ai-fonts.css"> <link rel="stylesheet" href="./design-system/kt-ai-fonts.css">
<link rel="stylesheet" href="./design-system/kt-ai-page.css">
<style> <style>
body { background: var(--kt-ai-bg); font-family: var(--kt-ai-font-sans); } body { background: var(--kt-ai-bg-base); font-family: var(--kt-ai-font-family); }
.kt-ai-pagehead { display: flex; align-items: center; gap: 16px; padding: 24px 32px; background: var(--kt-ai-bg-surface); border-bottom: 1px solid var(--kt-ai-border-subtle); }
.kt-ai-pagehead h1 { font-size: 24px; font-weight: 600; color: var(--kt-ai-text-primary); margin: 0; }
.kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 24px 32px; } .kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 24px 32px; }
@media (max-width: 900px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.kt-ai-kpi { background: var(--kt-ai-bg-surface); border: 1px solid var(--kt-ai-border-subtle); border-radius: var(--kt-ai-radius-m); padding: 20px; }
.kt-ai-kpi .value { font-size: 28px; font-weight: 700; color: var(--kt-ai-text-primary); margin-bottom: 4px; }
.kt-ai-kpi .label { font-size: 14px; color: var(--kt-ai-text-secondary); margin-bottom: 2px; }
.kt-ai-kpi .hint { font-size: 12px; color: var(--kt-ai-text-muted); }
.charts-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 0 32px 24px; } .charts-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 0 32px 24px; }
@media (max-width: 900px) { .charts-row { grid-template-columns: 1fr; } } @media (max-width: 900px) { .charts-row { grid-template-columns: 1fr; } }
.chart-wrap { height: 220px; position: relative; display: flex; align-items: flex-end; gap: 4px; padding-top: 28px; overflow-x: auto; } .kt-ai-card { background: var(--kt-ai-bg-surface); border: 1px solid var(--kt-ai-border-subtle); border-radius: var(--kt-ai-radius-m); padding: 20px; }
.kt-ai-card h3 { margin: 0 0 16px; font-size: 16px; font-weight: 600; color: var(--kt-ai-text-primary); }
.chart-wrap { height: 200px; position: relative; display: flex; align-items: flex-end; gap: 4px; padding-top: 10px; overflow-x: auto; }
.bar { flex: 1; min-width: 20px; max-width: 28px; border-radius: 2px 2px 0 0; position: relative; cursor: pointer; } .bar { flex: 1; min-width: 20px; max-width: 28px; border-radius: 2px 2px 0 0; position: relative; cursor: pointer; }
.bar[data-kt-tip]::after { content: attr(data-kt-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--kt-ai-overlay); color: var(--kt-ai-fg-on-fill); padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; } .bar[data-kt-tip]::after { content: attr(data-kt-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--kt-ai-bg-overlay); color: var(--kt-ai-text-inverse); padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.bar:hover::after { opacity: 1; } .bar:hover::after { opacity: 1; }
.bar-value { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 11px; font-family: var(--kt-ai-font-mono); color: var(--kt-ai-fg-muted); } .bar-label { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--kt-ai-text-muted); white-space: nowrap; }
.bar-value { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 11px; font-family: monospace; color: var(--kt-ai-text-muted); }
.table-section { padding: 0 32px 32px; } .table-section { padding: 0 32px 32px; }
.table-controls { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .table-controls { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.kt-ai-input { padding: 10px 12px; border: 1px solid var(--kt-ai-border-default); border-radius: var(--kt-ai-radius-s); font-size: 14px; background: var(--kt-ai-bg-base); color: var(--kt-ai-text-primary); min-width: 200px; }
.kt-ai-select { padding: 10px 12px; border: 1px solid var(--kt-ai-border-default); border-radius: var(--kt-ai-radius-s); font-size: 14px; background: var(--kt-ai-bg-base); color: var(--kt-ai-text-primary); }
.kt-ai-table-wrap { overflow-x: auto; }
table.kt-ai-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.kt-ai-table th { text-align: left; padding: 12px 16px; font-weight: 600; color: var(--kt-ai-text-secondary); border-bottom: 1px solid var(--kt-ai-border-subtle); white-space: nowrap; }
table.kt-ai-table td { padding: 12px 16px; border-bottom: 1px solid var(--kt-ai-border-subtle); color: var(--kt-ai-text-primary); }
table.kt-ai-table tr:hover td { background: var(--kt-ai-bg-hover); }
table.kt-ai-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.kt-ai-chip.active { background: var(--kt-ai-primary); color: var(--kt-ai-fg-on-fill); border-color: var(--kt-ai-primary); } .kt-ai-chip { padding: 6px 12px; border-radius: 999px; font-size: 13px; background: var(--kt-ai-bg-tertiary); color: var(--kt-ai-text-primary); border: 1px solid var(--kt-ai-border-subtle); cursor: pointer; }
.kt-ai-chip.active { background: var(--kt-ai-bg-brand); color: var(--kt-ai-text-inverse); border-color: var(--kt-ai-bg-brand); }
</style> </style>
</head> </head>
<body class="kt-ai-app"> <body>
<div class="kt-ai-pagehead"> <div class="kt-ai-pagehead">
<div class="kt-ai-wrap kt-ai-pagehead-in"> <img src="./kt-logo.svg" alt="Казахтелеком" height="36">
<img src="./kt-logo.svg" alt="Казахтелеком" height="36" style="display:block"> <h1>Топ услуг B2C по регионам</h1>
<h1 style="margin:0">Топ услуг B2C по регионам</h1>
</div>
</div> </div>
<div class="kpi-strip"> <div class="kpi-strip">