File: //proc/676643/root/usr/local/CyberCP/websiteFunctions/templates/websiteFunctions/WPsiteHome.html
{% extends "baseTemplate/index.html" %}
{% load i18n %}
{% block title %}{% trans "WordPress Manager - CyberPanel" %}{% endblock %}
{% block content %}
{% load static %}
{% get_current_language as LANGUAGE_CODE %}
<!-- Current language: {{ LANGUAGE_CODE }} -->
<style>
/* WordPress Page Specific Variables */
:root {
/* WordPress-specific gradients */
--wp-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
--wp-gradient-alt: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--wp-radius-xl: 16px;
--wp-radius-lg: 12px;
--wp-radius-md: 8px;
--wp-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
--wp-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08);
}
/* Dark mode specific overrides for WordPress page */
[data-theme="dark"] {
/* WordPress-specific dark mode gradients */
--wp-gradient: linear-gradient(135deg, #7c7ff3 0%, #9b5de5 25%, #ec4899 50%, #f97316 75%, #06b6d4 100%);
--wp-gradient-alt: linear-gradient(135deg, #ec4899 0%, #f97316 100%);
--wp-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
--wp-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.4);
}
/* Container Styling */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
min-height: 100vh;
background: var(--bg-primary);
position: relative;
}
.container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(88, 86, 214, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(124, 127, 243, 0.05) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(16, 185, 129, 0.03) 0%, transparent 50%);
pointer-events: none;
}
/* Page Title Section */
#page-title {
background: var(--wp-gradient);
color: white;
padding: 50px 40px;
border-radius: var(--wp-radius-xl);
margin-bottom: 40px;
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.25);
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.2);
}
#page-title::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background:
radial-gradient(circle at 30% 70%, rgba(255,255,255,0.15) 0%, transparent 40%),
radial-gradient(circle at 70% 30%, rgba(255,255,255,0.1) 0%, transparent 40%);
animation: pulse 6s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1) rotate(0deg);
opacity: 0.6;
}
33% {
transform: scale(1.05) rotate(1deg);
opacity: 0.4;
}
66% {
transform: scale(0.98) rotate(-1deg);
opacity: 0.5;
}
}
#page-title h2 {
font-size: 36px;
font-weight: 800;
margin-bottom: 12px;
letter-spacing: -0.8px;
position: relative;
z-index: 1;
color: white;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
#page-title p {
font-size: 18px;
opacity: 0.95;
margin: 0;
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 12px;
font-weight: 500;
color: white;
}
.status-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.25);
padding: 8px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.4px;
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.status-badge:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.status-badge::before {
content: '';
width: 10px;
height: 10px;
background: var(--success-color);
border-radius: 50%;
animation: statusPulse 2s ease-in-out infinite;
box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}
@keyframes statusPulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
transform: scale(1);
}
50% {
box-shadow: 0 0 0 12px rgba(16, 185, 129, 0);
transform: scale(1.1);
}
}
/* Main Panel */
.panel {
background: var(--bg-secondary);
border-radius: var(--wp-radius-lg);
box-shadow: var(--wp-shadow-card);
border: 1px solid var(--border-color);
overflow: hidden;
position: relative;
transition: all 0.3s ease;
}
.panel:hover {
box-shadow: var(--wp-shadow-hover);
transform: translateY(-2px);
}
.panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--wp-gradient);
border-radius: var(--wp-radius-lg) var(--wp-radius-lg) 0 0;
}
.panel-body {
padding: 0;
}
/* Content Box Header */
.content-box-header {
background: var(--bg-light);
padding: 24px 32px;
margin: 0;
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
border-bottom: 1px solid var(--border-color);
letter-spacing: 0.4px;
position: relative;
overflow: hidden;
}
.content-box-header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: var(--wp-gradient);
opacity: 0.3;
}
/* Nav Tabs */
.nav-tabs {
background: var(--bg-light);
padding: 20px 32px 0;
border: none;
display: flex;
gap: 8px;
flex-wrap: wrap;
position: relative;
}
.nav-tabs::after {
content: '';
position: absolute;
bottom: 0;
left: 32px;
right: 32px;
height: 1px;
background: linear-gradient(90deg, rgba(226, 232, 240, 0.5), rgba(148, 163, 184, 0.3), rgba(226, 232, 240, 0.5));
}
.nav-tabs li {
margin-bottom: 0;
}
.nav-tabs li a {
background: transparent;
border: none;
border-radius: var(--wp-radius-md) var(--wp-radius-md) 0 0;
padding: 14px 26px;
color: var(--text-secondary);
font-weight: 600;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 15px;
letter-spacing: 0.4px;
display: flex;
align-items: center;
gap: 10px;
position: relative;
overflow: hidden;
}
.nav-tabs li a::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(248,250,252,0.6));
opacity: 0;
transition: opacity 0.3s ease;
}
.nav-tabs li a i {
font-size: 16px;
transition: all 0.3s ease;
}
.nav-tabs li.active a,
.nav-tabs li a:hover {
background: var(--bg-secondary);
color: var(--accent-color);
box-shadow: 0 -3px 12px rgba(102, 126, 234, 0.15), 0 2px 8px var(--shadow-light);
transform: translateY(-1px);
}
.nav-tabs li.active a::before,
.nav-tabs li a:hover::before {
opacity: 1;
}
.nav-tabs li.active a i,
.nav-tabs li a:hover i {
color: var(--accent-color);
transform: scale(1.1);
}
/* Tab Content */
.tab-content {
padding: 40px;
background: var(--bg-secondary);
min-height: 400px;
position: relative;
}
.tab-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(88, 86, 214, 0.02) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(124, 127, 243, 0.02) 0%, transparent 50%);
pointer-events: none;
}
.tab-pane {
animation: fadeInUp 0.4s ease;
position: relative;
z-index: 1;
}
/* Fix spacing for info sections */
.tab-pane .row {
background: var(--bg-light);
padding: 24px;
border-radius: var(--wp-radius-lg);
margin-bottom: 24px;
border: 1px solid var(--border-color);
box-shadow: 0 2px 8px var(--shadow-light);
transition: all 0.3s ease;
}
.tab-pane .row:hover {
box-shadow: 0 4px 16px var(--shadow-medium);
transform: translateY(-1px);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Enhanced Action Links */
.action-card {
background: var(--bg-secondary);
border-radius: var(--wp-radius-xl);
padding: 32px;
margin-bottom: 32px;
box-shadow: var(--wp-shadow-card);
border: 1px solid var(--border-color);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.action-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--wp-gradient);
opacity: 0;
transition: opacity 0.3s ease;
}
.action-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: var(--wp-shadow-hover);
}
.action-card:hover::before {
opacity: 0.8;
}
.action-card-title {
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 12px;
letter-spacing: 0.3px;
}
.action-card-title i {
color: var(--accent-color);
font-size: 24px;
transition: all 0.3s ease;
}
.action-card:hover .action-card-title i {
transform: rotate(360deg) scale(1.1);
color: var(--accent-color);
}
/* Quick Stats Section */
.quick-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
margin-bottom: 40px;
}
.stat-card {
background: var(--bg-secondary);
border-radius: var(--wp-radius-xl);
padding: 32px;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid var(--border-color);
box-shadow: var(--wp-shadow-card);
}
.stat-card::before {
content: '';
position: absolute;
top: -30%;
right: -20%;
width: 120px;
height: 120px;
background: var(--wp-gradient);
opacity: 0.08;
border-radius: 50%;
transition: all 0.4s ease;
}
.stat-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: var(--wp-shadow-hover);
border-color: var(--accent-color);
}
.stat-card:hover::before {
transform: scale(1.3) rotate(10deg);
opacity: 0.12;
}
.stat-icon {
width: 60px;
height: 60px;
background: var(--wp-gradient);
border-radius: var(--wp-radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
font-size: 28px;
color: white;
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
}
.stat-card:hover .stat-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4);
}
.stat-value {
font-size: 36px;
font-weight: 800;
color: var(--text-primary);
margin: 0 0 8px 0;
line-height: 1;
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.5px;
}
.stat-label {
font-size: 15px;
color: var(--text-secondary);
margin: 0;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
opacity: 0.8;
}
#WPVersion {
display: inline-block;
}
/* Enhanced Checkbox Styling */
.custom-control {
position: relative;
display: block;
min-height: 1.5rem;
padding-left: 1.5rem;
}
.custom-control-checkbox {
position: relative;
display: block;
min-height: 1.5rem;
padding-left: 2rem;
}
.custom-control-checkbox .custom-control-input {
position: absolute;
left: 0;
z-index: -1;
width: 1rem;
height: 1.25rem;
opacity: 0;
}
.custom-control-checkbox .custom-control-label {
position: relative;
margin-bottom: 0;
vertical-align: middle;
cursor: pointer;
}
.custom-control-checkbox .custom-control-label::before {
position: absolute;
top: 0.25rem;
left: -2rem;
display: block;
width: 1.25rem;
height: 1.25rem;
pointer-events: none;
content: "";
background-color: var(--bg-primary, #fff);
border: 2px solid var(--border-color);
border-radius: var(--radius-sm);
transition: var(--transition-base);
}
.custom-control-checkbox .custom-control-label::after {
position: absolute;
top: 0.25rem;
left: -2rem;
display: block;
width: 1.25rem;
height: 1.25rem;
content: "";
background: no-repeat 50% / 50% 50%;
}
.custom-control-checkbox .custom-control-input:checked ~ .custom-control-label::before {
color: var(--text-on-primary, #fff);
border-color: var(--primary-color);
background-color: var(--primary-color);
}
.custom-control-checkbox .custom-control-input:checked ~ .custom-control-label::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}
.custom-control-checkbox .custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
}
.custom-control-checkbox .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
border-color: var(--primary-color);
}
.custom-control-checkbox .custom-control-input:disabled ~ .custom-control-label,
.custom-control-checkbox .custom-control-input[disabled] ~ .custom-control-label {
color: var(--text-secondary, #6c757d);
}
.custom-control-checkbox .custom-control-input:disabled ~ .custom-control-label::before,
.custom-control-checkbox .custom-control-input[disabled] ~ .custom-control-label::before {
background-color: var(--bg-secondary, #e9ecef);
}
/* Enhanced Toggle Switch */
.custom-control-switch {
padding-left: 3.5rem;
}
.custom-control-switch .custom-control-label {
margin-bottom: 0;
cursor: pointer;
font-weight: 500;
color: var(--text-primary);
}
.custom-control-switch .custom-control-label::before {
left: -3.5rem;
width: 3.5rem;
height: 1.75rem;
pointer-events: all;
border-radius: var(--radius-full);
background-color: var(--bg-secondary, #e2e8f0);
border: 2px solid var(--border-color, #cbd5e1);
transition: all var(--transition-base);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}
.custom-control-switch .custom-control-label::after {
top: calc(0.25rem + 2px);
left: calc(-3.5rem + 4px);
width: calc(1.75rem - 8px);
height: calc(1.75rem - 8px);
background-color: var(--bg-primary, white);
border-radius: var(--radius-full);
transition: all var(--transition-base);
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.custom-control-switch .custom-control-input:checked ~ .custom-control-label::before {
background: var(--bg-gradient);
border-color: var(--primary-color);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 0 0 3px rgba(99, 102, 241, 0.2);
}
.custom-control-switch .custom-control-input:checked ~ .custom-control-label::after {
background-color: var(--bg-primary, white);
transform: translateX(1.75rem);
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
.custom-control-label {
position: relative;
margin-bottom: 0;
vertical-align: middle;
}
.custom-control-label::before,
.custom-control-label::after {
position: absolute;
top: 0.25rem;
display: block;
content: "";
}
.custom-control-input {
position: absolute;
left: 0;
z-index: -1;
width: 1rem;
height: 1.25rem;
opacity: 0;
}
.custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 0.2rem rgba(88, 86, 214, 0.25);
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
border-color: var(--primary-color);
}
.custom-control-input:disabled ~ .custom-control-label,
.custom-control-input[disabled] ~ .custom-control-label {
color: var(--text-secondary, #6c757d);
}
.custom-control-input:disabled ~ .custom-control-label::before,
.custom-control-input[disabled] ~ .custom-control-label::before {
background-color: var(--bg-secondary, #e9ecef);
}
/* Enhanced Buttons */
.btn {
padding: 14px 32px;
border-radius: var(--radius-lg);
font-weight: 700;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
font-size: 15px;
letter-spacing: 0.5px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
position: relative;
overflow: hidden;
cursor: pointer;
text-decoration: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
transform: translate(-50%, -50%);
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
}
.btn:active::before {
width: 400px;
height: 400px;
}
.btn i {
font-size: 18px;
transition: all 0.3s ease;
position: relative;
z-index: 1;
}
.btn span {
position: relative;
z-index: 1;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
color: var(--text-on-primary, white);
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-primary:hover {
transform: translateY(-4px) scale(1.05);
box-shadow: 0 12px 32px rgba(102, 126, 234, 0.5);
background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 25%, #d53f8c 50%, #e53e3e 75%, #3182ce 100%);
color: var(--text-on-primary, white);
}
.btn-primary:hover i {
transform: rotate(360deg) scale(1.2);
}
.btn-danger {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: var(--text-on-primary, white);
box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}
.btn-danger:hover {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
color: var(--text-on-primary, white);
}
.btn-default {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
color: var(--text-primary);
border: 1px solid rgba(226, 232, 240, 0.8);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.btn-default:hover {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
border-color: rgba(102, 126, 234, 0.3);
}
.btn-outline-primary {
background: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}
.btn-outline-primary:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: var(--text-on-primary, white);
border-color: transparent;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}
.btn-outline-danger {
background: transparent;
color: var(--danger-color);
border: 2px solid var(--danger-color);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}
.btn-outline-danger:hover {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: var(--text-on-primary, white);
border-color: transparent;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(239, 68, 68, 0.3);
}
/* Site Settings Section */
.settings-section {
margin-bottom: 40px;
}
.settings-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 20px;
}
.setting-item {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 25px;
display: flex;
gap: 20px;
align-items: center;
transition: var(--transition-base);
position: relative;
overflow: hidden;
}
.setting-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: var(--bg-gradient);
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.setting-item:hover {
box-shadow: var(--shadow-lg);
border-color: var(--primary-color);
}
.setting-item:hover::before {
transform: translateX(0);
}
.setting-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-light) 100%);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.setting-icon i {
font-size: 22px;
background: var(--bg-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.setting-content {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.setting-info {
flex: 1;
}
.setting-info h6 {
margin: 0 0 5px 0;
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
}
.setting-info p {
margin: 0;
font-size: 13px;
color: var(--text-secondary);
}
/* Simple checkbox styling */
.checkbox-inline {
display: inline-block;
margin: 0;
vertical-align: middle;
}
.checkbox-inline input[type="checkbox"] {
accent-color: var(--primary-color);
transform: scale(1.2);
}
/* Enhanced Tables */
.modern-table-wrapper {
background: var(--bg-card);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
margin-top: 20px;
}
.table {
margin: 0;
border: none;
border-radius: 0;
}
.table thead {
background: var(--bg-gradient);
}
.table thead th {
border: none;
color: var(--text-on-primary, white);
font-weight: 600;
padding: 18px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.6px;
}
.table tbody tr {
transition: all var(--transition-base);
border-bottom: 1px solid var(--border-light);
}
.table tbody tr:last-child {
border-bottom: none;
}
.table tbody tr:hover {
background: var(--bg-hover);
box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}
.table tbody td {
padding: 18px;
border: none;
vertical-align: middle;
color: var(--text-primary);
}
.table-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* Forms */
.form-group {
margin-bottom: 25px;
}
.form-control {
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 12px 15px;
font-size: 15px;
transition: all 0.3s ease;
background: var(--bg-secondary, white);
}
.form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(88, 86, 214, 0.1);
outline: none;
}
.control-label {
font-weight: 500;
color: var(--text-primary);
margin-bottom: 8px;
font-size: 14px;
letter-spacing: 0.3px;
}
/* Progress Bar */
.progress {
height: 8px;
border-radius: 4px;
background: var(--border-color);
overflow: hidden;
margin-top: 10px;
}
.progress-bar {
background: var(--primary-color);
transition: width 0.3s ease;
}
/* Alerts */
.alert {
border-radius: var(--radius-md);
border: none;
padding: 15px 20px;
margin-bottom: 20px;
}
.alert-success {
background: var(--success-bg, #d1fae5);
color: var(--success-text, #065f46);
}
.alert-danger {
background: var(--danger-bg, #fee2e2);
color: var(--danger-text, #991b1b);
}
.alert-warning {
background: var(--warning-bg, #fef3c7);
color: var(--warning-text, #92400e);
border: 1px solid var(--warning-border, #fde68a);
}
/* Labels */
.label {
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.label-success {
background: var(--success-bg, #d1fae5);
color: var(--success-text, #065f46);
}
/* Modal Styling */
.modal-content {
border-radius: var(--radius-lg);
border: none;
box-shadow: var(--shadow-md);
}
.modal-header {
background: var(--bg-light);
border-bottom: 1px solid var(--border-color);
padding: 20px 25px;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-title {
font-weight: 600;
color: var(--text-primary);
}
.modal-body {
padding: 25px;
}
.modal-footer {
background: var(--bg-light);
border-top: 1px solid var(--border-color);
padding: 15px 25px;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
/* Help Tooltip */
.help_test_domain {
background: var(--text-primary);
padding: 12px 15px;
display: none;
position: absolute;
z-index: 1000;
text-align: left;
color: var(--text-on-primary, white);
font-size: 13px;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
max-width: 250px;
line-height: 1.5;
}
#help:hover + .help_test_domain {
display: block;
}
/* Loading Spinner */
#wordpresshomeloading {
width: 24px;
height: 24px;
vertical-align: middle;
margin-left: 10px;
}
/* Animated Background Elements */
@keyframes float-slow {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
@keyframes float-fast {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-30px) scale(1.1); }
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--bg-light);
}
::-webkit-scrollbar-thumb {
background: var(--bg-gradient);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-hover);
}
/* Responsive */
@media (max-width: 768px) {
.container {
padding: 15px;
}
#page-title {
padding: 25px;
border-radius: var(--radius-lg);
}
#page-title h2 {
font-size: 24px;
}
.tab-content {
padding: 20px;
}
.nav-tabs {
padding: 10px 20px 0;
gap: 5px;
}
.nav-tabs li a {
padding: 10px 16px;
font-size: 13px;
}
.site-overview-grid {
grid-template-columns: 1fr;
}
.quick-stats {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.settings-grid {
grid-template-columns: 1fr;
}
.action-links-grid {
grid-template-columns: 1fr;
}
.bottom-action-links {
flex-direction: column;
width: 100%;
}
.bottom-action-link {
width: 100%;
justify-content: center;
}
}
/* Additional custom styles */
.center-div {
display: flex;
justify-content: center;
align-items: center;
}
.no-margin {
margin: 0;
}
hr {
border: none;
border-top: 1px solid var(--border-color);
margin: 30px 0;
}
/* Fix for example-box-wrapper */
.example-box-wrapper {
padding: 0 !important;
}
/* Tab buttons action area */
.tab-action-area {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 25px;
padding: 20px;
background: var(--bg-light);
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
}
.action-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* Enhanced nav tabs design */
.nav-tabs li a {
position: relative;
}
.nav-tabs li a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 3px;
background: var(--bg-gradient);
transform: translateX(-50%);
transition: width 0.3s ease;
}
.nav-tabs li.active a::after,
.nav-tabs li a:hover::after {
width: 80%;
}
/* Loading animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.fa-spin {
animation: spin 1s linear infinite;
}
/* Enhanced form elements */
.form-card {
background: var(--bg-card);
padding: 30px;
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
margin-bottom: 25px;
}
/* Badge styles */
.badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: var(--radius-full);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
}
.badge-success {
background: var(--success-color);
color: var(--text-on-primary, white);
}
.badge-danger {
background: var(--danger-color);
color: var(--text-on-primary, white);
}
.badge-info {
background: var(--info-color);
color: var(--text-on-primary, white);
}
/* Additional Modern Enhancements */
/* Animated gradient backgrounds */
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.gradient-animate {
background-size: 200% 200%;
animation: gradientShift 10s ease infinite;
}
/* Plugin/Theme Tables Enhancement */
.plugins-themes-section {
position: relative;
}
.table-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
/* Enhanced existing staging section */
.existing-staging-section {
margin-top: 50px;
padding-top: 30px;
border-top: 2px solid var(--border-color);
}
.existing-staging-section h5 {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 20px;
font-size: 18px;
display: flex;
align-items: center;
gap: 10px;
}
.existing-staging-section h5::before {
content: '';
width: 4px;
height: 20px;
background: var(--bg-gradient);
border-radius: 2px;
}
/* Progress indicators */
.progress {
height: 8px;
border-radius: 4px;
background: var(--border-color);
overflow: hidden;
margin-top: 10px;
}
.progress-bar {
background: var(--bg-gradient);
transition: width 0.3s ease;
height: 100%;
}
/* Enhanced modals */
.modal-content {
border-radius: var(--radius-xl);
border: none;
box-shadow: var(--shadow-xl);
overflow: hidden;
}
.modal-header {
background: var(--bg-gradient);
color: var(--text-on-primary, white);
border-bottom: none;
padding: 20px 25px;
}
.modal-title {
font-weight: 600;
font-size: 18px;
}
.modal-body {
padding: 30px;
}
.modal-footer {
background: var(--bg-light);
border-top: 1px solid var(--border-color);
padding: 15px 25px;
}
/* Bottom Actions Enhancement */
.bottom-actions {
background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-card) 100%);
padding: 30px 40px;
margin: 40px -30px -30px;
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
border-top: 1px solid var(--border-color);
position: relative;
overflow: hidden;
}
.bottom-actions::before {
content: '';
position: absolute;
top: -100px;
left: -100px;
width: 300px;
height: 300px;
background: var(--bg-gradient);
opacity: 0.05;
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bottom-action-links {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.bottom-action-link {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 28px;
background: var(--bg-card);
color: var(--text-primary);
border-radius: var(--radius-full);
text-decoration: none;
transition: var(--transition-base);
font-weight: 600;
border: 2px solid transparent;
font-size: 14px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.bottom-action-link::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: var(--bg-gradient);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
z-index: 0;
}
.bottom-action-link:hover::before {
width: 300px;
height: 300px;
}
.bottom-action-link:hover {
color: var(--text-on-primary, white);
transform: translateY(-3px) scale(1.05);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color);
}
.bottom-action-link i,
.bottom-action-link span {
position: relative;
z-index: 1;
transition: var(--transition-base);
}
.bottom-action-link i {
font-size: 16px;
}
.bottom-action-link:hover i {
transform: rotate(360deg);
}
/* Fix panel padding */
.panel-body {
padding: 0 !important;
}
/* Fix row spacing in General tab */
#tab1 .row {
margin-left: 0;
margin-right: 0;
}
/* Staging Section Styles */
.staging-section {
padding: 0;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.section-header h4 {
margin: 0;
color: var(--text-primary);
font-weight: 600;
font-size: 24px;
}
.section-header p {
margin: 5px 0 0 0;
color: var(--text-secondary);
}
.restore-link {
padding: 8px 16px;
background: var(--bg-light);
color: var(--text-primary);
text-decoration: none;
border-radius: var(--radius-sm);
font-size: 14px;
transition: all 0.3s ease;
border: 1px solid var(--border-color);
}
.restore-link:hover {
background: var(--primary-color);
color: var(--text-on-primary, white);
text-decoration: none;
border-color: var(--primary-color);
}
.form-card {
background: var(--bg-light);
padding: 30px;
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
margin-bottom: 30px;
}
.create-staging-form .form-group {
margin-bottom: 25px;
}
.domain-selection-box {
background: var(--bg-primary, white);
padding: 20px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
}
.domain-option-content {
margin-top: 15px;
padding: 15px;
background: var(--bg-light);
border-radius: var(--radius-sm);
}
.input-group {
display: flex;
width: 100%;
}
.input-group .form-control {
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.input-group-append {
margin-left: -1px;
}
.domain-select {
border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
border-left: 0;
background: var(--bg-primary, white);
min-width: 200px;
}
.existing-staging-section {
margin-top: 50px;
padding-top: 30px;
border-top: 1px solid var(--border-color);
}
.existing-staging-section h5 {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 20px;
font-size: 18px;
}
.staging-table {
background: var(--bg-primary, white);
}
/* Backup Section Styles */
.backup-section {
padding: 0;
}
.backup-form {
margin-top: 30px;
}
.alert-modern {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 20px;
border-radius: var(--radius-md);
border: 1px solid;
}
.alert-modern.alert-info {
background: var(--info-bg, #e0f2fe);
color: var(--info-text, #0369a1);
border-color: var(--info-border, #7dd3fc);
}
.alert-modern i {
font-size: 20px;
flex-shrink: 0;
margin-top: 2px;
}
.alert-modern p {
margin: 0 0 8px 0;
}
.alert-modern p:last-child {
margin-bottom: 0;
}
.alert-modern a {
color: var(--info-accent, #0284c7);
font-weight: 500;
}
.alert-modern a:hover {
text-decoration: underline;
}
/* Button styling improvements */
.btn-lg {
padding: 12px 32px;
font-size: 16px;
}
/* Form improvements */
.form-group.row {
align-items: center;
}
.form-group.row .control-label {
font-weight: 500;
color: var(--text-primary);
}
/* Site Overview Section */
.site-overview-section {
margin-bottom: 40px;
}
.section-title {
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 12px;
position: relative;
}
.section-title::before {
content: '';
width: 5px;
height: 28px;
background: var(--bg-gradient);
border-radius: 3px;
}
.site-overview-grid {
display: grid;
grid-template-columns: 380px 1fr;
gap: 30px;
margin-bottom: 30px;
}
.site-preview-card {
background: var(--bg-card);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
overflow: hidden;
position: relative;
transition: var(--transition-base);
}
.site-preview-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
}
.preview-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-light) 100%);
border-bottom: 1px solid var(--border-color);
}
.preview-header h6 {
margin: 0;
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.btn-refresh {
background: var(--bg-primary, white);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 8px 12px;
cursor: pointer;
transition: var(--transition-base);
color: var(--text-secondary);
}
.btn-refresh:hover {
background: var(--primary-color);
color: var(--text-on-primary, white);
border-color: var(--primary-color);
transform: rotate(180deg);
}
.preview-container {
position: relative;
width: 100%;
height: 220px;
overflow: hidden;
background: linear-gradient(45deg, #f3f4f6 25%, transparent 25%, transparent 75%, #f3f4f6 75%, #f3f4f6),
linear-gradient(45deg, #f3f4f6 25%, transparent 25%, transparent 75%, #f3f4f6 75%, #f3f4f6);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
}
.preview-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
position: relative;
z-index: 1;
}
.preview-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(139, 92, 246, 0.9) 100%);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 2;
}
.preview-container:hover .preview-overlay {
opacity: 1;
}
.preview-container:hover img {
transform: scale(1.1);
}
.preview-link {
color: var(--text-on-primary, white);
text-decoration: none;
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 28px;
background: rgba(255, 255, 255, 0.2);
border: 2px solid white;
border-radius: var(--radius-full);
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.preview-link:hover {
background: var(--bg-primary, white);
color: var(--primary-color);
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.preview-actions {
padding: 20px;
display: flex;
gap: 12px;
justify-content: center;
background: var(--bg-light);
border-top: 1px solid var(--border-color);
}
.preview-actions .btn {
flex: 1;
}
.quick-actions-card {
background: var(--bg-card);
border-radius: var(--radius-xl);
padding: 30px;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
height: 100%;
position: relative;
overflow: hidden;
}
.quick-actions-card::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 200px;
height: 200px;
background: var(--bg-gradient);
opacity: 0.05;
border-radius: 50%;
}
.quick-actions-card h5 {
margin: 0 0 25px 0;
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 10px;
}
.quick-actions-card h5::before {
content: '⚡';
font-size: 20px;
}
.action-links-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.action-links-grid a {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 20px;
background: linear-gradient(135deg, var(--bg-light) 0%, white 100%);
color: var(--text-primary);
border-radius: var(--radius-lg);
text-decoration: none;
transition: var(--transition-base);
font-weight: 600;
border: 2px solid transparent;
font-size: 14px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.action-links-grid a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-gradient);
opacity: 0;
transition: var(--transition-base);
z-index: 0;
}
.action-links-grid a:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-color);
color: var(--text-on-primary, white);
}
.action-links-grid a:hover::before {
opacity: 1;
}
.action-links-grid a > * {
position: relative;
z-index: 1;
}
.action-links-grid a svg {
width: 20px;
height: 20px;
transition: var(--transition-base);
flex-shrink: 0;
}
.action-links-grid a:hover svg path {
fill: white;
}
.action-links-grid a i {
font-size: 18px;
width: 20px;
text-align: center;
flex-shrink: 0;
background: var(--bg-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: var(--transition-base);
}
.action-links-grid a:hover i {
-webkit-text-fill-color: var(--text-on-primary, white);
}
/* Responsive improvements */
@media (max-width: 992px) {
.site-overview-grid {
grid-template-columns: 1fr;
}
.site-preview-card {
max-width: 500px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.section-header {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.form-card {
padding: 20px;
}
.form-group.row .control-label {
margin-bottom: 10px;
}
.domain-select {
min-width: auto;
}
.action-links-grid {
grid-template-columns: 1fr;
}
.site-overview-grid {
gap: 20px;
}
.quick-actions-card {
padding: 20px;
}
}
/* Custom checkbox styling */
.custom-control-checkbox {
position: relative;
display: block;
min-height: 1.5rem;
padding-left: 1.5rem;
}
.custom-control-checkbox .custom-control-input {
position: absolute;
left: 0;
z-index: -1;
width: 1rem;
height: 1.25rem;
opacity: 0;
}
.custom-control-checkbox .custom-control-label {
position: relative;
margin-bottom: 0;
vertical-align: middle;
cursor: pointer;
}
.custom-control-checkbox .custom-control-label::before {
position: absolute;
top: 0.25rem;
left: -1.5rem;
display: block;
width: 1rem;
height: 1rem;
pointer-events: none;
content: "";
background-color: var(--bg-primary, #fff);
border: 1px solid var(--border-color, #adb5bd);
border-radius: 0.25rem;
}
.custom-control-checkbox .custom-control-label::after {
position: absolute;
top: 0.25rem;
left: -1.5rem;
display: block;
width: 1rem;
height: 1rem;
content: "";
background: no-repeat 50% / 50% 50%;
}
.custom-control-checkbox .custom-control-input:checked ~ .custom-control-label::before {
color: var(--text-on-primary, #fff);
border-color: var(--primary-color);
background-color: var(--primary-color);
}
.custom-control-checkbox .custom-control-input:checked ~ .custom-control-label::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}
/* Input group styling */
.input-group {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: stretch;
width: 100%;
}
.input-group > .form-control {
position: relative;
flex: 1 1 auto;
width: 1%;
min-width: 0;
margin-bottom: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group-addon {
padding: 0;
margin-bottom: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.25;
text-align: center;
white-space: nowrap;
border: 1px solid var(--border-color, #ced4da);
border-radius: 0.25rem;
display: flex;
align-items: center;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 0;
}
.input-group-addon select {
padding: 0.375rem 0.75rem;
margin: 0;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
background: var(--bg-secondary, white);
}
</style>
<script>
function refreshSitePreview() {
var previewImg = document.getElementById('sitePreviewImage');
var currentSrc = previewImg.src;
// Add a spinner/loading state
previewImg.style.opacity = '0.5';
// Force reload by adding timestamp
var baseUrl = currentSrc.split('&t=')[0];
previewImg.src = baseUrl + '&t=' + new Date().getTime();
// Restore opacity when loaded
previewImg.onload = function() {
previewImg.style.opacity = '1';
};
}
</script>
<div style="display: none" id="wordpresshome"></div>
<div style="display: none" id="WPid">{{ wpsite.id }}</div>
<div ng-controller="WPsiteHome" class="container">
<div id="page-title">
<h2>{{ wpsite.title }}</h2>
<p>
<span>{{ wpsite.path }}</span>
<span class="status-badge">Active</span>
<img style="display: none" id="wordpresshomeloading" ng-hide="wordpresshomeloading"
src="{% static 'images/loading.gif' %}">
</p>
</div>
<div class="panel">
<div class="panel-body">
<h3 class="content-box-header">
{% trans "WordPress Manager" %}
</h3>
<div class="example-box-wrapper">
<ul class="nav-responsive nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab"
aria-selected="true"><i class="fas fa-cog"></i> General</a></li>
<li class=""><a href="#tab2" ng-click="GetCurrentPlugins()"
data-toggle="tab"><i class="fas fa-plug"></i> Plugins</a></li>
<li class=""><a href="#tab3" ng-click="GetCurrentThemes()"
data-toggle="tab"><i class="fas fa-palette"></i> Themes</a></li>
<li><a href="#tab4" data-toggle="tab" ng-click="fetchstaging()"><i class="fas fa-clone"></i> Staging</a></li>
<li><a href="#tab5" data-toggle="tab"><i class="fas fa-download"></i> Backups</a></li>
<li><a ng-click="fetchDatabase()" href="#tab6" data-toggle="tab"><i class="fas fa-database"></i> Database</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<!-- Quick Stats -->
<div class="quick-stats">
<div class="stat-card">
<div class="stat-icon">
<i class="fas fa-globe"></i>
</div>
<p class="stat-value">Active</p>
<p class="stat-label">Site Status</p>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="fab fa-wordpress"></i>
</div>
<p class="stat-value" id="WPVersion">Loading...</p>
<p class="stat-label">WordPress Version</p>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="fab fa-php"></i>
</div>
<p class="stat-value">{{ wpsite.owner.phpSelection }}</p>
<p class="stat-label">PHP Version</p>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="fas fa-server"></i>
</div>
<p class="stat-value">LiteSpeed</p>
<p class="stat-label">Web Server</p>
</div>
</div>
<!-- Site Preview and Quick Actions -->
<div class="site-overview-section">
<h3 class="section-title">Site Overview</h3>
<div class="site-overview-grid">
<!-- Site Preview Card -->
<div class="site-preview-card">
<div class="preview-header">
<h6>🖼️ Live Preview</h6>
<button class="btn-refresh" onclick="refreshSitePreview()" title="Refresh preview">
<i class="fas fa-sync-alt"></i>
</button>
</div>
<div class="preview-container">
<img id="sitePreviewImage"
src="https://api.microlink.io/?url=http://{{ wpsite.FinalURL }}&screenshot=true&meta=false&embed=screenshot.url"
alt="{{ wpsite.title }}"
onerror="this.onerror=null; this.src='https://s.wordpress.org/style/images/about/WordPress-logotype-standard.png';">
<div class="preview-overlay">
<a href="http://{{ wpsite.FinalURL }}" target="_blank" class="preview-link">
<i class="fas fa-external-link-alt"></i>
Visit Live Site
</a>
</div>
</div>
<div class="preview-actions">
<a target="_blank" href="http://{{ wpsite.FinalURL }}" class="btn btn-sm btn-default">
<i class="fas fa-external-link-alt"></i> Open Site
</a>
<a target="_blank" href="{% url 'AutoLogin' %}?id={{ wpsite.id }}" class="btn btn-sm btn-primary">
<i class="fas fa-sign-in-alt"></i> WP Admin
</a>
</div>
</div>
<!-- Quick Actions Card -->
<div class="quick-actions-card">
<h5>Quick Actions</h5>
<div class="action-links-grid">
<a target="_blank" href="/filemanager/{{ wpsite.owner.domain }}?path={{ wpsite.path }}">
<i class="fas fa-folder-open"></i>
File Manager
</a>
<a target="_blank" href="/websites/{{ wpsite.owner.domain }}/manageGIT">
<i class="fab fa-git-alt"></i>
Git Manager
</a>
<a href="/dataBases/phpMyAdmin" target="_blank">
<i class="fas fa-database"></i>
phpMyAdmin
</a>
<a href="/websites/{{ wpsite.owner.domain }}">
<i class="fas fa-globe"></i>
Domain Settings
</a>
</div>
</div>
</div>
</div>
<!-- Site Settings Section -->
<div class="settings-section">
<h3 class="section-title">Site Settings</h3>
<div class="settings-grid">
<div class="setting-item">
<div class="setting-icon">
<i class="fas fa-rocket"></i>
</div>
<div class="setting-content">
<div class="setting-info">
<h6>LSCache</h6>
<p>LiteSpeed caching for better performance</p>
</div>
<label class="checkbox-inline">
<input ng-click="UpdateWPSettings('lscache')"
type="checkbox"
id="lscache"
style="width: 18px; height: 18px; margin-right: 8px; cursor: pointer;">
</label>
</div>
</div>
<div class="setting-item">
<div class="setting-icon">
<i class="fas fa-lock"></i>
</div>
<div class="setting-content">
<div class="setting-info">
<h6>Password Protection</h6>
<p>Restrict access with authentication</p>
</div>
<div id="prsswdprodata">
</div>
</div>
</div>
<div class="setting-item">
<div class="setting-icon">
<i class="fas fa-bug"></i>
</div>
<div class="setting-content">
<div class="setting-info">
<h6>Debugging</h6>
<p>Display errors for development</p>
</div>
<label class="checkbox-inline">
<input ng-click="UpdateWPSettings('debugging')"
type="checkbox"
id="debugging"
style="width: 18px; height: 18px; margin-right: 8px; cursor: pointer;">
</label>
</div>
</div>
<div class="setting-item">
<div class="setting-icon">
<i class="fas fa-search"></i>
</div>
<div class="setting-content">
<div class="setting-info">
<h6>Search Indexing</h6>
<p>Allow search engines to index site</p>
</div>
<label class="checkbox-inline">
<input type="checkbox"
id="searchIndex"
ng-click="UpdateWPSettings('searchIndex')"
ng-checked="searchIndex == 1"
style="width: 18px; height: 18px; margin-right: 8px; cursor: pointer;">
</label>
</div>
</div>
<div class="setting-item">
<div class="setting-icon">
<i class="fas fa-tools"></i>
</div>
<div class="setting-content">
<div class="setting-info">
<h6>Maintenance Mode</h6>
<p>Show maintenance message to visitors</p>
</div>
<label class="checkbox-inline">
<input ng-click="UpdateWPSettings('maintenanceMode')"
type="checkbox"
id="maintenanceMode"
style="width: 18px; height: 18px; margin-right: 8px; cursor: pointer;">
</label>
</div>
</div>
<div class="setting-item">
<div class="setting-icon">
<i class="fas fa-clock"></i>
</div>
<div class="setting-content">
<div class="setting-info">
<h6>WP Cron</h6>
<p>Disable built-in WordPress cron</p>
</div>
<label class="checkbox-inline">
<input ng-click="UpdateWPSettings('Wpcron')"
type="checkbox"
id="Wpcron"
style="width: 18px; height: 18px; margin-right: 8px; cursor: pointer;">
</label>
</div>
</div>
</div>
</div>
<span style="display: none" id="#checkjq"></span>
</div>
<div class="tab-pane" id="tab2">
<div class="tab-action-area">
<div>
<h4 style="margin: 0; font-weight: 600; color: var(--text-primary);">Installed Plugins</h4>
<p style="margin: 5px 0 0 0; color: var(--text-secondary); font-size: 14px;">Manage your WordPress plugins</p>
</div>
<div class="action-buttons">
<a ng-click="UpdatePlugins('all')"
href="javascript:void(0);"
class="btn btn-primary">
<i class="fas fa-sync-alt"></i>
Update All
</a>
<a ng-click="UpdatePlugins('selected')"
href="javascript:void(0);"
class="btn btn-default">
<i class="fas fa-check-circle"></i>
Update Selected
</a>
<button data-toggle="modal" data-target="#DeleteWebsite"
ng-click="DeletePlugins('selected')"
aria-label=""
class="btn btn-danger"
type="button">
<i class="fas fa-trash"></i>
Delete Selected
</button>
</div>
</div>
<table class="table table-hover mb-0">
<thead>
<tr>
<th>
{% comment %}<div class="custom-control custom-checkbox" style="padding-left: 0px">
<input type="checkbox" id="CheckAll">
<label for="CheckAll"></label>
</div>{% endcomment %}
</th>
<th>Plugin</th>
<th>State</th>
<th>Updates</th>
<th>Version</th>
<th>Delete</th>
</tr>
</thead>
<tbody id="PluginBody">
</tbody>
</table>
</div>
<div class="tab-pane" id="tab3">
<div class="tab-action-area">
<div>
<h4 style="margin: 0; font-weight: 600; color: var(--text-primary);">Installed Themes</h4>
<p style="margin: 5px 0 0 0; color: var(--text-secondary); font-size: 14px;">Manage your WordPress themes</p>
</div>
<div class="action-buttons">
<a ng-click="UpdateThemes('all')" href="javascript:void(0);"
class="btn btn-primary">
<i class="fas fa-sync-alt"></i>
Update All
</a>
<a ng-click="UpdateThemes('selected')"
href="javascript:void(0);"
class="btn btn-default">
<i class="fas fa-check-circle"></i>
Update Selected
</a>
<button data-toggle="modal" data-target="#DeleteWebsite"
ng-click="DeleteThemes('selected')"
aria-label=""
class="btn btn-danger"
type="button">
<i class="fas fa-trash"></i>
Delete Selected
</button>
</div>
</div>
<table class="table table-hover mb-0">
<thead>
<tr>
<th>
{% comment %}<div class="custom-control custom-checkbox" style="padding-left: 0px">
<input type="checkbox" id="CheckAll">
<label for="CheckAll"></label>
</div>{% endcomment %}
</th>
<th>Theme</th>
<th>State</th>
<th>Updates</th>
<th>Version</th>
<th>Delete</th>
</tr>
</thead>
<tbody id="ThemeBody">
</tbody>
</table>
</div>
<div class="tab-pane" id="tab4">
<div class="staging-section">
<div class="section-header">
<h4>Create Staging Site</h4>
<p class="text-muted">Create a copy of your WordPress site for testing and development</p>
</div>
<div ng-hide="stagingDetailsForm" class="create-staging-form">
<div class="form-card">
<div class="form-group row">
<label class="col-sm-3 control-label">Staging Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="stagingName" placeholder="Enter staging site name (e.g., staging, dev, test)">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 control-label">Staging Domain</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="stagingDomainName"
ng-model="stagingDomainName"
placeholder="Enter staging domain (e.g., staging.example.com)"
required>
<small class="form-text text-muted">Enter the full domain name for your staging site</small>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12 text-center">
<button ng-click="CreateStagingNow()" class="btn btn-primary btn-lg">
<i class="fas fa-clone"></i>
Create Staging Site
</button>
<div id="stagingStatus" style="margin-top: 15px; font-weight: 500;"></div>
</div>
</div>
</div>
</div>
<div style="margin-top: 1%" ng-hide="installationProgress" class="form-group">
<div class="row">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-7">
<div class="alert alert-success text-center">
<h2>{$ currentStatus $}</h2>
</div>
<div class="progress">
<div id="installProgress" class="progress-bar"
role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100"
style="width:0%">
<span class="sr-only">70% Complete</span>
</div>
</div>
<div ng-hide="errorMessageBox" class="alert alert-danger">
<p>{% trans "Error message:" %} {$ errorMessage $}</p>
</div>
<div ng-hide="success" class="alert alert-success">
<p>{% trans "Website succesfully created." %}</p>
</div>
<div ng-hide="couldNotConnect" class="alert alert-danger">
<p>{% trans "Could not connect to server. Please refresh this page." %}</p>
</div>
<div style="margin-top: 20px; text-align: center;">
<button type="button" ng-disabled="goBackDisable"
ng-click="goBack()"
class="btn btn-default">
<i class="fas fa-arrow-left"></i>
{% trans "Go Back" %}
</button>
</div>
</div>
</div>
</div>
<!-- Existing Staging Sites -->
<div class="existing-staging-section" style="margin-top: 40px; clear: both;">
<div class="section-header">
<h4>Existing Staging Sites</h4>
<p class="text-muted">Manage your staging environments</p>
</div>
<div class="form-card">
<div class="table-responsive">
<table class="table table-hover staging-table mb-0">
<thead>
<tr>
<th>Name</th>
<th>Domain</th>
<th>Path</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="StagingBody">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab5">
<div class="backup-section">
<div class="section-header">
<h4>{% trans "Create Backup" %}</h4>
<a href="{% url 'RestoreBackups' %}" class="restore-link">
<i class="fas fa-undo"></i> {% trans "Restore Backups" %}
</a>
</div>
<div class="alert alert-info alert-modern">
<i class="fas fa-info-circle"></i>
<div>
<p>This feature will create a backup of your WordPress website.</p>
<p>For scheduled remote backups of your entire site, including email accounts and DNS records, <a href="/backup/OneClickBackups">click here</a>.</p>
</div>
</div>
<div ng-hide="installationDetailsForm" class="backup-form">
<div class="form-card">
<div class="form-group row">
<label class="col-sm-3 control-label">{% trans "Backup Type" %}</label>
<div class="col-sm-9">
<select id="backuptype" class="form-control">
<option value="1">Website and Database Both</option>
<option value="2">Only Website Data</option>
<option value="3">Only Database</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12 text-center">
<button type="button" id="createbackupbutton"
ng-click="CreateBackup()"
class="btn btn-primary btn-lg">
<i class="fas fa-download"></i>
{% trans "Create Backup" %}
</button>
<div id="backupStatus" style="margin-top: 15px; font-weight: 500;"></div>
</div>
</div>
</div>
</div>
<div style="margin-top: 1%" ng-hide="installationProgress"
class="form-group">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-7">
<div class="alert alert-success text-center">
<h2>{$ currentStatus $}</h2>
</div>
<div class="progress">
<div id="installProgressbackup" class="progress-bar"
role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100"
style="width:0%">
<span class="sr-only">70% Complete</span>
</div>
</div>
<div ng-hide="errorMessageBox" class="alert alert-danger">
<p>{% trans "Error message:" %} {$ errorMessage $}</p>
</div>
<div ng-hide="success" class="alert alert-success">
<p>{% trans "Backup succesfully created." %}</p>
</div>
<div ng-hide="couldNotConnect" class="alert alert-danger">
<p>{% trans "Could not connect to server. Please refresh this page." %}</p>
</div>
</div>
</div>
<div ng-hide="installationProgress" class="form-group center-div">
<div class="col-sm-12">
<button type="button" ng-disabled="goBackDisable"
ng-click="goBack()"
class="btn btn-default center-div">
<i class="fas fa-arrow-left"></i>
{% trans "Go Back" %}
</button>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab6">
<div class="panel-body" style="padding: 0;">
<h4 style="margin-bottom: 25px; color: var(--text-primary); font-weight: 600;">
{% trans "Database Information" %}
</h4>
<div class="example-box-wrapper">
<form action="/" class="form-horizontal bordered-row panel-body">
<div class="form-group">
<label class="col-sm-2 control-label mb-5"
style="padding-top: 0px;">{% trans "Database Name" %}</label>
<div class="col-sm-1 mb-10">
<a target="_blank" href="/dataBases/phpMyAdmin">
<div id="DB_Name" class="mb-10 text-bold"></div>
</a>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label mb-5"
style="padding-top: 0px;">{% trans "Database User" %}</label>
<div class="col-sm-1 mb-10">
<div id="DB_User" class="mb-10 text-bold"></div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label mb-5"
style="padding-top: 0px;">{% trans "Table Prefix" %}</label>
<div class="col-sm-1 mb-10">
<div id="tableprefix" class="mb-10 text-bold"></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="bottom-actions">
<div class="bottom-action-links">
<a href="/websites/{{ wpsite.owner.domain }}" class="bottom-action-link">
<i class="fas fa-th-large"></i>
<span>Manage Application</span>
</a>
<a data-toggle="modal"
data-target="#autoUpdateConfig"
href="javascript: void(0);"
class="bottom-action-link">
<i class="fas fa-sync-alt"></i>
<span>Autoupdate Configurations</span>
</a>
<a data-toggle="modal"
data-target="#securitymodel"
href="javascript: void(0);"
class="bottom-action-link">
<i class="fas fa-shield-alt"></i>
<span>Security</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!------------------MOdael for passwd protection-------->
<div id="Passwordprotection" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Enable Password Protection
<img ng-hide="$parent.cyberPanelLoading"
src="/static/images/loading.gif"
style="display: none;">
</h4>
</div>
<div class="modal-body" style="height: 100px;">
<div>
<label class="col-sm-4">Username</label>
<input ng-model="$parent.PPUsername" required class="col-lg-8"
type="text" placeholder="Username">
</div>
<div style="margin-top: 36px;">
<label class="col-sm-4">Password</label>
<input ng-model="$parent.PPPassword" required class="col-lg-8"
type="password" placeholder="*******************">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
ng-click="UpdateWPSettings('PasswordProtection')">Yes
</button>
<button type="button" ng-disabled="savingSettings"
class="btn btn-default" data-dismiss="modal">
Cancel
</button>
</div>
</div>
</div>
</div>
<!------------------End MOdael for passwd protection-------->
<!-------Start Model of AutoUpdateCongiguration-->
<div id="autoUpdateConfig" class="modal fade" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">{% trans "Updates" %}</h4>
</div>
<div class="modal-body">
<form>
<h4 style="margin: 2%">Configure setting for automatic
updates.</h4>
<div class="row">
<label class="col-lg-6">Automatic Updates
(Currently:
{{ wpsite.AutoUpdates }})</label>
<div class="col-lg-6">
<select id="AutomaticUpdates"
style="padding: 10px">
<option>Disabled</option>
<option>Minor and Security Updates</option>
<option>All minor and major</option>
</select>
</div>
</div>
<div class="row">
<label class="col-lg-4">Plugins
(Currently: {{ wpsite.PluginUpdates }})</label>
<div class="col-lg-8">
<select id="Plugins"
style="padding: 10px">
<option>Enabled</option>
<option>Disabled</option>
</select>
</div>
</div>
<div class="row">
<label class="col-lg-4">Themes
(Currently: {{ wpsite.ThemeUpdates }})</label>
<div class="col-lg-8">
<select id="Themes"
style="padding: 10px">
<option>Enabled</option>
<option>Disabled</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
ng-click="SaveUpdateConfig()">Save
</button>
<button type="button" ng-disabled="savingSettings"
class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
<!-- /.modal-dialog -->
</div>
<!-------End Model of AutoUpdateCongiguration-->
<!-------Start Model of Security-->
<div id="securitymodel" class="modal fade" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">{% trans "Security" %}<img style="display: none"
id="wordpresshomeloadingsec"
ng-hide="wordpresshomeloading"
src="{% static 'images/loading.gif' %}"></h4>
</div>
<div class="modal-body center-div">
<div class="alert alert-warning">
<h4 class="alert-title">Status</h4>
<p id="SecurityResult"></p>
</div>
<button
data-toggle="modal"
data-target="#DeleteMember" aria-label=""
ng-click="dataintegrity()"
type="button" class="btn btn-outline-primary">
<i class="fas fa-check-circle"></i>
Data Integrity
</button>
<button
data-toggle="modal"
data-target="#DeleteMember" aria-label=""
ng-click="installwpcore()"
type="button" class="btn btn-outline-primary" style="margin-left: 10px;">
<i class="fas fa-redo"></i>
Re-Install WP Core
</button>
</div>
</div>
</div>
<!-- /.modal-dialog -->
</div>
<!-------End Model of Security-->
<div id="DeployToProduction" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">DeployToProduction
<img ng-hide="$parent.cyberPanelLoading"
src="/static/images/loading.gif"
style="display: none;">
</h4>
</div>
<div class="modal-body">
<p class="no-margin">When you deploy a
staging site to production, the main
site is completely restored with the
staging site, so if you have made
any changes to main site they will
be lost.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
ng-click="FinalDeployToProduction()" data-dismiss="modal">Yes
</button>
<button type="button" ng-disabled="savingSettings"
class="btn btn-default" data-dismiss="modal">
Cancel
</button>
</div>
</div>
</div>
</div>
</div>
{% endblock %}