Nemcio/CyberPanel
1
0
Fork 0
mirror of https://github.com/usmannasir/cyberpanel.git synced 2025-11-17 02:31:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

improve home page design

Browse Source
This commit is contained in:
usmannasir
2025-05-25 01:09:32 +05:00
parent 1ea8be7f47
commit ad1ef9dc55
1 changed files with 43 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
baseTemplate/templates/baseTemplate/homePage.html
View File

@@ -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 -->