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

---
 .../templates/baseTemplate/homePage.html      | 970 +++++++++++++++---
 1 file changed, 826 insertions(+), 144 deletions(-)

diff --git a/baseTemplate/templates/baseTemplate/homePage.html b/baseTemplate/templates/baseTemplate/homePage.html
index 367a0badd..d8dba53e3 100755
--- a/baseTemplate/templates/baseTemplate/homePage.html
+++ b/baseTemplate/templates/baseTemplate/homePage.html
@@ -6,71 +6,373 @@
     {% get_current_language as LANGUAGE_CODE %}
     <!-- Current language: {{ LANGUAGE_CODE }} -->
 
-    <div class="container" style="background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; padding: 20px;">
-        <div id="page-title" style="text-align: center; margin-bottom: 40px; padding: 30px; background: rgba(255,255,255,0.9); border-radius: 20px; backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0,0,0,0.1);">
-            <h2 style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: 2.5rem; font-weight: 700; margin-bottom: 10px;">{% trans "Home" %}</h2>
-            <p style="color: #6c757d; font-size: 1.1rem; margin: 0; font-weight: 400;">{% trans "Use the tabs to navigate through the control panel." %}</p>
+    <!--
+      Note: We have added a max-width & auto-margin to center the content,
+      lightened box-shadows, and adjusted flex rules for better wrapping.
+      NOTHING was renamed or removed that the existing JS/selectors depend on.
+    -->
+    <div
+        class="container"
+        style="
+            max-width: 1200px;
+            margin: 0 auto;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            min-height: 100vh;
+            padding: 20px 20px 40px 20px;
+        "
+    >
+        <!--
+        ===============================
+          Page Title (Centered Card)
+        ===============================
+        -->
+        <div
+            id="page-title"
+            style="
+                max-width: 800px;
+                margin: 0 auto 40px auto;
+                text-align: center;
+                padding: 30px;
+                background: rgba(255, 255, 255, 0.9);
+                border-radius: 20px;
+                backdrop-filter: blur(10px);
+                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+            "
+        >
+            <h2
+                style="
+                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                    background-clip: text;
+                    font-size: 2.5rem;
+                    font-weight: 700;
+                    margin-bottom: 10px;
+                "
+            >
+                {% trans "Home" %}
+            </h2>
+            <p style="color: #6c757d; font-size: 1.1rem; margin: 0; font-weight: 400;">
+                {% trans "Use the tabs to navigate through the control panel." %}
+            </p>
         </div>
 
-        <!-- Dashboard Stats Section -->
+        <!--
+        =========================================
+          Dashboard Stats Section (Info Cards)
+        =========================================
+        -->
         <div ng-controller="dashboardStatsController" style="margin-bottom: 40px;">
+
             <!-- Info Cards Row -->
-            <div style="display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; justify-content: center;">
+            <div
+                style="
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap: 20px;
+                    margin-bottom: 40px;
+                    justify-content: center;
+                "
+            >
                 <!-- Total Sites Card -->
-                <a href="{% url 'listWebsites' %}" style="flex: 1; min-width: 240px; max-width: 280px; text-decoration: none;">
+                <a
+                    href="{% url 'listWebsites' %}"
+                    style="flex: 1 1 240px; text-decoration: none;"
+                >
                     <div class="stat-card-wrapper">
