improve home page design
This commit is contained in:
usmannasir
parent
aa53167d4c
commit
6c20354ebc
|
|
@ -22,7 +22,7 @@
|
|||
<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));"><i class="fa fa-globe"></i></div>
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -37,10 +37,10 @@
|
|||
<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)); color: #6f42c1;"><i class="fa fa-wordpress"></i></div>
|
||||
<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>
|
||||
<div style="font-size: 2.8rem; font-weight: 700; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.2); color: #6f42c1;">{$ totalWPSites $}</div>
|
||||
<div style="font-size: 1rem; opacity: 0.8; margin-top: 8px; font-weight: 500; color: #6f42c1;">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.8; margin-top: 8px; font-weight: 500;">WordPress Sites</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -52,10 +52,10 @@
|
|||
<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)); color: #17a2b8;"><i class="fa fa-database"></i></div>
|
||||
<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>
|
||||
<div style="font-size: 2.8rem; font-weight: 700; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.2); color: #17a2b8;">{$ totalDBs $}</div>
|
||||
<div style="font-size: 1rem; opacity: 0.8; margin-top: 8px; font-weight: 500; color: #17a2b8;">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.8; margin-top: 8px; font-weight: 500;">Total Databases</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -67,10 +67,10 @@
|
|||
<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)); color: #ff9800;"><i class="fa fa-envelope"></i></div>
|
||||
<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>
|
||||
<div style="font-size: 2.8rem; font-weight: 700; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.2); color: #ff9800;">{$ totalEmails $}</div>
|
||||
<div style="font-size: 1rem; opacity: 0.8; margin-top: 8px; font-weight: 500; color: #ff9800;">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.8; margin-top: 8px; font-weight: 500;">Total Emails</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -116,47 +116,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Recent SSH Logins Widget -->
|
||||
<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;">
|
||||
<i class="fa fa-terminal" style="font-size: 1.6rem; color: #667eea; margin-right: 12px;"></i>
|
||||
<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;">
|
||||
<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 recent SSH logins found.
|
||||
</div>
|
||||
<div ng-if="!loadingSSHLogins && sshLogins.length > 0" style="overflow-x: auto;">
|
||||
<table style="width: 100%; border-collapse: collapse;">
|
||||
<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>
|
||||
</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>
|
||||
</td>
|
||||
<td style="padding: 10px 15px; color: #555;">{$ login.date $}</td>
|
||||
<td style="padding: 10px 15px; color: #888;">{$ login.session $}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Graphs Section -->
|
||||
|
|
@ -166,17 +125,17 @@
|
|||
<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);">
|
||||
<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;">
|
||||
<i class="fa fa-exchange" style="margin-right: 8px;"></i> Traffic
|
||||
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;">
|
||||
<i class="fa fa-hdd-o" style="margin-right: 8px;"></i> Disk IO
|
||||
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;">
|
||||
<i class="fa fa-microchip" style="margin-right: 8px;"></i> CPU Usage
|
||||
CPU Usage
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -195,6 +154,47 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent SSH Logins Widget -->
|
||||
<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>
|
||||
<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 recent SSH logins found.
|
||||
</div>
|
||||
<div ng-if="!loadingSSHLogins && sshLogins.length > 0" style="overflow-x: auto;">
|
||||
<table style="width: 100%; border-collapse: collapse;">
|
||||
<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>
|
||||
</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>
|
||||
</td>
|
||||
<td style="padding: 10px 15px; color: #555;">{$ login.date $}</td>
|
||||
<td style="padding: 10px 15px; color: #888;">{$ login.session $}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Dashboard Stats Section -->
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue