diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css
index 24f08b1..1324d2e 100644
--- a/public/s/css/f0ckm.css
+++ b/public/s/css/f0ckm.css
@@ -14389,4 +14389,99 @@ body.scroller-active #gchat-reopen-bubble {
color: #666;
text-transform: uppercase;
margin-bottom: 2px;
+}
+
+/* Filter badge style on navbar */
+.filter-badge {
+ position: absolute;
+ bottom: -6px;
+ font-size: 6px;
+ font-weight: 796;
+ padding: 2px 4px;
+ border-radius: 4px;
+ line-height: 1;
+ text-transform: uppercase;
+ color: #fff !important;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+ pointer-events: none;
+ font-family: var(--font, monospace);
+ letter-spacing: 0.5px;
+ z-index: 10;
+ display: inline-flex;
+ align-items: center;
+}
+
+.filter-badge-sfw {
+ background: var(--badge-sfw, #68a728);
+}
+
+.filter-badge-nsfw {
+ background: var(--badge-nsfw, #E10DC3);
+}
+
+.filter-badge-nsfl {
+ background: var(--badge-nsfl, #660000);
+}
+
+.filter-badge-unt {
+ background: #ff9800;
+ /* Amber/Orange */
+}
+
+.filter-badge-all {
+ background: #555;
+ /* Slate grey */
+}
+
+/* Dynamic MIME dots styles */
+.filter-mime-dots {
+ display: inline-flex;
+ gap: 2px;
+ margin-left: 2px;
+ align-items: center;
+}
+
+.mime-dot {
+ display: inline-block;
+ width: 4px;
+ height: 4px;
+ border-radius: 50%;
+ box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
+ animation: dot-fade-in 0.2s ease-out forwards;
+}
+
+@keyframes dot-fade-in {
+ from {
+ opacity: 0;
+ transform: scale(0.5);
+ }
+
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+.mime-dot-video {
+ background-color: #00bcd4;
+ /* Cyan */
+ box-shadow: 0 0 3px #00bcd4;
+}
+
+.mime-dot-image {
+ background-color: #2ecc71;
+ /* Green */
+ box-shadow: 0 0 3px #2ecc71;
+}
+
+.mime-dot-audio {
+ background-color: #e84393;
+ /* Pink */
+ box-shadow: 0 0 3px #e84393;
+}
+
+.mime-dot-flash {
+ background-color: #f1c40f;
+ /* Yellow */
+ box-shadow: 0 0 3px #f1c40f;
}
\ No newline at end of file
diff --git a/public/s/js/f0ckm.js b/public/s/js/f0ckm.js
index ea46cd7..a3000e8 100644
--- a/public/s/js/f0ckm.js
+++ b/public/s/js/f0ckm.js
@@ -274,8 +274,88 @@ window.cancelAnimFrame = (function () {
});
});
+ if (window.updateFilterBadge) window.updateFilterBadge();
};
window.updateMimeLabel = updateMimeLabel;
+
+ const updateFilterBadge = () => {
+ const badge = document.getElementById('nav-filter-badge');
+ if (!badge) return;
+
+ let activeMode = 0;
+ if (window.activeMode !== undefined) {
+ activeMode = window.activeMode;
+ } else {
+ const cookieMode = document.cookie.split('; ').find(row => row.startsWith('mode='));
+ if (cookieMode) {
+ activeMode = +cookieMode.split('=')[1];
+ } else if (window.f0ckSession && window.f0ckSession.mode !== undefined) {
+ activeMode = window.f0ckSession.mode;
+ }
+ }
+
+ let hasMimeFilter = false;
+ let mimeStr = '';
+ const cookieMime = document.cookie.split('; ').find(row => row.startsWith('mime='));
+ if (cookieMime) {
+ mimeStr = cookieMime.split('=')[1] || '';
+ }
+ const selectedMimes = mimeStr ? mimeStr.split(',').filter(m => ['video', 'audio', 'image', 'flash'].includes(m)) : [];
+ if (selectedMimes.length > 0) {
+ hasMimeFilter = true;
+ }
+
+ let badgeText = '';
+ let badgeClass = 'filter-badge';
+
+ switch (activeMode) {
+ case 0:
+ badgeText = 'SFW';
+ badgeClass += ' filter-badge-sfw';
+ break;
+ case 1:
+ badgeText = 'NSFW';
+ badgeClass += ' filter-badge-nsfw';
+ break;
+ case 4:
+ badgeText = 'NSFL';
+ badgeClass += ' filter-badge-nsfl';
+ break;
+ case 2:
+ badgeText = 'UNT';
+ badgeClass += ' filter-badge-unt';
+ break;
+ case 3:
+ badgeText = 'ALL';
+ badgeClass += ' filter-badge-all';
+ break;
+ default:
+ badgeText = 'SFW';
+ badgeClass += ' filter-badge-sfw';
+ }
+
+ badge.className = badgeClass;
+ badge.innerHTML = badgeText;
+
+ if (hasMimeFilter) {
+ const dotsContainer = document.createElement('span');
+ dotsContainer.className = 'filter-mime-dots';
+ selectedMimes.forEach(mime => {
+ const dot = document.createElement('span');
+ dot.className = `mime-dot mime-dot-${mime}`;
+ dot.title = mime.charAt(0).toUpperCase() + mime.slice(1);
+ dotsContainer.appendChild(dot);
+ });
+ badge.appendChild(dotsContainer);
+ }
+
+ badge.style.display = 'inline-flex';
+ };
+ window.updateFilterBadge = updateFilterBadge;
+
+ document.addEventListener('f0ck:modeChanged', () => {
+ updateFilterBadge();
+ });
window.randomizeLogo = () => {
const logoArr = window.f0ckBrandImages;
if (!logoArr || !logoArr.length) return;
@@ -4548,6 +4628,7 @@ window.cancelAnimFrame = (function () {
document.addEventListener('DOMContentLoaded', () => {
initSearch();
initExcludedTagsModal();
+ if (window.updateFilterBadge) window.updateFilterBadge();
});
//
diff --git a/views/snippets/navbar.html b/views/snippets/navbar.html
index 350bd80..424757e 100644
--- a/views/snippets/navbar.html
+++ b/views/snippets/navbar.html
@@ -121,7 +121,22 @@
-
+
+
+ @if(session.mode == 0)
+ SFW
+ @elseif(session.mode == 1)
+ NSFW
+ @elseif(session.mode == 4)
+ NSFL
+ @elseif(session.mode == 2)
+ UNT
+ @elseif(session.mode == 3)
+ ALL
+ @else
+ SFW
+ @endif
+