-                        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 25px; border-radius: 20px; box-shadow: 0 8px 25px rgba(0,123,255,0.25); height: 100%; cursor: pointer; position: relative; overflow: hidden;">
-                            <div style="position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); pointer-events: none;"></div>
-                            <div style="display: flex; align-items: center; position: relative; z-index: 1;">
-                                <div style="font-size: 3rem; margin-right: 20px; opacity: 0.9; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"></div>
+                        <div
+                            class="rounded-card"
+                            style="
+                                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                                color: #fff;
+                                padding: 25px;
+                                position: relative;
+                                overflow: hidden;
+                                min-height: 140px;
+                                cursor: pointer;
+                            "
+                        >
+                            <!-- subtle radial overlay -->
+                            <div
+                                style="
+                                    position: absolute;
+                                    top: -40%;
+                                    right: -40%;
+                                    width: 180%;
+                                    height: 180%;
+                                    background: radial-gradient(
+                                        circle,
+                                        rgba(255, 255, 255, 0.08) 0%,
+                                        transparent 70%
+                                    );
+                                    pointer-events: none;
+                                "
+                            ></div>
+                            <div
+                                style="
+                                    display: flex;
+                                    align-items: center;
+                                    position: relative;
+                                    z-index: 1;
+                                "
+                            >
+                                <div
+                                    style="
+                                        font-size: 3rem;
+                                        margin-right: 20px;
+                                        opacity: 0.85;
+                                        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+                                    "
+                                ></div>
                                 <div>
-                                    <div style="font-size: 2.8rem; font-weight: 700; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.2);">{$ totalSites $}</div>
-                                    <div style="font-size: 1rem; opacity: 0.9; margin-top: 8px; font-weight: 500;">Total Sites</div>
+                                    <div
+                                        style="
+                                            font-size: 2.8rem;
+                                            font-weight: 700;
+                                            line-height: 1;
+                                            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+                                        "
+                                    >
+                                        {$ totalSites $}
+                                    </div>
+                                    <div
+                                        style="
+                                            font-size: 1rem;
+                                            opacity: 0.9;
+                                            margin-top: 8px;
+                                            font-weight: 500;
+                                        "
+                                    >
+                                        Total Sites
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </a>
+
                 <!-- WordPress Sites Card -->
-                <a href="{% url 'ListWPSites' %}?wp=1" style="flex: 1; min-width: 240px; max-width: 280px; text-decoration: none;">
+                <a
+                    href="{% url 'ListWPSites' %}?wp=1"
+                    style="flex: 1 1 240px; text-decoration: none;"
+                >
                     <div class="stat-card-wrapper">
-                        <div style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); color: #fff; padding: 25px; border-radius: 20px; box-shadow: 0 8px 25px rgba(111,66,193,0.25); height: 100%; cursor: pointer; position: relative; overflow: hidden;">
-                            <div style="position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); pointer-events: none;"></div>
-                            <div style="display: flex; align-items: center; position: relative; z-index: 1;">
-                                <div style="font-size: 3rem; margin-right: 20px; opacity: 0.9; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"></div>
+                        <div
+                            class="rounded-card"
+                            style="
+                                background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
+                                color: #fff;
+                                padding: 25px;
+                                position: relative;
+                                overflow: hidden;
+                                min-height: 140px;
+                                cursor: pointer;
+                            "
+                        >
+                            <div
+                                style="
+                                    position: absolute;
+                                    top: -40%;
+                                    right: -40%;
+                                    width: 180%;
+                                    height: 180%;
+                                    background: radial-gradient(
+                                        circle,
+                                        rgba(255, 255, 255, 0.08) 0%,
+                                        transparent 70%
+                                    );
+                                    pointer-events: none;
+                                "
+                            ></div>
+                            <div
+                                style="
+                                    display: flex;
+                                    align-items: center;
+                                    position: relative;
+                                    z-index: 1;
+                                "
+                            >
+                                <div
+                                    style="
+                                        font-size: 3rem;
+                                        margin-right: 20px;
+                                        opacity: 0.85;
+                                        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+                                    "
+                                ></div>
                                 <div>
-                                    <div style="font-size: 2.8rem; font-weight: 700; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.2);">{$ totalWPSites $}</div>
-                                    <div style="font-size: 1rem; opacity: 0.8; margin-top: 8px; font-weight: 500;">WordPress Sites</div>
+                                    <div
+                                        style="
+                                            font-size: 2.8rem;
+                                            font-weight: 700;
+                                            line-height: 1;
+                                            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+                                        "
+                                    >
+                                        {$ totalWPSites $}
+                                    </div>
+                                    <div
+                                        style="
+                                            font-size: 1rem;
+                                            opacity: 0.85;
+                                            margin-top: 8px;
+                                            font-weight: 500;
+                                        "
+                                    >
+                                        WordPress Sites
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </a>
+
                 <!-- Total Databases Card -->
