mirror of
https://github.com/usmannasir/cyberpanel.git
synced 2026-03-03 02:40:45 +01:00
1379 lines
51 KiB
HTML
1379 lines
51 KiB
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 Manager - Consistent with Base Template Theme */
|
|
|
|
/* Container Styling - Aligned with base template */
|
|
.wp-container {
|
|
max-width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--bg-primary);
|
|
position: relative;
|
|
min-height: calc(100vh - 80px);
|
|
}
|
|
|
|
/* Page Header - Using base template gradient style */
|
|
.wp-page-header {
|
|
background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);
|
|
color: white;
|
|
padding: 40px;
|
|
margin-bottom: 30px;
|
|
border-radius: 16px;
|
|
box-shadow: 0 10px 30px rgba(88, 86, 214, 0.2);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.wp-page-header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: radial-gradient(circle at 30% 70%, 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; }
|
|
50% { transform: scale(1.05) rotate(2deg); opacity: 0.3; }
|
|
}
|
|
|
|
.wp-page-header h2 {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
margin-bottom: 10px;
|
|
color: white;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
.wp-page-header p {
|
|
font-size: 16px;
|
|
opacity: 0.95;
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
color: white;
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
padding: 6px 14px;
|
|
border-radius: 20px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.status-badge::before {
|
|
content: '';
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--success-color);
|
|
border-radius: 50%;
|
|
animation: statusPulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes statusPulse {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
|
|
50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
|
|
}
|
|
|
|
/* Main Panel - Matching base template style */
|
|
.wp-panel {
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 12px var(--shadow-color);
|
|
border: 1px solid var(--border-color);
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.wp-panel-header {
|
|
background: var(--bg-secondary);
|
|
padding: 20px 30px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: var(--text-heading);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.wp-panel-header::before {
|
|
content: '';
|
|
width: 4px;
|
|
height: 24px;
|
|
background: var(--accent-color);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Navigation Tabs - Matching base template */
|
|
.wp-nav-tabs {
|
|
background: var(--bg-secondary);
|
|
padding: 0 30px;
|
|
border: none;
|
|
display: flex;
|
|
gap: 5px;
|
|
flex-wrap: wrap;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.wp-nav-tabs li {
|
|
list-style: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.wp-nav-tabs li a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 14px 20px;
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
border-radius: 8px 8px 0 0;
|
|
transition: all 0.3s ease;
|
|
background: transparent;
|
|
border: none;
|
|
position: relative;
|
|
}
|
|
|
|
.wp-nav-tabs li a i {
|
|
font-size: 16px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.wp-nav-tabs li a:hover {
|
|
color: var(--accent-color);
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.wp-nav-tabs li.active a {
|
|
color: var(--accent-color);
|
|
background: var(--bg-primary);
|
|
position: relative;
|
|
}
|
|
|
|
.wp-nav-tabs li.active a::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -1px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: var(--accent-color);
|
|
}
|
|
|
|
/* Tab Content */
|
|
.wp-tab-content {
|
|
padding: 30px;
|
|
background: var(--bg-secondary);
|
|
min-height: 400px;
|
|
}
|
|
|
|
.tab-pane {
|
|
display: none;
|
|
animation: fadeIn 0.3s ease;
|
|
}
|
|
|
|
.tab-pane.active {
|
|
display: block;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Stats Cards - Matching base template card style */
|
|
.wp-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.wp-stat-card {
|
|
background: var(--bg-primary);
|
|
border-radius: 12px;
|
|
padding: 25px;
|
|
border: 1px solid var(--border-color);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.wp-stat-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px var(--shadow-color);
|
|
}
|
|
|
|
.wp-stat-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, var(--accent-color), var(--accent-hover));
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.wp-stat-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.stat-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: var(--bg-hover);
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 15px;
|
|
color: var(--accent-color);
|
|
font-size: 24px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.wp-stat-card:hover .stat-icon {
|
|
background: var(--accent-color);
|
|
color: white;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: var(--text-heading);
|
|
margin: 0 0 5px 0;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Action Cards */
|
|
.wp-action-card {
|
|
background: var(--bg-primary);
|
|
border-radius: 12px;
|
|
padding: 25px;
|
|
margin-bottom: 25px;
|
|
border: 1px solid var(--border-color);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.wp-action-card:hover {
|
|
box-shadow: 0 4px 12px var(--shadow-color);
|
|
}
|
|
|
|
.action-card-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--text-heading);
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.action-card-title i {
|
|
color: var(--accent-color);
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* Settings Grid */
|
|
.settings-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.setting-item {
|
|
background: var(--bg-primary);
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
border: 1px solid var(--border-color);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.setting-item:hover {
|
|
box-shadow: 0 3px 10px var(--shadow-color);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.setting-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;
|
|
}
|
|
|
|
.setting-content {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.setting-info h6 {
|
|
margin: 0 0 4px 0;
|
|
color: var(--text-heading);
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.setting-info p {
|
|
margin: 0;
|
|
color: var(--text-secondary);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Forms - Matching base template */
|
|
.form-card {
|
|
background: var(--bg-primary);
|
|
border-radius: 10px;
|
|
padding: 25px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.form-control {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 10px 15px;
|
|
font-size: 14px;
|
|
color: var(--text-primary);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: var(--accent-color);
|
|
box-shadow: 0 0 0 3px rgba(88, 86, 214, 0.1);
|
|
outline: none;
|
|
}
|
|
|
|
/* Buttons - Matching base template */
|
|
.btn {
|
|
padding: 10px 20px;
|
|
border-radius: 8px;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
transition: all 0.3s ease;
|
|
border: none;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--accent-color);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--accent-hover);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(88, 86, 214, 0.3);
|
|
}
|
|
|
|
.btn-default {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.btn-default:hover {
|
|
background: var(--bg-secondary);
|
|
box-shadow: 0 2px 8px var(--shadow-color);
|
|
}
|
|
|
|
.btn-danger {
|
|
background: var(--danger-color);
|
|
color: white;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background: #dc2626;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
/* Tables - Matching base template */
|
|
.table {
|
|
width: 100%;
|
|
background: var(--bg-secondary);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 8px var(--shadow-color);
|
|
}
|
|
|
|
.table thead {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.table thead th {
|
|
padding: 15px;
|
|
font-weight: 600;
|
|
color: var(--text-heading);
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
border: none;
|
|
}
|
|
|
|
.table tbody td {
|
|
padding: 15px;
|
|
color: var(--text-primary);
|
|
font-size: 14px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.table tbody tr:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
/* Alerts - Matching base template */
|
|
.alert {
|
|
padding: 15px 20px;
|
|
border-radius: 10px;
|
|
border: none;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.alert-info {
|
|
background: rgba(99, 102, 241, 0.1);
|
|
color: var(--accent-color);
|
|
border: 1px solid rgba(99, 102, 241, 0.2);
|
|
}
|
|
|
|
.alert-success {
|
|
background: rgba(16, 185, 129, 0.1);
|
|
color: var(--success-color);
|
|
border: 1px solid rgba(16, 185, 129, 0.2);
|
|
}
|
|
|
|
.alert-danger {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
color: var(--danger-color);
|
|
border: 1px solid rgba(239, 68, 68, 0.2);
|
|
}
|
|
|
|
/* Progress Bar */
|
|
.progress {
|
|
height: 8px;
|
|
background: var(--bg-hover);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.progress-bar {
|
|
background: linear-gradient(90deg, var(--accent-color), var(--accent-hover));
|
|
transition: width 0.3s ease;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Site Preview Card */
|
|
.site-preview-card {
|
|
background: var(--bg-primary);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
border: 1px solid var(--border-color);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.site-preview-card:hover {
|
|
box-shadow: 0 5px 15px var(--shadow-color);
|
|
}
|
|
|
|
.preview-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.preview-header h6 {
|
|
margin: 0;
|
|
color: var(--text-heading);
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn-refresh {
|
|
background: var(--bg-hover);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.btn-refresh:hover {
|
|
background: var(--accent-color);
|
|
color: white;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.preview-container {
|
|
position: relative;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: var(--bg-hover);
|
|
aspect-ratio: 16/9;
|
|
}
|
|
|
|
.preview-container img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.preview-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.preview-container:hover .preview-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.preview-link {
|
|
background: var(--accent-color);
|
|
color: white;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.preview-link:hover {
|
|
background: var(--accent-hover);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Quick Actions */
|
|
.action-links-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
.action-links-grid a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 15px;
|
|
background: var(--bg-hover);
|
|
border-radius: 8px;
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
transition: all 0.3s ease;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.action-links-grid a:hover {
|
|
background: var(--accent-color);
|
|
color: white;
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
.action-links-grid a i {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Section Headers */
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 25px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.section-header h4 {
|
|
margin: 0;
|
|
color: var(--text-heading);
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.section-header .text-muted {
|
|
color: var(--text-secondary);
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Tab Action Area */
|
|
.tab-action-area {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 25px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* Staging Section */
|
|
.staging-section {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.create-staging-form {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Backup Section */
|
|
.backup-section {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.restore-link {
|
|
color: var(--accent-color);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.restore-link:hover {
|
|
color: var(--accent-hover);
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
/* Site Overview Grid */
|
|
.site-overview-grid {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
@media (max-width: 968px) {
|
|
.site-overview-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Quick Actions Card */
|
|
.quick-actions-card {
|
|
background: var(--bg-primary);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.quick-actions-card h5 {
|
|
margin: 0 0 20px 0;
|
|
color: var(--text-heading);
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Checkbox Styling */
|
|
input[type="checkbox"] {
|
|
width: 18px;
|
|
height: 18px;
|
|
cursor: pointer;
|
|
accent-color: var(--accent-color);
|
|
}
|
|
|
|
/* Loading Spinner */
|
|
#wordpresshomeloading {
|
|
display: inline-block;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.wp-stats-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.settings-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.wp-nav-tabs {
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.wp-tab-content {
|
|
padding: 20px 15px;
|
|
}
|
|
|
|
.action-links-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.tab-action-area {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 15px;
|
|
}
|
|
|
|
.action-buttons {
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function refreshSitePreview() {
|
|
var previewImg = document.getElementById('sitePreviewImage');
|
|
var currentSrc = previewImg.src;
|
|
|
|
// Add timestamp to force refresh
|
|
if (currentSrc.includes('?')) {
|
|
previewImg.src = currentSrc.split('&t=')[0] + '&t=' + new Date().getTime();
|
|
} else {
|
|
previewImg.src = currentSrc + '?t=' + new Date().getTime();
|
|
}
|
|
|
|
// Add loading state
|
|
previewImg.style.opacity = '0.5';
|
|
|
|
// 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="wp-container">
|
|
|
|
<div class="wp-page-header">
|
|
<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="wp-panel">
|
|
<div class="wp-panel-header">
|
|
{% trans "WordPress Manager" %}
|
|
</div>
|
|
|
|
<ul class="wp-nav-tabs 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>
|
|
<a href="#tab2" ng-click="GetCurrentPlugins()" data-toggle="tab">
|
|
<i class="fas fa-plug"></i> Plugins
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<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="wp-tab-content tab-content">
|
|
<!-- General Tab -->
|
|
<div class="tab-pane active" id="tab1">
|
|
<!-- Quick Stats -->
|
|
<div class="wp-stats-grid">
|
|
<div class="wp-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="wp-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="wp-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="wp-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 Overview Section -->
|
|
<div class="section-header">
|
|
<h4>Site Overview</h4>
|
|
</div>
|
|
<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>
|
|
|
|
<!-- 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>
|
|
<a target="_blank" href="http://{{ wpsite.FinalURL }}">
|
|
<i class="fas fa-external-link-alt"></i>
|
|
Open Site
|
|
</a>
|
|
<a target="_blank" href="{% url 'AutoLogin' %}?id={{ wpsite.id }}">
|
|
<i class="fas fa-sign-in-alt"></i>
|
|
WP Admin
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Site Settings Section -->
|
|
<div class="section-header">
|
|
<h4>Site Settings</h4>
|
|
</div>
|
|
<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">
|
|
</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">
|
|
</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">
|
|
</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">
|
|
</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">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span style="display: none" id="#checkjq"></span>
|
|
</div>
|
|
|
|
<!-- Plugins Tab -->
|
|
<div class="tab-pane" id="tab2">
|
|
<div class="tab-action-area">
|
|
<div>
|
|
<h4 style="margin: 0; font-weight: 600; color: var(--text-heading);">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></th>
|
|
<th>Plugin</th>
|
|
<th>State</th>
|
|
<th>Updates</th>
|
|
<th>Version</th>
|
|
<th>Delete</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="PluginBody">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Themes Tab -->
|
|
<div class="tab-pane" id="tab3">
|
|
<div class="tab-action-area">
|
|
<div>
|
|
<h4 style="margin: 0; font-weight: 600; color: var(--text-heading);">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></th>
|
|
<th>Theme</th>
|
|
<th>State</th>
|
|
<th>Updates</th>
|
|
<th>Version</th>
|
|
<th>Delete</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="ThemeBody">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Staging Tab -->
|
|
<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">
|
|
<div class="col-sm-12">
|
|
<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 successfully 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;">
|
|
<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 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>
|
|
|
|
<!-- Backups Tab -->
|
|
<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">
|
|
<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">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="alert alert-success text-center">
|
|
<h2>{$ currentStatus $}</h2>
|
|
</div>
|
|
|
|
<div class="progress">
|
|
<div id="installProgress2" 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 successfully 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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Database Tab -->
|
|
<div class="tab-pane" id="tab6">
|
|
<div class="section-header">
|
|
<h4>Database Management</h4>
|
|
</div>
|
|
|
|
<div class="wp-action-card">
|
|
<div class="action-card-title">
|
|
<i class="fas fa-database"></i>
|
|
Database Information
|
|
</div>
|
|
<div id="databaseDetails">
|
|
<p style="color: var(--text-secondary);">Loading database information...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wp-action-card">
|
|
<div class="action-card-title">
|
|
<i class="fas fa-tools"></i>
|
|
Database Actions
|
|
</div>
|
|
<div class="action-links-grid" style="max-width: 500px;">
|
|
<a href="/dataBases/phpMyAdmin" target="_blank">
|
|
<i class="fas fa-external-link-alt"></i>
|
|
Open phpMyAdmin
|
|
</a>
|
|
<a href="javascript:void(0);" ng-click="optimizeDatabase()">
|
|
<i class="fas fa-compress"></i>
|
|
Optimize Database
|
|
</a>
|
|
<a href="javascript:void(0);" ng-click="repairDatabase()">
|
|
<i class="fas fa-wrench"></i>
|
|
Repair Database
|
|
</a>
|
|
<a href="javascript:void(0);" ng-click="exportDatabase()">
|
|
<i class="fas fa-download"></i>
|
|
Export Database
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %} |