diff --git a/app_stats/index.html b/app_stats/index.html index 984935e..aad39d6 100644 --- a/app_stats/index.html +++ b/app_stats/index.html @@ -94,14 +94,20 @@ select.txt-input { cursor: pointer; background: #fff; } .badge.new { background: var(--color-purple-bg); color: var(--color-purple); } .card-value { font-size: 30px; font-weight: 700; font-family: var(--font-mono); line-height: 1; } .card-value-year { font-size: 11px; color: var(--color-text-secondary); font-weight: 600; margin-left: 2px; } -.cmp { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; } -.cmp-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 8px; } -.cmp-year { font-size: 11px; color: var(--color-text-secondary); font-weight: 600; font-family: var(--font-mono); } -.cmp-track { height: 8px; background: var(--color-bg); border-radius: 8px; overflow: hidden; } -.cmp-fill { height: 100%; border-radius: 8px; transition: width 0.6s ease; min-width: 2px; } -.cmp-fill.cur { background: var(--color-brand); } -.cmp-fill.prev { background: #C7D2E8; } -.cmp-num { font-size: 11px; font-family: var(--font-mono); color: var(--color-text-secondary); white-space: nowrap; } +.card-sub { font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; } +/* накопительный мини-график (нарастающим итогом по месяцам) */ +.spark { width: 100%; height: 52px; display: block; margin-top: 12px; overflow: visible; } +.spark polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; } +.spark .sp-cur { stroke: var(--color-brand); } +.spark .sp-prev { stroke: #C7D2E8; stroke-dasharray: 3 3; } +.spark .dot-cur { fill: var(--color-brand); } +.spark-x { display: flex; justify-content: space-between; font-size: 9px; color: var(--color-text-secondary); font-family: var(--font-mono); margin-top: 2px; } +.legend { display: flex; gap: 14px; margin-top: 10px; font-size: 11px; } +.legend span { display: flex; align-items: center; gap: 5px; color: var(--color-text-secondary); } +.legend b { font-family: var(--font-mono); color: var(--color-text-primary); font-weight: 600; } +.legend .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } +.legend .dot.cur { background: var(--color-brand); } +.legend .dot.prev { background: #C7D2E8; } .empty-note { text-align: center; color: var(--color-text-secondary); padding: 40px; grid-column: 1 / -1; } /* loading / error */ @@ -132,7 +138,7 @@ select.txt-input { cursor: pointer; background: #fff; }
Использование функций мобильного приложения
+Использование функций МП · нарастающим итогом, год к году