+@media (min-width: 992px) {
+ .space-card.gradient-sky .card-desc {
+ font-size: 0.9rem;
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.92);
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 0.8rem;
+ border-radius: 10px;
+ margin-top: 0.6rem;
+ line-height: 1.5;
+ border-left: 3px solid rgba(103, 232, 249, 0.4);
+ box-shadow: inset 0 1px 4px rgba(0,0,0,0.15);
+ }
+
+ .space-card.gradient-sky .card-desc strong {
+ color: #67e8f9;
+ font-weight: 700;
+ }
+}
+
+@media (min-width: 992px) {
+ .circular-progress-container {
+ display: flex;
+ align-items: center;
+ gap: 1.2rem;
+ }
+
+ .circular-progress {
+ flex-shrink: 0;
+ width: 64px;
+ height: 64px;
+ }
+
+ .circular-progress svg {
+ width: 64px;
+ height: 64px;
+ }
+
+ .circular-progress circle {
+ cx: 32;
+ cy: 32;
+ r: 29;
+ stroke-width: 6;
+ }
+
+ .processes-list {
+ flex-grow: 1;
+ background: rgba(255, 255, 255, 0.04);
+ border-radius: 10px;
+ padding: 0.7rem 0.9rem;
+ border-left: 3px solid rgba(103, 232, 249, 0.5);
+ box-shadow: inset 0 1px 6px rgba(0,0,0,0.15);
+ }
+
+ .space-card.gradient-gray .circular-progress-container,
+ .space-card.gradient-pink .circular-progress-container,
+ .space-card.gradient-sky .circular-progress-container {
+ min-height: 80px;
+ align-items: flex-start;
+ }
+
+ .space-card.gradient-sky .processes-list {
+ font-size: 0.82rem;
+ line-height: 1.55;
+ }
+
+ .space-card.gradient-sky .processes-list strong {
+ color: #67e8f9;
+ font-weight: 700;
+ }
+}
+
+@media (max-width: 768px) {
+ .space-card.gradient-sky {
+ display: flex !important;
+ min-height: 140px;
+ border-radius: 12px;
+ }
+
+ .space-card.gradient-sky .card-inner {
+ padding: 0.8rem;
+ }
+
+ .space-card.gradient-sky .circular-progress {
+ width: 45px;
+ height: 45px;
+ }
+
+ .space-card.gradient-sky .circular-progress svg {
+ width: 45px;
+ height: 45px;
+ }
+
+ .space-card.gradient-sky .circular-progress circle {
+ cx: 22.5;
+ cy: 22.5;
+ r: 19.5;
+ stroke-width: 4;
+ }
+
+ .space-card.gradient-sky .progress-value {
+ font-size: 0.7rem;
+ }
+
+ .space-card.gradient-sky .processes-list {
+ font-size: 0.7rem;
+ color: rgba(255, 255, 255, 0.8);
+ line-height: 1.3;
+ }
+}
+
+/* ========== لایت مود با رنگهای کاملاً مات و پررنگ ========== */
+body.light,
+html.light body {
+ background: linear-gradient(-45deg, #f0f4f8, #d9e2ec, #bcccdc, #9bb3cf) !important;
+ color: #1e293b;
+}
+
+/* حذف تمام پسزمینههای سفید مزاحم */
+body.light .content-wrapper,
+body.light .content,
+body.light .content-header,
+body.light .container-fluid {
+ background: transparent !important;
+}
+
+body.light .space-card {
+ background: transparent !important;
+ backdrop-filter: none !important;
+ -webkit-backdrop-filter: none !important;
+ border: 1px solid rgba(0, 0, 0, 0.15);
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+body.light .space-card::before {
+ display: none !important;
+ content: none !important;
+}
+
+/* رنگهای کاملاً مات و پررنگ برای لایت مود */
+body.light .gradient-purple { background: linear-gradient(135deg, #c084fc, #d8b4fe) !important; }
+body.light .gradient-blue { background: linear-gradient(135deg, #60a5fa, #93c5fd) !important; }
+body.light .gradient-green { background: linear-gradient(135deg, #4ade80, #86efac) !important; }
+body.light .gradient-orange { background: linear-gradient(135deg, #fb923c, #fdba74) !important; }
+body.light .gradient-turquoise { background: linear-gradient(135deg, #2dd4bf, #5eead4) !important; }
+body.light .gradient-red { background: linear-gradient(135deg, #f87171, #fca5a5) !important; }
+body.light .gradient-pink { background: linear-gradient(135deg, #f472b6, #f9a8d4) !important; }
+body.light .gradient-sky { background: linear-gradient(135deg, #38bdf8, #7dd3fc) !important; }
+body.light .gradient-gray { background: linear-gradient(135deg, #9ca3af, #d1d5db) !important; }
+
+body.light .card-title-modern {
+ color: #1e293b !important;
+}
+
+body.light .card-value {
+ color: #0f172a !important;
+ text-shadow: none;
+}
+
+body.light .icon-container {
+ background: rgba(0, 0, 0, 0.05);
+ border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+body.light .icon-container i {
+ color: #0f172a !important;
+}
+
+body.light .card-desc {
+ color: #334155 !important;
+}
+
+body.light .progress-modern {
+ background: rgba(0, 0, 0, 0.1);
+}
+
+body.light .progress-bar-modern {
+ background: linear-gradient(90deg, #475569, #1e293b);
+}
+
+body.light .progress-bar-modern::after {
+ display: none;
+}
+
+body.light .circular-progress .bg {
+ stroke: rgba(0, 0, 0, 0.15);
+}
+
+body.light .circular-progress .progress-value {
+ color: #0f172a !important;
+}
+
+body.light .processes-list {
+ background: rgba(0, 0, 0, 0.02);
+ border-left: 3px solid rgba(0, 0, 0, 0.15);
+}
+
+body.light .process-item {
+ background: rgba(0, 0, 0, 0.03);
+ border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+body.light .process-item:hover {
+ background: rgba(0, 0, 0, 0.06);
+}
+
+body.light .process-name {
+ color: #0f172a !important;
+}
+
+body.light .process-bar {
+ background: rgba(0, 0, 0, 0.1);
+}
+
+body.light .process-bar-fill {
+ background: linear-gradient(90deg, #475569, #1e293b);
+}
+
+body.light .process-percent {
+ color: #334155 !important;
+}
+
+body.light .speed-icon {
+ background: rgba(0, 0, 0, 0.05) !important;
+}
+
+body.light .speed-icon i {
+ color: #0f172a !important;
+}
+
+body.light .speed-num {
+ color: #0f172a !important;
+}
+
+body.light .speed-unit {
+ color: #475569 !important;
+}
+
+body.light .text-orange { color: #c2410c !important; }
+body.light .text-lime { color: #166534 !important; }
+
+@media (min-width: 992px) {
+ body.light .space-card.gradient-sky .card-desc {
+ background: rgba(0, 0, 0, 0.02);
+ border-left: 3px solid rgba(0, 0, 0, 0.15);
+ color: #1e293b;
+ }
+
+ body.light .space-card.gradient-sky .card-desc strong {
+ color: #0f172a;
+ }
+}
+
+
+
+
+{% macro info_box(id, icon, title, number, percentage, description, coloring=False, color_class='gradient-purple') -%}
+
+
+
+
+
+
+
{{title}}
+
{{number|safe}}
+
+ {% if coloring %}
+
+
+
+ 0%
+
+
+ {{description|safe}}
-
- {{description}}
-
+ {% else %}
+
+
{{description}}
+ {% endif %}
-
-
-
-{%- endmacro -%}
-
- {% set onlines=usage_history['m5']['online'] %}
- {% set total_users=usage_history['total']['users'] %}
- {{info_box("today","fa-solid fa-calendar", _("Today Usage"),
- ((usage_history['today']['usage']/1024**3)|round(1)) ~ " GB",
- usage_history['today']['online']/((1,total_users)|max)*100,
- _("Online Users") ~": "~ usage_history['today']['online'] ~ " / "~ total_users,
- color_class="bg-h-purple"
- )}}
- {{info_box("yesterday","fa-solid fa-calendar-day", _("Yesterday Usage"),
- ((usage_history['yesterday']['usage']/1024**3)|round(1)) ~ " GB",
- usage_history['yesterday']['online']/((1,total_users)|max)*100,
- _("Online Users") ~": "~ usage_history['yesterday']['online'] ~ " / "~ total_users,
- color_class="bg-h-blue"
- )}}
- {{info_box("last_30_days","fa-solid fa-calendar-days", _("Month Usage"),
- ((usage_history['last_30_days']['usage']/1024**3)|round(1)) ~ " GB",
- usage_history['last_30_days']['online']/((1,total_users)|max)*100,
- _("Online Users") ~": "~ usage_history['last_30_days']['online'] ~ " / "~ total_users,
- color_class="bg-h-green"
- )}}
- {{info_box("total","fa-solid fa-chart-pie", _("Total Usage"),
- ((usage_history['total']['usage']/1024**3)|round(1)) ~ " GB",
- usage_history['total']['online']/((1,total_users)|max)*100,
- _("Online Users") ~": "~ usage_history['total']['online'] ~ " / "~ total_users,
- color_class="bg-h-orange"
- )}}
-
-
-
-
-
-
- {{info_box("online","fa-solid fa-users",
- _("Online Users"),
- onlines ~ " / "~ total_users,
- onlines/((1,total_users)|max)*100,
- _('In 5 minutes'),
- color_class="bg-h-turquoise"
- )}}
- {{info_box("network","fa-solid fa-network-wired", _("Network"),
- ('
Mb/s Mb/s')|safe,
- 0,
- (stats['system']['net_sent_cumulative_GB']|round(1)) ~ "GB " ~_("From Last Restart"),
- color_class="bg-h-red"
- )}}
-
- {{info_box("cpu","fa-solid fa-microchip", _("CPU %(cores)s Cores", cores=stats['system']['num_cpus']),
-
- ((stats['system']['cpu_percent'])|int) ~ " % " ,
- (stats['system']['cpu_percent'])|int,
- ('
'|safe) ~ stats['top5']['cpu'][0][0] ~ " "|safe ~ ((stats['top5']['cpu'][0][1])|int) ~ "% "|safe~
- ('
'|safe) ~ stats['top5']['cpu'][1][0] ~ " "|safe ~ ((stats['top5']['cpu'][1][1])|int) ~ "% "|safe~
- ('
'|safe) ~ stats['top5']['cpu'][2][0] ~ " "|safe ~ ((stats['top5']['cpu'][2][1])|int) ~ "%",
- coloring=True,
- color_class="bg-h-grey"
- )}}
- {{info_box("ram","fa-solid fa-memory", _("RAM"),
- (stats['system']['ram_used']|round(3)) ~ " / " ~ (stats['system']['ram_total']|round(3)) ~ "GB (" ~((stats['system']['ram_used']*100/stats['system']['ram_total'])|int)~" %)",
- stats['system']['ram_used']*100/stats['system']['ram_total'],
- ('
'|safe) ~ stats['top5']['ram'][0][0] ~ " "|safe ~ ((stats['top5']['ram'][0][1]*100/stats['system']['ram_total'])|int) ~ "% "|safe~
- ('
'|safe) ~ stats['top5']['ram'][1][0] ~ " "|safe ~ ((stats['top5']['ram'][1][1]*100/stats['system']['ram_total'])|int) ~ "% "|safe~
- ('
'|safe) ~ stats['top5']['ram'][2][0] ~ " "|safe ~ ((stats['top5']['ram'][2][1]*100/stats['system']['ram_total'])|int) ~ "% ",
- coloring=True,
- color_class="bg-h-pink"
- )}}
- {#info_box("connections","fa-solid fa-signal", _("Connections/IP"),
- stats['system']['total_unique_ips'] ~ " / " ~ stats['system']['total_connections'],
- stats['system']['total_unique_ips']*100/stats['system']['total_connections'],
- _("CDN make it incorrect")
- )#}
- {{info_box("disk","fa-solid fa-hard-drive", _("Disk"),
- (stats['system']['disk_used']|round(1)) ~ " / "~(stats['system']['disk_total']|round(1))~"GB",
- stats['system']['disk_used']*100/stats['system']['disk_total'],
- _("Hiddify") ~ ": " ~ (stats['system']['hiddify_used']|round(1)) ~ "GB",
- coloring=True,
- color_class='bg-h-sky'
- )}}
+{%- endmacro %}
+
+
+ {% set onlines=usage_history['m5']['online'] %}
+ {% set total_users=usage_history['total']['users'] %}
+
+ {{info_box("today", "fa-solid fa-calendar-day", _("Today Usage"),
+ ((usage_history['today']['usage']/1024**3)|round(1)) ~ " GB",
+ usage_history['today']['online']/((1,total_users)|max)*100,
+ _("Online Users") ~": "~ usage_history['today']['online'] ~ " / "~ total_users,
+ color_class="gradient-purple"
+ )}}
+
+ {{info_box("yesterday", "fa-solid fa-calendar", _("Yesterday Usage"),
+ ((usage_history['yesterday']['usage']/1024**3)|round(1)) ~ " GB",
+ usage_history['yesterday']['online']/((1,total_users)|max)*100,
+ _("Online Users") ~": "~ usage_history['yesterday']['online'] ~ " / "~ total_users,
+ color_class="gradient-blue"
+ )}}
+
+ {{info_box("last_30_days", "fa-solid fa-calendar-week", _("Month Usage"),
+ ((usage_history['last_30_days']['usage']/1024**3)|round(1)) ~ " GB",
+ usage_history['last_30_days']['online']/((1,total_users)|max)*100,
+ _("Online Users") ~": "~ usage_history['last_30_days']['online'] ~ " / "~ total_users,
+ color_class="gradient-green"
+ )}}
+
+ {{info_box("total", "fa-solid fa-chart-pie", _("Total Usage"),
+ ((usage_history['total']['usage']/1024**3)|round(1)) ~ " GB",
+ usage_history['total']['online']/((1,total_users)|max)*100,
+ _("Online Users") ~": "~ usage_history['total']['online'] ~ " / "~ total_users,
+ color_class="gradient-orange"
+ )}}
+
+ {{info_box("online", "fa-solid fa-users", _("Online Users"),
+ onlines ~ " / "~ total_users,
+ onlines/((1,total_users)|max)*100,
+ _('In 5 minutes'),
+ color_class="gradient-turquoise"
+ )}}
+
+ {{info_box("network", "fa-solid fa-network-wired", _("Network"),
+ '
',
+ 0,
+ '0 GB ' ~ _("From Last Restart"),
+ color_class="gradient-red"
+ )}}
+
+ {{info_box("cpu", "fa-solid fa-microchip", _("CPU %(cores)s Cores", cores=stats['system']['num_cpus']|default('?')),
+ "0%",
+ 0,
+ '
در حال بارگذاری...
',
+ coloring=True,
+ color_class="gradient-gray"
+ )}}
+
+ {{info_box("ram", "fa-solid fa-memory", _("RAM"),
+ "0 / ? GB",
+ 0,
+ '
در حال بارگذاری...
',
+ coloring=True,
+ color_class="gradient-pink"
+ )}}
+
+ {{info_box("disk", "fa-solid fa-hard-drive", _("Disk"),
+ "در حال بارگذاری...",
+ 0,
+ '
در حال بارگذاری...
',
+ coloring=True,
+ color_class="gradient-sky"
+ )}}
+
-
{% if hutils.node.is_parent() %}
{% include 'parent_dash.html' %}
{% endif %}
@@ -156,142 +972,196 @@
{{title}}
{% block tail_js %}
{{super()}}
-{% endblock %}
\ No newline at end of file
+{% endblock %}