File: //proc/676643/root/usr/local/CyberCP/baseTemplate/templates/baseTemplate/index.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 }}">
<!-- 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;
}
/* 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: 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" 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>
<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">
<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 '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' %}?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');
}
// 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);
// 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 %}