Abdelaziz/sultan
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Swap notification bell for a chat-bubble SVG icon

Browse Source 
Use a filled message bubble with three dots instead of the 🔔
emoji so the icon reads cleanly across platforms. When there
are unread notifications the button picks up the brand
gradient, and the unread counter gets a soft pulsing animation
with a tighter outline.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
sultan 2026-05-25 09:50:18 +05:00
parent a4c319fe50
commit 933cdc6521
2 changed files with 42 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@ -11,7 +11,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css">
<link rel="stylesheet" href="styles.css?v=39" />
<link rel="stylesheet" href="styles.css?v=40" />
</head>
<body>
<header class="topbar">
@ -68,8 +68,13 @@
</a>
</div>
<div class="who">
<button id="notifBtn" class="notif-btn" type="button" title="Уведомления" hidden>
<span class="notif-bell" aria-hidden="true">🔔</span>
<button id="notifBtn" class="notif-btn" type="button" title="Уведомления" aria-label="Уведомления" hidden>
<svg class="notif-icon-svg" viewBox="0 0 24 24" aria-hidden="true">
<path d="M5 4h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-8.6L6 21.2A.6.6 0 0 1 5 20.7V18H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z" fill="currentColor"/>
<circle cx="9" cy="11" r="1.15" fill="#fff"/>
<circle cx="12" cy="11" r="1.15" fill="#fff"/>
<circle cx="15" cy="11" r="1.15" fill="#fff"/>
</svg>
<span id="notifCount" class="notif-count" hidden>0</span>
</button>
<div id="userChip" class="user-chip" hidden>

48
styles.css
View File

@ -213,37 +213,57 @@ body {
.who { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.notif-btn {
position: relative;
width: 38px; height: 38px;
width: 40px; height: 40px;
border-radius: 50%;
border: none;
background: var(--surface-2);
cursor: pointer;
font-size: 17px;
line-height: 1;
color: var(--ink-2);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease;
transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.notif-btn:hover { background: rgba(0,113,227,0.10); }
.notif-btn.has-unread { background: rgba(0,113,227,0.12); }
.notif-btn:hover {
background: rgba(0, 113, 227, 0.10);
color: var(--kt-blue);
}
.notif-btn.has-unread {
background: linear-gradient(135deg, #4FB1F7, var(--kt-blue));
color: #fff;
}
.notif-btn.has-unread:hover { transform: scale(1.04); }
.notif-btn:focus-visible { outline: 2px solid var(--kt-blue); outline-offset: 2px; }
.notif-icon-svg {
width: 20px;
height: 20px;
display: block;
}
.notif-count {
position: absolute;
top: -2px;
right: -2px;
min-width: 18px;
height: 18px;
padding: 0 5px;
top: -3px;
right: -3px;
min-width: 20px;
height: 20px;
padding: 0 6px;
background: #FF3B30;
color: #fff;
font-size: 10px;
font-size: 11px;
font-weight: 700;
border-radius: 9px;
font-variant-numeric: tabular-nums;
letter-spacing: 0;
line-height: 1;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid var(--bg, #fff);
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(255, 59, 48, 0.35);
animation: notif-pulse 1.6s ease-in-out infinite;
}
@keyframes notif-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 1px 4px rgba(255,59,48,0.35); }
50% { transform: scale(1.08); box-shadow: 0 2px 8px rgba(255,59,48,0.55); }
}
.notif-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.notif-head .modal-title { margin: 0; }