Elijah/pdfsplitter
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

initial commit

Browse source
This commit is contained in:
Elijah 2026-05-20 17:40:17 -07:00
commit 27325ea5f1
2537 changed files with 328078 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

878
public/app.js Normal file
View file

@ -0,0 +1,878 @@
// ══════════════════════════════════════════════════════════
// PDF Splitter – Web Client
// ══════════════════════════════════════════════════════════
// ── State ──────────────────────────────────────────────────
let sessionId = null;
let pdfDoc = null;
let totalPages = 0;
let allChapters = [];
let chapters = [];
let selectedPages = new Set();
let maxDepth = 1;
let lightboxPages = [];
let lightboxIndex = -1;
// ── DOM References ─────────────────────────────────────────
const fileInput = document.getElementById('file-input-hidden');
const fileInfo = document.getElementById('file-info');
const fileName = document.getElementById('file-name');
const filePages = document.getElementById('file-pages');
const chapterLoad = document.getElementById('chapter-loading');
const chapterNone = document.getElementById('chapter-none');
const chapterList = document.getElementById('chapter-list');
const pageInput = document.getElementById('page-input');
const pageCount = document.getElementById('page-count');
const previewEmpty = document.getElementById('preview-empty');
const previewGrid = document.getElementById('preview-grid');
const depthSelect = document.getElementById('depth-select');
const depthControl = document.getElementById('depth-control');
const lightbox = document.getElementById('lightbox');
const lbCanvas = document.getElementById('lightbox-canvas');
const lbClose = document.getElementById('lightbox-close');
const lbPageInfo = document.getElementById('lightbox-page-info');
const lbPrev = document.getElementById('lightbox-prev');
const lbNext = document.getElementById('lightbox-next');
const resizeHandle = document.getElementById('resize-handle');
const sidebar = document.getElementById('sidebar');
const chapterSearch = document.getElementById('chapter-search');
const chapterSearchWrap = document.getElementById('chapter-search-wrap');
const btnSplit = document.getElementById('btn-split');
const dropOverlay = document.getElementById('drop-overlay');
const uploadOverlay = document.getElementById('upload-overlay');
const uploadStatus = document.getElementById('upload-status');
const loginOverlay = document.getElementById('login-overlay');
const loginForm = document.getElementById('login-form');
const loginPassword = document.getElementById('login-password');
const btnAdminSettings = document.getElementById('btn-admin-settings');
const adminModal = document.getElementById('admin-modal');
const adminClose = document.getElementById('admin-close');
const adminStatsContainer = document.getElementById('admin-stats-container');
const btnAdminClearCache = document.getElementById('btn-admin-clear-cache');
const btnAdminClearLogins = document.getElementById('btn-admin-clear-logins');
const adminPasswordForm = document.getElementById('admin-password-form');
const adminNewPassword = document.getElementById('admin-new-password');
// ── Authentication ─────────────────────────────────────────
let authToken = localStorage.getItem('pdf_auth_token') || '';
async function checkAuth() {
try {
const res = await fetch('/api/check-auth', {
headers: { 'x-auth-token': authToken }
});
if (res.ok) {
const data = await res.json();
loginOverlay.classList.add('hidden');
applyRole(data.role);
connectWebSocket();
} else {
loginOverlay.classList.remove('hidden');
}
} catch (e) {
loginOverlay.classList.remove('hidden');
}
}
function applyRole(role) {
if (role === 'admin') {
document.body.classList.add('role-admin');
document.body.classList.remove('role-user');
} else {
document.body.classList.add('role-user');
document.body.classList.remove('role-admin');
}
}
loginForm.addEventListener('submit', async (e) => {
e.preventDefault();
const password = loginPassword.value;
try {
const res = await fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ password })
});
const data = await res.json();
if (res.ok) {
if (data.token !== 'no-auth') {
authToken = data.token;
localStorage.setItem('pdf_auth_token', authToken);
}
loginOverlay.classList.add('hidden');
applyRole(data.role);
connectWebSocket();
} else {
showToast(data.error || 'Invalid password', 'error');
}
} catch (err) {
showToast('Login failed', 'error');
}
});
checkAuth();
// ── Admin Panel ────────────────────────────────────────────
btnAdminSettings.addEventListener('click', () => {
adminModal.classList.remove('hidden');
btnAdminSettings.classList.remove('hidden'); // to be safe
fetchAdminStats();
});
adminClose.addEventListener('click', () => {
adminModal.classList.add('hidden');
});
async function fetchAdminStats() {
adminStatsContainer.innerHTML = '<div class="spinner"></div> Loading…';
try {
const res = await fetch('/api/admin/stats', {
headers: { 'x-auth-token': authToken }
});
if (!res.ok) throw new Error('Failed to load stats');
const stats = await res.json();
// Format uptime
const h = Math.floor(stats.uptime / 3600);
const m = Math.floor((stats.uptime % 3600) / 60);
const uptimeStr = `${h}h ${m}m`;
let html = `
<div class="admin-stats-row"><span>Uptime:</span> <strong>${uptimeStr}</strong></div>
<div class="admin-stats-row"><span>Memory Used:</span> <strong>${stats.memoryUsedMB} MB</strong></div>
<div class="admin-stats-row"><span>Active Uploads/Sessions:</span> <strong>${stats.activeSessions}</strong></div>
<div class="admin-stats-row"><span>Tracked IPs (Brute Force):</span> <strong>${stats.loginAttemptsTracked}</strong></div>
`;
if (stats.blockedIps.length > 0) {
html += `<div style="margin-top: 8px; font-weight: bold; color: var(--danger)">Currently Locked Out IPs:</div>`;
stats.blockedIps.forEach(b => {
html += `<div class="admin-stats-row" style="color: var(--danger)">
<span>${b.ip} (${b.attempts} fails):</span> <strong>${b.lockoutRemaining}s left</strong>
</div>`;
});
}
adminStatsContainer.innerHTML = html;
} catch (err) {
adminStatsContainer.innerHTML = `<span style="color: var(--danger)">Error loading stats</span>`;
}
}
btnAdminClearCache.addEventListener('click', async () => {
if (!confirm('This will delete all uploaded PDFs and immediately disconnect all users. Continue?')) return;
try {
const res = await fetch('/api/admin/clear-cache', {
method: 'POST',
headers: { 'x-auth-token': authToken }
});
const data = await res.json();
if (res.ok) {
showToast(`Cache cleared. Deleted ${data.deletedCount} files.`, 'success');
fetchAdminStats();
} else throw new Error(data.error);
} catch (err) {
showToast(err.message, 'error');
}
});
btnAdminClearLogins.addEventListener('click', async () => {
if (!confirm('Clear all IP lockouts and brute-force tracking?')) return;
try {
const res = await fetch('/api/admin/clear-logins', {
method: 'POST',
headers: { 'x-auth-token': authToken }
});
if (res.ok) {
showToast('Login tracking reset.', 'success');
fetchAdminStats();
} else throw new Error('Failed to reset logins');
} catch (err) {
showToast(err.message, 'error');
}
});
adminPasswordForm.addEventListener('submit', async (e) => {
e.preventDefault();
const newPassword = adminNewPassword.value;
try {
const res = await fetch('/api/admin/change-password', {
method: 'POST',
headers: { 'x-auth-token': authToken, 'Content-Type': 'application/json' },
body: JSON.stringify({ newPassword })
});
if (res.ok) {
showToast('User password updated successfully!', 'success');
adminNewPassword.value = '';
} else throw new Error('Failed to update password');
} catch (err) {
showToast(err.message, 'error');
}
});
// ── WebSocket ──────────────────────────────────────────────
let ws = null;
function connectWebSocket() {
const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
ws = new WebSocket(`${protocol}//${location.host}`);
ws.onopen = () => {
if (sessionId) {
ws.send(JSON.stringify({ type: 'register', sessionId, token: authToken }));
}
};
ws.onclose = () => {
// Reconnect after 3 seconds
setTimeout(connectWebSocket, 3000);
};
}
// ── Sidebar Resize ─────────────────────────────────────────
const SIDEBAR_MIN = 250;
const SIDEBAR_MAX = 600;
let isResizing = false;
resizeHandle.addEventListener('mousedown', (e) => {
e.preventDefault();
isResizing = true;
resizeHandle.classList.add('dragging');
document.body.classList.add('resizing');
});
document.addEventListener('mousemove', (e) => {
if (!isResizing) return;
const appRect = document.getElementById('app').getBoundingClientRect();
let newWidth = e.clientX - appRect.left;
newWidth = Math.max(SIDEBAR_MIN, Math.min(SIDEBAR_MAX, newWidth));
document.documentElement.style.setProperty('--sidebar-width', newWidth + 'px');
});
document.addEventListener('mouseup', () => {
if (!isResizing) return;
isResizing = false;
resizeHandle.classList.remove('dragging');
document.body.classList.remove('resizing');
});
// ── File Upload ────────────────────────────────────────────
fileInput.addEventListener('change', () => {
if (fileInput.files.length > 0) uploadFile(fileInput.files[0]);
});
// ── Drag & Drop ────────────────────────────────────────────
let dragCounter = 0;
document.addEventListener('dragenter', (e) => {
e.preventDefault();
dragCounter++;
if (dragCounter === 1) dropOverlay.classList.remove('hidden');
});
document.addEventListener('dragleave', (e) => {
e.preventDefault();
dragCounter--;
if (dragCounter <= 0) {
dragCounter = 0;
dropOverlay.classList.add('hidden');
}
});
document.addEventListener('dragover', (e) => {
e.preventDefault();
});
document.addEventListener('drop', (e) => {
e.preventDefault();
dragCounter = 0;
dropOverlay.classList.add('hidden');
const file = e.dataTransfer.files[0];
if (!file) return;
if (file.type !== 'application/pdf' && !file.name.toLowerCase().endsWith('.pdf')) {
showToast('Please drop a PDF file', 'error');
return;
}
uploadFile(file);
});
// ── Upload & Load PDF ──────────────────────────────────────
async function uploadFile(file) {
uploadOverlay.classList.remove('hidden');
uploadStatus.textContent = `Uploading ${file.name}…`;
try {
const formData = new FormData();
formData.append('pdf', file);
const res = await fetch('/api/upload', {
method: 'POST',
headers: { 'x-auth-token': authToken },
body: formData
});
if (!res.ok) {
const err = await res.json();
throw new Error(err.error || 'Upload failed');
}
const data = await res.json();
sessionId = data.sessionId;
// Register with WebSocket
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'register', sessionId, token: authToken }));
}
uploadStatus.textContent = 'Loading preview…';
// Load PDF from server for client-side rendering
const pdfUrl = `/api/pdf/${sessionId}`;
pdfDoc = await pdfjsLib.getDocument({
url: pdfUrl,
httpHeaders: { 'x-auth-token': authToken }
}).promise;
totalPages = pdfDoc.numPages;
// Update UI
fileName.textContent = data.originalName;
fileInfo.classList.remove('hidden');
filePages.textContent = `${totalPages} pages`;
// Reset state
selectedPages.clear();
chapters = [];
allChapters = [];
chapterList.innerHTML = '';
previewGrid.innerHTML = '';
pageInput.value = '';
previewEmpty.classList.remove('hidden');
previewGrid.classList.add('hidden');
chapterNone.classList.add('hidden');
chapterLoad.classList.remove('hidden');
chapterSearchWrap.classList.add('hidden');
updateState();
await detectChapters();
uploadOverlay.classList.add('hidden');
showToast(`Loaded: ${data.originalName}`, 'success');
} catch (err) {
uploadOverlay.classList.add('hidden');
showToast(err.message, 'error');
console.error('Upload error:', err);
}
}
// ── Depth Control ──────────────────────────────────────────
depthSelect.addEventListener('change', () => {
maxDepth = parseInt(depthSelect.value);
filterAndRenderChapters();
});
// ── Chapter Detection ──────────────────────────────────────
async function detectChapters() {
allChapters = [];
chapters = [];
try {
const outline = await pdfDoc.getOutline();
if (outline && outline.length > 0) {
const flatEntries = await flattenOutlineRecursive(outline, 0);
if (flatEntries.length > 0) {
for (let i = 0; i < flatEntries.length; i++) {
let endPage = totalPages;
for (let j = i + 1; j < flatEntries.length; j++) {
if (flatEntries[j].depth <= flatEntries[i].depth) {
endPage = flatEntries[j].startPage - 1;
break;
}
}
allChapters.push({
title: flatEntries[i].title,
startPage: flatEntries[i].startPage,
endPage: Math.max(flatEntries[i].startPage, endPage),
depth: flatEntries[i].depth
});
}
}
}
} catch (e) {
console.warn('Outline extraction failed:', e);
}
if (allChapters.length === 0) {
await detectChaptersFromText();
}
chapterLoad.classList.add('hidden');
if (allChapters.length === 0) {
chapterNone.classList.remove('hidden');
depthControl.classList.add('hidden');
} else {
chapterNone.classList.add('hidden');
depthControl.classList.remove('hidden');
chapterSearchWrap.classList.remove('hidden');
chapterSearch.value = '';
filterAndRenderChapters();
}
}
function filterAndRenderChapters() {
let filtered = allChapters.filter(ch => ch.depth <= maxDepth);
const seen = new Set();
filtered = filtered.filter(ch => {
const key = `${ch.startPage}-${ch.endPage}`;
if (seen.has(key)) return false;
seen.add(key);
return true;
});
chapters = filtered;
if (chapters.length === 0) {
chapterNone.classList.remove('hidden');
} else {
chapterNone.classList.add('hidden');
}
renderChapterList();
syncChapterCheckboxes();
}
async function flattenOutlineRecursive(outline, depth) {
const entries = [];
for (const item of outline) {
let pageNum = null;
try {
if (item.dest) {
let dest = item.dest;
if (typeof dest === 'string') {
dest = await pdfDoc.getDestination(dest);
}
if (dest && dest[0]) {
const pageIndex = await pdfDoc.getPageIndex(dest[0]);
pageNum = pageIndex + 1;
}
}
} catch (e) {
console.warn('Could not resolve dest for:', item.title, e);
}
if (pageNum !== null) {
entries.push({ title: item.title.trim(), startPage: pageNum, depth });
}
if (item.items && item.items.length > 0) {
const children = await flattenOutlineRecursive(item.items, depth + 1);
entries.push(...children);
}
}
return entries;
}
async function detectChaptersFromText() {
const chapterPattern = /(?:^|\n)\s*(?:CHAPTER|Chapter|chapter)\s+(\d+)[\s.:–—-]*(.*)/;
const unitPattern = /(?:^|\n)\s*(?:UNIT|Unit|unit)\s+(\d+)[\s.:–—-]*(.*)/;
const maxPagesToScan = Math.min(totalPages, 800);
const rawChapters = [];
for (let i = 1; i <= maxPagesToScan; i++) {
try {
const page = await pdfDoc.getPage(i);
const textContent = await page.getTextContent();
const text = textContent.items.map(item => item.str).join(' ');
let match = text.match(chapterPattern);
if (match) {
const title = `Chapter ${match[1]}${match[2] ? ': ' + match[2].trim() : ''}`;
if (!rawChapters.some(c => c.title === title)) {
rawChapters.push({ title, startPage: i });
}
}
match = text.match(unitPattern);
if (match) {
const title = `Unit ${match[1]}${match[2] ? ': ' + match[2].trim() : ''}`;
if (!rawChapters.some(c => c.title === title)) {
rawChapters.push({ title, startPage: i });
}
}
} catch (e) { /* skip */ }
}
rawChapters.sort((a, b) => a.startPage - b.startPage);
for (let i = 0; i < rawChapters.length; i++) {
const endPage = (i + 1 < rawChapters.length) ? rawChapters[i + 1].startPage - 1 : totalPages;
allChapters.push({
title: rawChapters[i].title,
startPage: rawChapters[i].startPage,
endPage: Math.max(rawChapters[i].startPage, endPage),
depth: 0
});
}
}
// ── Render Chapter List ────────────────────────────────────
function renderChapterList() {
chapterList.innerHTML = '';
chapters.forEach((ch, idx) => {
const item = document.createElement('label');
item.className = 'chapter-item';
item.style.paddingLeft = `${8 + (ch.depth || 0) * 16}px`;
const cb = document.createElement('input');
cb.type = 'checkbox';
cb.dataset.index = idx;
cb.addEventListener('change', () => onChapterToggle(idx, cb.checked));
const titleSpan = document.createElement('span');
titleSpan.className = 'chapter-title';
if (ch.depth >= 2) titleSpan.style.opacity = '0.75';
titleSpan.textContent = ch.title;
titleSpan.title = `${ch.title} (pages ${ch.startPage}–${ch.endPage})`;
titleSpan.dataset.originalTitle = ch.title;
const pagesSpan = document.createElement('span');
pagesSpan.className = 'chapter-pages';
const count = ch.endPage - ch.startPage + 1;
pagesSpan.textContent = `${ch.startPage}–${ch.endPage} (${count}p)`;
item.appendChild(cb);
item.appendChild(titleSpan);
item.appendChild(pagesSpan);
chapterList.appendChild(item);
});
}
// ── Chapter Search ─────────────────────────────────────────
chapterSearch.addEventListener('input', () => {
const query = chapterSearch.value.trim().toLowerCase();
const items = chapterList.querySelectorAll('.chapter-item');
items.forEach(item => {
const titleSpan = item.querySelector('.chapter-title');
const original = titleSpan.dataset.originalTitle || titleSpan.textContent;
if (!query) {
item.classList.remove('search-hidden');
titleSpan.textContent = original;
return;
}
const lowerTitle = original.toLowerCase();
if (lowerTitle.includes(query)) {
item.classList.remove('search-hidden');
const startIdx = lowerTitle.indexOf(query);
const before = original.substring(0, startIdx);
const match = original.substring(startIdx, startIdx + query.length);
const after = original.substring(startIdx + query.length);
titleSpan.innerHTML = `${escapeHtml(before)}<mark>${escapeHtml(match)}</mark>${escapeHtml(after)}`;
} else {
item.classList.add('search-hidden');
titleSpan.textContent = original;
}
});
});
function escapeHtml(str) {
return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
// ── Chapter Toggle ─────────────────────────────────────────
function onChapterToggle(index, checked) {
const ch = chapters[index];
for (let p = ch.startPage; p <= ch.endPage; p++) {
if (checked) selectedPages.add(p);
else selectedPages.delete(p);
}
buildPageInputFromSelection();
updateState();
}
function syncChapterCheckboxes() {
const checkboxes = chapterList.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(cb => {
const idx = parseInt(cb.dataset.index);
const ch = chapters[idx];
if (!ch) return;
let allSelected = true;
for (let p = ch.startPage; p <= ch.endPage; p++) {
if (!selectedPages.has(p)) { allSelected = false; break; }
}
cb.checked = allSelected;
});
}
function buildPageInputFromSelection() {
if (selectedPages.size === 0) {
pageInput.value = '';
return;
}
const sorted = [...selectedPages].sort((a, b) => a - b);
const ranges = [];
let start = sorted[0], end = sorted[0];
for (let i = 1; i < sorted.length; i++) {
if (sorted[i] === end + 1) {
end = sorted[i];
} else {
ranges.push(start === end ? `${start}` : `${start}-${end}`);
start = end = sorted[i];
}
}
ranges.push(start === end ? `${start}` : `${start}-${end}`);
pageInput.value = ranges.join(', ');
}
// ── Page Input Parsing ─────────────────────────────────────
pageInput.addEventListener('input', () => {
selectedPages.clear();
const raw = pageInput.value;
if (!raw.trim()) { updateState(); return; }
const parts = raw.split(',');
for (const part of parts) {
const trimmed = part.trim();
const chMatch = trimmed.match(/^(?:ch(?:apter)?)\s*(\d+)(?:\s*[-–]\s*(\d+))?$/i);
if (chMatch) {
const from = parseInt(chMatch[1]);
const to = chMatch[2] ? parseInt(chMatch[2]) : from;
for (let c = from; c <= to; c++) {
const ch = chapters.find(ch => {
const m = ch.title.match(/(\d+)/);
return m && parseInt(m[1]) === c;
});
if (ch) {
for (let p = ch.startPage; p <= ch.endPage; p++) selectedPages.add(p);
}
}
continue;
}
const rangeMatch = trimmed.match(/^(\d+)\s*[-–]\s*(\d+)$/);
if (rangeMatch) {
const from = parseInt(rangeMatch[1]);
const to = parseInt(rangeMatch[2]);
for (let p = Math.max(1, from); p <= Math.min(totalPages, to); p++) {
selectedPages.add(p);
}
continue;
}
const single = parseInt(trimmed);
if (!isNaN(single) && single >= 1 && single <= totalPages) {
selectedPages.add(single);
}
}
updateState();
});
// ── Update State ───────────────────────────────────────────
function updateState() {
pageCount.textContent = selectedPages.size;
btnSplit.disabled = selectedPages.size === 0 || !sessionId;
syncChapterCheckboxes();
updatePreview();
}
// ── Preview Rendering ──────────────────────────────────────
let thumbElements = [];
function updatePreview() {
if (selectedPages.size === 0) {
previewEmpty.classList.remove('hidden');
previewGrid.classList.add('hidden');
previewGrid.innerHTML = '';
thumbElements = [];
return;
}
previewEmpty.classList.add('hidden');
previewGrid.classList.remove('hidden');
previewGrid.innerHTML = '';
thumbElements = [];
const sorted = [...selectedPages].sort((a, b) => a - b);
for (const pageNum of sorted) {
const wrapper = document.createElement('div');
wrapper.className = 'page-thumb';
wrapper.addEventListener('click', () => openLightbox(pageNum));
const canvas = document.createElement('canvas');
wrapper.appendChild(canvas);
const label = document.createElement('div');
label.className = 'page-thumb-label';
label.textContent = `Page ${pageNum}`;
wrapper.appendChild(label);
previewGrid.appendChild(wrapper);
thumbElements.push({ canvas, pageNum, wrapper });
}
// Lazy rendering with IntersectionObserver
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const thumb = thumbElements.find(t => t.wrapper === entry.target);
if (thumb && !thumb.rendered) {
thumb.rendered = true;
renderPageThumb(thumb.canvas, thumb.pageNum);
}
}
});
}, { root: previewGrid, rootMargin: '200px' });
thumbElements.forEach(t => observer.observe(t.wrapper));
}
async function renderPageThumb(canvas, pageNum) {
try {
const page = await pdfDoc.getPage(pageNum);
const viewport = page.getViewport({ scale: 1 });
const thumbWidth = 180;
const scale = thumbWidth / viewport.width;
const scaledViewport = page.getViewport({ scale });
canvas.width = scaledViewport.width;
canvas.height = scaledViewport.height;
const ctx = canvas.getContext('2d');
await page.render({
canvasContext: ctx,
viewport: scaledViewport
}).promise;
} catch (e) {
console.warn('Render failed for page', pageNum, e);
}
}
// ── Lightbox ───────────────────────────────────────────────
function openLightbox(pageNum) {
lightboxPages = [...selectedPages].sort((a, b) => a - b);
lightboxIndex = lightboxPages.indexOf(pageNum);
if (lightboxIndex === -1) lightboxIndex = 0;
lightbox.classList.remove('hidden');
renderLightboxPage();
}
function closeLightbox() {
lightbox.classList.add('hidden');
}
async function renderLightboxPage() {
if (lightboxIndex < 0 || lightboxIndex >= lightboxPages.length) return;
const pageNum = lightboxPages[lightboxIndex];
lbPageInfo.textContent = `Page ${pageNum} · ${lightboxIndex + 1} of ${lightboxPages.length}`;
lbPrev.disabled = lightboxIndex <= 0;
lbNext.disabled = lightboxIndex >= lightboxPages.length - 1;
try {
const page = await pdfDoc.getPage(pageNum);
const viewport = page.getViewport({ scale: 1 });
const targetWidth = Math.min(viewport.width * 2, 1400);
const scale = targetWidth / viewport.width;
const scaledViewport = page.getViewport({ scale });
lbCanvas.width = scaledViewport.width;
lbCanvas.height = scaledViewport.height;
const ctx = lbCanvas.getContext('2d');
ctx.clearRect(0, 0, lbCanvas.width, lbCanvas.height);
await page.render({ canvasContext: ctx, viewport: scaledViewport }).promise;
} catch (e) {
console.warn('Lightbox render failed for page', pageNum, e);
}
}
lbClose.addEventListener('click', closeLightbox);
document.querySelector('.lightbox-backdrop').addEventListener('click', closeLightbox);
lbPrev.addEventListener('click', () => { if (lightboxIndex > 0) { lightboxIndex--; renderLightboxPage(); } });
lbNext.addEventListener('click', () => { if (lightboxIndex < lightboxPages.length - 1) { lightboxIndex++; renderLightboxPage(); } });
document.addEventListener('keydown', (e) => {
if (lightbox.classList.contains('hidden')) return;
if (e.key === 'Escape') closeLightbox();
if (e.key === 'ArrowLeft' && lightboxIndex > 0) { lightboxIndex--; renderLightboxPage(); }
if (e.key === 'ArrowRight' && lightboxIndex < lightboxPages.length - 1) { lightboxIndex++; renderLightboxPage(); }
});
// ── Split & Download ───────────────────────────────────────
btnSplit.addEventListener('click', async () => {
if (!sessionId || selectedPages.size === 0) return;
btnSplit.disabled = true;
btnSplit.innerHTML = `<div class="spinner"></div> Splitting…`;
try {
const res = await fetch('/api/split', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-auth-token': authToken
},
body: JSON.stringify({
sessionId,
pageNumbers: [...selectedPages]
})
});
if (!res.ok) {
const err = await res.json();
throw new Error(err.error || 'Split failed');
}
// Download the result
const blob = await res.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = res.headers.get('Content-Disposition')?.match(/filename="(.+)"/)?.[1] || 'split.pdf';
document.body.appendChild(a);
a.click();
a.remove();
URL.revokeObjectURL(url);
showToast(`Split complete: ${selectedPages.size} pages`, 'success');
} catch (err) {
showToast(err.message, 'error');
} finally {
btnSplit.disabled = false;
btnSplit.innerHTML = `
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
Split &amp; Download
`;
}
});
// ── Toast ──────────────────────────────────────────────────
function showToast(message, type = 'info') {
const container = document.getElementById('toast-container');
const toast = document.createElement('div');
toast.className = `toast ${type}`;
toast.textContent = message;
container.appendChild(toast);
setTimeout(() => {
toast.classList.add('fade-out');
setTimeout(() => toast.remove(), 260);
}, 3500);
}

