From a2b359149144ea293d1ba02f3c38109ca896cfbf Mon Sep 17 00:00:00 2001
From: master3395 <master3395@users.noreply.github.com>
Date: Mon, 19 Jan 2026 18:00:44 +0100
Subject: [PATCH] Add Learn More button to all notifications and improve button
 styling

---
 .../templates/baseTemplate/index.html         | 107 ++++++++++++++++--
 1 file changed, 98 insertions(+), 9 deletions(-)

diff --git a/baseTemplate/templates/baseTemplate/index.html b/baseTemplate/templates/baseTemplate/index.html
index 037747727..746fc37b3 100644
--- a/baseTemplate/templates/baseTemplate/index.html
+++ b/baseTemplate/templates/baseTemplate/index.html
@@ -390,44 +390,120 @@
         }
         
         .notification-center-item-actions {
-            margin-top: 1rem;
+            margin-top: 1.25rem;
             display: flex;
             gap: 0.75rem;
+            flex-wrap: wrap;
         }
         
         .notification-center-item-link {
             display: inline-flex;
             align-items: center;
+            justify-content: center;
             gap: 0.5rem;
             color: white;
-            background: var(--accent-color);
+            background: linear-gradient(135deg, var(--accent-color) 0%, #6d6bd4 100%);
             text-decoration: none;
             font-size: 0.9rem;
             font-weight: 600;
-            padding: 0.625rem 1.25rem;
-            border-radius: 8px;
-            transition: all 0.2s ease;
+            padding: 0.75rem 1.5rem;
+            border-radius: 10px;
+            transition: all 0.3s ease;
             white-space: nowrap;
             box-sizing: border-box;
             max-width: 100%;
             overflow: hidden;
+            box-shadow: 0 2px 8px rgba(88, 86, 214, 0.2);
+            border: none;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .notification-center-item-link::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: left 0.5s ease;
+        }
+        
+        .notification-center-item-link:hover::before {
+            left: 100%;
         }
         
         .notification-center-item-link > span {
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            position: relative;
+            z-index: 1;
         }
         
         .notification-center-item-link:hover {
-            background: #6d6bd4;
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(88, 86, 214, 0.3);
+            background: linear-gradient(135deg, #6d6bd4 0%, #5a58c4 100%);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(88, 86, 214, 0.4);
             text-decoration: none;
         }
         
+        .notification-center-item-link:active {
+            transform: translateY(0);
+            box-shadow: 0 2px 8px rgba(88, 86, 214, 0.3);
+        }
+        
         .notification-center-item-link i {
             font-size: 0.85rem;
+            position: relative;
+            z-index: 1;
+        }
+        
+        .notification-center-item-link-secondary {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            color: var(--accent-color);
+            background: transparent;
+            border: 2px solid var(--accent-color);
+            text-decoration: none;
+            font-size: 0.9rem;
+            font-weight: 600;
+            padding: 0.75rem 1.5rem;
+            border-radius: 10px;
+            transition: all 0.3s ease;
+            white-space: nowrap;
+            box-sizing: border-box;
+            max-width: 100%;
+            overflow: hidden;
+            cursor: pointer;
+            position: relative;
+        }
+        
+        .notification-center-item-link-secondary > span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        
+        .notification-center-item-link-secondary:hover {
+            background: var(--accent-color);
+            color: white;
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(88, 86, 214, 0.3);
+            text-decoration: none;
+        }
+        
+        .notification-center-item-link-secondary:active {
+            transform: translateY(0);
+            box-shadow: 0 2px 8px rgba(88, 86, 214, 0.2);
+        }
+        
+        .notification-center-item-link-secondary i {
+            font-size: 0.85rem;
         }
         
         .notification-center-empty {
@@ -2596,6 +2672,7 @@
                 text: 'Looks like your websites are not secured with automatic backups.',
                 link: '/OneClickBackups',
                 linkText: 'Configure now',
+                learnMoreLink: 'https://cyberpanel.net/docs/backup',
                 dismissed: isNotificationDismissed('backup-notification')
             });
             
@@ -2607,6 +2684,7 @@
                 text: 'Secure your websites with AI-powered malware detection. Advanced threat detection • Real-time scanning • Zero false positives',
                 link: '/aiscanner/',
                 linkText: 'Start AI Security Scan',
+                learnMoreLink: 'https://cyberpanel.net/docs/ai-scanner',
                 dismissed: isNotificationDismissed('ai-scanner-notification')
             });
             
@@ -2618,6 +2696,7 @@
                 text: 'Revolutionary .htaccess Support Now Live! Full .htaccess support • PHP configuration now works • Zero rule rewrites needed',
                 link: 'https://cyberpanel.net/cyberpanel-htaccess-module',
                 linkText: 'Learn More',
+                learnMoreLink: 'https://cyberpanel.net/cyberpanel-htaccess-module',
                 dismissed: isNotificationDismissed('htaccess-notification')
             });
             
@@ -2636,6 +2715,10 @@
                         linkIcon = '<i class="fas fa-book-open"></i>';
                     }
                     
+                    // Determine if primary link is external
+                    const isExternal = notif.link.startsWith('http');
+                    const learnMoreExternal = notif.learnMoreLink && notif.learnMoreLink.startsWith('http');
+                    
                     return `
                     <div class="notification-center-item ${notif.dismissed ? 'dismissed' : ''}">
                         <div class="notification-center-item-title">
@@ -2645,10 +2728,16 @@
                         </div>
                         <div class="notification-center-item-text">${notif.text}</div>
                         <div class="notification-center-item-actions">
-                            <a href="${notif.link}" class="notification-center-item-link" ${notif.link.startsWith('http') ? 'target="_blank" rel="noopener"' : ''}>
+                            <a href="${notif.link}" class="notification-center-item-link" ${isExternal ? 'target="_blank" rel="noopener"' : ''}>
                                 ${linkIcon}
                                 <span>${notif.linkText}</span>
                             </a>
+                            ${notif.learnMoreLink ? `
+                            <a href="${notif.learnMoreLink}" class="notification-center-item-link-secondary" ${learnMoreExternal ? 'target="_blank" rel="noopener"' : ''}>
+                                <i class="fas fa-info-circle"></i>
+                                <span>Learn More</span>
+                            </a>
+                            ` : ''}
                         </div>
                     </div>
                 `;