kibi/f0ckm
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

esifawafwu

Browse Source
This commit is contained in:
kibi
2026-09-28 19:03:31 +02:00
parent 5eb33f97c8
commit dde0a2d271
62 changed files with 3760 additions and 1865 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/admin.html
+211 -123
View File
@@ -1,136 +1,230 @@
@include(snippets/header)
<div class="pagewrapper">
<div id="main">
<div class="container">
<h1>ADMINBEREICH</h1>
<h5>Hallo, {{ session.user }}</h5>
<span>Hier entsteht eine Internetpräsenz!</span><br>
<hr>
<p>f0ck stats: @if(typeof totals !== "undefined")total: {{ totals.total }} | tagged: {{ totals.tagged }} | untagged: {{ totals.untagged }} | sfw: {{ totals.sfw }} | nsfw: {{ totals.nsfw }}@endif</p>
<hr>
<div class="admintools">
<p>Adminwerkzeuge</p>
<ul>
<li><a href="/mod/audit">Audit Log</a></li>
<li><a href="/admin/approve">Approval Queue</a></li>
<li><a href="/admin/sessions">Sessions</a></li>
<li><a href="/admin/tokens">Invite Tokens</a></li>
<li><a href="/admin/users">User Manager</a></li>
<li><a href="/admin/bans">Ban & Fingerprint Manager</a></li>
<li><a href="/admin/emojis">Emoji Manager</a></li>
<li><a href="/admin/memes">Meme Manager</a></li>
<li><a href="/admin/koepfe">Köpfe Manager</a></li>
<li><a href="/admin/halls">Hall Manager</a></li>
<li><a href="/admin/motd">MOTD Manager</a></li>
<li><a href="/admin/wordfilter">Wordfilter Manager</a></li>
<li><a href="/admin/nsfp">NSFP Tag Manager</a></li>
<div class="container adm">
<!-- Header -->
<header class="adm-header">
<div>
<h1 class="adm-title">Admin</h1>
<div class="adm-subtitle">Signed in as <strong>{{ session.user }}</strong></div>
</div>
<a href="/mod" class="adm-btn adm-btn-ghost"><i class="fa-solid fa-gavel"></i> Moderator panel</a>
</header>
<!-- Overview -->
<section class="adm-section">
<h2 class="adm-section-title"><i class="fa-solid fa-chart-simple"></i> Overview</h2>
@if(typeof totals !== "undefined")
<div class="adm-stats">
<div class="adm-stat"><span class="adm-stat-num">{{ totals.total }}</span><span class="adm-stat-label">Posts</span></div>
<div class="adm-stat"><span class="adm-stat-num">{{ totals.sfw }}</span><span class="adm-stat-label">SFW</span></div>
<div class="adm-stat"><span class="adm-stat-num">{{ totals.nsfw }}</span><span class="adm-stat-label">NSFW</span></div>
@if(enable_nsfl)
<div class="adm-stat"><span class="adm-stat-num">{{ totals.nsfl }}</span><span class="adm-stat-label">NSFL</span></div>
@endif
<div class="adm-stat"><span class="adm-stat-num">{{ totals.untagged }}</span><span class="adm-stat-label">Untagged</span></div>
<a href="/admin/approve" class="adm-stat adm-stat-link @if(totals.pending > 0) is-hot @endif"><span class="adm-stat-num">{{ totals.pending }}</span><span class="adm-stat-label">Pending approval</span></a>
<a href="/mod/trash" class="adm-stat adm-stat-link"><span class="adm-stat-num">{{ dash.trash }}</span><span class="adm-stat-label">Soft deleted</span></a>
<a href="/mod/reports" class="adm-stat adm-stat-link @if(dash.open_reports > 0) is-hot @endif"><span class="adm-stat-num">{{ dash.open_reports }}</span><span class="adm-stat-label">Open reports</span></a>
<a href="/admin/users" class="adm-stat adm-stat-link"><span class="adm-stat-num">{{ dash.users }}</span><span class="adm-stat-label">Users <small>+{{ dash.anon_users }} anon</small></span></a>
</div>
@endif
</section>
<!-- Tools -->
<section class="adm-section">
<h2 class="adm-section-title"><i class="fa-solid fa-screwdriver-wrench"></i> Tools</h2>
<h3 class="adm-group-title">Moderation</h3>
<div class="adm-tools">
<a href="/admin/approve" class="adm-tool">
<i class="fa-solid fa-clock"></i>
<span class="adm-tool-text"><strong>Approval Queue @if(totals.pending > 0)<span class="adm-count">{{ totals.pending }}</span>@endif</strong><span>Review uploads waiting for approval</span></span>
</a>
<a href="/mod/trash" class="adm-tool">
<i class="fa-solid fa-trash-can"></i>
<span class="adm-tool-text"><strong>Soft Deleted @if(dash.trash > 0)<span class="adm-count">{{ dash.trash }}</span>@endif</strong><span>Restore or permanently purge removed items</span></span>
</a>
<a href="/mod/reports" class="adm-tool">
<i class="fa-solid fa-flag"></i>
<span class="adm-tool-text"><strong>User Reports @if(dash.open_reports > 0)<span class="adm-count">{{ dash.open_reports }}</span>@endif</strong><span>Reported posts, comments and users</span></span>
</a>
<a href="/mod/audit" class="adm-tool">
<i class="fa-solid fa-scroll"></i>
<span class="adm-tool-text"><strong>Audit Log</strong><span>Every moderation and admin action</span></span>
</a>
</div>
<h3 class="adm-group-title">Users &amp; access</h3>
<div class="adm-tools">
<a href="/admin/users" class="adm-tool">
<i class="fa-solid fa-users"></i>
<span class="adm-tool-text"><strong>User Manager</strong><span>Accounts, roles and groups</span></span>
</a>
<a href="/admin/bans" class="adm-tool">
<i class="fa-solid fa-ban"></i>
<span class="adm-tool-text"><strong>Bans &amp; Fingerprints</strong><span>IP, hardware and passkey bans</span></span>
</a>
<a href="/admin/sessions" class="adm-tool">
<i class="fa-solid fa-key"></i>
<span class="adm-tool-text"><strong>Sessions</strong><span>Active logins across all users</span></span>
</a>
<a href="/admin/tokens" class="adm-tool">
<i class="fa-solid fa-ticket"></i>
<span class="adm-tool-text"><strong>Invite Tokens</strong><span>Create and revoke invites</span></span>
</a>
</div>
<h3 class="adm-group-title">Content</h3>
<div class="adm-tools">
<a href="/admin/halls" class="adm-tool">
<i class="fa-solid fa-layer-group"></i>
<span class="adm-tool-text"><strong>Halls</strong><span>Curated collections</span></span>
</a>
<a href="/admin/emojis" class="adm-tool">
<i class="fa-solid fa-face-smile"></i>
<span class="adm-tool-text"><strong>Emojis</strong><span>Custom emojis and sticker packs</span></span>
</a>
<a href="/admin/memes" class="adm-tool">
<i class="fa-regular fa-image"></i>
<span class="adm-tool-text"><strong>Memes</strong><span>Meme creator templates</span></span>
</a>
<a href="/admin/koepfe" class="adm-tool">
<i class="fa-solid fa-masks-theater"></i>
<span class="adm-tool-text"><strong>Köpfe</strong><span>Floating head images</span></span>
</a>
<a href="/admin/nsfp" class="adm-tool">
<i class="fa-solid fa-eye-slash"></i>
<span class="adm-tool-text"><strong>NSFP Tags</strong><span>Tags hidden from the public</span></span>
</a>
<a href="/admin/wordfilter" class="adm-tool">
<i class="fa-solid fa-filter"></i>
<span class="adm-tool-text"><strong>Wordfilter</strong><span>Replace words in comments</span></span>
</a>
@if(enable_cleanup)
<li><a href="/admin/cleanup">Cleanup Manager</a></li>
<a href="/admin/cleanup" class="adm-tool">
<i class="fa-solid fa-broom"></i>
<span class="adm-tool-text"><strong>Cleanup</strong><span>Remove old unengaged uploads</span></span>
</a>
@endif
<li><a href="/admin/about">About Page</a></li>
<li><a href="/admin/rules">Rules Page</a></li>
<li><a href="/admin/terms">ToS Page</a></li>
</div>
<h3 class="adm-group-title">Site</h3>
<div class="adm-tools">
<a href="/admin/motd" class="adm-tool">
<i class="fa-solid fa-bullhorn"></i>
<span class="adm-tool-text"><strong>MOTD</strong><span>Message of the day banner</span></span>
</a>
<a href="/admin/about" class="adm-tool">
<i class="fa-solid fa-circle-info"></i>
<span class="adm-tool-text"><strong>About Page</strong><span>Edit /about</span></span>
</a>
<a href="/admin/rules" class="adm-tool">
<i class="fa-solid fa-list-check"></i>
<span class="adm-tool-text"><strong>Rules Page</strong><span>Edit /rules</span></span>
</a>
<a href="/admin/terms" class="adm-tool">
<i class="fa-solid fa-file-contract"></i>
<span class="adm-tool-text"><strong>ToS Page</strong><span>Edit /terms</span></span>
</a>
@if(enable_global_chat)
<li><a href="/admin/chat">Global Chat Manager</a></li>
<a href="/admin/chat" class="adm-tool">
<i class="fa-solid fa-comments"></i>
<span class="adm-tool-text"><strong>Global Chat</strong><span>Moderate the site chat</span></span>
</a>
@endif
</ul>
<hr style="margin: 20px 0; border: 0; border-top: 1px solid rgba(255,255,255,0.1);">
</div>
</section>
<!-- Navbar Brand Image -->
<div class="settings-item" id="brand-image-section" style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 4px; margin-top: 10px;">
<label style="display: block; font-weight: bold; color: var(--accent); margin-bottom: 8px;">Navbar Brand Image</label>
<p style="margin: 0 0 12px 0; font-size: 0.8em; color: #aaa;">Upload a logo to display in the site navbar instead of plain text. Accepted: gif, jpg, png, webp, svg &mdash; max 5&nbsp;MB.</p>
<div style="display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
<!-- Preview -->
<div id="brand-preview-wrap" style="width: 160px; height: 54px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;">
@if(current_brand_image)
<img id="brand-preview" src="{{ current_brand_image }}" alt="current brand" style="max-height: 48px; max-width: 150px; object-fit: contain;">
@else
<span id="brand-preview" style="font-size: 0.75em; color: #666; font-style: italic;">No image set</span>
@endif
</div>
<!-- Controls -->
<div style="display: flex; flex-direction: column; gap: 8px;">
<label for="brand-file-input" style="display: inline-block; background: var(--accent); color: #000; padding: 7px 16px; border-radius: 4px; cursor: pointer; font-size: 0.82em; font-weight: bold; transition: opacity 0.2s;"
onmouseover="this.style.opacity='0.85'" onmouseout="this.style.opacity='1'">Choose Image</label>
<input type="file" id="brand-file-input" accept="image/gif,image/jpeg,image/png,image/webp,image/svg+xml" style="display:none;" onchange="uploadBrandImage(this)">
<button id="brand-remove-btn" onclick="removeBrandImage()" style="background: rgba(220,53,69,0.15); border: 1px solid rgba(220,53,69,0.4); color: #dc3545; padding: 7px 16px; border-radius: 4px; cursor: pointer; font-size: 0.82em; font-weight: bold; transition: background 0.2s;"
onmouseover="this.style.background='rgba(220,53,69,0.3)'" onmouseout="this.style.background='rgba(220,53,69,0.15)'"@if(!current_brand_image) disabled style="background: rgba(220,53,69,0.05); border: 1px solid rgba(220,53,69,0.15); color: #884040; padding: 7px 16px; border-radius: 4px; cursor: not-allowed; font-size: 0.82em; font-weight: bold;"@endif>Remove</button>
</div>
</div>
<span id="brand-status" style="display: block; margin-top: 10px; font-size: 0.8em; font-weight: bold;"></span>
<!-- Settings -->
<section class="adm-section">
<div class="adm-section-head">
<h2 class="adm-section-title"><i class="fa-solid fa-sliders"></i> Settings</h2>
<span id="settings-status" class="adm-status"></span>
</div>
<hr style="margin: 20px 0; border: 0; border-top: 1px solid rgba(255,255,255,0.1);">
<div class="settings-toggle" style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 4px; display: flex; align-items: center; justify-content: space-between;">
<div>
<label style="display: block; font-weight: bold; color: var(--accent);">Manual Upload Approval</label>
<p style="margin: 2px 0 0 0; font-size: 0.8em; color: #aaa;">If enabled, mods must approve every upload.</p>
<h3 class="adm-group-title">Uploads</h3>
<div class="adm-panel">
<div class="adm-row">
<div class="adm-row-text">
<label for="manual_approval_toggle">Manual upload approval</label>
<p>If enabled, mods must approve every upload.</p>
</div>
<label class="adm-switch">
<input type="checkbox" id="manual_approval_toggle" {{ manual_approval ? 'checked' : '' }} onchange="saveAdminSettings()">
<span class="adm-slider"></span>
</label>
</div>
<div class="adm-row">
<div class="adm-row-text">
<label for="min_tags_input">Minimum tags</label>
<p>Minimum number of tags required per upload.</p>
</div>
<input type="number" id="min_tags_input" class="adm-number" value="{{ min_tags }}" min="0" max="20" onchange="saveAdminSettings()">
</div>
<div class="adm-row">
<div class="adm-row-text">
<label for="trusted_uploads_input">Trusted upload threshold</label>
<p>Users with fewer approved uploads than this still need manual approval, even if the toggle above is off. 0 disables it.</p>
</div>
<input type="number" id="trusted_uploads_input" class="adm-number" value="{{ trusted_uploads }}" min="0" max="999" onchange="saveAdminSettings()">
</div>
<label class="switch">
<input type="checkbox" id="manual_approval_toggle" {{ manual_approval ? 'checked' : '' }} onchange="saveAdminSettings()">
<span class="slider round"></span>
</label>
</div>
@if(registration_web_toggle_enabled)
<div class="settings-toggle" style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 4px; display: flex; align-items: center; justify-content: space-between; margin-top: 10px;">
<div>
<label style="display: block; font-weight: bold; color: var(--accent);">Open Registration</label>
<p style="margin: 2px 0 0 0; font-size: 0.8em; color: #aaa;">Allow registration without invite tokens. Requires email activation.</p>
<h3 class="adm-group-title">Registration</h3>
<div class="adm-panel">
<div class="adm-row">
<div class="adm-row-text">
<label for="registration_open_toggle">Open registration</label>
<p>Allow registration without invite tokens. Requires email activation.</p>
</div>
<label class="adm-switch">
<input type="checkbox" id="registration_open_toggle" {{ registration_open ? 'checked' : '' }} onchange="saveAdminSettings()">
<span class="adm-slider"></span>
</label>
</div>
<label class="switch">
<input type="checkbox" id="registration_open_toggle" {{ registration_open ? 'checked' : '' }} onchange="saveAdminSettings()">
<span class="slider round"></span>
</label>
</div>
@endif
<div class="settings-item" style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 4px; display: flex; align-items: center; justify-content: space-between; margin-top: 10px;">
<div>
<label style="display: block; font-weight: bold; color: var(--accent);">Minimum Tags</label>
<p style="margin: 2px 0 0 0; font-size: 0.8em; color: #aaa;">Minimum number of tags required per upload.</p>
<h3 class="adm-group-title">Branding</h3>
<div class="adm-panel" id="brand-image-section">
<div class="adm-row adm-row-wrap">
<div class="adm-row-text">
<label>Navbar brand image</label>
<p>Shown in the navbar instead of the site name. gif, jpg, png, webp or svg, max 5&nbsp;MB.</p>
</div>
<div class="adm-brand">
<div id="brand-preview-wrap" class="adm-brand-preview">
@if(current_brand_image)
<img id="brand-preview" src="{{ current_brand_image }}" alt="current brand">
@else
<span id="brand-preview" class="adm-muted">No image set</span>
@endif
</div>
<label for="brand-file-input" class="adm-btn adm-btn-primary">Choose image</label>
<input type="file" id="brand-file-input" accept="image/gif,image/jpeg,image/png,image/webp,image/svg+xml" hidden onchange="uploadBrandImage(this)">
<button type="button" id="brand-remove-btn" class="adm-btn adm-btn-danger" onclick="removeBrandImage()" @if(!current_brand_image) disabled @endif>Remove</button>
</div>
</div>
<input type="number" id="min_tags_input" value="{{ min_tags }}" min="0" max="20" style="width: 60px; background: #333; border: 1px solid #444; color: #fff; padding: 5px; border-radius: 4px; text-align: center;" onchange="saveAdminSettings()">
<span id="brand-status" class="adm-status adm-status-row"></span>
</div>
<div class="settings-item" style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 4px; display: flex; align-items: center; justify-content: space-between; margin-top: 10px;">
<div>
<label style="display: block; font-weight: bold; color: var(--accent);">Trusted Upload Threshold</label>
<p style="margin: 2px 0 0 0; font-size: 0.8em; color: #aaa;">New users with fewer than this many approved uploads must still go through manual approval, even if the global toggle is off. Set to 0 to disable.</p>
<h3 class="adm-group-title">Maintenance</h3>
<div class="adm-panel">
<div class="adm-row">
<div class="adm-row-text">
<label>Tag image cache</label>
<p>Regenerate thumbnails for the /tags page. Runs in the background and may take a while.</p>
</div>
<button type="button" onclick="regenerateTagImages()" id="regen_tag_btn" class="adm-btn adm-btn-ghost">Regenerate all</button>
</div>
<input type="number" id="trusted_uploads_input" value="{{ trusted_uploads }}" min="0" max="999" style="width: 60px; background: #333; border: 1px solid #444; color: #fff; padding: 5px; border-radius: 4px; text-align: center;" onchange="saveAdminSettings()">
</div>
<div class="settings-item" style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 4px; display: flex; align-items: center; justify-content: space-between; margin-top: 10px;">
<div>
<label style="display: block; font-weight: bold; color: var(--accent);">Tag Image Cache</label>
<p style="margin: 2px 0 0 0; font-size: 0.8em; color: #aaa;">Regenerate thumbnails for the /tags page. This may take a while.</p>
</div>
<button onclick="regenerateTagImages()" id="regen_tag_btn" style="background: #007bff; border: 0; color: #fff; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 0.8em; font-weight: bold;">Regenerate All</button>
</div>
<span id="settings-status" style="display: block; margin-top: 10px; font-size: 0.8em; font-weight: bold; text-align: right;"></span>
</div>
</section>
</div>
<style>
.switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #333; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--accent); }
input:checked + .slider:before { transform: translateX(24px); background-color: #000; }
</style>
@include(snippets/adm-dashboard-style)
<script>
@@ -166,14 +260,14 @@
csrf_token: csrfToken
}).toString()
});
if (!res.ok) {
if (res.status === 403) {
throw new Error('CSRF validation failed or session expired. Please reload the page.');
}
throw new Error('Server returned ' + res.status);
}
const data = await res.json();
if (data.success) {
status.textContent = 'Saved!';
@@ -192,7 +286,7 @@
async function regenerateTagImages() {
const btn = document.getElementById('regen_tag_btn');
const status = document.getElementById('settings-status');
if (!confirm('Are you sure you want to trigger a full regeneration of all tag images? This will run in the background.')) return;
btn.disabled = true;
@@ -205,14 +299,14 @@
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const data = await res.json();
if (data.success) {
status.textContent = data.message;
status.style.color = '#28a745';
btn.textContent = 'Started!';
setTimeout(() => {
setTimeout(() => {
btn.disabled = false;
btn.textContent = 'Regenerate All';
btn.textContent = 'Regenerate all';
status.textContent = '';
}, 5000);
} else {
@@ -223,7 +317,7 @@
status.textContent = 'Error: ' + err.message;
status.style.color = '#d9534f';
btn.disabled = false;
btn.textContent = 'Regenerate All';
btn.textContent = 'Regenerate all';
}
}
@@ -263,7 +357,6 @@
preview = document.createElement('img');
preview.id = 'brand-preview';
preview.alt = 'current brand';
preview.style.cssText = 'max-height:48px;max-width:150px;object-fit:contain;';
wrap.appendChild(preview);
}
preview.src = data.url;
@@ -271,9 +364,7 @@
// Immediately update navbar brand logo
if (window.updateBrandImage) window.updateBrandImage(data.url);
// Enable remove button
removeBtn.disabled = false;
removeBtn.style.cssText = 'background:rgba(220,53,69,0.15);border:1px solid rgba(220,53,69,0.4);color:#dc3545;padding:7px 16px;border-radius:4px;cursor:pointer;font-size:0.82em;font-weight:bold;transition:background 0.2s;';
setTimeout(() => { status.textContent = ''; }, 3000);
} catch (err) {
@@ -311,14 +402,12 @@
// Reset preview
const wrap = document.getElementById('brand-preview-wrap');
wrap.innerHTML = '<span id="brand-preview" style="font-size:0.75em;color:#666;font-style:italic;">No image set</span>';
wrap.innerHTML = '<span id="brand-preview" class="adm-muted">No image set</span>';
// Immediately update navbar brand logo (revert to text)
if (window.updateBrandImage) window.updateBrandImage(null);
// Disable remove button
removeBtn.disabled = true;
removeBtn.style.cssText = 'background:rgba(220,53,69,0.05);border:1px solid rgba(220,53,69,0.15);color:#884040;padding:7px 16px;border-radius:4px;cursor:not-allowed;font-size:0.82em;font-weight:bold;';
setTimeout(() => { status.textContent = ''; }, 3000);
} catch (err) {
@@ -326,9 +415,8 @@
status.style.color = '#d9534f';
}
}
</script>
</div>
</div>
@include(snippets/footer)
@include(snippets/footer)
views/admin/about.html
+1
View File
@@ -1,6 +1,7 @@
@include(snippets/header)
<div class="pagewrapper">
<div id="main" class="admin-container">
@include(snippets/admin-back)
<div class="container">
<h2>About Page Content</h2>
<p style="color: #ccc; margin-bottom: 20px;">This text is displayed on the <strong>/about</strong> page. Supports Markdown. Leave empty to show the default static template.</p>
views/admin/bans.html
+4 -2
View File
@@ -2,6 +2,7 @@
<div class="pagewrapper">
<div id="main" class="admin-container">
@include(snippets/admin-back)
<div class="container" style="max-width: 1200px; margin: 0 auto; padding: 20px 15px;">
<div style="margin-bottom: 25px;">
<a href="/admin" style="color: var(--accent); text-decoration: none; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px;">
@@ -473,9 +474,8 @@
</div>
</div>
</div>
</div>
<!-- Modals, styles and script live inside #main: AJAX navigation only swaps #main -->
<!-- Modal: Ban Fingerprint or IP -->
<div id="ban-modal" class="modal-overlay" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 10000; align-items: center; justify-content: center;">
<div style="background: #1e1e1e; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; width: 92%; max-width: 500px; padding: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.8);">
@@ -784,5 +784,7 @@ async function unbanIp(ip) {
}
}
</script>
</div>
</div>
@include(snippets/footer)
views/admin/chat.html
+1
View File
@@ -1,6 +1,7 @@
@include(snippets/header)
<div class="pagewrapper">
<div id="main">
@include(snippets/admin-back)
<div class="container">
<h1>ADMINBEREICH</h1>
<h5>Global Chat Management</h5>
views/admin/cleanup.html
+1
View File
@@ -1,6 +1,7 @@
@include(snippets/header)
<div class="pagewrapper">
<div id="main" class="admin-container">
@include(snippets/admin-back)
<div class="container">
<h2>Cleanup Manager</h2>
<p style="color: #ccc; margin-bottom: 20px;">Delete old posts that have no engagement (no comments, no favorites, and no subscriptions) to regain disk space.</p>
views/admin/emojis.html
+1
View File
@@ -1,6 +1,7 @@
@include(snippets/header)
<div class="pagewrapper">
<div id="main" class="admin-container">
@include(snippets/admin-back)
<div class="container">
<h2>Custom Emojis &amp; Sticker Packs</h2>
views/admin/halls.html
+1
View File
@@ -1,6 +1,7 @@
@include(snippets/header)
<div class="pagewrapper">
<div id="main">
@include(snippets/admin-back)
<style>
.hm-btn {
display: inline-flex;
views/admin/koepfe.html
+1
View File
@@ -1,6 +1,7 @@
@include(snippets/header)
<div class="pagewrapper">
<div id="main" class="admin-container">
@include(snippets/admin-back)
<div class="container">
<h2>Köpfe Manager</h2>
views/admin/memes.html
+1
View File
@@ -1,6 +1,7 @@
@include(snippets/header)
<div class="pagewrapper">
<div id="main" class="admin-container">
@include(snippets/admin-back)
<div class="container">
<h2>Meme Manager</h2>
views/admin/motd.html
+1
View File
@@ -1,6 +1,7 @@
@include(snippets/header)
<div class="pagewrapper">
<div id="main" class="admin-container">
@include(snippets/admin-back)
<div class="container">
<h2>Message of the Day (MOTD)</h2>
<p style="color: #ccc; margin-bottom: 20px;">This message is displayed <strong>inside the navbar</strong> (at the bottom) so it stays visible while scrolling. Supports Markdown and HTML.</p>
views/admin/nsfp.html
+1
View File
@@ -2,6 +2,7 @@
<div class="pagewrapper">
<div id="main" class="admin-container">
@include(snippets/admin-back)
<div class="container">
<div class="admin-header-flex" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
views/admin/rules.html
+1
View File
@@ -1,6 +1,7 @@
@include(snippets/header)
<div class="pagewrapper">
<div id="main" class="admin-container">
@include(snippets/admin-back)
<div class="container">
<h2>Rules Page Content</h2>
<p style="color: #ccc; margin-bottom: 20px;">This text is displayed on the <strong>/rules</strong> page. Supports Markdown. Leave empty to show the default static rules template.</p>
views/admin/sessions.html
+1
View File
@@ -1,6 +1,7 @@
@include(snippets/header)
<div class="pagewrapper">
<div id="main">
@include(snippets/admin-back)
<div class="container session-grid">
<h2 class="session-page-title">
Sessions
views/admin/terms.html
+1
View File
@@ -1,6 +1,7 @@
@include(snippets/header)
<div class="pagewrapper">
<div id="main" class="admin-container">
@include(snippets/admin-back)
<div class="container">
<h2>Terms of Service Page Content</h2>
<p style="color: #ccc; margin-bottom: 20px;">This text is displayed on the <strong>/terms</strong> page. Supports Markdown. Leave empty to show the default static template.</p>
views/admin/tokens.html
+1
View File
@@ -1,6 +1,7 @@
@include(snippets/header)
<div class="pagewrapper">
<div id="main">
@include(snippets/admin-back)
<div class="container">
<div class="admin-header-flex">
<h2>Invite Tokens</h2>
views/admin/user_ips.html
+1
View File
@@ -2,6 +2,7 @@
<div class="pagewrapper">
<div id="main" class="admin-container">
@include(snippets/admin-back)
<div class="container">
<div style="margin-bottom: 30px;">
<a href="/admin/users" style="color: #888; text-decoration: none; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 15px;">
views/admin/users.html
+1
View File
@@ -2,6 +2,7 @@
<div class="pagewrapper">
<div id="main" class="admin-container">
@include(snippets/admin-back)
<style>
.admin-users-table {
width: 100%;
views/admin/wordfilter.html
+1
View File
@@ -8,6 +8,7 @@
</style>
<div class="pagewrapper">
<div id="main" class="admin-container">
@include(snippets/admin-back)
<div class="container">
<div class="admin-header-flex" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
<h2>Wordfilter Manager</h2>
views/chan/catalogue.html
+1 -1
View File
@@ -61,7 +61,7 @@
<span class="chan-card-badge chan-badge-closed" title="Closed"><i class="fa-solid fa-lock"></i></span>
@endif
@if(t.local_id)
<span class="chan-card-badge chan-badge-rehosted" title="OP Rehosted on f0ckm as Post #{{ t.local_id }}" style="background: rgba(16, 185, 129, 0.9); color: #fff; font-weight: 700;"><i class="fa-solid fa-check"></i> #{{ t.local_id }}</span>
<span class="chan-card-badge chan-badge-rehosted" title="OP rehosted on f0ckm as /{{ t.local_path || t.local_id }}" style="background: rgba(16, 185, 129, 0.9); color: #fff; font-weight: 700;"><i class="fa-solid fa-check"></i> /{{ t.local_path || t.local_id }}</span>
@endif
<span class="chan-card-badge chan-badge-stats">
<span title="Replies"><i class="fa-solid fa-comment"></i> {{ t.replies }}</span>
views/chan/thread.html
+95 -62
View File
@@ -67,8 +67,8 @@
<time class="chan-post-time timeago" data-iso="{{ p.iso_str }}" tooltip="{{ p.iso_str }}" title="{{ p.date_str }}">{{ p.timeago }}</time>
<a href="#p{{ p.no }}" class="chan-post-no">No. {{ p.no }}</a>
@if(p.local_id)
<a href="/{{ p.local_id }}" target="_blank" class="chan-post-rehosted-pill" title="Already rehosted on f0ckm as Post #{{ p.local_id }}">
<i class="fa-solid fa-check"></i> #{{ p.local_id }}
<a href="/{{ p.local_path || p.local_id }}" target="_blank" class="chan-post-rehosted-pill" title="Already rehosted on f0ckm as /{{ p.local_path || p.local_id }}">
<i class="fa-solid fa-check"></i> /{{ p.local_path || p.local_id }}
</a>
@endif
@if(p.sub && p.no !== tid)
@@ -92,6 +92,43 @@
@endif
</div>
<!-- File info: one row above the thumbnail -->
@if(p.has_media)
<div class="chan-file-info">
<div class="chan-filename-row">
<a href="{{ p.external_media_url }}" target="_blank" rel="noopener noreferrer" class="chan-file-download" title="Open full media in new tab">
<i class="fa-solid fa-arrow-up-right-from-square"></i>
<span class="chan-file-title">{{ p.filename || ('File ' + p.tim + p.ext) }}</span>
</a>
</div>
<div class="chan-file-meta-row">
@if(p.fsize)<span>{{ p.fsize }}</span>@endif
@if(p.w && p.h)<span>{{ p.w }}×{{ p.h }}</span>@endif
</div>
<!-- Rehost & Favorite actions -->
<div class="chan-rehost-container" id="rehost-box-{{ p.no }}">
@if(p.local_id)
<span class="chan-rehosted-wrap" style="display:inline-flex;gap:4px;align-items:center;flex:1;">
<a href="/{{ p.local_path || p.local_id }}" class="chan-rehost-btn rehosted" target="_blank">
<i class="fa-solid fa-check"></i> Rehosted /{{ p.local_path || p.local_id }}
</a>
<button type="button" class="chan-rehost-edit-btn" data-item-id="{{ p.local_id }}" title="Edit rating" style="padding:4px 7px;border-radius:0;background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.2);cursor:pointer;font-size:0.75rem;">
<i class="fa-solid fa-pen"></i>
</button>
</span>
@else
<button type="button" class="chan-rehost-btn" data-url="{{ p.external_media_url }}" data-board="{{ board }}" data-tid="{{ tid }}" data-post="{{ p.no }}" data-filename="{{ p.filename || '' }}" data-width="{{ p.w || '' }}" data-height="{{ p.h || '' }}">
<i class="fa-solid fa-cloud-arrow-up"></i> Rehost
</button>
@endif
<button type="button" class="chan-card-fav-btn {{ p.user_has_favorited ? 'favorited' : '' }}" data-post="{{ p.no }}" data-local-id="{{ p.local_id || '' }}" data-url="{{ p.external_media_url }}" data-board="{{ board }}" data-tid="{{ tid }}" data-filename="{{ p.filename || '' }}" data-width="{{ p.w || '' }}" data-height="{{ p.h || '' }}" title="{{ p.user_has_favorited ? 'Remove from favorites' : 'Favorite' }}">
<i class="fa-{{ p.user_has_favorited ? 'solid' : 'regular' }} fa-heart"></i>
</button>
</div>
</div>
@endif
<!-- Post Content (Media + Comment) -->
<div class="chan-post-content">
@if(p.has_media)
@@ -107,44 +144,11 @@
<span class="chan-video-indicator"><i class="fa-solid fa-play"></i></span>
@endif
@if(p.local_id)
<span class="chan-thumb-rehost-badge" title="Rehosted on f0ckm as Post #{{ p.local_id }}"><i class="fa-solid fa-check"></i> #{{ p.local_id }}</span>
<span class="chan-thumb-rehost-badge" title="Rehosted on f0ckm as /{{ p.local_path || p.local_id }}"><i class="fa-solid fa-check"></i> /{{ p.local_path || p.local_id }}</span>
@endif
</a>
</div>
<div class="chan-file-info">
<div class="chan-filename-row">
<a href="{{ p.external_media_url }}" target="_blank" rel="noopener noreferrer" class="chan-file-download" title="Open full media in new tab">
<i class="fa-solid fa-arrow-up-right-from-square"></i>
<span class="chan-file-title">{{ p.filename || ('File ' + p.tim + p.ext) }}</span>
</a>
</div>
<div class="chan-file-meta-row">
@if(p.fsize)<span>{{ p.fsize }}</span>@endif
@if(p.w && p.h)<span>{{ p.w }}×{{ p.h }}</span>@endif
</div>
<!-- Rehost & Favorite actions -->
<div class="chan-rehost-container" id="rehost-box-{{ p.no }}">
@if(p.local_id)
<span class="chan-rehosted-wrap" style="display:inline-flex;gap:4px;align-items:center;flex:1;">
<a href="/{{ p.local_id }}" class="chan-rehost-btn rehosted" target="_blank">
<i class="fa-solid fa-check"></i> Rehosted #{{ p.local_id }}
</a>
<button type="button" class="chan-rehost-edit-btn" data-item-id="{{ p.local_id }}" title="Edit rating" style="padding:4px 7px;border-radius:4px;background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.2);cursor:pointer;font-size:0.75rem;">
<i class="fa-solid fa-pen"></i>
</button>
</span>
@else
<button type="button" class="chan-rehost-btn" data-url="{{ p.external_media_url }}" data-board="{{ board }}" data-tid="{{ tid }}" data-post="{{ p.no }}" data-filename="{{ p.filename || '' }}" data-width="{{ p.w || '' }}" data-height="{{ p.h || '' }}">
<i class="fa-solid fa-cloud-arrow-up"></i> Rehost
</button>
@endif
<button type="button" class="chan-card-fav-btn {{ p.user_has_favorited ? 'favorited' : '' }}" data-post="{{ p.no }}" data-local-id="{{ p.local_id || '' }}" data-url="{{ p.external_media_url }}" data-board="{{ board }}" data-tid="{{ tid }}" data-filename="{{ p.filename || '' }}" data-width="{{ p.w || '' }}" data-height="{{ p.h || '' }}" title="{{ p.user_has_favorited ? 'Remove from favorites' : 'Favorite' }}">
<i class="fa-{{ p.user_has_favorited ? 'solid' : 'regular' }} fa-heart"></i>
</button>
</div>
</div>
</div>
@endif
@@ -176,7 +180,7 @@
margin-bottom: 25px;
background: var(--bg-card, rgba(25, 25, 25, 0.85));
border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
border-radius: 12px;
border-radius: 0;
padding: 16px 20px;
backdrop-filter: blur(8px);
}
@@ -192,7 +196,7 @@
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 8px;
border-radius: 0;
background: rgba(255, 255, 255, 0.06);
color: var(--text-main, #fff);
border: 1px solid rgba(255, 255, 255, 0.1);
@@ -216,7 +220,7 @@
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 8px;
border-radius: 0;
font-size: 0.85rem;
font-weight: 600;
background: rgba(255, 255, 255, 0.06);
@@ -272,7 +276,7 @@
display: inline-flex;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
border-radius: 0;
padding: 3px;
gap: 3px;
}
@@ -280,7 +284,7 @@
background: none;
border: none;
padding: 5px 12px;
border-radius: 6px;
border-radius: 0;
font-size: 0.82rem;
font-weight: 600;
color: #aaa;
@@ -301,7 +305,7 @@
.chan-post-card {
background: var(--bg-card, rgba(25, 25, 25, 0.85));
border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
border-radius: 10px;
border-radius: 0;
padding: 14px 18px;
transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
scroll-margin-top: 80px;
@@ -388,7 +392,7 @@ body.onara-modal-closing .chan-thumb-link.onara-active .chan-thumb-img {
align-items: center;
gap: 4px;
padding: 2px 7px;
border-radius: 4px;
border-radius: 0;
background: rgba(74, 222, 128, 0.2);
color: #4ade80;
border: 1px solid rgba(74, 222, 128, 0.4);
@@ -411,7 +415,7 @@ body.onara-modal-closing .chan-thumb-link.onara-active .chan-thumb-img {
font-size: 0.68rem;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
border-radius: 0;
backdrop-filter: blur(4px);
display: inline-flex;
align-items: center;
@@ -506,7 +510,7 @@ body.onara-modal-closing .chan-thumb-link.onara-active .chan-thumb-img {
width: 100%;
aspect-ratio: 16 / 10;
background: #0d0d0d;
border-radius: 8px;
border-radius: 0;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
}
@@ -549,7 +553,7 @@ body.onara-modal-closing .chan-thumb-link.onara-active .chan-thumb-img {
right: 6px;
width: 24px;
height: 24px;
border-radius: 50%;
border-radius: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
color: #fff;
@@ -566,9 +570,29 @@ body.onara-modal-closing .chan-thumb-link.onara-active .chan-thumb-img {
/* File Info (filename, dimensions, size) */
.chan-file-info {
display: flex;
flex-direction: column;
gap: 4px;
flex-direction: row;
align-items: center;
gap: 10px;
width: 100%;
min-width: 0;
margin-bottom: 8px;
}
.chan-file-info .chan-filename-row {
flex: 0 1 auto;
min-width: 0;
}
.chan-file-info .chan-file-meta-row {
flex-shrink: 0;
white-space: nowrap;
}
.chan-file-info .chan-rehost-container {
flex-shrink: 0;
margin-left: auto;
width: auto;
}
.chan-file-info .chan-rehost-btn {
width: auto;
flex: 0 0 auto;
}
.chan-filename-row {
display: flex;
@@ -617,7 +641,7 @@ body.onara-modal-closing .chan-thumb-link.onara-active .chan-thumb-img {
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 6px;
border-radius: 0;
font-size: 0.78rem;
font-weight: 600;
background: rgba(74, 222, 128, 0.15);
@@ -671,7 +695,7 @@ body.onara-modal-closing .chan-thumb-link.onara-active .chan-thumb-img {
width: 28px;
min-width: 28px;
padding: 0;
border-radius: 6px;
border-radius: 0;
font-size: 0.85rem;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
@@ -715,7 +739,7 @@ body.onara-modal-closing .chan-thumb-link.onara-active .chan-thumb-img {
gap: 4px 6px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 6px;
border-radius: 0;
padding: 2px 7px;
font-size: 0.78rem;
max-width: 100%;
@@ -743,7 +767,7 @@ body.onara-modal-closing .chan-thumb-link.onara-active .chan-thumb-img {
font-size: 0.78rem;
cursor: pointer;
padding: 1px 5px;
border-radius: 4px;
border-radius: 0;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.2);
transition: all 0.15s ease;
@@ -773,7 +797,7 @@ body.onara-modal-closing .chan-thumb-link.onara-active .chan-thumb-img {
background: #333;
color: #333;
padding: 0 3px;
border-radius: 2px;
border-radius: 0;
text-decoration: none;
cursor: pointer;
transition: color 0.15s;
@@ -793,7 +817,7 @@ body.onara-modal-closing .chan-thumb-link.onara-active .chan-thumb-img {
overflow-y: auto;
background: rgba(22, 22, 24, 0.98);
border: 1px solid #4ade80;
border-radius: 10px;
border-radius: 0;
padding: 12px 16px;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), 0 0 20px rgba(74, 222, 128, 0.2);
pointer-events: none;
@@ -823,6 +847,14 @@ body.onara-modal-closing .chan-thumb-link.onara-active .chan-thumb-img {
.chan-quote-preview-popup .chan-post-backlinks {
display: none !important;
}
/* Style guide: no rounded corners anywhere in the thread (covers site CSS, inline and JS-inserted elements) */
.chan-thread-page,
.chan-thread-page *,
.chan-thread-page *::before,
.chan-thread-page *::after {
border-radius: 0 !important;
}
</style>
<script>
@@ -899,9 +931,9 @@ body.onara-modal-closing .chan-thumb-link.onara-active .chan-thumb-img {
btn.classList.remove('loading');
btn.classList.add('rehosted');
btn.outerHTML = '<span class="chan-rehosted-wrap" style="display:inline-flex;gap:4px;align-items:center;">' +
'<a href="/' + data.item_id + '" class="chan-rehost-btn rehosted" target="_blank">' +
'<i class="fa-solid fa-check"></i> Rehosted #' + data.item_id + '</a>' +
'<button type="button" class="chan-rehost-edit-btn" data-item-id="' + data.item_id + '" title="Edit rating" style="padding:4px 7px;border-radius:4px;background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.2);cursor:pointer;font-size:0.75rem;">' +
'<a href="/' + (data.item_path || data.item_id) + '" class="chan-rehost-btn rehosted" target="_blank">' +
'<i class="fa-solid fa-check"></i> Rehosted /' + (data.item_path || data.item_id) + '</a>' +
'<button type="button" class="chan-rehost-edit-btn" data-item-id="' + data.item_id + '" title="Edit rating" style="padding:4px 7px;border-radius:0;background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.2);cursor:pointer;font-size:0.75rem;">' +
'<i class="fa-solid fa-pen"></i></button></span>';
const postCard = document.getElementById('p' + postNo) || btn.closest('.chan-post-card');
@@ -1003,6 +1035,7 @@ body.onara-modal-closing .chan-thumb-link.onara-active .chan-thumb-img {
const rehostData = await rehostResp.json();
if (rehostData.success && rehostData.item_id) {
localId = rehostData.item_id;
const localPath = rehostData.item_path || localId;
favBtn.dataset.localId = localId;
// Update rehost box
@@ -1011,9 +1044,9 @@ body.onara-modal-closing .chan-thumb-link.onara-active .chan-thumb-img {
const rehostBtn = rehostBox.querySelector('.chan-rehost-btn');
if (rehostBtn) {
rehostBtn.outerHTML = '<span class="chan-rehosted-wrap" style="display:inline-flex;gap:4px;align-items:center;flex:1;">' +
'<a href="/' + localId + '" class="chan-rehost-btn rehosted" target="_blank">' +
'<i class="fa-solid fa-check"></i> Rehosted #' + localId + '</a>' +
'<button type="button" class="chan-rehost-edit-btn" data-item-id="' + localId + '" title="Edit rating" style="padding:4px 7px;border-radius:4px;background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.2);cursor:pointer;font-size:0.75rem;">' +
'<a href="/' + localPath + '" class="chan-rehost-btn rehosted" target="_blank">' +
'<i class="fa-solid fa-check"></i> Rehosted /' + localPath + '</a>' +
'<button type="button" class="chan-rehost-edit-btn" data-item-id="' + localId + '" title="Edit rating" style="padding:4px 7px;border-radius:0;background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.2);cursor:pointer;font-size:0.75rem;">' +
'<i class="fa-solid fa-pen"></i></button></span>';
}
}
@@ -1024,8 +1057,8 @@ body.onara-modal-closing .chan-thumb-link.onara-active .chan-thumb-img {
if (thumbLink && !thumbLink.querySelector('.chan-thumb-rehost-badge')) {
const badge = document.createElement('span');
badge.className = 'chan-thumb-rehost-badge';
badge.title = 'Rehosted on f0ckm as Post #' + localId;
badge.innerHTML = '<i class="fa-solid fa-check"></i> #' + localId;
badge.title = 'Rehosted on f0ckm as /' + localPath;
badge.innerHTML = '<i class="fa-solid fa-check"></i> /' + localPath;
thumbLink.appendChild(badge);
}
const timeEl = postCard.querySelector('.chan-post-time, .timeago');
views/item-partial-legacy.html
+46 -54
View File
@@ -6,7 +6,7 @@
<div class="item-main-content">
<div class="_204863">
<div class="location">@if(item.is_chan)<a href="/4/{{ item.external_board }}/catalogue" class="location-link" title="Board /{{ item.external_board }}/ catalogue">/4</a><a href="/4/{{ item.external_board }}/catalogue" class="location-link" title="Board /{{ item.external_board }}/ catalogue">/{{ item.external_board }}</a><a href="/4/{{ item.external_board }}/{{ item.external_tid }}" class="location-link" title="Thread #{{ item.external_tid }} overview">/{{ item.external_tid }}</a><a href="/4/{{ item.external_board }}/{{ item.external_tid }}/{{ item.external_id }}" class="location-link" data-inherit-context="false" title="Post #{{ item.external_id }}">/{{ item.external_id }}</a>@if(item.local_id)<span class="location-sep" style="opacity: 0.6; margin: 0 4px;">→</span><a href="/{{ item.local_id }}" class="location-link is-rehosted" title="View rehosted post #{{ item.local_id }} on f0ckm" style="color: #4ade80; font-weight: 700;"><i class="fa-solid fa-check"></i> #{{ item.local_id }}</a>@endif@elseif(tmp && tmp.tag)<a href="/tags" class="location-link" title="All tags">/tag</a><a href="/tag/{{ encodeURIComponent(tmp.tag) }}{{ link.suffix || '' }}" class="location-link" title="Tag: {{ tmp.tag }}">/{{ tmp.tag }}</a><a href="/tag/{{ encodeURIComponent(tmp.tag) }}/{{ (enable_item_slugs && item.slug) ? item.slug : item.id }}{{ link.suffix || '' }}{{ item.requested_subf0ck_slug ? ('#' + item.requested_subf0ck_slug) : '' }}" class="location-link" title="Post #{{ item.id }}">/{{ (enable_item_slugs && item.slug) ? item.slug : item.id }}{{ item.requested_subf0ck_slug ? ('#' + item.requested_subf0ck_slug) : '' }}</a>@else{{ link.mainDisplay || link.main }}{{ (enable_item_slugs && item.slug) ? item.slug : item.id }}{{ link.suffix }}{{ item.requested_subf0ck_slug ? ('#' + item.requested_subf0ck_slug) : '' }}@endif</div>
<div class="location">@if(item.is_chan)<a href="/4/{{ item.external_board }}/catalogue" class="location-link" title="Board /{{ item.external_board }}/ catalogue">/4</a><a href="/4/{{ item.external_board }}/catalogue" class="location-link" title="Board /{{ item.external_board }}/ catalogue">/{{ item.external_board }}</a><a href="/4/{{ item.external_board }}/{{ item.external_tid }}" class="location-link" title="Thread #{{ item.external_tid }} overview">/{{ item.external_tid }}</a><a href="/4/{{ item.external_board }}/{{ item.external_tid }}/{{ item.external_id }}" class="location-link" data-inherit-context="false" title="Post #{{ item.external_id }}">/{{ item.external_id }}</a>@if(item.local_id)<span class="location-sep" style="opacity: 0.6; margin: 0 4px;">→</span><a href="/{{ item.local_path || item.local_id }}" class="location-link is-rehosted" title="View rehosted post /{{ item.local_path || item.local_id }} on f0ckm" style="color: #4ade80; font-weight: 700;"><i class="fa-solid fa-check"></i> /{{ item.local_path || item.local_id }}</a>@endif@elseif(tmp && tmp.tag)<a href="/tags" class="location-link" title="All tags">/tag</a><a href="/tag/{{ encodeURIComponent(tmp.tag) }}{{ link.suffix || '' }}" class="location-link" title="Tag: {{ tmp.tag }}">/{{ tmp.tag }}</a><a href="/tag/{{ encodeURIComponent(tmp.tag) }}/{{ (enable_item_slugs && item.slug) ? item.slug : item.id }}{{ link.suffix || '' }}{{ item.requested_subf0ck_slug ? ('#' + item.requested_subf0ck_slug) : '' }}" class="location-link" title="Post #{{ item.id }}">/{{ (enable_item_slugs && item.slug) ? item.slug : item.id }}{{ item.requested_subf0ck_slug ? ('#' + item.requested_subf0ck_slug) : '' }}</a>@else{{ link.mainDisplay || link.main }}{{ (enable_item_slugs && item.slug) ? item.slug : item.id }}{{ link.suffix }}{{ item.requested_subf0ck_slug ? ('#' + item.requested_subf0ck_slug) : '' }}@endif</div>
<div class="gapLeft"></div>
</div>
@if(enable_item_title)
@@ -129,7 +129,7 @@
@if(item.is_chan)
@if(item.local_id)
<span class="chan-rehosted-wrap" style="display:inline-flex;gap:4px;align-items:center;">
<a href="/{{ item.local_id }}" class="chan-rehost-action-btn rehosted" title="Already rehosted on f0ckm (Post #{{ item.local_id }})" style="display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:4px 12px;border-radius:6px;font-size:0.8rem;background:rgba(74,222,128,0.2);color:#4ade80;border:1px solid rgba(74,222,128,0.4);text-decoration:none;font-weight:600;white-space:nowrap;flex-shrink:0;"><i class="fa-solid fa-check"></i> #{{ item.local_id }}</a>
<a href="/{{ item.local_path || item.local_id }}" class="chan-rehost-action-btn rehosted" title="Already rehosted on f0ckm (/{{ item.local_path || item.local_id }})" style="display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:4px 12px;border-radius:6px;font-size:0.8rem;background:rgba(74,222,128,0.2);color:#4ade80;border:1px solid rgba(74,222,128,0.4);text-decoration:none;font-weight:600;white-space:nowrap;flex-shrink:0;"><i class="fa-solid fa-check"></i> /{{ item.local_path || item.local_id }}</a>
<button type="button" class="chan-rehost-edit-btn" data-item-id="{{ item.local_id }}" title="Edit rating" style="display:inline-flex;align-items:center;padding:3px 7px;border-radius:6px;font-size:0.8rem;background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.2);cursor:pointer;"><i class="fa-solid fa-pen"></i></button>
</span>
@else
@@ -190,7 +190,7 @@
@if(!user_alternative_infobox && item.is_chan) — <span class="badge badge-dark chan-post-badge" style="background: rgba(74, 222, 128, 0.15); border: 1px solid rgba(74, 222, 128, 0.3); display: inline-flex; align-items: center; gap: 6px;">
<a href="/4/{{ item.external_board }}/{{ item.external_tid }}" style="color: #4ade80; text-decoration: none; font-weight: 600;" title="View thread overview"><i class="fa-solid fa-clover"></i> /{{ item.external_board }}/{{ item.external_tid }}</a>
@if(item.local_id)
<a href="/{{ item.local_id }}" class="chan-rehost-action-btn rehosted" title="Already rehosted on f0ckm (Post #{{ item.local_id }})" style="display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:3px 10px;border-radius:4px;font-size:0.75rem;background:rgba(74,222,128,0.2);color:#4ade80;border:1px solid rgba(74,222,128,0.4);text-decoration:none;font-weight:600;white-space:nowrap;flex-shrink:0;"><i class="fa-solid fa-check"></i> #{{ item.local_id }}</a>
<a href="/{{ item.local_path || item.local_id }}" class="chan-rehost-action-btn rehosted" title="Already rehosted on f0ckm (/{{ item.local_path || item.local_id }})" style="display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:3px 10px;border-radius:4px;font-size:0.75rem;background:rgba(74,222,128,0.2);color:#4ade80;border:1px solid rgba(74,222,128,0.4);text-decoration:none;font-weight:600;white-space:nowrap;flex-shrink:0;"><i class="fa-solid fa-check"></i> /{{ item.local_path || item.local_id }}</a>
@else
<button type="button" class="chan-rehost-action-btn" id="chan-item-rehost-btn" data-url="{{ item.external_media_url }}" data-board="{{ item.external_board }}" data-tid="{{ item.external_tid }}" data-post="{{ item.external_id }}" data-filename="{{ item.original_filename || '' }}" data-width="{{ item.width || '' }}" data-height="{{ item.height || '' }}" title="Rehost to f0ckm" style="display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:3px 12px;min-width:88px;box-sizing:border-box;white-space:nowrap;flex-shrink:0;border-radius:4px;font-size:0.75rem;background:rgba(74,222,128,0.15);color:#4ade80;border:1px solid rgba(74,222,128,0.3);cursor:pointer;font-weight:600;"><i class="fa-solid fa-cloud-arrow-up"></i> Rehost</button>
@endif
@@ -201,17 +201,56 @@
</span>@endif</span>
<span class="badge badge-dark" id="tags" data-item-id="{{ item.local_id || item.id }}" data-can-manage="{{ can_manage_item ? 'true' : 'false' }}">
{{-- Action buttons when the alternative user infobox is off (the infobox renders its own set) --}}
@if(!user_alternative_infobox)
<div class="gapRight blahlol-actions" style="display:flex;width:100%;justify-content:center;margin:4px 0;">
@if(session)
@if(user_has_favorited)
<i class="iconset fa-solid fa-heart" id="a_favo" data-item-id="{{ item.local_id || item.id }}" @if(item.is_chan) data-is-chan="true" data-local-id="{{ item.local_id || '' }}" data-chan-url="{{ item.external_media_url }}" data-chan-board="{{ item.external_board }}" data-chan-tid="{{ item.external_tid }}" data-chan-post="{{ item.external_id }}" data-filename="{{ item.original_filename || '' }}" data-width="{{ item.width || '' }}" data-height="{{ item.height || '' }}" @endif title="Favorite"></i>
@else
<i class="iconset fa-regular fa-heart" id="a_favo" data-item-id="{{ item.local_id || item.id }}" @if(item.is_chan) data-is-chan="true" data-local-id="{{ item.local_id || '' }}" data-chan-url="{{ item.external_media_url }}" data-chan-board="{{ item.external_board }}" data-chan-tid="{{ item.external_tid }}" data-chan-post="{{ item.external_id }}" data-filename="{{ item.original_filename || '' }}" data-width="{{ item.width || '' }}" data-height="{{ item.height || '' }}" @endif title="Favorite"></i>
@endif
<i class="iconset fa-solid fa-circle-info" id="a_info" data-item-id="{{ item.id }}" title="{{ t('info_modal.button_title') || 'Post & File Info' }}"></i>
@if(enable_comments)
<i class="iconset {{ isSubscribed ? 'fa-solid' : 'fa-regular' }} fa-bell" id="subscribe-btn" data-item-id="{{ item.id }}" title="{{ isSubscribed ? 'Subscribed' : 'Subscribe' }}"></i>
@endif
<i class="iconset fa-solid fa-triangle-exclamation report-item-btn" data-item-id="{{ item.id }}" title="Report this post"></i>
@if(halls_enabled)
<i class="iconset fa-solid fa-layer-group" id="a_hall" data-item-id="{{ item.id }}" data-halls="{{ halls_slugs }}" data-user-halls="{{ user_halls_slugs }}" data-current-hall="{{ (tmp.hall && typeof tmp.hall === 'object') ? tmp.hall.slug : (tmp.hall || '') }}" data-current-user-hall="{{ (tmp.userHall && typeof tmp.userHall === 'object') ? tmp.userHall.slug : (tmp.userHall || '') }}" data-current-user-hall-owner="{{ tmp.userHallOwner || '' }}" title="Add to Hall"></i>
@endif
@if(can_manage_item)
@if(enable_oc)
<i class="iconset {{ item.is_oc ? 'fa-solid' : 'fa-regular' }} fa-star" id="a_oc" data-item-id="{{ item.id }}" data-is-oc="{{ item.is_oc }}" title="{{ item.is_oc ? 'Remove OC status' : 'Mark as OC' }}"></i>
@endif
@if(typeof can_extract_meta !== 'undefined' && can_extract_meta)
<i class="iconset fa-solid fa-magic" id="a_metadata" data-item-id="{{ item.id }}" @if(item.mime === 'video/youtube') data-src="https://www.youtube.com/watch?v={{ item.dest.replace('yt:', '') }}" @endif title="Extract Metadata"></i>
@endif
@if(item.mime === 'application/x-shockwave-flash' || item.mime === 'application/vnd.adobe.flash.movie')
<i class="iconset fa-solid fa-image" id="a_rethumb" data-item-id="{{ item.id }}" title="Re-upload Thumbnail"></i>
@endif
@endif
@if(is_mod_or_admin)
<i class="iconset fa-solid fa-thumbtack{{ item.is_pinned ? ' active' : '' }}" id="a_pin" data-pinned="{{ item.is_pinned }}" title="{{ item.is_pinned ? 'Unpin from main' : 'Pin to main' }}"></i>
<i class="iconset fa-solid fa-ban{{ item.visibility === 3 ? ' active' : '' }}" id="a_unavailable" data-item-id="{{ item.id }}" data-visibility="{{ item.visibility || 0 }}" title="{{ item.visibility === 3 ? 'Make Available (Public)' : 'Make Unavailable (451)' }}" @if(item.visibility === 3) style="color: var(--danger, #ff4444);" @endif></i>
<i class="iconset fa-solid fa-xmark" id="a_delete" title="Delete"></i>
@endif
@else
<i class="iconset fa-solid fa-circle-info" id="a_info" data-item-id="{{ item.id }}" title="{{ t('info_modal.button_title') || 'Post & File Info' }}"></i>
<i class="iconset fa-solid fa-triangle-exclamation report-item-btn" data-item-id="{{ item.id }}" title="Report this post"></i>
@endif
</div>
@endif
<span class="badge badge-dark" id="tags" data-item-id="{{ item.local_id || item.id }}" data-can-manage="{{ can_manage_item ? 'true' : 'false' }}" data-can-rate="{{ can_rate_item ? 'true' : 'false' }}">
<span class="tags-inner">
@if(!item.is_sfw && !item.is_nsfw && !item.is_nsfl)
<span class="badge badge-untagged rating-tag is-untagged @if(can_manage_item) can-cycle @endif" data-item-id="{{ item.local_id || item.id }}" data-rating="untagged">
<span class="badge badge-untagged rating-tag is-untagged @if(can_rate_item) can-cycle @endif" data-item-id="{{ item.local_id || item.id }}" data-rating="untagged">
<span class="rating-label">?</span>
</span>
@endif
@if(typeof item.tags !== "undefined")
@each(item.tags as tag)
@if(tag.normalized === 'sfw' || tag.normalized === 'nsfw' || tag.normalized === 'nsfl')
<span class="badge {{ tag.badge }} rating-tag is-{{ tag.normalized }} @if(can_manage_item) can-cycle @endif" data-item-id="{{ item.local_id || item.id }}" data-rating="{{ tag.normalized }}">
<span class="badge {{ tag.badge }} rating-tag is-{{ tag.normalized }} @if(can_rate_item) can-cycle @endif" data-item-id="{{ item.local_id || item.id }}" data-rating="{{ tag.normalized }}">
<span class="rating-label">{!! tag.tag !!}</span>
</span>
@else
@@ -285,51 +324,4 @@
@include(snippets/info-modal)
<div id="visibility-modal" class="modal-overlay" style="display: none;">
<div class="modal-content" style="max-width: 420px;">
<div class="modal-header" style="margin-bottom: 15px; border-bottom: 1px solid var(--border-color, #333); padding-bottom: 10px;">
<h3 style="margin: 0; font-size: 1.1em; color: var(--text-color, #fff);"><i class="fa-solid fa-eye"></i> Change Visibility</h3>
</div>
<div class="modal-body" style="padding: 10px 0; text-align: left;">
<form id="visibility-form" onsubmit="return false;">
<input type="hidden" id="visibility-item-id" value="{{ item.id }}" />
<div class="visibility-options" style="display: flex; flex-direction: column; gap: 10px;">
<label class="visibility-option" style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--nav-border-color, #444); border-radius: 6px; cursor: pointer; background: var(--bg-secondary, rgba(255,255,255,0.03));">
<input type="radio" name="visibility" value="0" style="margin-top: 3px;" />
<div>
<strong style="display: block; color: var(--text-color, #fff);"><i class="fa-solid fa-globe"></i> Public</strong>
<span style="font-size: 0.85em; color: var(--text-muted, #aaa);">Visible to everyone in main feeds, search, and rankings.</span>
</div>
</label>
<label class="visibility-option" style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--nav-border-color, #444); border-radius: 6px; cursor: pointer; background: var(--bg-secondary, rgba(255,255,255,0.03));">
<input type="radio" name="visibility" value="1" style="margin-top: 3px;" />
<div>
<strong style="display: block; color: var(--text-color, #fff);"><i class="fa-solid fa-link"></i> Unlisted</strong>
<span style="font-size: 0.85em; color: var(--text-muted, #aaa);">Hidden from main feeds; accessible only via direct link or slug.</span>
</div>
</label>
<label class="visibility-option" style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--nav-border-color, #444); border-radius: 6px; cursor: pointer; background: var(--bg-secondary, rgba(255,255,255,0.03));">
<input type="radio" name="visibility" value="2" style="margin-top: 3px;" />
<div>
<strong style="display: block; color: var(--text-color, #fff);"><i class="fa-solid fa-lock"></i> Private</strong>
<span style="font-size: 0.85em; color: var(--text-muted, #aaa);">Only visible to you and site moderators.</span>
</div>
</label>
@if(is_mod_or_admin)
<label class="visibility-option" style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--nav-border-color, #444); border-radius: 6px; cursor: pointer; background: var(--bg-secondary, rgba(255,255,255,0.03));">
<input type="radio" name="visibility" value="3" style="margin-top: 3px;" />
<div>
<strong style="display: block; color: var(--text-color, #fff);"><i class="fa-solid fa-ban" style="color: var(--danger, #ff4444);"></i> Unavailable (451)</strong>
<span style="font-size: 0.85em; color: var(--text-muted, #aaa);">Only visible to administrators. Serves HTTP 451 on direct media for all other users.</span>
</div>
</label>
@endif
</div>
</form>
</div>
<div class="modal-actions" style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px;">
<button class="btn-secondary" id="visibility-modal-cancel">Cancel</button>
<button class="btn-primary" id="visibility-modal-save">Save Visibility</button>
</div>
</div>
</div>
@include(snippets/visibility-modal)
views/item-partial-modern.html
+6 -53
View File
@@ -40,16 +40,16 @@
@endif
<div class="sidebar-tags-container">
<span class="badge badge-dark" id="tags" data-item-id="{{ item.local_id || item.id }}" data-can-manage="{{ can_manage_item ? 'true' : 'false' }}" style="display: flex; flex-wrap: wrap; gap: 5px; background: transparent; padding: 0; text-align: left; white-space: normal;">
<span class="badge badge-dark" id="tags" data-item-id="{{ item.local_id || item.id }}" data-can-manage="{{ can_manage_item ? 'true' : 'false' }}" data-can-rate="{{ can_rate_item ? 'true' : 'false' }}" style="display: flex; flex-wrap: wrap; gap: 5px; background: transparent; padding: 0; text-align: left; white-space: normal;">
@if(!item.is_sfw && !item.is_nsfw && !item.is_nsfl)
<span class="badge badge-untagged rating-tag is-untagged @if(can_manage_item) can-cycle @endif" data-item-id="{{ item.local_id || item.id }}" data-rating="untagged">
<span class="badge badge-untagged rating-tag is-untagged @if(can_rate_item) can-cycle @endif" data-item-id="{{ item.local_id || item.id }}" data-rating="untagged">
<span class="rating-label">?</span>
</span>
@endif
@if(typeof item.tags !== "undefined")
@each(item.tags as tag)
@if(tag.normalized === 'sfw' || tag.normalized === 'nsfw' || tag.normalized === 'nsfl')
<span class="badge {{ tag.badge }} rating-tag is-{{ tag.normalized }} @if(can_manage_item) can-cycle @endif" data-item-id="{{ item.local_id || item.id }}" data-rating="{{ tag.normalized }}">
<span class="badge {{ tag.badge }} rating-tag is-{{ tag.normalized }} @if(can_rate_item) can-cycle @endif" data-item-id="{{ item.local_id || item.id }}" data-rating="{{ tag.normalized }}">
<span class="rating-label">{!! tag.tag !!}</span>
</span>
@else
@@ -70,7 +70,7 @@
<div class="item-main-content">
<div class="_204863">
<div class="location">@if(item.is_chan)<a href="/4/{{ item.external_board }}/catalogue" class="location-link" title="Board /{{ item.external_board }}/ catalogue">/4</a><a href="/4/{{ item.external_board }}/catalogue" class="location-link" title="Board /{{ item.external_board }}/ catalogue">/{{ item.external_board }}</a><a href="/4/{{ item.external_board }}/{{ item.external_tid }}" class="location-link" title="Thread #{{ item.external_tid }} overview">/{{ item.external_tid }}</a><a href="/4/{{ item.external_board }}/{{ item.external_tid }}/{{ item.external_id }}" class="location-link" data-inherit-context="false" title="Post #{{ item.external_id }}">/{{ item.external_id }}</a>@if(item.local_id)<span class="location-sep" style="opacity: 0.6; margin: 0 4px;">→</span><a href="/{{ item.local_id }}" class="location-link is-rehosted" title="View rehosted post #{{ item.local_id }} on f0ckm" style="color: #4ade80; font-weight: 700;"><i class="fa-solid fa-check"></i> #{{ item.local_id }}</a>@endif@elseif(tmp && tmp.tag)<a href="/tags" class="location-link" title="All tags">/tag</a><a href="/tag/{{ encodeURIComponent(tmp.tag) }}{{ link.suffix || '' }}" class="location-link" title="Tag: {{ tmp.tag }}">/{{ tmp.tag }}</a><a href="/tag/{{ encodeURIComponent(tmp.tag) }}/{{ (enable_item_slugs && item.slug) ? item.slug : item.id }}{{ link.suffix || '' }}{{ item.requested_subf0ck_slug ? ('#' + item.requested_subf0ck_slug) : '' }}" class="location-link" title="Post #{{ item.id }}">/{{ (enable_item_slugs && item.slug) ? item.slug : item.id }}{{ item.requested_subf0ck_slug ? ('#' + item.requested_subf0ck_slug) : '' }}</a>@else{{ link.mainDisplay || link.main }}{{ (enable_item_slugs && item.slug) ? item.slug : item.id }}{{ link.suffix }}{{ item.requested_subf0ck_slug ? ('#' + item.requested_subf0ck_slug) : '' }}@endif</div>
<div class="location">@if(item.is_chan)<a href="/4/{{ item.external_board }}/catalogue" class="location-link" title="Board /{{ item.external_board }}/ catalogue">/4</a><a href="/4/{{ item.external_board }}/catalogue" class="location-link" title="Board /{{ item.external_board }}/ catalogue">/{{ item.external_board }}</a><a href="/4/{{ item.external_board }}/{{ item.external_tid }}" class="location-link" title="Thread #{{ item.external_tid }} overview">/{{ item.external_tid }}</a><a href="/4/{{ item.external_board }}/{{ item.external_tid }}/{{ item.external_id }}" class="location-link" data-inherit-context="false" title="Post #{{ item.external_id }}">/{{ item.external_id }}</a>@if(item.local_id)<span class="location-sep" style="opacity: 0.6; margin: 0 4px;">→</span><a href="/{{ item.local_path || item.local_id }}" class="location-link is-rehosted" title="View rehosted post /{{ item.local_path || item.local_id }} on f0ckm" style="color: #4ade80; font-weight: 700;"><i class="fa-solid fa-check"></i> /{{ item.local_path || item.local_id }}</a>@endif@elseif(tmp && tmp.tag)<a href="/tags" class="location-link" title="All tags">/tag</a><a href="/tag/{{ encodeURIComponent(tmp.tag) }}{{ link.suffix || '' }}" class="location-link" title="Tag: {{ tmp.tag }}">/{{ tmp.tag }}</a><a href="/tag/{{ encodeURIComponent(tmp.tag) }}/{{ (enable_item_slugs && item.slug) ? item.slug : item.id }}{{ link.suffix || '' }}{{ item.requested_subf0ck_slug ? ('#' + item.requested_subf0ck_slug) : '' }}" class="location-link" title="Post #{{ item.id }}">/{{ (enable_item_slugs && item.slug) ? item.slug : item.id }}{{ item.requested_subf0ck_slug ? ('#' + item.requested_subf0ck_slug) : '' }}</a>@else{{ link.mainDisplay || link.main }}{{ (enable_item_slugs && item.slug) ? item.slug : item.id }}{{ link.suffix }}{{ item.requested_subf0ck_slug ? ('#' + item.requested_subf0ck_slug) : '' }}@endif</div>
<div class="gapLeft"></div>
</div>
@if(enable_item_title)
@@ -161,7 +161,7 @@
@if(item.is_chan)
@if(item.local_id)
<span class="chan-rehosted-wrap" style="display:inline-flex;gap:4px;align-items:center;">
<a href="/{{ item.local_id }}" class="chan-rehost-action-btn rehosted" title="Already rehosted on f0ckm (Post #{{ item.local_id }})" style="display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:4px 12px;border-radius:6px;font-size:0.8rem;background:rgba(74,222,128,0.2);color:#4ade80;border:1px solid rgba(74,222,128,0.4);text-decoration:none;font-weight:600;white-space:nowrap;flex-shrink:0;"><i class="fa-solid fa-check"></i> #{{ item.local_id }}</a>
<a href="/{{ item.local_path || item.local_id }}" class="chan-rehost-action-btn rehosted" title="Already rehosted on f0ckm (/{{ item.local_path || item.local_id }})" style="display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:4px 12px;border-radius:6px;font-size:0.8rem;background:rgba(74,222,128,0.2);color:#4ade80;border:1px solid rgba(74,222,128,0.4);text-decoration:none;font-weight:600;white-space:nowrap;flex-shrink:0;"><i class="fa-solid fa-check"></i> /{{ item.local_path || item.local_id }}</a>
<button type="button" class="chan-rehost-edit-btn" data-item-id="{{ item.local_id }}" title="Edit rating" style="display:inline-flex;align-items:center;padding:3px 7px;border-radius:6px;font-size:0.8rem;background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.2);cursor:pointer;"><i class="fa-solid fa-pen"></i></button>
</span>
@else
@@ -233,51 +233,4 @@
@include(snippets/info-modal)
<div id="visibility-modal" class="modal-overlay" style="display: none;">
<div class="modal-content" style="max-width: 420px;">
<div class="modal-header" style="margin-bottom: 15px; border-bottom: 1px solid var(--border-color, #333); padding-bottom: 10px;">
<h3 style="margin: 0; font-size: 1.1em; color: var(--text-color, #fff);"><i class="fa-solid fa-eye"></i> Change Visibility</h3>
</div>
<div class="modal-body" style="padding: 10px 0; text-align: left;">
<form id="visibility-form" onsubmit="return false;">
<input type="hidden" id="visibility-item-id" value="{{ item.id }}" />
<div class="visibility-options" style="display: flex; flex-direction: column; gap: 10px;">
<label class="visibility-option" style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--nav-border-color, #444); border-radius: 6px; cursor: pointer; background: var(--bg-secondary, rgba(255,255,255,0.03));">
<input type="radio" name="visibility" value="0" style="margin-top: 3px;" />
<div>
<strong style="display: block; color: var(--text-color, #fff);"><i class="fa-solid fa-globe"></i> Public</strong>
<span style="font-size: 0.85em; color: var(--text-muted, #aaa);">Visible to everyone in main feeds, search, and rankings.</span>
</div>
</label>
<label class="visibility-option" style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--nav-border-color, #444); border-radius: 6px; cursor: pointer; background: var(--bg-secondary, rgba(255,255,255,0.03));">
<input type="radio" name="visibility" value="1" style="margin-top: 3px;" />
<div>
<strong style="display: block; color: var(--text-color, #fff);"><i class="fa-solid fa-link"></i> Unlisted</strong>
<span style="font-size: 0.85em; color: var(--text-muted, #aaa);">Hidden from main feeds; accessible only via direct link or slug.</span>
</div>
</label>
<label class="visibility-option" style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--nav-border-color, #444); border-radius: 6px; cursor: pointer; background: var(--bg-secondary, rgba(255,255,255,0.03));">
<input type="radio" name="visibility" value="2" style="margin-top: 3px;" />
<div>
<strong style="display: block; color: var(--text-color, #fff);"><i class="fa-solid fa-lock"></i> Private</strong>
<span style="font-size: 0.85em; color: var(--text-muted, #aaa);">Only visible to you and site moderators.</span>
</div>
</label>
@if(is_mod_or_admin)
<label class="visibility-option" style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--nav-border-color, #444); border-radius: 6px; cursor: pointer; background: var(--bg-secondary, rgba(255,255,255,0.03));">
<input type="radio" name="visibility" value="3" style="margin-top: 3px;" />
<div>
<strong style="display: block; color: var(--text-color, #fff);"><i class="fa-solid fa-ban" style="color: var(--danger, #ff4444);"></i> Unavailable (451)</strong>
<span style="font-size: 0.85em; color: var(--text-muted, #aaa);">Only visible to administrators. Serves HTTP 451 on direct media for all other users.</span>
</div>
</label>
@endif
</div>
</form>
</div>
<div class="modal-actions" style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px;">
<button class="btn-secondary" id="visibility-modal-cancel">Cancel</button>
<button class="btn-primary" id="visibility-modal-save">Save Visibility</button>
</div>
</div>
</div>
@include(snippets/visibility-modal)
views/mod.html
+65 -22
View File
@@ -1,29 +1,72 @@
@include(snippets/header)
<div class="pagewrapper">
<div id="main">
<div class="container">
<h1>MODERATOR DASHBOARD</h1>
<h5>Hello, {!! session.user !!}</h5>
<hr>
<div class="container adm">
<!-- Header -->
<header class="adm-header">
<div>
<h1 class="adm-title">Moderator</h1>
<div class="adm-subtitle">Signed in as <strong>{!! session.user !!}</strong></div>
</div>
@if(session.admin)
<a href="/admin" class="adm-btn adm-btn-ghost"><i class="fa-solid fa-shield-halved"></i> Admin dashboard</a>
@endif
</header>
<!-- Overview -->
<section class="adm-section">
<h2 class="adm-section-title"><i class="fa-solid fa-chart-simple"></i> Overview</h2>
<div class="adm-stats">
@if(manualApproval)
<p>Stats: Pending Uploads: {!! pendingCount !!}</p>
<hr>
<a href="/mod/approve" class="adm-stat adm-stat-link @if(pendingCount > 0) is-hot @endif"><span class="adm-stat-num">{!! pendingCount !!}</span><span class="adm-stat-label">Pending approval</span></a>
@endif
<div class="admintools">
<p>Tools</p>
<ul>
@if(manualApproval)
<li><a href="/mod/approve">Approval Queue @if(pendingCount > 0) <span class="badge badge-danger">{!! pendingCount !!}</span> @endif</a></li>
@endif
@if(session.admin || session.is_moderator)
<li><a href="/mod/audit">Audit Log</a></li>
<li><a href="/mod/reports">User Reports</a></li>
<li><a href="/mod/motd">MOTD</a></li>
<li><a href="/mod/halls">Hall Manager</a></li>
@endif
</ul>
</div>
</div>
<a href="/mod/trash" class="adm-stat adm-stat-link"><span class="adm-stat-num">{!! trashCount !!}</span><span class="adm-stat-label">Soft deleted</span></a>
<a href="/mod/reports" class="adm-stat adm-stat-link @if(reportsCount > 0) is-hot @endif"><span class="adm-stat-num">{!! reportsCount !!}</span><span class="adm-stat-label">Open reports</span></a>
</div>
</section>
<!-- Tools -->
<section class="adm-section">
<h2 class="adm-section-title"><i class="fa-solid fa-screwdriver-wrench"></i> Tools</h2>
<h3 class="adm-group-title">Moderation</h3>
<div class="adm-tools">
@if(manualApproval)
<a href="/mod/approve" class="adm-tool">
<i class="fa-solid fa-clock"></i>
<span class="adm-tool-text"><strong>Approval Queue @if(pendingCount > 0)<span class="adm-count">{!! pendingCount !!}</span>@endif</strong><span>Review uploads waiting for approval</span></span>
</a>
@endif
<a href="/mod/trash" class="adm-tool">
<i class="fa-solid fa-trash-can"></i>
<span class="adm-tool-text"><strong>Soft Deleted @if(trashCount > 0)<span class="adm-count">{!! trashCount !!}</span>@endif</strong><span>Restore removed items@if(session.admin) or purge them for good@endif</span></span>
</a>
<a href="/mod/reports" class="adm-tool">
<i class="fa-solid fa-flag"></i>
<span class="adm-tool-text"><strong>User Reports @if(reportsCount > 0)<span class="adm-count">{!! reportsCount !!}</span>@endif</strong><span>Reported posts, comments and users</span></span>
</a>
<a href="/mod/audit" class="adm-tool">
<i class="fa-solid fa-scroll"></i>
<span class="adm-tool-text"><strong>Audit Log</strong><span>Every moderation and admin action</span></span>
</a>
</div>
<h3 class="adm-group-title">Site</h3>
<div class="adm-tools">
<a href="/mod/motd" class="adm-tool">
<i class="fa-solid fa-bullhorn"></i>
<span class="adm-tool-text"><strong>MOTD</strong><span>Message of the day banner</span></span>
</a>
<a href="/mod/halls" class="adm-tool">
<i class="fa-solid fa-layer-group"></i>
<span class="adm-tool-text"><strong>Halls</strong><span>Curated collections</span></span>
</a>
</div>
</section>
</div>
@include(snippets/adm-dashboard-style)
</div>
</div>
@include(snippets/footer)
@include(snippets/footer)
views/mod/approve.html
+70 -308
View File
@@ -2,349 +2,111 @@
<div class="pagewrapper">
<div id="main">
@include(snippets/admin-back)
<div class="container mq">
<header class="mq-header">
<div>
<h1 class="mq-title">Approval Queue</h1>
<div class="mq-subtitle">{{ total }} upload@if(total !== 1)s@endif waiting for approval.</div>
</div>
</header>
<div class="container">
<h1>APPROVAL QUEUE</h1>
<p>Items here are pending approval.</p>
@if(pending.length > 0)
<h2>Pending Uploads</h2>
<div class="approval-grid">
<div class="mq-grid">
@each(pending as post)
<div class="approval-card">
<div class="approval-card-media">
<div class="mq-card">
<div class="mq-media">
@if(post.mime === 'video/youtube')
<div class="embed-responsive embed-responsive-16by9" style="width: 100%;">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{!! post.dest.replace('yt:', '') !!}" frameborder="0" allowfullscreen></iframe>
</div>
@elseif(post.mime.startsWith('video'))
<video controls loop muted preload="none" poster="/mod/pending/t/{!! post.id !!}.webp">
<source src="/mod/pending/b/{!! post.dest !!}" type="{!! post.mime !!}">
Your browser does not support the video tag.
</video>
@elseif(post.mime === 'application/pdf')
<div class="embed-responsive embed-responsive-16by9" style="width: 100%;">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/mod/pending/b/{!! post.dest !!}#toolbar=0" loading="lazy" style="border: none;"></iframe>
</div>
@else
<img src="/mod/pending/t/{!! post.id !!}.webp" alt="Preview">
<img src="/mod/pending/t/{!! post.id !!}.webp" alt="Preview" loading="lazy">
@endif
</div>
<div class="approval-card-body">
<div class="approval-card-info">
<div><strong>ID:</strong> {!! post.id !!}</div>
<div><strong>User:</strong> {!! post.username !!}</div>
<div><strong>Type:</strong> {!! post.mime !!}</div>
<div class="mq-body">
<div class="mq-meta">
<span><strong>#{!! post.id !!}</strong></span>
<span>by <strong>{!! post.username !!}</strong></span>
<span>{!! post.mime !!}</span>
</div>
<div class="approval-card-tags">
<div class="mq-tags">
@each(post.tags as tag)
<span class="badge {!! tag.badge !!}">{!! tag.tag !!}</span>
@endeach
</div>
<div class="approval-card-actions" style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
<button data-id="{!! post.id !!}" class="badge badge-success btn-approve-async" style="margin: 0; text-align: center; border: none; cursor: pointer;">Approve</button>
<button data-id="{!! post.id !!}" class="badge badge-danger btn-deny-async" style="margin: 0; text-align: center; border: none; cursor: pointer;">Deny / Delete</button>
<a href="/api/v2/tags/{!! post.id !!}/toggle" class="badge btn-rating-toggle-async" style="grid-column: span 2; background: #444; color: #ccc; margin: 0; text-align: center;">Rating</a>
</div>
</div>
</div>
@endeach
</div>
@endif
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 40px; margin-bottom: 20px;">
<h2 style="color: #ff6b6b; margin: 0;">Soft Deleted</h2>
@if(trash.length > 0 && session.admin)
<button id="btn-purge-trash" class="badge badge-danger" style="border: none; padding: 10px 15px; cursor: pointer; font-size: 14px;">Purge All Soft-Deleted</button>
@endif
</div>
<p class="text-muted">These items are in the deleted folder but not purged from DB. Approving them will restore them.</p>
@if(trash.length > 0)
<div class="approval-grid" style="opacity: 0.8;">
@each(trash as post)
<div class="approval-card">
<div class="approval-card-media">
@if(post.mime === 'video/youtube')
<div class="embed-responsive embed-responsive-16by9" style="width: 100%;">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{!! post.dest.replace('yt:', '') !!}" frameborder="0" allowfullscreen></iframe>
</div>
@elseif(post.mime.startsWith('video'))
<video controls loop muted preload="none" poster="/mod/deleted/t/{!! post.id !!}.webp">
<source src="/mod/deleted/b/{!! post.dest !!}" type="{!! post.mime !!}">
Your browser does not support the video tag.
</video>
@elseif(post.mime === 'application/pdf')
<div class="embed-responsive embed-responsive-16by9" style="width: 100%;">
<iframe class="embed-responsive-item" src="/mod/deleted/b/{!! post.dest !!}#toolbar=0" loading="lazy" style="border: none;"></iframe>
</div>
@else
<img src="/mod/deleted/t/{!! post.id !!}.webp" style="filter: grayscale(50%);" alt="Preview">
@endif
</div>
<div class="approval-card-body">
<div class="approval-card-info">
<div><strong>ID:</strong> {!! post.id !!}</div>
<div><strong>User:</strong> {!! post.username !!}</div>
<div><strong>Type:</strong> {!! post.mime !!}</div>
@if(post.delete_reason)
<div style="color: #ffb8b8;"><strong>Reason:</strong> {!! post.delete_reason !!}</div>
@endif
</div>
<div class="approval-card-tags">
@each(post.tags as tag)
<span class="badge {!! tag.badge !!}">{!! tag.tag !!}</span>
@endeach
</div>
<div class="approval-card-actions" style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
<button data-id="{!! post.id !!}" class="badge badge-warning btn-approve-async" style="margin: 0; text-align: center; border: none; cursor: pointer;">Restore</button>
@if(session.admin)
<button data-id="{!! post.id !!}" class="badge badge-danger btn-deny-async" style="margin: 0; text-align: center; border: none; cursor: pointer;">Purge</button>
@else
<span></span>
@endif
<a href="/api/v2/tags/{!! post.id !!}/toggle" class="badge btn-rating-toggle-async" style="grid-column: span 2; background: #444; color: #ccc; margin: 0; text-align: center;">Rating</a>
<div class="mq-actions">
<button type="button" data-id="{!! post.id !!}" class="mq-btn mq-btn-primary btn-approve-async">Approve</button>
<button type="button" data-id="{!! post.id !!}" class="mq-btn mq-btn-danger btn-deny-async">Deny</button>
<button type="button" data-id="{!! post.id !!}" class="mq-btn mq-btn-ghost mq-btn-rating btn-rating-toggle-async"><i class="fa-solid fa-shield-halved"></i> Toggle rating</button>
</div>
</div>
</div>
@endeach
</div>
@else
<p style="padding: 20px; border: 1px dashed #444; color: #888;">Trash is empty.</p>
<div class="mq-empty"><strong>No pending uploads.</strong>Go touch grass?</div>
@endif
@if(pending.length === 0 && trash.length === 0)
<div style="text-align: center; padding: 50px;">
<h3>No pending items.</h3>
<p>Go touch grass?</p>
</div>
@endif
<br>
@if(typeof pages !== 'undefined' && pages > 1)
<div class="pagination" style="display: flex; gap: 10px; align-items: center; justify-content: center;">
@if(pages > 1)
<div class="mq-pager">
@if(page > 1)
<a href="/mod/approve?page={!! page - 1 !!}" class="badge badge-secondary">&laquo; Prev</a>
<a href="/mod/approve?page={!! page - 1 !!}" class="mq-btn mq-btn-ghost">&laquo; Prev</a>
@endif
<span>Page {!! page !!} of {!! pages !!}</span>
@if(page < pages) <a href="/mod/approve?page={!! page + 1 !!}" class="badge badge-secondary">Next &raquo;</a>@endif
@if(page < pages)
<a href="/mod/approve?page={!! page + 1 !!}" class="mq-btn mq-btn-ghost">Next &raquo;</a>
@endif
</div>
<br>
@endif
<!-- Custom Modal -->
<div id="custom-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); justify-content: center; align-items: center; z-index: 1000;">
<div style="background: #222; color: #fff; padding: 20px; border-radius: 8px; max-width: 400px; text-align: center; border: 1px solid #444;">
<h3 id="modal-title" style="margin-top: 0;">Confirm Action</h3>
<p id="modal-text">Are you sure?</p>
<div id="modal-reason-container" style="display: none; margin-bottom: 15px; text-align: left;">
<label style="display: block; margin-bottom: 5px; font-size: 0.9em; color: #aaa;">Reason (required):</label>
<textarea id="modal-reason" style="width: 100%; background: #333; color: #fff; border: 1px solid #444; border-radius: 4px; padding: 8px; resize: none;" rows="3" placeholder="Enter reason for denial..."></textarea>
</div>
<div style="display: flex; justify-content: space-around; margin-top: 20px;">
<button id="modal-cancel" class="badge badge-secondary" style="border: none; padding: 10px 20px; cursor: pointer;">Cancel</button>
<button id="modal-confirm" class="badge badge-danger" style="border: none; padding: 10px 20px; cursor: pointer;">Confirm</button>
</div>
</div>
</div>
<script>
(() => {
const modal = document.getElementById('custom-modal');
const modalTitle = document.getElementById('modal-title');
const modalText = document.getElementById('modal-text');
const modalReasonContainer = document.getElementById('modal-reason-container');
const modalReasonInput = document.getElementById('modal-reason');
const btnConfirm = document.getElementById('modal-confirm');
const btnCancel = document.getElementById('modal-cancel');
let pendingAction = null;
const showModal = (title, text, action, showReason = false) => {
modalTitle.innerText = title;
modalText.innerText = text;
pendingAction = action;
if (showReason) {
modalReasonContainer.style.display = 'block';
modalReasonInput.value = '';
modalReasonInput.focus();
} else {
modalReasonContainer.style.display = 'none';
}
modal.style.display = 'flex';
btnConfirm.onclick = async () => {
if (!pendingAction) return;
btnConfirm.disabled = true;
btnConfirm.innerText = 'Processing...';
try {
let reason = null;
if (showReason) {
reason = modalReasonInput.value.trim();
if (!reason) {
modalReasonInput.style.borderColor = '#ff4444';
alert('Please provide a reason for denial');
return;
}
modalReasonInput.style.borderColor = '#444';
}
await pendingAction(reason);
closeModal();
} catch (e) {
alert('Error: ' + e.message);
} finally {
btnConfirm.disabled = false;
btnConfirm.innerText = 'Confirm';
}
};
};
const closeModal = () => {
modal.style.display = 'none';
pendingAction = null;
};
if (btnCancel) btnCancel.onclick = closeModal;
// Single Deny
document.querySelectorAll('.btn-deny-async').forEach(btn => {
btn.addEventListener('click', e => {
e.preventDefault();
const itemId = btn.getAttribute('data-id');
const card = btn.closest('.approval-card');
showModal('{!! t('mod.confirm_action') !!}', '{!! t('mod.confirm_action') !!}?', async (reason) => {
const res = await fetch('/mod/deny', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
'Accept': 'application/json',
'X-CSRF-Token': window.f0ckSession?.csrf_token || ''
},
body: JSON.stringify({ id: itemId, reason })
});
const data = await res.json();
if (res.ok && data.success) {
if (window.flashMessage) window.flashMessage('{!! t('toast.item_deleted_success') !!}', 2000, 'success');
card.style.opacity = '0';
setTimeout(() => card.remove(), 300);
} else {
if (window.flashMessage) window.flashMessage(data.msg || '{!! t('toast.report_error') !!}', 3000, 'error');
throw new Error(data.msg || 'Request failed');
}
}, true);
});
});
// Single Approve / Restore
document.querySelectorAll('.btn-approve-async').forEach(btn => {
btn.addEventListener('click', async e => {
e.preventDefault();
const itemId = btn.getAttribute('data-id');
const card = btn.closest('.approval-card');
try {
const res = await fetch('/mod/approve', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
'Accept': 'application/json',
'X-CSRF-Token': window.f0ckSession?.csrf_token || ''
},
body: JSON.stringify({ id: itemId })
});
const data = await res.json();
if (data.success) {
if (window.flashMessage) window.flashMessage('{!! t('toast.approve_success') !!}', 2000, 'success');
card.style.opacity = '0';
setTimeout(() => card.remove(), 300);
} else {
if (window.flashMessage) window.flashMessage(data.msg || '{!! t('toast.approve_error') !!}', 3000, 'error');
}
} catch (err) {
console.error(err);
if (window.flashMessage) window.flashMessage('{!! t('toast.network_error') !!}', 3000, 'error');
}
});
});
// Rating Toggle
document.querySelectorAll('.btn-rating-toggle-async').forEach(btn => {
btn.addEventListener('click', async e => {
e.preventDefault();
const url = btn.getAttribute('href');
const card = btn.closest('.approval-card');
const tagsContainer = card.querySelector('.approval-card-tags');
btn.style.opacity = '0.5';
btn.style.pointerEvents = 'none';
try {
const res = await fetch(url, {
method: 'PUT',
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Accept': 'application/json'
}
});
const data = await res.json();
if (data.success && data.tags) {
// Update tags UI
tagsContainer.innerHTML = '';
data.tags.forEach(tag => {
const span = document.createElement('span');
let badgeClass = 'badge-light';
if (tag.normalized === 'sfw') badgeClass = 'badge-success';
else if (tag.normalized === 'nsfw') badgeClass = 'badge-danger';
else if (tag.tag.startsWith('>')) badgeClass = 'badge-greentext badge-light';
else if (tag.normalized === 'ukraine') badgeClass = 'badge-ukraine badge-light';
else if (/[а-яё]/.test(tag.normalized) || tag.normalized === 'russia') badgeClass = 'badge-russia badge-light';
else if (tag.normalized === 'german') badgeClass = 'badge-german badge-light';
else if (tag.normalized === 'dutch') badgeClass = 'badge-dutch badge-light';
span.className = 'badge ' + badgeClass;
span.innerText = tag.tag;
tagsContainer.appendChild(span);
});
} else {
alert('Error: ' + (data.msg || 'Unknown error'));
}
} catch (err) {
console.error(err);
alert('Network error');
} finally {
btn.style.opacity = '1';
btn.style.pointerEvents = 'auto';
}
});
});
// Purge All Trash
const btnPurgeTrash = document.getElementById('btn-purge-trash');
if (btnPurgeTrash) {
btnPurgeTrash.addEventListener('click', () => {
showModal('Purge Trash', 'Permanently delete ALL items in the trash? This cannot be undone.', async () => {
const res = await fetch('/mod/purge-trash-all', {
method: 'POST',
headers: {
'X-CSRF-Token': window.f0ckSession?.csrf_token || ''
}
});
const data = await res.json();
if (data.success) {
location.reload();
} else {
throw new Error(data.msg || 'Purge failed');
}
});
});
}
})();
</script>
</div>
{{-- Inside #main so AJAX navigation (which only swaps #main) brings the styles, modal and scripts along --}}
@include(snippets/mod-cards)
<script>
(() => {
// Approve → public
document.querySelectorAll('.btn-approve-async').forEach(btn => {
btn.addEventListener('click', async e => {
e.preventDefault();
btn.disabled = true;
try {
await mq.post('/mod/approve', { id: btn.dataset.id });
mq.flash('{!! t('toast.approve_success') !!}', 'success');
mq.removeCard(btn.closest('.mq-card'));
} catch (err) {
mq.flash(err.message || '{!! t('toast.approve_error') !!}', 'error');
btn.disabled = false;
}
});
});
// Deny → soft deleted (uploader is notified with the reason)
document.querySelectorAll('.btn-deny-async').forEach(btn => {
btn.addEventListener('click', e => {
e.preventDefault();
mq.confirm({
heading: 'Deny upload',
body: 'Deny this upload? It moves to Soft Deleted and the uploader is notified with your reason.',
confirmLabel: 'Deny',
withReason: true,
action: async (reason) => {
await mq.post('/mod/deny', { id: btn.dataset.id, reason });
mq.flash('Upload denied', 'success');
mq.removeCard(btn.closest('.mq-card'));
}
});
});
});
})();
</script>
</div>
</div>
@include(snippets/footer)
@include(snippets/footer)
views/mod/audit.html
+1
View File
@@ -1,5 +1,6 @@
@include(snippets/header)
<div id="main">
@include(snippets/admin-back)
<div class="container">
<h1>AUDIT LOG</h1>
<p>Actions performed by moderators and admins.</p>
views/mod/motd.html
+1
View File
@@ -1,6 +1,7 @@
@include(snippets/header)
<div class="pagewrapper">
<div id="main">
@include(snippets/admin-back)
<div class="container">
<h2>Moderator Message of the Day (MOTD)</h2>
<p style="color: #ccc; margin-bottom: 20px;">This message is displayed site-wide. It will automatically be tagged with your name (<code>t. {!! session.display_name || session.user !!}</code>).</p>
views/mod/trash.html
+138
View File
@@ -0,0 +1,138 @@
@include(snippets/header)
<div class="pagewrapper">
<div id="main">
@include(snippets/admin-back)
<div class="container mq mq-trash">
<header class="mq-header">
<div>
<h1 class="mq-title">Soft Deleted</h1>
<div class="mq-subtitle">{{ total }} removed item@if(total !== 1)s@endif still on disk. Restore makes an item public again@if(session.admin); purge deletes it and its files for good@endif.</div>
</div>
@if(trash.length > 0 && session.admin)
<button type="button" id="btn-purge-trash" class="mq-btn mq-btn-danger"><i class="fa-solid fa-trash"></i> Purge all</button>
@endif
</header>
@if(trash.length > 0)
<div class="mq-grid">
@each(trash as post)
<div class="mq-card">
<div class="mq-media">
@if(post.mime === 'video/youtube')
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{!! post.dest.replace('yt:', '') !!}" frameborder="0" allowfullscreen></iframe>
</div>
@elseif(post.mime.startsWith('video'))
<video controls loop muted preload="none" poster="/mod/deleted/t/{!! post.id !!}.webp">
<source src="/mod/deleted/b/{!! post.dest !!}" type="{!! post.mime !!}">
</video>
@elseif(post.mime === 'application/pdf')
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/mod/deleted/b/{!! post.dest !!}#toolbar=0" loading="lazy" style="border: none;"></iframe>
</div>
@else
<img src="/mod/deleted/t/{!! post.id !!}.webp" alt="Preview" loading="lazy">
@endif
</div>
<div class="mq-body">
<div class="mq-meta">
<span><strong>#{!! post.id !!}</strong></span>
<span>by <strong>{!! post.username !!}</strong></span>
<span>{!! post.mime !!}</span>
</div>
@if(post.delete_reason)
<div class="mq-reason"><strong>Reason:</strong> {!! post.delete_reason !!}</div>
@endif
<div class="mq-tags">
@each(post.tags as tag)
<span class="badge {!! tag.badge !!}">{!! tag.tag !!}</span>
@endeach
</div>
<div class="mq-actions">
<button type="button" data-id="{!! post.id !!}" class="mq-btn mq-btn-primary btn-approve-async">Restore</button>
@if(session.admin)
<button type="button" data-id="{!! post.id !!}" class="mq-btn mq-btn-danger btn-deny-async">Purge</button>
@else
<span></span>
@endif
<button type="button" data-id="{!! post.id !!}" class="mq-btn mq-btn-ghost mq-btn-rating btn-rating-toggle-async"><i class="fa-solid fa-shield-halved"></i> Toggle rating</button>
</div>
</div>
</div>
@endeach
</div>
@else
<div class="mq-empty"><strong>Nothing soft deleted.</strong>Removed items show up here until they are restored or purged.</div>
@endif
@if(pages > 1)
<div class="mq-pager">
@if(page > 1)
<a href="/mod/trash?page={!! page - 1 !!}" class="mq-btn mq-btn-ghost">&laquo; Prev</a>
@endif
<span>Page {!! page !!} of {!! pages !!}</span>
@if(page < pages)
<a href="/mod/trash?page={!! page + 1 !!}" class="mq-btn mq-btn-ghost">Next &raquo;</a>
@endif
</div>
@endif
</div>
{{-- Inside #main so AJAX navigation (which only swaps #main) brings the styles, modal and scripts along --}}
@include(snippets/mod-cards)
<script>
(() => {
// Restore → public again (no "approved" notification)
document.querySelectorAll('.btn-approve-async').forEach(btn => {
btn.addEventListener('click', async e => {
e.preventDefault();
btn.disabled = true;
try {
await mq.post('/mod/trash/restore', { id: btn.dataset.id });
mq.flash('Item restored', 'success');
mq.removeCard(btn.closest('.mq-card'));
} catch (err) {
mq.flash(err.message, 'error');
btn.disabled = false;
}
});
});
// Purge one item permanently (admins)
document.querySelectorAll('.btn-deny-async').forEach(btn => {
btn.addEventListener('click', e => {
e.preventDefault();
mq.confirm({
heading: 'Purge item',
body: 'Permanently delete this item, its files and its comments? This cannot be undone.',
confirmLabel: 'Purge',
withReason: true,
action: async (reason) => {
await mq.post('/mod/trash/purge', { id: btn.dataset.id, reason });
mq.flash('{!! t('toast.item_deleted_success') !!}', 'success');
mq.removeCard(btn.closest('.mq-card'));
}
});
});
});
// Purge everything (admins)
const purgeAll = document.getElementById('btn-purge-trash');
if (purgeAll) {
purgeAll.addEventListener('click', () => {
mq.confirm({
heading: 'Purge all',
body: 'Permanently delete ALL soft-deleted items, their files and comments? This cannot be undone.',
confirmLabel: 'Purge all',
action: async () => {
const data = await mq.post('/mod/trash/purge-all');
mq.flash('Purged ' + (data.count || 0) + ' item(s)', 'success');
location.reload();
}
});
});
}
})();
</script>
</div>
</div>
@include(snippets/footer)
views/mod_reports.html
+1
View File
@@ -2,6 +2,7 @@
<div class="pagewrapper">
<div id="main">
@include(snippets/admin-back)
<style>
.rp-page { max-width: 900px; margin: 0 auto; padding: 30px 15px 60px; }
.rp-header { margin-bottom: 28px; }
views/settings.html
+2 -4
View File
@@ -10,9 +10,7 @@
<a href="#profile"><i class="fa-solid fa-user-pen"></i> {{ t('settings.profile') }}</a>
@endif
<a href="#preferences"><i class="fa-solid fa-sliders"></i> {{ t('settings.preferences') }}</a>
@if(session.is_anon)
<a href="#anon-ssh"><i class="fa-solid fa-key"></i> SSH Identity</a>
@endif
@if(!session.is_anon && enable_data_export)
<a href="#export"><i class="fa-solid fa-file-export"></i> {{ t('settings.export_data_title') }}</a>
@endif
@@ -472,7 +470,7 @@
</div>
</div>
@if(allow_user_upload_visibility !== false)
@if(allow_user_upload_visibility !== false && !session.is_anon)
<div class="setting-item" style="margin-top: 18px;">
<label for="default_upload_visibility_select" style="display: block; font-weight: bold; margin-bottom: 5px;">
<span>{{ t('settings.default_upload_visibility') }}</span>
views/snippets/adm-dashboard-style.html
+124
View File
@@ -0,0 +1,124 @@
{{-- Shared look of the admin (/admin) and moderator (/mod) dashboards: .adm-* classes --}}
<style>
/* Admin & moderator dashboards — square, flat, theme colours (same rules as the modals) */
.adm {
--adm-accent: var(--accent, #0096ff);
--adm-text: var(--text-color, var(--white, #fff));
--adm-muted: var(--text-muted, #8a8f98);
--adm-surface: rgba(255, 255, 255, 0.04);
--adm-border: rgba(255, 255, 255, 0.1);
max-width: 1100px;
margin: 0 auto;
padding: 24px 16px 60px;
text-align: left;
color: var(--adm-text);
line-height: 1.5;
}
.adm *, .adm *::before, .adm *::after { border-radius: 0 !important; }
.adm-header {
display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--adm-border);
}
.adm-title { margin: 0; font-size: 1.8em; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.adm-subtitle { margin-top: 6px; font-size: 0.85em; color: var(--adm-muted); }
.adm-subtitle strong { color: var(--adm-text); }
.adm-section { margin-bottom: 34px; }
.adm-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.adm-section-title {
display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--adm-muted);
}
.adm-section-title i { color: var(--adm-accent); }
.adm-section-title::after { content: ''; flex: 1; height: 1px; background: var(--adm-border); }
.adm-section-head .adm-section-title { flex: 1; }
.adm-group-title { margin: 18px 0 8px; font-size: 0.95em; font-weight: 700; color: var(--adm-text); }
/* Overview tiles */
.adm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.adm-stat {
display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
background: var(--adm-surface); border: 1px solid var(--adm-border);
color: var(--adm-text); text-decoration: none;
}
.adm-stat-num { font-size: 1.6em; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.adm-stat-label { font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--adm-muted); }
.adm-stat-label small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.adm-stat-link { transition: border-color 0.15s; }
.adm-stat-link:hover { border-color: var(--adm-accent); text-decoration: none; color: var(--adm-text); }
.adm-stat.is-hot { border-color: var(--adm-accent); border-left: 3px solid var(--adm-accent); }
.adm-stat.is-hot .adm-stat-num { color: var(--adm-accent); }
/* Tool cards */
.adm-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.adm-tool {
display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
background: var(--adm-surface); border: 1px solid var(--adm-border);
color: var(--adm-text); text-decoration: none; transition: border-color 0.15s, background 0.15s;
}
.adm-tool:hover { border-color: var(--adm-accent); background: rgba(255, 255, 255, 0.06); text-decoration: none; color: var(--adm-text); }
.adm-tool > i { width: 20px; margin-top: 3px; text-align: center; color: var(--adm-accent); flex-shrink: 0; }
.adm-tool-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-tool-text strong { display: flex; align-items: center; gap: 8px; font-size: 0.92em; }
.adm-tool-text > span { font-size: 0.78em; color: var(--adm-muted); }
.adm-count { padding: 0 6px; font-size: 0.8em; line-height: 1.6; background: var(--adm-accent); color: #000; font-weight: 800; }
/* Settings panels */
.adm-panel { background: var(--adm-surface); border: 1px solid var(--adm-border); }
.adm-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 16px; }
.adm-row + .adm-row { border-top: 1px solid var(--adm-border); }
.adm-row-wrap { flex-wrap: wrap; }
.adm-row-text { min-width: 0; flex: 1 1 260px; }
.adm-row-text label { display: block; margin: 0; font-weight: 700; font-size: 0.92em; color: var(--adm-text); }
.adm-row-text p { margin: 3px 0 0; font-size: 0.8em; color: var(--adm-muted); }
.adm-muted { font-size: 0.78em; font-style: italic; color: var(--adm-muted); }
.adm-number {
width: 76px; height: 36px; padding: 0 8px; text-align: center;
background: rgba(0, 0, 0, 0.3); border: 1px solid var(--adm-border); color: var(--adm-text);
font: inherit; outline: none; flex-shrink: 0;
}
.adm-number:focus { border-color: var(--adm-accent); }
.adm-switch { position: relative; display: inline-block; width: 46px; height: 24px; flex-shrink: 0; cursor: pointer; }
.adm-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.adm-slider { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.12); border: 1px solid var(--adm-border); transition: background 0.2s, border-color 0.2s; }
.adm-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: var(--adm-muted); transition: transform 0.2s, background 0.2s; }
.adm-switch input:checked + .adm-slider { background: var(--adm-accent); border-color: var(--adm-accent); }
.adm-switch input:checked + .adm-slider::before { transform: translateX(22px); background: #000; }
.adm-switch input:focus-visible + .adm-slider { outline: 2px solid var(--adm-accent); outline-offset: 2px; }
.adm-brand { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-brand-preview {
width: 160px; height: 46px; display: flex; align-items: center; justify-content: center; overflow: hidden;
background: rgba(0, 0, 0, 0.3); border: 1px solid var(--adm-border);
}
.adm-brand-preview img { max-height: 40px; max-width: 150px; object-fit: contain; }
/* Buttons */
.adm-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; margin: 0; padding: 0 16px;
font: inherit; font-size: 0.82em; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap;
border: 1px solid var(--adm-border); background: transparent; color: var(--adm-text);
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.adm-btn:hover { text-decoration: none; }
.adm-btn-primary { background: var(--adm-accent); border-color: var(--adm-accent); color: #000; text-transform: uppercase; letter-spacing: 0.06em; }
.adm-btn-primary:hover { background: transparent; color: var(--adm-accent); }
.adm-btn-ghost { color: var(--adm-muted); }
.adm-btn-ghost:hover { color: var(--adm-text); border-color: var(--adm-accent); }
.adm-btn-danger { border-color: rgba(220, 53, 69, 0.5); color: #ff6b6b; }
.adm-btn-danger:hover { background: rgba(220, 53, 69, 0.15); }
.adm-btn:disabled { opacity: 0.4; cursor: not-allowed; background: transparent; }
.adm-btn:focus-visible { outline: 2px solid var(--adm-accent); outline-offset: 2px; }
.adm-status { font-size: 0.8em; font-weight: 700; min-height: 1em; }
.adm-status-row { display: block; padding: 0 16px 12px; }
.adm-status-row:empty { display: none; }
@media (max-width: 600px) {
.adm-row { flex-wrap: wrap; }
.adm-tools { grid-template-columns: 1fr; }
}
</style>
views/snippets/admin-back.html
+81
View File
@@ -0,0 +1,81 @@
{{-- Back-to-dashboard bar for admin/mod subpages: /mod… pages (and non-admins) go to /mod, /admin… pages to /admin. Include right after #main opens (AJAX nav only swaps #main). --}}
<nav class="adm-back" aria-label="Breadcrumb">
@if(session && session.admin && !is_mod_area)
<a href="/admin" class="adm-back-link">
<span class="adm-back-arrow"><i class="fa-solid fa-arrow-left"></i></span>
<span class="adm-back-text"><small>Back to</small>Admin dashboard</span>
</a>
@else
<a href="/mod" class="adm-back-link">
<span class="adm-back-arrow"><i class="fa-solid fa-arrow-left"></i></span>
<span class="adm-back-text"><small>Back to</small>Moderator dashboard</span>
</a>
@endif
<span class="adm-back-crumb" aria-current="page"></span>
</nav>
@include(snippets/admin-skin)
<style>
.adm-back {
--ab-accent: var(--accent, #0096ff);
display: flex; align-items: center; justify-content: space-between; gap: 12px;
max-width: 1200px; margin: 0 auto; padding: 18px 16px 0; box-sizing: border-box;
text-align: left;
}
.adm-back, .adm-back * { border-radius: 0 !important; }
.adm-back-link {
position: relative; display: inline-flex; align-items: stretch; overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03);
color: var(--text-color, var(--white, #fff)); text-decoration: none;
transition: border-color 0.2s, background 0.2s;
}
.adm-back-link::after {
content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
background: var(--ab-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
}
.adm-back-link:hover, .adm-back-link:focus-visible {
border-color: var(--ab-accent); background: color-mix(in srgb, var(--ab-accent) 8%, transparent);
color: var(--text-color, var(--white, #fff)); text-decoration: none; outline: none;
}
.adm-back-link:hover::after, .adm-back-link:focus-visible::after { transform: scaleX(1); }
.adm-back-arrow {
display: flex; align-items: center; justify-content: center; width: 38px;
background: var(--ab-accent); color: #000; font-size: 0.9em;
}
.adm-back-arrow i { transition: transform 0.2s ease; }
.adm-back-link:hover .adm-back-arrow i { transform: translateX(-3px); }
.adm-back-text {
display: flex; flex-direction: column; justify-content: center; padding: 6px 14px 7px 12px;
font-size: 0.86em; font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.adm-back-text small {
font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
color: var(--text-muted, #8a8f98);
}
.adm-back-crumb {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
color: var(--text-muted, #8a8f98);
}
.adm-back-crumb:not(:empty)::before { content: '/ '; color: var(--ab-accent); }
@media (prefers-reduced-motion: reduce) {
.adm-back-link::after, .adm-back-arrow i { transition: none; }
}
</style>
<script>
(() => {
// Breadcrumb = the page's own heading (first h1/h2 in #main). The rest of the page isn't in the
// DOM yet when this runs (parser / AJAX insert), so wait until it is.
const fill = () => {
const crumb = document.querySelector('#main .adm-back-crumb');
const main = document.getElementById('main');
if (!crumb || !main) return;
const heading = Array.from(main.querySelectorAll('h1, h2')).find(h => !h.closest('.adm-back') && h.textContent.trim());
if (heading) crumb.textContent = heading.innerText.trim().slice(0, 60); // innerText already collapses whitespace (no regex: the template engine strips backslashes)
};
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', fill, { once: true });
else setTimeout(fill, 0);
})();
</script>
views/snippets/admin-skin.html
+87
View File
@@ -0,0 +1,87 @@
{{-- Admin/mod subpage skin (style guide: square, flat, theme colours). Loaded by snippets/admin-back, scoped to pages that show the back bar, except the .mq card pages which have their own design. --}}
<style>
/* Scope root: #main of an admin subpage. Most rules sit in :where() (zero specificity) so a page's own
classes still win; only corners and form-control surfaces are forced because pages hard-code them inline. */
#main:has(> .adm-back):not(:has(.mq)) {
--as-accent: var(--accent, #0096ff);
--as-text: var(--text-color, var(--white, #fff));
--as-muted: var(--text-muted, #8a8f98);
--as-surface: rgba(255, 255, 255, 0.04);
--as-border: rgba(255, 255, 255, 0.1);
text-align: left;
}
/* ── Corners: none, anywhere ─────────────────────────────────────────── */
#main:has(> .adm-back):not(:has(.mq)) *,
#main:has(> .adm-back):not(:has(.mq)) *::before,
#main:has(> .adm-back):not(:has(.mq)) *::after { border-radius: 0 !important; }
/* ── Layout ──────────────────────────────────────────────────────────── */
:where(#main:has(> .adm-back):not(:has(.mq))) > .container {
max-width: 1200px; margin: 0 auto; padding: 20px 16px 60px; box-sizing: border-box; text-align: left;
}
/* ── Headings ────────────────────────────────────────────────────────── */
:where(#main:has(> .adm-back):not(:has(.mq))) :is(.container > h1, .container > h2, .admin-header-flex h2, .session-page-title) {
margin: 0 0 6px; font-size: 1.8em; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; color: var(--as-text);
text-transform: none;
}
:where(#main:has(> .adm-back):not(:has(.mq))) :is(h3, h4) { font-weight: 700; color: var(--as-text); }
:where(#main:has(> .adm-back):not(:has(.mq))) .admin-header-flex {
display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--as-border);
}
:where(#main:has(> .adm-back):not(:has(.mq))) hr { border: 0; border-top: 1px solid var(--as-border); margin: 20px 0; }
:where(#main:has(> .adm-back):not(:has(.mq))) label { color: var(--as-text); }
/* ── Cards / panels ──────────────────────────────────────────────────── */
:where(#main:has(> .adm-back):not(:has(.mq))) :is(.upload-form, .admin-form-container, .admin-motd-form, .settings-section, .admin-card) {
background: var(--as-surface); border: 1px solid var(--as-border); padding: 18px; box-shadow: none;
}
/* ── Tables ──────────────────────────────────────────────────────────── */
:where(#main:has(> .adm-back):not(:has(.mq))) table { width: 100%; border-collapse: collapse; background: transparent; color: var(--as-text); }
:where(#main:has(> .adm-back):not(:has(.mq))) :is(th, thead td) {
padding: 10px 12px; text-align: left; font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--as-muted); background: var(--as-surface); border-bottom: 1px solid var(--as-border);
}
:where(#main:has(> .adm-back):not(:has(.mq))) tbody td { padding: 10px 12px; border-bottom: 1px solid var(--as-border); vertical-align: middle; }
:where(#main:has(> .adm-back):not(:has(.mq))) tbody tr { background: transparent; transition: background 0.12s; }
:where(#main:has(> .adm-back):not(:has(.mq))) tbody tr:hover { background: var(--as-surface); }
/* ── Form controls (forced: pages hard-code #333 backgrounds inline) ── */
#main:has(> .adm-back):not(:has(.mq)) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden]), select, textarea) {
background: var(--as-surface) !important;
border: 1px solid var(--as-border) !important;
color: var(--as-text) !important;
font-family: inherit; box-shadow: none !important; outline: none;
transition: border-color 0.15s;
}
:where(#main:has(> .adm-back):not(:has(.mq))) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden]), select) {
min-height: 34px; padding: 6px 10px; box-sizing: border-box;
}
:where(#main:has(> .adm-back):not(:has(.mq))) textarea { padding: 10px 12px; box-sizing: border-box; }
#main:has(> .adm-back):not(:has(.mq)) :is(input, select, textarea):focus { border-color: var(--as-accent) !important; }
#main:has(> .adm-back):not(:has(.mq)) select option { background: var(--bg, #111); color: var(--as-text); }
:where(#main:has(> .adm-back):not(:has(.mq))) :is(input[type=checkbox], input[type=radio]) { accent-color: var(--as-accent); }
/* ── Buttons ─────────────────────────────────────────────────────────── */
:where(#main:has(> .adm-back):not(:has(.mq))) :is(button, .btn, input[type=submit]) { font-family: inherit; cursor: pointer; }
:where(#main:has(> .adm-back):not(:has(.mq))) :is(.btn-upload, .btn-primary, button[type=submit], input[type=submit]) {
min-height: 36px; padding: 0 18px; border: 1px solid var(--as-accent); background: var(--as-accent); color: #000;
font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.82em;
transition: background 0.15s, color 0.15s;
}
:where(#main:has(> .adm-back):not(:has(.mq))) :is(.btn-upload, .btn-primary, button[type=submit], input[type=submit]):hover:not(:disabled) {
background: transparent; color: var(--as-accent);
}
:where(#main:has(> .adm-back):not(:has(.mq))) :is(button, .btn):disabled { opacity: 0.5; cursor: not-allowed; }
#main:has(> .adm-back):not(:has(.mq)) :is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--as-accent); outline-offset: 2px; }
/* ── Modals opened from admin pages ──────────────────────────────────── */
#main:has(> .adm-back):not(:has(.mq)) :is(.modal-content, .modal-overlay > div:first-child) {
background: var(--bg, #111) !important;
border: 1px solid var(--as-accent) !important;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important;
}
</style>
views/snippets/footer.html
+126 -22
View File
@@ -68,36 +68,45 @@
@endif
@if(!private_society || session)
<div id="report-modal" class="modal-overlay" style="display:none;">
<div class="modal-content" style="max-height: 90vh; overflow-y: auto;">
<h3>{{ t('report.title') }}</h3>
<p style="margin-bottom: 12px; color: var(--text-muted, #aaa); font-size: 0.9em;">Select one or more reasons and optionally add details below.</p>
<div class="modal-content report-modal-content">
<div class="rm-header">
<h3>{{ t('report.title') }}</h3>
<p>Select one or more reasons and optionally add details below.</p>
</div>
<div class="rm-body">
<input type="hidden" id="report-item-id">
<input type="hidden" id="report-comment-id">
<input type="hidden" id="report-user-id">
<div id="report-categories" style="display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px;">
<label class="report-category-option" style="display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--nav-border-color, #444); border-radius: 6px; cursor: pointer; background: var(--bg-secondary, rgba(255,255,255,0.03)); transition: border-color 0.15s, background 0.15s; user-select: none;">
<input type="checkbox" name="report_category" value="wrong_rating" class="report-cat-check" style="accent-color: var(--accent, #e65c00); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0;">
<span style="font-size: 0.9em;"><strong style="color: var(--text-color, #fff);">Wrong Rating</strong> <span style="color: var(--text-muted, #aaa);">— Content is marked SFW but should be NSFW, or vice versa.</span></span>
<div id="report-categories">
<label class="report-category-option">
<input type="checkbox" name="report_category" value="wrong_rating" class="report-cat-check">
<span class="rm-check"><i class="fa-solid fa-check"></i></span>
<span class="rm-text"><strong>Wrong Rating</strong><span>Content is marked SFW but should be NSFW, or vice versa.</span></span>
</label>
<label class="report-category-option" style="display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--nav-border-color, #444); border-radius: 6px; cursor: pointer; background: var(--bg-secondary, rgba(255,255,255,0.03)); transition: border-color 0.15s, background 0.15s; user-select: none;">
<input type="checkbox" name="report_category" value="spam" class="report-cat-check" style="accent-color: var(--accent, #e65c00); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0;">
<span style="font-size: 0.9em;"><strong style="color: var(--text-color, #fff);">Spam</strong> <span style="color: var(--text-muted, #aaa);">— Repeated, unwanted, or promotional content.</span></span>
<label class="report-category-option">
<input type="checkbox" name="report_category" value="spam" class="report-cat-check">
<span class="rm-check"><i class="fa-solid fa-check"></i></span>
<span class="rm-text"><strong>Spam</strong><span>Repeated, unwanted, or promotional content.</span></span>
</label>
<label class="report-category-option" style="display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--nav-border-color, #444); border-radius: 6px; cursor: pointer; background: var(--bg-secondary, rgba(255,255,255,0.03)); transition: border-color 0.15s, background 0.15s; user-select: none;">
<input type="checkbox" name="report_category" value="duplicate" class="report-cat-check" style="accent-color: var(--accent, #e65c00); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0;">
<span style="font-size: 0.9em;"><strong style="color: var(--text-color, #fff);">Duplicate</strong> <span style="color: var(--text-muted, #aaa);">— This content has already been posted before.</span></span>
<label class="report-category-option">
<input type="checkbox" name="report_category" value="duplicate" class="report-cat-check">
<span class="rm-check"><i class="fa-solid fa-check"></i></span>
<span class="rm-text"><strong>Duplicate</strong><span>This content has already been posted before.</span></span>
</label>
<label class="report-category-option" style="display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--nav-border-color, #444); border-radius: 6px; cursor: pointer; background: var(--bg-secondary, rgba(255,255,255,0.03)); transition: border-color 0.15s, background 0.15s; user-select: none;">
<input type="checkbox" name="report_category" value="copyright" class="report-cat-check" style="accent-color: var(--accent, #e65c00); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0;">
<span style="font-size: 0.9em;"><strong style="color: var(--text-color, #fff);">Copyright</strong> <span style="color: var(--text-muted, #aaa);">— Content infringes on intellectual property rights.</span></span>
<label class="report-category-option">
<input type="checkbox" name="report_category" value="copyright" class="report-cat-check">
<span class="rm-check"><i class="fa-solid fa-check"></i></span>
<span class="rm-text"><strong>Copyright</strong><span>Content infringes on intellectual property rights.</span></span>
</label>
<label class="report-category-option" style="display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--nav-border-color, #444); border-radius: 6px; cursor: pointer; background: var(--bg-secondary, rgba(255,255,255,0.03)); transition: border-color 0.15s, background 0.15s; user-select: none;">
<input type="checkbox" name="report_category" value="illegal" class="report-cat-check" style="accent-color: var(--accent, #e65c00); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0;">
<span style="font-size: 0.9em;"><strong style="color: var(--text-color, #fff); color: var(--danger, #ff4444);">Illegal Content</strong> <span style="color: var(--text-muted, #aaa);">— Content that may violate laws or platform rules.</span></span>
<label class="report-category-option rm-danger">
<input type="checkbox" name="report_category" value="illegal" class="report-cat-check">
<span class="rm-check"><i class="fa-solid fa-check"></i></span>
<span class="rm-text"><strong>Illegal Content</strong><span>Content that may violate laws or platform rules.</span></span>
</label>
<label class="report-category-option" style="display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--nav-border-color, #444); border-radius: 6px; cursor: pointer; background: var(--bg-secondary, rgba(255,255,255,0.03)); transition: border-color 0.15s, background 0.15s; user-select: none;">
<input type="checkbox" name="report_category" value="other" class="report-cat-check" style="accent-color: var(--accent, #e65c00); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0;">
<span style="font-size: 0.9em;"><strong style="color: var(--text-color, #fff);">Other</strong> <span style="color: var(--text-muted, #aaa);">— Something else not listed above.</span></span>
<label class="report-category-option">
<input type="checkbox" name="report_category" value="other" class="report-cat-check">
<span class="rm-check"><i class="fa-solid fa-check"></i></span>
<span class="rm-text"><strong>Other</strong><span>Something else not listed above.</span></span>
</label>
</div>
<textarea id="report-reason" class="mod-reason" placeholder="{{ t('report.placeholder') }}"></textarea>
@@ -105,6 +114,7 @@
<div id="modal-report-recaptcha" data-sitekey="{{ recaptcha_site_key }}" style="margin: 10px 0; display: flex; justify-content: center;"></div>
@endif
<div id="report-error" class="error-msg"></div>
</div>
<div class="modal-actions">
<button id="report-cancel" class="btn-secondary">{{ t('common.cancel') }}</button>
<button id="report-submit" class="">{{ t('report.submit') }}</button>
@@ -112,6 +122,100 @@
</div>
</div>
<style>
/* Report modal — same style rules as the login/info modals: square, flat, accent primary button */
#report-modal .report-modal-content {
--rm-accent: var(--accent, #0096ff);
--rm-text: var(--text-color, #fff);
--rm-muted: var(--text-muted, #8a8f98);
--rm-surface: rgba(255, 255, 255, 0.04);
--rm-border: rgba(255, 255, 255, 0.1);
width: min(460px, 92vw);
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(--rm-text);
}
#report-modal .report-modal-content * { border-radius: 0 !important; }
#report-modal .rm-header { flex-shrink: 0; padding: 20px 24px 14px; border-bottom: 1px solid var(--rm-border); }
#report-modal .rm-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 24px; }
#report-modal .rm-body > :last-child { margin-bottom: 0; }
#report-modal .rm-header h3 { margin: 0; font-size: 1.25em; font-weight: 700; color: var(--rm-text); }
#report-modal .rm-header p { margin: 6px 0 0; font-size: 0.85em; line-height: 1.5; color: var(--rm-muted); }
#report-modal #report-categories { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
#report-modal .report-category-option {
display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px;
background: var(--rm-surface); border: 1px solid var(--rm-border);
cursor: pointer; user-select: none; transition: border-color 0.15s, background 0.15s;
}
#report-modal .report-category-option:hover { border-color: rgba(255, 255, 255, 0.22); }
#report-modal .report-category-option:has(.report-cat-check:checked) {
border-color: var(--rm-accent);
background: color-mix(in srgb, var(--rm-accent) 8%, transparent);
}
#report-modal .report-cat-check { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
#report-modal .rm-check {
width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.25); background: var(--rm-surface);
font-size: 0.7em; color: transparent; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#report-modal .report-cat-check:checked + .rm-check { background: var(--rm-accent); border-color: var(--rm-accent); color: #000; }
#report-modal .report-cat-check:focus-visible + .rm-check { outline: 2px solid var(--rm-accent); outline-offset: 2px; }
#report-modal .rm-text { display: flex; flex-direction: column; gap: 2px; font-size: 0.88em; line-height: 1.4; }
#report-modal .rm-text strong { color: var(--rm-text); font-weight: 700; }
#report-modal .rm-text span { color: var(--rm-muted); }
#report-modal .rm-danger .rm-text strong { color: var(--danger, #ff5c5c); }
#report-modal .rm-danger:has(.report-cat-check:checked) { border-color: var(--danger, #ff5c5c); background: rgba(255, 92, 92, 0.08); }
#report-modal .rm-danger .report-cat-check:checked + .rm-check { background: var(--danger, #ff5c5c); border-color: var(--danger, #ff5c5c); }
#report-modal textarea.mod-reason {
width: 100%; min-height: 90px; box-sizing: border-box; margin: 0; padding: 10px 12px;
background: var(--rm-surface); border: 1px solid var(--rm-border); color: var(--rm-text);
font: inherit; font-size: 0.9em; resize: vertical; outline: none; box-shadow: none;
transition: border-color 0.15s;
}
#report-modal textarea.mod-reason:focus { border-color: var(--rm-accent); }
#report-modal textarea.mod-reason::placeholder { color: var(--rm-muted); }
#report-modal .modal-actions {
flex-shrink: 0; display: flex; justify-content: flex-end; gap: 8px; margin: 0;
padding: 14px 24px; border-top: 1px solid var(--rm-border); background: rgba(0, 0, 0, 0.2);
}
@media (max-width: 600px) {
#report-modal { padding: 0 !important; align-items: stretch !important; }
#report-modal .report-modal-content {
width: 100vw; max-width: none;
height: 100vh; height: 100dvh; max-height: none;
border: 0 !important; box-shadow: none !important;
}
#report-modal .modal-actions { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
#report-modal .modal-actions button { flex: 1; }
}
#report-modal .modal-actions 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; gap: 6px;
transition: background 0.18s, color 0.18s, border-color 0.18s;
}
#report-modal #report-cancel { background: transparent; border: 1px solid var(--rm-border); color: var(--rm-muted); font-weight: 600; }
#report-modal #report-cancel:hover { color: var(--rm-text); border-color: rgba(255, 255, 255, 0.25); background: var(--rm-surface); }
#report-modal #report-submit {
background: var(--rm-accent); border: 1px solid var(--rm-accent); color: #000;
font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
}
#report-modal #report-submit:hover:not(:disabled) { background: transparent; color: var(--rm-accent); }
#report-modal #report-submit:disabled { opacity: 0.6; cursor: progress; }
#report-modal button:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }
</style>
<div id="warning-modal" class="modal-overlay" style="display:none; z-index: 100100;">
<div class="modal-content content-warning-content">
<h3 style="color: var(--danger);">{{ t('account_warning.title') }}</h3>
views/snippets/info-modal.html
+198
View File
@@ -107,9 +107,15 @@
<div class="infobox-card" id="info-card-directlink">
<label class="infobox-card-label"><i class="fa-solid fa-arrow-up-right-from-square"></i> Direct Link</label>
<div class="infobox-card-value">
@if(item.external_thread_url)
<a href="{{ item.external_thread_url }}" target="_blank" rel="noopener noreferrer" class="infobox-link-pill" id="info-file-direct-link" title="{{ item.external_thread_url }}">
<i class="fa-solid fa-up-right-from-square"></i> {{ t('info_modal.view_file') || 'Open File' }}
</a>
@else
<a href="{{ item.mime === 'video/youtube' ? 'https://www.youtube.com/watch?v=' + item.dest.replace('yt:', '') : item.dest }}" target="_blank" class="infobox-link-pill" id="info-file-direct-link">
<i class="fa-solid fa-up-right-from-square"></i> {{ t('info_modal.view_file') || 'Open File' }}
</a>
@endif
</div>
</div>
@@ -167,3 +173,195 @@
</div>
</div>
</div>
<style>
/* Info modal — same style rules as the login/register/anon modals: square, flat, no glow */
#info-modal .infobox-modal-content {
--im-accent: var(--accent, #0096ff);
--im-text: var(--text-color, #fff);
--im-muted: var(--text-muted, #8a8f98);
--im-surface: rgba(255, 255, 255, 0.04);
--im-border: rgba(255, 255, 255, 0.1);
padding: 0;
/* Same box as .login-modal-content (f0ckm.css); !important beats the older infobox rules */
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(--im-text);
overflow: hidden;
}
#info-modal .infobox-modal-content * { border-radius: 0 !important; }
/* Header */
#info-modal .infobox-modal-content .infobox-modal-header {
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
margin: 0; padding: 22px 24px 18px;
background: none;
border-bottom: 1px solid var(--im-border);
}
#info-modal .infobox-modal-content .infobox-modal-header h3 {
margin: 0; font-size: 1.25em; font-weight: 700; letter-spacing: -0.01em; color: var(--im-text);
}
#info-modal .infobox-modal-content .infobox-sub-heading {
display: block; margin-top: 5px; font-size: 0.8em; color: var(--im-muted);
}
#info-modal .infobox-modal-content .infobox-sub-heading code {
padding: 1px 6px; background: var(--im-surface); border: 1px solid var(--im-border);
color: var(--im-accent); font-size: 1em;
}
#info-modal .infobox-modal-content .infobox-close-icon-btn {
flex-shrink: 0; width: 34px; height: 34px; margin: -4px -8px 0 0; padding: 0;
display: flex; align-items: center; justify-content: center;
background: transparent; border: 1px solid transparent;
color: var(--im-muted); font-size: 1.05em; cursor: pointer;
transition: color 0.15s, background 0.15s, border-color 0.15s;
}
#info-modal .infobox-modal-content .infobox-close-icon-btn:hover {
color: var(--im-text); background: var(--im-surface); border-color: var(--im-border);
}
/* Body + sections */
#info-modal .infobox-modal-content .infobox-modal-body {
padding: 20px 24px; display: flex; flex-direction: column; gap: 22px;
}
#info-modal .infobox-modal-content .infobox-section { margin: 0; padding: 0; background: none; border: 0; }
#info-modal .infobox-modal-content .infobox-section-header {
display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0;
font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
color: var(--im-muted); background: none; border: 0;
}
#info-modal .infobox-modal-content .infobox-section-header i { color: var(--im-accent); }
#info-modal .infobox-modal-content .infobox-section-header::after {
content: ''; flex: 1; height: 1px; background: var(--im-border);
}
/* Cards */
#info-modal .infobox-modal-content .infobox-cards-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px;
}
#info-modal .infobox-modal-content .infobox-card {
margin: 0; padding: 12px 14px;
background: var(--im-surface); border: 1px solid var(--im-border); box-shadow: none;
display: flex; flex-direction: column; gap: 8px; min-width: 0;
transition: border-color 0.15s;
}
#info-modal .infobox-modal-content .infobox-card:hover { border-color: rgba(255, 255, 255, 0.18); }
#info-modal .infobox-modal-content .infobox-card.full-width { grid-column: 1 / -1; }
#info-modal .infobox-modal-content .infobox-card-label {
display: flex; align-items: center; gap: 6px; margin: 0;
font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--im-muted);
}
#info-modal .infobox-modal-content .infobox-card-label i { color: var(--im-accent); opacity: 0.85; width: 1em; text-align: center; }
#info-modal .infobox-modal-content .infobox-card-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#info-modal .infobox-modal-content .infobox-card-value { font-size: 0.95em; color: var(--im-text); overflow-wrap: anywhere; }
#info-modal .infobox-modal-content .infobox-card-value-row,
#info-modal .infobox-modal-content .infobox-expiry-content {
display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 0.92em;
}
#info-modal .infobox-modal-content .info-expiry-edit-controls { display: flex; gap: 6px; width: 100%; }
/* Small controls inside cards */
#info-modal .infobox-modal-content .infobox-action-btn,
#info-modal .infobox-modal-content .copy-hash-btn {
height: 28px; margin: 0; padding: 0 10px;
display: inline-flex; align-items: center; gap: 6px;
background: transparent; border: 1px solid var(--im-border);
color: var(--im-muted); font: inherit; font-size: 0.78em; font-weight: 600; cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
#info-modal .infobox-modal-content .infobox-action-btn:hover,
#info-modal .infobox-modal-content .copy-hash-btn:hover {
color: var(--im-accent); border-color: var(--im-accent); background: transparent;
}
#info-modal .infobox-modal-content .infobox-select {
flex: 1; min-width: 0; height: 28px; margin: 0; padding: 0 8px;
background: rgba(0, 0, 0, 0.35); border: 1px solid var(--im-border);
color: var(--im-text); font: inherit; font-size: 0.82em; outline: none;
}
#info-modal .infobox-modal-content .infobox-select:focus { border-color: var(--im-accent); }
#info-modal .infobox-modal-content .mime-pill {
display: inline-block; padding: 2px 8px;
background: rgba(0, 0, 0, 0.35); border: 1px solid var(--im-border);
color: var(--im-text); font-size: 0.85em;
}
#info-modal .infobox-modal-content .infobox-link-pill,
#info-modal .infobox-modal-content .infobox-source-link {
display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
color: var(--im-accent); text-decoration: none; font-weight: 600; font-size: 0.92em;
background: none; border: 0; padding: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#info-modal .infobox-modal-content .infobox-link-pill:hover,
#info-modal .infobox-modal-content .infobox-source-link:hover { text-decoration: underline; text-underline-offset: 3px; }
#info-modal .infobox-modal-content .info-hash-codeblock {
margin: 0; padding: 10px 12px;
background: rgba(0, 0, 0, 0.4); border: 1px solid var(--im-border); border-left: 2px solid var(--im-accent);
font-size: 0.8em; line-height: 1.5; color: var(--im-text); word-break: break-all;
}
#info-modal .infobox-modal-content .info-hash-codeblock code { background: none; border: 0; padding: 0; color: inherit; }
/* Reposts */
#info-modal .infobox-modal-content .infobox-reposts-list { display: flex; flex-wrap: wrap; gap: 6px; }
#info-modal .infobox-modal-content .repost-pill {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
background: var(--im-surface); border: 1px solid var(--im-border);
color: var(--im-text); font-size: 0.82em; text-decoration: none;
transition: border-color 0.15s, color 0.15s;
}
#info-modal .infobox-modal-content .repost-pill:hover { border-color: var(--im-accent); color: var(--im-accent); }
#info-modal .infobox-modal-content .repost-pill.exact i { color: var(--im-accent); }
/* Footer */
#info-modal .infobox-modal-content .infobox-modal-footer {
display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap;
margin: 0; padding: 16px 24px;
background: rgba(0, 0, 0, 0.25); border-top: 1px solid var(--im-border);
}
#info-modal .infobox-modal-content .btn-infobox-action,
#info-modal .infobox-modal-content .btn-infobox-close {
height: 40px; margin: 0; padding: 0 18px;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font: inherit; font-size: 0.85em; cursor: pointer; box-shadow: none;
transition: background 0.18s, color 0.18s, border-color 0.18s;
}
#info-modal .infobox-modal-content .btn-infobox-action {
background: transparent; border: 1px solid var(--im-border); color: var(--im-muted); font-weight: 600;
}
#info-modal .infobox-modal-content .btn-infobox-action:hover { color: var(--im-text); border-color: rgba(255, 255, 255, 0.25); background: var(--im-surface); }
#info-modal .infobox-modal-content .btn-infobox-close {
background: var(--im-accent); border: 1px solid var(--im-accent); color: #000;
font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
}
#info-modal .infobox-modal-content .btn-infobox-close:hover { background: transparent; color: var(--im-accent); }
#info-modal .infobox-modal-content :is(button, a, select):focus-visible { outline: 2px solid var(--im-accent); outline-offset: 2px; }
/* Fixed header + footer, only the body scrolls; full screen on phones */
#info-modal .infobox-modal-content {
display: flex !important;
flex-direction: column !important;
max-height: min(90vh, 90dvh) !important;
}
#info-modal .infobox-modal-content .infobox-modal-header,
#info-modal .infobox-modal-content .infobox-modal-footer { flex-shrink: 0; }
#info-modal .infobox-modal-content .infobox-modal-body {
flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain;
}
@media (max-width: 600px) {
#info-modal { padding: 0 !important; align-items: stretch !important; }
#info-modal .infobox-modal-content {
width: 100vw !important; max-width: none !important;
height: 100vh !important; height: 100dvh !important; max-height: none !important;
border: 0 !important; box-shadow: none !important;
}
#info-modal .infobox-modal-content .infobox-modal-footer { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 520px) {
#info-modal .infobox-modal-content .infobox-modal-header,
#info-modal .infobox-modal-content .infobox-modal-body,
#info-modal .infobox-modal-content .infobox-modal-footer { padding-left: 16px; padding-right: 16px; }
#info-modal .infobox-modal-content .infobox-modal-footer > * { flex: 1; }
}
</style>
views/snippets/mod-cards.html
+205
View File
@@ -0,0 +1,205 @@
{{-- Shared card UI for mod/approve.html and mod/trash.html: styles, confirmation modal, rating toggle and helpers on window.mq (page actions live in each page) --}}
<div id="mq-modal" class="mq-modal" style="display:none;">
<div class="mq-modal-box">
<h3 id="mq-modal-title">Confirm action</h3>
<p id="mq-modal-text">Are you sure?</p>
<div id="mq-modal-reason-wrap" style="display:none;">
<label for="mq-modal-reason">Reason (required)</label>
<textarea id="mq-modal-reason" rows="3" placeholder="Enter a reason…"></textarea>
</div>
<div class="mq-modal-actions">
<button type="button" id="mq-modal-cancel" class="mq-btn mq-btn-ghost">Cancel</button>
<button type="button" id="mq-modal-confirm" class="mq-btn mq-btn-danger">Confirm</button>
</div>
</div>
</div>
<style>
/* Moderation queues — square, flat, theme colours */
.mq {
--mq-accent: var(--accent, #0096ff);
--mq-text: var(--text-color, var(--white, #fff));
--mq-muted: var(--text-muted, #8a8f98);
--mq-surface: rgba(255, 255, 255, 0.04);
--mq-border: rgba(255, 255, 255, 0.1);
--mq-danger: #ff5c5c;
max-width: 1200px; margin: 0 auto; padding: 24px 16px 60px;
text-align: left; color: var(--mq-text); line-height: 1.5;
}
.mq *, .mq *::before, .mq *::after, .mq-modal *, .mq-modal *::before, .mq-modal *::after { border-radius: 0 !important; }
.mq-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.mq-title { margin: 0; font-size: 1.8em; font-weight: 800; line-height: 1.1; }
.mq-subtitle { margin-top: 6px; font-size: 0.85em; color: var(--mq-muted); }
.mq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.mq-card { display: flex; flex-direction: column; background: var(--mq-surface); border: 1px solid var(--mq-border); transition: opacity 0.3s, border-color 0.15s; }
.mq-card:hover { border-color: rgba(255, 255, 255, 0.2); }
.mq-media { position: relative; aspect-ratio: 16 / 10; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mq-media img, .mq-media video { width: 100%; height: 100%; object-fit: contain; display: block; }
.mq-media .embed-responsive { width: 100%; }
.mq-trash .mq-media img, .mq-trash .mq-media video { filter: grayscale(50%); }
.mq-body { display: flex; flex-direction: column; gap: 8px; padding: 12px; flex: 1; }
.mq-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.8em; color: var(--mq-muted); }
.mq-meta strong { color: var(--mq-text); font-weight: 700; }
.mq-reason { padding: 6px 8px; font-size: 0.8em; color: #ffb8b8; background: rgba(255, 92, 92, 0.08); border-left: 2px solid var(--mq-danger); }
.mq-tags { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; }
.mq-tags .badge { margin: 0; }
.mq-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: auto; }
.mq-actions .mq-btn-rating { grid-column: span 2; }
.mq-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; margin: 0; padding: 0 12px;
font: inherit; font-size: 0.8em; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap;
border: 1px solid var(--mq-border); background: transparent; color: var(--mq-text);
transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}
.mq-btn:hover { text-decoration: none; }
.mq-btn:disabled { opacity: 0.5; cursor: progress; }
.mq-btn-primary { background: var(--mq-accent); border-color: var(--mq-accent); color: #000; text-transform: uppercase; letter-spacing: 0.06em; }
.mq-btn-primary:hover:not(:disabled) { background: transparent; color: var(--mq-accent); }
.mq-btn-danger { border-color: rgba(255, 92, 92, 0.5); color: var(--mq-danger); }
.mq-btn-danger:hover:not(:disabled) { background: rgba(255, 92, 92, 0.15); }
.mq-btn-ghost { color: var(--mq-muted); }
.mq-btn-ghost:hover:not(:disabled) { color: var(--mq-text); border-color: rgba(255, 255, 255, 0.25); background: var(--mq-surface); }
.mq-btn:focus-visible { outline: 2px solid var(--mq-accent); outline-offset: 2px; }
.mq-note { margin: 0 0 16px; font-size: 0.85em; color: var(--mq-muted); }
.mq-empty { padding: 40px 20px; text-align: center; color: var(--mq-muted); border: 1px dashed var(--mq-border); }
.mq-empty strong { display: block; margin-bottom: 4px; color: var(--mq-text); font-size: 1.05em; }
.mq-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; font-size: 0.85em; color: var(--mq-muted); }
.mq-modal { position: fixed; inset: 0; z-index: 100100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(4px); padding: 16px; }
.mq-modal-box {
width: min(420px, 100%); padding: 22px; text-align: left; color: var(--text-color, #fff);
background: var(--bg); border: 1px solid var(--accent); box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.mq-modal-box h3 { margin: 0 0 6px; font-size: 1.15em; font-weight: 700; }
.mq-modal-box p { margin: 0 0 14px; font-size: 0.88em; color: var(--text-muted, #8a8f98); }
.mq-modal-box label { display: block; margin-bottom: 6px; font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted, #8a8f98); }
.mq-modal-box textarea {
width: 100%; box-sizing: border-box; padding: 10px 12px; margin-bottom: 14px; resize: vertical;
background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); color: inherit; font: inherit; font-size: 0.9em; outline: none;
}
.mq-modal-box textarea:focus { border-color: var(--accent); }
.mq-modal-box textarea.is-invalid { border-color: #ff5c5c; }
.mq-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.mq-modal .mq-btn { height: 38px; padding: 0 16px; }
</style>
<script>
// Shared helpers for the moderation card pages. Re-assigned on every (AJAX) page load.
window.mq = (() => {
const modal = document.getElementById('mq-modal');
const title = document.getElementById('mq-modal-title');
const text = document.getElementById('mq-modal-text');
const reasonWrap = document.getElementById('mq-modal-reason-wrap');
const reasonInput = document.getElementById('mq-modal-reason');
const btnConfirm = document.getElementById('mq-modal-confirm');
const btnCancel = document.getElementById('mq-modal-cancel');
const csrf = () => (window.f0ckSession && window.f0ckSession.csrf_token) || '';
const flash = (msg, type) => { if (window.flashMessage) window.flashMessage(msg, type === 'error' ? 3000 : 2000, type); };
let pendingAction = null;
let needsReason = false;
const close = () => { modal.style.display = 'none'; pendingAction = null; };
const confirm = ({ heading, body, confirmLabel = 'Confirm', withReason = false, action }) => {
title.innerText = heading;
text.innerText = body;
pendingAction = action;
needsReason = withReason;
btnConfirm.innerText = confirmLabel;
btnConfirm.dataset.label = confirmLabel;
reasonWrap.style.display = withReason ? 'block' : 'none';
reasonInput.value = '';
reasonInput.classList.remove('is-invalid');
modal.style.display = 'flex';
if (withReason) reasonInput.focus();
};
btnConfirm.addEventListener('click', async () => {
if (!pendingAction) return;
let reason = null;
if (needsReason) {
reason = reasonInput.value.trim();
if (!reason) { reasonInput.classList.add('is-invalid'); reasonInput.focus(); return; }
}
btnConfirm.disabled = true;
btnConfirm.innerText = 'Processing…';
try {
await pendingAction(reason);
close();
} catch (e) {
flash('Error: ' + e.message, 'error');
} finally {
btnConfirm.disabled = false;
btnConfirm.innerText = btnConfirm.dataset.label || 'Confirm';
}
});
btnCancel.addEventListener('click', close);
modal.addEventListener('click', e => { if (e.target === modal) close(); });
document.addEventListener('keydown', e => { if (e.key === 'Escape' && modal.style.display !== 'none') close(); });
const post = async (url, body) => {
const res = await fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json', 'X-CSRF-Token': csrf() },
body: JSON.stringify(body || {})
});
let data = {};
try { data = await res.json(); } catch {}
if (!res.ok || !data.success) throw new Error(data.msg || ('Request failed (' + res.status + ')'));
return data;
};
const removeCard = (card) => {
if (!card) return;
card.style.opacity = '0';
setTimeout(() => {
card.remove();
const grid = document.querySelector('.mq-grid');
if (grid && !grid.querySelector('.mq-card')) location.reload();
}, 300);
};
// Rating toggle (same on both pages)
document.querySelectorAll('.btn-rating-toggle-async').forEach(btn => {
btn.addEventListener('click', async e => {
e.preventDefault();
const tagsContainer = btn.closest('.mq-card')?.querySelector('.mq-tags');
btn.disabled = true;
try {
const res = await fetch('/api/v2/tags/' + btn.dataset.id + '/toggle', {
method: 'PUT',
headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json', 'X-CSRF-Token': csrf() }
});
const data = await res.json();
if (!data.success || !data.tags) throw new Error(data.msg || 'Unknown error');
if (tagsContainer) {
tagsContainer.innerHTML = '';
data.tags.forEach(tag => {
let cls = 'badge-light';
if (tag.normalized === 'sfw') cls = 'badge-success';
else if (tag.normalized === 'nsfw') cls = 'badge-danger';
else if (tag.tag.startsWith('>')) cls = 'badge-greentext badge-light';
const span = document.createElement('span');
span.className = 'badge ' + cls;
span.innerText = tag.tag;
tagsContainer.appendChild(span);
});
}
} catch (err) {
flash('Error: ' + err.message, 'error');
} finally {
btn.disabled = false;
}
});
});
return { confirm, post, flash, removeCard };
})();
</script>
views/snippets/navbar.html
+392 -128
View File
@@ -69,7 +69,7 @@
@endif
@endif
@if(enable_anonymous_access && session.is_anon)
<a href="#" id="nav-user-anon-identity-btn" onclick="event.preventDefault(); if(window.f0ckAnonPasskey) { window.f0ckAnonPasskey.openModal(); } else { const m = document.getElementById('anon-passkey-modal'); if (m) m.style.display='flex'; }"><i class="fa-solid fa-fingerprint"></i> Passkey Identity</a>
<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
<a href="/user/{{ (session.is_anon && session.login ? session.login : session.user).toLowerCase() }}/favs" class="mobile-only">{{ t('nav.favs') }}</a>
<a href="/settings" class="mobile-only">{{ t('nav.settings') }}</a>
@@ -385,7 +385,7 @@ async function loginWithPasskey() {
errEl.textContent = (e && e.message) || 'Passkey login failed.';
}
}
if (btn) { btn.disabled = false; btn.innerHTML = '<i class="fa-solid fa-fingerprint"></i> Login with passkey'; }
if (btn) { btn.disabled = false; btn.innerHTML = '<i class="fa-solid fa-fingerprint"></i> Use my passkey'; }
}
}
</script>
@@ -396,76 +396,319 @@ async function loginWithPasskey() {
<!-- Login View -->
<div id="modal-login-view">
<h2 style="text-align: center; margin-bottom: 18px;">{{ t('auth.login_title') }}</h2>
<div class="lm-header">
<h2 class="lm-title">{{ t('auth.login_title') }}</h2>
<div class="lm-subtitle">{{ domain }}</div>
</div>
<!-- Tab bar -->
<div id="login-tabs" style="display: flex; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 20px;">
<button type="button" id="login-tab-creds" onclick="switchLoginTab('creds')"
style="flex: 1; background: none; border: none; border-bottom: 2px solid var(--accent, #0096ff); color: var(--text-color, #fff); padding: 8px 0; font-size: 0.9em; cursor: pointer; font-weight: 600; transition: color 0.15s;">
<i class="fa-solid fa-key" style="margin-right:5px;"></i>Credentials
<div id="login-tabs" class="lm-tabs" role="tablist">
<button type="button" id="login-tab-creds" class="lm-tab is-active" role="tab" aria-selected="true" onclick="switchLoginTab('creds')">
<i class="fa-solid fa-key"></i>Credentials
</button>
<button type="button" id="login-tab-passkey" onclick="switchLoginTab('passkey')"
style="flex: 1; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted, #888); padding: 8px 0; font-size: 0.9em; cursor: pointer; font-weight: 600; transition: color 0.15s;">
<i class="fa-solid fa-fingerprint" style="margin-right:5px;"></i>Passkey
<button type="button" id="login-tab-passkey" class="lm-tab" role="tab" aria-selected="false" onclick="switchLoginTab('passkey')">
<i class="fa-solid fa-fingerprint"></i>Passkey
</button>
</div>
<!-- Tab: Credentials -->
<div id="login-panel-creds">
<form class="login-form" method="post" action="/login" novalidate style="padding: 0; background: none; box-shadow: none; border: none;">
<input type="text" name="username" placeholder="{{ t('auth.username_or_email') }}" autocomplete="off" required />
<input type="password" name="password" placeholder="{{ t('auth.password_placeholder_min') }}" autocomplete="off" required />
<p style="text-align: left; font-size: 0.9em; margin: 0;"><input type="checkbox" id="kmsi-modal" name="kmsi" />
<label for="kmsi-modal">{{ t('auth.stay_signed_in') }}</label>
</p>
<button type="submit">{{ t('auth.login_title') }}</button>
@if(smtp_enabled)
<div style="text-align: center; margin-top: 10px;">
<a href="#" id="modal-forgot-btn" style="font-size: 0.85em; color: var(--accent); text-decoration: underline;">{{ t('auth.forgot_password') }}</a>
<div id="login-panel-creds" class="lm-panel">
<form class="login-form lm-form" method="post" action="/login" novalidate>
<label class="lm-field">
<i class="fa-solid fa-user lm-field-icon"></i>
<input class="lm-input" type="text" name="username" placeholder="{{ t('auth.username_or_email') }}" aria-label="{{ t('auth.username_or_email') }}" autocomplete="username" autocapitalize="off" spellcheck="false" required />
</label>
<label class="lm-field">
<i class="fa-solid fa-lock lm-field-icon"></i>
<input class="lm-input" type="password" name="password" id="modal-login-password" placeholder="{{ t('auth.password_placeholder_min') }}" aria-label="{{ t('auth.password_placeholder_min') }}" autocomplete="current-password" required />
<button type="button" class="lm-reveal" onclick="toggleLoginPassword(this)" aria-label="Show password" title="Show password">
<i class="fa-solid fa-eye"></i>
</button>
</label>
<div class="lm-row">
<label class="lm-check" for="kmsi-modal">
<input type="checkbox" id="kmsi-modal" name="kmsi" />
<span class="lm-check-box"><i class="fa-solid fa-check"></i></span>
<span>{{ t('auth.stay_signed_in') }}</span>
</label>
@if(smtp_enabled)
<a href="#" id="modal-forgot-btn" class="lm-link lm-link-muted">{{ t('auth.forgot_password') }}</a>
@endif
</div>
@endif
@if(registration_open || private_society)
<p style="text-align: center; font-size: 0.9em; margin-top: 15px; color: #888;">
{{ t('auth.no_account') }} <a href="#" id="login-to-register" style="color: var(--accent); text-decoration: underline;">{{ t('auth.register_now') }}</a>
</p>
@endif
<button type="submit" class="lm-btn lm-btn-primary">
{{ t('auth.login_title') }} <i class="fa-solid fa-arrow-right"></i>
</button>
</form>
</div>
<!-- Tab: Passkey -->
<div id="login-panel-passkey" style="display: none; text-align: center; padding: 8px 0 4px;">
<div style="font-size: 2.6em; margin-bottom: 14px;">🔑</div>
<p style="font-size: 0.88em; color: var(--text-muted, #aaa); margin: 0 0 20px; line-height: 1.55;">
<div id="login-panel-passkey" class="lm-panel lm-panel-passkey" style="display: none;">
<div class="lm-passkey-icon"><i class="fa-solid fa-fingerprint"></i></div>
<p class="lm-passkey-text">
Use a saved passkey from Bitwarden, iCloud Keychain, or your OS to sign in without a password.
</p>
<button type="button" id="modal-login-passkey-btn"
style="width: 100%; padding: 11px; background: var(--accent, #0096ff); color: #fff; border: none; border-radius: 5px; font-size: 0.95em; font-weight: 600; cursor: pointer; margin-bottom: 8px;"
onclick="loginWithPasskey()">
<button type="button" id="modal-login-passkey-btn" class="lm-btn lm-btn-primary" onclick="loginWithPasskey()">
<i class="fa-solid fa-fingerprint"></i> Use my passkey
</button>
<div id="modal-passkey-error" style="display:none; color:#e06c75; font-size:0.82em; margin-top:6px;"></div>
<div id="modal-passkey-error" class="lm-error" style="display:none;"></div>
</div>
@if(enable_anonymous_access)
<div style="margin-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 12px; text-align: center;">
<button type="button" id="modal-login-as-anon-btn"
style="background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: #999; border-radius: 4px; padding: 7px 14px; font-size: 0.85em; cursor: pointer; width: 100%; transition: background 0.2s;"
<div class="lm-anon">
<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
</button>
</div>
@endif
@if(registration_open || private_society)
<p class="lm-footer">
{{ t('auth.no_account') }} <a href="#" id="login-to-register" class="lm-link">{{ t('auth.register_now') }}</a>
</p>
@endif
</div>
<style>
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) {
--lm-accent: var(--accent, #0096ff);
--lm-text: var(--text-color, #fff);
--lm-muted: var(--text-muted, #8a8f98);
--lm-surface: rgba(255, 255, 255, 0.04);
--lm-border: rgba(255, 255, 255, 0.1);
--lm-radius: 0;
padding: 28px 28px 24px;
font-family: inherit;
color: var(--lm-text);
}
#login-modal .login-modal-content,
#register-modal .login-modal-content { border-radius: 0; }
/* Header */
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-header { text-align: center; margin-bottom: 22px; }
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-title {
margin: 0; font-size: 1.5em; font-weight: 700; letter-spacing: -0.01em; color: var(--lm-text);
}
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-subtitle {
margin-top: 4px; font-size: 0.82em; color: var(--lm-muted); letter-spacing: 0.02em;
}
/* Segmented tabs */
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-tabs {
display: flex; gap: 4px; padding: 4px; margin-bottom: 20px;
background: rgba(0, 0, 0, 0.35);
border: 1px solid var(--lm-border);
border-radius: var(--lm-radius);
}
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-tab {
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
padding: 8px 0; margin: 0;
background: transparent; border: 0; border-radius: var(--lm-radius);
color: var(--lm-muted); font: inherit; font-size: 0.88em; font-weight: 600;
cursor: pointer; transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-tab:hover { color: var(--lm-text); }
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-tab.is-active {
color: var(--lm-text);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 2px 8px rgba(0, 0, 0, 0.35);
}
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-tab.is-active i { color: var(--lm-accent); }
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-panel { animation: lm-fade 0.2s ease; }
@keyframes lm-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Form */
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) form.lm-form {
display: flex; flex-direction: column; gap: 12px;
padding: 0; margin: 0; background: none; border: 0; box-shadow: none; width: 100%;
}
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-field { position: relative; display: block; margin: 0; }
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-field-icon {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
color: var(--lm-muted); font-size: 0.9em; pointer-events: none; transition: color 0.15s;
}
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) input.lm-input {
width: 100%; box-sizing: border-box; height: 46px; margin: 0;
padding: 0 42px 0 40px;
background: var(--lm-surface);
border: 1px solid var(--lm-border);
border-radius: var(--lm-radius);
color: var(--lm-text); font: inherit; font-size: 0.95em;
outline: none; box-shadow: none;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) input.lm-input::placeholder { color: var(--lm-muted); opacity: 0.8; }
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) input.lm-input:hover { border-color: rgba(255, 255, 255, 0.18); }
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) input.lm-input:focus {
border-color: var(--lm-accent);
background: rgba(255, 255, 255, 0.06);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--lm-accent) 22%, transparent);
}
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-field:focus-within .lm-field-icon { color: var(--lm-accent); }
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-reveal {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
width: 34px; height: 34px; margin: 0; padding: 0;
display: flex; align-items: center; justify-content: center;
background: transparent; border: 0; border-radius: var(--lm-radius);
color: var(--lm-muted); cursor: pointer; transition: color 0.15s, background 0.15s;
}
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-reveal:hover { color: var(--lm-text); background: rgba(255, 255, 255, 0.06); }
/* Remember me + forgot */
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
font-size: 0.85em; margin: 2px 0 4px;
}
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-check {
display: inline-flex; align-items: center; gap: 9px; cursor: pointer; color: var(--lm-muted); user-select: none;
}
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-check input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-check-box {
width: 18px; height: 18px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--lm-radius);
background: var(--lm-surface); font-size: 0.7em; color: transparent;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-check:hover .lm-check-box { border-color: var(--lm-accent); }
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-check input:checked + .lm-check-box { background: var(--lm-accent); border-color: var(--lm-accent); color: #000; }
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-check input:focus-visible + .lm-check-box { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lm-accent) 30%, transparent); }
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-check input:checked ~ span:last-child { color: var(--lm-text); }
/* Links */
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-link {
color: var(--lm-accent); text-decoration: none; font-weight: 600; transition: opacity 0.15s;
}
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-link:hover { text-decoration: underline; text-underline-offset: 3px; }
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-link-muted { color: var(--lm-muted); font-weight: 500; }
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-link-muted:hover { color: var(--lm-text); }
/* Buttons */
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-btn {
width: 100%; height: 46px; margin: 0; padding: 0 16px;
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
border-radius: var(--lm-radius); font: inherit; font-size: 0.95em; font-weight: 700;
cursor: pointer; transition: transform 0.12s, box-shadow 0.18s, background 0.18s, border-color 0.18s, filter 0.18s;
}
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-btn-primary {
margin-top: 6px;
border: 1px solid var(--lm-accent); color: #000;
background: var(--lm-accent);
box-shadow: none;
text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800;
}
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-btn-primary:hover { background: transparent; color: var(--lm-accent); }
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-btn-primary:active { transform: translateY(1px); }
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-btn-primary .fa-arrow-right { font-size: 0.85em; transition: transform 0.18s; }
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-btn-primary:hover .fa-arrow-right { transform: translateX(3px); }
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-btn:disabled { opacity: 0.6; cursor: progress; filter: none; transform: none; }
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-btn:focus-visible { outline: 2px solid var(--lm-accent); outline-offset: 2px; }
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-btn-ghost {
background: var(--lm-surface); border: 1px solid var(--lm-border); color: var(--lm-muted); font-weight: 600;
}
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-btn-ghost:hover { color: var(--lm-text); border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.07); }
/* Passkey panel */
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-panel-passkey { text-align: center; padding-top: 4px; }
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-passkey-icon {
width: 76px; height: 76px; margin: 0 auto 16px;
display: flex; align-items: center; justify-content: center;
border-radius: var(--lm-radius); font-size: 2.2em; color: var(--lm-accent);
background: radial-gradient(circle, color-mix(in srgb, var(--lm-accent) 20%, transparent) 0%, transparent 70%);
border: 1px solid color-mix(in srgb, var(--lm-accent) 30%, transparent);
}
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-passkey-text {
margin: 0 auto 20px; max-width: 320px; font-size: 0.88em; line-height: 1.6; color: var(--lm-muted);
}
/* Errors (also covers the .flash-error the login JS injects) */
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-error,
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .flash-error {
margin: 10px 0 0; padding: 10px 12px; text-align: left;
font-size: 0.84em; line-height: 1.45; color: #ff8a8a;
background: rgba(224, 108, 117, 0.1);
border: 1px solid rgba(224, 108, 117, 0.3);
border-radius: var(--lm-radius);
}
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) form .flash-error { margin: 0; }
#register-modal #modal-register-view #register-status:empty { display: none; }
#register-modal #modal-register-view #register-status.flash-success {
padding: 10px 12px; font-size: 0.84em; line-height: 1.45; color: #7ee2a0;
background: rgba(74, 222, 128, 0.1);
border: 1px solid rgba(74, 222, 128, 0.3);
border-radius: var(--lm-radius);
}
/* Anon setup */
#anon-setup-modal #anon-setup-view .lm-note {
margin: 0 0 20px; padding: 9px 12px; text-align: left;
font-size: 0.8em; line-height: 1.5; color: var(--lm-muted);
background: var(--lm-surface); border: 1px solid var(--lm-border); border-left: 2px solid var(--lm-accent);
}
#anon-setup-modal #anon-setup-view .lm-note i { color: var(--lm-accent); margin-right: 4px; }
#anon-setup-modal #anon-setup-view .lm-textbtn {
margin: 0; padding: 0; background: none; border: 0;
font: inherit; font-weight: 600; color: var(--lm-accent); cursor: pointer;
}
#anon-setup-modal #anon-setup-view .lm-textbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Anon passkey identity */
#anon-passkey-modal #anon-passkey-view .lm-stat {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin: 0 0 16px; padding: 12px 14px;
background: var(--lm-surface); border: 1px solid var(--lm-border);
}
#anon-passkey-modal #anon-passkey-view .lm-stat-label {
font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lm-muted);
}
#anon-passkey-modal #anon-passkey-view .lm-stat code { color: var(--lm-accent); font-size: 0.95em; }
/* Register-only */
#register-modal #modal-register-view .lm-check-multiline { align-items: flex-start; line-height: 1.5; }
#register-modal #modal-register-view .lm-check-multiline .lm-check-box { margin-top: 1px; }
#register-modal #modal-register-view .lm-recaptcha { display: flex; justify-content: center; }
/* Divider + footer */
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-divider {
display: flex; align-items: center; gap: 12px; margin: 20px 0 14px;
color: var(--lm-muted); font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.12em;
}
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-divider::before,
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-divider::after { content: ''; flex: 1; height: 1px; background: var(--lm-border); }
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-footer {
margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--lm-border);
text-align: center; font-size: 0.88em; color: var(--lm-muted);
}
@media (prefers-reduced-motion: reduce) {
:is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) * { animation: none !important; transition: none !important; }
}
</style>
<script>
function switchLoginTab(tab) {
var isCreds = tab === 'creds';
document.getElementById('login-panel-creds').style.display = isCreds ? '' : 'none';
document.getElementById('login-panel-passkey').style.display = isCreds ? 'none' : '';
var tCreds = document.getElementById('login-tab-creds');
var tPk = document.getElementById('login-tab-passkey');
if (tCreds) { tCreds.style.borderBottomColor = isCreds ? 'var(--accent, #0096ff)' : 'transparent'; tCreds.style.color = isCreds ? 'var(--text-color, #fff)' : 'var(--text-muted, #888)'; }
if (tPk) { tPk.style.borderBottomColor = isCreds ? 'transparent' : 'var(--accent, #0096ff)'; tPk.style.color = isCreds ? 'var(--text-muted, #888)' : 'var(--text-color, #fff)'; }
[['login-tab-creds', isCreds], ['login-tab-passkey', !isCreds]].forEach(function (t) {
var el = document.getElementById(t[0]);
if (!el) return;
el.classList.toggle('is-active', t[1]);
el.setAttribute('aria-selected', t[1] ? 'true' : 'false');
});
}
function toggleLoginPassword(btn) {
var input = btn.parentNode.querySelector('input');
if (!input) return;
var show = input.type === 'password';
input.type = show ? 'text' : 'password';
btn.innerHTML = show ? '<i class="fa-solid fa-eye-slash"></i>' : '<i class="fa-solid fa-eye"></i>';
btn.setAttribute('aria-label', show ? 'Hide password' : 'Show password');
btn.title = show ? 'Hide password' : 'Show password';
input.focus();
}
</script>
@@ -508,40 +751,25 @@ async function loginWithPasskey() {
@if(enable_anonymous_access)
<!-- Anonymous Passkey Identity Modal -->
<div id="anon-passkey-modal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); z-index: 99999; align-items: center; justify-content: center;">
<div class="login-modal-content" style="max-width: 500px; width: 92vw; max-height: 90vh; overflow-y: auto; text-align: left; padding: 25px; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; background: var(--bg-primary, #111); box-shadow: 0 10px 40px rgba(0,0,0,0.8); position: relative;">
<button id="anon-passkey-modal-close" style="position: absolute; top: 15px; right: 15px; background: none; border: none; color: var(--text-muted, #aaa); font-size: 1.4em; cursor: pointer; line-height: 1;">&times;</button>
<div style="max-width: 380px; width: 92vw; max-height: 90vh; overflow-y: auto; padding: 0; border: 1px solid var(--accent); border-radius: 0; background: var(--bg); box-shadow: 0 0 20px rgba(0,0,0,0.5); position: relative;">
<button id="anon-passkey-modal-close" style="position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--text-muted, #aaa); font-size: 1.3em; cursor: pointer; line-height: 1;">&times;</button>
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 8px;">
<i class="fa-solid fa-fingerprint" style="color: var(--accent, #0096ff); font-size: 1.3em;"></i>
<h3 style="margin: 0; font-size: 1.25em; color: var(--text-color, #fff);">Anonymous Passkey Identity</h3>
</div>
<p style="margin: 0 0 18px 0; font-size: 0.85em; color: var(--text-muted, #aaa); line-height: 1.4;">
Your anonymous identity is protected by a <strong>passkey</strong> stored in your OS or password manager (e.g. Bitwarden).
No private key ever touches this browser's storage.
</p>
<!-- Identity info -->
<div style="margin-bottom: 14px; padding: 12px; background: rgba(0,0,0,0.35); border-radius: 6px; border: 1px solid rgba(255,255,255,0.07);">
<div style="margin-bottom: 8px;">
<label style="display: block; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted, #888); margin-bottom: 3px;">Short Fingerprint</label>
<code id="anon-pk-fp-display" style="font-family: monospace; font-size: 1em; color: var(--accent, #00d2ff);">—</code>
<div id="anon-passkey-view">
<div class="lm-header">
<h2 class="lm-title">Passkeys</h2>
<div class="lm-subtitle"><span id="anon-pk-count">–</span> / <span id="anon-pk-max">4</span> in use</div>
</div>
<div>
<label style="display: block; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted, #888); margin-bottom: 3px;">Credential ID (short)</label>
<code id="anon-pk-cred-display" style="font-family: monospace; font-size: 0.78em; color: var(--text-muted, #aaa); word-break: break-all;">—</code>
</div>
</div>
<!-- Actions -->
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
<button type="button" id="anon-pk-add-btn" class="btn btn-sm btn-primary" style="font-size: 0.85em; padding: 6px 14px;">
<i class="fa-solid fa-plus"></i> Add another passkey
<div class="lm-stat">
<span class="lm-stat-label">Fingerprint</span>
<code id="anon-pk-fp-display">—</code>
</div>
<button type="button" id="anon-pk-add-btn" class="lm-btn lm-btn-primary">
<i class="fa-solid fa-plus"></i> Add passkey
</button>
<div id="anon-pk-error" class="lm-error" style="display: none;"></div>
</div>
<p style="margin: 14px 0 0; font-size: 0.8em; color: var(--text-muted, #888); line-height: 1.4;">
To use this identity on another device, simply sign in with your passkey manager (Bitwarden, iCloud Keychain, etc.) — it syncs automatically.
</p>
</div>
</div>
@@ -578,43 +806,45 @@ async function loginWithPasskey() {
@if(enable_anonymous_access)
<!-- Anonymous Passkey Setup Modal — shown when user clicks "Login as anonymous" -->
<div id="anon-setup-modal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(4px); z-index: 99999; align-items: center; justify-content: center;">
<div style="max-width: 420px; width: 92vw; padding: 28px; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; background: var(--bg-primary, #111); box-shadow: 0 12px 48px rgba(0,0,0,0.9); position: relative; text-align: center;">
<div style="max-width: 420px; width: 92vw; padding: 0; border: 1px solid var(--accent); border-radius: 0; background: var(--bg); box-shadow: 0 0 20px rgba(0,0,0,0.5); position: relative;">
<button id="anon-setup-modal-close" style="position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--text-muted, #aaa); font-size: 1.3em; cursor: pointer; line-height: 1;">&times;</button>
<!-- New user view (no passkey yet) -->
<div id="anon-setup-new">
<div style="font-size: 2.4em; margin-bottom: 12px;">🔑</div>
<h3 style="margin: 0 0 10px; font-size: 1.15em; color: var(--text-color, #fff);">Create an anonymous passkey</h3>
<p style="margin: 0 0 18px; font-size: 0.88em; color: var(--text-muted, #aaa); line-height: 1.55;">
Your browser will ask you to save a <strong>passkey</strong> — a secure credential stored in Bitwarden, iCloud Keychain, or your OS.
No account, no email, no password. Your comments and favorites are tied to this passkey.
</p>
<p style="margin: 0 0 20px; font-size: 0.82em; color: var(--text-muted, #888); line-height: 1.4;">
You can use it across devices if your passkey manager syncs (e.g. Bitwarden).
</p>
<button type="button" id="anon-setup-create-btn" style="width: 100%; padding: 11px; background: var(--accent, #0096ff); color: #fff; border: none; border-radius: 5px; font-size: 0.95em; font-weight: 600; cursor: pointer; margin-bottom: 10px;">
<i class="fa-solid fa-fingerprint"></i> Create my passkey
</button>
<div id="anon-setup-new-error" style="display: none; color: #e06c75; font-size: 0.83em; margin-top: 6px;"></div>
<button type="button" id="anon-setup-switch-existing" style="background: none; border: none; color: var(--text-muted, #888); font-size: 0.8em; cursor: pointer; text-decoration: underline; margin-top: 4px;">
Already have one? Use existing passkey
</button>
</div>
<div id="anon-setup-view">
<!-- New user view (no passkey yet) -->
<div id="anon-setup-new" class="lm-panel lm-panel-passkey">
<div class="lm-passkey-icon"><i class="fa-solid fa-fingerprint"></i></div>
<h2 class="lm-title">Create an anonymous passkey</h2>
<p class="lm-passkey-text" style="margin-top: 12px;">
Your browser will ask you to save a <strong>passkey</strong> — a secure credential stored in Bitwarden, iCloud Keychain, or your OS.
No account, no email, no password. Your comments and favorites are tied to this passkey.
</p>
<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>
<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>
<div id="anon-setup-new-error" class="lm-error" style="display: none;"></div>
<p class="lm-footer">
<button type="button" id="anon-setup-switch-existing" class="lm-textbtn">Already have one? Use existing passkey</button>
</p>
</div>
<!-- Returning user view (has passkey) -->
<div id="anon-setup-returning" style="display: none;">
<div style="font-size: 2.4em; margin-bottom: 12px;">👤</div>
<h3 style="margin: 0 0 10px; font-size: 1.15em; color: var(--text-color, #fff);">Use your anonymous passkey</h3>
<p style="margin: 0 0 20px; font-size: 0.88em; color: var(--text-muted, #aaa); line-height: 1.55;">
Pick your saved passkey from Bitwarden, iCloud Keychain, or your OS to continue as the same anonymous user.
</p>
<button type="button" id="anon-setup-auth-btn" style="width: 100%; padding: 11px; background: var(--accent, #0096ff); color: #fff; border: none; border-radius: 5px; font-size: 0.95em; font-weight: 600; cursor: pointer; margin-bottom: 10px;">
<i class="fa-solid fa-fingerprint"></i> Use my passkey
</button>
<div id="anon-setup-ret-error" style="display: none; color: #e06c75; font-size: 0.83em; margin-top: 6px;"></div>
<button type="button" id="anon-setup-switch-new" style="background: none; border: none; color: var(--text-muted, #888); font-size: 0.8em; cursor: pointer; text-decoration: underline; margin-top: 4px;">
Create a new passkey instead
</button>
<!-- Returning user view (has passkey) -->
<div id="anon-setup-returning" class="lm-panel lm-panel-passkey" style="display: none;">
<div class="lm-passkey-icon"><i class="fa-solid fa-user-secret"></i></div>
<h2 class="lm-title">Use your anonymous passkey</h2>
<p class="lm-passkey-text" style="margin-top: 12px;">
Pick your saved passkey from Bitwarden, iCloud Keychain, or your OS to continue as the same anonymous user.
</p>
<button type="button" id="anon-setup-auth-btn" class="lm-btn lm-btn-primary">
<i class="fa-solid fa-fingerprint"></i> Use my passkey
</button>
<div id="anon-setup-ret-error" class="lm-error" style="display: none;"></div>
<p class="lm-footer">
<button type="button" id="anon-setup-switch-new" class="lm-textbtn">Create a new passkey instead</button>
</p>
</div>
</div>
</div>
</div>
@@ -733,31 +963,65 @@ async function loginWithPasskey() {
<div id="register-modal" style="display: none;">
<div class="login-modal-content">
<button id="register-modal-close">&times;</button>
<form class="login-form" id="modal-register-form" method="post" action="/register" novalidate>
<h2 style="text-align: center; margin-bottom: 20px;">{{ t('auth.register_title') }}</h2>
<div id="register-status" style="margin-bottom: 15px; text-align: center; font-size: 0.9em;"></div>
<input type="text" name="username" placeholder="{{ t('auth.username_placeholder') }}" autocomplete="off" required />
<input type="password" name="password" placeholder="{{ t('auth.password_placeholder') }}" autocomplete="off" required minlength="20"
title="Must be at least 20 characters long." />
<input type="password" name="password_confirm" placeholder="{{ t('auth.confirm_password') }}" autocomplete="off" required minlength="20" />
@if(!registration_open)
<input type="text" name="token" placeholder="{{ t('auth.invite_token') }}" autocomplete="off" required />
@elseif(registration_require_mail_andor_token)
<input type="email" name="email" placeholder="{{ t('auth.email_placeholder') }}" autocomplete="off" required />
@endif
<input type="text" name="email_confirm_field" style="display: none !important;" tabindex="-1" autocomplete="off" />
<p style="text-align: left; font-size: 0.9em; margin: 0; color: #fff;">
<input type="checkbox" id="tos-modal" name="tos" required />
<label for="tos-modal">@if(private_society){{ t('auth.tos_private') }}@else{{ t('auth.tos_public') }} <a href="/terms" target="_blank" style="color: var(--accent); text-decoration: underline;">{{ t('auth.tos_terms') }}</a>, <a href="/rules" target="_blank" style="color: var(--accent); text-decoration: underline;">{{ t('auth.tos_rules') }}</a> {{ t('auth.tos_age') }}@endif</label>
</p>
@if(recaptcha_enabled)
<div id="modal-register-recaptcha" style="margin: 10px 0;"></div>
@endif
<button type="submit">{{ t('auth.create_account') }}</button>
<div style="text-align: center; margin-top: 20px;">
<a href="#" id="register-to-login" style="font-size: 0.9em; color: var(--accent); text-decoration: underline;">{{ t('auth.back_to_login') }}</a>
<div id="modal-register-view">
<div class="lm-header">
<h2 class="lm-title">{{ t('auth.register_title') }}</h2>
<div class="lm-subtitle">{{ domain }}</div>
</div>
</form>
<form class="login-form lm-form" id="modal-register-form" method="post" action="/register" novalidate>
<div id="register-status"></div>
<label class="lm-field">
<i class="fa-solid fa-user lm-field-icon"></i>
<input class="lm-input" type="text" name="username" placeholder="{{ t('auth.username_placeholder') }}" aria-label="{{ t('auth.username_placeholder') }}" autocomplete="username" autocapitalize="off" spellcheck="false" required />
</label>
<label class="lm-field">
<i class="fa-solid fa-lock lm-field-icon"></i>
<input class="lm-input" type="password" name="password" placeholder="{{ t('auth.password_placeholder') }}" aria-label="{{ t('auth.password_placeholder') }}" autocomplete="new-password" required minlength="20"
title="Must be at least 20 characters long." />
<button type="button" class="lm-reveal" onclick="toggleLoginPassword(this)" aria-label="Show password" title="Show password">
<i class="fa-solid fa-eye"></i>
</button>
</label>
<label class="lm-field">
<i class="fa-solid fa-lock lm-field-icon"></i>
<input class="lm-input" type="password" name="password_confirm" placeholder="{{ t('auth.confirm_password') }}" aria-label="{{ t('auth.confirm_password') }}" autocomplete="new-password" required minlength="20" />
<button type="button" class="lm-reveal" onclick="toggleLoginPassword(this)" aria-label="Show password" title="Show password">
<i class="fa-solid fa-eye"></i>
</button>
</label>
@if(!registration_open)
<label class="lm-field">
<i class="fa-solid fa-ticket lm-field-icon"></i>
<input class="lm-input" type="text" name="token" placeholder="{{ t('auth.invite_token') }}" aria-label="{{ t('auth.invite_token') }}" autocomplete="off" spellcheck="false" required />
</label>
@elseif(registration_require_mail_andor_token)
<label class="lm-field">
<i class="fa-solid fa-envelope lm-field-icon"></i>
<input class="lm-input" type="email" name="email" placeholder="{{ t('auth.email_placeholder') }}" aria-label="{{ t('auth.email_placeholder') }}" autocomplete="email" required />
</label>
@endif
<input type="text" name="email_confirm_field" style="display: none !important;" tabindex="-1" autocomplete="off" />
<div class="lm-row">
<label class="lm-check lm-check-multiline" for="tos-modal">
<input type="checkbox" id="tos-modal" name="tos" required />
<span class="lm-check-box"><i class="fa-solid fa-check"></i></span>
<span>@if(private_society){{ t('auth.tos_private') }}@else{{ t('auth.tos_public') }} <a href="/terms" target="_blank" class="lm-link">{{ t('auth.tos_terms') }}</a>, <a href="/rules" target="_blank" class="lm-link">{{ t('auth.tos_rules') }}</a> {{ t('auth.tos_age') }}@endif</span>
</label>
</div>
@if(recaptcha_enabled)
<div id="modal-register-recaptcha" class="lm-recaptcha"></div>
@endif
<button type="submit" class="lm-btn lm-btn-primary">{{ t('auth.create_account') }}</button>
</form>
<p class="lm-footer">
<a href="#" id="register-to-login" class="lm-link">{{ t('auth.back_to_login') }}</a>
</p>
</div>
</div>
</div>
views/snippets/visibility-modal.html
+143
View File
@@ -0,0 +1,143 @@
{{-- Item visibility modal (shared by item-partial-modern / item-partial-legacy). JS hooks: #visibility-modal, #visibility-item-id, input[name=visibility], #visibility-modal-cancel/-save --}}
<div id="visibility-modal" class="modal-overlay" style="display: none;">
<div class="modal-content vis-modal-content">
<div class="vis-header">
<h3><i class="fa-solid fa-eye"></i> Change visibility</h3>
<p>Choose who can see this post.</p>
</div>
<div class="vis-body">
<form id="visibility-form" onsubmit="return false;">
<input type="hidden" id="visibility-item-id" value="{{ item.id }}" />
<div class="visibility-options">
<label class="visibility-option">
<input type="radio" name="visibility" value="0" />
<span class="vis-radio"></span>
<span class="vis-text">
<strong><i class="fa-solid fa-globe"></i> Public</strong>
<span>Visible to everyone in main feeds, search, and rankings.</span>
</span>
</label>
<label class="visibility-option">
<input type="radio" name="visibility" value="1" />
<span class="vis-radio"></span>
<span class="vis-text">
<strong><i class="fa-solid fa-link"></i> Unlisted</strong>
<span>Hidden from main feeds; accessible only via direct link or slug.</span>
</span>
</label>
<label class="visibility-option">
<input type="radio" name="visibility" value="2" />
<span class="vis-radio"></span>
<span class="vis-text">
<strong><i class="fa-solid fa-lock"></i> Private</strong>
<span>Only visible to you and site moderators.</span>
</span>
</label>
@if(is_mod_or_admin)
<label class="visibility-option vis-danger">
<input type="radio" name="visibility" value="3" />
<span class="vis-radio"></span>
<span class="vis-text">
<strong><i class="fa-solid fa-ban"></i> Unavailable (451)</strong>
<span>Only visible to administrators. Serves HTTP 451 on direct media for all other users.</span>
</span>
</label>
@endif
</div>
</form>
</div>
<div class="modal-actions vis-footer">
<button type="button" class="btn-secondary" id="visibility-modal-cancel">Cancel</button>
<button type="button" class="btn-primary" id="visibility-modal-save">Save visibility</button>
</div>
</div>
</div>
<style>
/* Visibility modal — same rules as the report/info modals: square, flat, fixed header/footer, full screen on phones */
#visibility-modal .vis-modal-content {
--vm-accent: var(--accent, #0096ff);
--vm-text: var(--text-color, #fff);
--vm-muted: var(--text-muted, #8a8f98);
--vm-surface: rgba(255, 255, 255, 0.04);
--vm-border: rgba(255, 255, 255, 0.1);
--vm-danger: #ff5c5c;
width: min(440px, 92vw);
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(--vm-text);
}
#visibility-modal .vis-modal-content * { border-radius: 0 !important; }
#visibility-modal .vis-header { flex-shrink: 0; padding: 20px 24px 14px; border-bottom: 1px solid var(--vm-border); }
#visibility-modal .vis-header h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.2em; font-weight: 700; color: var(--vm-text); }
#visibility-modal .vis-header h3 i { color: var(--vm-accent); font-size: 0.9em; }
#visibility-modal .vis-header p { margin: 6px 0 0; font-size: 0.85em; color: var(--vm-muted); }
#visibility-modal .vis-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 24px; }
#visibility-modal .visibility-options { display: flex; flex-direction: column; gap: 6px; }
#visibility-modal .visibility-option {
display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px;
background: var(--vm-surface); border: 1px solid var(--vm-border);
cursor: pointer; user-select: none; transition: border-color 0.15s, background 0.15s;
}
#visibility-modal .visibility-option:hover { border-color: rgba(255, 255, 255, 0.22); }
#visibility-modal .visibility-option:has(input:checked) { border-color: var(--vm-accent); background: color-mix(in srgb, var(--vm-accent) 8%, transparent); }
#visibility-modal .visibility-option input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
#visibility-modal .vis-radio {
position: relative; width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
border: 1px solid rgba(255, 255, 255, 0.28); background: var(--vm-surface); transition: border-color 0.15s;
}
#visibility-modal .vis-radio::after {
content: ''; position: absolute; inset: 4px; background: var(--vm-accent); transform: scale(0); transition: transform 0.15s;
}
#visibility-modal .visibility-option input:checked + .vis-radio { border-color: var(--vm-accent); }
#visibility-modal .visibility-option input:checked + .vis-radio::after { transform: scale(1); }
#visibility-modal .visibility-option input:focus-visible + .vis-radio { outline: 2px solid var(--vm-accent); outline-offset: 2px; }
#visibility-modal .vis-text { display: flex; flex-direction: column; gap: 3px; font-size: 0.88em; line-height: 1.4; }
#visibility-modal .vis-text strong { display: flex; align-items: center; gap: 7px; color: var(--vm-text); font-weight: 700; }
#visibility-modal .vis-text strong i { width: 14px; text-align: center; color: var(--vm-muted); }
#visibility-modal .visibility-option:has(input:checked) .vis-text strong i { color: var(--vm-accent); }
#visibility-modal .vis-text > span { color: var(--vm-muted); }
#visibility-modal .vis-danger .vis-text strong,
#visibility-modal .vis-danger .vis-text strong i { color: var(--vm-danger); }
#visibility-modal .vis-danger:has(input:checked) { border-color: var(--vm-danger); background: rgba(255, 92, 92, 0.08); }
#visibility-modal .vis-danger input:checked + .vis-radio { border-color: var(--vm-danger); }
#visibility-modal .vis-danger .vis-radio::after { background: var(--vm-danger); }
#visibility-modal .vis-footer {
flex-shrink: 0; display: flex; justify-content: flex-end; gap: 8px; margin: 0;
padding: 14px 24px; border-top: 1px solid var(--vm-border); background: rgba(0, 0, 0, 0.2);
}
#visibility-modal .vis-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;
}
#visibility-modal #visibility-modal-cancel { background: transparent; border: 1px solid var(--vm-border); color: var(--vm-muted); font-weight: 600; }
#visibility-modal #visibility-modal-cancel:hover { color: var(--vm-text); border-color: rgba(255, 255, 255, 0.25); background: var(--vm-surface); }
#visibility-modal #visibility-modal-save {
background: var(--vm-accent); border: 1px solid var(--vm-accent); color: #000;
font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
}
#visibility-modal #visibility-modal-save:hover:not(:disabled) { background: transparent; color: var(--vm-accent); }
#visibility-modal #visibility-modal-save:disabled { opacity: 0.6; cursor: progress; }
#visibility-modal .vis-footer button:focus-visible { outline: 2px solid var(--vm-accent); outline-offset: 2px; }
@media (max-width: 600px) {
#visibility-modal { padding: 0 !important; align-items: stretch !important; }
#visibility-modal .vis-modal-content {
width: 100vw; max-width: none;
height: 100vh; height: 100dvh; max-height: none;
border: 0 !important; box-shadow: none !important;
}
#visibility-modal .vis-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
#visibility-modal .vis-footer button { flex: 1; }
}
</style>