198
public/index.html Normal file
View file

@ -0,0 +1,198 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF Splitter</title>
<meta name="description" content="Split PDF chapters and pages with a modern web interface">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📄</text></svg>">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header -->
<header id="header">
<div class="header-brand">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="header-icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="15" x2="15" y2="15"/></svg>
<h1>PDF Splitter</h1>
</div>
<button id="btn-admin-settings" class="admin-only icon-btn" aria-label="Admin Settings" title="Admin Settings">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
</button>
</header>
<!-- Main Layout -->
<main id="app">
<!-- Sidebar -->
<aside id="sidebar">
<!-- File Upload -->
<section class="card">
<h2 class="card-label">Source PDF</h2>
<label id="btn-open" class="btn-primary" for="file-input-hidden">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
Choose File
</label>
<input type="file" id="file-input-hidden" accept=".pdf" style="display:none">
<div id="file-info" class="file-info hidden">
<div id="file-name" class="file-name"></div>
<div id="file-pages" class="file-meta"></div>
</div>
</section>
<!-- Chapters -->
<section class="card" id="chapter-section">
<div class="card-header">
<h2 class="card-label">Chapters</h2>
<div id="depth-control" class="depth-control hidden">
<label class="depth-label" for="depth-select">Detail</label>
<select id="depth-select" class="depth-select">
<option value="1">Chapters</option>
<option value="2">Sections</option>
<option value="99">All</option>
</select>
</div>
</div>
<div id="chapter-loading" class="status-msg hidden">
<div class="spinner"></div>
<span>Detecting chapters…</span>
</div>
<div id="chapter-none" class="status-msg hidden">
<span>No chapters detected. Use page selection below.</span>
</div>
<div id="chapter-search-wrap" class="chapter-search-wrap hidden">
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input type="text" id="chapter-search" class="chapter-search" placeholder="Search chapters…" autocomplete="off" spellcheck="false">
</div>
<div id="chapter-list" class="chapter-list"></div>
</section>
<!-- Page Input -->
<section class="card">
<h2 class="card-label">Pages / Ranges</h2>
<div class="input-hint">e.g. 1-10, 15, 20-25</div>
<input type="text" id="page-input" class="text-input" placeholder="">
</section>
<!-- Action -->
<section class="card action-card">
<div class="page-count-row">
<span class="count-label">Selected pages</span>
<span id="page-count" class="count-value">0</span>
</div>
<button id="btn-split" class="btn-accent" disabled>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
Split &amp; Download
</button>
</section>
</aside>
<!-- Resize Handle -->
<div id="resize-handle" class="resize-handle"></div>
<!-- Preview Panel -->
<section id="preview">
<div id="preview-empty" class="preview-placeholder">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" class="placeholder-icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
<p>Upload a PDF and choose pages to preview</p>
</div>
<div id="preview-grid" class="preview-grid hidden"></div>
<!-- Lightbox -->
<div id="lightbox" class="lightbox hidden">
<div class="lightbox-backdrop"></div>
<div class="lightbox-content">
<button id="lightbox-close" class="lightbox-close" aria-label="Close">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
</button>
<div class="lightbox-page-info" id="lightbox-page-info"></div>
<div class="lightbox-canvas-wrap">
<canvas id="lightbox-canvas"></canvas>
</div>
<div class="lightbox-nav">
<button id="lightbox-prev" class="lightbox-nav-btn" aria-label="Previous">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
</button>
<button id="lightbox-next" class="lightbox-nav-btn" aria-label="Next">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 6 15 12 9 18"/></svg>
</button>
</div>
</div>
</div>
</section>
</main>
<!-- Drop Overlay -->
<div id="drop-overlay" class="drop-overlay hidden">
<div class="drop-overlay-content">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="drop-icon"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
<p>Drop PDF here</p>
</div>
</div>
<!-- Upload Progress -->
<div id="upload-overlay" class="upload-overlay hidden">
<div class="upload-overlay-content">
<div class="spinner large"></div>
<p id="upload-status">Uploading PDF…</p>
</div>
</div>
<!-- Login Overlay -->
<div id="login-overlay" class="login-overlay hidden">
<div class="login-box">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="login-icon"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
<h2>Protected Access</h2>
<p>Please enter the application password.</p>
<form id="login-form">
<input type="password" id="login-password" placeholder="Password" autocomplete="current-password" autofocus>
<button type="submit" class="btn-accent">Unlock</button>
</form>
</div>
</div>
<!-- Admin Modal -->
<div id="admin-modal" class="lightbox hidden">
<div class="lightbox-backdrop"></div>
<div class="admin-panel card">
<button id="admin-close" class="admin-close" aria-label="Close">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
<h2 class="admin-title">Admin Dashboard</h2>
<div class="admin-section">
<h3>Server Stats</h3>
<div class="admin-stats" id="admin-stats-container">
<div class="spinner"></div> Loading…
</div>
</div>
<div class="admin-section">
<h3>Actions</h3>
<div class="admin-actions">
<button id="btn-admin-clear-cache" class="btn-primary">Clear PDF Cache</button>
<button id="btn-admin-clear-logins" class="btn-primary">Reset Login Locks</button>
</div>
</div>
<div class="admin-section">
<h3>Change User Password</h3>
<p class="admin-hint">Updates the normal APP_PASSWORD instantly in memory. (Will revert on container restart unless you change it in Unraid).</p>
<form id="admin-password-form" class="admin-password-form">
<input type="password" id="admin-new-password" class="text-input" placeholder="New User Password" required>
<button type="submit" class="btn-primary">Update</button>
</form>
</div>
</div>
</div>
<!-- Toast container -->
<div id="toast-container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
</script>
<script src="app.js"></script>
</body>
</html>

