From 7aa86bd13cbfec8b932d59bab1f2ddea4b619a95 Mon Sep 17 00:00:00 2001
From: usmannasir <usman@cyberpersons.com>
Date: Wed, 6 Aug 2025 03:00:18 +0500
Subject: [PATCH] apache manager dark mode

---
 .idea/workspace.xml                           |   6 +-
 .../websiteFunctions/ApacheManager.html       | 275 +++++++++---------
 2 files changed, 137 insertions(+), 144 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index d1f402246..83e6e431d 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -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>
diff --git a/websiteFunctions/templates/websiteFunctions/ApacheManager.html b/websiteFunctions/templates/websiteFunctions/ApacheManager.html
index 84a48b11f..0acbbff30 100644
--- a/websiteFunctions/templates/websiteFunctions/ApacheManager.html
+++ b/websiteFunctions/templates/websiteFunctions/ApacheManager.html
@@ -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"