<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notification Settings - Flarum Admin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
:root {
--flarum-blue: #4D698E;
--flarum-blue-hover: #445c7d;
--flarum-bg: #f8f9fa;
--flarum-text: #667788;
--flarum-border: #e5e7eb;
--active-indicator: var(--flarum-blue);
--inactive-indicator: #cbd5e1;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.5;
color: var(--flarum-text);
background-color: var(--flarum-bg);
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 1rem;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding: 0.5rem 0;
}
.header h1 {
font-size: 1.25rem;
font-weight: 500;
color: var(--flarum-text);
}
.add-button {
display: inline-flex;
align-items: center;
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
background-color: #e8ecf3;
color: var(--flarum-text);
border: none;
border-radius: 0.25rem;
cursor: pointer;
transition: background-color 0.2s;
}
.add-button:hover {
background-color: #e1e7f2;
}
.add-button i {
margin-right: 0.5rem;
font-size: 0.75rem;
}
.separator {
height: 1px;
background-color: var(--flarum-border);
margin: 1rem 0;
}
.notification-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.notification-card {
position: relative;
display: flex;
align-items: center;
padding: 0.75rem;
background: white;
border: 1px solid var(--flarum-border);
border-radius: 0.375rem;
transition: background-color 0.2s;
}
.notification-card:hover {
background-color: #f9fafb;
}
.status-indicator {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
border-top-left-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
}
.status-indicator.active {
background-color: var(--active-indicator);
}
.status-indicator.inactive {
background-color: var(--inactive-indicator);
}
.notification-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--flarum-blue);
margin-left: 0.5rem;
}
.notification-content {
flex: 1;
margin-left: 0.5rem;
min-width: 0; /* For text truncation */
}
.notification-title {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.notification-name {
font-size: 0.875rem;
font-weight: 500;
color: #1f2937;
}
.status-badge {
font-size: 0.75rem;
padding: 0.125rem 0.5rem;
border-radius: 0.25rem;
font-weight: 500;
}
.status-badge.active {
background-color: #e8ecf3;
color: var(--flarum-blue);
}
.status-badge.inactive {
background-color: #f3f4f6;
color: #6b7280;
}
.notification-description {
font-size: 0.875rem;
color: #6b7280;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notification-actions {
display: flex;
gap: 0.25rem;
margin-left: 1rem;
}
.action-button {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: 0.25rem;
color: #9ca3af;
cursor: pointer;
transition: all 0.2s;
}
.action-button:hover {
background-color: #f3f4f6;
color: #4b5563;
}
.action-button.delete:hover {
background-color: #fef2f2;
color: #dc2626;
}
@media (max-width: 640px) {
.notification-description {
display: none;
}
.notification-card {
padding: 0.5rem;
}
.notification-icon {
width: 32px;
height: 32px;
}
.action-button {
width: 28px;
height: 28px;
}
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<h1>Notification Settings</h1>
<button class="add-button">
<i class="fas fa-plus"></i>
Add New
</button>
</header>
<div class="separator"></div>
<div class="notification-list">
<!-- System Notifications -->
<div class="notification-card">
<div class="status-indicator active"></div>
<div class="notification-icon">
<i class="fas fa-bell"></i>
</div>
<div class="notification-content">
<div class="notification-title">
<span class="notification-name">System Notifications</span>
<span class="status-badge active">Active</span>
</div>
<div class="notification-description">
Important updates about your account and system changes
</div>
</div>
<div class="notification-actions">
<button class="action-button">
<i class="fas fa-cog"></i>
</button>
<button class="action-button delete">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<!-- Forum Notifications -->
<div class="notification-card">
<div class="status-indicator active"></div>
<div class="notification-icon">
<i class="fas fa-comments"></i>
</div>
<div class="notification-content">
<div class="notification-title">
<span class="notification-name">Forum Notifications</span>
<span class="status-badge active">Active</span>
</div>
<div class="notification-description">
New discussions, likes, and mentions
</div>
</div>
<div class="notification-actions">
<button class="action-button">
<i class="fas fa-cog"></i>
</button>
<button class="action-button delete">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<!-- Email Digests -->
<div class="notification-card">
<div class="status-indicator active"></div>
<div class="notification-icon">
<i class="fas fa-envelope"></i>
</div>
<div class="notification-content">
<div class="notification-title">
<span class="notification-name">Email Digests</span>
<span class="status-badge active">Active</span>
</div>
<div class="notification-description">
Weekly forum activity and important updates
</div>
</div>
<div class="notification-actions">
<button class="action-button">
<i class="fas fa-cog"></i>
</button>
<button class="action-button delete">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<!-- Announcements -->
<div class="notification-card">
<div class="status-indicator inactive"></div>
<div class="notification-icon">
<i class="fas fa-bullhorn" style="color: #9ca3af;"></i>
</div>
<div class="notification-content">
<div class="notification-title">
<span class="notification-name">Announcements</span>
<span class="status-badge inactive">Inactive</span>
</div>
<div class="notification-description">
Forum announcements and important news
</div>
</div>
<div class="notification-actions">
<button class="action-button">
<i class="fas fa-cog"></i>
</button>
<button class="action-button delete">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
</div>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.