2298 lines
80 KiB
HTML
2298 lines
80 KiB
HTML
{% load i18n %}
|
|
{% get_current_language as LANGUAGE_CODE %}
|
|
{% with CP_VERSION="2.4.4.1" %}
|
|
<!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' %}?v={{ CP_VERSION }}">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" type="text/css" href="{% static 'baseTemplate/assets/bootstrap/css/bootstrap.min.css' %}?v={{ CP_VERSION }}">
|
|
<link rel="stylesheet" type="text/css" href="{% static 'baseTemplate/bootstrap-toggle.min.css' %}?v={{ CP_VERSION }}">
|
|
|
|
<!-- Custom CSS -->
|
|
<style>
|
|
{{ cosmetic.MainDashboardCSS | safe }}
|
|
</style>
|
|
|
|
<!-- Core Scripts -->
|
|
<script src="{% static 'baseTemplate/angularjs.1.6.5.js' %}?v={{ CP_VERSION }}"></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' %}?v={{ CP_VERSION }}"></script>
|
|
<script src="{% static 'baseTemplate/bootstrap-toggle.min.js' %}?v={{ CP_VERSION }}"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/qrious/dist/qrious.min.js"></script>
|
|
<script src="{% static 'baseTemplate/custom-js/system-status.js' %}?v={{ CP_VERSION }}"></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' %}?v={{ CP_VERSION }}">
|
|
<script src="{% static 'baseTemplate/custom-js/pnotify.custom.min.js' %}?v={{ CP_VERSION }}"></script>
|
|
|
|
<!-- Modern Design System -->
|
|
<style>
|
|
/* CSS Variables for Theme */
|
|
:root {
|
|
/* Light Theme Colors */
|
|
--bg-primary: #f0f0ff;
|
|
--bg-secondary: white;
|
|
--bg-sidebar: #f3f1ff;
|
|
--bg-sidebar-item: white;
|
|
--bg-hover: #e8e6ff;
|
|
--text-primary: #2f3640;
|
|
--text-secondary: #64748b;
|
|
--text-heading: #1e293b;
|
|
--border-color: #e8e9ff;
|
|
--shadow-color: rgba(0,0,0,0.05);
|
|
--accent-color: #5856d6;
|
|
--accent-hover: #4644c0;
|
|
--danger-color: #ef4444;
|
|
--success-color: #10b981;
|
|
--warning-bg: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
|
--ai-banner-bg: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
|
|
}
|
|
|
|
/* Dark Theme Colors */
|
|
[data-theme="dark"] {
|
|
--bg-primary: #0f0f23;
|
|
--bg-secondary: #1a1a3e;
|
|
--bg-sidebar: #16162e;
|
|
--bg-sidebar-item: #1e1e42;
|
|
--bg-hover: #252550;
|
|
--text-primary: #e4e4e7;
|
|
--text-secondary: #9ca3af;
|
|
--text-heading: #f3f4f6;
|
|
--border-color: #2a2a5e;
|
|
--shadow-color: rgba(0,0,0,0.3);
|
|
--accent-color: #7c7ff3;
|
|
--accent-hover: #6b6ee8;
|
|
--danger-color: #f87171;
|
|
--success-color: #34d399;
|
|
--warning-bg: linear-gradient(135deg, #78350f 0%, #92400e 100%);
|
|
--ai-banner-bg: linear-gradient(135deg, #4c1d95 0%, #5b21b6 50%, #6d28d9 100%);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
overflow-x: hidden;
|
|
min-height: 100vh;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
/* Header */
|
|
#header {
|
|
background: var(--bg-secondary);
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 30px;
|
|
box-shadow: 0 2px 12px var(--shadow-color);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 260px;
|
|
right: 0;
|
|
z-index: 1000;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
#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: var(--text-heading);
|
|
}
|
|
|
|
#header .logo-text .tagline {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
font-weight: 400;
|
|
margin-top: -2px;
|
|
}
|
|
|
|
#header-right {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 25px;
|
|
}
|
|
|
|
#header-right .info-text {
|
|
color: var(--text-secondary);
|
|
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: var(--text-secondary);
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
font-size: 20px;
|
|
}
|
|
|
|
#header-right .social-links a:hover {
|
|
background: var(--accent-color);
|
|
color: white;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(88,86,214,0.3);
|
|
}
|
|
|
|
#header-right .logout-btn {
|
|
background: transparent;
|
|
color: var(--accent-color);
|
|
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: var(--accent-color);
|
|
color: white;
|
|
box-shadow: 0 5px 15px rgba(88,86,214,0.3);
|
|
}
|
|
|
|
/* Theme Toggle Button */
|
|
.theme-toggle {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
border: 1px solid var(--border-color);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
background: var(--accent-color);
|
|
color: white;
|
|
border-color: var(--accent-color);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(88,86,214,0.3);
|
|
}
|
|
|
|
[data-theme="dark"] .theme-toggle {
|
|
color: #fbbf24;
|
|
}
|
|
|
|
/* Sidebar */
|
|
#sidebar {
|
|
width: 260px;
|
|
background: var(--bg-sidebar);
|
|
height: 100vh;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
overflow-y: auto;
|
|
z-index: 1001;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.sidebar-logo {
|
|
padding: 20px;
|
|
background: var(--bg-secondary);
|
|
margin: 15px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px var(--shadow-color);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.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: var(--text-heading);
|
|
}
|
|
|
|
.sidebar-logo .logo-text .tagline {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
font-weight: 400;
|
|
}
|
|
|
|
|
|
#sidebar .server-info {
|
|
padding: 15px;
|
|
background: var(--bg-secondary);
|
|
margin: 15px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px var(--shadow-color);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
#sidebar .server-info .server-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: var(--bg-hover);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--accent-color);
|
|
font-size: 18px;
|
|
flex-shrink: 0;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
#sidebar .server-info .server-details {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
|
|
#sidebar .server-info .info-line {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#sidebar .server-info .info-line strong {
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
margin-right: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#sidebar .server-info .ip-value {
|
|
color: var(--accent-color);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
#sidebar .server-info .ip-value:hover {
|
|
color: var(--accent-hover);
|
|
}
|
|
|
|
#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: var(--text-primary);
|
|
color: var(--bg-secondary);
|
|
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: var(--accent-color);
|
|
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;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
#sidebar .menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 15px;
|
|
color: var(--text-secondary);
|
|
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: var(--bg-secondary);
|
|
box-shadow: 0 1px 3px var(--shadow-color);
|
|
}
|
|
|
|
#sidebar .menu-item:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--accent-color);
|
|
box-shadow: 0 2px 8px var(--shadow-color);
|
|
}
|
|
|
|
#sidebar .menu-item.active {
|
|
background: var(--accent-color);
|
|
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: var(--bg-hover);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
#sidebar .menu-item:hover .icon-wrapper {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
#sidebar .menu-item.active .icon-wrapper {
|
|
background: rgba(255,255,255,0.2);
|
|
}
|
|
|
|
#sidebar .menu-item i {
|
|
font-size: 18px;
|
|
color: var(--accent-color);
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
#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 0.3s ease;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
#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: var(--bg-sidebar-item);
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
}
|
|
|
|
#sidebar .submenu .menu-item:hover {
|
|
box-shadow: 0 2px 6px var(--shadow-color);
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
/* Active submenu item */
|
|
#sidebar .submenu .menu-item.active {
|
|
background: var(--accent-color);
|
|
color: white;
|
|
box-shadow: 0 2px 8px rgba(88,86,214,0.2);
|
|
}
|
|
|
|
#sidebar .submenu .menu-item.active:hover {
|
|
background: var(--accent-hover);
|
|
}
|
|
|
|
/* Parent menu item with active child */
|
|
#sidebar .menu-item.has-active-child {
|
|
color: var(--accent-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
#sidebar .menu-item.has-active-child .icon-wrapper {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
#sidebar .menu-item.has-active-child i {
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
/* Main Content */
|
|
#main-content {
|
|
margin-left: 260px;
|
|
padding: 110px 30px 30px;
|
|
min-height: 100vh;
|
|
background: var(--bg-primary);
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* .htaccess Feature Banner */
|
|
.htaccess-feature-banner {
|
|
position: fixed;
|
|
top: 80px;
|
|
left: 260px;
|
|
right: 0;
|
|
background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
|
|
border-bottom: 2px solid #065f46;
|
|
padding: 18px 30px;
|
|
z-index: 997;
|
|
box-shadow: 0 6px 25px rgba(16, 185, 129, 0.3);
|
|
animation: slideDown 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
display: none;
|
|
}
|
|
|
|
.htaccess-feature-banner.show {
|
|
display: block;
|
|
}
|
|
|
|
.htaccess-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.htaccess-icon {
|
|
background: rgba(255, 255, 255, 0.25);
|
|
border-radius: 14px;
|
|
padding: 14px;
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.htaccess-icon i {
|
|
color: white;
|
|
font-size: 1.75rem;
|
|
display: block;
|
|
}
|
|
|
|
.htaccess-text {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.htaccess-main-text {
|
|
color: white;
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
line-height: 1.4;
|
|
letter-spacing: 0.3px;
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.htaccess-sub-text {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.htaccess-sub-text span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.htaccess-sub-text i {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.htaccess-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.htaccess-btn {
|
|
background: white;
|
|
color: #047857;
|
|
padding: 14px 28px;
|
|
border-radius: 10px;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
font-size: 0.9rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.htaccess-btn:hover {
|
|
background: #f0fdf4;
|
|
color: #065f46;
|
|
transform: translateY(-2px) scale(1.02);
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
|
|
text-decoration: none;
|
|
border-color: white;
|
|
}
|
|
|
|
.htaccess-btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
border-radius: 50%;
|
|
background: rgba(16, 185, 129, 0.1);
|
|
transform: translate(-50%, -50%);
|
|
transition: width 0.6s ease, height 0.6s ease;
|
|
}
|
|
|
|
.htaccess-btn:hover::before {
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
|
|
.htaccess-btn span {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.htaccess-btn i {
|
|
font-size: 1rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.htaccess-close {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
color: white;
|
|
font-size: 1.1rem;
|
|
cursor: pointer;
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
transition: all 0.3s ease;
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.htaccess-close:hover {
|
|
background: rgba(255, 255, 255, 0.25);
|
|
transform: scale(1.1) rotate(90deg);
|
|
}
|
|
|
|
/* Adjust main content when .htaccess banner is shown */
|
|
.htaccess-shown #main-content {
|
|
padding-top: 190px;
|
|
}
|
|
|
|
/* Multiple banners adjustments */
|
|
.notification-shown.htaccess-shown #main-content {
|
|
padding-top: 240px;
|
|
}
|
|
|
|
.ai-scanner-shown.htaccess-shown #main-content {
|
|
padding-top: 270px;
|
|
}
|
|
|
|
.notification-shown.ai-scanner-shown.htaccess-shown #main-content {
|
|
padding-top: 320px;
|
|
}
|
|
|
|
.notification-shown .htaccess-feature-banner {
|
|
top: 130px;
|
|
}
|
|
|
|
.ai-scanner-shown .htaccess-feature-banner {
|
|
top: 160px;
|
|
}
|
|
|
|
.notification-shown.ai-scanner-shown .htaccess-feature-banner {
|
|
top: 210px;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* .htaccess banner mobile styles */
|
|
.htaccess-feature-banner {
|
|
left: 0;
|
|
padding: 14px 20px;
|
|
}
|
|
|
|
.htaccess-content {
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.htaccess-text {
|
|
min-width: 200px;
|
|
}
|
|
|
|
.htaccess-main-text {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.htaccess-sub-text {
|
|
font-size: 0.8rem;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.htaccess-btn {
|
|
padding: 12px 22px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.htaccess-icon {
|
|
padding: 12px;
|
|
}
|
|
|
|
.htaccess-icon i {
|
|
font-size: 1.4rem;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
/* .htaccess banner small mobile styles */
|
|
.htaccess-content {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 12px;
|
|
}
|
|
|
|
.htaccess-actions {
|
|
justify-content: center;
|
|
}
|
|
|
|
.htaccess-close {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
}
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--accent-color);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--accent-hover);
|
|
}
|
|
|
|
/* Mobile Menu Toggle */
|
|
#mobile-menu-toggle {
|
|
display: none;
|
|
background: var(--bg-hover);
|
|
border: none;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
margin-right: 15px;
|
|
color: var(--accent-color);
|
|
font-size: 18px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#mobile-menu-toggle:hover {
|
|
background: var(--accent-color);
|
|
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" rel="noopener" style="color: inherit; text-decoration: underline;">Join discussions</a>, and <a href="https://platform.cyberpersons.com/" target="_blank" rel="noopener" style="color: inherit; text-decoration: underline;">get support</a>.</div>
|
|
<div class="social-links">
|
|
<a href="https://web.facebook.com/groups/cyberpanel" target="_blank" rel="noopener" title="Facebook">
|
|
<i class="fab fa-facebook-f"></i>
|
|
</a>
|
|
<a href="https://www.youtube.com/@Cyber-Panel" target="_blank" rel="noopener" title="YouTube">
|
|
<i class="fab fa-youtube"></i>
|
|
</a>
|
|
<a href="https://x.com/CyberPanel" target="_blank" rel="noopener" title="X (Twitter)">
|
|
<i class="fab fa-twitter"></i>
|
|
</a>
|
|
</div>
|
|
<button id="theme-toggle" class="theme-toggle" title="Toggle Dark Mode">
|
|
<i class="fas fa-moon" id="theme-icon"></i>
|
|
</button>
|
|
<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" rel="noopener">
|
|
<div class="icon-wrapper">
|
|
<i class="fas fa-link"></i>
|
|
</div>
|
|
<span>Connect</span>
|
|
</a>
|
|
<a href="https://cyberpanel.net/KnowledgeBase/" class="menu-item" target="_blank" rel="noopener">
|
|
<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" rel="noopener">
|
|
<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" rel="noopener">
|
|
<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 '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>
|
|
|
|
<!-- .htaccess Feature Announcement -->
|
|
<div id="htaccess-notification" class="htaccess-feature-banner">
|
|
<div class="htaccess-content">
|
|
<div class="htaccess-icon">
|
|
<i class="fas fa-magic"></i>
|
|
</div>
|
|
<div class="htaccess-text">
|
|
<span class="htaccess-main-text">✨ Revolutionary .htaccess Support Now Live!</span>
|
|
<span class="htaccess-sub-text">
|
|
<span><i class="fas fa-check-circle"></i> Full .htaccess support</span>
|
|
<span><i class="fas fa-check-circle"></i> PHP configuration now works</span>
|
|
<span><i class="fas fa-check-circle"></i> Zero rule rewrites needed</span>
|
|
</span>
|
|
</div>
|
|
<div class="htaccess-actions">
|
|
<a href="https://cyberpanel.net/cyberpanel-htaccess-module" target="_blank" rel="noopener" class="htaccess-btn">
|
|
<i class="fas fa-book-open"></i>
|
|
<span>Learn More</span>
|
|
</a>
|
|
</div>
|
|
<button class="htaccess-close" onclick="dismissHtaccessNotification()">
|
|
<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' %}?v={{ CP_VERSION }}"></script>
|
|
<script src="{% static 'websiteFunctions/websiteFunctions.js' %}?v={{ CP_VERSION }}"></script>
|
|
<script src="{% static 'userManagment/userManagment.js' %}?v={{ CP_VERSION }}"></script>
|
|
<script src="{% static 'databases/databases.js' %}?v={{ CP_VERSION }}"></script>
|
|
<script src="{% static 'dns/dns.js' %}?v={{ CP_VERSION }}"></script>
|
|
<script src="{% static 'mailServer/mailServer.js' %}?v={{ CP_VERSION }}"></script>
|
|
<script src="{% static 'ftp/ftp.js' %}?v={{ CP_VERSION }}"></script>
|
|
<script src="{% static 'backup/backup.js' %}?v={{ CP_VERSION }}"></script>
|
|
<script src="{% static 'managePHP/managePHP.js' %}?v={{ CP_VERSION }}"></script>
|
|
<script src="{% static 'serverLogs/serverLogs.js' %}?v={{ CP_VERSION }}"></script>
|
|
<script src="{% static 'serverStatus/serverStatus.js' %}?v={{ CP_VERSION }}"></script>
|
|
<script src="{% static 'firewall/firewall.js' %}?v={{ CP_VERSION }}"></script>
|
|
<script src="{% static 'emailPremium/emailPremium.js' %}?v={{ CP_VERSION }}"></script>
|
|
<script src="{% static 'manageServices/manageServices.js' %}?v={{ CP_VERSION }}"></script>
|
|
<script src="{% static 'CLManager/CLManager.js' %}?v={{ CP_VERSION }}"></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');
|
|
}
|
|
|
|
// .htaccess Feature Notification Functions
|
|
function checkHtaccessStatus() {
|
|
// Check if user has dismissed the notification permanently (localStorage for longer persistence)
|
|
if (localStorage.getItem('htaccessNotificationDismissed') === 'true') {
|
|
return;
|
|
}
|
|
|
|
// Check if notification has been shown today
|
|
const lastShown = localStorage.getItem('htaccessNotificationLastShown');
|
|
const today = new Date().toDateString();
|
|
|
|
if (lastShown === today) {
|
|
return;
|
|
}
|
|
|
|
// Show the notification
|
|
showHtaccessNotification();
|
|
localStorage.setItem('htaccessNotificationLastShown', today);
|
|
}
|
|
|
|
function showHtaccessNotification() {
|
|
const banner = document.getElementById('htaccess-notification');
|
|
const body = document.body;
|
|
banner.classList.add('show');
|
|
body.classList.add('htaccess-shown');
|
|
}
|
|
|
|
function dismissHtaccessNotification() {
|
|
const banner = document.getElementById('htaccess-notification');
|
|
const body = document.body;
|
|
banner.classList.remove('show');
|
|
body.classList.remove('htaccess-shown');
|
|
// Remember dismissal permanently
|
|
localStorage.setItem('htaccessNotificationDismissed', 'true');
|
|
}
|
|
|
|
// Check all notification statuses when page loads
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
checkBackupStatus();
|
|
// Show AI Scanner notification with a slight delay for better UX
|
|
setTimeout(checkAIScannerStatus, 1000);
|
|
// Show .htaccess notification with additional delay for staggered effect
|
|
setTimeout(checkHtaccessStatus, 1500);
|
|
|
|
// Set active menu state based on current URL
|
|
setActiveMenuState();
|
|
});
|
|
|
|
// Function to set active menu state
|
|
function setActiveMenuState() {
|
|
const currentPath = window.location.pathname;
|
|
const allMenuItems = document.querySelectorAll('.menu-item');
|
|
|
|
// Remove all active and has-active-child classes first
|
|
allMenuItems.forEach(item => {
|
|
item.classList.remove('active', 'has-active-child');
|
|
});
|
|
|
|
// Find and activate the matching menu item
|
|
allMenuItems.forEach(item => {
|
|
const href = item.getAttribute('href');
|
|
if (href && href !== '#' && currentPath === href) {
|
|
item.classList.add('active');
|
|
|
|
// If this item is in a submenu, expand the parent
|
|
const parentSubmenu = item.closest('.submenu');
|
|
if (parentSubmenu) {
|
|
parentSubmenu.classList.add('show');
|
|
|
|
// Find the parent menu item (the one with the chevron)
|
|
const parentMenuItem = parentSubmenu.previousElementSibling;
|
|
if (parentMenuItem && parentMenuItem.classList.contains('menu-item')) {
|
|
parentMenuItem.classList.add('expanded', 'has-active-child');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
|
|
<!-- Dark Mode Toggle Script -->
|
|
<script>
|
|
// Theme switching functionality
|
|
(function() {
|
|
// Get saved theme from localStorage or default to light
|
|
const savedTheme = localStorage.getItem('cyberPanelTheme') || 'light';
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
|
|
// Update icon based on current theme
|
|
const updateThemeIcon = (theme) => {
|
|
const icon = document.getElementById('theme-icon');
|
|
if (icon) {
|
|
icon.className = theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
|
|
}
|
|
};
|
|
|
|
// Initialize icon
|
|
updateThemeIcon(savedTheme);
|
|
|
|
// Theme toggle functionality
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
if (themeToggle) {
|
|
themeToggle.addEventListener('click', () => {
|
|
const currentTheme = document.documentElement.getAttribute('data-theme');
|
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
|
|
// Update theme
|
|
document.documentElement.setAttribute('data-theme', newTheme);
|
|
localStorage.setItem('cyberPanelTheme', newTheme);
|
|
|
|
// Update icon
|
|
updateThemeIcon(newTheme);
|
|
|
|
// Dispatch custom event for any components that need to react to theme change
|
|
window.dispatchEvent(new CustomEvent('themeChanged', { detail: { theme: newTheme } }));
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
{% block footer_scripts %}{% endblock %}
|
|
</body>
|
|
</html>
|
|
{% endwith %} |