-                <a href="{% url 'listDBs' %}" style="flex: 1; min-width: 240px; max-width: 280px; text-decoration: none;">
+                <a
+                    href="{% url 'listDBs' %}"
+                    style="flex: 1 1 240px; text-decoration: none;"
+                >
                     <div class="stat-card-wrapper">
-                        <div style="background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); color: #fff; padding: 25px; border-radius: 20px; box-shadow: 0 8px 25px rgba(23,162,184,0.25); height: 100%; cursor: pointer; position: relative; overflow: hidden;">
-                            <div style="position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); pointer-events: none;"></div>
-                            <div style="display: flex; align-items: center; position: relative; z-index: 1;">
-                                <div style="font-size: 3rem; margin-right: 20px; opacity: 0.9; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"></div>
+                        <div
+                            class="rounded-card"
+                            style="
+                                background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
+                                color: #fff;
+                                padding: 25px;
+                                position: relative;
+                                overflow: hidden;
+                                min-height: 140px;
+                                cursor: pointer;
+                            "
+                        >
+                            <div
+                                style="
+                                    position: absolute;
+                                    top: -40%;
+                                    right: -40%;
+                                    width: 180%;
+                                    height: 180%;
+                                    background: radial-gradient(
+                                        circle,
+                                        rgba(255, 255, 255, 0.08) 0%,
+                                        transparent 70%
+                                    );
+                                    pointer-events: none;
+                                "
+                            ></div>
+                            <div
+                                style="
+                                    display: flex;
+                                    align-items: center;
+                                    position: relative;
+                                    z-index: 1;
+                                "
+                            >
+                                <div
+                                    style="
+                                        font-size: 3rem;
+                                        margin-right: 20px;
+                                        opacity: 0.85;
+                                        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+                                    "
+                                ></div>
                                 <div>
-                                    <div style="font-size: 2.8rem; font-weight: 700; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.2);">{$ totalDBs $}</div>
-                                    <div style="font-size: 1rem; opacity: 0.8; margin-top: 8px; font-weight: 500;">Total Databases</div>
+                                    <div
+                                        style="
+                                            font-size: 2.8rem;
+                                            font-weight: 700;
+                                            line-height: 1;
+                                            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+                                        "
+                                    >
+                                        {$ totalDBs $}
+                                    </div>
+                                    <div
+                                        style="
+                                            font-size: 1rem;
+                                            opacity: 0.85;
+                                            margin-top: 8px;
+                                            font-weight: 500;
+                                        "
+                                    >
+                                        Total Databases
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </a>
+
                 <!-- Total Emails Card -->
-                <a href="{% url 'listEmails' %}" style="flex: 1; min-width: 240px; max-width: 280px; text-decoration: none;">
+                <a
+                    href="{% url 'listEmails' %}"
+                    style="flex: 1 1 240px; text-decoration: none;"
+                >
                     <div class="stat-card-wrapper">
-                        <div style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); color: #fff; padding: 25px; border-radius: 20px; box-shadow: 0 8px 25px rgba(255,152,0,0.25); height: 100%; cursor: pointer; position: relative; overflow: hidden;">
-                            <div style="position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); pointer-events: none;"></div>
-                            <div style="display: flex; align-items: center; position: relative; z-index: 1;">
-                                <div style="font-size: 3rem; margin-right: 20px; opacity: 0.9; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"></div>
+                        <div
+                            class="rounded-card"
+                            style="
+                                background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+                                color: #fff;
+                                padding: 25px;
+                                position: relative;
+                                overflow: hidden;
+                                min-height: 140px;
+                                cursor: pointer;
+                            "
+                        >
+                            <div
+                                style="
+                                    position: absolute;
+                                    top: -40%;
+                                    right: -40%;
+                                    width: 180%;
+                                    height: 180%;
+                                    background: radial-gradient(
+                                        circle,
+                                        rgba(255, 255, 255, 0.08) 0%,
+                                        transparent 70%
+                                    );
+                                    pointer-events: none;
+                                "
+                            ></div>
+                            <div
+                                style="
+                                    display: flex;
+                                    align-items: center;
+                                    position: relative;
+                                    z-index: 1;
+                                "
+                            >
+                                <div
+                                    style="
+                                        font-size: 3rem;
+                                        margin-right: 20px;
+                                        opacity: 0.85;
+                                        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+                                    "
+                                ></div>
                                 <div>
