Nemcio/CyberPanel
1
0
Fork 0
mirror of https://github.com/usmannasir/cyberpanel.git synced 2026-01-27 09:49:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add Learn More button to all notifications and improve button styling

Browse Source
This commit is contained in:
master3395
2026-01-19 18:00:44 +01:00
parent 42a6bc291d
commit a2b3591491
1 changed files with 98 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
baseTemplate/templates/baseTemplate/index.html
View File

@@ -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>
`;