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 16:19:28 +05:00
parent f95a83f305
commit 4abba83f96
10 changed files with 813 additions and 471 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
websiteFunctions/templates/websiteFunctions/assignPackage.html
View File

@ -430,11 +430,11 @@ function deleteAssignment(url) {
</button>
</div>
<div class="modal-body">
<p style="font-size: 14px; color: #2f3640;">
<i class="fas fa-exclamation-triangle" style="color: #ff9800; margin-right: 8px;"></i>
<p style="font-size: 14px; color: var(--text-primary, #2f3640);">
<i class="fas fa-exclamation-triangle" style="color: var(--warning-color, #ff9800); margin-right: 8px;"></i>
{% trans "Are you sure you want to delete this package assignment?" %}
</p>
<p style="font-size: 13px; color: #8893a7; margin-top: 10px;">
<p style="font-size: 13px; color: var(--text-secondary, #8893a7); margin-top: 10px;">
{% trans "The user will no longer have access to this Docker package." %}
</p>
</div>

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

@ -22,29 +22,29 @@
.page-title {
font-size: 28px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 8px;
}
.page-subtitle {
font-size: 14px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
}
/* Card styles */
.content-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 30px;
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);
margin-bottom: 25px;
}
.card-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 25px;
display: flex;
align-items: center;
@ -55,7 +55,7 @@
content: '';
width: 4px;
height: 24px;
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
border-radius: 2px;
}
@ -77,21 +77,21 @@
.form-control {
width: 100%;
padding: 10px 14px;
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:hover {
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
}
.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);
}
@ -113,8 +113,8 @@
/* Windows-specific fixes */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
select.form-control {
color: #2f3640 !important;
background-color: white !important;
color: var(--text-primary, #2f3640) !important;
background-color: var(--bg-secondary, white) !important;
}
}
@ -124,14 +124,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);
}
/* Checkbox styles */
@ -144,15 +144,15 @@
align-items: center;
gap: 10px;
padding: 12px 16px;
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
transition: all 0.2s ease;
cursor: pointer;
}
.checkbox-wrapper:hover {
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
background: #f0f1ff;
}
@ -161,12 +161,12 @@
height: 18px;
border-radius: 4px;
cursor: pointer;
accent-color: #5b5fcf;
accent-color: var(--accent-color, #5b5fcf);
}
.checkbox-label {
font-size: 14px;
color: #2f3640;
color: var(--text-primary, #2f3640);
font-weight: 500;
cursor: pointer;
user-select: none;
@ -174,7 +174,7 @@
}
.checkbox-label a {
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
text-decoration: none;
font-weight: 600;
}
@ -199,12 +199,12 @@
}
.btn-primary {
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
color: white;
}
.btn-primary:hover {
background: #4a4fc4;
background: var(--accent-hover, #4a4fc4);
box-shadow: 0 4px 12px rgba(91,95,207,0.3);
transform: translateY(-1px);
}
@ -217,25 +217,25 @@
}
.btn-secondary {
background: #f8f9ff;
color: #5b5fcf;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
color: var(--accent-color, #5b5fcf);
border: 1px solid var(--border-color, #e8e9ff);
}
.btn-secondary:hover {
background: #eef0ff;
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
}
.btn-secondary:disabled {
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
color: #ccc;
cursor: not-allowed;
}
/* Progress section */
.progress-section {
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
border-radius: 10px;
padding: 25px;
margin-top: 20px;
@ -244,13 +244,13 @@
.progress-status {
font-size: 16px;
font-weight: 600;
color: #2f3640;
color: var(--text-primary, #2f3640);
text-align: center;
margin-bottom: 20px;
}
.progress-bar-container {
background: #e8e9ff;
background: var(--border-color, #e8e9ff);
height: 8px;
border-radius: 4px;
overflow: hidden;
@ -258,7 +258,7 @@
}
.progress-bar-fill {
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
height: 100%;
border-radius: 4px;
transition: width 0.3s ease;
@ -275,21 +275,21 @@
}
.alert-info {
background: #e3f2fd;
border: 1px solid #bbdefb;
color: #1565c0;
background: var(--info-bg, #e3f2fd);
border: 1px solid var(--info-border, #bbdefb);
color: var(--info-text, #1565c0);
}
.alert-success {
background: #e8f5e9;
border: 1px solid #c8e6c9;
color: #2e7d32;
background: var(--success-bg, #e8f5e9);
border: 1px solid var(--success-border, #c8e6c9);
color: var(--success-text, #2e7d32);
}
.alert-danger {
background: #ffebee;
border: 1px solid #ffcdd2;
color: #c62828;
background: var(--danger-bg, #ffebee);
border: 1px solid var(--danger-border, #ffcdd2);
color: var(--danger-text, #c62828);
}
/* Loading spinner */
@ -298,7 +298,7 @@
width: 16px;
height: 16px;
border: 2px solid #f3f3f3;
border-top: 2px solid #5b5fcf;
border-top: 2px solid var(--accent-color, #5b5fcf);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 10px;
@ -319,7 +319,7 @@
/* Error message */
.field-error {
font-size: 12px;
color: #dc3545;
color: var(--danger-text, #dc3545);
margin-top: 5px;
}
@ -425,7 +425,7 @@
<input ng-model="apacheBackend" type="checkbox" id="apacheBackend">
<label for="apacheBackend" class="checkbox-label">
OpenLiteSpeed + Apache (Backend)
<small style="display: block; color: #8893a7; font-weight: normal; margin-top: 4px;">
<small style="display: block; color: var(--text-secondary, #8893a7); font-weight: normal; margin-top: 4px;">
{% trans "For Ubuntu 22, AlmaLinux 8 and AlmaLinux 9" %}
</small>
</label>
@ -437,7 +437,7 @@
Premium Feature
<i class="fas fa-external-link-alt" style="font-size: 10px;"></i>
</a>
<small style="display: block; color: #8893a7; font-weight: normal; margin-top: 4px;">
<small style="display: block; color: var(--text-secondary, #8893a7); font-weight: normal; margin-top: 4px;">
{% trans "For Ubuntu 22, AlmaLinux 8 and AlmaLinux 9" %}
</small>
</label>

110
websiteFunctions/templates/websiteFunctions/deleteWebsite.html
View File

@ -22,29 +22,29 @@
.page-title {
font-size: 28px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 8px;
}
.page-subtitle {
font-size: 14px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
}
/* Card styles */
.content-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 30px;
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);
margin-bottom: 25px;
}
.card-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 25px;
display: flex;
align-items: center;
@ -55,7 +55,7 @@
content: '';
width: 4px;
height: 24px;
background: #dc3545;
background: var(--danger-color, #dc3545);
border-radius: 2px;
}
@ -77,11 +77,11 @@
.form-control {
width: 100%;
padding: 10px 14px;
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;
}
@ -90,13 +90,13 @@
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: white;
background-color: var(--bg-secondary, white);
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 20px;
padding-right: 40px;
color: #2f3640 !important;
color: var(--text-primary, #2f3640) !important;
font-size: 14px !important;
line-height: 1.5;
height: auto;
@ -105,8 +105,8 @@
/* Ensure option text is visible */
select.form-control option {
color: #2f3640;
background-color: white;
color: var(--text-primary, #2f3640);
background-color: var(--bg-secondary, white);
padding: 8px;
font-size: 14px;
}
@ -117,31 +117,31 @@
border: 2px solid;
}
select.form-control option {
background: white;
color: black;
background: var(--bg-secondary, white);
color: var(--text-primary, black);
}
}
.form-control:hover {
border-color: #dc3545;
border-color: var(--danger-color, #dc3545);
}
.form-control:focus {
outline: none;
border-color: #dc3545;
border-color: var(--danger-color, #dc3545);
box-shadow: 0 0 0 3px rgba(220,53,69,0.1);
}
/* Specific focus styles for select */
select.form-control:focus {
background-color: white;
color: #2f3640;
background-color: var(--bg-secondary, white);
color: var(--text-primary, #2f3640);
}
/* Website selector card */
.website-selector-card {
background: #fff5f5;
border: 1px solid #ffdddd;
background: var(--danger-bg-light, #fff5f5);
border: 1px solid var(--danger-border-light, #ffdddd);
border-radius: 10px;
padding: 20px;
margin-bottom: 25px;
@ -158,8 +158,8 @@
/* Website details card */
.website-details-card {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 10px;
padding: 20px;
margin-bottom: 25px;
@ -171,7 +171,7 @@
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-color, #e8e9ff);
}
.detail-row:last-child {
@ -186,14 +186,14 @@
.detail-value {
font-size: 14px;
color: #2f3640;
color: var(--text-primary, #2f3640);
font-weight: 600;
}
/* Warning box */
.warning-box {
background: #fff3e0;
border: 1px solid #ffe0b2;
background: var(--warning-bg, #fff3e0);
border: 1px solid var(--warning-border, #ffe0b2);
border-radius: 10px;
padding: 20px;
margin-bottom: 25px;
@ -203,7 +203,7 @@
}
.warning-icon {
color: #ff9800;
color: var(--warning-color, #ff9800);
font-size: 24px;
flex-shrink: 0;
}
@ -215,7 +215,7 @@
.warning-title {
font-size: 16px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 8px;
}
@ -252,12 +252,12 @@
}
.btn-danger {
background: #dc3545;
background: var(--danger-color, #dc3545);
color: white;
}
.btn-danger:hover {
background: #c82333;
background: var(--danger-hover, #c82333);
box-shadow: 0 4px 12px rgba(220,53,69,0.3);
transform: translateY(-1px);
}
@ -270,20 +270,20 @@
}
.btn-secondary {
background: #f8f9ff;
color: #5b5fcf;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
color: var(--accent-color, #5b5fcf);
border: 1px solid var(--border-color, #e8e9ff);
}
.btn-secondary:hover {
background: #eef0ff;
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
}
/* Confirmation section */
.confirmation-section {
background: #ffebee;
border: 1px solid #ffcdd2;
background: var(--danger-bg, #ffebee);
border: 1px solid var(--danger-border, #ffcdd2);
border-radius: 10px;
padding: 25px;
margin-top: 25px;
@ -293,14 +293,14 @@
.confirmation-icon {
font-size: 48px;
color: #dc3545;
color: var(--danger-color, #dc3545);
margin-bottom: 15px;
}
.confirmation-title {
font-size: 20px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 10px;
}
@ -313,7 +313,7 @@
.confirmation-website {
font-size: 18px;
font-weight: 700;
color: #dc3545;
color: var(--danger-color, #dc3545);
margin-bottom: 25px;
}
@ -340,15 +340,15 @@
}
.alert-danger {
background: #ffebee;
border: 1px solid #ffcdd2;
color: #c62828;
background: var(--danger-bg, #ffebee);
border: 1px solid var(--danger-border, #ffcdd2);
color: var(--danger-text, #c62828);
}
.alert-success {
background: #e8f5e9;
border: 1px solid #c8e6c9;
color: #2e7d32;
background: var(--success-bg, #e8f5e9);
border: 1px solid var(--success-border, #c8e6c9);
color: var(--success-text, #2e7d32);
}
/* Loading spinner */
@ -357,7 +357,7 @@
width: 16px;
height: 16px;
border: 2px solid #f3f3f3;
border-top: 2px solid #dc3545;
border-top: 2px solid var(--danger-color, #dc3545);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 10px;
@ -372,7 +372,7 @@
.button-container {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #e8e9ff;
border-top: 1px solid var(--border-color, #e8e9ff);
}
/* Hide elements by default */
@ -396,28 +396,28 @@
@supports (-ms-ime-align: auto) {
/* Edge/IE specific styles */
select.form-control {
color: #2f3640 !important;
background-color: white !important;
color: var(--text-primary, #2f3640) !important;
background-color: var(--bg-secondary, white) !important;
}
}
/* Fix for Firefox on Windows */
@-moz-document url-prefix() {
select.form-control {
color: #2f3640 !important;
color: var(--text-primary, #2f3640) !important;
text-shadow: none;
}
}
/* Ensure selected option is always visible */
select.form-control::-ms-value {
color: #2f3640;
background-color: white;
color: var(--text-primary, #2f3640);
background-color: var(--bg-secondary, white);
}
/* Fix for Chrome on Windows */
select.form-control:not(:focus):not(:hover) {
color: #2f3640 !important;
color: var(--text-primary, #2f3640) !important;
}
@media (max-width: 768px) {

153
websiteFunctions/templates/websiteFunctions/installJoomla.html
View File

@ -7,6 +7,159 @@
{% get_current_language as LANGUAGE_CODE %}
<!-- Current language: {{ LANGUAGE_CODE }} -->
<style>
/* Joomla Installation Page Styles */
.container {
background: var(--bg-primary, #f0f0ff);
min-height: 100vh;
padding: 20px;
}
#page-title {
text-align: center;
margin-bottom: 30px;
}
#page-title h2 {
color: var(--text-primary, #2f3640);
font-size: 32px;
font-weight: 700;
margin-bottom: 10px;
}
#page-title p {
color: var(--text-secondary, #8893a7);
font-size: 16px;
}
.panel {
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);
margin: 0 auto;
max-width: 800px;
}
.panel-body {
padding: 30px;
}
.title-hero {
color: var(--text-primary, #2f3640);
font-size: 24px;
font-weight: 700;
margin-bottom: 30px;
text-align: center;
}
.example-box-wrapper {
background: transparent;
}
.form-horizontal.bordered-row {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
margin: 0;
}
.form-group {
margin-bottom: 25px;
}
.control-label {
font-weight: 600;
color: var(--text-primary, #2f3640);
font-size: 14px;
margin-bottom: 8px;
}
.form-control {
background: var(--bg-secondary, white);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 12px 16px;
font-size: 14px;
color: var(--text-primary, #2f3640);
transition: all 0.2s ease;
}
.form-control:focus {
outline: none;
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px var(--accent-focus, rgba(91,95,207,0.1));
}
.btn {
border-radius: 8px;
font-weight: 600;
transition: all 0.2s ease;
}
.btn-primary {
background: var(--accent-color, #5b5fcf);
border: 1px solid var(--accent-color, #5b5fcf);
color: var(--text-on-accent, white);
}
.btn-primary:hover {
background: var(--accent-hover, #4b4fbf);
border-color: var(--accent-hover, #4b4fbf);
color: var(--text-on-accent, white);
box-shadow: 0 2px 4px var(--accent-shadow, rgba(91,95,207,0.3));
}
.btn-lg {
padding: 12px 24px;
font-size: 16px;
}
.progress {
background: var(--border-color, #e8e9ff);
border-radius: 8px;
height: 12px;
margin-bottom: 20px;
}
.progress-bar {
background: var(--accent-color, #5b5fcf);
border-radius: 8px;
color: var(--text-on-accent, white);
font-size: 10px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
transition: width 0.4s ease;
}
.alert {
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
font-size: 14px;
line-height: 1.5;
}
.alert-success {
background: var(--success-bg, #f0f9ff);
border: 1px solid var(--success-border, #bae6fd);
color: var(--success-text, #0c4a6e);
}
.alert-danger {
background: var(--danger-bg, #fef2f2);
border: 1px solid var(--danger-border, #fecaca);
color: var(--danger-text, #991b1b);
}
.text-center {
text-align: center;
}
</style>
<div class="container">
<div id="page-title">
<h2>{% trans "Install Joomla" %}</h2>

182
websiteFunctions/templates/websiteFunctions/installMagento.html
View File

@ -7,6 +7,188 @@
{% get_current_language as LANGUAGE_CODE %}
<!-- Current language: {{ LANGUAGE_CODE }} -->
<style>
/* Magento Installation Page Styles */
.container {
background: var(--bg-primary, #f0f0ff);
min-height: 100vh;
padding: 20px;
}
#page-title {
text-align: center;
margin-bottom: 30px;
}
#page-title h2 {
color: var(--text-primary, #2f3640);
font-size: 32px;
font-weight: 700;
margin-bottom: 10px;
}
#page-title p {
color: var(--text-secondary, #8893a7);
font-size: 16px;
}
.panel {
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);
margin: 0 auto;
max-width: 800px;
}
.panel-body {
padding: 30px;
}
.title-hero {
color: var(--text-primary, #2f3640);
font-size: 24px;
font-weight: 700;
margin-bottom: 30px;
text-align: center;
}
.example-box-wrapper {
background: transparent;
}
.form-horizontal.bordered-row {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
margin: 0;
}
.form-group {
margin-bottom: 25px;
}
.control-label {
font-weight: 600;
color: var(--text-primary, #2f3640);
font-size: 14px;
margin-bottom: 8px;
}
.form-control {
background: var(--bg-secondary, white);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 12px 16px;
font-size: 14px;
color: var(--text-primary, #2f3640);
transition: all 0.2s ease;
}
.form-control:focus {
outline: none;
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px var(--accent-focus, rgba(91,95,207,0.1));
}
.checkbox {
margin-bottom: 10px;
}
.checkbox label {
color: var(--text-primary, #2f3640);
font-weight: 500;
margin-bottom: 0;
}
.checkbox input[type="checkbox"] {
margin-right: 8px;
}
.btn {
border-radius: 8px;
font-weight: 600;
transition: all 0.2s ease;
}
.btn-primary {
background: var(--accent-color, #5b5fcf);
border: 1px solid var(--accent-color, #5b5fcf);
color: var(--text-on-accent, white);
}
.btn-primary:hover {
background: var(--accent-hover, #4b4fbf);
border-color: var(--accent-hover, #4b4fbf);
color: var(--text-on-accent, white);
box-shadow: 0 2px 4px var(--accent-shadow, rgba(91,95,207,0.3));
}
.btn-lg {
padding: 12px 24px;
font-size: 16px;
}
.progress {
background: var(--border-color, #e8e9ff);
border-radius: 8px;
height: 12px;
margin-bottom: 20px;
}
.progress-bar {
background: var(--accent-color, #5b5fcf);
border-radius: 8px;
color: var(--text-on-accent, white);
font-size: 10px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
transition: width 0.4s ease;
}
.alert {
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
font-size: 14px;
line-height: 1.5;
}
.alert-success {
background: var(--success-bg, #f0f9ff);
border: 1px solid var(--success-border, #bae6fd);
color: var(--success-text, #0c4a6e);
}
.alert-danger {
background: var(--danger-bg, #fef2f2);
border: 1px solid var(--danger-border, #fecaca);
color: var(--danger-text, #991b1b);
}
.alert-warning {
background: var(--warning-bg, #fffbeb);
border: 1px solid var(--warning-border, #fed7aa);
color: var(--warning-text, #92400e);
}
.alert a {
color: var(--accent-color, #5b5fcf);
text-decoration: underline;
}
.alert a:hover {
color: var(--accent-hover, #4b4fbf);
}
.text-center {
text-align: center;
}
</style>
<div class="container">
<div id="page-title">
<h2>{% trans "Install Magento" %}</h2>

99
websiteFunctions/templates/websiteFunctions/installMautic.html
View File

@ -8,36 +8,36 @@
<!-- 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;
/* Mautic Installation Page Styles with Dark Mode Support */
.mautic-installer {
--primary-color: var(--accent-color, #6366f1);
--primary-hover: var(--accent-hover, #5558e3);
--primary-light: var(--accent-bg, #eef2ff);
--secondary-color: var(--purple-color, #8b5cf6);
--accent-color-local: var(--accent-color, #ec4899);
--success-color-local: var(--success-color, #10b981);
--danger-color-local: var(--danger-color, #ef4444);
--warning-color-local: var(--warning-color, #f59e0b);
--info-color-local: var(--info-color, #3b82f6);
--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--bg-gradient: linear-gradient(135deg, var(--accent-color, #667eea) 0%, var(--purple-color, #764ba2) 100%);
--bg-gradient-alt: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--bg-gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
--bg-gradient-success: linear-gradient(135deg, var(--success-color, #11998e) 0%, #38ef7d 100%);
--bg-light: #f8fafc;
--bg-card: #ffffff;
--bg-hover: #f1f5f9;
--border-color: #e2e8f0;
--border-light: #f1f5f9;
--bg-light-local: var(--bg-hover, #f8fafc);
--bg-card-local: var(--bg-secondary, #ffffff);
--bg-hover-local: var(--bg-hover, #f1f5f9);
--border-color-local: var(--border-color, #e2e8f0);
--border-light-local: var(--border-light, #f1f5f9);
--text-primary: #1e293b;
--text-secondary: #64748b;
--text-muted: #94a3b8;
--text-primary-local: var(--text-primary, #1e293b);
--text-secondary-local: var(--text-secondary, #64748b);
--text-muted-local: var(--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);
--shadow-sm: 0 1px 3px var(--shadow-color, rgba(0,0,0,0.12)), 0 1px 2px var(--shadow-color, rgba(0,0,0,0.06));
--shadow-md: 0 4px 6px -1px var(--shadow-color, rgba(0,0,0,0.1)), 0 2px 4px -1px var(--shadow-color, rgba(0,0,0,0.06));
--shadow-lg: 0 10px 15px -3px var(--shadow-color, rgba(0,0,0,0.1)), 0 4px 6px -2px var(--shadow-color, rgba(0,0,0,0.05));
--shadow-xl: 0 20px 25px -5px var(--shadow-color, rgba(0,0,0,0.1)), 0 10px 10px -5px var(--shadow-color, rgba(0,0,0,0.04));
--radius-sm: 6px;
--radius-md: 8px;
@ -49,16 +49,16 @@
}
/* Container Styling */
.container {
.mautic-installer .container {
max-width: 1200px;
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(--border-color, #e2e8f0) 100%);
}
/* Page Title Section */
#page-title {
.mautic-installer #page-title {
background: var(--bg-gradient);
color: white;
padding: 40px;
@ -107,28 +107,28 @@
}
/* Main Panel */
.panel {
background: var(--bg-card);
.mautic-installer .panel {
background: var(--bg-card-local);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
border: 1px solid var(--border-color-local);
overflow: hidden;
position: relative;
}
.panel-body {
.mautic-installer .panel-body {
padding: 0;
}
/* Content Box Header */
.title-hero {
background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-light) 100%);
.mautic-installer .title-hero {
background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-light-local) 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-primary-local);
border-bottom: 1px solid var(--border-color-local);
letter-spacing: -0.3px;
display: flex;
align-items: center;
@ -141,19 +141,19 @@
}
/* Form Wrapper */
.example-box-wrapper {
.mautic-installer .example-box-wrapper {
padding: 30px;
}
/* Form Styling */
.form-horizontal {
background: var(--bg-light);
.mautic-installer .form-horizontal {
background: var(--bg-light-local);
padding: 30px;
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
border: 1px solid var(--border-color-local);
}
.form-group {
.mautic-installer .form-group {
margin-bottom: 25px;
transition: var(--transition-base);
}
@ -162,9 +162,9 @@
transform: translateX(5px);
}
.control-label {
.mautic-installer .control-label {
font-weight: 600;
color: var(--text-primary);
color: var(--text-primary-local);
margin-bottom: 8px;
font-size: 14px;
letter-spacing: 0.3px;
@ -173,13 +173,14 @@
gap: 8px;
}
.form-control {
border: 2px solid var(--border-color);
.mautic-installer .form-control {
border: 2px solid var(--border-color-local);
border-radius: var(--radius-md);
padding: 12px 16px;
font-size: 15px;
transition: var(--transition-base);
background: white;
background: var(--bg-secondary, white);
color: var(--text-primary-local);
}
.form-control:focus {
@ -188,8 +189,8 @@
outline: none;
}
.form-control::placeholder {
color: var(--text-muted);
.mautic-installer .form-control::placeholder {
color: var(--text-muted-local);
font-size: 14px;
}
@ -435,6 +436,7 @@
}
</style>
<div class="mautic-installer">
<div class="container">
<div id="page-title">
<h2>
@ -598,5 +600,6 @@
</div>
</div>
</div>
{% endblock %}

84
websiteFunctions/templates/websiteFunctions/installPrestaShop.html
View File

@ -8,36 +8,36 @@
<!-- 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;
/* PrestaShop Installation Page Styles with Dark Mode Support */
.prestashop-installer {
--primary-color: var(--accent-color, #6366f1);
--primary-hover: var(--accent-hover, #5558e3);
--primary-light: var(--accent-bg, #eef2ff);
--secondary-color: var(--purple-color, #8b5cf6);
--accent-color-local: var(--accent-color, #ec4899);
--success-color-local: var(--success-color, #10b981);
--danger-color-local: var(--danger-color, #ef4444);
--warning-color-local: var(--warning-color, #f59e0b);
--info-color-local: var(--info-color, #3b82f6);
--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--bg-gradient: linear-gradient(135deg, var(--accent-color, #667eea) 0%, var(--purple-color, #764ba2) 100%);
--bg-gradient-alt: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--bg-gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
--bg-gradient-success: linear-gradient(135deg, var(--success-color, #11998e) 0%, #38ef7d 100%);
--bg-light: #f8fafc;
--bg-card: #ffffff;
--bg-hover: #f1f5f9;
--border-color: #e2e8f0;
--border-light: #f1f5f9;
--bg-light-local: var(--bg-hover, #f8fafc);
--bg-card-local: var(--bg-secondary, #ffffff);
--bg-hover-local: var(--bg-hover, #f1f5f9);
--border-color-local: var(--border-color, #e2e8f0);
--border-light-local: var(--border-light, #f1f5f9);
--text-primary: #1e293b;
--text-secondary: #64748b;
--text-muted: #94a3b8;
--text-primary-local: var(--text-primary, #1e293b);
--text-secondary-local: var(--text-secondary, #64748b);
--text-muted-local: var(--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);
--shadow-sm: 0 1px 3px var(--shadow-color, rgba(0,0,0,0.12)), 0 1px 2px var(--shadow-color, rgba(0,0,0,0.06));
--shadow-md: 0 4px 6px -1px var(--shadow-color, rgba(0,0,0,0.1)), 0 2px 4px -1px var(--shadow-color, rgba(0,0,0,0.06));
--shadow-lg: 0 10px 15px -3px var(--shadow-color, rgba(0,0,0,0.1)), 0 4px 6px -2px var(--shadow-color, rgba(0,0,0,0.05));
--shadow-xl: 0 20px 25px -5px var(--shadow-color, rgba(0,0,0,0.1)), 0 10px 10px -5px var(--shadow-color, rgba(0,0,0,0.04));
--radius-sm: 6px;
--radius-md: 8px;
@ -49,16 +49,16 @@
}
/* Container Styling */
.container {
.prestashop-installer .container {
max-width: 1200px;
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(--border-color, #e2e8f0) 100%);
}
/* Page Title Section */
#page-title {
.prestashop-installer #page-title {
background: var(--bg-gradient);
color: white;
padding: 40px;
@ -107,28 +107,28 @@
}
/* Main Panel */
.panel {
background: var(--bg-card);
.prestashop-installer .panel {
background: var(--bg-card-local);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
border: 1px solid var(--border-color-local);
overflow: hidden;
position: relative;
}
.panel-body {
.prestashop-installer .panel-body {
padding: 0;
}
/* Content Box Header */
.title-hero {
background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-light) 100%);
.prestashop-installer .title-hero {
background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-light-local) 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-primary-local);
border-bottom: 1px solid var(--border-color-local);
letter-spacing: -0.3px;
display: flex;
align-items: center;
@ -141,19 +141,19 @@
}
/* Form Wrapper */
.example-box-wrapper {
.prestashop-installer .example-box-wrapper {
padding: 30px;
}
/* Form Styling */
.form-horizontal {
background: var(--bg-light);
.prestashop-installer .form-horizontal {
background: var(--bg-light-local);
padding: 30px;
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
border: 1px solid var(--border-color-local);
}
.form-group {
.prestashop-installer .form-group {
margin-bottom: 25px;
transition: var(--transition-base);
}
@ -415,6 +415,7 @@
}
</style>
<div class="prestashop-installer">
<div class="container">
<div id="page-title">
<h2>
@ -608,5 +609,6 @@
</div>
</div>
</div>
{% endblock %}

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

@ -22,29 +22,29 @@
.page-title {
font-size: 28px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 8px;
}
.page-subtitle {
font-size: 14px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
}
/* Card styles */
.content-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 30px;
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);
margin-bottom: 25px;
}
.card-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 25px;
display: flex;
align-items: center;
@ -55,7 +55,7 @@
content: '';
width: 4px;
height: 24px;
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
border-radius: 2px;
}
@ -77,11 +77,11 @@
.form-control {
width: 100%;
padding: 10px 14px;
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;
}
@ -90,13 +90,13 @@
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: white;
background-color: var(--bg-secondary, white);
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b5fcf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 20px;
padding-right: 40px;
color: #2f3640 !important;
color: var(--text-primary, #2f3640) !important;
font-size: 14px !important;
line-height: 1.5;
height: auto;
@ -105,8 +105,8 @@
/* Ensure option text is visible */
select.form-control option {
color: #2f3640;
background-color: white;
color: var(--text-primary, #2f3640);
background-color: var(--bg-secondary, white);
padding: 8px;
font-size: 14px;
}
@ -117,25 +117,25 @@
border: 2px solid;
}
select.form-control option {
background: white;
color: black;
background: var(--bg-secondary, white);
color: var(--text-primary, black);
}
}
.form-control:hover {
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
}
.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);
}
/* Specific focus styles for select */
select.form-control:focus {
background-color: white;
color: #2f3640;
background-color: var(--bg-secondary, white);
color: var(--text-primary, #2f3640);
}
/* Current value display */
@ -143,10 +143,10 @@
display: inline-block;
margin-top: 8px;
padding: 6px 12px;
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
border-radius: 6px;
font-size: 13px;
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
font-weight: 600;
}
@ -171,12 +171,12 @@
}
.btn-primary {
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
color: white;
}
.btn-primary:hover {
background: #4a4fc4;
background: var(--accent-hover, #4a4fc4);
box-shadow: 0 4px 12px rgba(91,95,207,0.3);
transform: translateY(-1px);
}
@ -205,21 +205,21 @@
}
.alert-info {
background: #e3f2fd;
border: 1px solid #bbdefb;
color: #1565c0;
background: var(--info-bg, #e3f2fd);
border: 1px solid var(--info-border, #bbdefb);
color: var(--info-text, #1565c0);
}
.alert-success {
background: #e8f5e9;
border: 1px solid #c8e6c9;
color: #2e7d32;
background: var(--success-bg, #e8f5e9);
border: 1px solid var(--success-border, #c8e6c9);
color: var(--success-text, #2e7d32);
}
.alert-danger {
background: #ffebee;
border: 1px solid #ffcdd2;
color: #c62828;
background: var(--danger-bg, #ffebee);
border: 1px solid var(--danger-border, #ffcdd2);
color: var(--danger-text, #c62828);
}
/* Loading spinner */
@ -228,7 +228,7 @@
width: 16px;
height: 16px;
border: 2px solid #f3f3f3;
border-top: 2px solid #5b5fcf;
border-top: 2px solid var(--accent-color, #5b5fcf);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 10px;
@ -241,8 +241,8 @@
/* Website selection card */
.website-selector-card {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 10px;
padding: 20px;
margin-bottom: 25px;
@ -267,14 +267,14 @@
/* Divider */
.form-divider {
height: 1px;
background: #e8e9ff;
background: var(--border-color, #e8e9ff);
margin: 30px 0;
}
/* Info box */
.info-box {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 16px;
margin-bottom: 20px;
@ -284,7 +284,7 @@
}
.info-box i {
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
font-size: 18px;
}
@ -295,7 +295,7 @@
.info-box-title {
font-size: 13px;
font-weight: 600;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 4px;
}
@ -309,7 +309,7 @@
.button-container {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #e8e9ff;
border-top: 1px solid var(--border-color, #e8e9ff);
}
/* Modification details section */
@ -340,28 +340,28 @@
@supports (-ms-ime-align: auto) {
/* Edge/IE specific styles */
select.form-control {
color: #2f3640 !important;
background-color: white !important;
color: var(--text-primary, #2f3640) !important;
background-color: var(--bg-secondary, white) !important;
}
}
/* Fix for Firefox on Windows */
@-moz-document url-prefix() {
select.form-control {
color: #2f3640 !important;
color: var(--text-primary, #2f3640) !important;
text-shadow: none;
}
}
/* Ensure selected option is always visible */
select.form-control::-ms-value {
color: #2f3640;
background-color: white;
color: var(--text-primary, #2f3640);
background-color: var(--bg-secondary, white);
}
/* Fix for Chrome on Windows */
select.form-control:not(:focus):not(:hover) {
color: #2f3640 !important;
color: var(--text-primary, #2f3640) !important;
}
@media (max-width: 768px) {

120
websiteFunctions/templates/websiteFunctions/suspendWebsite.html
View File

@ -22,29 +22,29 @@
.page-title {
font-size: 28px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 8px;
}
.page-subtitle {
font-size: 14px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
}
/* Card styles */
.content-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 30px;
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);
margin-bottom: 25px;
}
.card-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 25px;
display: flex;
align-items: center;
@ -55,7 +55,7 @@
content: '';
width: 4px;
height: 24px;
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
border-radius: 2px;
}
@ -77,11 +77,11 @@
.form-control {
width: 100%;
padding: 10px 14px;
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;
}
@ -90,13 +90,13 @@
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: white;
background-color: var(--bg-secondary, white);
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b5fcf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 20px;
padding-right: 40px;
color: #2f3640 !important;
color: var(--text-primary, #2f3640) !important;
font-size: 14px !important;
line-height: 1.5;
height: auto;
@ -105,8 +105,8 @@
/* Ensure option text is visible */
select.form-control option {
color: #2f3640;
background-color: white;
color: var(--text-primary, #2f3640);
background-color: var(--bg-secondary, white);
padding: 8px;
font-size: 14px;
}
@ -117,31 +117,31 @@
border: 2px solid;
}
select.form-control option {
background: white;
color: black;
background: var(--bg-secondary, white);
color: var(--text-primary, black);
}
}
.form-control:hover {
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
}
.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);
}
/* Specific focus styles for select */
select.form-control:focus {
background-color: white;
color: #2f3640;
background-color: var(--bg-secondary, white);
color: var(--text-primary, #2f3640);
}
/* Website selector card */
.website-selector-card {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 10px;
padding: 20px;
margin-bottom: 25px;
@ -169,15 +169,15 @@
}
.state-badge.active {
background: #e8f5e9;
color: #2e7d32;
border: 1px solid #c8e6c9;
background: var(--success-bg, #e8f5e9);
color: var(--success-text, #2e7d32);
border: 1px solid var(--success-border, #c8e6c9);
}
.state-badge.suspended {
background: #ffebee;
color: #c62828;
border: 1px solid #ffcdd2;
background: var(--danger-bg, #ffebee);
color: var(--danger-text, #c62828);
border: 1px solid var(--danger-border, #ffcdd2);
}
/* State selection */
@ -190,22 +190,22 @@
.state-option {
flex: 1;
padding: 20px;
border: 2px solid #e8e9ff;
border: 2px solid var(--border-color, #e8e9ff);
border-radius: 10px;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
background: white;
background: var(--bg-secondary, white);
}
.state-option:hover {
border-color: #5b5fcf;
background: #f8f9ff;
border-color: var(--accent-color, #5b5fcf);
background: var(--bg-hover, #f8f9ff);
}
.state-option.selected {
border-color: #5b5fcf;
background: #f8f9ff;
border-color: var(--accent-color, #5b5fcf);
background: var(--bg-hover, #f8f9ff);
}
.state-option.suspend {
@ -244,13 +244,13 @@
.state-option-title {
font-size: 16px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 5px;
}
.state-option-desc {
font-size: 12px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
}
/* Button styles */
@ -269,12 +269,12 @@
}
.btn-primary {
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
color: white;
}
.btn-primary:hover {
background: #4a4fc4;
background: var(--accent-hover, #4a4fc4);
box-shadow: 0 4px 12px rgba(91,95,207,0.3);
transform: translateY(-1px);
}
@ -325,21 +325,21 @@
}
.alert-danger {
background: #ffebee;
border: 1px solid #ffcdd2;
color: #c62828;
background: var(--danger-bg, #ffebee);
border: 1px solid var(--danger-border, #ffcdd2);
color: var(--danger-text, #c62828);
}
.alert-success {
background: #e8f5e9;
border: 1px solid #c8e6c9;
color: #2e7d32;
background: var(--success-bg, #e8f5e9);
border: 1px solid var(--success-border, #c8e6c9);
color: var(--success-text, #2e7d32);
}
.alert-warning {
background: #fff3e0;
border: 1px solid #ffe0b2;
color: #f57c00;
background: var(--warning-bg, #fff3e0);
border: 1px solid var(--warning-border, #ffe0b2);
color: var(--warning-text, #f57c00);
}
/* Loading spinner */
@ -348,7 +348,7 @@
width: 16px;
height: 16px;
border: 2px solid #f3f3f3;
border-top: 2px solid #5b5fcf;
border-top: 2px solid var(--accent-color, #5b5fcf);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 10px;
@ -361,8 +361,8 @@
/* Info box */
.info-box {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 16px;
margin-bottom: 20px;
@ -372,7 +372,7 @@
}
.info-box i {
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
font-size: 18px;
}
@ -383,7 +383,7 @@
.info-box-title {
font-size: 13px;
font-weight: 600;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 4px;
}
@ -401,7 +401,7 @@
}
.current-state strong {
color: #2f3640;
color: var(--text-primary, #2f3640);
font-weight: 600;
}
@ -409,7 +409,7 @@
.button-container {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #e8e9ff;
border-top: 1px solid var(--border-color, #e8e9ff);
}
@ -417,28 +417,28 @@
@supports (-ms-ime-align: auto) {
/* Edge/IE specific styles */
select.form-control {
color: #2f3640 !important;
background-color: white !important;
color: var(--text-primary, #2f3640) !important;
background-color: var(--bg-secondary, white) !important;
}
}
/* Fix for Firefox on Windows */
@-moz-document url-prefix() {
select.form-control {
color: #2f3640 !important;
color: var(--text-primary, #2f3640) !important;
text-shadow: none;
}
}
/* Ensure selected option is always visible */
select.form-control::-ms-value {
color: #2f3640;
background-color: white;
color: var(--text-primary, #2f3640);
background-color: var(--bg-secondary, white);
}
/* Fix for Chrome on Windows */
select.form-control:not(:focus):not(:hover) {
color: #2f3640 !important;
color: var(--text-primary, #2f3640) !important;
}
@media (max-width: 768px) {

338
websiteFunctions/templates/websiteFunctions/website.html
View File

@ -49,23 +49,23 @@
}
.cyberpanel-website-page .cyber-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
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);
margin-bottom: 25px;
padding: 25px;
transition: box-shadow 0.2s;
}
.cyberpanel-website-page .cyber-card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
box-shadow: 0 4px 16px var(--shadow-color-hover, rgba(0,0,0,0.12));
}
.cyberpanel-website-page .cyber-section-title {
font-size: 16px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 20px;
display: flex;
align-items: center;
@ -78,14 +78,14 @@
content: '';
width: 4px;
height: 24px;
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
border-radius: 2px;
}
.cyberpanel-website-page .cyber-btn {
background: #f8f9ff;
border: 1px solid #e8e9ff;
color: #5b5fcf;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
color: var(--accent-color, #5b5fcf);
padding: 8px 16px;
border-radius: 8px;
font-size: 13px;
@ -99,55 +99,55 @@
}
.cyberpanel-website-page .cyber-btn:hover {
background: #5b5fcf;
color: white;
border-color: #5b5fcf;
box-shadow: 0 2px 4px rgba(91,95,207,0.3);
background: var(--accent-color, #5b5fcf);
color: var(--text-on-accent, white);
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 2px 4px var(--accent-shadow, rgba(91,95,207,0.3));
text-decoration: none;
}
.cyberpanel-website-page .cyber-btn.blue {
background: #f0f9ff;
color: #0ea5e9;
border-color: #bae6fd;
background: var(--info-bg, #f0f9ff);
color: var(--info-color, #0ea5e9);
border-color: var(--info-border, #bae6fd);
}
.cyberpanel-website-page .cyber-btn.orange {
background: #fff7ed;
color: #ea580c;
border-color: #fed7aa;
background: var(--warning-bg, #fff7ed);
color: var(--warning-color, #ea580c);
border-color: var(--warning-border, #fed7aa);
}
.cyberpanel-website-page .cyber-btn.green {
background: #f0fdf4;
color: #16a34a;
border-color: #bbf7d0;
background: var(--success-bg, #f0fdf4);
color: var(--success-color, #16a34a);
border-color: var(--success-border, #bbf7d0);
}
.cyberpanel-website-page .cyber-btn.purple {
background: #faf5ff;
color: #9333ea;
border-color: #e9d5ff;
background: var(--purple-bg, #faf5ff);
color: var(--purple-color, #9333ea);
border-color: var(--purple-border, #e9d5ff);
}
.cyberpanel-website-page .cyber-table {
width: 100%;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
}
.cyberpanel-website-page .cyber-table th,
.cyberpanel-website-page .cyber-table td {
padding: 12px 16px;
border-bottom: 1px solid #f0f0ff;
border-bottom: 1px solid var(--border-light, #f0f0ff);
font-size: 14px;
}
.cyberpanel-website-page .cyber-table th {
color: #64748b;
color: var(--text-secondary, #64748b);
font-weight: 700;
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
border-top: none;
font-size: 11px;
text-transform: uppercase;
@ -159,11 +159,11 @@
}
.cyberpanel-website-page .cyber-table tr:hover {
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
}
.cyberpanel-website-page .cyber-progress {
background: #e8e9ff;
background: var(--border-color, #e8e9ff);
border-radius: 8px;
height: 12px;
width: 100%;
@ -172,10 +172,10 @@
}
.cyberpanel-website-page .cyber-progress-bar {
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
height: 100%;
border-radius: 8px;
color: white;
color: var(--text-on-accent, white);
font-size: 10px;
font-weight: 600;
display: flex;
@ -186,14 +186,14 @@
}
.cyberpanel-website-page .cyber-ssl-box {
background: #f0f9ff;
color: #0c4a6e;
background: var(--info-bg, #f0f9ff);
color: var(--info-text, #0c4a6e);
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
font-size: 13px;
font-weight: 500;
border: 1px solid #bae6fd;
border: 1px solid var(--info-border, #bae6fd);
}
.cyberpanel-website-page .cyber-resource-row {
@ -212,10 +212,10 @@
/* Legacy panel styles for old sections */
.example-box-wrapper {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
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);
margin-bottom: 25px;
}
@ -232,7 +232,7 @@
.content-box-header {
font-size: 16px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 20px;
display: flex;
align-items: center;
@ -245,14 +245,14 @@
content: '';
width: 4px;
height: 24px;
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
border-radius: 2px;
}
.btn {
background: #5b5fcf;
border: 1px solid #5b5fcf;
color: white;
background: var(--accent-color, #5b5fcf);
border: 1px solid var(--accent-color, #5b5fcf);
color: var(--text-on-accent, white);
padding: 8px 16px;
border-radius: 6px;
font-size: 13px;
@ -261,20 +261,20 @@
}
.btn:hover {
background: #4b4fbf;
border-color: #4b4fbf;
color: white;
box-shadow: 0 2px 4px rgba(91,95,207,0.3);
background: var(--accent-hover, #4b4fbf);
border-color: var(--accent-hover, #4b4fbf);
color: var(--text-on-accent, white);
box-shadow: 0 2px 4px var(--accent-shadow, rgba(91,95,207,0.3));
}
.btn-success {
background: #16a34a;
border-color: #16a34a;
background: var(--success-color, #16a34a);
border-color: var(--success-color, #16a34a);
}
.btn-success:hover {
background: #15803d;
border-color: #15803d;
background: var(--success-hover, #15803d);
border-color: var(--success-hover, #15803d);
}
.alert {
@ -286,35 +286,37 @@
}
.alert-success {
background: #f0f9ff;
border: 1px solid #bae6fd;
color: #0c4a6e;
background: var(--success-bg, #f0f9ff);
border: 1px solid var(--success-border, #bae6fd);
color: var(--success-text, #0c4a6e);
}
.alert-danger {
background: #fef2f2;
border: 1px solid #fecaca;
color: #991b1b;
background: var(--danger-bg, #fef2f2);
border: 1px solid var(--danger-border, #fecaca);
color: var(--danger-text, #991b1b);
}
.alert-warning {
background: #fffbeb;
border: 1px solid #fed7aa;
color: #92400e;
background: var(--warning-bg, #fffbeb);
border: 1px solid var(--warning-border, #fed7aa);
color: var(--warning-text, #92400e);
}
.form-control {
padding: 8px 12px;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 6px;
font-size: 14px;
background: var(--bg-secondary, white);
color: var(--text-primary, #2f3640);
transition: all 0.2s ease;
}
.form-control:focus {
outline: none;
border-color: #5b5fcf;
box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px var(--accent-focus, rgba(91,95,207,0.1));
}
/* General select Windows fix for ALL selectboxes */
@ -367,22 +369,22 @@
}
.modal-content {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
border: 1px solid #e8e9ff;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
border: 1px solid var(--border-color, #e8e9ff);
box-shadow: 0 4px 20px var(--modal-shadow, rgba(0,0,0,0.15));
}
.modal-header {
padding: 20px 25px 15px;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-color, #e8e9ff);
border-radius: 12px 12px 0 0;
}
.modal-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin: 0;
}
@ -394,14 +396,14 @@
background: none;
border: none;
font-size: 24px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
cursor: pointer;
float: right;
margin-top: -5px;
}
.close:hover {
color: #2f3640;
color: var(--text-primary, #2f3640);
}
/* Grid layout for items in sections */
@ -452,23 +454,23 @@
align-items: center;
text-align: left;
padding: 15px;
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
text-decoration: none;
color: #2f3640;
color: var(--text-primary, #2f3640);
transition: all 0.2s ease;
min-height: 80px;
gap: 12px;
}
.panel-body a:hover {
background: #e8e9ff;
border-color: #5b5fcf;
background: var(--border-color, #e8e9ff);
border-color: var(--accent-color, #5b5fcf);
text-decoration: none;
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(91,95,207,0.15);
box-shadow: 0 4px 12px var(--accent-shadow-light, rgba(91,95,207,0.15));
}
.panel-body a img {
@ -519,24 +521,24 @@
align-items: center;
gap: 12px;
padding: 15px;
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
min-height: 70px;
text-decoration: none;
color: #2f3640;
color: var(--text-primary, #2f3640);
width: 100%;
}
.content-box-wrapper .row .col-md-3 > a:hover,
.content-box-wrapper .row .col-md-4 > a:hover,
.content-box-wrapper .row .col-md-6 > div:hover {
background: #e8e9ff;
border-color: #5b5fcf;
background: var(--border-color, #e8e9ff);
border-color: var(--accent-color, #5b5fcf);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(91,95,207,0.15);
box-shadow: 0 4px 12px var(--accent-shadow-light, rgba(91,95,207,0.15));
text-decoration: none;
}
@ -546,8 +548,8 @@
align-items: center;
gap: 12px;
padding: 15px;
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
@ -556,10 +558,10 @@
}
.content-box-wrapper .row .col-md-6 .clickable-log:hover {
background: #e8e9ff;
border-color: #5b5fcf;
background: var(--border-color, #e8e9ff);
border-color: var(--accent-color, #5b5fcf);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(91,95,207,0.15);
box-shadow: 0 4px 12px var(--accent-shadow-light, rgba(91,95,207,0.15));
}
/* Icon styling */
@ -575,13 +577,13 @@
margin: 0 !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #2f3640;
color: var(--text-primary, #2f3640);
line-height: 1.2;
}
.content-box-wrapper .row a:hover .h4,
.content-box-wrapper .row .clickable-log:hover .h4 {
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
}
@media (max-width: 900px) {
@ -629,33 +631,33 @@
/* Modal and Form Modal Styling for Rewrite Rules */
.form-horizontal.bordered-row {
background: white;
background: var(--bg-secondary, white);
padding: 30px;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
box-shadow: 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
margin: 20px 0;
}
/* Rewrite Rules Specific Styling */
textarea[ng-model="rewriteRules"],
textarea[ng-model="configData"] {
background: #f8fafc;
border: 2px solid #e2e8f0;
background: var(--bg-code, #f8fafc);
border: 2px solid var(--border-color, #e2e8f0);
border-radius: 12px;
padding: 16px;
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
font-size: 14px;
line-height: 1.6;
color: #1e293b;
color: var(--text-primary, #1e293b);
min-height: 300px;
}
textarea[ng-model="rewriteRules"]:focus,
textarea[ng-model="configData"]:focus {
background: white;
border-color: #5b5fcf;
box-shadow: 0 0 0 4px rgba(91, 95, 207, 0.1);
background: var(--bg-secondary, white);
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 4px var(--accent-focus, rgba(91, 95, 207, 0.1));
}
/* Form group spacing in modal */
@ -676,22 +678,22 @@
font-size: 16px;
font-weight: 600;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(91, 95, 207, 0.2);
box-shadow: 0 4px 15px var(--accent-shadow, rgba(91, 95, 207, 0.2));
}
.btn-primary.btn-lg:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(91, 95, 207, 0.3);
box-shadow: 0 8px 25px var(--accent-shadow, rgba(91, 95, 207, 0.3));
}
/* Style for template dropdown */
.form-horizontal.bordered-row select.form-control {
background: #f8fafc;
border: 2px solid #e2e8f0;
background: var(--bg-code, #f8fafc);
border: 2px solid var(--border-color, #e2e8f0);
border-radius: 8px;
padding: 12px 16px;
font-size: 14px;
color: #1e293b;
color: var(--text-primary, #1e293b);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -707,8 +709,8 @@
/* Windows-specific fixes */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.form-horizontal.bordered-row select.form-control {
color: #1e293b !important;
background-color: #f8fafc !important;
color: var(--text-primary, #1e293b) !important;
background-color: var(--bg-code, #f8fafc) !important;
}
}
@ -718,16 +720,16 @@
}
.form-horizontal.bordered-row select.form-control:focus {
background: white;
border-color: #5b5fcf;
box-shadow: 0 0 0 4px rgba(91, 95, 207, 0.1);
color: #1e293b;
background: var(--bg-secondary, white);
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 4px var(--accent-focus, rgba(91, 95, 207, 0.1));
color: var(--text-primary, #1e293b);
}
/* Style for label */
.form-horizontal.bordered-row .control-label {
font-weight: 600;
color: #2f3640;
color: var(--text-primary, #2f3640);
font-size: 14px;
margin-bottom: 8px;
}
@ -846,11 +848,11 @@
/* Quick Actions Bar */
.quick-actions {
background: white;
background: var(--bg-secondary, white);
border-radius: 16px;
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
box-shadow: 0 4px 20px var(--shadow-color, rgba(0,0,0,0.08));
display: flex;
justify-content: space-between;
align-items: center;
@ -869,14 +871,14 @@
align-items: center;
gap: 8px;
padding: 10px 20px;
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
border: 2px solid transparent;
border-radius: 10px;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
text-decoration: none;
color: #2f3640;
color: var(--text-primary, #2f3640);
position: relative;
overflow: hidden;
}
@ -909,43 +911,43 @@
}
.action-btn.git {
border-color: #ff6b6b;
color: #ff6b6b;
border-color: var(--git-color, #ff6b6b);
color: var(--git-color, #ff6b6b);
}
.action-btn.git:hover {
background: #ff6b6b;
color: white;
background: var(--git-color, #ff6b6b);
color: var(--text-on-accent, white);
}
.action-btn.staging {
border-color: #4ecdc4;
color: #4ecdc4;
border-color: var(--staging-color, #4ecdc4);
color: var(--staging-color, #4ecdc4);
}
.action-btn.staging:hover {
background: #4ecdc4;
color: white;
background: var(--staging-color, #4ecdc4);
color: var(--text-on-accent, white);
}
.action-btn.ssh {
border-color: #5b5fcf;
color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
color: var(--accent-color, #5b5fcf);
}
.action-btn.ssh:hover {
background: #5b5fcf;
color: white;
background: var(--accent-color, #5b5fcf);
color: var(--text-on-accent, white);
}
.action-btn.stress {
border-color: #f39c12;
color: #f39c12;
border-color: var(--stress-color, #f39c12);
color: var(--stress-color, #f39c12);
}
.action-btn.stress:hover {
background: #f39c12;
color: white;
background: var(--stress-color, #f39c12);
color: var(--text-on-accent, white);
}
/* Modern Resource Cards */
@ -968,10 +970,10 @@
}
.resource-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 16px;
padding: 25px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
box-shadow: 0 4px 20px var(--shadow-color, rgba(0,0,0,0.08));
transition: all 0.3s ease;
position: relative;
overflow: hidden;
@ -989,13 +991,13 @@
.resource-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
box-shadow: 0 8px 30px var(--shadow-color-hover, rgba(0,0,0,0.12));
}
.resource-icon {
width: 50px;
height: 50px;
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
border-radius: 12px;
display: flex;
align-items: center;
@ -1005,28 +1007,28 @@
}
.resource-card.disk .resource-icon {
background: #e8f5ff;
color: #2196f3;
background: var(--info-bg, #e8f5ff);
color: var(--info-color, #2196f3);
}
.resource-card.bandwidth .resource-icon {
background: #f3e5f5;
color: #9c27b0;
background: var(--purple-bg, #f3e5f5);
color: var(--purple-color, #9c27b0);
}
.resource-card.database .resource-icon {
background: #e8f5e9;
color: #4caf50;
background: var(--success-bg, #e8f5e9);
color: var(--success-color, #4caf50);
}
.resource-card.ftp .resource-icon {
background: #fff3e0;
color: #ff9800;
background: var(--warning-bg, #fff3e0);
color: var(--warning-color, #ff9800);
}
.resource-card.ssl .resource-icon {
background: #f0fdf4;
color: #10b981;
background: var(--success-bg, #f0fdf4);
color: var(--success-color, #10b981);
}
/* SSL Card Special Styling */
@ -1041,7 +1043,7 @@
.resource-title {
font-size: 14px;
color: #64748b;
color: var(--text-secondary, #64748b);
margin-bottom: 10px;
font-weight: 600;
text-transform: uppercase;
@ -1051,17 +1053,17 @@
.resource-value {
font-size: 28px;
font-weight: 800;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin-bottom: 15px;
}
.resource-limit {
font-size: 14px;
color: #94a3b8;
color: var(--text-muted, #94a3b8);
}
.resource-progress {
background: #f1f5f9;
background: var(--border-light, #f1f5f9);
height: 8px;
border-radius: 10px;
overflow: hidden;
@ -1133,7 +1135,7 @@
}
.app-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 16px;
padding: 30px;
text-align: center;
@ -1143,7 +1145,7 @@
color: inherit;
position: relative;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
box-shadow: 0 4px 20px var(--shadow-color, rgba(0,0,0,0.1));
}
.app-card::before {
@ -1161,7 +1163,7 @@
.app-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
box-shadow: 0 12px 40px var(--shadow-color-hover, rgba(0,0,0,0.15));
}
.app-card:hover::before {
@ -1214,13 +1216,13 @@
.app-name {
font-size: 20px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 8px;
}
.app-description {
font-size: 14px;
color: #64748b;
color: var(--text-secondary, #64748b);
margin-bottom: 20px;
min-height: 40px;
}
@ -1234,8 +1236,8 @@
}
.feature-tag {
background: #f0f4ff;
color: #5b5fcf;
background: var(--accent-bg, #f0f4ff);
color: var(--accent-color, #5b5fcf);
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
@ -1247,21 +1249,21 @@
align-items: center;
gap: 8px;
padding: 10px 24px;
background: #f8f9ff;
color: #5b5fcf;
background: var(--bg-hover, #f8f9ff);
color: var(--accent-color, #5b5fcf);
border-radius: 8px;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
}
.quick-badge {
position: absolute;
top: 15px;
right: 15px;
background: #10b981;
color: white;
background: var(--success-color, #10b981);
color: var(--text-on-accent, white);
padding: 4px 8px;
border-radius: 6px;
font-size: 11px;
@ -1343,18 +1345,18 @@
</div>
{% endif %}
{% if not has_addons %}
<div style="background: #fff3cd; color: #856404; border: 1px solid #ffeeba; border-radius: 8px; padding: 18px; margin-bottom: 18px; text-align: center;">
<div style="background: var(--warning-bg, #fff3cd); color: var(--warning-text, #856404); border: 1px solid var(--warning-border, #ffeeba); border-radius: 8px; padding: 18px; margin-bottom: 18px; text-align: center;">
<strong>This feature requires the CyberPanel Add-ons bundle.</strong><br>
<a href="https://cyberpanel.net/cyberpanel-addons" target="_blank" style="color: #2563eb; text-decoration: underline; font-weight: 600;">Learn more & upgrade</a>
</div>
<div style="position: relative; width: 100%; height: 400px;">
<div id="xterm-container" style="width:100%;height:400px;background:#000;"></div>
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center; z-index: 10; border-radius: 8px; font-size: 1.2em; color: #888; font-weight: 600;">
<div id="xterm-container" style="width:100%;height:400px;background:var(--terminal-bg, #000);"></div>
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--overlay-bg, rgba(255,255,255,0.85)); display: flex; align-items: center; justify-content: center; z-index: 10; border-radius: 8px; font-size: 1.2em; color: var(--text-muted, #888); font-weight: 600;">
Web Terminal is disabled. Please upgrade to CyberPanel Add-ons to enable this feature.
</div>
</div>
{% else %}
<div id="xterm-container" style="width:100%;height:400px;background:#000;"></div>
<div id="xterm-container" style="width:100%;height:400px;background:var(--terminal-bg, #000);"></div>
{% endif %}
</div>
</div>
@ -1564,7 +1566,7 @@
</a>
</div>
<div class="col-sm-12">
<table class="table">
<table class="table cyber-table">
<thead>
<tr>
<th>Type</th>
@ -1832,7 +1834,7 @@
<div class="col-sm-12">
<table class="table">
<table class="table cyber-table">
<thead>
<tr>
<th>Domain</th>