From df7a2732dd98491fcedbfc3ccdc85d2c4d7cf0b4 Mon Sep 17 00:00:00 2001
From: usmannasir <usman@cyberpersons.com>
Date: Wed, 6 Aug 2025 02:51:20 +0500
Subject: [PATCH] dark mode in cron page

---
 .idea/workspace.xml                           | 41 +++++----
 .../templates/websiteFunctions/listCron.html  | 92 +++++++++++++++++--
 2 files changed, 105 insertions(+), 28 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 116eaaf6f..d1f402246 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -38,27 +38,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.3",
-    "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.3&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" />
@@ -114,6 +114,7 @@
       <workItem from="1753690170133" duration="11704000" />
       <workItem from="1753711196398" duration="51975000" />
       <workItem from="1754042060203" duration="66331000" />
+      <workItem from="1754429757112" duration="736000" />
     </task>
     <servers />
   </component>
diff --git a/websiteFunctions/templates/websiteFunctions/listCron.html b/websiteFunctions/templates/websiteFunctions/listCron.html
index 99ec61acc..5357dd39a 100644
--- a/websiteFunctions/templates/websiteFunctions/listCron.html
+++ b/websiteFunctions/templates/websiteFunctions/listCron.html
@@ -8,8 +8,9 @@
 <!-- Current language: {{ LANGUAGE_CODE }} -->
 
 <style>
-    /* Ultra-Modern CyberPanel Design System */
+    /* Ultra-Modern CyberPanel Design System with Dark Mode Support */
     :root {
+        /* Light mode colors */
         --primary-color: #6366f1;
         --primary-hover: #5558e3;
         --primary-light: #eef2ff;
@@ -48,13 +49,46 @@
         --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }
     
+    /* Dark mode colors */
+    [data-theme="dark"] {
+        --primary-color: #818cf8;
+        --primary-hover: #6366f1;
+        --primary-light: #312e81;
+        --secondary-color: #a78bfa;
+        --accent-color: #f472b6;
+        --success-color: #34d399;
+        --danger-color: #f87171;
+        --warning-color: #fbbf24;
+        --info-color: #60a5fa;
+        
+        --bg-gradient: linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%);
+        --bg-gradient-alt: linear-gradient(135deg, #831843 0%, #be123c 100%);
+        --bg-gradient-success: linear-gradient(135deg, #064e3b 0%, #047857 100%);
+        
+        --bg-light: #1e1e42;
+        --bg-card: #1a1a3e;
+        --bg-hover: #252550;
+        --border-color: #2a2a5e;
+        --border-light: #2a2a5e;
+        
+        --text-primary: #e4e4e7;
+        --text-secondary: #9ca3af;
+        --text-muted: #6b7280;
+        
+        --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.24);
+        --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -1px rgba(0,0,0,0.24);
+        --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.3), 0 4px 6px -2px rgba(0,0,0,0.25);
+        --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.3), 0 10px 10px -5px rgba(0,0,0,0.24);
+    }
+    
     /* Container Styling */
     .container {
         max-width: 1200px;
         margin: 0 auto;
         padding: 20px;
         min-height: 100vh;
-        background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
+        background: transparent;
+        transition: var(--transition-base);
     }
     
     /* Page Title Section */
@@ -67,6 +101,7 @@
         box-shadow: var(--shadow-xl);
         position: relative;
         overflow: hidden;
+        transition: var(--transition-base);
     }
     
     #page-title::before {
@@ -114,6 +149,7 @@
         border: 1px solid var(--border-color);
         overflow: hidden;
         position: relative;
+        transition: var(--transition-base);
     }
     
     .panel-body {
@@ -122,7 +158,7 @@
     
     /* Content Box Header */
     .title-hero {
-        background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-light) 100%);
+        background: var(--bg-light);
         padding: 25px 30px;
         margin: 0;
         font-size: 20px;
@@ -133,6 +169,7 @@
         display: flex;
         align-items: center;
         gap: 15px;
+        transition: var(--transition-base);
     }
     
     /* Example Box Wrapper */
@@ -301,6 +338,7 @@
         margin-top: 30px;
         border: 1px solid var(--border-color);
         display: none;
+        transition: var(--transition-base);
     }
     
     .form-horizontal {
@@ -333,7 +371,8 @@
         padding: 12px 16px;
         font-size: 15px;
         transition: var(--transition-base);
-        background: white;
+        background: var(--bg-card);
+        color: var(--text-primary);
     }
     
     .form-control:focus {
@@ -347,7 +386,8 @@
         -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-card);
+        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='%239ca3af' 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;
@@ -361,7 +401,7 @@
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
         select.form-control {
             color: var(--text-primary) !important;
-            background-color: white !important;
+            background-color: var(--bg-card) !important;
         }
     }
     
@@ -372,7 +412,7 @@
     
     select.form-control:focus {
         color: var(--text-primary);
-        background-color: white;
+        background-color: var(--bg-card);
     }
     
     /* Alerts */
@@ -425,6 +465,42 @@
         font-size: 16px;
     }
     
+    /* Dark mode specific adjustments */
+    [data-theme="dark"] body {
+        background: var(--bg-primary);
+    }
+    
+    [data-theme="dark"] .btn-border {
+        border-color: var(--primary-color);
+        color: var(--primary-color);
+    }
+    
+    [data-theme="dark"] .btn-border:hover {
+        background: var(--primary-color);
+        color: var(--bg-card);
+    }
+    
+    [data-theme="dark"] code {
+        background: var(--bg-hover) !important;
+        color: var(--accent-color) !important;
+    }
+    
+    [data-theme="dark"] #cronTable tbody tr:hover {
+        background: var(--bg-hover);
+    }
+    
+    [data-theme="dark"] .alert-success {
+        background: linear-gradient(135deg, #064e3b 0%, #047857 100%);
+        color: #34d399;
+        border: 1px solid #047857;
+    }
+    
+    [data-theme="dark"] .alert-danger {
+        background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
+        color: #f87171;
+        border: 1px solid #991b1b;
+    }
+    
     /* Responsive */
     @media (max-width: 768px) {
         .container {
@@ -530,7 +606,7 @@
                             <td ng-bind="cron.month"></td>
                             <td ng-bind="cron.weekday"></td>
                             <td>
-                                <code style="background: var(--bg-light); padding: 4px 8px; border-radius: 4px; font-size: 12px;" ng-bind="cron.command">
+                                <code style="background: var(--bg-light); padding: 4px 8px; border-radius: 4px; font-size: 12px; color: var(--text-primary);" ng-bind="cron.command">
                                 </code>
                             </td>
                             <td>