373 lines
21 KiB
HTML
373 lines
21 KiB
HTML
<div id="info-modal" class="modal-overlay" style="display: none;">
|
||
<div class="modal-content infobox-modal-content">
|
||
<!-- Header -->
|
||
<div class="infobox-modal-header">
|
||
<div class="infobox-header-title">
|
||
<div class="infobox-header-text">
|
||
<h3 id="info-modal-title">{{ t('info_modal.title') || 'Post & File Details' }}</h3>
|
||
<span class="infobox-sub-heading" id="info-modal-subheading" data-item-id="{{ item.id }}" data-item-slug="{{ item.slug || '' }}">
|
||
ID: <code>{{ item.id }}</code>@if(item.slug) • Slug: <code>{{ item.slug }}</code>@endif
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<button type="button" class="infobox-close-icon-btn" id="info-modal-close-icon" title="{{ t('common.close') || 'Close' }}">
|
||
<i class="fa-solid fa-xmark"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Body -->
|
||
<div class="infobox-modal-body">
|
||
|
||
<!-- Section 1: Post Details -->
|
||
<div class="infobox-section" id="info-section-post">
|
||
<div class="infobox-section-header">
|
||
<i class="fa-solid fa-sliders"></i>
|
||
<span>Post Configuration</span>
|
||
</div>
|
||
|
||
<div class="infobox-cards-grid">
|
||
|
||
<div class="infobox-card">
|
||
<label class="infobox-card-label"><i class="fa-solid fa-eye"></i> Visibility</label>
|
||
<div class="infobox-card-value-row">
|
||
<span id="info-visibility-label" class="visibility-badge vis-{{ item.visibility || 0 }}">
|
||
@if(item.visibility === 3)
|
||
<i class="fa-solid fa-ban" style="color: var(--color-danger, #ff4444);"></i> Unavailable (451)
|
||
@elseif(item.visibility === 2)
|
||
<i class="fa-solid fa-lock" style="color: var(--color-danger, #ff4444);"></i> Private
|
||
@elseif(item.visibility === 1)
|
||
<i class="fa-solid fa-link" style="color: var(--color-warning, #ffbb33);"></i> Unlisted
|
||
@else
|
||
<i class="fa-solid fa-globe" style="color: var(--color-success, #00C851);"></i> Public
|
||
@endif
|
||
</span>
|
||
@if(can_manage_item)
|
||
<button type="button" id="info-visibility-edit-btn" class="infobox-action-btn" data-item-id="{{ item.id }}" data-visibility="{{ item.visibility || 0 }}">
|
||
<i class="fa-solid fa-pen"></i> Edit
|
||
</button>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
|
||
@if(enable_expiring_uploads !== false)
|
||
<div class="infobox-card">
|
||
<label class="infobox-card-label"><i class="fa-solid fa-hourglass-half"></i> Expiration</label>
|
||
<div class="infobox-expiry-content">
|
||
<span id="info-expiry-label" class="expiry-status-label" title="{{ item.expires_at ? new Date(item.expires_at * 1000).toLocaleString() : '' }}">
|
||
@if(item.expires_at)
|
||
<i class="fa-solid fa-clock" style="color: #ffaa00;"></i> {{ item.expires_in || ('in ' + new Date(item.expires_at * 1000).toLocaleString()) }}
|
||
@else
|
||
<i class="fa-solid fa-clock-slash" style="color: var(--text-muted, #888);"></i> Permanent
|
||
@endif
|
||
</span>
|
||
@if(can_manage_item)
|
||
<div class="info-expiry-edit-controls">
|
||
<select id="info-expiry-select" class="infobox-select" data-item-id="{{ item.id }}">
|
||
<option value="permanent" {{ !item.expires_at ? 'selected' : '' }}>Permanent</option>
|
||
<option value="30minutes">30 Minutes</option>
|
||
<option value="1hour">1 Hour</option>
|
||
<option value="24hours">24 Hours</option>
|
||
<option value="1week">1 Week</option>
|
||
<option value="1month">1 Month</option>
|
||
</select>
|
||
<button type="button" id="info-set-expiry-btn" class="infobox-action-btn" data-item-id="{{ item.id }}" title="Save Expiration">
|
||
<i class="fa-solid fa-check"></i>
|
||
</button>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Section 2: Technical File Specifications -->
|
||
<div class="infobox-section" id="info-section-specs">
|
||
<div class="infobox-section-header">
|
||
<i class="fa-solid fa-file-code"></i>
|
||
<span id="info-specs-header-title">Technical Specifications</span>
|
||
</div>
|
||
|
||
<div class="infobox-cards-grid">
|
||
<div class="infobox-card" id="info-card-filesize">
|
||
<label class="infobox-card-label"><i class="fa-solid fa-hard-drive"></i> File Size</label>
|
||
<div class="infobox-card-value font-mono" id="info-file-size">{{ item.size }}</div>
|
||
</div>
|
||
|
||
<div class="infobox-card" id="info-card-dimensions" @if(!item.width || !item.height)style="display: none;"@endif>
|
||
<label class="infobox-card-label"><i class="fa-solid fa-ruler-combined"></i> Dimensions</label>
|
||
<div class="infobox-card-value font-mono" id="info-file-dimensions">@if(item.width && item.height){{ item.width }} × {{ item.height }} px@endif</div>
|
||
</div>
|
||
|
||
<div class="infobox-card" id="info-card-mime">
|
||
<label class="infobox-card-label"><i class="fa-solid fa-file-lines"></i> MIME Type</label>
|
||
<div class="infobox-card-value"><code class="mime-pill" id="info-file-mime">{{ item.mime }}</code></div>
|
||
</div>
|
||
|
||
<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>
|
||
|
||
@if(item.src && item.src.short)
|
||
<div class="infobox-card full-width" id="info-card-source">
|
||
<label class="infobox-card-label"><i class="fa-solid fa-link"></i> Source URL</label>
|
||
<div class="infobox-card-value">
|
||
<a href="{{ item.src.long }}" target="_blank" class="infobox-source-link" id="info-file-source">
|
||
<i class="fa-solid fa-globe"></i> {{ item.src.short }}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
<div class="infobox-card full-width" id="info-card-hash" @if(!item.checksum)style="display: none;"@endif>
|
||
<div class="infobox-card-label-row">
|
||
<label class="infobox-card-label"><i class="fa-solid fa-fingerprint"></i> SHA-256 Hash</label>
|
||
<button type="button" class="copy-hash-btn" id="info-copy-hash-btn" data-hash="@if(item.checksum){{ item.checksum.split('_bypass_')[0] }}@endif" title="Copy SHA-256 Hash">
|
||
<i class="fa-solid fa-copy"></i> Copy
|
||
</button>
|
||
</div>
|
||
<div class="info-hash-codeblock font-mono"><code id="info-file-hash">@if(item.checksum){{ item.checksum.split('_bypass_')[0] }}@endif</code></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Section 3: Reposts & Duplicates (if present) -->
|
||
@if(item.show_repost_row)
|
||
<div class="infobox-section" id="info-section-reposts">
|
||
<div class="infobox-section-header">
|
||
<i class="fa-solid fa-copy"></i>
|
||
<span>Similar & Duplicate Uploads</span>
|
||
</div>
|
||
<div class="infobox-reposts-list">
|
||
@each(item.reposts as rp)
|
||
<a href="/{{ rp.slug || rp.id }}" class="repost-pill {{ rp.match_type === 'phash' ? 'phash' : 'exact' }}" tooltip="{{ rp.match_type === 'phash' ? 'Visually similar (perceptual hash)' : 'Exact duplicate (checksum)' }}" flow="up">
|
||
<i class="fa-solid {{ rp.match_type === 'phash' ? 'fa-clone' : 'fa-copy' }}"></i>
|
||
<span>{{ rp.match_type === 'phash' ? '~#' : '#' }}{{ rp.slug || rp.id }}</span>
|
||
</a>
|
||
@endeach
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<div class="infobox-modal-footer">
|
||
@if(can_manage_item)
|
||
<button type="button" class="btn-infobox-action" id="info-rethumb-btn" data-item-id="{{ item.id }}">
|
||
<i class="fa-solid fa-arrows-rotate"></i> Regenerate Thumbnail
|
||
</button>
|
||
@endif
|
||
<button type="button" class="btn-infobox-close" id="info-modal-close">{{ t('common.close') || 'Close' }}</button>
|
||
</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;
|
||
/* Scrolls (wheel, touch, keyboard) but shows no scrollbar in any browser.
|
||
NOTE: no backticks or dollar-brace in views, the template engine compiles them as JS template literals */
|
||
scrollbar-width: none !important;
|
||
-ms-overflow-style: none;
|
||
}
|
||
#info-modal .infobox-modal-content .infobox-modal-body::-webkit-scrollbar { display: none; width: 0; height: 0; }
|
||
@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>
|