From ad1ef9dc55a559f33479ce865b08d283f6dd5e11 Mon Sep 17 00:00:00 2001
From: usmannasir <usman@cyberpersons.com>
Date: Sun, 25 May 2025 01:09:32 +0500
Subject: [PATCH] improve home page design

---
 .../templates/baseTemplate/homePage.html      | 124 ++++++------------
 1 file changed, 43 insertions(+), 81 deletions(-)

diff --git a/baseTemplate/templates/baseTemplate/homePage.html b/baseTemplate/templates/baseTemplate/homePage.html
index bcb9ea2f0..d9bccef1f 100755
--- a/baseTemplate/templates/baseTemplate/homePage.html
+++ b/baseTemplate/templates/baseTemplate/homePage.html
@@ -13,89 +13,84 @@
         </div>
 
         <!-- Dashboard Stats Section -->
-        <div ng-controller="dashboardStatsController" style="margin-bottom: 40px;">
+        <div ng-controller="dashboardStatsController" style="margin-bottom: 30px;">
             <!-- Info Cards Row -->
-            <div style="display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 35px;">
+            <div style="display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 30px;">
                 <!-- Total Sites Card -->
-                <a href="{% url 'listWebsites' %}" class="dashboard-card" style="flex: 1; min-width: 220px; max-width: 320px; text-decoration: none; transition: all 0.3s ease;">
-                    <div style="background: linear-gradient(135deg, #007bff 0%, #00c6ff 100%); color: #fff; padding: 25px; border-radius: 20px; box-shadow: 0 8px 25px rgba(0,123,255,0.15); height: 100%; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease;">
-                        <div style="position: absolute; top: -50px; right: -50px; width: 100px; height: 100px; background: rgba(255,255,255,0.1); border-radius: 50%; transition: all 0.3s ease;"></div>
-                        <div style="display: flex; align-items: center; position: relative; z-index: 2;">
-                            <div style="font-size: 2.8rem; margin-right: 18px; opacity: 0.9; transition: transform 0.3s ease;"><i class="fa fa-globe"></i></div>
+                <a href="{% url 'listWebsites' %}" style="flex: 1; min-width: 200px; max-width: 300px; text-decoration: none;">
+                    <div style="background: linear-gradient(135deg, #007bff 0%, #00c6ff 100%); color: #fff; padding: 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,123,255,0.3); height: 100%; cursor: pointer;">
+                        <div style="display: flex; align-items: center;">
+                            <div style="font-size: 2.5rem; margin-right: 15px; opacity: 0.9;"><i class="fa fa-globe"></i></div>
                             <div>
-                                <div style="font-size: 2.8rem; font-weight: 700; line-height: 1; margin-bottom: 5px;">{$ totalSites $}</div>
-                                <div style="font-size: 1rem; opacity: 0.9; font-weight: 500;">Total Sites</div>
+                                <div style="font-size: 2.5rem; font-weight: bold; line-height: 1;">{$ totalSites $}</div>
+                                <div style="font-size: 0.95rem; opacity: 0.85; margin-top: 5px;">Total Sites</div>
                             </div>
                         </div>
                     </div>
                 </a>
                 <!-- WordPress Sites Card -->
-                <a href="{% url 'ListWPSites' %}?wp=1" class="dashboard-card" style="flex: 1; min-width: 220px; max-width: 320px; text-decoration: none; transition: all 0.3s ease;">
-                    <div style="background: linear-gradient(135deg, #6f42c1 0%, #b993ff 100%); color: #fff; padding: 25px; border-radius: 20px; box-shadow: 0 8px 25px rgba(111,66,193,0.15); height: 100%; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease;">
-                        <div style="position: absolute; top: -50px; right: -50px; width: 100px; height: 100px; background: rgba(255,255,255,0.1); border-radius: 50%; transition: all 0.3s ease;"></div>
-                        <div style="display: flex; align-items: center; position: relative; z-index: 2;">
-                            <div style="font-size: 2.8rem; margin-right: 18px; opacity: 0.9; transition: transform 0.3s ease;"><i class="fa fa-wordpress"></i></div>
+                <a href="{% url 'ListWPSites' %}?wp=1" style="flex: 1; min-width: 200px; max-width: 300px; text-decoration: none;">
+                    <div style="background: linear-gradient(135deg, #6f42c1 0%, #b993ff 100%); color: #fff; padding: 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(111,66,193,0.3); height: 100%; cursor: pointer;">
+                        <div style="display: flex; align-items: center;">
+                            <div style="font-size: 2.5rem; margin-right: 15px; opacity: 0.9;"><i class="fa fa-wordpress"></i></div>
                             <div>
-                                <div style="font-size: 2.8rem; font-weight: 700; line-height: 1; margin-bottom: 5px;">{$ totalWPSites $}</div>
-                                <div style="font-size: 1rem; opacity: 0.9; font-weight: 500;">WordPress Sites</div>
+                                <div style="font-size: 2.5rem; font-weight: bold; line-height: 1;">{$ totalWPSites $}</div>
+                                <div style="font-size: 0.95rem; opacity: 0.85; margin-top: 5px;">WordPress Sites</div>
                             </div>
                         </div>
                     </div>
                 </a>
                 <!-- Total Databases Card -->
