From ac251d3b40de0df16011087fa7cbd4763945f478 Mon Sep 17 00:00:00 2001
From: usmannasir <usman@cyberpersons.com>
Date: Mon, 2 Jun 2025 01:37:10 +0500
Subject: [PATCH] improve home page design

---
 .../templates/baseTemplate/homePage.html      | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/baseTemplate/templates/baseTemplate/homePage.html b/baseTemplate/templates/baseTemplate/homePage.html
index 2754f00e5..8e2a382d1 100755
--- a/baseTemplate/templates/baseTemplate/homePage.html
+++ b/baseTemplate/templates/baseTemplate/homePage.html
@@ -82,7 +82,7 @@
                 <div ng-controller="homePageStatus" style="margin-bottom: 40px;">
                     <div style="display: flex; justify-content: center; gap: 40px; align-items: stretch; flex-wrap: wrap;">
                         <!-- CPU Usage -->
-                        <div style="background: rgba(255,255,255,0.95); border-radius: 20px; box-shadow: 0 8px 32px rgba(229,57,53,0.15); padding: 30px 40px; min-width: 200px; text-align: center; backdrop-filter: blur(10px); border: 1px solid rgba(229,57,53,0.1);">
+                        <div class="system-stat-card" style="background: rgba(255,255,255,0.95); border-radius: 20px; box-shadow: 0 8px 32px rgba(229,57,53,0.15); padding: 30px 40px; min-width: 200px; text-align: center; backdrop-filter: blur(10px); border: 1px solid rgba(229,57,53,0.1);">
                             <div style="font-size: 1.2rem; color: #e53935; font-weight: 700; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px;">{% trans "CPU Usage" %}</div>
                             <div id="redcircle" class="c100 red cpu" style="margin: 0 auto; filter: drop-shadow(0 4px 8px rgba(229,57,53,0.2));">
                                 <span style="font-weight: 700; font-size: 1.2rem;">{$ cpuUsage $}%</span>
@@ -93,7 +93,7 @@
                             </div>
                         </div>
                         <!-- RAM Usage -->
-                        <div style="background: rgba(255,255,255,0.95); border-radius: 20px; box-shadow: 0 8px 32px rgba(67,160,71,0.15); padding: 30px 40px; min-width: 200px; text-align: center; backdrop-filter: blur(10px); border: 1px solid rgba(67,160,71,0.1);">
+                        <div class="system-stat-card" style="background: rgba(255,255,255,0.95); border-radius: 20px; box-shadow: 0 8px 32px rgba(67,160,71,0.15); padding: 30px 40px; min-width: 200px; text-align: center; backdrop-filter: blur(10px); border: 1px solid rgba(67,160,71,0.1);">
                             <div style="font-size: 1.2rem; color: #43a047; font-weight: 700; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px;">{% trans "Ram Usage" %}</div>
                             <div id="greencircle" class="c100 p0 green ram" style="margin: 0 auto; filter: drop-shadow(0 4px 8px rgba(67,160,71,0.2));">
                                 <span style="font-weight: 700; font-size: 1.2rem;">{$ ramUsage $}%</span>
@@ -104,7 +104,7 @@
                             </div>
                         </div>
                         <!-- Disk Usage -->
-                        <div style="background: rgba(255,255,255,0.95); border-radius: 20px; box-shadow: 0 8px 32px rgba(216,27,96,0.15); padding: 30px 40px; min-width: 200px; text-align: center; backdrop-filter: blur(10px); border: 1px solid rgba(216,27,96,0.1);">
+                        <div class="system-stat-card" style="background: rgba(255,255,255,0.95); border-radius: 20px; box-shadow: 0 8px 32px rgba(216,27,96,0.15); padding: 30px 40px; min-width: 200px; text-align: center; backdrop-filter: blur(10px); border: 1px solid rgba(216,27,96,0.1);">
                             <div style="font-size: 1.2rem; color: #d81b60; font-weight: 700; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px;">{% trans "Disk Usage '/'" %}</div>
                             <div id="pinkcircle" class="c100 pink disk" style="margin: 0 auto; filter: drop-shadow(0 4px 8px rgba(216,27,96,0.2));">
                                 <span style="font-weight: 700; font-size: 1.2rem;">{$ diskUsage $}%</span>
@@ -141,16 +141,16 @@
                                     </tr>
                                 </thead>
                                 <tbody>
-                                    <tr ng-repeat="login in sshLogins" style="background: #f8f9fa; border-bottom: 1px solid #e9ecef; transition: background 0.2s;">
+                                    <tr ng-repeat="login in sshLogins" class="ssh-login-row" style="background: #f8f9fa; border-bottom: 1px solid #e9ecef; transition: background 0.2s;">
                                         <td style="padding: 10px 15px; font-weight: 600; color: #333;">{{login.user}}</td>
-                                        <td style="padding: 10px 15px; color: #555;">{{login.ip}}</td>
+                                        <td style="padding: 10px 15px; color: #555;">{$ login.ip $}</td>
                                         <td style="padding: 10px 15px;">
-                                            <span ng-if="login.flag"><img ng-src="{{login.flag}}" alt="{{login.country}}" style="height: 18px; margin-right: 6px; vertical-align: middle; border-radius: 2px;" /></span>
-                                            <span ng-if="!login.flag && login.country">{{login.country}}</span>
+                                            <span ng-if="login.flag"><img ng-src="{$ login.flag $}" alt="{$ login.country $}" style="height: 18px; margin-right: 6px; vertical-align: middle; border-radius: 2px;" /></span>
+                                            <span ng-if="!login.flag && login.country">{$ login.country $}</span>
                                             <span ng-if="!login.flag && !login.country">-</span>
                                         </td>
-                                        <td style="padding: 10px 15px; color: #555;">{{login.date}}</td>
-                                        <td style="padding: 10px 15px; color: #888;">{{login.session}}</td>
+                                        <td style="padding: 10px 15px; color: #555;">{$ login.date $}</td>
+                                        <td style="padding: 10px 15px; color: #888;">{$ login.session $}</td>
                                     </tr>
                                 </tbody>
                             </table>
@@ -233,7 +233,7 @@
             }
             
             /* SSH table hover */
-            tbody tr:hover {
+            .ssh-login-row:hover {
                 background: #e9ecef !important;
             }