mirror of
https://github.com/usmannasir/cyberpanel.git
synced 2026-08-05 17:00:52 +02:00
1805 lines
63 KiB
HTML
1805 lines
63 KiB
HTML
{% load i18n %}
|
|
{% get_current_language as LANGUAGE_CODE %}
|
|
<!DOCTYPE html>
|
|
<html lang="en" ng-app="CyberCP">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}CyberPanel{% endblock %}</title>
|
|
|
|
{% load static %}
|
|
<link rel="icon" type="image/x-icon" href="{% static 'baseTemplate/assets/finalBase/favicon.png' %}">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" type="text/css" href="{% static 'baseTemplate/assets/bootstrap/css/bootstrap.min.css' %}">
|
|
<link rel="stylesheet" type="text/css" href="{% static 'baseTemplate/bootstrap-toggle.min.css' %}">
|
|
|
|
<!-- Core Scripts -->
|
|
<script src="{% static 'baseTemplate/angularjs.1.6.5.js' %}"></script>
|
|
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
|
|
<!-- Bootstrap JavaScript -->
|
|
|
|
<script src="{% static 'baseTemplate/assets/bootstrap/js/bootstrap.min.js' %}"></script>
|
|
<script src="{% static 'baseTemplate/bootstrap-toggle.min.js' %}"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/qrious/dist/qrious.min.js"></script>
|
|
<script src="{% static 'baseTemplate/custom-js/system-status.js' %}"></script>
|
|
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<!-- Chart.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<!-- PNotify -->
|
|
<link rel="stylesheet" type="text/css" href="{% static 'baseTemplate/custom-js/pnotify.custom.min.css' %}">
|
|
<script src="{% static 'baseTemplate/custom-js/pnotify.custom.min.js' %}"></script>
|
|
|
|
<!-- Modern Design System -->
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background: #f0f0ff;
|
|
color: #2f3640;
|
|
overflow-x: hidden;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Header */
|
|
#header {
|
|
background: white;
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 30px;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 260px;
|
|
right: 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#header .logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
#header .logo-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(88,86,214,0.3);
|
|
}
|
|
|
|
#header .logo-icon img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
#header .logo-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#header .logo-text .brand {
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
}
|
|
|
|
#header .logo-text .tagline {
|
|
font-size: 14px;
|
|
color: #94a3b8;
|
|
font-weight: 400;
|
|
margin-top: -2px;
|
|
}
|
|
|
|
#header-right {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 25px;
|
|
}
|
|
|
|
#header-right .info-text {
|
|
color: #94a3b8;
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
#header-right .social-links {
|
|
display: flex;
|
|
gap: 15px;
|
|
}
|
|
|
|
#header-right .social-links a {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: transparent;
|
|
color: #94a3b8;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
font-size: 20px;
|
|
}
|
|
|
|
#header-right .social-links a:hover {
|
|
background: #5856d6;
|
|
color: white;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(88,86,214,0.3);
|
|
}
|
|
|
|
#header-right .logout-btn {
|
|
background: transparent;
|
|
color: #5856d6;
|
|
border: none;
|
|
padding: 10px 24px;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 15px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#header-right .logout-btn:hover {
|
|
background: #5856d6;
|
|
color: white;
|
|
box-shadow: 0 5px 15px rgba(88,86,214,0.3);
|
|
}
|
|
|
|
/* Sidebar */
|
|
#sidebar {
|
|
width: 260px;
|
|
background: #f3f1ff;
|
|
height: 100vh;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
overflow-y: auto;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.sidebar-logo {
|
|
padding: 20px;
|
|
background: white;
|
|
margin: 15px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.sidebar-logo .logo-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar-logo .logo-icon img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.sidebar-logo .logo-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
|
|
.sidebar-logo .logo-text .brand {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #2f3640;
|
|
}
|
|
|
|
.sidebar-logo .logo-text .tagline {
|
|
font-size: 11px;
|
|
color: #94a3b8;
|
|
font-weight: 400;
|
|
}
|
|
|
|
|
|
#sidebar .server-info {
|
|
padding: 15px;
|
|
background: white;
|
|
margin: 15px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
#sidebar .server-info .server-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: #e8e6ff;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #5856d6;
|
|
font-size: 18px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#sidebar .server-info .server-details {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
|
|
#sidebar .server-info .info-line {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#sidebar .server-info .info-line strong {
|
|
color: #2f3640;
|
|
font-weight: 600;
|
|
margin-right: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#sidebar .server-info .ip-value {
|
|
color: #5856d6;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
#sidebar .server-info .ip-value:hover {
|
|
color: #4644c0;
|
|
}
|
|
|
|
#sidebar .server-info .ip-value::after {
|
|
content: '\f0c5';
|
|
font-family: 'Font Awesome 6 Free';
|
|
font-weight: 900;
|
|
margin-left: 5px;
|
|
font-size: 11px;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
#sidebar .server-info .ip-value:hover::after {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.copy-tooltip {
|
|
position: absolute;
|
|
background: #2f3640;
|
|
color: white;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
top: -25px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s ease;
|
|
white-space: nowrap;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.copy-tooltip.show {
|
|
opacity: 1;
|
|
}
|
|
|
|
#sidebar .section-header {
|
|
background: #5856d6;
|
|
color: white;
|
|
padding: 8px 15px;
|
|
margin: 15px;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.8px;
|
|
font-weight: 700;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
#sidebar .menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 15px;
|
|
color: #64748b;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
gap: 12px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
border-radius: 8px;
|
|
margin: 2px 15px;
|
|
background: white;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
#sidebar .menu-item:hover {
|
|
background: #f8f9ff;
|
|
color: #5856d6;
|
|
box-shadow: 0 2px 8px rgba(88,86,214,0.1);
|
|
}
|
|
|
|
#sidebar .menu-item.active {
|
|
background: #5856d6;
|
|
color: white;
|
|
box-shadow: 0 3px 10px rgba(88,86,214,0.3);
|
|
}
|
|
|
|
#sidebar .menu-item.active i {
|
|
color: white;
|
|
}
|
|
|
|
#sidebar .menu-item .icon-wrapper {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: #e8e6ff;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#sidebar .menu-item:hover .icon-wrapper {
|
|
background: #e8e6ff;
|
|
}
|
|
|
|
#sidebar .menu-item.active .icon-wrapper {
|
|
background: rgba(255,255,255,0.2);
|
|
}
|
|
|
|
#sidebar .menu-item i {
|
|
font-size: 18px;
|
|
color: #5856d6;
|
|
}
|
|
|
|
#sidebar .menu-item.active i {
|
|
color: white;
|
|
}
|
|
|
|
#sidebar .menu-item span {
|
|
flex: 1;
|
|
}
|
|
|
|
#sidebar .menu-item .badge {
|
|
background: #ff9500;
|
|
color: white;
|
|
font-size: 10px;
|
|
padding: 3px 8px;
|
|
border-radius: 6px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
#sidebar .menu-item .chevron {
|
|
margin-left: auto;
|
|
font-size: 12px;
|
|
transition: transform 0.3s ease;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
#sidebar .menu-item.expanded .chevron {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
#sidebar .submenu {
|
|
display: none;
|
|
padding: 10px 15px 10px 15px;
|
|
}
|
|
|
|
#sidebar .submenu.show {
|
|
display: block;
|
|
}
|
|
|
|
#sidebar .submenu .menu-item {
|
|
padding: 12px 16px;
|
|
font-size: 14px;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
background: white;
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
}
|
|
|
|
#sidebar .submenu .menu-item:hover {
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
|
|
}
|
|
|
|
#sidebar .submenu .menu-item.delete {
|
|
background: #ef4444;
|
|
color: white;
|
|
}
|
|
|
|
#sidebar .submenu .menu-item.delete:hover {
|
|
background: #dc2626;
|
|
}
|
|
|
|
#sidebar .submenu .menu-item .icon-wrapper {
|
|
display: none;
|
|
}
|
|
|
|
#sidebar .submenu .menu-item i {
|
|
font-size: 6px;
|
|
width: auto;
|
|
margin-right: 10px;
|
|
color: white;
|
|
}
|
|
|
|
/* Main Content */
|
|
#main-content {
|
|
margin-left: 260px;
|
|
padding: 110px 30px 30px;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Notification Banner */
|
|
.notification-banner {
|
|
position: fixed;
|
|
top: 80px;
|
|
left: 260px;
|
|
right: 0;
|
|
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
|
border-bottom: 1px solid #f59e0b;
|
|
padding: 12px 30px;
|
|
z-index: 999;
|
|
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
|
|
animation: slideDown 0.3s ease-out;
|
|
display: none; /* Hidden by default */
|
|
}
|
|
|
|
.notification-banner.show {
|
|
display: block;
|
|
}
|
|
|
|
.notification-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.notification-icon {
|
|
color: #d97706;
|
|
font-size: 1.25rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.notification-text {
|
|
flex: 1;
|
|
color: #92400e;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.configure-link {
|
|
color: #d97706;
|
|
font-weight: 600;
|
|
text-decoration: underline;
|
|
margin-left: 0.5rem;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.configure-link:hover {
|
|
color: #b45309;
|
|
}
|
|
|
|
.notification-close {
|
|
background: transparent;
|
|
border: none;
|
|
color: #92400e;
|
|
font-size: 1.125rem;
|
|
cursor: pointer;
|
|
padding: 0.25rem;
|
|
transition: all 0.2s ease;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.notification-close:hover {
|
|
background: rgba(217, 119, 6, 0.1);
|
|
color: #b45309;
|
|
}
|
|
|
|
/* Adjust main content padding when notification is shown */
|
|
.notification-shown #main-content {
|
|
padding-top: 160px;
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
transform: translateY(-100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* AI Scanner Security Banner */
|
|
.ai-scanner-banner {
|
|
position: fixed;
|
|
top: 80px;
|
|
left: 260px;
|
|
right: 0;
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
|
|
border-bottom: 2px solid #4f46e5;
|
|
padding: 16px 30px;
|
|
z-index: 998;
|
|
box-shadow: 0 4px 20px rgba(99, 102, 241, 0.25);
|
|
animation: slideDown 0.4s ease-out;
|
|
display: none;
|
|
}
|
|
|
|
.ai-scanner-banner.show {
|
|
display: block;
|
|
}
|
|
|
|
.ai-scanner-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.ai-scanner-icon {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 12px;
|
|
padding: 12px;
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.ai-scanner-icon i {
|
|
color: white;
|
|
font-size: 1.5rem;
|
|
display: block;
|
|
}
|
|
|
|
.ai-scanner-text {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.ai-scanner-main-text {
|
|
color: white;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.ai-scanner-sub-text {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.ai-scanner-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.ai-scanner-btn {
|
|
background: white;
|
|
color: #4f46e5;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ai-scanner-btn:hover {
|
|
background: #f8fafc;
|
|
color: #4338ca;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.ai-scanner-btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.3), rgba(255,255,255,0.1));
|
|
transform: translateX(-100%);
|
|
transition: transform 0.6s ease;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.ai-scanner-btn:hover::before {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
.ai-scanner-btn i {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.ai-scanner-close {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
color: white;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
transition: all 0.2s ease;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.ai-scanner-close:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Adjust main content when AI scanner banner is shown */
|
|
.ai-scanner-shown #main-content {
|
|
padding-top: 180px;
|
|
}
|
|
|
|
/* Both banners shown */
|
|
.notification-shown.ai-scanner-shown #main-content {
|
|
padding-top: 220px;
|
|
}
|
|
|
|
.notification-shown .ai-scanner-banner {
|
|
top: 130px;
|
|
}
|
|
|
|
/* Mobile responsive styles for AI Scanner banner */
|
|
@media (max-width: 768px) {
|
|
.ai-scanner-banner {
|
|
left: 0;
|
|
padding: 12px 20px;
|
|
}
|
|
|
|
.ai-scanner-content {
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ai-scanner-text {
|
|
min-width: 200px;
|
|
}
|
|
|
|
.ai-scanner-main-text {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.ai-scanner-sub-text {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.ai-scanner-btn {
|
|
padding: 10px 20px;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.ai-scanner-icon {
|
|
padding: 10px;
|
|
}
|
|
|
|
.ai-scanner-icon i {
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.ai-scanner-content {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 12px;
|
|
}
|
|
|
|
.ai-scanner-actions {
|
|
justify-content: center;
|
|
}
|
|
|
|
.ai-scanner-close {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
}
|
|
}
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #5b5fcf;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #4b4fbf;
|
|
}
|
|
|
|
/* Mobile Menu Toggle */
|
|
#mobile-menu-toggle {
|
|
display: none;
|
|
background: #e8e6ff;
|
|
border: none;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
margin-right: 15px;
|
|
color: #5856d6;
|
|
font-size: 18px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#mobile-menu-toggle:hover {
|
|
background: #5856d6;
|
|
color: white;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
#mobile-menu-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#sidebar {
|
|
transform: translateX(-100%);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
#sidebar.show {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
#header {
|
|
left: 0;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
#main-content {
|
|
margin-left: 0;
|
|
padding: 100px 15px 30px;
|
|
}
|
|
|
|
#header .info-text {
|
|
display: none;
|
|
}
|
|
|
|
.notification-banner {
|
|
left: 0;
|
|
padding: 12px 15px;
|
|
}
|
|
|
|
.notification-shown #main-content {
|
|
padding-top: 140px;
|
|
}
|
|
|
|
.notification-text {
|
|
font-size: 0.813rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
{% block header_scripts %}{% endblock %}
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<div id="header">
|
|
<button id="mobile-menu-toggle" onclick="toggleSidebar()">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
<div class="logo">
|
|
<div class="logo-icon">
|
|
<img src="https://cyberpanel.net/wp-content/uploads/2025/04/cyberpanel-logo-icon_only.png" alt="CyberPanel Logo">
|
|
</div>
|
|
<div class="logo-text">
|
|
<div class="brand">CyberPanel</div>
|
|
<div class="tagline">Web Hosting Panel</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="header-right">
|
|
<div class="info-text">Connect with us — Watch tutorials, <a href="https://community.cyberpanel.net/" target="_blank" style="color: inherit; text-decoration: underline;">Join discussions</a>, and <a href="https://platform.cyberpersons.com/" target="_blank" style="color: inherit; text-decoration: underline;">get support</a>.</div>
|
|
<div class="social-links">
|
|
<a href="https://web.facebook.com/groups/cyberpanel" target="_blank" title="Facebook">
|
|
<i class="fab fa-facebook-f"></i>
|
|
</a>
|
|
<a href="https://www.youtube.com/@Cyber-Panel" target="_blank" title="YouTube">
|
|
<i class="fab fa-youtube"></i>
|
|
</a>
|
|
<a href="https://x.com/CyberPanel" target="_blank" title="X (Twitter)">
|
|
<i class="fab fa-twitter"></i>
|
|
</a>
|
|
</div>
|
|
<a href="{% url 'logout' %}" class="logout-btn">
|
|
<i class="fas fa-arrow-right-from-bracket"></i>
|
|
Logout
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div id="sidebar">
|
|
<div class="sidebar-logo">
|
|
<div class="logo-icon">
|
|
<img src="https://cyberpanel.net/wp-content/uploads/2025/04/cyberpanel-logo-icon_only.png" alt="CyberPanel Logo">
|
|
</div>
|
|
<div class="logo-text">
|
|
<div class="brand">CyberPanel</div>
|
|
<div class="tagline">Web Hosting Panel</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-header">OVERVIEW</div>
|
|
|
|
<div class="server-info" ng-controller="systemStatusInfo" ng-init="getSystemStatus()">
|
|
<div class="server-icon">
|
|
<i class="fas fa-desktop"></i>
|
|
</div>
|
|
<div class="server-details">
|
|
<div class="info-line">
|
|
<strong>IP:</strong>
|
|
<span class="ip-value" onclick="copyIP(this, '{{ ipAddress }}')" title="Click to copy">
|
|
{{ ipAddress }}
|
|
<span class="copy-tooltip">Copied!</span>
|
|
</span>
|
|
</div>
|
|
<div class="info-line">
|
|
<strong>Uptime:</strong>
|
|
<span ng-show="!uptimeLoaded">Loading...</span>
|
|
<span ng-show="uptimeLoaded">{$ uptime $}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="{% url 'index' %}" class="menu-item {% if request.resolver_match.url_name == 'index' %}active{% endif %}">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-th-large"></i>
|
|
</div>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
{% if admin %}
|
|
<a href="{% url 'versionManagment' %}" class="menu-item">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-code-branch"></i>
|
|
</div>
|
|
<span>Version Management</span>
|
|
</a>
|
|
<a href="{% url 'design' %}" class="menu-item">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-palette"></i>
|
|
</div>
|
|
<span>Design</span>
|
|
</a>
|
|
{% endif %}
|
|
<a href="https://platform.cyberpersons.com/" class="menu-item" target="_blank">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-link"></i>
|
|
</div>
|
|
<span>Connect</span>
|
|
</a>
|
|
<a href="https://go.cyberpanel.net/community" class="menu-item" target="_blank">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-comments"></i>
|
|
</div>
|
|
<span>Community</span>
|
|
</a>
|
|
|
|
<div class="section-header">MAIN</div>
|
|
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('users-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
<span>Users</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="users-submenu" class="submenu">
|
|
<a href="{% url 'viewProfile' %}" class="menu-item">
|
|
<span>View Profile</span>
|
|
</a>
|
|
{% if admin or createNewUser %}
|
|
<a href="{% url 'createUser' %}" class="menu-item">
|
|
<span>Create New User</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or listUsers %}
|
|
<a href="{% url 'listUsers' %}" class="menu-item">
|
|
<span>List Users</span>
|
|
</a>
|
|
{% endif %}
|
|
<a href="{% url 'modifyUsers' %}" class="menu-item">
|
|
<span>Modify User</span>
|
|
</a>
|
|
{% if admin or resellerCenter %}
|
|
<a href="{% url 'resellerCenter' %}" class="menu-item">
|
|
<span>Reseller Center</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin %}
|
|
<a href="{% url 'createNewACL' %}" class="menu-item">
|
|
<span>Create New ACL</span>
|
|
</a>
|
|
<a href="{% url 'deleteACL' %}" class="menu-item">
|
|
<span>Delete ACL</span>
|
|
</a>
|
|
<a href="{% url 'modifyACL' %}" class="menu-item">
|
|
<span>Modify ACL</span>
|
|
</a>
|
|
<a href="{% url 'apiAccess' %}" class="menu-item">
|
|
<span>API Access</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('wordpress-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fab fa-wordpress"></i>
|
|
</div>
|
|
<span>WordPress</span>
|
|
<span class="badge">NEW</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="wordpress-submenu" class="submenu">
|
|
<a href="{% url 'createWordpress' %}" class="menu-item">
|
|
<span>Deploy WordPress</span>
|
|
</a>
|
|
<a href="{% url 'ListWPSites' %}" class="menu-item">
|
|
<span>List WordPress</span>
|
|
</a>
|
|
<a href="{% url 'ConfigurePlugins' %}" class="menu-item">
|
|
<span>Configure Plugins</span>
|
|
</a>
|
|
<a href="{% url 'RestoreBackups' %}" class="menu-item">
|
|
<span>Restore Backups</span>
|
|
</a>
|
|
<a href="{% url 'RemoteBackupConfig' %}" class="menu-item">
|
|
<span>Remote Backup</span>
|
|
</a>
|
|
</div>
|
|
|
|
{% if admin %}
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('docker-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-ship"></i>
|
|
</div>
|
|
<span>Docker Apps</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="docker-submenu" class="submenu">
|
|
<a href="{% url 'CreateDockersite' %}" class="menu-item">
|
|
<span>Create Docker Apps</span>
|
|
</a>
|
|
<a href="{% url 'ListDockerSites' %}" class="menu-item">
|
|
<span>List Docker Apps</span>
|
|
</a>
|
|
<a href="{% url 'CreateDockerPackage' %}" class="menu-item">
|
|
<span>Docker Packages</span>
|
|
</a>
|
|
<a href="{% url 'AssignPackage' %}" class="menu-item">
|
|
<span>Assign Package</span>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('websites-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-globe"></i>
|
|
</div>
|
|
<span>Websites</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="websites-submenu" class="submenu">
|
|
{% if admin or createWebsite %}
|
|
<a href="{% url 'createWebsite' %}" class="menu-item">
|
|
<span>Create Website</span>
|
|
</a>
|
|
{% endif %}
|
|
<a href="{% url 'listWebsites' %}" class="menu-item">
|
|
<span>List Websites</span>
|
|
</a>
|
|
<a href="{% url 'CreateNewDomain' %}" class="menu-item">
|
|
<span>Create Sub/Addon Domain</span>
|
|
</a>
|
|
<a href="{% url 'listChildDomains' %}" class="menu-item">
|
|
<span>List Sub/Addon Domains</span>
|
|
</a>
|
|
{% if admin or modifyWebsite %}
|
|
<a href="{% url 'modifyWebsite' %}" class="menu-item">
|
|
<span>Modify Website</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or suspendWebsite %}
|
|
<a href="{% url 'siteState' %}" class="menu-item">
|
|
<span>Suspend/Unsuspend</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or deleteWebsite %}
|
|
<a href="{% url 'deleteWebsite' %}" class="menu-item">
|
|
<span>Delete Website</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('packages-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-cube"></i>
|
|
</div>
|
|
<span>Packages</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="packages-submenu" class="submenu">
|
|
{% if admin or createPackage %}
|
|
<a href="{% url 'createPackage' %}" class="menu-item">
|
|
<span>Create Package</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or listPackages %}
|
|
<a href="{% url 'listPackages' %}" class="menu-item">
|
|
<span>List Packages</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or deletePackage %}
|
|
<a href="{% url 'deletePackage' %}" class="menu-item">
|
|
<span>Delete Package</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or modifyPackage %}
|
|
<a href="{% url 'modifyPackage' %}" class="menu-item">
|
|
<span>Modify Package</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('databases-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-database"></i>
|
|
</div>
|
|
<span>Databases</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="databases-submenu" class="submenu">
|
|
{% if admin or createDatabase %}
|
|
<a href="{% url 'createDatabase' %}" class="menu-item">
|
|
<span>Create Database</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or deleteDatabase %}
|
|
<a href="{% url 'deleteDatabase' %}" class="menu-item">
|
|
<span>Delete Database</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or listDatabases %}
|
|
<a href="{% url 'listDBs' %}" class="menu-item">
|
|
<span>List Databases</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or createDatabase %}
|
|
<a href="{% url 'phpMyAdmin' %}" class="menu-item" target="_blank">
|
|
<span>PHPMYAdmin</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('dns-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-sitemap"></i>
|
|
</div>
|
|
<span>DNS</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="dns-submenu" class="submenu">
|
|
{% if admin or createNameServer %}
|
|
<a href="{% url 'createNameserver' %}" class="menu-item">
|
|
<span>Create Nameserver</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin %}
|
|
<a href="{% url 'configureDefaultNameServers' %}" class="menu-item">
|
|
<span>Config Default Nameservers</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or createDNSZone %}
|
|
<a href="{% url 'createDNSZone' %}" class="menu-item">
|
|
<span>Create DNS Zone</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or deleteZone %}
|
|
<a href="{% url 'deleteDNSZone' %}" class="menu-item">
|
|
<span>Delete Zone</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or addDeleteRecords %}
|
|
<a href="{% url 'addDeleteDNSRecords' %}" class="menu-item">
|
|
<span>Add/Delete Records</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or addDeleteRecords %}
|
|
<a href="{% url 'addDeleteDNSRecordsCloudFlare' %}" class="menu-item">
|
|
<span>CloudFlare</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or addDeleteRecords %}
|
|
<a href="{% url 'ResetDNSConfigurations' %}" class="menu-item">
|
|
<span>Reset DNS Configurations</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('email-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-envelope"></i>
|
|
</div>
|
|
<span>Email</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="email-submenu" class="submenu">
|
|
{% if admin or createEmail %}
|
|
<a href="{% url 'createEmailAccount' %}" class="menu-item">
|
|
<span>Create Email</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or listEmails %}
|
|
<a href="{% url 'listEmails' %}" class="menu-item">
|
|
<span>List Emails</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or deleteEmail %}
|
|
<a href="{% url 'deleteEmailAccount' %}" class="menu-item">
|
|
<span>Delete Email</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or emailForwarding %}
|
|
<a href="{% url 'EmailLimits' %}" class="menu-item">
|
|
<span>Email Limits</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or emailForwarding %}
|
|
<a href="{% url 'emailForwarding' %}" class="menu-item">
|
|
<span>Email Forwarding</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or changeEmailPassword %}
|
|
<a href="{% url 'changeEmailAccountPassword' %}" class="menu-item">
|
|
<span>Change Password</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or dkimManager %}
|
|
<a href="{% url 'dkimManager' %}" class="menu-item">
|
|
<span>DKIM Manager</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or createEmail %}
|
|
<a href="/snappymail/index.php" class="menu-item" target="_blank">
|
|
<span>Access Webmail</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('ftp-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-folder"></i>
|
|
</div>
|
|
<span>FTP</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="ftp-submenu" class="submenu">
|
|
{% if admin or createFTPAccount %}
|
|
<a href="{% url 'createFTPAccount' %}" class="menu-item">
|
|
<span>Create FTP Account</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or deleteFTPAccount %}
|
|
<a href="{% url 'deleteFTPAccount' %}" class="menu-item delete">
|
|
<span>Delete FTP Account</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or listFTPAccounts %}
|
|
<a href="{% url 'listFTPAccounts' %}" class="menu-item">
|
|
<span>List FTP Accounts</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or listFTPAccounts %}
|
|
<a href="{% url 'ResetFTPConfigurations' %}" class="menu-item">
|
|
<span>Reset FTP Configurations</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('backup-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-save"></i>
|
|
</div>
|
|
<span>Backup</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="backup-submenu" class="submenu">
|
|
{% if admin or createBackup %}
|
|
<a href="{% url 'OneClickBackups' %}" class="menu-item">
|
|
<span>One-Click Backups</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or createBackup %}
|
|
<a href="{% url 'backupSite' %}" class="menu-item">
|
|
<span>Create Backup</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or restoreBackup %}
|
|
<a href="{% url 'restoreSite' %}" class="menu-item">
|
|
<span>Restore Backup</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or addDeleteDestinations %}
|
|
<a href="{% url 'backupDestinations' %}" class="menu-item">
|
|
<span>Add/Delete Destination</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or scheduleBackups %}
|
|
<a href="{% url 'scheduleBackup' %}" class="menu-item">
|
|
<span>Schedule Backup</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or googleDriveBackups %}
|
|
<a href="{% url 'gDrive' %}" class="menu-item">
|
|
<span>Setup Google Drive</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or remoteBackups %}
|
|
<a href="{% url 'remoteBackups' %}" class="menu-item">
|
|
<span>Remote Backups</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('incremental-backup-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-save"></i>
|
|
</div>
|
|
<span>Incremental Backup</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="incremental-backup-submenu" class="submenu">
|
|
{% if admin or createBackup %}
|
|
<a href="{% url 'backupDestinationsInc' %}" class="menu-item">
|
|
<span>Backups v2</span>
|
|
</a>
|
|
<a href="{% url 'createBackupInc' %}" class="menu-item">
|
|
<span>v1 (Deprecated)</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('ssl-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-lock"></i>
|
|
</div>
|
|
<span>SSL</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="ssl-submenu" class="submenu">
|
|
{% if admin or manageSSL %}
|
|
<a href="{% url 'v2ManageSSL' %}" class="menu-item">
|
|
<span>Manage SSL v2</span>
|
|
</a>
|
|
<a href="{% url 'manageSSL' %}" class="menu-item">
|
|
<span>Manage SSL</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or hostnameSSL %}
|
|
<a href="{% url 'sslForHostName' %}" class="menu-item">
|
|
<span>Hostname SSL</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if admin or mailServerSSL %}
|
|
<a href="{% url 'sslForMailServer' %}" class="menu-item">
|
|
<span>MailServer SSL</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if admin %}
|
|
<div class="section-header">SERVER</div>
|
|
|
|
<a href="{% url 'MysqlManager' %}" class="menu-item">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-database"></i>
|
|
</div>
|
|
<span>MySQL Manager</span>
|
|
<span class="badge">NEW</span>
|
|
</a>
|
|
|
|
<a href="{% url 'Filemanager' %}" class="menu-item">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-folder-open"></i>
|
|
</div>
|
|
<span>Root File Manager</span>
|
|
</a>
|
|
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('cloudlinux-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-fire"></i>
|
|
</div>
|
|
<span>CloudLinux</span>
|
|
<span class="badge">NEW</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="cloudlinux-submenu" class="submenu">
|
|
<a href="{% url 'CreatePackageCL' %}" class="menu-item">
|
|
<span>Create Package</span>
|
|
</a>
|
|
<a href="{% url 'listPackagesCL' %}" class="menu-item">
|
|
<span>List Packages</span>
|
|
</a>
|
|
<a href="{% url 'monitorUsage' %}" class="menu-item">
|
|
<span>Monitor Usage</span>
|
|
</a>
|
|
<a href="{% url 'CageFS' %}" class="menu-item">
|
|
<span>CageFS</span>
|
|
</a>
|
|
</div>
|
|
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('docker-manager-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-cogs"></i>
|
|
</div>
|
|
<span>Docker Manager</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="docker-manager-submenu" class="submenu">
|
|
<a href="{% url 'manageImages' %}" class="menu-item">
|
|
<span>Manage Images</span>
|
|
</a>
|
|
<a href="{% url 'listContainers' %}" class="menu-item">
|
|
<span>Manage Containers</span>
|
|
</a>
|
|
<a href="{% url 'containerImage' %}" class="menu-item">
|
|
<span>Create New Container</span>
|
|
</a>
|
|
</div>
|
|
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('tuning-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-adjust"></i>
|
|
</div>
|
|
<span>Tuning</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="tuning-submenu" class="submenu">
|
|
<a href="{% url 'liteSpeedTuning' %}" class="menu-item">
|
|
<span>LiteSpeed Tuning</span>
|
|
</a>
|
|
{% if serverCheck == 1 %}
|
|
<a href="{% url 'litespeed_ent_conf' %}" class="menu-item">
|
|
<span>LiteSpeed Ent Global Conf</span>
|
|
</a>
|
|
{% endif %}
|
|
<a href="{% url 'phpTuning' %}" class="menu-item">
|
|
<span>PHP Tuning</span>
|
|
</a>
|
|
</div>
|
|
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('server-status-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-cog"></i>
|
|
</div>
|
|
<span>Server Status</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="server-status-submenu" class="submenu">
|
|
<a href="{% url 'topProcesses' %}" class="menu-item">
|
|
<span>Top Processes</span>
|
|
</a>
|
|
<a href="{% url 'litespeedStatus' %}" class="menu-item">
|
|
<span>LiteSpeed Status</span>
|
|
</a>
|
|
<a href="{% url 'CyberPanelPort' %}" class="menu-item">
|
|
<span>Change Port</span>
|
|
</a>
|
|
<a href="{% url 'packageManager' %}" class="menu-item">
|
|
<span>Package Manager</span>
|
|
</a>
|
|
</div>
|
|
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('php-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-code"></i>
|
|
</div>
|
|
<span>PHP</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="php-submenu" class="submenu">
|
|
<a href="{% url 'installExtensions' %}" class="menu-item">
|
|
<span>Install Extensions</span>
|
|
</a>
|
|
<a href="{% url 'editPHPConfigs' %}" class="menu-item">
|
|
<span>Edit PHP Configs</span>
|
|
</a>
|
|
</div>
|
|
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('logs-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-file"></i>
|
|
</div>
|
|
<span>Logs</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="logs-submenu" class="submenu">
|
|
<a href="{% url 'serverMail' %}" class="menu-item">
|
|
<span>Server Mail</span>
|
|
</a>
|
|
<a href="{% url 'cyberCPMainLogFile' %}" class="menu-item">
|
|
<span>CyberPanel Main Log File</span>
|
|
</a>
|
|
<a href="{% url 'accessLogs' %}" class="menu-item">
|
|
<span>Access Log</span>
|
|
</a>
|
|
<a href="{% url 'errorLogs' %}" class="menu-item">
|
|
<span>Error Logs</span>
|
|
</a>
|
|
<a href="{% url 'emaillogs' %}" class="menu-item">
|
|
<span>Email Log</span>
|
|
</a>
|
|
<a href="{% url 'ftplogs' %}" class="menu-item">
|
|
<span>FTP Logs</span>
|
|
</a>
|
|
<a href="{% url 'modSecAuditLogs' %}" class="menu-item">
|
|
<span>ModSec Audit Logs</span>
|
|
</a>
|
|
</div>
|
|
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('security-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-shield"></i>
|
|
</div>
|
|
<span>Security</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="security-submenu" class="submenu">
|
|
<a href="{% url 'firewallHome' %}" class="menu-item">
|
|
<span>Firewall</span>
|
|
</a>
|
|
<a href="{% url 'secureSSH' %}" class="menu-item">
|
|
<span>Secure SSH</span>
|
|
</a>
|
|
<a href="{% url 'modSecurity' %}" class="menu-item">
|
|
<span>ModSecurity Conf</span>
|
|
</a>
|
|
<a href="{% url 'modSecRules' %}" class="menu-item">
|
|
<span>ModSecurity Rules</span>
|
|
</a>
|
|
<a href="{% url 'modSecRulesPacks' %}" class="menu-item">
|
|
<span>ModSecurity Rules Packs</span>
|
|
</a>
|
|
<a href="{% url 'csf' %}" class="menu-item">
|
|
<span>CSF</span>
|
|
</a>
|
|
<a href="{% url 'imunify' %}" class="menu-item">
|
|
<span>Imunify 360</span>
|
|
</a>
|
|
<a href="{% url 'imunifyAV' %}" class="menu-item">
|
|
<span>ImunifyAV</span>
|
|
</a>
|
|
<a href="{% url 'aiScannerHome' %}" class="menu-item">
|
|
<span>AI Scanner</span>
|
|
</a>
|
|
</div>
|
|
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('mail-settings-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-envelope"></i>
|
|
</div>
|
|
<span>Mail Settings</span>
|
|
<span class="badge">NEW</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="mail-settings-submenu" class="submenu">
|
|
<a href="{% url 'EmailDebugger' %}" class="menu-item">
|
|
<span>Email Debugger</span>
|
|
</a>
|
|
<a href="{% url 'mailQueue' %}" class="menu-item">
|
|
<span>Mail Queue</span>
|
|
</a>
|
|
<a href="{% url 'SpamAssassin' %}" class="menu-item">
|
|
<span>SpamAssassin</span>
|
|
</a>
|
|
<a href="{% url 'emailMarketing' %}" class="menu-item">
|
|
<span>Email Marketing</span>
|
|
</a>
|
|
<a href="{% url 'MailScanner' %}" class="menu-item">
|
|
<span>MailScanner</span>
|
|
</a>
|
|
<a href="{% url 'Rspamd' %}" class="menu-item">
|
|
<span>RSPAMD</span>
|
|
</a>
|
|
</div>
|
|
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('manage-services-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-folder-open"></i>
|
|
</div>
|
|
<span>Manage Services</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="manage-services-submenu" class="submenu">
|
|
<a href="{% url 'manageApplications' %}" class="menu-item">
|
|
<span>Applications</span>
|
|
</a>
|
|
<a href="{% url 'services' %}" class="menu-item">
|
|
<span>Services Status</span>
|
|
</a>
|
|
<a href="{% url 'managePowerDNS' %}" class="menu-item">
|
|
<span>Manage PowerDNS</span>
|
|
</a>
|
|
<a href="{% url 'managePostfix' %}" class="menu-item">
|
|
<span>Manage Postfix</span>
|
|
</a>
|
|
<a href="{% url 'managePureFtpd' %}" class="menu-item">
|
|
<span>Manage FTP</span>
|
|
</a>
|
|
</div>
|
|
|
|
<a href="#" class="menu-item" onclick="toggleSubmenu('plugins-submenu', this); return false;">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-plug"></i>
|
|
</div>
|
|
<span>Plugins</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</a>
|
|
<div id="plugins-submenu" class="submenu">
|
|
<a href="{% url 'installed' %}" class="menu-item">
|
|
<span>Installed</span>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Backup Notification Banner -->
|
|
<div id="backup-notification" class="notification-banner">
|
|
<div class="notification-content">
|
|
<div class="notification-icon">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</div>
|
|
<div class="notification-text">
|
|
<span>{% trans "Looks like your websites are not secured with automatic backups." %}</span>
|
|
<a href="{% url 'OneClickBackups' %}" class="configure-link">{% trans "Configure now" %}</a>
|
|
</div>
|
|
<button class="notification-close" onclick="dismissBackupNotification()">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Scanner Security Notice -->
|
|
<div id="ai-scanner-notification" class="ai-scanner-banner">
|
|
<div class="ai-scanner-content">
|
|
<div class="ai-scanner-icon">
|
|
<i class="fas fa-brain"></i>
|
|
</div>
|
|
<div class="ai-scanner-text">
|
|
<span class="ai-scanner-main-text">🛡️ Secure your websites with AI-powered malware detection</span>
|
|
<span class="ai-scanner-sub-text">Advanced threat detection • Real-time scanning • Zero false positives</span>
|
|
</div>
|
|
<div class="ai-scanner-actions">
|
|
<a href="/aiscanner/" class="ai-scanner-btn">
|
|
<i class="fas fa-rocket"></i>
|
|
Start AI Security Scan
|
|
</a>
|
|
</div>
|
|
<button class="ai-scanner-close" onclick="dismissAIScannerNotification()">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div id="main-content">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
|
|
<!-- Additional Scripts -->
|
|
<script src="{% static 'packages/packages.js' %}"></script>
|
|
<script src="{% static 'websiteFunctions/websiteFunctions.js' %}"></script>
|
|
<script src="{% static 'userManagment/userManagment.js' %}"></script>
|
|
<script src="{% static 'databases/databases.js' %}"></script>
|
|
<script src="{% static 'dns/dns.js' %}"></script>
|
|
<script src="{% static 'mailServer/mailServer.js' %}"></script>
|
|
<script src="{% static 'ftp/ftp.js' %}"></script>
|
|
<script src="{% static 'backup/backup.js' %}"></script>
|
|
<script src="{% static 'managePHP/managePHP.js' %}"></script>
|
|
<script src="{% static 'serverLogs/serverLogs.js' %}"></script>
|
|
<script src="{% static 'serverStatus/serverStatus.js' %}"></script>
|
|
<script src="{% static 'firewall/firewall.js' %}"></script>
|
|
<script src="{% static 'emailPremium/emailPremium.js' %}"></script>
|
|
<script src="{% static 'manageServices/manageServices.js' %}"></script>
|
|
|
|
<!-- Scripts -->
|
|
<script>
|
|
function toggleSidebar() {
|
|
document.getElementById('sidebar').classList.toggle('show');
|
|
}
|
|
|
|
function toggleSubmenu(id, element) {
|
|
const submenu = document.getElementById(id);
|
|
const allSubmenus = document.querySelectorAll('.submenu');
|
|
const allMenuItems = document.querySelectorAll('.menu-item');
|
|
|
|
// Close all other submenus
|
|
allSubmenus.forEach(menu => {
|
|
if (menu.id !== id) {
|
|
menu.classList.remove('show');
|
|
}
|
|
});
|
|
|
|
// Remove expanded class from all menu items
|
|
allMenuItems.forEach(item => {
|
|
if (item !== element) {
|
|
item.classList.remove('expanded');
|
|
}
|
|
});
|
|
|
|
// Toggle current submenu
|
|
submenu.classList.toggle('show');
|
|
element.classList.toggle('expanded');
|
|
}
|
|
|
|
// Copy IP function
|
|
function copyIP(element, ip) {
|
|
navigator.clipboard.writeText(ip).then(function() {
|
|
const tooltip = element.querySelector('.copy-tooltip');
|
|
tooltip.classList.add('show');
|
|
setTimeout(function() {
|
|
tooltip.classList.remove('show');
|
|
}, 2000);
|
|
}).catch(function(err) {
|
|
console.error('Failed to copy IP: ', err);
|
|
});
|
|
}
|
|
|
|
// Close sidebar when clicking outside on mobile
|
|
document.addEventListener('click', function(e) {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const toggle = document.getElementById('mobile-menu-toggle');
|
|
|
|
if (window.innerWidth <= 768 &&
|
|
!sidebar.contains(e.target) &&
|
|
!toggle.contains(e.target) &&
|
|
sidebar.classList.contains('show')) {
|
|
sidebar.classList.remove('show');
|
|
}
|
|
});
|
|
|
|
// Backup notification banner logic
|
|
function checkBackupStatus() {
|
|
// Check if user has dismissed the notification in this session
|
|
if (sessionStorage.getItem('backupNotificationDismissed') === 'true') {
|
|
return;
|
|
}
|
|
|
|
// Check if user has backup configured (you'll need to implement this API)
|
|
// For now, we'll show it by default unless they have a backup plan
|
|
// This should be replaced with an actual check
|
|
{% if not request.session.has_backup_configured %}
|
|
showBackupNotification();
|
|
{% endif %}
|
|
|
|
// For demonstration, let's show it if URL doesn't contain 'OneClickBackups'
|
|
if (!window.location.href.includes('OneClickBackups')) {
|
|
showBackupNotification();
|
|
}
|
|
}
|
|
|
|
function showBackupNotification() {
|
|
const banner = document.getElementById('backup-notification');
|
|
const body = document.body;
|
|
banner.classList.add('show');
|
|
body.classList.add('notification-shown');
|
|
}
|
|
|
|
function dismissBackupNotification() {
|
|
const banner = document.getElementById('backup-notification');
|
|
const body = document.body;
|
|
banner.classList.remove('show');
|
|
body.classList.remove('notification-shown');
|
|
// Remember dismissal for this session
|
|
sessionStorage.setItem('backupNotificationDismissed', 'true');
|
|
}
|
|
|
|
// AI Scanner Notification Functions
|
|
function checkAIScannerStatus() {
|
|
// Check if user has dismissed the notification in this session
|
|
if (sessionStorage.getItem('aiScannerNotificationDismissed') === 'true') {
|
|
return;
|
|
}
|
|
|
|
// Check if we're not already on the AI Scanner page
|
|
if (!window.location.href.includes('aiscanner')) {
|
|
showAIScannerNotification();
|
|
}
|
|
}
|
|
|
|
function showAIScannerNotification() {
|
|
const banner = document.getElementById('ai-scanner-notification');
|
|
const body = document.body;
|
|
banner.classList.add('show');
|
|
body.classList.add('ai-scanner-shown');
|
|
}
|
|
|
|
function dismissAIScannerNotification() {
|
|
const banner = document.getElementById('ai-scanner-notification');
|
|
const body = document.body;
|
|
banner.classList.remove('show');
|
|
body.classList.remove('ai-scanner-shown');
|
|
// Remember dismissal for this session
|
|
sessionStorage.setItem('aiScannerNotificationDismissed', 'true');
|
|
}
|
|
|
|
// Check both notification statuses when page loads
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
checkBackupStatus();
|
|
// Show AI Scanner notification with a slight delay for better UX
|
|
setTimeout(checkAIScannerStatus, 1000);
|
|
});
|
|
</script>
|
|
|
|
{% block footer_scripts %}{% endblock %}
|
|
</body>
|
|
</html> |