918
public/style.css Normal file
View file

@ -0,0 +1,918 @@
/* ══════════════════════════════════════════════════════════
PDF Splitter – Web Edition (Premium Dark UI)
══════════════════════════════════════════════════════════ */
:root {
--bg-base: #09090b;
--bg-card: #131316;
--bg-card-hover: #1a1a1f;
--bg-input: #18181b;
--border: #27272a;
--border-light: #3f3f46;
--text-primary: #fafafa;
--text-secondary: #a1a1aa;
--text-muted: #71717a;
--accent: #7c3aed;
--accent-light: #a78bfa;
--accent-glow: rgba(124, 58, 237, 0.25);
--success: #22c55e;
--danger: #ef4444;
--radius: 10px;
--radius-sm: 6px;
--transition: 180ms ease;
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
--sidebar-width: 300px;
}
*, *::before, *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
body {
font-family: var(--font);
background: var(--bg-base);
color: var(--text-primary);
overflow: hidden;
height: 100vh;
display: flex;
flex-direction: column;
user-select: none;
}
/* ── Header ──────────────────────────────────────────────── */
#header {
display: flex;
align-items: center;
justify-content: space-between;
height: 48px;
padding: 0 18px;
background: #0c0c0f;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.header-brand {
display: flex;
align-items: center;
gap: 10px;
}
.header-icon {
width: 20px;
height: 20px;
color: var(--accent-light);
}
#header h1 {
font-size: 15px;
font-weight: 700;
color: var(--text-secondary);
letter-spacing: 0.3px;
}
/* ── Main Layout ─────────────────────────────────────────── */
#app {
display: flex;
flex: 1;
overflow: hidden;
}
/* ── Sidebar ─────────────────────────────────────────────── */
#sidebar {
width: var(--sidebar-width);
min-width: 0;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--border-light) transparent;
}
#sidebar::-webkit-scrollbar { width: 5px; }
#sidebar::-webkit-scrollbar-track { background: transparent; }
#sidebar::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 10px; }
/* ── Resize Handle ───────────────────────────────────────── */
.resize-handle {
width: 5px;
cursor: col-resize;
background: var(--border);
flex-shrink: 0;
position: relative;
transition: background 150ms ease;
z-index: 10;
}
.resize-handle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 3px;
height: 32px;
border-radius: 2px;
background: var(--border-light);
opacity: 0;
transition: opacity 150ms ease;
}
.resize-handle:hover,
.resize-handle.dragging {
background: var(--accent);
}
.resize-handle:hover::after,
.resize-handle.dragging::after {
opacity: 1;
}
body.resizing {
cursor: col-resize !important;
user-select: none !important;
}
body.resizing * {
cursor: col-resize !important;
}
/* ── Cards ───────────────────────────────────────────────── */
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px;
transition: border-color var(--transition);
}
.card:hover {
border-color: var(--border-light);
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.card-label {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--text-muted);
margin-bottom: 10px;
}
.card-header .card-label {
margin-bottom: 0;
}
.depth-control {
display: flex;
align-items: center;
gap: 6px;
}
.depth-label {
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.8px;
font-weight: 600;
}
.depth-select {
padding: 3px 6px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg-input);
color: var(--text-secondary);
font-size: 11px;
font-family: var(--font);
outline: none;
cursor: pointer;
transition: border-color var(--transition);
}
.depth-select:focus {
border-color: var(--accent);
}
/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary {
width: 100%;
padding: 10px 16px;
border: 1px dashed var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-input);
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all var(--transition);
}
.btn-primary svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary:hover {
border-color: var(--accent);
color: var(--accent-light);
background: rgba(124, 58, 237, 0.06);
}
.btn-accent {
width: 100%;
padding: 12px 16px;
border: none;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--accent), #6d28d9);
color: white;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all var(--transition);
box-shadow: 0 2px 12px var(--accent-glow);
}
.btn-accent svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-accent:hover:not(:disabled) {
filter: brightness(1.15);
box-shadow: 0 4px 20px var(--accent-glow);
transform: translateY(-1px);
}
.btn-accent:disabled {
opacity: 0.35;
cursor: not-allowed;
box-shadow: none;
}
.btn-accent:active:not(:disabled) {
transform: translateY(0);
}
/* ── File Info ───────────────────────────────────────────── */
.file-info {
margin-top: 10px;
padding: 10px;
background: var(--bg-input);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
}
.file-name {
font-size: 12.5px;
font-weight: 600;
color: var(--text-primary);
word-break: break-all;
line-height: 1.4;
}
.file-meta {
font-size: 11.5px;
color: var(--text-muted);
margin-top: 4px;
}
/* ── Chapter List ────────────────────────────────────────── */
.chapter-list {
display: flex;
flex-direction: column;
gap: 2px;
max-height: 45vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--border-light) transparent;
}
.chapter-list::-webkit-scrollbar { width: 4px; }
.chapter-list::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 10px; }
.chapter-item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 8px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--transition);
}
.chapter-item:hover { background: var(--bg-card-hover); }
.chapter-item input[type="checkbox"] {
appearance: none;
width: 16px;
height: 16px;
border: 1.5px solid var(--border-light);
border-radius: 4px;
background: var(--bg-input);
cursor: pointer;
flex-shrink: 0;
position: relative;
transition: all var(--transition);
}
.chapter-item input[type="checkbox"]:checked {
background: var(--accent);
border-color: var(--accent);
}
.chapter-item input[type="checkbox"]:checked::after {
content: '';
position: absolute;
top: 2px; left: 5px;
width: 4px; height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.chapter-title {
font-size: 12.5px;
color: var(--text-primary);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.3;
}
.chapter-pages {
font-size: 10.5px;
color: var(--text-muted);
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
/* ── Chapter Search ──────────────────────────────────────── */
.chapter-search-wrap {
position: relative;
margin-bottom: 6px;
}
.search-icon {
position: absolute;
left: 9px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
color: var(--text-muted);
pointer-events: none;
}
.chapter-search {
width: 100%;
padding: 7px 10px 7px 30px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-input);
color: var(--text-primary);
font-size: 12.5px;
font-family: var(--font);
outline: none;
transition: border-color var(--transition), box-shadow var(--transition);
}
.chapter-search::placeholder { color: var(--text-muted); }
.chapter-search:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
}
.chapter-item.search-hidden {
display: none !important;
}
.chapter-title mark {
background: rgba(124, 58, 237, 0.35);
color: inherit;
border-radius: 2px;
padding: 0 1px;
}
/* ── Text Input ──────────────────────────────────────────── */
.input-hint {
font-size: 11px;
color: var(--text-muted);
margin-bottom: 6px;
}
.text-input {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-input);
color: var(--text-primary);
font-size: 13px;
font-family: var(--font);
outline: none;
transition: border-color var(--transition), box-shadow var(--transition);
}
.text-input::placeholder { color: var(--text-muted); }
.text-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
}
/* ── Action Card ─────────────────────────────────────────── */
.action-card {
margin-top: auto;
}
.page-count-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.count-label { font-size: 12px; color: var(--text-secondary); }
.count-value {
font-size: 20px;
font-weight: 700;
color: var(--accent-light);
font-variant-numeric: tabular-nums;
}
/* ── Status Messages ─────────────────────────────────────── */
.status-msg {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--text-muted);
padding: 4px 0;
}
/* ── Spinner ─────────────────────────────────────────────── */
.spinner {
width: 16px; height: 16px;
border: 2px solid var(--border-light);
border-top-color: var(--accent-light);
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
.spinner.large {
width: 32px; height: 32px;
border-width: 3px;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ── Preview Panel ───────────────────────────────────────── */
#preview {
flex: 1;
display: flex;
overflow: hidden;
position: relative;
background: #0c0c0f;
}
.preview-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
gap: 14px;
color: var(--text-muted);
}
.placeholder-icon { width: 56px; height: 56px; opacity: 0.3; }
.preview-placeholder p { font-size: 13px; }
.preview-grid {
display: flex;
flex-wrap: wrap;
gap: 14px;
padding: 18px;
overflow-y: auto;
width: 100%;
align-content: flex-start;
justify-content: center;
scrollbar-width: thin;
scrollbar-color: var(--border-light) transparent;
}
.preview-grid::-webkit-scrollbar { width: 6px; }
.preview-grid::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 10px; }
.page-thumb {
position: relative;
background: white;
border-radius: var(--radius-sm);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
transition: transform var(--transition), box-shadow var(--transition);
cursor: pointer;
}
.page-thumb:hover {
transform: scale(1.03);
box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
.page-thumb canvas {
display: block;
width: 100%;
height: auto;
}
.page-thumb-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 3px 0;
font-size: 10.5px;
font-weight: 600;
color: white;
background: rgba(0,0,0,0.65);
backdrop-filter: blur(4px);
}
/* ── Toast ────────────────────────────────────────────────── */
#toast-container {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 40000;
pointer-events: none;
}
.toast {
padding: 10px 18px;
border-radius: var(--radius-sm);
font-size: 12.5px;
font-weight: 500;
color: white;
box-shadow: 0 4px 16px rgba(0,0,0,0.5);
animation: toastIn 300ms ease forwards;
pointer-events: auto;
}
.toast.success { background: #16a34a; }
.toast.error { background: #dc2626; }
.toast.info { background: #2563eb; }
.toast.fade-out {
animation: toastOut 250ms ease forwards;
}
@keyframes toastIn {
from { opacity: 0; transform: translateY(12px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(8px); }
}
/* ── Lightbox ─────────────────────────────────────────────── */
.lightbox {
position: absolute;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
animation: lbFadeIn 200ms ease;
}
.lightbox.hidden { display: none !important; }
.lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(8px);
}
.lightbox-content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
max-width: 94%;
max-height: 94%;
z-index: 1;
}
.lightbox-close {
position: absolute;
top: -36px;
right: -4px;
width: 30px;
height: 30px;
border: none;
background: rgba(255,255,255,0.1);
color: white;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--transition);
z-index: 2;
}
.lightbox-close svg { width: 16px; height: 16px; }
.lightbox-close:hover { background: rgba(255,255,255,0.2); }
.lightbox-page-info {
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.7);
margin-bottom: 10px;
text-align: center;
}
.lightbox-canvas-wrap {
overflow: auto;
max-height: calc(100vh - 140px);
border-radius: var(--radius);
box-shadow: 0 8px 40px rgba(0,0,0,0.6);
background: white;
scrollbar-width: thin;
scrollbar-color: var(--border-light) transparent;
}
.lightbox-canvas-wrap canvas {
display: block;
max-width: 100%;
height: auto;
}
.lightbox-nav {
position: absolute;
top: 50%;
left: 8px;
right: 8px;
display: flex;
justify-content: space-between;
pointer-events: none;
transform: translateY(-50%);
}
.lightbox-nav-btn {
width: 40px;
height: 40px;
border: none;
background: rgba(255,255,255,0.1);
color: white;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
transition: background var(--transition), transform var(--transition);
}
.lightbox-nav-btn svg { width: 20px; height: 20px; }
.lightbox-nav-btn:hover {
background: rgba(255,255,255,0.2);
transform: scale(1.1);
}
.lightbox-nav-btn:disabled { opacity: 0.2; cursor: default; }
.lightbox-nav-btn:disabled:hover { background: rgba(255,255,255,0.1); transform: none; }
@keyframes lbFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ── Drop Overlay ─────────────────────────────────────────── */
.drop-overlay {
position: fixed;
inset: 0;
z-index: 20000;
background: rgba(9, 9, 11, 0.88);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
animation: lbFadeIn 150ms ease;
}
.drop-overlay-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 48px 64px;
border: 2px dashed var(--accent-light);
border-radius: 16px;
color: var(--accent-light);
}
.drop-icon {
width: 56px;
height: 56px;
animation: dropBounce 1s ease infinite;
}
.drop-overlay-content p {
font-size: 16px;
font-weight: 600;
letter-spacing: 0.5px;
}
@keyframes dropBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* ── Upload Overlay ──────────────────────────────────────── */
.upload-overlay {
position: fixed;
inset: 0;
z-index: 20001;
background: rgba(9, 9, 11, 0.92);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
}
.upload-overlay-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
color: var(--text-secondary);
}
.upload-overlay-content p {
font-size: 14px;
font-weight: 500;
}
/* ── Login Overlay ───────────────────────────────────────── */
.login-overlay {
position: fixed;
inset: 0;
z-index: 30000;
background: var(--bg-base);
display: flex;
align-items: center;
justify-content: center;
}
.login-box {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 32px;
width: 100%;
max-width: 380px;
text-align: center;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
animation: lbFadeIn 300ms ease;
}
.login-icon {
width: 48px;
height: 48px;
color: var(--accent-light);
margin-bottom: 16px;
}
.login-box h2 {
font-size: 20px;
margin-bottom: 8px;
}
.login-box p {
font-size: 13px;
color: var(--text-muted);
margin-bottom: 24px;
}
#login-form {
display: flex;
flex-direction: column;
gap: 16px;
}
#login-form input {
width: 100%;
padding: 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-input);
color: var(--text-primary);
font-size: 14px;
outline: none;
transition: border-color var(--transition);
}
#login-form input:focus {
border-color: var(--accent);
}
/* ── Admin Panel ─────────────────────────────────────────── */
.role-user .admin-only {
display: none !important;
}
.icon-btn {
background: transparent;
border: none;
color: var(--text-muted);
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition);
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--bg-card-hover); color: var(--accent-light); }
.admin-panel {
position: relative;
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
z-index: 10;
padding: 24px;
}
.admin-close {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border: none;
background: transparent;
color: var(--text-muted);
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--transition);
}
.admin-close:hover { background: var(--bg-input); color: white; }
.admin-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 24px;
border-bottom: 1px solid var(--border);
padding-bottom: 12px;
}
.admin-section {
margin-bottom: 24px;
}
.admin-section h3 {
font-size: 13px;
text-transform: uppercase;
color: var(--text-muted);
letter-spacing: 0.5px;
margin-bottom: 12px;
}
.admin-hint {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 12px;
line-height: 1.4;
}
.admin-stats {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 13px;
background: var(--bg-input);
padding: 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
}
.admin-stats-row {
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--border-light);
padding-bottom: 6px;
}
.admin-stats-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.admin-actions {
display: flex;
gap: 12px;
}
.admin-password-form {
display: flex;
gap: 12px;
}
.admin-password-form input {
flex: 1;
}
.admin-password-form button {
width: auto;
}
/* ── Utilities ───────────────────────────────────────────── */
.hidden { display: none !important; }