diff --git a/admin_panel/templates/admin_panel/entezar.html b/admin_panel/templates/admin_panel/entezar.html index 2e4bc6b..14897ca 100644 --- a/admin_panel/templates/admin_panel/entezar.html +++ b/admin_panel/templates/admin_panel/entezar.html @@ -11,29 +11,55 @@ @media (min-width: 769px) { .ez-wrap { padding: 1rem 1.25rem; } } /* ---------- نوار آمار ---------- */ + .ez-stats-head { margin: 0 0 .55rem; } + .ez-stats-title { font-size: .92rem; font-weight: 800; color: #0f172a; margin: 0; } + .ez-stats-hint { + font-size: .72rem; color: #64748b; margin: .2rem 0 0; line-height: 1.7; + } + .ez-stats-hint b { color: #334155; } + .ez-stats { - display: grid; grid-auto-flow: column; grid-auto-columns: minmax(8.5rem, 1fr); - gap: .5rem; overflow-x: auto; padding-bottom: .25rem; + display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11rem, 1fr); + gap: .5rem; overflow-x: auto; padding-bottom: .35rem; -webkit-overflow-scrolling: touch; } @media (min-width: 1024px) { .ez-stats { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; } } .ez-stat { - display: block; border: 1px solid #e2e8f0; border-radius: .625rem; - background: #fff; padding: .55rem .7rem; text-decoration: none; color: #334155; - transition: border-color .15s ease, background-color .15s ease; + display: flex; flex-direction: column; gap: .18rem; + border: 1px solid #e2e8f0; border-radius: .625rem; background: #fff; + padding: .55rem .65rem .6rem; text-decoration: none; color: #334155; + border-top: 3px solid #cbd5e1; + transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; + } + .ez-stat:hover { border-color: #94a3b8; box-shadow: 0 1px 6px rgba(15, 23, 42, .08); } + /* نوار رنگی بالای هر کارت = همان رنگ برچسب وضعیت در جدول */ + .ez-stat.total { border-top-color: #64748b; } + .ez-stat.danger { border-top-color: #dc2626; } + .ez-stat.success { border-top-color: #16a34a; } + .ez-stat.warning { border-top-color: #d97706; } + .ez-stat.link { border-top-color: #0284c7; } + + .ez-stat-top { + display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; + } + .ez-stat .ez-lbl { + font-size: .74rem; font-weight: 700; color: #334155; line-height: 1.35; } - .ez-stat:hover { border-color: #94a3b8; } .ez-stat .ez-num { - display: block; font-size: 1.2rem; font-weight: 800; line-height: 1.1; - font-variant-numeric: tabular-nums; + font-size: 1.25rem; font-weight: 800; line-height: 1.1; + font-variant-numeric: tabular-nums; flex: 0 0 auto; + } + .ez-stat .ez-desc { + font-size: .68rem; color: #7c8798; line-height: 1.6; } - .ez-stat .ez-lbl { display: block; margin-top: .15rem; font-size: .7rem; color: #64748b; } .ez-stat.is-active { - border-color: #33b5d3; background: #f1fbff; box-shadow: inset 0 -3px 0 #33b5d3; + border-color: #33b5d3; background: #f1fbff; + box-shadow: inset 0 -3px 0 #33b5d3, 0 1px 6px rgba(51, 181, 211, .18); } - .ez-stat.is-active .ez-lbl { color: #0e7490; font-weight: 700; } + .ez-stat.is-active .ez-lbl { color: #0e7490; } + .ez-stat.is-active .ez-desc { color: #0e7490; } /* ---------- تفکیک تأخیر ---------- */ .ez-legend { @@ -169,40 +195,78 @@
وضعیت مشتریانِ عقبافتاده
++ «عقبافتاده» یعنی از آخرین بازدید + بیش از {{ counts.period_months }} ماه گذشته باشد. + روی هر کارت بزنید تا فقط همان گروه نمایش داده شود؛ + کل = بدون قرار + با قرار. + {% if counts.both %} + ({{ counts.both }} مشتری هم قرار هماهنگی دارند و هم بازدید + برنامهریزیشده، پس در هر دو کارت شمرده میشوند.) + {% endif %} +
+