-                                    <div style="font-size: 2.8rem; font-weight: 700; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.2);">{$ totalEmails $}</div>
-                                    <div style="font-size: 1rem; opacity: 0.8; margin-top: 8px; font-weight: 500;">Total Emails</div>
+                                    <div
+                                        style="
+                                            font-size: 2.8rem;
+                                            font-weight: 700;
+                                            line-height: 1;
+                                            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+                                        "
+                                    >
+                                        {$ totalEmails $}
+                                    </div>
+                                    <div
+                                        style="
+                                            font-size: 1rem;
+                                            opacity: 0.85;
+                                            margin-top: 8px;
+                                            font-weight: 500;
+                                        "
+                                    >
+                                        Total Emails
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -79,35 +381,164 @@
             </div>
 
             {% if admin %}
+                <!--
+                ===============================
+                  System Stat Cards (CPU / RAM / Disk)
+                ===============================
+                -->
                 <div ng-controller="homePageStatus" style="margin-bottom: 40px;">
-                    <div style="display: flex; justify-content: center; gap: 40px; align-items: stretch; flex-wrap: wrap;">
+                    <div
+                        style="
+                            display: flex;
+                            justify-content: center;
+                            gap: 20px;
+                            align-items: stretch;
+                            flex-wrap: wrap;
+                        "
+                    >
                         <!-- CPU Usage -->
-                        <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>
+                        <div
+                            class="system-stat-card rounded-card"
+                            style="
+                                background: rgba(255, 255, 255, 0.95);
+                                border-radius: 20px;
+                                box-shadow: 0 4px 20px rgba(229, 57, 53, 0.12);
+                                padding: 30px 40px;
+                                min-width: 200px;
+                                text-align: center;
+                                backdrop-filter: blur(10px);
+                                border: 1px solid rgba(229, 57, 53, 0.1);
+                                transition: all 0.3s ease;
+                            "
+                        >
+                            <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>
                                 <div class="slice">
                                     <div class="bar"></div>
                                     <div class="fill"></div>
                                 </div>
                             </div>
                         </div>
+
                         <!-- RAM Usage -->
-                        <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>
+                        <div
+                            class="system-stat-card rounded-card"
+                            style="
+                                background: rgba(255, 255, 255, 0.95);
+                                border-radius: 20px;
+                                box-shadow: 0 4px 20px rgba(67, 160, 71, 0.12);
+                                padding: 30px 40px;
+                                min-width: 200px;
+                                text-align: center;
+                                backdrop-filter: blur(10px);
+                                border: 1px solid rgba(67, 160, 71, 0.1);
+                                transition: all 0.3s ease;
+                            "
+                        >
+                            <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>
                                 <div class="slice">
                                     <div class="bar"></div>
                                     <div class="fill"></div>
                                 </div>
                             </div>
                         </div>
+
                         <!-- Disk Usage -->
-                        <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>
+                        <div
+                            class="system-stat-card rounded-card"
+                            style="
+                                background: rgba(255, 255, 255, 0.95);
+                                border-radius: 20px;
+                                box-shadow: 0 4px 20px rgba(216, 27, 96, 0.12);
+                                padding: 30px 40px;
+                                min-width: 200px;
+                                text-align: center;
+                                backdrop-filter: blur(10px);
+                                border: 1px solid rgba(216, 27, 96, 0.1);
+                                transition: all 0.3s ease;
+                            "
+                        >
+                            <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>
                                 <div class="slice">
                                     <div class="bar"></div>
                                     <div class="fill"></div>