-                <a href="{% url 'listDBs' %}" class="dashboard-card" style="flex: 1; min-width: 220px; max-width: 320px; text-decoration: none; transition: all 0.3s ease;">
-                    <div style="background: linear-gradient(135deg, #17a2b8 0%, #6fe7dd 100%); color: #fff; padding: 25px; border-radius: 20px; box-shadow: 0 8px 25px rgba(23,162,184,0.15); height: 100%; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease;">
-                        <div style="position: absolute; top: -50px; right: -50px; width: 100px; height: 100px; background: rgba(255,255,255,0.1); border-radius: 50%; transition: all 0.3s ease;"></div>
-                        <div style="display: flex; align-items: center; position: relative; z-index: 2;">
-                            <div style="font-size: 2.8rem; margin-right: 18px; opacity: 0.9; transition: transform 0.3s ease;"><i class="fa fa-database"></i></div>
+                <a href="{% url 'listDBs' %}" style="flex: 1; min-width: 200px; max-width: 300px; text-decoration: none;">
+                    <div style="background: linear-gradient(135deg, #17a2b8 0%, #6fe7dd 100%); color: #fff; padding: 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(23,162,184,0.3); height: 100%; cursor: pointer;">
+                        <div style="display: flex; align-items: center;">
+                            <div style="font-size: 2.5rem; margin-right: 15px; opacity: 0.9;"><i class="fa fa-database"></i></div>
                             <div>
-                                <div style="font-size: 2.8rem; font-weight: 700; line-height: 1; margin-bottom: 5px;">{$ totalDBs $}</div>
-                                <div style="font-size: 1rem; opacity: 0.9; font-weight: 500;">Total Databases</div>
+                                <div style="font-size: 2.5rem; font-weight: bold; line-height: 1;">{$ totalDBs $}</div>
+                                <div style="font-size: 0.95rem; opacity: 0.85; margin-top: 5px;">Total Databases</div>
                             </div>
                         </div>
                     </div>
                 </a>
                 <!-- Total Emails Card -->
-                <a href="{% url 'listEmails' %}" class="dashboard-card" style="flex: 1; min-width: 220px; max-width: 320px; text-decoration: none; transition: all 0.3s ease;">
-                    <div style="background: linear-gradient(135deg, #ff9800 0%, #ffc107 100%); color: #fff; padding: 25px; border-radius: 20px; box-shadow: 0 8px 25px rgba(255,152,0,0.15); height: 100%; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease;">
-                        <div style="position: absolute; top: -50px; right: -50px; width: 100px; height: 100px; background: rgba(255,255,255,0.1); border-radius: 50%; transition: all 0.3s ease;"></div>
-                        <div style="display: flex; align-items: center; position: relative; z-index: 2;">
-                            <div style="font-size: 2.8rem; margin-right: 18px; opacity: 0.9; transition: transform 0.3s ease;"><i class="fa fa-envelope"></i></div>
+                <a href="{% url 'listEmails' %}" style="flex: 1; min-width: 200px; max-width: 300px; text-decoration: none;">
+                    <div style="background: linear-gradient(135deg, #ff9800 0%, #ffc107 100%); color: #fff; padding: 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(255,152,0,0.3); height: 100%; cursor: pointer;">
+                        <div style="display: flex; align-items: center;">
+                            <div style="font-size: 2.5rem; margin-right: 15px; opacity: 0.9;"><i class="fa fa-envelope"></i></div>
                             <div>
-                                <div style="font-size: 2.8rem; font-weight: 700; line-height: 1; margin-bottom: 5px;">{$ totalEmails $}</div>
-                                <div style="font-size: 1rem; opacity: 0.9; font-weight: 500;">Total Emails</div>
+                                <div style="font-size: 2.5rem; font-weight: bold; line-height: 1;">{$ totalEmails $}</div>
+                                <div style="font-size: 0.95rem; opacity: 0.85; margin-top: 5px;">Total Emails</div>
                             </div>
                         </div>
                     </div>
                 </a>
             </div>
             
-            <!-- Enhanced Graphs Section -->
-            <div style="background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%); border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); padding: 30px; border: 1px solid rgba(0,0,0,0.06);">
-                <!-- Enhanced Tab Navigation -->
-                <div style="text-align: center; margin-bottom: 25px;">
-                    <h3 style="margin: 0 0 20px 0; color: #2c3e50; font-weight: 600; font-size: 1.4rem;">System Monitoring</h3>
-                    <ul style="list-style: none; padding: 0; margin: 0; display: inline-flex; background: linear-gradient(145deg, #f1f3f4 0%, #e8eaed 100%); border-radius: 15px; padding: 8px; gap: 8px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.1);">
+            <!-- Graphs Section -->
+            <div style="background: #fff; border-radius: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); padding: 25px;">
+                <!-- Tab Navigation -->
+                <div style="text-align: center; margin-bottom: 20px;">
+                    <ul style="list-style: none; padding: 0; margin: 0; display: inline-flex; background: #f5f7fa; border-radius: 10px; padding: 5px; gap: 5px;">
                         <li style="display: inline-block;">
