Nemcio/CyberPanel
1
0
Fork 0
mirror of https://github.com/usmannasir/cyberpanel.git synced 2025-10-26 00:36:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

enable dark mode

Browse Source
This commit is contained in:
usmannasir
2025-08-05 01:47:22 +05:00
parent ac0980acc4
commit 1b045eb26b
6 changed files with 209 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.idea/workspace.xml generated
View File

@@ -4,7 +4,12 @@
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="5251c5c9-f2a1-41f2-bc76-10b517091df1" name="Changes" comment="" />
<list default="true" id="5251c5c9-f2a1-41f2-bc76-10b517091df1" name="Changes" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/firewall/templates/firewall/modSecurity.html" beforeDir="false" afterPath="$PROJECT_DIR$/firewall/templates/firewall/modSecurity.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/firewall/templates/firewall/modSecurityRules.html" beforeDir="false" afterPath="$PROJECT_DIR$/firewall/templates/firewall/modSecurityRules.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/firewall/templates/firewall/modSecurityRulesPacks.html" beforeDir="false" afterPath="$PROJECT_DIR$/firewall/templates/firewall/modSecurityRulesPacks.html" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />

174
aiScanner/templates/aiScanner/scanner.html
View File

@@ -20,18 +20,18 @@ AI Security Scanner - CyberPanel
/* Section Headers */
.scanner-section {
background: white;
background: var(--bg-primary, white);
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
border: 1px solid var(--border-primary, #e8e9ff);
}
.scanner-title {
font-size: 16px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 20px;
display: flex;
align-items: center;
@@ -60,27 +60,27 @@ AI Security Scanner - CyberPanel
}
.scanner-alert-info {
background: #e0f2fe;
border-color: #0ea5e9;
color: #0c4a6e;
background: var(--alert-info-bg, #e0f2fe);
border-color: var(--alert-info-border, #0ea5e9);
color: var(--alert-info-text, #0c4a6e);
}
.scanner-alert-success {
background: #d1fae5;
border-color: #10b981;
color: #065f46;
background: var(--alert-success-bg, #d1fae5);
border-color: var(--alert-success-border, #10b981);
color: var(--alert-success-text, #065f46);
}
.scanner-alert-warning {
background: #fef3c7;
border-color: #f59e0b;
color: #92400e;
background: var(--alert-warning-bg, #fef3c7);
border-color: var(--alert-warning-border, #f59e0b);
color: var(--alert-warning-text, #92400e);
}
.scanner-alert-danger {
background: #fee2e2;
border-color: #ef4444;
color: #991b1b;
background: var(--alert-danger-bg, #fee2e2);
border-color: var(--alert-danger-border, #ef4444);
color: var(--alert-danger-text, #991b1b);
}
.scanner-alert i {
@@ -112,8 +112,8 @@ AI Security Scanner - CyberPanel
}
.stat-card {
background: white;
border: 1px solid #e8e9ff;
background: var(--bg-primary, white);
border: 1px solid var(--border-primary, #e8e9ff);
border-radius: 12px;
padding: 25px;
text-align: center;
@@ -157,12 +157,12 @@ AI Security Scanner - CyberPanel
font-size: 32px;
font-weight: 700;
margin: 0 0 8px 0;
color: #2f3640;
color: var(--text-primary, #2f3640);
}
.stat-card p {
margin: 0;
color: #64748b;
color: var(--text-secondary, #64748b);
font-size: 14px;
font-weight: 500;
}
@@ -170,7 +170,7 @@ AI Security Scanner - CyberPanel
.stat-card small {
display: block;
margin-top: 8px;
color: #94a3b8;
color: var(--text-muted, #94a3b8);
font-size: 12px;
}
@@ -203,8 +203,8 @@ AI Security Scanner - CyberPanel
}
.btn-default {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-secondary, #f8f9ff);
border: 1px solid var(--border-primary, #e8e9ff);
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
@@ -217,7 +217,7 @@ AI Security Scanner - CyberPanel
}
.btn-default:hover {
background: #e8e9ff;
background: var(--border-primary, #e8e9ff);
color: #4644c0;
}
@@ -240,18 +240,19 @@ AI Security Scanner - CyberPanel
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #2f3640;
color: var(--text-primary, #2f3640);
font-size: 14px;
}
.form-control {
width: 100%;
padding: 10px 15px;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-primary, #e8e9ff);
border-radius: 8px;
font-size: 14px;
transition: all 0.3s ease;
background: white;
background: var(--bg-primary, white);
color: var(--text-primary, #2f3640);
}
.form-control:focus {
@@ -262,7 +263,7 @@ AI Security Scanner - CyberPanel
/* Table Styles */
.table-container {
background: white;
background: var(--bg-primary, white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
@@ -274,31 +275,31 @@ AI Security Scanner - CyberPanel
}
.scanner-table th {
background: #f8f9ff;
background: var(--bg-secondary, #f8f9ff);
padding: 15px;
text-align: left;
font-size: 12px;
font-weight: 700;
color: #64748b;
color: var(--text-secondary, #64748b);
text-transform: uppercase;
letter-spacing: 0.8px;
border-bottom: 2px solid #e8e9ff;
border-bottom: 2px solid var(--border-primary, #e8e9ff);
}
.scanner-table td {
padding: 15px;
border-bottom: 1px solid #f0f0ff;
color: #2f3640;
border-bottom: 1px solid var(--border-light, #f0f0ff);
color: var(--text-primary, #2f3640);
font-size: 14px;
}
.scanner-table tr:hover {
background: #f8f9ff;
background: var(--bg-secondary, #f8f9ff);
}
/* Progress Bar */
.progress {
background: #e8e9ff;
background: var(--border-primary, #e8e9ff);
height: 8px;
border-radius: 4px;
overflow: hidden;
@@ -335,23 +336,23 @@ AI Security Scanner - CyberPanel
}
.status-label.success {
background: #d1fae5;
color: #10b981;
background: var(--alert-success-bg, #d1fae5);
color: var(--alert-success-border, #10b981);
}
.status-label.warning {
background: #fef3c7;
color: #f59e0b;
background: var(--alert-warning-bg, #fef3c7);
color: var(--alert-warning-border, #f59e0b);
}
.status-label.danger {
background: #fee2e2;
color: #ef4444;
background: var(--alert-danger-bg, #fee2e2);
color: var(--alert-danger-border, #ef4444);
}
.status-label.info {
background: #e0f2fe;
color: #3b82f6;
background: var(--alert-info-bg, #e0f2fe);
color: var(--alert-info-border, #3b82f6);
}
/* Modal Styles */
@@ -367,8 +368,8 @@ AI Security Scanner - CyberPanel
}
.modal-header {
background: #f8f9ff;
border-bottom: 1px solid #e8e9ff;
background: var(--bg-secondary, #f8f9ff);
border-bottom: 1px solid var(--border-primary, #e8e9ff);
border-radius: 16px 16px 0 0;
padding: 20px 25px;
}
@@ -376,7 +377,7 @@ AI Security Scanner - CyberPanel
.modal-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
display: flex;
align-items: center;
gap: 10px;
@@ -384,11 +385,13 @@ AI Security Scanner - CyberPanel
.modal-body {
padding: 25px;
background: var(--bg-primary, white);
color: var(--text-primary, #2f3640);
}
.modal-footer {
background: #f8f9ff;
border-top: 1px solid #e8e9ff;
background: var(--bg-secondary, #f8f9ff);
border-top: 1px solid var(--border-primary, #e8e9ff);
border-radius: 0 0 16px 16px;
padding: 15px 25px;
}
@@ -468,16 +471,16 @@ AI Security Scanner - CyberPanel
<h6 style="font-weight: 600; margin-bottom: 10px;">Current Pricing:</h6>
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="margin-bottom: 5px;"><strong>{{ pricing_data.plan.name }}</strong></li>
<li style="margin-bottom: 5px; color: #64748b;">Max Files: {{ pricing_data.plan.limits.max_files_per_scan|floatformat:0 }}</li>
<li style="color: #64748b;">Max File Size: {{ pricing_data.plan.limits.max_file_size_mb }}MB</li>
<li style="margin-bottom: 5px; color: var(--text-secondary, #64748b);">Max Files: {{ pricing_data.plan.limits.max_files_per_scan|floatformat:0 }}</li>
<li style="color: var(--text-secondary, #64748b);">Max File Size: {{ pricing_data.plan.limits.max_file_size_mb }}MB</li>
</ul>
</div>
<div>
<h6 style="font-weight: 600; margin-bottom: 10px;">Example Costs:</h6>
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="margin-bottom: 5px; color: #64748b;">Small Scan: ${{ pricing_data.plan.example_costs.small_scan.estimated_cost_usd }}</li>
<li style="margin-bottom: 5px; color: #64748b;">Medium Scan: ${{ pricing_data.plan.example_costs.medium_scan.estimated_cost_usd }}</li>
<li style="color: #64748b;">Large Scan: ${{ pricing_data.plan.example_costs.large_scan.estimated_cost_usd }}</li>
<li style="margin-bottom: 5px; color: var(--text-secondary, #64748b);">Small Scan: ${{ pricing_data.plan.example_costs.small_scan.estimated_cost_usd }}</li>
<li style="margin-bottom: 5px; color: var(--text-secondary, #64748b);">Medium Scan: ${{ pricing_data.plan.example_costs.medium_scan.estimated_cost_usd }}</li>
<li style="color: var(--text-secondary, #64748b);">Large Scan: ${{ pricing_data.plan.example_costs.large_scan.estimated_cost_usd }}</li>
</ul>
</div>
</div>
@@ -500,7 +503,7 @@ AI Security Scanner - CyberPanel
<h4>VPS Free Scans Available</h4>
<p>Great news! Your CyberPanel VPS hosting includes <strong>{{ vps_info.free_scans_available|default:0 }} free AI security scans</strong> this month ({{ vps_info.scans_used_this_month|default:0 }}/{{ vps_info.free_scans_per_month|default:0 }} used).</p>
{% if not is_payment_configured %}
<p style="margin-top: 10px;"><small style="color: #64748b;">You can still add a payment method below for additional scans beyond your free allowance.</small></p>
<p style="margin-top: 10px;"><small style="color: var(--text-secondary, #64748b);">You can still add a payment method below for additional scans beyond your free allowance.</small></p>
{% endif %}
</div>
</div>
@@ -581,21 +584,21 @@ AI Security Scanner - CyberPanel
</div>
{% if vps_info.is_vps|default:False and not is_payment_configured %}
<p style="color: #64748b; margin-bottom: 15px;">
<p style="color: var(--text-secondary, #64748b); margin-bottom: 15px;">
<i class="fas fa-info-circle"></i>
Payment setup is optional for VPS users. You have {{ vps_info.free_scans_available|default:0 }} free scans available.
</p>
{% else %}
<p style="color: #64748b; margin-bottom: 15px;">
<p style="color: var(--text-secondary, #64748b); margin-bottom: 15px;">
<i class="fas fa-info-circle"></i>
Your account uses automatic billing. Add multiple payment methods for backup security.
</p>
{% endif %}
<div id="paymentMethodsList">
{% if is_payment_configured %}
<p style="color: #94a3b8;">Payment methods will be managed through the platform.</p>
<p style="color: var(--text-muted, #94a3b8);">Payment methods will be managed through the platform.</p>
{% else %}
<p style="color: #94a3b8;">No payment methods configured yet.</p>
<p style="color: var(--text-muted, #94a3b8);">No payment methods configured yet.</p>
{% endif %}
</div>
</div>
@@ -716,7 +719,7 @@ AI Security Scanner - CyberPanel
<div class="progress" style="height: 20px;">
<div class="progress-bar progress-bar-animated"
role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<span class="progress-text" style="position: absolute; width: 100%; text-align: center; line-height: 20px; color: #2f3640; font-size: 12px;">0%</span>
<span class="progress-text" style="position: absolute; width: 100%; text-align: center; line-height: 20px; color: var(--text-primary, #2f3640); font-size: 12px;">0%</span>
</div>
</div>
{% else %}
@@ -791,7 +794,7 @@ AI Security Scanner - CyberPanel
<div class="progress" style="height: 25px;">
<div id="scanProgressBar" class="progress-bar progress-bar-animated"
role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<span id="scanProgressText" style="position: absolute; width: 100%; text-align: center; line-height: 25px; color: #2f3640; font-weight: 600;">0%</span>
<span id="scanProgressText" style="position: absolute; width: 100%; text-align: center; line-height: 25px; color: var(--text-primary, #2f3640); font-weight: 600;">0%</span>
</div>
</div>
</div>
@@ -801,38 +804,38 @@ AI Security Scanner - CyberPanel
<div class="row" style="margin-bottom: 15px;">
<div class="col-md-6">
<strong>Current Activity:</strong>
<br><span id="currentActivity" class="text-muted">Initializing...</span>
<br><span id="currentActivity" style="color: var(--text-secondary, #64748b);">Initializing...</span>
</div>
<div class="col-md-6">
<strong>Current File:</strong>
<br><code id="currentFile" class="text-primary">N/A</code>
<br><code id="currentFile" style="color: #5856d6;">N/A</code>
</div>
</div>
<!-- Statistics -->
<div class="row">
<div class="col-md-3">
<div style="background: #e0f2fe; border-radius: 8px; padding: 15px; text-align: center;">
<h4 id="filesDiscovered" style="margin: 0 0 5px 0; color: #3b82f6;">0</h4>
<small style="color: #64748b;">Files Discovered</small>
<div style="background: var(--alert-info-bg, #e0f2fe); border-radius: 8px; padding: 15px; text-align: center;">
<h4 id="filesDiscovered" style="margin: 0 0 5px 0; color: var(--alert-info-border, #3b82f6);">0</h4>
<small style="color: var(--text-secondary, #64748b);">Files Discovered</small>
</div>
</div>
<div class="col-md-3">
<div style="background: #e8e6ff; border-radius: 8px; padding: 15px; text-align: center;">
<div style="background: var(--bg-secondary, #e8e6ff); border-radius: 8px; padding: 15px; text-align: center;">
<h4 id="filesScanned" style="margin: 0 0 5px 0; color: #5856d6;">0</h4>
<small style="color: #64748b;">Files Scanned</small>
<small style="color: var(--text-secondary, #64748b);">Files Scanned</small>
</div>
</div>
<div class="col-md-3">
<div style="background: #fef3c7; border-radius: 8px; padding: 15px; text-align: center;">
<h4 id="filesRemaining" style="margin: 0 0 5px 0; color: #f59e0b;">0</h4>
<small style="color: #64748b;">Files Remaining</small>
<div style="background: var(--alert-warning-bg, #fef3c7); border-radius: 8px; padding: 15px; text-align: center;">
<h4 id="filesRemaining" style="margin: 0 0 5px 0; color: var(--alert-warning-border, #f59e0b);">0</h4>
<small style="color: var(--text-secondary, #64748b);">Files Remaining</small>
</div>
</div>
<div class="col-md-3">
<div style="background: #fee2e2; border-radius: 8px; padding: 15px; text-align: center;">
<h4 id="threatsFound" style="margin: 0 0 5px 0; color: #ef4444;">0</h4>
<small style="color: #64748b;">Threats Found</small>
<div style="background: var(--alert-danger-bg, #fee2e2); border-radius: 8px; padding: 15px; text-align: center;">
<h4 id="threatsFound" style="margin: 0 0 5px 0; color: var(--alert-danger-border, #ef4444);">0</h4>
<small style="color: var(--text-secondary, #64748b);">Threats Found</small>
</div>
</div>
</div>
@@ -849,7 +852,7 @@ AI Security Scanner - CyberPanel
<!-- Last Updated -->
<div class="row" style="margin-top: 15px;">
<div class="col-md-12">
<small class="text-muted">Last updated: <span id="lastUpdated">Never</span></small>
<small style="color: var(--text-muted, #94a3b8);">Last updated: <span id="lastUpdated">Never</span></small>
</div>
</div>
</div>
@@ -1240,13 +1243,13 @@ function displayCompletedScanDetails(scan) {
finding.severity === 'medium' ? 'warning' : 'info';
findingsHtml += `
<div style="background: white; border: 1px solid #e8e9ff; border-radius: 8px; padding: 15px;">
<h6 style="margin: 0 0 10px 0; display: flex; align-items: center; gap: 10px;">
<div style="background: var(--bg-primary, white); border: 1px solid var(--border-primary, #e8e9ff); border-radius: 8px; padding: 15px;">
<h6 style="margin: 0 0 10px 0; display: flex; align-items: center; gap: 10px; color: var(--text-primary, #2f3640);">
<span class="status-label ${severityClass}" style="text-transform: uppercase;">${finding.severity}</span>
${finding.title}
</h6>
<p style="margin: 0 0 10px 0; color: #64748b;">${finding.description}</p>
${finding.file ? `<small style="color: #94a3b8;">File: ${finding.file}</small>` : ''}
<p style="margin: 0 0 10px 0; color: var(--text-secondary, #64748b);">${finding.description}</p>
${finding.file ? `<small style="color: var(--text-muted, #94a3b8);">File: ${finding.file}</small>` : ''}
</div>
`;
});
@@ -1282,7 +1285,7 @@ function displayCompletedScanDetails(scan) {
</div>
<h4 style="margin: 0; font-size: 24px; font-weight: 700;">${threatsFound}</h4>
<p style="margin: 5px 0 0 0; font-size: 13px;">Threats Found</p>
${(criticalThreats > 0 || highThreats > 0) ? `<small style="color: #ef4444; font-size: 11px;">${criticalThreats > 0 ? `${criticalThreats} Critical` : ''}${criticalThreats > 0 && highThreats > 0 ? ', ' : ''}${highThreats > 0 ? `${highThreats} High` : ''}</small>` : ''}
${(criticalThreats > 0 || highThreats > 0) ? `<small style="color: var(--alert-danger-border, #ef4444); font-size: 11px;">${criticalThreats > 0 ? `${criticalThreats} Critical` : ''}${criticalThreats > 0 && highThreats > 0 ? ', ' : ''}${highThreats > 0 ? `${highThreats} High` : ''}</small>` : ''}
</div>
<div class="stat-card" style="padding: 20px;">
<div class="stat-card-icon info" style="width: 40px; height: 40px; font-size: 18px; margin-bottom: 10px;">
@@ -1412,7 +1415,7 @@ function updateTableRowProgress(row, data) {
<div class="progress-bar progress-bar-animated"
role="progressbar" style="width: ${data.progress}%"
aria-valuenow="${data.progress}" aria-valuemin="0" aria-valuemax="100">
<span class="progress-text" style="position: absolute; width: 100%; text-align: center; line-height: 20px; color: #2f3640; font-size: 12px;">${data.progress}%</span>
<span class="progress-text" style="position: absolute; width: 100%; text-align: center; line-height: 20px; color: var(--text-primary, #2f3640); font-size: 12px;">${data.progress}%</span>
</div>
</div>
`;
@@ -1598,7 +1601,7 @@ function displayScheduledScans(scans) {
const container = document.getElementById('scheduledScansContainer');
if (!scans || scans.length === 0) {
container.innerHTML = '<p style="color: #94a3b8; text-align: center; padding: 20px;">No scheduled scans configured yet.</p>';
container.innerHTML = '<p style="color: var(--text-muted, #94a3b8); text-align: center; padding: 20px;">No scheduled scans configured yet.</p>';
return;
}
@@ -1970,10 +1973,10 @@ document.addEventListener('DOMContentLoaded', function() {
}
.scheduled-scan-card {
border: 1px solid #e8e9ff;
border: 1px solid var(--border-primary, #e8e9ff);
border-radius: 8px;
padding: 20px;
background: white;
background: var(--bg-primary, white);
}
.scheduled-scan-header {
@@ -1985,13 +1988,13 @@ document.addEventListener('DOMContentLoaded', function() {
.scheduled-scan-header h4 {
margin: 0;
color: #2f3640;
color: var(--text-primary, #2f3640);
font-size: 16px;
}
.scheduled-scan-info p {
margin: 5px 0;
color: #64748b;
color: var(--text-secondary, #64748b);
font-size: 14px;
}
@@ -2003,7 +2006,8 @@ document.addEventListener('DOMContentLoaded', function() {
}
.checkbox-group {
background: #f8f9fa;
background: var(--bg-secondary, #f8f9fa);
border-color: var(--border-primary, #ddd);
}
.form-check {

61
firewall/templates/firewall/csf.html
View File

@@ -97,10 +97,10 @@
/* Install Panel */
.install-panel {
background: white;
background: var(--bg-primary, white);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
border: 1px solid var(--border-primary, #e8e9ff);
overflow: hidden;
animation: fadeInUp 0.5s ease-out;
text-align: center;
@@ -116,12 +116,12 @@
.install-title {
font-size: 1.5rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin-bottom: 1rem;
}
.install-subtitle {
color: #64748b;
color: var(--text-secondary, #64748b);
margin-bottom: 2rem;
}
@@ -147,10 +147,10 @@
/* Installation Progress */
.install-progress {
background: white;
background: var(--bg-primary, white);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
border: 1px solid var(--border-primary, #e8e9ff);
overflow: hidden;
animation: fadeInUp 0.5s ease-out;
padding: 2rem;
@@ -173,13 +173,13 @@
.progress-title {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
}
.log-textarea {
width: 100%;
padding: 1rem;
border: 2px solid #e8e9ff;
border: 2px solid var(--border-primary, #e8e9ff);
border-radius: 10px;
font-family: 'Monaco', 'Consolas', monospace;
font-size: 0.875rem;
@@ -191,10 +191,10 @@
/* Configuration Panel */
.config-panel {
background: white;
background: var(--bg-primary, white);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
border: 1px solid var(--border-primary, #e8e9ff);
overflow: hidden;
animation: fadeInUp 0.5s ease-out;
}
@@ -204,7 +204,7 @@
display: flex;
gap: 0.25rem;
padding: 0.5rem;
background: #f8f9ff;
background: var(--bg-secondary, #f8f9ff);
border-radius: 12px;
margin-bottom: 2rem;
}
@@ -217,7 +217,7 @@
border-radius: 8px;
font-weight: 600;
font-size: 0.9375rem;
color: #64748b;
color: var(--text-secondary, #64748b);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
@@ -253,8 +253,8 @@
/* Native GUI Button */
.native-gui-btn {
background: #f8f9ff;
border: 2px solid #e8e9ff;
background: var(--bg-secondary, #f8f9ff);
border: 2px solid var(--border-primary, #e8e9ff);
color: #5b5fcf;
padding: 0.75rem 1.5rem;
border-radius: 10px;
@@ -279,17 +279,17 @@
/* Form Styles */
.form-section {
background: white;
background: var(--bg-primary, white);
border-radius: 12px;
padding: 2rem;
margin-bottom: 1.5rem;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-primary, #e8e9ff);
}
.form-section-title {
font-size: 1.125rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
@@ -306,7 +306,7 @@
.form-label {
flex: 0 0 200px;
font-weight: 600;
color: #334155;
color: var(--text-secondary, #334155);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
@@ -315,17 +315,18 @@
.form-control {
flex: 1;
padding: 0.75rem 1rem;
border: 2px solid #e8e9ff;
border: 2px solid var(--border-primary, #e8e9ff);
border-radius: 10px;
font-size: 0.9375rem;
transition: all 0.3s ease;
background: #f8f9ff;
background: var(--bg-secondary, #f8f9ff);
color: var(--text-primary, #1e293b);
}
.form-control:focus {
outline: none;
border-color: #5b5fcf;
background: white;
background: var(--bg-primary, white);
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
}
@@ -370,7 +371,7 @@
left: 0;
right: 0;
bottom: 0;
background-color: #cbd5e1;
background-color: var(--bg-tertiary, #cbd5e1);
transition: .4s;
border-radius: 26px;
}
@@ -454,15 +455,15 @@
}
.alert-success {
background: #e8e6ff;
color: #5856d6;
border: 1px solid #d4d4ff;
background: var(--alert-success-bg, #e8e6ff);
color: var(--alert-success-text, #5856d6);
border: 1px solid var(--alert-success-border, #d4d4ff);
}
.alert-danger {
background: #fee2e2;
color: #991b1b;
border: 1px solid #fecaca;
background: var(--alert-danger-bg, #fee2e2);
color: var(--alert-danger-text, #991b1b);
border: 1px solid var(--alert-danger-border, #fecaca);
}
.alert-icon {
@@ -489,7 +490,7 @@
.coming-soon {
text-align: center;
padding: 3rem;
color: #64748b;
color: var(--text-secondary, #64748b);
font-size: 1.125rem;
}
@@ -716,7 +717,7 @@
<div class="tab-content" id="lfd">
<div class="coming-soon">
<i class="fas fa-clock fa-3x" style="color: #5b5fcf; margin-bottom: 1rem;"></i>
<h3 style="color: #1e293b; margin-bottom: 0.5rem;">{% trans 'LFD Configuration' %}</h3>
<h3 style="color: var(--text-primary, #1e293b); margin-bottom: 0.5rem;">{% trans 'LFD Configuration' %}</h3>
<p>{% trans 'Login Failure Daemon configuration coming soon.' %}</p>
</div>
</div>

59
firewall/templates/firewall/modSecurity.html
View File

@@ -116,10 +116,10 @@
/* Install Panel */
.install-panel {
background: white;
background: var(--bg-primary, white);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
overflow: hidden;
animation: fadeInUp 0.5s ease-out;
text-align: center;
@@ -135,12 +135,12 @@
.install-title {
font-size: 1.5rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin-bottom: 1rem;
}
.install-subtitle {
color: #64748b;
color: var(--text-secondary, #64748b);
margin-bottom: 2rem;
}
@@ -166,10 +166,10 @@
/* Installation Progress */
.install-progress {
background: white;
background: var(--bg-primary, white);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
overflow: hidden;
animation: fadeInUp 0.5s ease-out;
padding: 2rem;
@@ -191,28 +191,28 @@
.progress-title {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
}
.log-textarea {
width: 100%;
padding: 1rem;
border: 2px solid #e8e9ff;
border: 2px solid var(--border-color, #e8e9ff);
border-radius: 10px;
font-family: 'Monaco', 'Consolas', monospace;
font-size: 0.875rem;
background: #1e293b;
color: #5b5fcf;
background: var(--bg-tertiary, #1e293b);
color: var(--text-accent, #5b5fcf);
resize: vertical;
min-height: 300px;
}
/* Configuration Panel */
.config-panel {
background: white;
background: var(--bg-primary, white);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
overflow: hidden;
animation: fadeInUp 0.5s ease-out;
}
@@ -259,7 +259,7 @@
.form-label {
flex: 0 0 200px;
font-weight: 600;
color: #334155;
color: var(--text-secondary, #334155);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
@@ -268,17 +268,18 @@
.form-control {
flex: 1;
padding: 0.75rem 1rem;
border: 2px solid #e8e9ff;
border: 2px solid var(--border-color, #e8e9ff);
border-radius: 10px;
font-size: 0.9375rem;
transition: all 0.3s ease;
background: #f8f9ff;
background: var(--bg-secondary, #f8f9ff);
color: var(--text-primary, #1e293b);
}
.form-control:focus {
outline: none;
border-color: #22c55e;
background: white;
background: var(--bg-primary, white);
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
}
@@ -312,7 +313,7 @@
left: 0;
right: 0;
bottom: 0;
background-color: #cbd5e1;
background-color: var(--bg-tertiary, #cbd5e1);
transition: .4s;
border-radius: 26px;
}
@@ -376,15 +377,15 @@
}
.alert-success {
background: #e8e6ff;
color: #5856d6;
border: 1px solid #d4d4ff;
background: var(--alert-success-bg, #e8e6ff);
color: var(--alert-success-text, #5856d6);
border: 1px solid var(--alert-success-border, #d4d4ff);
}
.alert-danger {
background: #fee2e2;
color: #991b1b;
border: 1px solid #fecaca;
background: var(--alert-error-bg, #fee2e2);
color: var(--alert-error-text, #991b1b);
border: 1px solid var(--alert-error-border, #fecaca);
}
.alert-icon {
@@ -393,8 +394,8 @@
/* Info Box */
.info-box {
background: #f0f9ff;
border: 1px solid #bae6fd;
background: var(--alert-info-bg, #f0f9ff);
border: 1px solid var(--alert-info-border, #bae6fd);
border-radius: 10px;
padding: 1rem 1.5rem;
margin-bottom: 1.5rem;
@@ -404,12 +405,12 @@
}
.info-icon {
color: #0284c7;
color: var(--alert-info-text, #0284c7);
font-size: 1.25rem;
}
.info-text {
color: #075985;
color: var(--alert-info-text, #075985);
font-size: 0.875rem;
}
@@ -417,7 +418,7 @@
.loading-spinner {
width: 20px;
height: 20px;
border: 2px solid #f3f3f3;
border: 2px solid var(--border-color, #f3f3f3);
border-top: 2px solid #5b5fcf;
border-radius: 50%;
animation: spin 1s linear infinite;
@@ -537,7 +538,7 @@
</div>
{% trans "ModSecurity Configuration" %}
</div>
<div ng-show="!modsecLoading" class="loading-spinner"></div>
<div ng-show="modsecLoading" class="loading-spinner"></div>
</div>
<div class="panel-content">

47
firewall/templates/firewall/modSecurityRules.html
View File

@@ -116,10 +116,10 @@
/* Rules Editor Panel */
.rules-panel {
background: white;
background: var(--bg-primary, white);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
overflow: hidden;
animation: fadeInUp 0.5s ease-out;
}
@@ -153,12 +153,13 @@
.panel-content {
padding: 2rem;
background: var(--bg-primary, white);
}
/* Info Box */
.info-box {
background: #f0f9ff;
border: 1px solid #bae6fd;
background: var(--bg-secondary, #f0f9ff);
border: 1px solid var(--border-color-light, #bae6fd);
border-radius: 10px;
padding: 1rem 1.5rem;
margin-bottom: 1.5rem;
@@ -168,12 +169,12 @@
}
.info-icon {
color: #0284c7;
color: var(--accent-primary, #0284c7);
font-size: 1.25rem;
}
.info-text {
color: #075985;
color: var(--text-secondary, #075985);
font-size: 0.875rem;
}
@@ -181,12 +182,12 @@
.rules-textarea {
width: 100%;
padding: 1rem;
border: 2px solid #e8e9ff;
border: 2px solid var(--border-color, #e8e9ff);
border-radius: 10px;
font-family: 'Monaco', 'Consolas', monospace;
font-size: 0.875rem;
background: #1e293b;
color: #5b5fcf;
color: var(--text-primary, #5b5fcf);
resize: vertical;
min-height: 400px;
transition: all 0.3s ease;
@@ -194,16 +195,16 @@
.rules-textarea:focus {
outline: none;
border-color: #5b5fcf;
border-color: var(--accent-primary, #5b5fcf);
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
}
/* Install Panel */
.install-panel {
background: white;
background: var(--bg-primary, white);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
overflow: hidden;
animation: fadeInUp 0.5s ease-out;
text-align: center;
@@ -212,19 +213,19 @@
.install-icon {
font-size: 4rem;
color: #5b5fcf;
color: var(--accent-primary, #5b5fcf);
margin-bottom: 1.5rem;
}
.install-title {
font-size: 1.5rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin-bottom: 1rem;
}
.install-subtitle {
color: #64748b;
color: var(--text-secondary, #64748b);
margin-bottom: 2rem;
}
@@ -281,15 +282,15 @@
}
.alert-success {
background: #e8e6ff;
color: #5856d6;
border: 1px solid #d4d4ff;
background: var(--success-bg, #e8e6ff);
color: var(--success-text, #5856d6);
border: 1px solid var(--success-border, #d4d4ff);
}
.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-icon {
@@ -300,8 +301,8 @@
.loading-spinner {
width: 20px;
height: 20px;
border: 2px solid #f3f3f3;
border-top: 2px solid #5b5fcf;
border: 2px solid var(--border-color-light, #f3f3f3);
border-top: 2px solid var(--accent-primary, #5b5fcf);
border-radius: 50%;
animation: spin 1s linear infinite;
display: inline-block;
@@ -376,7 +377,7 @@
</div>
{% trans "Edit Rules" %}
</div>
<div ng-show="!modsecLoading" class="loading-spinner"></div>
<div ng-show="modsecLoading" class="loading-spinner"></div>
</div>
<div class="panel-content">

58
firewall/templates/firewall/modSecurityRulesPacks.html
View File

@@ -117,10 +117,10 @@
/* Install Panel */
.install-panel {
background: white;
background: var(--bg-primary, white);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
border: 1px solid var(--border-light, #e8e9ff);
overflow: hidden;
animation: fadeInUp 0.5s ease-out;
text-align: center;
@@ -136,7 +136,7 @@
.install-title {
font-size: 1.5rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
margin-bottom: 1rem;
}
@@ -162,10 +162,10 @@
/* Rules Panel */
.rules-panel {
background: white;
background: var(--bg-primary, white);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
border: 1px solid var(--border-light, #e8e9ff);
overflow: hidden;
animation: fadeInUp 0.5s ease-out;
}
@@ -177,25 +177,25 @@
}
.custom-table thead th {
background: #f8f9ff;
background: var(--bg-secondary, #f8f9ff);
padding: 1rem 1.5rem;
text-align: left;
font-weight: 600;
color: #334155;
color: var(--text-secondary, #334155);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 2px solid #e8e9ff;
border-bottom: 2px solid var(--border-light, #e8e9ff);
}
.custom-table tbody td {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-light, #e8e9ff);
vertical-align: middle;
}
.custom-table tbody tr:hover {
background: #f8f9ff;
background: var(--bg-secondary, #f8f9ff);
}
.custom-table tbody tr:last-child td {
@@ -204,7 +204,7 @@
.package-name {
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
font-size: 1rem;
}
@@ -229,7 +229,7 @@
left: 0;
right: 0;
bottom: 0;
background-color: #cbd5e1;
background-color: var(--bg-tertiary, #cbd5e1);
transition: .4s;
border-radius: 26px;
}
@@ -256,8 +256,8 @@
/* Buttons */
.btn-configure {
background: #f8f9ff;
border: 2px solid #e8e9ff;
background: var(--bg-secondary, #f8f9ff);
border: 2px solid var(--border-light, #e8e9ff);
color: #5b5fcf;
padding: 0.75rem 1.5rem;
border-radius: 10px;
@@ -295,15 +295,15 @@
}
.alert-success {
background: #e8e6ff;
color: #5856d6;
border: 1px solid #d4d4ff;
background: var(--alert-success-bg, #e8e6ff);
color: var(--alert-success-text, #5856d6);
border: 1px solid var(--alert-success-border, #d4d4ff);
}
.alert-danger {
background: #fee2e2;
color: #991b1b;
border: 1px solid #fecaca;
background: var(--alert-danger-bg, #fee2e2);
color: var(--alert-danger-text, #991b1b);
border: 1px solid var(--alert-danger-border, #fecaca);
}
.alert-icon {
@@ -313,10 +313,10 @@
/* Rule Files Table */
.rule-files-section {
margin-top: 2rem;
background: white;
background: var(--bg-primary, white);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
border: 1px solid var(--border-light, #e8e9ff);
overflow: hidden;
padding: 2rem;
}
@@ -327,25 +327,25 @@
}
.rule-files-table thead th {
background: #f8f9ff;
background: var(--bg-secondary, #f8f9ff);
padding: 1rem;
text-align: left;
font-weight: 600;
color: #334155;
color: var(--text-secondary, #334155);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 2px solid #e8e9ff;
border-bottom: 2px solid var(--border-light, #e8e9ff);
}
.rule-files-table tbody td {
padding: 1rem;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-light, #e8e9ff);
vertical-align: middle;
}
.rule-files-table tbody tr:hover {
background: #f8f9ff;
background: var(--bg-secondary, #f8f9ff);
}
.rule-files-table tbody tr:last-child td {
@@ -362,7 +362,7 @@
.loading-spinner {
width: 20px;
height: 20px;
border: 2px solid #f3f3f3;
border: 2px solid var(--bg-tertiary, #f3f3f3);
border-top: 2px solid #5b5fcf;
border-radius: 50%;
animation: spin 1s linear infinite;
@@ -490,7 +490,7 @@
<!-- Rule Files Section -->
<div ng-hide="ruleFiles" class="rule-files-section">
<h3 style="font-size: 1.25rem; font-weight: 600; color: #1e293b; margin-bottom: 1.5rem;">
<h3 style="font-size: 1.25rem; font-weight: 600; color: var(--text-primary, #1e293b); margin-bottom: 1.5rem;">
<i class="fas fa-file-code" style="color: #5b5fcf; margin-right: 0.5rem;"></i>
{% trans "Rule Files" %}
</h3>