@@ -118,77 +549,316 @@
                 </div>
             {% endif %}
 
-            <!-- Graphs Section -->
-            <div style="background: rgba(255,255,255,0.95); border-radius: 25px; box-shadow: 0 12px 40px rgba(0,0,0,0.1); padding: 35px; backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.2);">
+            <!--
+            ====================================
+              Graphs Section (Traffic / DiskIO / CPU)
+            ====================================
+            -->
+            <div
+                style="
+                    background: rgba(255, 255, 255, 0.95);
+                    border-radius: 25px;
+                    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+                    padding: 35px 25px 40px 25px;
+                    backdrop-filter: blur(15px);
+                    border: 1px solid rgba(255, 255, 255, 0.25);
+                    margin-bottom: 40px;
+                "
+            >
                 <!-- Tab Navigation -->
-                <div style="text-align: center; margin-bottom: 30px;">
-                    <ul style="list-style: none; padding: 0; margin: 0; display: inline-flex; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; padding: 8px; gap: 8px; box-shadow: 0 8px 25px rgba(102,126,234,0.3);">
+                <div style="text-align: center; margin-bottom: 30px; padding-bottom: 5px;">
+                    <ul
+                        style="
+                            list-style: none;
+                            padding: 0;
+                            margin: 0 auto;
+                            display: inline-flex;
+                            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                            border-radius: 15px;
+                            padding: 8px;
+                            gap: 8px;
+                            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2);
+                        "
+                    >
                         <li style="display: inline-block;">
-                            <a href="#traffic" id="traffic-tab" data-toggle="tab" class="graph-tab active" style="display: block; padding: 15px 30px; background: rgba(255,255,255,0.9); color: #667eea; border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.9rem;">
+                            <a
+                                href="#traffic"
+                                id="traffic-tab"
+                                data-toggle="tab"
+                                class="graph-tab active"
+                                style="
+                                    display: block;
+                                    padding: 12px 25px;
+                                    background: rgba(255, 255, 255, 0.9);
+                                    color: #667eea;
+                                    border-radius: 12px;
+                                    text-decoration: none;
+                                    font-weight: 600;
+                                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                                    text-transform: uppercase;
+                                    letter-spacing: 0.5px;
+                                    font-size: 0.85rem;
+                                "
+                            >
                                 Traffic
                             </a>
                         </li>
                         <li style="display: inline-block;">
-                            <a href="#diskio" id="diskio-tab" data-toggle="tab" class="graph-tab" style="display: block; padding: 15px 30px; background: transparent; color: rgba(255,255,255,0.8); border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.9rem;">
+                            <a
+                                href="#diskio"
+                                id="diskio-tab"
+                                data-toggle="tab"
+                                class="graph-tab"
+                                style="
+                                    display: block;
+                                    padding: 12px 25px;
+                                    background: transparent;
+                                    color: rgba(255, 255, 255, 0.8);
+                                    border-radius: 12px;
+                                    text-decoration: none;
+                                    font-weight: 600;
+                                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                                    text-transform: uppercase;
+                                    letter-spacing: 0.5px;
+                                    font-size: 0.85rem;
+                                "
+                            >
                                 Disk IO
                             </a>
                         </li>
                         <li style="display: inline-block;">
-                            <a href="#cpu" id="cpu-tab" data-toggle="tab" class="graph-tab" style="display: block; padding: 15px 30px; background: transparent; color: rgba(255,255,255,0.8); border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.9rem;">
+                            <a
+                                href="#cpu"
+                                id="cpu-tab"
+                                data-toggle="tab"
+                                class="graph-tab"
+                                style="
+                                    display: block;
+                                    padding: 12px 25px;
+                                    background: transparent;
+                                    color: rgba(255, 255, 255, 0.8);
+                                    border-radius: 12px;
+                                    text-decoration: none;
+                                    font-weight: 600;
+                                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                                    text-transform: uppercase;
+                                    letter-spacing: 0.5px;
+                                    font-size: 0.85rem;
+                                "
+                            >
                                 CPU Usage
                             </a>
                         </li>
                     </ul>
                 </div>
