mirror of
https://github.com/usmannasir/cyberpanel.git
synced 2026-06-16 03:21:30 +02:00
improve home page design
This commit is contained in:
usmannasir
@@ -65,7 +65,47 @@
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
{% if admin %}
|
||||
<div ng-controller="homePageStatus" style="margin-bottom: 30px;">
|
||||
<div style="display: flex; justify-content: center; gap: 30px; align-items: stretch;">
|
||||
<!-- CPU Usage -->
|
||||
<div style="background: #fff; border-radius: 15px; box-shadow: 0 2px 10px rgba(255,0,0,0.08); padding: 20px 30px; min-width: 180px; text-align: center;">
|
||||
<div style="font-size: 1.1rem; color: #e53935; font-weight: 600; margin-bottom: 10px;">{% trans "CPU Usage" %}</div>
|
||||
<div id="redcircle" class="c100 red cpu" style="margin: 0 auto;">
|
||||
<span>{$ cpuUsage $}%</span>
|
||||
<div class="slice">
|
||||
<div class="bar"></div>
|
||||
<div class="fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- RAM Usage -->
|
||||
<div style="background: #fff; border-radius: 15px; box-shadow: 0 2px 10px rgba(76,175,80,0.08); padding: 20px 30px; min-width: 180px; text-align: center;">
|
||||
<div style="font-size: 1.1rem; color: #43a047; font-weight: 600; margin-bottom: 10px;">{% trans "Ram Usage" %}</div>
|
||||
<div id="greencircle" class="c100 p0 green ram" style="margin: 0 auto;">
|
||||
<span>{$ ramUsage $}%</span>
|
||||
<div class="slice">
|
||||
<div class="bar"></div>
|
||||
<div class="fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Disk Usage -->
|
||||
<div style="background: #fff; border-radius: 15px; box-shadow: 0 2px 10px rgba(233,30,99,0.08); padding: 20px 30px; min-width: 180px; text-align: center;">
|
||||
<div style="font-size: 1.1rem; color: #d81b60; font-weight: 600; margin-bottom: 10px;">{% trans "Disk Usage '/'" %}</div>
|
||||
<div id="pinkcircle" class="c100 pink disk" style="margin: 0 auto;">
|
||||
<span>{$ diskUsage $}%</span>
|
||||
<div class="slice">
|
||||
<div class="bar"></div>
|
||||
<div class="fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Graphs Section -->
|
||||
<div style="background: #fff; border-radius: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); padding: 25px;">
|
||||
<!-- Tab Navigation -->
|
||||
@@ -168,265 +208,6 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<!--- Hide statistics for non-admins--->
|
||||
<div class="mx-10 col-lg-9 panel col-md-push-50">
|
||||
<div class="panel-body">
|
||||
<h3 class="content-box-header">
|
||||
{% trans "Available Functions" %}
|
||||
</h3>
|
||||
|
||||
<div class="example-box-wrapper mt-5">
|
||||
<div class="row mx-5">
|
||||
<div class="col-md-4">
|
||||
<a href="{% url 'loadUsersHome' %}" title="{% trans 'User Functions' %}"
|
||||
class="tile-box tile-box-shortcut btn-primary">
|
||||
<div class="tile-header">
|
||||
{% trans "Users" %}
|
||||
</div>
|
||||
<div class="tile-content-wrapper">
|
||||
<i class="fa fa-users"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<a href="{% url 'loadWebsitesHome' %}" title="{% trans 'Website Functions' %}"
|
||||
class="tile-box tile-box-shortcut btn-primary">
|
||||
<div class="tile-header">
|
||||
{% trans "Websites" %}
|
||||
</div>
|
||||
<div class="tile-content-wrapper">
|
||||
<i class="fa fa-globe"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<a href="{% url 'packagesHome' %}" title="{% trans 'Add/Modify Packages' %}"
|
||||
class="tile-box tile-box-shortcut btn-primary">
|
||||
<div class="tile-header">
|
||||
{% trans "Packages" %}
|
||||
</div>
|
||||
<div class="tile-content-wrapper">
|
||||
<i class="fa fa-cubes"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<a href="{% url 'loadDatabaseHome' %}" title="{% trans 'Database Functions' %}"
|
||||
class="tile-box tile-box-shortcut btn-primary">
|
||||
<div class="tile-header">
|
||||
{% trans "Databases" %}
|
||||
</div>
|
||||
<div class="tile-content-wrapper">
|
||||
<i class="fa fa-database"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<a href="{% url 'dnsHome' %}" title="{% trans 'Control DNS' %}"
|
||||
class="tile-box tile-box-shortcut btn-primary">
|
||||
<div class="tile-header">
|
||||
{% trans "DNS" %}
|
||||
</div>
|
||||
<div class="tile-content-wrapper">
|
||||
<i class="fa fa-sitemap"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<a href="{% url 'loadFTPHome' %}" title="{% trans 'FTP Functions' %}"
|
||||
class="tile-box tile-box-shortcut btn-primary">
|
||||
<div class="tile-header">
|
||||
{% trans "FTP" %}
|
||||
</div>
|
||||
<div class="tile-content-wrapper">
|
||||
<i class="fa fa-cloud-upload"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<a href="{% url 'loadBackupHome' %}" title="{% trans 'Backup' %}"
|
||||
class="tile-box tile-box-shortcut btn-primary">
|
||||
<div class="tile-header">
|
||||
{% trans "Backup" %}
|
||||
</div>
|
||||
<div class="tile-content-wrapper">
|
||||
<i class="fa fa-clone"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<a href="{% url 'loadEmailHome' %}" title="{% trans 'Emails' %}"
|
||||
class="tile-box tile-box-shortcut btn-primary">
|
||||
<div class="tile-header">
|
||||
{% trans "Emails" %}
|
||||
</div>
|
||||
<div class="tile-content-wrapper">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<a href="{% url 'loadSSLHome' %}" title="{% trans 'SSL' %}"
|
||||
class="tile-box tile-box-shortcut btn-primary">
|
||||
<div class="tile-header">
|
||||
{% trans "SSL" %}
|
||||
</div>
|
||||
<div class="tile-content-wrapper">
|
||||
<i class="fa fa-expeditedssl"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% if admin %}
|
||||
|
||||
<div class="col-md-4">
|
||||
<a href="{% url 'serverStatusHome' %}" title="{% trans 'Server Status' %}"
|
||||
class="tile-box tile-box-shortcut btn-primary">
|
||||
<div class="tile-header">
|
||||
{% trans "Status" %}
|
||||
</div>
|
||||
<div class="tile-content-wrapper">
|
||||
<i class="fa fa-server"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<a href="{% url 'loadPHPHome' %}" title="{% trans 'PHP Configurations' %}"
|
||||
class="tile-box tile-box-shortcut btn-primary">
|
||||
<div class="tile-header">
|
||||
{% trans "PHP" %}
|
||||
</div>
|
||||
<div class="tile-content-wrapper">
|
||||
<i class="fa fa-code"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<a href="{% url 'logsHome' %}" title="{% trans 'Logs' %}"
|
||||
class="tile-box tile-box-shortcut btn-primary">
|
||||
<div class="tile-header">
|
||||
{% trans "Logs" %}
|
||||
</div>
|
||||
<div class="tile-content-wrapper">
|
||||
<i class="fa fa-file"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<a href="{% url 'securityHome' %}" title="{% trans 'Security' %}"
|
||||
class="tile-box tile-box-shortcut btn-primary">
|
||||
<div class="tile-header">
|
||||
{% trans "Security" %}
|
||||
</div>
|
||||
<div class="tile-content-wrapper">
|
||||
<i class="fa fa-shield"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{% if admin %}
|
||||
<div ng-controller="homePageStatus" class="">
|
||||
<div class="mx-10 col-md-2 panel panel-body col-md-pull-50">
|
||||
<h3 class="content-box-header">
|
||||
{% trans "Resources" %}
|
||||
</h3>
|
||||
|
||||
<div class="example-box-wrapper">
|
||||
|
||||
<div class="row mx-5">
|
||||
<div class="">
|
||||
<div class="mb-10">
|
||||
<h3 class="title-hero clearfix text-center text-muted">
|
||||
{% trans "CPU Usage" %}
|
||||
</h3>
|
||||
<div class="content-box-wrapper">
|
||||
<div class="row flex">
|
||||
<div class="align-center">
|
||||
<div id="redcircle" class="c100 red cpu">
|
||||
<span>{$ cpuUsage $}%</span>
|
||||
<div class="slice">
|
||||
<div class="bar"></div>
|
||||
<div class="fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<div class="mb-10">
|
||||
<h3 class="title-hero clearfix text-center text-muted">
|
||||
{% trans "Ram Usage" %}
|
||||
</h3>
|
||||
<div class="content-box-wrapper">
|
||||
<div class="row flex">
|
||||
<div class="align-center">
|
||||
<div id="greencircle" class="c100 p0 green ram">
|
||||
<span>{$ ramUsage $}%</span>
|
||||
<div class="slice">
|
||||
<div class="bar"></div>
|
||||
<div class="fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<div class="mb-10">
|
||||
<h3 class="title-hero clearfix text-center text-muted">
|
||||
{% trans "Disk Usage '/'" %}
|
||||
</h3>
|
||||
<div class="content-box-wrapper">
|
||||
<div class="row flex">
|
||||
<div class="align-center">
|
||||
<div id="pinkcircle" class="c100 pink disk">
|
||||
<span>{$ diskUsage $}%</span>
|
||||
<div class="slice">
|
||||
<div class="bar"></div>
|
||||
<div class="fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -426,6 +426,8 @@ def RestartCyberPanel(request):
|
||||
|
||||
def getDashboardStats(request):
|
||||
try:
|
||||
val = request.session['userID']
|
||||
currentACL = ACLManager.loadedACL(val)
|
||||
total_sites = Websites.objects.count()
|
||||
total_wp_sites = WPSites.objects.count()
|
||||
total_dbs = Databases.objects.count()
|
||||
@@ -443,6 +445,8 @@ def getDashboardStats(request):
|
||||
|
||||
def getTrafficStats(request):
|
||||
try:
|
||||
val = request.session['userID']
|
||||
currentACL = ACLManager.loadedACL(val)
|
||||
# Get network stats from /proc/net/dev (Linux)
|
||||
rx = tx = 0
|
||||
with open('/proc/net/dev', 'r') as f:
|
||||
@@ -464,6 +468,8 @@ def getTrafficStats(request):
|
||||
|
||||
def getDiskIOStats(request):
|
||||
try:
|
||||
val = request.session['userID']
|
||||
currentACL = ACLManager.loadedACL(val)
|
||||
# Parse /proc/diskstats for all disks
|
||||
read_sectors = 0
|
||||
write_sectors = 0
|
||||
@@ -491,6 +497,8 @@ def getDiskIOStats(request):
|
||||
|
||||
def getCPULoadGraph(request):
|
||||
try:
|
||||
val = request.session['userID']
|
||||
currentACL = ACLManager.loadedACL(val)
|
||||
# Parse /proc/stat for the 'cpu' line
|
||||
with open('/proc/stat', 'r') as f:
|
||||
for line in f:
|
||||
|
||||
Reference in New Issue
Block a user