esifawafwu
This commit is contained in:
+126
-22
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user