This commit is contained in:
2026-09-28 22:12:38 +02:00
parent b96f188a59
commit 2cc768f1fd
24 changed files with 962 additions and 78 deletions
+82 -8
View File
@@ -1,16 +1,89 @@
@if(session)
<div id="mod-action-modal" class="modal-overlay" style="display:none;">
<div class="modal-content">
<h3 id="mod-action-title">{{ t('mod.confirm_action') }}</h3>
<div id="mod-action-content"></div>
<textarea id="mod-reason" class="mod-reason" placeholder="{{ t('mod.reason_placeholder') }}"></textarea>
<div id="mod-action-error" class="error-msg"></div>
<div class="modal-actions">
<button id="mod-action-confirm" class="btn-danger">{{ t('mod.confirm') }}</button>
<button id="mod-action-cancel" class="btn-secondary">{{ t('common.cancel') }}</button>
<div class="modal-content ma-modal-content">
<div class="ma-header">
<h3 id="mod-action-title">{{ t('mod.confirm_action') }}</h3>
</div>
<div class="ma-body">
<div id="mod-action-content"></div>
<textarea id="mod-reason" class="mod-reason" placeholder="{{ t('mod.reason_placeholder') }}"></textarea>
<div id="mod-action-error" class="error-msg"></div>
</div>
<div class="modal-actions ma-footer">
<button type="button" id="mod-action-cancel" class="btn-secondary">{{ t('common.cancel') }}</button>
<button type="button" id="mod-action-confirm" class="btn-danger">{{ t('mod.confirm') }}</button>
</div>
</div>
</div>
<style>
/* Moderator action modal — same rules as the report/info/visibility modals */
#mod-action-modal .ma-modal-content {
--ma-accent: var(--accent, #0096ff);
--ma-text: var(--text-color, #fff);
--ma-muted: var(--text-muted, #8a8f98);
--ma-surface: rgba(255, 255, 255, 0.04);
--ma-border: rgba(255, 255, 255, 0.1);
--ma-danger: #ff5c5c;
width: min(440px, 92vw); min-width: 0;
max-height: min(90vh, 90dvh);
display: flex; flex-direction: column; overflow: hidden;
padding: 0; text-align: left;
border-radius: 0 !important;
border: 1px solid var(--accent) !important;
background: var(--bg) !important;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important;
color: var(--ma-text);
}
#mod-action-modal .ma-modal-content * { border-radius: 0 !important; }
#mod-action-modal .ma-header { flex-shrink: 0; padding: 18px 24px 14px; border-bottom: 1px solid var(--ma-border); }
#mod-action-modal .ma-header h3 { margin: 0; font-size: 1.2em; font-weight: 700; color: var(--ma-text); overflow-wrap: anywhere; }
#mod-action-modal .ma-body {
flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
padding: 16px 24px; display: flex; flex-direction: column; gap: 12px;
}
#mod-action-modal #mod-action-content { font-size: 0.9em; line-height: 1.5; color: var(--ma-muted); overflow-wrap: anywhere; }
#mod-action-modal #mod-action-content:empty { display: none; }
#mod-action-modal #mod-action-content strong, #mod-action-modal #mod-action-content b { color: var(--ma-text); }
#mod-action-modal textarea.mod-reason {
width: 100%; min-height: 0; box-sizing: border-box; margin: 0; padding: 10px 12px;
background: var(--ma-surface) !important; border: 1px solid var(--ma-border) !important; color: var(--ma-text) !important;
font: inherit; font-size: 0.9em; outline: none; box-shadow: none !important; transition: border-color 0.15s;
}
#mod-action-modal textarea.mod-reason:focus { border-color: var(--ma-accent) !important; }
#mod-action-modal textarea.mod-reason::placeholder { color: var(--ma-muted); }
#mod-action-modal #mod-action-error {
margin: 0; padding: 10px 12px; font-size: 0.84em; line-height: 1.45; color: #ff8a8a; text-align: left;
background: rgba(224, 108, 117, 0.1); border: 1px solid rgba(224, 108, 117, 0.3);
}
#mod-action-modal #mod-action-error:empty { display: none !important; }
#mod-action-modal .ma-footer {
flex-shrink: 0; display: flex; justify-content: flex-end; gap: 8px; margin: 0;
padding: 14px 24px; border-top: 1px solid var(--ma-border); background: rgba(0, 0, 0, 0.2);
}
#mod-action-modal .ma-footer button {
height: 40px; margin: 0; padding: 0 18px; font: inherit; font-size: 0.85em; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; transition: background 0.18s, color 0.18s, border-color 0.18s;
}
#mod-action-modal #mod-action-cancel { background: transparent; border: 1px solid var(--ma-border); color: var(--ma-muted); font-weight: 600; }
#mod-action-modal #mod-action-cancel:hover { color: var(--ma-text); border-color: rgba(255, 255, 255, 0.25); background: var(--ma-surface); }
#mod-action-modal #mod-action-confirm {
background: var(--ma-danger); border: 1px solid var(--ma-danger); color: #000;
font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
}
#mod-action-modal #mod-action-confirm:hover:not(:disabled) { background: transparent; color: var(--ma-danger); }
#mod-action-modal #mod-action-confirm:disabled { opacity: 0.6; cursor: progress; }
#mod-action-modal .ma-footer button:focus-visible { outline: 2px solid var(--ma-accent); outline-offset: 2px; }
@media (max-width: 600px) {
#mod-action-modal { padding: 0 !important; align-items: stretch !important; }
#mod-action-modal .ma-modal-content {
width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none;
border: 0 !important; box-shadow: none !important;
}
#mod-action-modal .ma-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
#mod-action-modal .ma-footer button { flex: 1; }
}
</style>
@endif
@if(session)
@@ -345,6 +418,7 @@
<a href="/ranking">{{ t('footer.ranking') }}</a>
<a href="/rules">{{ t('footer.rules') }}</a>
<a href="/about">{{ t('footer.about') }}</a>
<a href="/privacy">Privacy</a>
<div id="help-button" style="color: var(--accent); font-weight: bold; opacity: 0.7;" title="Keyboard Shortcuts">?</div>
</div>
</div>
+8 -1
View File
@@ -68,6 +68,7 @@
<a href="/user/{!! session.user.toLowerCase() !!}/halls">{{ t('nav.my_halls') }}</a>
@endif
@endif
<a href="/pending">Pending Uploads</a>
@if(enable_anonymous_access && session.is_anon)
<a href="#" id="nav-user-anon-identity-btn" style="white-space: nowrap;" onclick="event.preventDefault(); if(window.f0ckAnonPasskey) { window.f0ckAnonPasskey.openModal(); } else { const m = document.getElementById('anon-passkey-modal'); if (m) m.style.display='flex'; }">Passkey Identity</a>
@endif
@@ -460,7 +461,10 @@ async function loginWithPasskey() {
<div class="lm-divider"><span>or</span></div>
<button type="button" id="modal-login-as-anon-btn" class="lm-btn lm-btn-ghost"
onclick="event.preventDefault(); if(window.f0ckAnonPasskey) window.f0ckAnonPasskey.openSetupModal(); else { const m=document.getElementById('anon-setup-modal'); if(m) m.style.display='flex'; }">
<i class="fa-solid fa-user-secret"></i> Login as anonymous
<i class="fa-solid fa-user-secret"></i> Login as Anonymous
</button>
<button type="button" id="modal-login-register-btn" class="lm-btn lm-btn-ghost" style="margin-top: 8px;">
<i class="fa-solid fa-user-plus"></i> Register
</button>
</div>
@endif
@@ -821,6 +825,9 @@ async function loginWithPasskey() {
<p class="lm-note">
<i class="fa-solid fa-rotate"></i> You can use it across devices if your passkey manager syncs (e.g. Bitwarden).
</p>
<p class="lm-note">
<i class="fa-solid fa-shield-halved"></i> To stop ban evasion we store a hashed device fingerprint@if(privacy_ip_mode === 'hashed') and a hashed IP address@elseif(privacy_ip_mode === 'raw') and your IP address@endif. <a href="/privacy" target="_blank" class="lm-link">What exactly is stored?</a>
</p>
<button type="button" id="anon-setup-create-btn" class="lm-btn lm-btn-primary">
<i class="fa-solid fa-fingerprint"></i> Create my passkey
</button>
+3 -3
View File
@@ -2,7 +2,7 @@
@if(n.type === 'approve')
<a href="/{{ n.item_slug || n.item_id }}" class="notif-item {{ n.is_read ? '' : 'unread' }} notif-with-thumb" data-id="{{ n.id }}" data-item-id="{{ n.item_id || '' }}" data-item-slug="{{ n.item_slug || '' }}">
<div class="notif-thumb" data-mode="{{ n.item_mode || '' }}">
<img src="/t/{{ n.item_id }}{{ ((active_mode===0&&(n.item_mode==='nsfw'||n.item_mode==='nsfl'))||(active_mode===1&&n.item_mode==='nsfl')||(active_mode===4&&(n.item_mode==='sfw'||n.item_mode==='nsfw'))) ? '_blur' : '' }}.webp" data-orig-src="/t/{{ n.item_id }}.webp" alt="thumb" onerror="this.onerror=null;this.src='/mod/pending/t/{{ n.item_id }}.webp';this.onerror=function(){this.onerror=null;this.src='/mod/deleted/t/{{ n.item_id }}.webp';this.onerror=function(){this.style.display='none';};};"/>
<img src="/t/{{ n.item_id }}{{ ((active_mode===0&&(n.item_mode==='nsfw'||n.item_mode==='nsfl'))||(active_mode===1&&n.item_mode==='nsfl')||(active_mode===4&&(n.item_mode==='sfw'||n.item_mode==='nsfw'))) ? '_blur' : '' }}.webp" data-orig-src="/t/{{ n.item_id }}.webp" alt="thumb" onerror="this.onerror=null;this.src='/pending/t/{{ n.item_id }}.webp';this.onerror=function(){this.onerror=null;this.src='/mod/deleted/t/{{ n.item_id }}.webp';this.onerror=function(){this.style.display='none';};};"/>
</div>
<div class="notif-content">
<div class="notif-user"><strong>{{ t('notifications.system') }}</strong></div>
@@ -24,7 +24,7 @@
@elseif(n.type === 'report')
<a href="/mod/reports" class="notif-item {{ n.is_read ? '' : 'unread' }} notif-with-thumb" data-id="{{ n.id }}" data-item-id="{{ n.item_id || '' }}" data-item-slug="{{ n.item_slug || '' }}">
<div class="notif-thumb" data-mode="{{ n.item_mode || '' }}">
<img src="/t/{{ n.item_id }}{{ ((active_mode===0&&(n.item_mode==='nsfw'||n.item_mode==='nsfl'))||(active_mode===1&&n.item_mode==='nsfl')||(active_mode===4&&(n.item_mode==='sfw'||n.item_mode==='nsfw'))) ? '_blur' : '' }}.webp" data-orig-src="/t/{{ n.item_id }}.webp" alt="thumb" onerror="this.onerror=null;this.src='/mod/pending/t/{{ n.item_id }}.webp';this.onerror=function(){this.onerror=null;this.src='/mod/deleted/t/{{ n.item_id }}.webp';this.onerror=function(){this.style.display='none';};};"/>
<img src="/t/{{ n.item_id }}{{ ((active_mode===0&&(n.item_mode==='nsfw'||n.item_mode==='nsfl'))||(active_mode===1&&n.item_mode==='nsfl')||(active_mode===4&&(n.item_mode==='sfw'||n.item_mode==='nsfw'))) ? '_blur' : '' }}.webp" data-orig-src="/t/{{ n.item_id }}.webp" alt="thumb" onerror="this.onerror=null;this.src='/pending/t/{{ n.item_id }}.webp';this.onerror=function(){this.onerror=null;this.src='/mod/deleted/t/{{ n.item_id }}.webp';this.onerror=function(){this.style.display='none';};};"/>
</div>
<div class="notif-content">
<div class="notif-user"><strong>{{ t('notifications.moderation') }}</strong></div>
@@ -86,7 +86,7 @@
<a href="{{ n.item_id ? '/' + (n.item_slug || n.item_id) : '#' }}" class="notif-item {{ n.is_read ? '' : 'unread' }} {{ n.item_id ? 'notif-with-thumb' : '' }}" data-id="{{ n.id }}" data-item-id="{{ n.item_id || '' }}" data-item-slug="{{ n.item_slug || '' }}">
@if(n.item_id)
<div class="notif-thumb" data-mode="{{ n.item_mode || '' }}">
<img src="/t/{{ n.item_id }}{{ ((active_mode===0&&(n.item_mode==='nsfw'||n.item_mode==='nsfl'))||(active_mode===1&&n.item_mode==='nsfl')||(active_mode===4&&(n.item_mode==='sfw'||n.item_mode==='nsfw'))) ? '_blur' : '' }}.webp" data-orig-src="/t/{{ n.item_id }}.webp" alt="thumb" onerror="this.onerror=null;this.src='/mod/pending/t/{{ n.item_id }}.webp';this.onerror=function(){this.style.display='none'};" />
<img src="/t/{{ n.item_id }}{{ ((active_mode===0&&(n.item_mode==='nsfw'||n.item_mode==='nsfl'))||(active_mode===1&&n.item_mode==='nsfl')||(active_mode===4&&(n.item_mode==='sfw'||n.item_mode==='nsfw'))) ? '_blur' : '' }}.webp" data-orig-src="/t/{{ n.item_id }}.webp" alt="thumb" onerror="this.onerror=null;this.src='/pending/t/{{ n.item_id }}.webp';this.onerror=function(){this.style.display='none'};" />
</div>
@endif
<div class="notif-content">