-                
+
                 <!-- Tab Content -->
-                <div class="tab-content" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 18px; padding: 30px; min-height: 350px; border: 2px solid rgba(255,255,255,0.5); box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);">
-                    <div class="tab-pane fade show active" id="traffic" role="tabpanel">
+                <div
+                    class="tab-content"
+                    style="
+                        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+                        border-radius: 18px;
+                        padding: 30px;
+                        min-height: 350px;
+                        border: 2px solid rgba(255, 255, 255, 0.5);
+                        box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05);
+                    "
+                >
+                    <div
+                        class="tab-pane fade show active"
+                        id="traffic"
+                        role="tabpanel"
+                    >
                         <canvas id="trafficChart" height="80"></canvas>
                     </div>
-                    <div class="tab-pane fade" id="diskio" role="tabpanel">
+                    <div
+                        class="tab-pane fade"
+                        id="diskio"
+                        role="tabpanel"
+                    >
                         <canvas id="diskIOChart" height="80"></canvas>
                     </div>
-                    <div class="tab-pane fade" id="cpu" role="tabpanel">
+                    <div
+                        class="tab-pane fade"
+                        id="cpu"
+                        role="tabpanel"
+                    >
                         <canvas id="cpuChart" height="80"></canvas>
                     </div>
                 </div>
             </div>
 
-            <!-- Recent SSH Logins Widget -->
+            <!--
+            =========================================
+              Recent SSH Logins Widget (Table)
+            =========================================
+            -->
             <div style="margin-bottom: 40px;">
-                <div style="background: rgba(255,255,255,0.97); border-radius: 18px; box-shadow: 0 8px 32px rgba(102,126,234,0.10); padding: 25px 30px; max-width: 900px; margin: 0 auto;">
-                    <div style="display: flex; align-items: center; margin-bottom: 18px;">
-                        <span style="font-size: 1.25rem; font-weight: 700; color: #333; letter-spacing: 0.5px;">Recent SSH Logins</span>
+                <div
+                    style="
+                        background: rgba(255, 255, 255, 0.97);
+                        border-radius: 18px;
+                        box-shadow: 0 8px 32px rgba(102, 126, 234, 0.08);
+                        padding: 25px 30px;
+                        max-width: 900px;
+                        margin: 0 auto;
+                    "
+                >
+                    <div
+                        style="
+                            display: flex;
+                            align-items: center;
+                            margin-bottom: 18px;
+                        "
+                    >
+                        <span
+                            style="
+                                font-size: 1.25rem;
+                                font-weight: 700;
+                                color: #333;
+                                letter-spacing: 0.5px;
+                            "
+                        >
+                            Recent SSH Logins
+                        </span>
                     </div>
-                    <div ng-if="loadingSSHLogins" style="text-align: center; padding: 20px; color: #888;">
+
+                    <!-- Loading State -->
+                    <div
+                        ng-if="loadingSSHLogins"
+                        style="text-align: center; padding: 20px; color: #888;"
+                    >
                         <i class="fa fa-spinner fa-spin"></i> Loading recent SSH logins...
                     </div>
-                    <div ng-if="!loadingSSHLogins && sshLogins.length === 0" style="text-align: center; color: #888; padding: 20px;">
+
+                    <!-- No Logins Found -->
+                    <div
+                        ng-if="!loadingSSHLogins && sshLogins.length === 0"
+                        style="text-align: center; color: #888; padding: 20px;"
+                    >
                         No recent SSH logins found.
                     </div>
-                    <div ng-if="!loadingSSHLogins && sshLogins.length > 0" style="overflow-x: auto;">
-                        <table style="width: 100%; border-collapse: collapse;">
+
+                    <!-- Table of Logins -->
+                    <div
+                        ng-if="!loadingSSHLogins && sshLogins.length > 0"
+                        style="overflow-x: auto;"
+                    >
+                        <table
+                            style="
+                                width: 100%;
+                                border-collapse: collapse;
+                                min-width: 600px;
+                            "
+                        >
                             <thead>
