mirror
/
cyberpanel
mirror of https://github.com/usmannasir/cyberpanel.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

improve home page design

This commit is contained in:
usmannasir 2025-06-02 01:37:10 +05:00
parent 7e8ce0b218
commit aa53167d4c
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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