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

enable dark mode

This commit is contained in:
usmannasir 2025-08-05 00:40:56 +05:00
parent 1915936687
commit 69429999b2
4 changed files with 331 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
.idea/workspace.xml
View File

@ -6,7 +6,9 @@
<component name="ChangeListManager">
<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$/tuning/templates/tuning/liteSpeedTuning.html" beforeDir="false" afterPath="$PROJECT_DIR$/tuning/templates/tuning/liteSpeedTuning.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/firewall/templates/firewall/firewall.html" beforeDir="false" afterPath="$PROJECT_DIR$/firewall/templates/firewall/firewall.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/serverLogs/templates/serverLogs/serverMail.html" beforeDir="false" afterPath="$PROJECT_DIR$/serverLogs/templates/serverLogs/serverMail.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/serverStatus/templates/serverStatus/cybercpmainlogfile.html" beforeDir="false" afterPath="$PROJECT_DIR$/serverStatus/templates/serverStatus/cybercpmainlogfile.html" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -39,27 +41,27 @@
<option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" />
</component>
<component name="PropertiesComponent"><![CDATA[{
"keyToString": {
"ModuleVcsDetector.initialDetectionPerformed": "true",
"Notification.DisplayName-DoNotAsk-DatabaseConfigFileWatcher.found": "Database connection parameters found",
"Notification.DoNotAsk-DatabaseConfigFileWatcher.found": "true",
"RunOnceActivity.OpenDjangoStructureViewOnStart": "true",
"RunOnceActivity.ShowReadmeOnStart": "true",
"RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager": "true",
"RunOnceActivity.git.unshallow": "true",
"SHELLCHECK.PATH": "/Users/cyberpersons/Library/Application Support/JetBrains/PyCharm2025.1/plugins/Shell Script/shellcheck",
"git-widget-placeholder": "v2.4.4-dev",
"last_opened_file_path": "/Users/cyberpersons/cyberpanel",
"node.js.detected.package.eslint": "true",
"node.js.detected.package.tslint": "true",
"node.js.selected.package.eslint": "(autodetect)",
"node.js.selected.package.tslint": "(autodetect)",
"nodejs_package_manager_path": "npm",
"settings.editor.selected.configurable": "preferences.pluginManager",
"vue.rearranger.settings.migration": "true"
<component name="PropertiesComponent">{
&quot;keyToString&quot;: {
&quot;ModuleVcsDetector.initialDetectionPerformed&quot;: &quot;true&quot;,
&quot;Notification.DisplayName-DoNotAsk-DatabaseConfigFileWatcher.found&quot;: &quot;Database connection parameters found&quot;,
&quot;Notification.DoNotAsk-DatabaseConfigFileWatcher.found&quot;: &quot;true&quot;,
&quot;RunOnceActivity.OpenDjangoStructureViewOnStart&quot;: &quot;true&quot;,
&quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
&quot;RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager&quot;: &quot;true&quot;,
&quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
&quot;SHELLCHECK.PATH&quot;: &quot;/Users/cyberpersons/Library/Application Support/JetBrains/PyCharm2025.1/plugins/Shell Script/shellcheck&quot;,
&quot;git-widget-placeholder&quot;: &quot;v2.4.4-dev&quot;,
&quot;last_opened_file_path&quot;: &quot;/Users/cyberpersons/cyberpanel&quot;,
&quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
&quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
&quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
&quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
&quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
&quot;settings.editor.selected.configurable&quot;: &quot;preferences.pluginManager&quot;,
&quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
}
}]]></component>
}</component>
<component name="RunManager">
<configuration name="cyberpanel" type="Python.DjangoServer" factoryName="Django server">
<module name="cyberpanel" />

292
firewall/templates/firewall/firewall.html
View File

@ -14,14 +14,14 @@
text-align: center;
margin-bottom: 3rem;
padding: 3rem 0;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
background: linear-gradient(135deg, var(--firewall-gradient-start, #ef4444) 0%, var(--firewall-gradient-end, #dc2626) 100%);
border-radius: 20px;
animation: fadeInDown 0.5s ease-out;
position: relative;
overflow: hidden;
color: white;
color: var(--text-light, white);
}
.page-header::before {
content: '';
position: absolute;
@ -32,12 +32,12 @@
background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
animation: rotate 30s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes fadeInDown {
from {
opacity: 0;
@ -48,7 +48,7 @@
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
@ -59,12 +59,12 @@
transform: translateY(0);
}
}
.header-content {
position: relative;
z-index: 1;
}
.page-title {
font-size: 2.5rem;
font-weight: 700;
@ -74,7 +74,7 @@
justify-content: center;
gap: 1rem;
}
.firewall-icon {
width: 60px;
height: 60px;
@ -86,44 +86,44 @@
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.page-subtitle {
font-size: 1.125rem;
color: rgba(255, 255, 255, 0.9);
color: var(--text-light-secondary, rgba(255, 255, 255, 0.9));
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
/* Status Panel */
.status-panel {
background: white;
background: var(--bg-secondary, 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;
margin-bottom: 2rem;
animation: fadeInUp 0.5s ease-out;
}
.status-header {
background: #f8f9ff;
background: var(--bg-tertiary, #f8f9ff);
padding: 1.5rem 2rem;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-color, #e8e9ff);
display: flex;
align-items: center;
justify-content: space-between;
}
.status-title {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
display: flex;
align-items: center;
gap: 0.75rem;
}
.status-badge {
padding: 0.5rem 1rem;
border-radius: 8px;
@ -133,17 +133,17 @@
align-items: center;
gap: 0.5rem;
}
.status-active {
background: #d1fae5;
color: #065f46;
background: var(--badge-success-bg, #d1fae5);
color: var(--badge-success-text, #065f46);
}
.status-inactive {
background: #fee2e2;
color: #991b1b;
background: var(--badge-error-bg, #fee2e2);
color: var(--badge-error-text, #991b1b);
}
.status-content {
padding: 2rem;
display: flex;
@ -152,7 +152,7 @@
gap: 1rem;
flex-wrap: wrap;
}
.control-btn {
padding: 0.75rem 1.5rem;
border-radius: 10px;
@ -167,60 +167,60 @@
min-width: 120px;
justify-content: center;
}
.btn-start {
background: #10b981;
color: white;
background: var(--btn-success, #10b981);
color: var(--text-light, white);
}
.btn-start:hover {
background: #059669;
background: var(--btn-success-hover, #059669);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
box-shadow: 0 4px 12px var(--btn-success-shadow, rgba(16, 185, 129, 0.3));
}
.btn-stop {
background: #f59e0b;
color: white;
background: var(--btn-warning, #f59e0b);
color: var(--text-light, white);
}
.btn-stop:hover {
background: #d97706;
background: var(--btn-warning-hover, #d97706);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
box-shadow: 0 4px 12px var(--btn-warning-shadow, rgba(245, 158, 11, 0.3));
}
.btn-reload {
background: #3b82f6;
color: white;
background: var(--btn-primary, #3b82f6);
color: var(--text-light, white);
}
.btn-reload:hover {
background: #2563eb;
background: var(--btn-primary-hover, #2563eb);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
box-shadow: 0 4px 12px var(--btn-primary-shadow, rgba(59, 130, 246, 0.3));
}
/* Rules Panel */
.rules-panel {
background: white;
background: var(--bg-secondary, 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 0.2s;
animation-fill-mode: both;
}
.panel-header {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: white;
background: linear-gradient(135deg, var(--firewall-gradient-start, #ef4444) 0%, var(--firewall-gradient-end, #dc2626) 100%);
color: var(--text-light, white);
padding: 1.5rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.panel-title {
font-size: 1.25rem;
font-weight: 600;
@ -228,7 +228,7 @@
align-items: center;
gap: 0.75rem;
}
.panel-icon {
width: 32px;
height: 32px;
@ -238,49 +238,50 @@
align-items: center;
justify-content: center;
}
.add-rule-section {
background: #f8f9ff;
background: var(--bg-tertiary, #f8f9ff);
padding: 2rem;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-color, #e8e9ff);
}
.rule-form {
display: grid;
grid-template-columns: 2fr 1fr 2fr 1fr auto;
gap: 1rem;
align-items: end;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-label {
font-weight: 500;
color: #475569;
color: var(--text-secondary, #475569);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.form-control {
padding: 0.75rem 1rem;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
font-size: 0.875rem;
transition: all 0.3s ease;
background: #fff;
background: var(--bg-primary, #fff);
color: var(--text-primary, #1e293b);
}
.form-control:focus {
outline: none;
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
border-color: var(--firewall-accent, #ef4444);
box-shadow: 0 0 0 3px var(--firewall-focus-shadow, rgba(239, 68, 68, 0.1));
}
.select-control {
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
@ -289,10 +290,10 @@
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
}
.btn-add {
background: #ef4444;
color: white;
background: var(--firewall-accent, #ef4444);
color: var(--text-light, white);
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
@ -305,66 +306,66 @@
gap: 0.5rem;
align-self: flex-end;
}
.btn-add:hover {
background: #dc2626;
background: var(--firewall-accent-dark, #dc2626);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
box-shadow: 0 4px 12px var(--firewall-shadow, rgba(239, 68, 68, 0.3));
}
/* Rules Table */
.rules-table-section {
padding: 2rem;
}
.rules-table {
width: 100%;
background: white;
background: var(--bg-secondary, white);
border-radius: 8px;
overflow: hidden;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
}
.rules-table thead {
background: #f8f9ff;
background: var(--bg-tertiary, #f8f9ff);
}
.rules-table th {
padding: 1rem;
text-align: left;
font-weight: 600;
color: #475569;
color: var(--text-secondary, #475569);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid #e8e9ff;
border-bottom: 1px solid var(--border-color, #e8e9ff);
}
.rules-table td {
padding: 1rem;
border-bottom: 1px solid #f1f5f9;
color: #334155;
border-bottom: 1px solid var(--border-light, #f1f5f9);
color: var(--text-primary, #334155);
font-size: 0.875rem;
}
.rules-table tbody tr {
transition: all 0.2s ease;
}
.rules-table tbody tr:hover {
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
}
.rule-id {
font-weight: 600;
color: #64748b;
color: var(--text-muted, #64748b);
}
.rule-name {
font-weight: 600;
color: #1e293b;
color: var(--text-primary, #1e293b);
}
.protocol-badge {
display: inline-block;
padding: 0.25rem 0.5rem;
@ -373,34 +374,35 @@
font-weight: 500;
text-transform: uppercase;
}
.protocol-tcp {
background: #dbeafe;
color: #1e40af;
background: var(--badge-blue-bg, #dbeafe);
color: var(--badge-blue-text, #1e40af);
}
.protocol-udp {
background: #fef3c7;
color: #92400e;
background: var(--badge-yellow-bg, #fef3c7);
color: var(--badge-yellow-text, #92400e);
}
.ip-address {
font-family: 'Monaco', 'Consolas', monospace;
font-size: 0.875rem;
background: #f3f4f6;
background: var(--bg-code, #f3f4f6);
padding: 0.25rem 0.5rem;
border-radius: 4px;
color: var(--text-primary, #334155);
}
.port-number {
font-family: 'Monaco', 'Consolas', monospace;
font-weight: 600;
color: #ef4444;
color: var(--firewall-accent, #ef4444);
}
.btn-delete {
background: #fee2e2;
color: #ef4444;
background: var(--bg-error-light, #fee2e2);
color: var(--firewall-accent, #ef4444);
width: 32px;
height: 32px;
border-radius: 6px;
@ -412,37 +414,37 @@
font-weight: 700;
border: none;
}
.btn-delete:hover {
background: #ef4444;
color: white;
background: var(--firewall-accent, #ef4444);
color: var(--text-light, white);
transform: scale(1.1);
}
.empty-state {
text-align: center;
padding: 4rem 2rem;
color: #64748b;
color: var(--text-muted, #64748b);
}
.empty-icon {
font-size: 4rem;
color: #94a3b8;
color: var(--text-disabled, #94a3b8);
margin-bottom: 1rem;
}
.empty-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #475569;
color: var(--text-secondary, #475569);
}
.empty-text {
font-size: 0.875rem;
color: #64748b;
color: var(--text-muted, #64748b);
}
.alert {
padding: 1rem 1.5rem;
border-radius: 8px;
@ -452,74 +454,74 @@
gap: 0.75rem;
animation: fadeInUp 0.3s ease-out;
}
.alert-success {
background: #d1fae5;
color: #065f46;
border: 1px solid #a7f3d0;
background: var(--alert-success-bg, #d1fae5);
color: var(--alert-success-text, #065f46);
border: 1px solid var(--alert-success-border, #a7f3d0);
}
.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 {
font-size: 1.25rem;
}
.loading-spinner {
width: 20px;
height: 20px;
border: 2px solid #f3f3f3;
border-top: 2px solid #ef4444;
border: 2px solid var(--border-light, #f3f3f3);
border-top: 2px solid var(--firewall-accent, #ef4444);
border-radius: 50%;
animation: spin 1s linear infinite;
display: inline-block;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Responsive */
@media (max-width: 1024px) {
.rule-form {
grid-template-columns: 1fr;
gap: 1rem;
}
.btn-add {
width: 100%;
justify-content: center;
}
}
@media (max-width: 768px) {
.modern-container {
padding: 1rem;
}
.page-title {
font-size: 2rem;
}
.status-content {
flex-direction: column;
align-items: stretch;
}
.control-btn {
width: 100%;
}
.rules-table-section {
padding: 1rem;
overflow-x: auto;
}
.rules-table {
min-width: 600px;
}
@ -547,7 +549,7 @@
</p>
</div>
</div>
<!-- Status Panel -->
<div class="status-panel">
<div class="status-header">
@ -574,21 +576,21 @@
{% trans "Reload" %}
</button>
</div>
<!-- Status Messages -->
<div style="padding: 0 2rem 1rem;">
<div ng-hide="actionFailed" class="alert alert-danger">
<i class="fas fa-exclamation-circle alert-icon"></i>
<span>{% trans "Action failed. Error message:" %} {$ errorMessage $}</span>
</div>
<div ng-hide="actionSuccess" class="alert alert-success">
<i class="fas fa-check-circle alert-icon"></i>
<span>{% trans "Action completed successfully." %}</span>
</div>
</div>
</div>
<!-- Rules Panel -->
<div class="rules-panel">
<div class="panel-header">
@ -598,7 +600,7 @@
</div>
{% trans "Firewall Rules" %}
</div>
<div ng-show="!rulesLoading" class="loading-spinner"></div>
<div ng-show="rulesLoading" class="loading-spinner"></div>
</div>
<!-- Add Rule Section -->

135
serverLogs/templates/serverLogs/serverMail.html
View File

@ -19,9 +19,9 @@
animation: fadeInDown 0.5s ease-out;
position: relative;
overflow: hidden;
color: var(--text-primary, white);
color: white;
}
.page-header::before {
content: '';
position: absolute;
@ -32,12 +32,12 @@
background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
animation: rotate 30s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes fadeInDown {
from {
opacity: 0;
@ -48,7 +48,7 @@
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
@ -59,12 +59,12 @@
transform: translateY(0);
}
}
.header-content {
position: relative;
z-index: 1;
}
.page-title {
font-size: 2.5rem;
font-weight: 700;
@ -74,7 +74,7 @@
justify-content: center;
gap: 1rem;
}
.mail-icon {
width: 60px;
height: 60px;
@ -86,14 +86,14 @@
justify-content: center;
box-shadow: var(--shadow-light, 0 4px 12px rgba(0,0,0,0.1));
}
.page-subtitle {
font-size: 1.125rem;
color: var(--text-secondary, rgba(255, 255, 255, 0.9));
color: rgba(255, 255, 255, 0.9);
max-width: 600px;
margin: 0 auto;
}
.docs-link {
margin-top: 1rem;
display: inline-flex;
@ -103,19 +103,19 @@
backdrop-filter: blur(10px);
padding: 0.5rem 1.5rem;
border-radius: 20px;
color: var(--text-primary, white);
color: white;
text-decoration: none;
font-size: 0.875rem;
transition: all 0.3s ease;
}
.docs-link:hover {
background: var(--accent-hover, rgba(255, 255, 255, 0.3));
transform: translateY(-2px);
color: var(--text-primary, white);
color: white;
text-decoration: none;
}
.mail-config-panel {
background: var(--bg-secondary, white);
border-radius: 16px;
@ -124,16 +124,16 @@
overflow: hidden;
animation: fadeInUp 0.5s ease-out;
}
.panel-header {
background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
color: var(--text-primary, white);
color: white;
padding: 1.5rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.panel-title {
font-size: 1.25rem;
font-weight: 600;
@ -141,7 +141,7 @@
align-items: center;
gap: 0.75rem;
}
.panel-icon {
width: 32px;
height: 32px;
@ -151,11 +151,11 @@
align-items: center;
justify-content: center;
}
.form-section {
padding: 2rem;
}
.form-row {
display: grid;
grid-template-columns: 200px 1fr;
@ -163,14 +163,14 @@
gap: 1rem;
margin-bottom: 1.5rem;
}
.form-label {
font-weight: 500;
color: var(--text-secondary, #475569);
color: var(--text-secondary, #64748b);
font-size: 0.875rem;
text-align: right;
}
.form-control {
padding: 0.75rem 1rem;
border: 1px solid var(--border-light, #e8e9ff);
@ -182,22 +182,53 @@
width: 100%;
max-width: 400px;
}
.form-control:focus {
outline: none;
border-color: var(--accent-color, #667eea);
box-shadow: var(--accent-focus, 0 0 0 3px rgba(102, 126, 234, 0.1));
}
.select-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-color: var(--bg-secondary, white);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%235b5fcf' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
color: var(--text-primary, #1e293b) !important;
font-size: 0.875rem !important;
line-height: 1.5;
}
/* Ensure option text is visible */
.select-control option {
color: var(--text-primary, #1e293b);
background-color: var(--bg-secondary, white);
padding: 8px;
font-size: 0.875rem;
}
/* Fix for Windows high contrast mode */
@media screen and (-ms-high-contrast: active) {
.select-control {
border: 2px solid;
}
.select-control option {
background: var(--bg-secondary, white);
color: var(--text-primary, black);
}
}
/* Specific focus styles for select */
.select-control:focus {
background-color: var(--bg-secondary, white);
color: var(--text-primary, #1e293b);
}
.mailer-type-selector {
background: var(--bg-light, #f8f9ff);
border-radius: 12px;
@ -205,7 +236,7 @@
margin-bottom: 2rem;
border: 1px solid var(--border-light, #e8e9ff);
}
.smtp-fields {
background: var(--bg-light, #fafbff);
border-radius: 12px;
@ -214,7 +245,7 @@
border: 1px solid var(--border-light, #e8e9ff);
animation: fadeInUp 0.3s ease-out;
}
.section-header {
display: flex;
align-items: center;
@ -223,7 +254,7 @@
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-light, #e8e9ff);
}
.section-icon {
width: 32px;
height: 32px;
@ -234,13 +265,13 @@
justify-content: center;
color: var(--accent-color, #667eea);
}
.section-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary, #1e293b);
}
.action-buttons {
display: flex;
gap: 1rem;
@ -249,7 +280,7 @@
border-top: 1px solid var(--border-light, #e8e9ff);
justify-content: center;
}
.btn {
padding: 0.75rem 2rem;
border-radius: 8px;
@ -262,17 +293,17 @@
align-items: center;
gap: 0.5rem;
}
.btn-primary {
background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
color: var(--text-primary, white);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--accent-shadow, 0 4px 12px rgba(102, 126, 234, 0.3));
}
.loading-spinner {
width: 20px;
height: 20px;
@ -282,12 +313,12 @@
animation: spin 1s linear infinite;
display: inline-block;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.info-box {
background: var(--info-bg, #eff6ff);
border: 1px solid var(--info-border, #bfdbfe);
@ -298,19 +329,19 @@
align-items: center;
gap: 0.75rem;
}
.info-icon {
color: var(--info-color, #3b82f6);
font-size: 1.25rem;
flex-shrink: 0;
}
.info-text {
font-size: 0.875rem;
color: var(--info-text, #1e40af);
line-height: 1.6;
}
/* Status Indicator */
.status-indicator {
display: flex;
@ -323,7 +354,7 @@
border: 1px solid var(--border-light, #e8e9ff);
color: var(--text-primary, #1e293b);
}
.status-dot {
width: 8px;
height: 8px;
@ -331,7 +362,7 @@
background: var(--success-color, #10b981);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
@ -343,26 +374,26 @@
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
}
}
/* Responsive */
@media (max-width: 768px) {
.modern-container {
padding: 1rem;
}
.page-title {
font-size: 2rem;
}
.form-row {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.form-label {
text-align: left;
}
.form-control {
max-width: 100%;
}
@ -394,7 +425,7 @@
</a>
</div>
</div>
<!-- Mail Configuration Panel -->
<div class="mail-config-panel">
<div class="panel-header">
@ -408,7 +439,7 @@
<span class="status-dot"></span>
<span>{% trans "Ready" %}</span>
</div>
<div ng-show="!cyberPanelLoading" class="loading-spinner"></div>
<div ng-show="cyberPanelLoading" class="loading-spinner"></div>
</div>
<div class="form-section">

154
serverStatus/templates/serverStatus/cybercpmainlogfile.html
View File

@ -15,56 +15,56 @@
--text-console: #10b981;
/* Background colors */
--bg-primary: #ffffff;
--bg-secondary: #f8f9ff;
--bg-primary: white;
--bg-secondary: white;
--bg-light: #f3f4f6;
--bg-hover: #f8f9ff;
--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
/* Border colors */
--border-color: #e8e9ff;
--border-light: #f1f5f9;
--border-terminal: #334155;
/* Accent colors */
--accent-color: #667eea;
--accent-hover: #5a67d8;
--accent-bg: #f3e8ff;
--accent-focus: rgba(102, 126, 234, 0.1);
--accent-shadow: rgba(102, 126, 234, 0.3);
/* Status colors */
--success-bg: #d1fae5;
--success-color: #065f46;
--success-border: #a7f3d0;
--success-accent: #10b981;
--danger-bg: #fee2e2;
--danger-color: #991b1b;
--danger-border: #fecaca;
--danger-accent: #ef4444;
--danger-hover: #dc2626;
--warning-bg: #fef3c7;
--warning-color: #92400e;
--warning-border: #fde68a;
--info-bg: #dbeafe;
--info-color: #1e40af;
--info-border: #bfdbfe;
/* Shadow colors */
--shadow-light: rgba(0,0,0,0.05);
--shadow-medium: rgba(0,0,0,0.08);
--shadow-color: rgba(0,0,0,0.1);
/* Console/Terminal colors */
--console-bg: #1e293b;
--console-text: #10b981;
--console-border: #334155;
--console-scrollbar: #64748b;
--console-scrollbar-hover: #94a3b8;
/* Neutral colors */
--neutral-bg: #64748b;
--neutral-hover: #475569;
@ -75,7 +75,7 @@
margin: 0 auto;
padding: 2rem;
}
.page-header {
text-align: center;
margin-bottom: 3rem;
@ -85,9 +85,9 @@
animation: fadeInDown 0.5s ease-out;
position: relative;
overflow: hidden;
color: var(--bg-primary);
color: white;
}
.page-header::before {
content: '';
position: absolute;
@ -98,12 +98,12 @@
background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
animation: rotate 30s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes fadeInDown {
from {
opacity: 0;
@ -114,7 +114,7 @@
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
@ -125,12 +125,12 @@
transform: translateY(0);
}
}
.header-content {
position: relative;
z-index: 1;
}
.page-title {
font-size: 2.5rem;
font-weight: 700;
@ -140,7 +140,7 @@
justify-content: center;
gap: 1rem;
}
.log-icon {
width: 60px;
height: 60px;
@ -152,7 +152,7 @@
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.page-subtitle {
font-size: 1.125rem;
color: var(--text-on-gradient);
@ -160,26 +160,26 @@
margin: 0 auto;
line-height: 1.6;
}
.log-viewer-panel {
background: var(--bg-primary);
background: var(--bg-secondary, white);
border-radius: 16px;
box-shadow: 0 1px 3px var(--shadow-light), 0 10px 40px var(--shadow-medium);
border: 1px solid var(--border-color);
overflow: hidden;
animation: fadeInUp 0.5s ease-out;
}
.panel-header {
background: var(--console-bg, #1e293b);
color: var(--bg-primary);
color: white;
padding: 1rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--console-border);
}
.panel-title {
font-size: 1rem;
font-weight: 600;
@ -188,7 +188,7 @@
gap: 0.75rem;
color: var(--text-terminal);
}
.panel-icon {
width: 32px;
height: 32px;
@ -199,13 +199,13 @@
justify-content: center;
color: var(--text-muted);
}
.log-stats {
display: flex;
align-items: center;
gap: 1.5rem;
}
.stat-item {
display: flex;
align-items: center;
@ -213,12 +213,12 @@
font-size: 0.875rem;
color: var(--text-muted, #94a3b8);
}
.stat-value {
color: var(--text-terminal);
font-weight: 600;
}
.log-controls {
background: var(--bg-secondary);
padding: 1rem 1.5rem;
@ -229,18 +229,18 @@
flex-wrap: wrap;
gap: 1rem;
}
.control-group {
display: flex;
align-items: center;
gap: 1rem;
}
.search-box {
position: relative;
min-width: 300px;
}
.search-input {
width: 100%;
padding: 0.5rem 1rem 0.5rem 2.5rem;
@ -248,14 +248,16 @@
border-radius: 8px;
font-size: 0.875rem;
transition: all 0.3s ease;
background: var(--bg-secondary, white);
color: var(--text-primary, #1e293b);
}
.search-input:focus {
outline: none;
border-color: var(--accent-color, #667eea);
box-shadow: 0 0 0 3px var(--accent-focus, rgba(102, 126, 234, 0.1));
}
.search-icon {
position: absolute;
left: 0.75rem;
@ -264,7 +266,7 @@
color: var(--text-muted, #94a3b8);
font-size: 0.875rem;
}
.log-content {
background: var(--console-bg, #1e293b);
padding: 1.5rem;
@ -273,7 +275,7 @@
overflow-y: auto;
position: relative;
}
.log-textarea {
width: 100%;
background: transparent;
@ -286,11 +288,11 @@
resize: none;
min-height: 550px;
}
.log-textarea::placeholder {
color: var(--text-secondary);
}
.log-line-numbers {
position: absolute;
left: 0;
@ -305,11 +307,11 @@
padding-right: 1rem;
border-right: 1px solid var(--console-border);
}
.log-content-wrapper {
padding-left: 60px;
}
.action-bar {
background: var(--bg-secondary);
padding: 1.5rem;
@ -319,7 +321,7 @@
justify-content: center;
gap: 1rem;
}
.btn {
padding: 0.625rem 1.5rem;
border-radius: 8px;
@ -332,40 +334,40 @@
align-items: center;
gap: 0.5rem;
}
.btn-primary {
background: var(--accent-color);
color: var(--bg-primary);
color: white;
}
.btn-primary:hover {
background: var(--accent-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px var(--accent-shadow);
}
.btn-danger {
background: var(--danger-accent);
color: var(--bg-primary);
color: white;
}
.btn-danger:hover {
background: var(--danger-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px var(--danger-shadow, rgba(239, 68, 68, 0.3));
}
.btn-secondary {
background: var(--neutral-bg);
color: var(--bg-primary);
color: white;
}
.btn-secondary:hover {
background: var(--neutral-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px var(--neutral-shadow);
}
.loading-spinner {
width: 20px;
height: 20px;
@ -375,12 +377,12 @@
animation: spin 1s linear infinite;
display: inline-block;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.alert {
padding: 1rem 1.5rem;
border-radius: 8px;
@ -390,103 +392,103 @@
gap: 0.75rem;
animation: fadeInUp 0.3s ease-out;
}
.alert-success {
background: var(--success-bg);
color: var(--success-color);
border: 1px solid var(--success-border);
}
.alert-danger {
background: var(--danger-bg);
color: var(--danger-color);
border: 1px solid var(--danger-border);
}
.alert-icon {
font-size: 1.25rem;
}
.empty-state {
text-align: center;
padding: 4rem 2rem;
color: var(--text-muted);
}
.empty-icon {
font-size: 4rem;
color: var(--text-muted, #94a3b8);
margin-bottom: 1rem;
}
.empty-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--text-secondary);
}
.empty-text {
font-size: 0.875rem;
color: var(--text-muted);
}
/* Custom Scrollbar */
.log-content::-webkit-scrollbar {
width: 8px;
}
.log-content::-webkit-scrollbar-track {
background: var(--console-border);
border-radius: 4px;
}
.log-content::-webkit-scrollbar-thumb {
background: var(--neutral-bg);
border-radius: 4px;
}
.log-content::-webkit-scrollbar-thumb:hover {
background: var(--console-scrollbar-hover);
}
/* Log Level Colors */
.log-error { color: var(--danger-accent); }
.log-warning { color: var(--warning-color); }
.log-info { color: var(--info-color); }
.log-debug { color: var(--debug-color, #8b5cf6); }
.log-success { color: var(--success-accent); }
/* Responsive */
@media (max-width: 768px) {
.modern-container {
padding: 1rem;
}
.page-title {
font-size: 2rem;
}
.log-controls {
flex-direction: column;
align-items: stretch;
}
.search-box {
min-width: 100%;
}
.control-group {
flex-direction: column;
align-items: stretch;
width: 100%;
}
.action-bar {
flex-direction: column;
gap: 0.5rem;
}
.btn {
width: 100%;
justify-content: center;
@ -515,7 +517,7 @@
</p>
</div>
</div>
<!-- Log Viewer Panel -->
<div class="log-viewer-panel">
<!-- Panel Header -->
@ -535,7 +537,7 @@
<i class="fas fa-check-circle" style="color: var(--success-accent, #10b981);"></i>
<span>{% trans "Live" %}</span>
</div>
<div ng-show="!logFileLoading" class="loading-spinner"></div>
<div ng-show="logFileLoading" class="loading-spinner"></div>
</div>
</div>