-                                <tr style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff;">
-                                    <th style="padding: 12px 15px; border-radius: 8px 0 0 8px; text-align: left; font-weight: 600;">User</th>
-                                    <th style="padding: 12px 15px; text-align: left; font-weight: 600;">IP</th>
-                                    <th style="padding: 12px 15px; text-align: left; font-weight: 600;">Country</th>
-                                    <th style="padding: 12px 15px; text-align: left; font-weight: 600;">Date/Time</th>
-                                    <th style="padding: 12px 15px; border-radius: 0 8px 8px 0; text-align: left; font-weight: 600;">Session</th>
+                                <tr
+                                    style="
+                                        background: linear-gradient(
+                                            135deg,
+                                            #667eea 0%,
+                                            #764ba2 100%
+                                        );
+                                        color: #fff;
+                                    "
+                                >
+                                    <th
+                                        style="
+                                            padding: 12px 15px;
+                                            border-radius: 8px 0 0 8px;
+                                            text-align: left;
+                                            font-weight: 600;
+                                        "
+                                    >
+                                        User
+                                    </th>
+                                    <th
+                                        style="
+                                            padding: 12px 15px;
+                                            text-align: left;
+                                            font-weight: 600;
+                                        "
+                                    >
+                                        IP
+                                    </th>
+                                    <th
+                                        style="
+                                            padding: 12px 15px;
+                                            text-align: left;
+                                            font-weight: 600;
+                                        "
+                                    >
+                                        Country
+                                    </th>
+                                    <th
+                                        style="
+                                            padding: 12px 15px;
+                                            text-align: left;
+                                            font-weight: 600;
+                                        "
+                                    >
+                                        Date/Time
+                                    </th>
+                                    <th
+                                        style="
+                                            padding: 12px 15px;
+                                            border-radius: 0 8px 8px 0;
+                                            text-align: left;
+                                            font-weight: 600;
+                                        "
+                                    >
+                                        Session
+                                    </th>
                                 </tr>
                             </thead>
                             <tbody>
-                                <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;">
-                                        <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>
+                                <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;">
+                                        <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>
@@ -198,100 +868,113 @@
         </div>
         <!-- End Dashboard Stats Section -->
 
-        <!-- Add custom styles for tab switching and fixes -->
+        <!--
+        =====================================
+          Custom Styles for Hover‐effects & Fixes
+        =====================================
+        -->
         <style>
-            /* Fix for stat cards hover effect */
+            /* Rounded Card Helper */
+            .rounded-card {
+                border-radius: 20px;
+                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+            }
+
+            /* Hover effect for stat cards */
             .stat-card-wrapper {
                 transform: translateY(0);
                 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             }
