mirror
/
cyberpanel
mirror of https://github.com/usmannasir/cyberpanel.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

dark mode

This commit is contained in:
usmannasir 2025-08-02 15:08:38 +05:00
parent 8d437387e1
commit 1abf49d0b7
8 changed files with 279 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
websiteFunctions/templates/websiteFunctions/WPAddNewPlugin.html
View File

@ -17,18 +17,18 @@
}
.plugin-section {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
}
.section-title {
font-size: 16px;
font-weight: 700;
color: #2f3640;
color: var(--text-heading, #2f3640);
margin-bottom: 20px;
display: flex;
align-items: center;
@ -41,12 +41,12 @@
content: '';
width: 4px;
height: 24px;
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
border-radius: 2px;
}
.plugin-description {
color: #8893a7;
color: var(--text-secondary, #8893a7);
font-size: 14px;
margin-bottom: 25px;
line-height: 1.5;
@ -60,7 +60,7 @@
.form-label {
font-size: 13px;
font-weight: 600;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
@ -70,22 +70,22 @@
.form-control {
width: 100%;
padding: 12px 16px;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
font-size: 14px;
color: #2f3640;
background: white;
color: var(--text-primary, #2f3640);
background: var(--bg-secondary, white);
transition: all 0.2s ease;
}
.form-control:focus {
outline: none;
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
}
.form-control::placeholder {
color: #94a3b8;
color: var(--text-secondary, #94a3b8);
font-size: 13px;
}
@ -109,8 +109,8 @@
}
.search-result-item:hover {
background: #f8f9ff;
color: #5b5fcf;
background: var(--bg-hover, #f8f9ff);
color: var(--accent-color, #5b5fcf);
}
.search-result-item:last-child {
@ -120,7 +120,7 @@
.plugin-icon {
width: 40px;
height: 40px;
background: #e8e9ff;
background: var(--border-color, #e8e9ff);
border-radius: 8px;
display: flex;
align-items: center;
@ -140,13 +140,13 @@
.plugin-desc {
font-size: 12px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
}
/* Selected Plugins Section */
.selected-plugins-section {
background: #fafbff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #fafbff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 20px;
margin-bottom: 25px;
@ -155,7 +155,7 @@
.selected-header {
font-size: 14px;
font-weight: 700;
color: #2f3640;
color: var(--text-heading, #2f3640);
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 0.5px;
@ -168,20 +168,20 @@
}
.selected-plugin {
background: white;
border: 1px solid #e8e9ff;
background: var(--bg-secondary, white);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 10px 16px;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #2f3640;
color: var(--text-primary, #2f3640);
transition: all 0.2s ease;
}
.selected-plugin:hover {
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 2px 8px rgba(91,95,207,0.15);
}
@ -202,8 +202,8 @@
/* Button Styles */
.btn-primary {
background: #5b5fcf;
border: 1px solid #5b5fcf;
background: var(--accent-color, #5b5fcf);
border: 1px solid var(--accent-color, #5b5fcf);
color: white;
padding: 12px 32px;
border-radius: 8px;
@ -218,8 +218,8 @@
}
.btn-primary:hover {
background: #4b4fbf;
border-color: #4b4fbf;
background: var(--accent-hover, #4b4fbf);
border-color: var(--accent-hover, #4b4fbf);
box-shadow: 0 3px 8px rgba(91,95,207,0.3);
transform: translateY(-1px);
}
@ -233,9 +233,9 @@
}
.btn-secondary {
background: white;
border: 1px solid #e8e9ff;
color: #2f3640;
background: var(--bg-secondary, white);
border: 1px solid var(--border-color, #e8e9ff);
color: var(--text-primary, #2f3640);
padding: 12px 32px;
border-radius: 8px;
font-size: 14px;
@ -249,9 +249,9 @@
}
.btn-secondary:hover {
background: #f8f9ff;
border-color: #5b5fcf;
color: #5b5fcf;
background: var(--bg-hover, #f8f9ff);
border-color: var(--accent-color, #5b5fcf);
color: var(--accent-color, #5b5fcf);
text-decoration: none;
}
@ -271,7 +271,7 @@
.empty-selected {
text-align: center;
padding: 40px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
font-size: 14px;
}
@ -283,12 +283,12 @@
/* Info Alert */
.info-alert {
background: #f0f9ff;
border: 1px solid #bae6fd;
background: var(--info-bg, #f0f9ff);
border: 1px solid var(--info-border, #bae6fd);
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
color: #0c4a6e;
color: var(--info-text, #0c4a6e);
font-size: 14px;
display: flex;
align-items: center;
@ -296,7 +296,7 @@
}
.info-alert i {
color: #0284c7;
color: var(--info-accent, #0284c7);
}
/* Responsive */

88
websiteFunctions/templates/websiteFunctions/WPConfigurePlugins.html
View File

@ -17,18 +17,18 @@
}
.plugins-section {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
}
.section-title {
font-size: 16px;
font-weight: 700;
color: #2f3640;
color: var(--text-heading, #2f3640);
margin-bottom: 20px;
display: flex;
align-items: center;
@ -41,12 +41,12 @@
content: '';
width: 4px;
height: 24px;
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
border-radius: 2px;
}
.plugins-description {
color: #8893a7;
color: var(--text-secondary, #8893a7);
font-size: 14px;
margin-bottom: 25px;
line-height: 1.5;
@ -62,8 +62,8 @@
}
.btn-primary {
background: #5b5fcf;
border: 1px solid #5b5fcf;
background: var(--accent-color, #5b5fcf);
border: 1px solid var(--accent-color, #5b5fcf);
color: white;
padding: 10px 20px;
border-radius: 8px;
@ -78,8 +78,8 @@
}
.btn-primary:hover {
background: #4b4fbf;
border-color: #4b4fbf;
background: var(--accent-hover, #4b4fbf);
border-color: var(--accent-hover, #4b4fbf);
box-shadow: 0 3px 8px rgba(91,95,207,0.3);
transform: translateY(-1px);
text-decoration: none;
@ -88,8 +88,8 @@
/* Table Styles */
.table-container {
background: #fafbff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #fafbff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
overflow: hidden;
}
@ -97,11 +97,11 @@
.table {
width: 100%;
margin-bottom: 0;
background: white;
background: var(--bg-secondary, white);
}
.table thead {
background: #fafbff;
background: var(--bg-hover, #fafbff);
}
.table th {
@ -109,23 +109,23 @@
padding: 15px;
font-size: 13px;
font-weight: 700;
color: #8893a7;
color: var(--text-secondary, #8893a7);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-color, #e8e9ff);
}
.table td {
border: none;
padding: 15px;
font-size: 14px;
color: #2f3640;
border-bottom: 1px solid #f1f3f5;
color: var(--text-primary, #2f3640);
border-bottom: 1px solid var(--border-light, #f1f3f5);
vertical-align: middle;
}
.table tbody tr:hover {
background: #fafbff;
background: var(--bg-hover, #fafbff);
}
.table tbody tr:last-child td {
@ -151,35 +151,35 @@
}
.btn-edit {
color: #10b981;
border-color: #d1fae5;
background: #f0fdf4;
color: var(--success-accent, #10b981);
border-color: var(--success-border, #d1fae5);
background: var(--success-light, #f0fdf4);
}
.btn-edit:hover {
background: #10b981;
background: var(--success-accent, #10b981);
color: white;
border-color: #10b981;
border-color: var(--success-accent, #10b981);
text-decoration: none;
}
.btn-delete {
color: #ef4444;
border-color: #fee2e2;
background: #fef2f2;
color: var(--danger-accent, #ef4444);
border-color: var(--danger-border, #fee2e2);
background: var(--danger-light, #fef2f2);
}
.btn-delete:hover {
background: #ef4444;
background: var(--danger-accent, #ef4444);
color: white;
border-color: #ef4444;
border-color: var(--danger-accent, #ef4444);
}
/* Empty State */
.empty-state {
text-align: center;
padding: 60px 20px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
}
.empty-state svg {
@ -192,7 +192,7 @@
.empty-state h3 {
font-size: 18px;
font-weight: 600;
color: #2f3640;
color: var(--text-heading, #2f3640);
margin-bottom: 10px;
}
@ -204,13 +204,13 @@
/* Modal Styles */
.modal-content {
border-radius: 12px;
border: 1px solid #e8e9ff;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
border: 1px solid var(--border-color, #e8e9ff);
box-shadow: 0 10px 40px var(--shadow-color, rgba(0,0,0,0.1));
}
.modal-header {
background: #fafbff;
border-bottom: 1px solid #e8e9ff;
background: var(--bg-hover, #fafbff);
border-bottom: 1px solid var(--border-color, #e8e9ff);
padding: 20px;
border-radius: 12px 12px 0 0;
}
@ -218,7 +218,7 @@
.modal-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-heading, #2f3640);
margin: 0;
}
@ -227,16 +227,16 @@
}
.modal-footer {
background: #fafbff;
border-top: 1px solid #e8e9ff;
background: var(--bg-hover, #fafbff);
border-top: 1px solid var(--border-color, #e8e9ff);
padding: 15px 20px;
border-radius: 0 0 12px 12px;
}
.btn-default {
background: white;
border: 1px solid #e8e9ff;
color: #2f3640;
background: var(--bg-secondary, white);
border: 1px solid var(--border-color, #e8e9ff);
color: var(--text-primary, #2f3640);
padding: 8px 20px;
border-radius: 6px;
font-size: 14px;
@ -246,9 +246,9 @@
}
.btn-default:hover {
background: #f8f9ff;
border-color: #5b5fcf;
color: #5b5fcf;
background: var(--bg-hover, #f8f9ff);
border-color: var(--accent-color, #5b5fcf);
color: var(--accent-color, #5b5fcf);
}
.btn-danger {

114
websiteFunctions/templates/websiteFunctions/WPCreate.html
View File

@ -18,18 +18,18 @@
/* Page Header */
.page-header {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
}
.page-header h1 {
font-size: 28px;
font-weight: 700;
color: #2f3640;
color: var(--text-heading, #2f3640);
margin: 0 0 10px 0;
display: flex;
align-items: center;
@ -39,7 +39,7 @@
.page-header .icon {
width: 48px;
height: 48px;
background: #5856d6;
background: var(--accent-color, #5856d6);
border-radius: 12px;
display: flex;
align-items: center;
@ -51,7 +51,7 @@
.page-header p {
font-size: 15px;
color: #64748b;
color: var(--text-secondary, #64748b);
margin: 0;
}
@ -63,17 +63,17 @@
}
.wp-section {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
}
.section-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-heading, #2f3640);
margin-bottom: 20px;
display: flex;
align-items: center;
@ -84,17 +84,17 @@
content: '';
width: 4px;
height: 24px;
background: #5856d6;
background: var(--accent-color, #5856d6);
border-radius: 2px;
}
/* Sidebar Info */
.info-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
height: fit-content;
position: sticky;
top: 20px;
@ -103,7 +103,7 @@
.info-card h3 {
font-size: 16px;
font-weight: 700;
color: #2f3640;
color: var(--text-heading, #2f3640);
margin-bottom: 20px;
display: flex;
align-items: center;
@ -118,12 +118,12 @@
.feature-list li {
padding: 12px 0;
border-bottom: 1px solid #f0f0ff;
border-bottom: 1px solid var(--border-color, #f0f0ff);
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
color: #64748b;
color: var(--text-secondary, #64748b);
}
.feature-list li:last-child {
@ -131,13 +131,13 @@
}
.feature-list i {
color: #5856d6;
color: var(--accent-color, #5856d6);
font-size: 16px;
flex-shrink: 0;
}
.stats-box {
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
border-radius: 8px;
padding: 20px;
margin-top: 20px;
@ -163,7 +163,7 @@
.stats-box .stat-value {
font-size: 24px;
font-weight: 700;
color: #5856d6;
color: var(--accent-color, #5856d6);
}
/* Form Styles */
@ -174,17 +174,17 @@
.form-section-title {
font-size: 15px;
font-weight: 700;
color: #2f3640;
color: var(--text-heading, #2f3640);
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #f0f0ff;
border-bottom: 2px solid var(--border-color, #f0f0ff);
display: flex;
align-items: center;
gap: 10px;
}
.form-section-title i {
color: #5856d6;
color: var(--accent-color, #5856d6);
}
.form-group {
@ -194,7 +194,7 @@
.form-label {
font-size: 14px;
font-weight: 600;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 8px;
display: block;
}
@ -202,23 +202,23 @@
.form-control {
width: 100%;
padding: 12px 16px;
border: 2px solid #e8e9ff;
border: 2px solid var(--border-color, #e8e9ff);
border-radius: 8px;
font-size: 15px;
color: #2f3640;
background: #f8f9ff;
color: var(--text-primary, #2f3640);
background: var(--bg-hover, #f8f9ff);
transition: all 0.3s ease;
}
.form-control:focus {
outline: none;
border-color: #5856d6;
border-color: var(--accent-color, #5856d6);
box-shadow: 0 0 0 3px rgba(88,86,214,0.1);
background: white;
background: var(--bg-secondary, white);
}
.form-control::placeholder {
color: #94a3b8;
color: var(--text-secondary, #94a3b8);
font-size: 14px;
}
@ -250,14 +250,14 @@
}
select.form-control option {
color: #2f3640;
background-color: white;
color: var(--text-primary, #2f3640);
background-color: var(--bg-secondary, white);
padding: 8px;
}
select.form-control:focus {
color: #2f3640;
background-color: white;
color: var(--text-primary, #2f3640);
background-color: var(--bg-secondary, white);
}
.input-group {
@ -275,7 +275,7 @@
.help-text {
font-size: 13px;
color: #94a3b8;
color: var(--text-secondary, #94a3b8);
margin-top: 5px;
display: flex;
align-items: center;
@ -313,7 +313,7 @@
left: 0;
right: 0;
bottom: 0;
background-color: #e8e9ff;
background-color: var(--border-color, #e8e9ff);
transition: .4s;
border-radius: 26px;
}
@ -325,13 +325,13 @@
width: 18px;
left: 4px;
bottom: 4px;
background-color: white;
background-color: var(--bg-secondary, white);
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #5856d6;
background-color: var(--accent-color, #5856d6);
}
input:checked + .slider:before {
@ -340,7 +340,7 @@
.switch-label {
font-size: 14px;
color: #2f3640;
color: var(--text-primary, #2f3640);
font-weight: 500;
}
@ -360,13 +360,13 @@
}
.btn-primary {
background: #5856d6;
background: var(--accent-color, #5856d6);
color: white;
box-shadow: 0 2px 8px rgba(88,86,214,0.3);
}
.btn-primary:hover {
background: #4644c0;
background: var(--accent-hover, #4644c0);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(88,86,214,0.4);
}
@ -413,18 +413,18 @@
.progress-icon {
width: 80px;
height: 80px;
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 36px;
color: #5856d6;
color: var(--accent-color, #5856d6);
}
.status-message {
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
border-radius: 8px;
padding: 20px;
margin-bottom: 25px;
@ -433,21 +433,21 @@
.status-message h2 {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-heading, #2f3640);
margin: 0;
}
.progress {
background: #e8e9ff;
background: var(--border-color, #e8e9ff);
border-radius: 50px;
height: 30px;
overflow: hidden;
margin-bottom: 25px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
box-shadow: inset 0 2px 4px var(--shadow-color, rgba(0,0,0,0.05));
}
.progress-bar {
background: linear-gradient(90deg, #5856d6 0%, #4644c0 100%);
background: linear-gradient(90deg, var(--accent-color, #5856d6) 0%, var(--accent-hover, #4644c0) 100%);
height: 100%;
transition: width 0.3s ease;
display: flex;
@ -477,23 +477,23 @@
}
.alert-success {
background: #d1fae5;
color: #065f46;
border: 1px solid #a7f3d0;
background: var(--success-bg, #d1fae5);
color: var(--success-text, #065f46);
border: 1px solid var(--success-border, #a7f3d0);
}
.alert-success i {
color: #10b981;
color: var(--success-accent, #10b981);
}
.alert-danger {
background: #fee2e2;
color: #991b1b;
border: 1px solid #fecaca;
background: var(--danger-bg, #fee2e2);
color: var(--danger-text, #991b1b);
border: 1px solid var(--danger-border, #fecaca);
}
.alert-danger i {
color: #ef4444;
color: var(--danger-accent, #ef4444);
}
.loading-spinner {
@ -503,7 +503,7 @@
}
.error-text {
color: #ef4444;
color: var(--danger-text, #ef4444);
font-size: 13px;
margin-top: 5px;
}

34
websiteFunctions/templates/websiteFunctions/WPEidtPlugin.html
View File

@ -7,46 +7,50 @@
{% get_current_language as LANGUAGE_CODE %}
<!-- Current language: {{ LANGUAGE_CODE }} -->
<div class="container">
<div class="container" style="background: var(--bg-primary, #f0f0ff); padding: 20px; border-radius: 12px;">
<span id="pluginbID" style="display: none">{{ pluginbID }}</span>
<div id="page-title">
<h2 id="domainNamePage">{% trans "Edit Plugin Bucket" %}
<div id="page-title" style="background: var(--bg-secondary, white); padding: 25px; border-radius: 12px; margin-bottom: 25px; box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08)); border: 1px solid var(--border-color, #e8e9ff);">
<h2 id="domainNamePage" style="color: var(--text-heading, #2f3640); margin: 0;">{% trans "Edit Plugin Bucket" %}
</h2>
</div>
<div ng-controller="WPAddNewPlugin" class="panel">
<div class="panel-body">
<div ng-controller="WPAddNewPlugin" class="panel" style="background: var(--bg-secondary, white); border-radius: 12px; box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08)); border: 1px solid var(--border-color, #e8e9ff);">
<div class="panel-body" style="padding: 25px;">
<div class="example-box-wrapper">
<h2>{{ BucketName }}</h2>
<h2 style="color: var(--text-heading, #2f3640); margin-bottom: 20px;">{{ BucketName }}</h2>
<form name="websiteCreationForm" action="/" id="createPackages"
class="form-horizontal bordered-row panel-body">
class="form-horizontal bordered-row panel-body" style="background: var(--bg-hover, #f8f9ff); padding: 20px; border-radius: 8px; border: 1px solid var(--border-color, #e8e9ff);">
<label style="margin-bottom: 10px;">{% trans "Search Plugin Name" %}</label>
<label style="margin-bottom: 10px; color: var(--text-primary, #2f3640); font-weight: 600;">{% trans "Search Plugin Name" %}</label>
<input name="searchcontent" type="text" class="form-control" ng-model="searchcontent"
ng-keyup="SearchPluginName('eidt')"
placeholder="{% trans "Search Plugin...." %}" required>
placeholder="{% trans "Search Plugin...." %}" required
style="border: 1px solid var(--border-color, #e8e9ff); background: var(--bg-secondary, white); color: var(--text-primary, #2f3640); padding: 12px 16px; border-radius: 8px;">
<div id="mysearch" class="col-lg-12" style="display: none; border-top: none!important;
border: 1px solid rgba(90, 91, 92, 0.7);
border: 1px solid var(--border-color, rgba(90, 91, 92, 0.7));
position: absolute; z-index: 1;
background-color: #FFFFFF">
background-color: var(--bg-secondary, #FFFFFF); border-radius: 8px; box-shadow: 0 4px 12px var(--shadow-color, rgba(0,0,0,0.1));">
</div>
<h3 style="margin-top: 20px;">Selected Plugin</h3>
<div id="sedplugn" style=" display: flex; flex-direction: row; margin-top: 10px;">
<h3 style="margin-top: 20px; color: var(--text-heading, #2f3640);">Selected Plugin</h3>
<div id="sedplugn" style="display: flex; flex-direction: row; margin-top: 10px; gap: 10px; flex-wrap: wrap;">
{% for plugin in Selectedplugins %}
<div id="selplug"
style="background-color: #12207a; color: #FFFFFF; padding: 5px; border-radius: 30px">
style="background-color: var(--accent-color, #12207a); color: #FFFFFF; padding: 8px 12px; border-radius: 30px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500;">
{{ plugin }}
<svg ng-click="deletesPlgin('{{ plugin }}')" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
role="img" width="1em" height="1em"
preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16">
preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"
style="cursor: pointer; transition: all 0.2s ease;"
onmouseover="this.style.transform='scale(1.2)'"
onmouseout="this.style.transform='scale(1)'">
<path fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5" d="m11.25 4.75l-6.5 6.5m0-6.5l6.5 6.5"/>

62
websiteFunctions/templates/websiteFunctions/WPRestoreHome.html
View File

@ -54,7 +54,7 @@
margin: 0 auto;
padding: 20px;
min-height: 100vh;
background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
background: linear-gradient(180deg, var(--bg-primary, #f8fafc) 0%, var(--bg-hover, #e2e8f0) 100%);
}
/* Page Title Section */
@ -105,10 +105,10 @@
/* Main Panel */
.panel {
background: var(--bg-card);
background: var(--bg-secondary, white);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
border: 1px solid var(--border-color, #e2e8f0);
overflow: hidden;
position: relative;
}
@ -119,13 +119,13 @@
/* Content Box Header */
.content-box-header {
background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-light) 100%);
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-primary);
border-bottom: 1px solid var(--border-color);
color: var(--text-heading, #1e293b);
border-bottom: 1px solid var(--border-color, #e2e8f0);
letter-spacing: -0.3px;
display: flex;
align-items: center;
@ -144,10 +144,10 @@
/* Form Styling */
.form-horizontal {
background: var(--bg-light);
background: var(--bg-hover, #f8fafc);
padding: 30px;
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
border: 1px solid var(--border-color, #e2e8f0);
}
.form-group {
@ -161,7 +161,7 @@
.control-label {
font-weight: 600;
color: var(--text-primary);
color: var(--text-primary, #1e293b);
margin-bottom: 8px;
font-size: 14px;
letter-spacing: 0.3px;
@ -171,16 +171,16 @@
}
.form-control {
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
border: 2px solid var(--border-color, #e2e8f0);
border-radius: var(--radius-md, 8px);
padding: 12px 16px;
font-size: 15px;
transition: var(--transition-base);
background: white;
background: var(--bg-secondary, white);
}
.form-control:focus {
border-color: var(--primary-color);
border-color: var(--accent-color, #6366f1);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
outline: none;
}
@ -202,21 +202,21 @@
}
.input-group .form-control {
border-radius: var(--radius-md) 0 0 var(--radius-md);
border-radius: var(--radius-md, 8px) 0 0 var(--radius-md, 8px);
border-right: none;
}
.input-group-addon {
background: var(--bg-light);
border: 2px solid var(--border-color);
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);
color: var(--text-secondary, #64748b);
}
.input-group-btn input {
border-radius: 0 var(--radius-md) var(--radius-md) 0;
border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
border-left: none;
}
@ -285,11 +285,11 @@
/* Progress Section */
.progress {
height: 12px;
border-radius: var(--radius-full);
background: var(--border-color);
border-radius: var(--radius-full, 9999px);
background: var(--border-color, #e2e8f0);
overflow: hidden;
margin-top: 15px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 3px var(--shadow-color, rgba(0,0,0,0.1));
}
.progress-bar {
@ -325,26 +325,26 @@
}
.alert-success {
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
color: #065f46;
border: 1px solid #6ee7b7;
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, #fee2e2 0%, #fecaca 100%);
color: #991b1b;
border: 1px solid #fca5a5;
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: white;
background: var(--bg-secondary, white);
padding: 20px;
border-radius: var(--radius-md);
border-radius: var(--radius-md, 8px);
margin-bottom: 20px;
border: 1px solid var(--border-color);
border: 1px solid var(--border-color, #e2e8f0);
transition: var(--transition-base);
}
@ -352,7 +352,7 @@
#exinstingsitediv:hover,
#Newsitediv:hover {
box-shadow: var(--shadow-md);
border-color: var(--primary-color);
border-color: var(--accent-color, #6366f1);
}
/* Loading Animation */

23
websiteFunctions/templates/websiteFunctions/WPsiteHome.html
View File

@ -775,7 +775,7 @@
padding: 12px 15px;
font-size: 15px;
transition: all 0.3s ease;
background: white;
background: var(--bg-secondary, white);
}
.form-control:focus {
@ -815,19 +815,19 @@
}
.alert-success {
background: #d1fae5;
color: #065f46;
background: var(--success-bg, #d1fae5);
color: var(--success-text, #065f46);
}
.alert-danger {
background: #fee2e2;
color: #991b1b;
background: var(--danger-bg, #fee2e2);
color: var(--danger-text, #991b1b);
}
.alert-warning {
background: #fef3c7;
color: #92400e;
border: 1px solid #fde68a;
background: var(--warning-bg, #fef3c7);
color: var(--warning-text, #92400e);
border: 1px solid var(--warning-border, #fde68a);
}
/* Labels */
@ -841,8 +841,8 @@
}
.label-success {
background: #d1fae5;
color: #065f46;
background: var(--success-bg, #d1fae5);
color: var(--success-text, #065f46);
}
/* Modal Styling */
@ -1882,7 +1882,7 @@
line-height: 1.25;
text-align: center;
white-space: nowrap;
border: 1px solid #ced4da;
border: 1px solid var(--border-color, #ced4da);
border-radius: 0.25rem;
display: flex;
align-items: center;
@ -1895,6 +1895,7 @@
padding: 0.375rem 0.75rem;
margin: 0;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
background: var(--bg-secondary, white);
}
</style>

96
websiteFunctions/templates/websiteFunctions/WPsitesList.html
View File

@ -397,18 +397,18 @@
}
.wp-section {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
}
.section-title {
font-size: 16px;
font-weight: 700;
color: #2f3640;
color: var(--text-heading, #2f3640);
margin-bottom: 20px;
display: flex;
align-items: center;
@ -421,7 +421,7 @@
content: '';
width: 4px;
height: 24px;
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
border-radius: 2px;
}
@ -433,8 +433,8 @@
}
.search-bar {
background: #fafbff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #fafbff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
@ -446,17 +446,17 @@
.form-control {
padding: 12px 16px;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
font-size: 14px;
color: #2f3640;
background: white;
color: var(--text-primary, #2f3640);
background: var(--bg-secondary, white);
transition: all 0.2s ease;
}
.form-control:focus {
outline: none;
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
}
@ -475,14 +475,14 @@
}
.btn-primary {
background: #5b5fcf;
border-color: #5b5fcf;
background: var(--accent-color, #5b5fcf);
border-color: var(--accent-color, #5b5fcf);
color: white;
}
.btn-primary:hover {
background: #4b4fbf;
border-color: #4b4fbf;
background: var(--accent-hover, #4b4fbf);
border-color: var(--accent-hover, #4b4fbf);
box-shadow: 0 3px 8px rgba(91,95,207,0.3);
transform: translateY(-1px);
}
@ -545,8 +545,8 @@
/* WordPress Site Item */
.wp-site-item {
background: white;
border: 1px solid #e8e9ff;
background: var(--bg-secondary, white);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 12px;
margin-bottom: 20px;
overflow: hidden;
@ -554,33 +554,33 @@
}
.wp-site-item:hover {
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 4px 12px rgba(91,95,207,0.15);
}
.wp-site-header {
padding: 20px;
background: #fafbff;
border-bottom: 1px solid #e8e9ff;
background: var(--bg-hover, #fafbff);
border-bottom: 1px solid var(--border-color, #e8e9ff);
}
.wp-site-header h4 {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-heading, #2f3640);
display: flex;
align-items: center;
}
.wp-site-content {
padding: 20px;
background: white;
background: var(--bg-secondary, white);
}
.site-preview {
background: #fafbff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #fafbff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 15px;
text-align: center;
@ -601,8 +601,8 @@
}
.info-box {
background: #fafbff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #fafbff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 15px;
text-align: center;
@ -611,7 +611,7 @@
.info-box label {
display: block;
font-size: 12px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 0.5px;
@ -620,7 +620,7 @@
.info-box span {
font-size: 15px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
}
.settings-grid {
@ -630,8 +630,8 @@
}
.settings-group {
background: #fafbff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #fafbff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 15px;
}
@ -645,7 +645,7 @@
align-items: center;
gap: 8px;
font-size: 14px;
color: #2f3640;
color: var(--text-primary, #2f3640);
cursor: pointer;
}
@ -659,7 +659,7 @@
display: inline-flex;
align-items: center;
gap: 8px;
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
font-size: 14px;
padding: 0 8px;
}
@ -669,8 +669,8 @@
}
.pagination-info {
background: #fafbff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #fafbff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 15px;
display: flex;
@ -682,11 +682,11 @@
}
.alert-info {
background: #e3f2fd;
border: 1px solid #bbdefb;
background: var(--info-bg, #e3f2fd);
border: 1px solid var(--info-border, #bbdefb);
border-radius: 8px;
padding: 15px;
color: #1976d2;
color: var(--info-text, #1976d2);
font-size: 14px;
text-align: center;
}
@ -694,13 +694,13 @@
/* Modal Styles */
.modal-content {
border-radius: 12px;
border: 1px solid #e8e9ff;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
border: 1px solid var(--border-color, #e8e9ff);
box-shadow: 0 10px 40px var(--shadow-color, rgba(0,0,0,0.1));
}
.modal-header {
background: #fafbff;
border-bottom: 1px solid #e8e9ff;
background: var(--bg-hover, #fafbff);
border-bottom: 1px solid var(--border-color, #e8e9ff);
padding: 20px;
border-radius: 12px 12px 0 0;
}
@ -708,7 +708,7 @@
.modal-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-heading, #2f3640);
margin: 0;
}
@ -717,21 +717,21 @@
}
.modal-footer {
background: #fafbff;
border-top: 1px solid #e8e9ff;
background: var(--bg-hover, #fafbff);
border-top: 1px solid var(--border-color, #e8e9ff);
padding: 15px 20px;
border-radius: 0 0 12px 12px;
}
.btn-secondary {
background: #64748b;
border-color: #64748b;
background: var(--text-secondary, #64748b);
border-color: var(--text-secondary, #64748b);
color: white;
}
.btn-secondary:hover {
background: #475569;
border-color: #475569;
background: var(--text-primary, #475569);
border-color: var(--text-primary, #475569);
}
/* Responsive */

60
websiteFunctions/templates/websiteFunctions/installWordPress.html
View File

@ -54,7 +54,7 @@
margin: 0 auto;
padding: 20px;
min-height: 100vh;
background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
background: linear-gradient(180deg, var(--bg-primary, #f8fafc) 0%, var(--bg-hover, #e2e8f0) 100%);
}
/* Page Title Section */
@ -108,10 +108,10 @@
/* Main Panel */
.panel {
background: var(--bg-card);
background: var(--bg-secondary, white);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
border: 1px solid var(--border-color, #e2e8f0);
overflow: hidden;
position: relative;
}
@ -122,13 +122,13 @@
/* Content Box Header */
.title-hero {
background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-light) 100%);
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-primary);
border-bottom: 1px solid var(--border-color);
color: var(--text-heading, #2f3640);
border-bottom: 1px solid var(--border-color, #e2e8f0);
letter-spacing: -0.3px;
display: flex;
align-items: center;
@ -141,7 +141,7 @@
}
.title-hero a {
color: var(--primary-color);
color: var(--accent-color, #6366f1);
text-decoration: none;
font-size: 14px;
font-weight: 600;
@ -152,7 +152,7 @@
}
.title-hero a:hover {
color: var(--primary-hover);
color: var(--accent-hover, #5558e3);
text-decoration: underline;
}
@ -163,10 +163,10 @@
/* Form Styling */
.form-horizontal {
background: var(--bg-light);
background: var(--bg-hover, #f8fafc);
padding: 30px;
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
border: 1px solid var(--border-color, #e2e8f0);
}
.form-group {
@ -180,7 +180,7 @@
.control-label {
font-weight: 600;
color: var(--text-primary);
color: var(--text-primary, #1e293b);
margin-bottom: 8px;
font-size: 14px;
letter-spacing: 0.3px;
@ -190,22 +190,22 @@
}
.form-control {
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
border: 2px solid var(--border-color, #e2e8f0);
border-radius: var(--radius-md, 8px);
padding: 12px 16px;
font-size: 15px;
transition: var(--transition-base);
background: white;
background: var(--bg-secondary, white);
}
.form-control:focus {
border-color: var(--primary-color);
border-color: var(--accent-color, #6366f1);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
outline: none;
}
.form-control::placeholder {
color: var(--text-muted);
color: var(--text-secondary, #94a3b8);
font-size: 14px;
}
@ -276,11 +276,11 @@
/* Progress Section */
.progress {
height: 12px;
border-radius: var(--radius-full);
background: var(--border-color);
border-radius: var(--radius-full, 9999px);
background: var(--border-color, #e2e8f0);
overflow: hidden;
margin-top: 15px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 3px var(--shadow-color, rgba(0,0,0,0.1));
}
.progress-bar {
@ -316,31 +316,31 @@
}
.alert-success {
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
color: #065f46;
border: 1px solid #6ee7b7;
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-success a {
color: #065f46;
color: var(--success-text, #065f46);
font-weight: 600;
text-decoration: underline;
}
.alert-danger {
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
color: #991b1b;
border: 1px solid #fca5a5;
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);
}
/* Info Box */
.info-box {
background: linear-gradient(135deg, #e0e7ff 0%, #cdd4f9 100%);
border: 1px solid #c7d2fe;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--info-bg, #e0e7ff) 0%, var(--info-light, #cdd4f9) 100%);
border: 1px solid var(--info-border, #c7d2fe);
border-radius: var(--radius-lg, 12px);
padding: 20px;
margin-bottom: 25px;
color: var(--primary-color);
color: var(--accent-color, #6366f1);
font-size: 14px;
line-height: 1.6;
display: flex;