Nemcio/CyberPanel
1
0
Fork 0
mirror of https://github.com/usmannasir/cyberpanel.git synced 2026-01-03 14:19:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

apache manager dark mode

Browse Source
This commit is contained in:
usmannasir
2025-08-06 03:00:18 +05:00
parent df7a2732dd
commit 7aa86bd13c
2 changed files with 137 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.idea/workspace.xml generated
View File

@@ -4,9 +4,7 @@
<option name="autoReloadType" value="SELECTIVE" />
</component>
<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" />
</list>
<list default="true" id="5251c5c9-f2a1-41f2-bc76-10b517091df1" name="Changes" comment="" />
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@@ -114,7 +112,7 @@
<workItem from="1753690170133" duration="11704000" />
<workItem from="1753711196398" duration="51975000" />
<workItem from="1754042060203" duration="66331000" />
<workItem from="1754429757112" duration="736000" />
<workItem from="1754429757112" duration="1099000" />
</task>
<servers />
</component>

275
websiteFunctions/templates/websiteFunctions/ApacheManager.html
View File

@@ -8,44 +8,15 @@
<!-- Current language: {{ LANGUAGE_CODE }} -->
<style>
/* Ultra-Modern CyberPanel Design System */
:root {
--primary-color: #6366f1;
--primary-hover: #5558e3;
--primary-light: #eef2ff;
--secondary-color: #8b5cf6;
--accent-color: #ec4899;
--success-color: #10b981;
--danger-color: #ef4444;
--warning-color: #f59e0b;
--info-color: #3b82f6;
--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--bg-gradient-alt: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--bg-gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
--bg-light: #f8fafc;
--bg-card: #ffffff;
--bg-hover: #f1f5f9;
--border-color: #e2e8f0;
--border-light: #f1f5f9;
--text-primary: #1e293b;
--text-secondary: #64748b;
--text-muted: #94a3b8;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
--shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
--transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* Modern page styles matching new design with dark mode support */
.page-wrapper {
background: transparent;
padding: 20px;
}
.page-container {
max-width: 1200px;
margin: 0 auto;
}
/* Container Styling */
@@ -54,21 +25,26 @@
margin: 0 auto;
padding: 20px;
min-height: 100vh;
background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
background: transparent;
}
/* Page Title Section */
#page-title {
background: var(--bg-gradient);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 40px;
border-radius: var(--radius-xl);
border-radius: 16px;
margin-bottom: 30px;
box-shadow: var(--shadow-xl);
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
position: relative;
overflow: hidden;
}
[data-theme="dark"] #page-title {
background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%);
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3), 0 10px 10px -5px rgba(0,0,0,0.24);
}
#page-title::before {
content: '';
position: absolute;
@@ -108,10 +84,10 @@
/* Main Panel */
.panel {
background: var(--bg-card);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
background: var(--bg-secondary, white);
border-radius: 16px;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
overflow: hidden;
position: relative;
}
@@ -122,13 +98,13 @@
/* Title Hero */
.title-hero {
background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-light) 100%);
background: var(--bg-hover, #f8f9ff);
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, #2f3640);
border-bottom: 1px solid var(--border-color, #e8e9ff);
letter-spacing: -0.3px;
display: flex;
align-items: center;
@@ -142,10 +118,10 @@
/* Card Styling */
.card {
background: var(--bg-card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
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);
overflow: hidden;
margin: 20px;
}
@@ -157,7 +133,7 @@
.card-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
color: var(--text-primary, #2f3640);
margin-bottom: 20px;
display: flex;
align-items: center;
@@ -165,17 +141,17 @@
}
.card-text {
color: var(--text-secondary);
color: var(--text-secondary, #64748b);
font-size: 15px;
line-height: 1.6;
}
/* Form Styling */
.form-horizontal {
background: var(--bg-light);
background: var(--bg-hover, #f8f9ff);
padding: 25px;
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
border-radius: 12px;
border: 1px solid var(--border-color, #e8e9ff);
margin: 20px;
}
@@ -184,60 +160,45 @@
}
.form-control {
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
padding: 12px 16px;
font-size: 15px;
transition: var(--transition-base);
background: white;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 10px 14px;
font-size: 14px;
transition: all 0.2s ease;
background: var(--bg-secondary, white);
color: var(--text-primary, #2f3640);
}
.form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
outline: none;
}
select.form-control {
cursor: pointer;
padding-right: 2.5rem;
background-color: white;
}
select.form-control option {
background: white !important;
color: black !important;
padding: 8px;
display: block !important;
visibility: visible !important;
}
/* Fix for select dropdown visibility */
select.form-control:focus {
background-color: white;
}
/* Select dropdown styles for Windows compatibility */
/* Select dropdown styles */
select.form-control {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
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='%232f3640' 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-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='%239ca3af' 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 12px center;
background-size: 20px;
padding-right: 40px;
line-height: 1.5;
min-height: 44px;
color: #2f3640;
}
[data-theme="dark"] select.form-control {
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='%23e4e4e7' 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");
}
/* 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;
}
}
@@ -246,9 +207,15 @@
display: none;
}
select.form-control option {
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);
}
textarea.form-control {
@@ -256,13 +223,17 @@
font-family: 'Courier New', monospace;
font-size: 13px;
min-height: 400px;
background: var(--bg-secondary, white);
color: var(--text-primary, #2f3640);
}
label {
font-weight: 600;
color: var(--text-primary);
color: var(--text-secondary, #64748b);
margin-bottom: 8px;
font-size: 14px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 8px;
@@ -271,9 +242,9 @@
/* Buttons */
.btn {
padding: 12px 24px;
border-radius: var(--radius-md);
border-radius: 8px;
font-weight: 600;
transition: var(--transition-base);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
font-size: 15px;
letter-spacing: 0.3px;
@@ -306,11 +277,15 @@
}
.btn-primary {
background: var(--bg-gradient);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}
[data-theme="dark"] .btn-primary {
background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
@@ -340,15 +315,15 @@
/* Progress Bar */
.progress {
height: 20px;
border-radius: var(--radius-full);
background: var(--border-color);
border-radius: 9999px;
background: var(--border-color, #e8e9ff);
overflow: hidden;
margin-top: 15px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}
.progress-bar {
background: var(--bg-gradient);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
transition: width 0.4s ease;
height: 100%;
display: flex;
@@ -359,19 +334,28 @@
font-size: 14px;
}
[data-theme="dark"] .progress-bar {
background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
}
/* Modal Styling */
.modal-content {
border-radius: var(--radius-xl);
border-radius: 16px;
border: none;
box-shadow: var(--shadow-xl);
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
background: var(--bg-secondary, white);
}
.modal-header {
background: var(--bg-gradient);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-bottom: none;
padding: 20px 25px;
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
border-radius: 16px 16px 0 0;
}
[data-theme="dark"] .modal-header {
background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%);
}
.modal-title {
@@ -384,6 +368,8 @@
.modal-body {
padding: 25px;
background: var(--bg-secondary, white);
color: var(--text-primary, #2f3640);
}
.modal-header .close {
@@ -443,7 +429,7 @@
<i class="fas fa-server" style="margin-right: 10px;"></i>
{% trans "Apache Manager" %}
<a target="_blank" href="https://cyberpanel.net/KnowledgeBase/home/cyberpanel-apache-manager/"
class="btn btn-link" title="Documentation">
class="btn btn-link" title="Documentation" style="margin-left: auto;">
<i class="fas fa-book"></i>
{% trans "Docs" %}
</a>
@@ -455,7 +441,7 @@
<div ng-controller="ApacheManager" class="panel">
<div class="panel-body">
<h3 class="title-hero">
<i class="fas fa-globe" style="color: var(--primary-color);"></i>
<i class="fas fa-globe" style="color: var(--accent-color, #5b5fcf);"></i>
<span id="domainNamePage">{{ domainName }}</span>
<img ng-hide="cyberpanelloading" src="{% static 'images/loading.gif' %}">
</h3>
@@ -487,8 +473,8 @@
<div ng-show="!apacheOLS" class="col-md-12" style="margin-top: 30px;">
<form class="form-horizontal">
<h3 style="margin-bottom: 20px; color: var(--text-primary); font-weight: 600; display: flex; align-items: center; gap: 10px;" ng-show="!apacheOLS">
<i class="fas fa-code" style="color: var(--primary-color);"></i>
<h3 style="margin-bottom: 20px; color: var(--text-primary, #2f3640); font-weight: 600; display: flex; align-items: center; gap: 10px;" ng-show="!apacheOLS">
<i class="fas fa-code" style="color: var(--accent-color, #5b5fcf);"></i>
Apache Configurations
</h3>
<div class="form-group">
@@ -664,22 +650,27 @@
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
background: transparent;
min-height: 100vh;
}
.marketing-header {
background: var(--bg-gradient);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 60px 40px;
border-radius: var(--radius-xl);
border-radius: 16px;
margin-bottom: 40px;
box-shadow: var(--shadow-xl);
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
text-align: center;
position: relative;
overflow: hidden;
}
[data-theme="dark"] .marketing-header {
background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%);
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3), 0 10px 10px -5px rgba(0,0,0,0.24);
}
.marketing-header::before {
content: '';
position: absolute;
@@ -720,16 +711,16 @@
}
.feature-section {
background: var(--bg-card);
border-radius: var(--radius-xl);
background: var(--bg-secondary, white);
border-radius: 16px;
padding: 40px;
margin-bottom: 30px;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
}
.feature-section h2 {
color: var(--text-primary);
color: var(--text-primary, #2f3640);
font-size: 32px;
font-weight: 700;
margin-bottom: 20px;
@@ -739,7 +730,7 @@
}
.feature-section h3 {
color: var(--text-primary);
color: var(--text-primary, #2f3640);
font-size: 24px;
font-weight: 600;
margin-bottom: 20px;
@@ -747,7 +738,7 @@
}
.feature-section p {
color: var(--text-secondary);
color: var(--text-secondary, #64748b);
font-size: 16px;
line-height: 1.8;
margin-bottom: 20px;
@@ -760,12 +751,12 @@
}
.feature-list li {
background: var(--bg-light);
background: var(--bg-hover, #f8f9ff);
padding: 20px;
margin-bottom: 15px;
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
transition: var(--transition-base);
border-radius: 12px;
border: 1px solid var(--border-color, #e8e9ff);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: flex-start;
gap: 15px;
@@ -773,7 +764,7 @@
.feature-list li:hover {
transform: translateX(10px);
box-shadow: var(--shadow-md);
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}
.feature-list li::before {
@@ -783,7 +774,7 @@
justify-content: center;
width: 24px;
height: 24px;
background: var(--bg-gradient);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 50%;
font-weight: bold;
@@ -791,28 +782,32 @@
margin-top: 2px;
}
[data-theme="dark"] .feature-list li::before {
background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
}
.video-container {
background: var(--bg-card);
border-radius: var(--radius-xl);
background: var(--bg-secondary, white);
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
text-align: center;
}
.video-container iframe {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
border-radius: 12px;
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
max-width: 100%;
}
.pricing-section {
background: var(--bg-card);
border-radius: var(--radius-xl);
background: var(--bg-secondary, white);
border-radius: 16px;
padding: 30px;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
}
@media (max-width: 768px) {
@@ -841,7 +836,7 @@
<div class="feature-section">
<h2>
<i class="fas fa-rocket" style="color: var(--primary-color);"></i>
<i class="fas fa-rocket" style="color: var(--accent-color, #5b5fcf);"></i>
Unmatched Speed with OpenLiteSpeed
</h2>
<p>
@@ -854,7 +849,7 @@
<div class="feature-section">
<h2>
<i class="fas fa-cogs" style="color: var(--secondary-color);"></i>
<i class="fas fa-cogs" style="color: var(--accent-color, #5b5fcf);"></i>
Unrivaled Features with Apache
</h2>
<p>
@@ -866,7 +861,7 @@
<div class="feature-section">
<h2>
<i class="fas fa-merge" style="color: var(--accent-color);"></i>
<i class="fas fa-merge" style="color: var(--accent-color, #5b5fcf);"></i>
The Perfect Fusion
</h2>
<p>
@@ -905,8 +900,8 @@
</div>
<div class="video-container">
<h3 style="color: var(--text-primary); font-size: 24px; font-weight: 600; margin-bottom: 20px;">
<i class="fas fa-play-circle" style="color: var(--primary-color);"></i>
<h3 style="color: var(--text-primary, #2f3640); font-size: 24px; font-weight: 600; margin-bottom: 20px;">
<i class="fas fa-play-circle" style="color: var(--accent-color, #5b5fcf);"></i>
Watch Our Demo
</h3>
<iframe width="788" height="443" src="https://www.youtube.com/embed/ts5wR9G2FsE"