-            
-            .stat-card-wrapper:hover {
-                transform: translateY(-10px) scale(1.02);
+
+            .stat-card-wrapper:hover > .rounded-card {
+                transform: translateY(-8px) scale(1.01);
+                box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
             }
-            
-            .stat-card-wrapper:hover > div {
-                box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
-            }
-            
-            /* Tab styles */
-            .graph-tab {
-                cursor: pointer;
-            }
-            
-            .graph-tab:hover {
-                background: rgba(255,255,255,0.9) !important;
-                color: #667eea !important;
-                transform: translateY(-2px);
-                box-shadow: 0 4px 15px rgba(102,126,234,0.3);
-            }
-            
-            .graph-tab.active {
-                background: rgba(255,255,255,0.9) !important;
-                color: #667eea !important;
-                box-shadow: 0 4px 15px rgba(102,126,234,0.3);
-            }
-            
+
             /* SSH table hover */
             .ssh-login-row:hover {
                 background: #e9ecef !important;
             }
-            
+
             /* System stat cards hover */
-            .system-stat-card {
-                transition: all 0.3s ease;
-            }
-            
             .system-stat-card:hover {
                 transform: translateY(-5px);
-                box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important;
+                box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
             }
-            
-            /* Fix for webkit background clip */
+
+            /* Tab styles tweaks */
+            .graph-tab {
+                cursor: pointer;
+            }
+
+            .graph-tab:hover {
+                background: rgba(255, 255, 255, 0.9) !important;
+                color: #667eea !important;
+                transform: translateY(-2px);
+                box-shadow: 0 6px 18px rgba(102, 126, 234, 0.2);
+            }
+
+            .graph-tab.active {
+                background: rgba(255, 255, 255, 0.9) !important;
+                color: #667eea !important;
+                box-shadow: 0 6px 18px rgba(102, 126, 234, 0.2);
+            }
+
+            /* Fix for webkit background‐clip on the H2 text */
             h2 {
                 -webkit-background-clip: text !important;
                 -webkit-text-fill-color: transparent !important;
                 background-clip: text !important;
             }
-            
-            /* Ensure smooth transitions don't affect functionality */
-            canvas, .c100, .slice, .bar, .fill {
+
+            /* Disable transitions on chart elements so they render crisply */
+            canvas,
+            .c100,
+            .slice,
+            .bar,
+            .fill {
                 transition: none !important;
             }
         </style>
 
-        <!-- Chart.js CDN -->
+        <!-- Chart.js (unchanged) -->
         <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-        <!-- FontAwesome for icons -->
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+        <!-- FontAwesome for icons (unchanged) -->
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+        />
 
         <script>
-            // Handle tab switching - PRESERVED ORIGINAL FUNCTIONALITY
-            document.addEventListener('DOMContentLoaded', function() {
+            // Handle tab switching – PRESERVED EXACTLY AS-IS
+            document.addEventListener('DOMContentLoaded', function () {
                 var tabs = document.querySelectorAll('a[data-toggle="tab"]');
-                tabs.forEach(function(tab) {
-                    tab.addEventListener('click', function(e) {
+                tabs.forEach(function (tab) {
+                    tab.addEventListener('click', function (e) {
                         e.preventDefault();
-                        
+
                         // Remove active from all tabs and panes
-                        tabs.forEach(function(t) {
+                        tabs.forEach(function (t) {
                             t.classList.remove('active');
                             t.style.background = 'transparent';
                             t.style.color = 'rgba(255,255,255,0.8)';
                             t.style.transform = 'translateY(0)';
                             t.style.boxShadow = 'none';
                         });
-                        document.querySelectorAll('.tab-pane').forEach(function(pane) {
-                            pane.classList.remove('show', 'active');
-                        });
-                        
+                        document
+                            .querySelectorAll('.tab-pane')
+                            .forEach(function (pane) {
+                                pane.classList.remove('show', 'active');
+                            });
+
                         // Add active to clicked tab
                         this.classList.add('active');
                         this.style.background = 'rgba(255,255,255,0.9)';
                         this.style.color = '#667eea';
                         this.style.transform = 'translateY(-2px)';
-                        this.style.boxShadow = '0 4px 15px rgba(102,126,234,0.3)';
-                        
+                        this.style.boxShadow =
+                            '0 4px 15px rgba(102,126,234,0.3)';
+
                         // Show corresponding pane
                         var target = this.getAttribute('href');
                         var targetPane = document.querySelector(target);
@@ -300,19 +983,18 @@
                         }
                     });
                 });
-                
-                // Force traffic tab to be active on page load - PRESERVED ORIGINAL
-                setTimeout(function() {
+
+                // Force traffic tab to be active on page load – PRESERVED EXACTLY
+                setTimeout(function () {
                     var trafficTab = document.getElementById('traffic-tab');
                     if (trafficTab) {
                         trafficTab.click();
-                        console.log('Traffic tab manually activated on page load');
+                        console.log(
+                            'Traffic tab manually activated on page load'
+                        );
                     }
                 }, 100);
             });
         </script>
-
     </div>
-
-
-{% endblock %}
\ No newline at end of file
+{% endblock %}