File: //proc/676643/root/usr/local/CyberCP/websiteFunctions/templates/websiteFunctions/WPRestoreHome.html
{% extends "baseTemplate/index.html" %}
{% load i18n %}
{% block title %}{% trans "Restore Backups - CyberPanel" %}{% endblock %}
{% block content %}
{% load static %}
{% get_current_language as LANGUAGE_CODE %}
<!-- Current language: {{ LANGUAGE_CODE }} -->
<style>
/* Ultra-Modern CyberPanel Design System */
:root {
--primary-color: #6366f1;
--primary-hover: #5558e3;
--primary-light: #eef2ff;
--secondary-color: #8b5cf6;
--accent-color: #ec4899;
--success-color: #10b981;
--danger-color: #ef4444;
--warning-color: #f59e0b;
--info-color: #3b82f6;
--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--bg-gradient-alt: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--bg-gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
--bg-light: #f8fafc;
--bg-card: #ffffff;
--bg-hover: #f1f5f9;
--border-color: #e2e8f0;
--border-light: #f1f5f9;
--text-primary: #1e293b;
--text-secondary: #64748b;
--text-muted: #94a3b8;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
--shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
--transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Container Styling */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
min-height: 100vh;
background: linear-gradient(180deg, var(--bg-primary, #f8fafc) 0%, var(--bg-hover, #e2e8f0) 100%);
}
/* Page Title Section */
#page-title {
background: var(--bg-gradient);
color: white;
padding: 40px;
border-radius: var(--radius-xl);
margin-bottom: 30px;
box-shadow: var(--shadow-xl);
position: relative;
overflow: hidden;
}
#page-title::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.1); opacity: 0.3; }
}
#page-title h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 10px;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
}
#page-title p {
font-size: 16px;
opacity: 0.95;
margin: 0;
position: relative;
z-index: 1;
line-height: 1.6;
}
/* Main Panel */
.panel {
background: var(--bg-secondary, white);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color, #e2e8f0);
overflow: hidden;
position: relative;
}
.panel-body {
padding: 0;
}
/* Content Box Header */
.content-box-header {
background: linear-gradient(135deg, var(--bg-hover, #eef2ff) 0%, var(--bg-primary, #f8fafc) 100%);
padding: 25px 30px;
margin: 0;
font-size: 20px;
font-weight: 700;
color: var(--text-heading, #1e293b);
border-bottom: 1px solid var(--border-color, #e2e8f0);
letter-spacing: -0.3px;
display: flex;
align-items: center;
gap: 15px;
}
.content-box-header img {
width: 24px;
height: 24px;
}
/* Form Wrapper */
.example-box-wrapper {
padding: 30px;
}
/* Form Styling */
.form-horizontal {
background: var(--bg-hover, #f8fafc);
padding: 30px;
border-radius: var(--radius-lg);
border: 1px solid var(--border-color, #e2e8f0);
}
.form-group {
margin-bottom: 25px;
transition: var(--transition-base);
}
.form-group:hover {
transform: translateX(5px);
}
.control-label {
font-weight: 600;
color: var(--text-primary, #1e293b);
margin-bottom: 8px;
font-size: 14px;
letter-spacing: 0.3px;
display: flex;
align-items: center;
gap: 8px;
}
.form-control {
border: 2px solid var(--border-color, #e2e8f0);
border-radius: var(--radius-md, 8px);
padding: 12px 16px;
font-size: 15px;
transition: var(--transition-base);
background: var(--bg-secondary, white);
}
.form-control:focus {
border-color: var(--accent-color, #6366f1);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
outline: none;
}
select.form-control {
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
}
/* Input Group Styling */
.input-group {
display: flex;
align-items: stretch;
width: 100%;
}
.input-group .form-control {
border-radius: var(--radius-md, 8px) 0 0 var(--radius-md, 8px);
border-right: none;
}
.input-group-addon {
background: var(--bg-hover, #f8fafc);
border: 2px solid var(--border-color, #e2e8f0);
border-left: none;
padding: 12px 16px;
font-weight: 600;
color: var(--text-secondary, #64748b);
}
.input-group-btn input {
border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
border-left: none;
}
/* Enhanced Buttons */
.btn {
padding: 14px 32px;
border-radius: var(--radius-md);
font-weight: 600;
transition: var(--transition-base);
border: none;
font-size: 15px;
letter-spacing: 0.3px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
overflow: hidden;
cursor: pointer;
text-decoration: none;
}
.btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn:active::before {
width: 300px;
height: 300px;
}
.btn-primary {
background: var(--bg-gradient);
color: white;
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
color: white;
}
.btn-lg {
padding: 16px 40px;
font-size: 16px;
}
/* Center Div */
.center-div {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}
/* Progress Section */
.progress {
height: 12px;
border-radius: var(--radius-full, 9999px);
background: var(--border-color, #e2e8f0);
overflow: hidden;
margin-top: 15px;
box-shadow: inset 0 1px 3px var(--shadow-color, rgba(0,0,0,0.1));
}
.progress-bar {
background: var(--bg-gradient);
transition: width 0.4s ease;
height: 100%;
border-radius: var(--radius-full);
background-size: 20px 20px;
animation: progress-bar-stripes 1s linear infinite;
}
@keyframes progress-bar-stripes {
from { background-position: 0 0; }
to { background-position: 20px 0; }
}
/* Alerts */
.alert {
border-radius: var(--radius-lg);
border: none;
padding: 18px 24px;
margin-bottom: 20px;
font-weight: 500;
display: flex;
align-items: center;
gap: 12px;
}
.alert h2 {
margin: 0;
font-size: 20px;
font-weight: 600;
}
.alert-success {
background: linear-gradient(135deg, var(--success-bg, #d1fae5) 0%, var(--success-light, #a7f3d0) 100%);
color: var(--success-text, #065f46);
border: 1px solid var(--success-border, #6ee7b7);
}
.alert-danger {
background: linear-gradient(135deg, var(--danger-bg, #fee2e2) 0%, var(--danger-light, #fecaca) 100%);
color: var(--danger-text, #991b1b);
border: 1px solid var(--danger-border, #fca5a5);
}
/* Form Sections */
#exinstingsitedivDB,
#exinstingsitediv,
#Newsitediv {
background: var(--bg-secondary, white);
padding: 20px;
border-radius: var(--radius-md, 8px);
margin-bottom: 20px;
border: 1px solid var(--border-color, #e2e8f0);
transition: var(--transition-base);
}
#exinstingsitedivDB:hover,
#exinstingsitediv:hover,
#Newsitediv:hover {
box-shadow: var(--shadow-md);
border-color: var(--accent-color, #6366f1);
}
/* Loading Animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#wordpresshomeloading {
animation: spin 1s linear infinite;
}
/* Responsive */
@media (max-width: 768px) {
.container {
padding: 15px;
}
#page-title {
padding: 25px;
}
#page-title h2 {
font-size: 24px;
}
.form-horizontal {
padding: 20px;
}
.control-label {
margin-bottom: 10px;
}
.btn-lg {
padding: 12px 28px;
font-size: 14px;
}
}
</style>
<script>
// Handle restore method selection
function checkmethode() {
// This function is handled by Angular controller
}
</script>
<div ng-controller="RestoreWPBackup" class="container">
<div id="page-title">
<h2 id="domainNamePage">
<i class="fas fa-undo-alt" style="margin-right: 10px;"></i>
{% trans "Restore WordPress Backup" %}
</h2>
<p>{% trans "Restore your WordPress site from a backup. Choose the restoration method and destination for your backup." %}</p>
</div>
<span id="backupid" style="display: none">{{ backupobj.id }}</span>
<span id="backuptype" style="display: none">{{ Backuptype }}</span>
<div class="panel">
<div class="panel-body">
<h3 class="content-box-header">
<i class="fas fa-file-archive" style="color: var(--primary-color);"></i>
{{ FileName }}
<img id="wordpresshomeloading" style="display: none"
src="{% static 'images/loading.gif' %}">
</h3>
<div class="example-box-wrapper">
<form name="websiteCreationForm" action="/" id="createPackages"
class="form-horizontal bordered-row panel-body">
{% if Backuptype == "DataBase Backup" %}
<div id="exinstingsitedivDB" ng-hide="installationDetailsForm"
class="form-group">
<label class="col-sm-3 control-label">
<i class="fas fa-database"></i>
{% trans "Restore Destination" %}
</label>
<div class="col-sm-9">
<select id="DesSite" class="form-control" required>
<option value="-1">Select WordPress Site</option>
{% for i in WPsites %}
<option value="{{ i.id }}">{{ i.FinalURL }}</option>
{% endfor %}
</select>
<small class="form-text text-muted" style="margin-top: 8px; color: var(--text-secondary);">
<i class="fas fa-info-circle"></i>
Select the WordPress site where you want to restore the database backup
</small>
</div>
</div>
{% else %}
<div ng-hide="installationDetailsForm" class="form-group">
<label class="col-sm-3 control-label">
<i class="fas fa-cogs"></i>
{% trans "Restore Method" %}
</label>
<div class="col-sm-9">
<select ng-click="checkmethode()" id="RestoreMethode" class="form-control" required>
<option value="-1">Select Method</option>
<option value="1">Restore to New Site</option>
<option value="0">Restore to Existing Site</option>
</select>
<small class="form-text text-muted" style="margin-top: 8px; color: var(--text-secondary);">
<i class="fas fa-info-circle"></i>
Choose whether to create a new site or overwrite an existing one
</small>
</div>
</div>
<div id="exinstingsitediv" ng-hide="installationDetailsForm" style="display: none"
class="form-group">
<label class="col-sm-3 control-label">
<i class="fas fa-globe"></i>
{% trans "Target Site" %}
</label>
<div class="col-sm-9">
<select id="DesSite" class="form-control" required>
<option value="-1">Select WordPress Site</option>
{% for i in WPsites %}
<option value="{{ i.id }}">{{ i.FinalURL }}</option>
{% endfor %}
</select>
<small class="form-text text-muted" style="margin-top: 8px; color: var(--text-secondary);">
<i class="fas fa-exclamation-triangle" style="color: var(--warning-color);"></i>
Warning: This will overwrite the selected site
</small>
</div>
</div>
<div id="Newsitediv" ng-hide="installationDetailsForm" style="display: none" class="form-group">
<label class="col-sm-3 control-label">
<i class="fas fa-globe"></i>
{% trans "New Domain" %}
</label>
<div class="col-sm-9">
<div class="input-group">
<input ng-model="domainNameCreate" id="wprestoresubdirdomain" class="form-control"
type="text"
name="wprestoresubdirdomain"
placeholder="example.com (without www)">
<span class="input-group-addon">/</span>
<input id="wprestoresubdirpath" class="form-control"
placeholder="Path (optional)"
type="text"
name="wprestoresubdirpath" ng-model="installPath"
style="max-width: 150px;">
</div>
<small class="form-text text-muted" style="margin-top: 8px; color: var(--text-secondary);">
<i class="fas fa-info-circle"></i>
Enter domain without WWW prefix. Leave path empty for root installation.
</small>
</div>
</div>
{% endif %}
<div ng-model="installationDetailsForm" class="col-sm-12 center-div" style="margin-top: 40px; margin-bottom: 30px;">
<button id="RestoreWPbackupNow" type="button"
ng-click="RestoreWPbackupNow()"
class="btn btn-primary btn-lg">
<i class="fas fa-undo-alt"></i>
{% trans "Restore Backup Now" %}
</button>
</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">
<i class="fas fa-check-circle"></i>
<p>{% trans "Backup successfully restored." %}</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-primary btn-lg">
<i class="fas fa-arrow-left"></i>
{% trans "Go Back" %}
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}