-                            <a href="#traffic" id="traffic-tab" data-toggle="tab" style="display: block; padding: 14px 28px; background: linear-gradient(145deg, #007bff 0%, #0056b3 100%); color: white; border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(0,123,255,0.3);">
-                                <i class="fa fa-exchange" style="margin-right: 8px;"></i>Traffic
+                            <a href="#traffic" id="traffic-tab" data-toggle="tab" style="display: block; padding: 12px 24px; background: #007bff; color: white; border-radius: 8px; text-decoration: none; font-weight: 500; transition: all 0.3s;">
+                                <i class="fa fa-exchange"></i> Traffic
                             </a>
                         </li>
                         <li style="display: inline-block;">
-                            <a href="#diskio" id="diskio-tab" data-toggle="tab" style="display: block; padding: 14px 28px; background: transparent; color: #6c757d; border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);">
-                                <i class="fa fa-hdd-o" style="margin-right: 8px;"></i>Disk IO
+                            <a href="#diskio" id="diskio-tab" data-toggle="tab" style="display: block; padding: 12px 24px; background: transparent; color: #6c757d; border-radius: 8px; text-decoration: none; font-weight: 500; transition: all 0.3s;">
+                                <i class="fa fa-hdd-o"></i> Disk IO
                             </a>
                         </li>
                         <li style="display: inline-block;">
-                            <a href="#cpu" id="cpu-tab" data-toggle="tab" style="display: block; padding: 14px 28px; background: transparent; color: #6c757d; border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);">
-                                <i class="fa fa-microchip" style="margin-right: 8px;"></i>CPU Usage
+                            <a href="#cpu" id="cpu-tab" data-toggle="tab" style="display: block; padding: 12px 24px; background: transparent; color: #6c757d; border-radius: 8px; text-decoration: none; font-weight: 500; transition: all 0.3s;">
+                                <i class="fa fa-microchip"></i> CPU Usage
                             </a>
                         </li>
                     </ul>
                 </div>
                 
-                <!-- Enhanced Tab Content -->
-                <div class="tab-content" style="background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%); border-radius: 15px; padding: 25px; min-height: 320px; border: 1px solid rgba(0,0,0,0.08); box-shadow: inset 0 2px 8px rgba(0,0,0,0.03);">
+                <!-- Tab Content -->
+                <div class="tab-content" style="background: #f8f9fa; border-radius: 12px; padding: 20px; min-height: 300px; border: 1px solid #e9ecef;">
                     <div class="tab-pane fade show active" id="traffic" role="tabpanel">
                         <canvas id="trafficChart" height="80"></canvas>
                     </div>
@@ -110,52 +105,19 @@
         </div>
         <!-- End Dashboard Stats Section -->
 
-        <!-- Enhanced Styles -->
+        <!-- Add custom styles for tab switching -->
         <style>
-            .dashboard-card:hover div:first-child {
-                transform: translateY(-8px) scale(1.02);
-                box-shadow: 0 15px 40px rgba(0,0,0,0.15);
-            }
-            .dashboard-card:hover div:first-child > div:first-child {
-                transform: scale(1.1) rotate(5deg);
-            }
-            .dashboard-card:hover div:first-child > div:last-child {
-                transform: scale(1.1);
-            }
-            
             #dashboardGraphTabs a[data-toggle="tab"] {
                 cursor: pointer;
             }
             #dashboardGraphTabs a[data-toggle="tab"]:hover {
-                background: linear-gradient(145deg, #e3f2fd 0%, #bbdefb 100%) !important;
-                color: #1976d2 !important;
-                transform: translateY(-2px);
-                box-shadow: 0 6px 20px rgba(0,0,0,0.1);
+                background: #e9ecef !important;
+                color: #495057 !important;
             }
             #dashboardGraphTabs a[data-toggle="tab"].active {
-                background: linear-gradient(145deg, #007bff 0%, #0056b3 100%) !important;
+                background: #007bff !important;
                 color: white !important;
-                box-shadow: 0 4px 12px rgba(0,123,255,0.3);
             }
-            
-            @keyframes fadeInUp {
-                from {
-                    opacity: 0;
-                    transform: translateY(30px);
-                }
-                to {
-                    opacity: 1;
-                    transform: translateY(0);
-                }
-            }
-            
-            .dashboard-card {
-                animation: fadeInUp 0.6s ease-out;
-            }
-            .dashboard-card:nth-child(1) { animation-delay: 0.1s; }
-            .dashboard-card:nth-child(2) { animation-delay: 0.2s; }
-            .dashboard-card:nth-child(3) { animation-delay: 0.3s; }
-            .dashboard-card:nth-child(4) { animation-delay: 0.4s; }
         </style>
 
         <!-- Chart.js CDN -->