|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Firefox Cache Image Viewer</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.file-drop-area { |
|
|
border: 2px dashed #3b82f6; |
|
|
border-radius: 0.5rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.file-drop-area.active { |
|
|
border-color: #10b981; |
|
|
background-color: #f0fdf4; |
|
|
} |
|
|
.preview-image { |
|
|
max-height: 200px; |
|
|
object-fit: contain; |
|
|
background-color: #f3f4f6; |
|
|
border: 1px solid #e5e7eb; |
|
|
} |
|
|
.dark .preview-image { |
|
|
background-color: #374151; |
|
|
border-color: #4b5563; |
|
|
} |
|
|
.dark .file-drop-area { |
|
|
border-color: #6b7280; |
|
|
} |
|
|
.dark .file-drop-area.active { |
|
|
border-color: #10b981; |
|
|
background-color: #1f2937; |
|
|
} |
|
|
.file-info { |
|
|
word-break: break-all; |
|
|
} |
|
|
#imageGrid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
|
|
gap: 1rem; |
|
|
} |
|
|
@media (max-width: 640px) { |
|
|
#imageGrid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen transition-colors duration-200"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h1 class="text-3xl font-bold text-blue-600 dark:text-blue-400"> |
|
|
<i class="fas fa-firefox-browser mr-2"></i> Firefox Cache Image Viewer |
|
|
</h1> |
|
|
<button id="themeToggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700"> |
|
|
<i class="fas fa-moon dark:hidden"></i> |
|
|
<i class="fas fa-sun hidden dark:inline"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-8"> |
|
|
<div class="file-drop-area p-8 text-center cursor-pointer" id="dropArea"> |
|
|
<i class="fas fa-folder-open text-4xl text-blue-500 mb-4"></i> |
|
|
<h2 class="text-xl font-semibold mb-2">Drag & Drop Firefox Cache Folder</h2> |
|
|
<p class="text-gray-500 dark:text-gray-400 mb-4">or click to browse</p> |
|
|
<input type="file" id="fileInput" webkitdirectory directory multiple class="hidden"> |
|
|
<button id="browseBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition"> |
|
|
<i class="fas fa-folder mr-2"></i> Select Cache Folder |
|
|
</button> |
|
|
</div> |
|
|
<div id="pathInfo" class="mt-4 hidden"> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-300"> |
|
|
<span class="font-medium">Selected path:</span> |
|
|
<span id="selectedPath" class="file-info"></span> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-wrap gap-4 mb-6"> |
|
|
<div class="relative flex-grow"> |
|
|
<label for="searchInput" class="sr-only">Search</label> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-search text-gray-400"></i> |
|
|
</div> |
|
|
<input type="text" id="searchInput" placeholder="Search images..." |
|
|
class="pl-10 pr-4 py-2 w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div class="flex gap-2"> |
|
|
<button id="scanHtmlBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md transition flex items-center"> |
|
|
<i class="fas fa-file-code mr-2"></i> Scan HTML Files |
|
|
</button> |
|
|
<button id="refreshBtn" class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 px-4 py-2 rounded-md transition flex items-center"> |
|
|
<i class="fas fa-sync-alt mr-2"></i> Refresh |
|
|
<button id="exportBtn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md transition flex items-center"> |
|
|
<i class="fas fa-download mr-2"></i> Export Selected |
|
|
</button> |
|
|
<button id="clearBtn" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md transition flex items-center"> |
|
|
<i class="fas fa-trash-alt mr-2"></i> Clear Cache |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden"> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700"> |
|
|
<thead class="bg-gray-50 dark:bg-gray-700"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider"> |
|
|
<input type="checkbox" id="selectAll" class="rounded text-blue-600"> |
|
|
</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer sortable" data-sort="filename"> |
|
|
Filename <i class="fas fa-sort ml-1"></i> |
|
|
</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer sortable" data-sort="size"> |
|
|
Size <i class="fas fa-sort ml-1"></i> |
|
|
</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer sortable" data-sort="modified"> |
|
|
Modified <i class="fas fa-sort ml-1"></i> |
|
|
</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer sortable" data-sort="url"> |
|
|
URL <i class="fas fa-sort ml-1"></i> |
|
|
</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider"> |
|
|
Preview |
|
|
</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="fileTableBody" class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700"> |
|
|
|
|
|
<tr id="noFilesRow"> |
|
|
<td colspan="6" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400"> |
|
|
No cache files loaded. Select a Firefox cache folder to begin. |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="imageGrid" class="mt-8 hidden"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-between items-center text-sm text-gray-500 dark:text-gray-400"> |
|
|
<div id="statusInfo">Ready</div> |
|
|
<div> |
|
|
<span id="fileCount">0</span> files found |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="imageModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-75 p-4"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg max-w-4xl w-full max-h-[90vh] overflow-auto"> |
|
|
<div class="flex justify-between items-center border-b border-gray-200 dark:border-gray-700 p-4"> |
|
|
<h3 class="text-lg font-semibold" id="modalTitle">Image Preview</h3> |
|
|
<button id="closeModal" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<img id="modalImage" src="" alt="Preview" class="max-w-full mx-auto"> |
|
|
<div class="mt-4"> |
|
|
<h4 class="font-medium mb-2">Image Details:</h4> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<p><span class="font-medium">Filename:</span> <span id="modalFilename"></span></p> |
|
|
<p><span class="font-medium">Size:</span> <span id="modalSize"></span></p> |
|
|
<p><span class="font-medium">Type:</span> <span id="modalType"></span></p> |
|
|
</div> |
|
|
<div> |
|
|
<p><span class="font-medium">Modified:</span> <span id="modalModified"></span></p> |
|
|
<p><span class="font-medium">URL:</span> <span id="modalUrl" class="break-all"></span></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-200 dark:border-gray-700 p-4 flex justify-end gap-2"> |
|
|
<button id="saveImageBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition"> |
|
|
<i class="fas fa-save mr-2"></i> Save Image |
|
|
</button> |
|
|
<button id="closeModalBtn" class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 px-4 py-2 rounded-md transition"> |
|
|
Close |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const themeToggle = document.getElementById('themeToggle'); |
|
|
themeToggle.addEventListener('click', () => { |
|
|
document.documentElement.classList.toggle('dark'); |
|
|
localStorage.setItem('darkMode', document.documentElement.classList.contains('dark')); |
|
|
}); |
|
|
|
|
|
|
|
|
if (localStorage.getItem('darkMode') === 'true') { |
|
|
document.documentElement.classList.add('dark'); |
|
|
} |
|
|
|
|
|
|
|
|
const dropArea = document.getElementById('dropArea'); |
|
|
const fileInput = document.getElementById('fileInput'); |
|
|
const browseBtn = document.getElementById('browseBtn'); |
|
|
const pathInfo = document.getElementById('pathInfo'); |
|
|
const selectedPath = document.getElementById('selectedPath'); |
|
|
const fileTableBody = document.getElementById('fileTableBody'); |
|
|
const noFilesRow = document.getElementById('noFilesRow'); |
|
|
const statusInfo = document.getElementById('statusInfo'); |
|
|
const fileCount = document.getElementById('fileCount'); |
|
|
const searchInput = document.getElementById('searchInput'); |
|
|
const imageGrid = document.getElementById('imageGrid'); |
|
|
const selectAll = document.getElementById('selectAll'); |
|
|
const refreshBtn = document.getElementById('refreshBtn'); |
|
|
const exportBtn = document.getElementById('exportBtn'); |
|
|
const clearBtn = document.getElementById('clearBtn'); |
|
|
const imageModal = document.getElementById('imageModal'); |
|
|
const modalImage = document.getElementById('modalImage'); |
|
|
const modalTitle = document.getElementById('modalTitle'); |
|
|
const modalFilename = document.getElementById('modalFilename'); |
|
|
const modalSize = document.getElementById('modalSize'); |
|
|
const modalType = document.getElementById('modalType'); |
|
|
const modalModified = document.getElementById('modalModified'); |
|
|
const modalUrl = document.getElementById('modalUrl'); |
|
|
const closeModal = document.getElementById('closeModal'); |
|
|
const closeModalBtn = document.getElementById('closeModalBtn'); |
|
|
const saveImageBtn = document.getElementById('saveImageBtn'); |
|
|
|
|
|
let currentFiles = []; |
|
|
let currentSort = { column: 'modified', direction: 'desc' }; |
|
|
|
|
|
|
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
|
|
dropArea.addEventListener(eventName, preventDefaults, false); |
|
|
document.body.addEventListener(eventName, preventDefaults, false); |
|
|
}); |
|
|
|
|
|
function preventDefaults(e) { |
|
|
e.preventDefault(); |
|
|
e.stopPropagation(); |
|
|
} |
|
|
|
|
|
|
|
|
['dragenter', 'dragover'].forEach(eventName => { |
|
|
dropArea.addEventListener(eventName, highlight, false); |
|
|
}); |
|
|
|
|
|
['dragleave', 'drop'].forEach(eventName => { |
|
|
dropArea.addEventListener(eventName, unhighlight, false); |
|
|
}); |
|
|
|
|
|
function highlight() { |
|
|
dropArea.classList.add('active'); |
|
|
} |
|
|
|
|
|
function unhighlight() { |
|
|
dropArea.classList.remove('active'); |
|
|
} |
|
|
|
|
|
|
|
|
dropArea.addEventListener('drop', handleDrop, false); |
|
|
|
|
|
function handleDrop(e) { |
|
|
const dt = e.dataTransfer; |
|
|
const files = dt.files; |
|
|
handleFiles(files); |
|
|
} |
|
|
|
|
|
|
|
|
browseBtn.addEventListener('click', () => { |
|
|
fileInput.click(); |
|
|
}); |
|
|
|
|
|
fileInput.addEventListener('change', function() { |
|
|
if (this.files.length) { |
|
|
handleFiles(this.files); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function handleFiles(files) { |
|
|
statusInfo.textContent = 'Processing files...'; |
|
|
|
|
|
|
|
|
const path = files[0]?.webkitRelativePath?.split('/').slice(0, -1).join('/') || 'Unknown path'; |
|
|
selectedPath.textContent = path; |
|
|
pathInfo.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
const relevantFiles = Array.from(files).filter(file => |
|
|
file.type.startsWith('image/') || |
|
|
file.type === 'text/html' || |
|
|
['.jpg', '.jpeg', '.png', '.gif', '.webp', '.html', '.htm'].some(ext => file.name.toLowerCase().endsWith(ext)) |
|
|
); |
|
|
|
|
|
currentFiles = imageFiles.map(file => ({ |
|
|
file: file, |
|
|
name: file.name, |
|
|
size: formatFileSize(file.size), |
|
|
rawSize: file.size, |
|
|
modified: new Date(file.lastModified).toLocaleString(), |
|
|
rawModified: file.lastModified, |
|
|
url: '', |
|
|
previewUrl: URL.createObjectURL(file) |
|
|
})); |
|
|
|
|
|
updateFileList(); |
|
|
statusInfo.textContent = 'Ready'; |
|
|
} |
|
|
|
|
|
|
|
|
function formatFileSize(bytes) { |
|
|
if (bytes === 0) return '0 Bytes'; |
|
|
const k = 1024; |
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB']; |
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k)); |
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; |
|
|
} |
|
|
|
|
|
|
|
|
function updateFileList(filter = '') { |
|
|
let filteredFiles = currentFiles; |
|
|
|
|
|
if (filter) { |
|
|
const searchTerm = filter.toLowerCase(); |
|
|
filteredFiles = currentFiles.filter(file => |
|
|
file.name.toLowerCase().includes(searchTerm) || |
|
|
file.url.toLowerCase().includes(searchTerm) |
|
|
); |
|
|
} |
|
|
|
|
|
fileCount.textContent = filteredFiles.length; |
|
|
|
|
|
if (filteredFiles.length === 0) { |
|
|
noFilesRow.classList.remove('hidden'); |
|
|
fileTableBody.innerHTML = ''; |
|
|
fileTableBody.appendChild(noFilesRow); |
|
|
imageGrid.classList.add('hidden'); |
|
|
return; |
|
|
} |
|
|
|
|
|
noFilesRow.classList.add('hidden'); |
|
|
|
|
|
|
|
|
filteredFiles.sort((a, b) => { |
|
|
let valA, valB; |
|
|
|
|
|
if (currentSort.column === 'filename') { |
|
|
valA = a.name; |
|
|
valB = b.name; |
|
|
} else if (currentSort.column === 'size') { |
|
|
valA = a.rawSize; |
|
|
valB = b.rawSize; |
|
|
} else if (currentSort.column === 'modified') { |
|
|
valA = a.rawModified; |
|
|
valB = b.rawModified; |
|
|
} else if (currentSort.column === 'url') { |
|
|
valA = a.url; |
|
|
valB = b.url; |
|
|
} |
|
|
|
|
|
if (typeof valA === 'string') { |
|
|
return currentSort.direction === 'asc' |
|
|
? valA.localeCompare(valB) |
|
|
: valB.localeCompare(valA); |
|
|
} else { |
|
|
return currentSort.direction === 'asc' |
|
|
? valA - valB |
|
|
: valB - valA; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
fileTableBody.innerHTML = ''; |
|
|
|
|
|
|
|
|
filteredFiles.forEach((file, index) => { |
|
|
const row = document.createElement('tr'); |
|
|
row.className = 'hover:bg-gray-50 dark:hover:bg-gray-700'; |
|
|
row.dataset.index = index; |
|
|
|
|
|
row.innerHTML = ` |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<input type="checkbox" class="file-checkbox rounded text-blue-600"> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm font-medium">${file.name}</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm">${file.size}</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm">${file.modified}</div> |
|
|
</td> |
|
|
<td class="px-6 py-4"> |
|
|
<div class="text-sm file-info truncate max-w-xs">${file.url || 'N/A'}</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<button class="preview-btn text-blue-600 hover:text-blue-800 dark:hover:text-blue-400"> |
|
|
<i class="fas fa-eye"></i> Preview |
|
|
</button> |
|
|
</td> |
|
|
`; |
|
|
|
|
|
fileTableBody.appendChild(row); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.preview-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
const row = this.closest('tr'); |
|
|
const index = row.dataset.index; |
|
|
const file = filteredFiles[index]; |
|
|
showImageModal(file); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
updateSelectAllCheckbox(); |
|
|
} |
|
|
|
|
|
|
|
|
function showImageModal(file) { |
|
|
modalImage.src = file.previewUrl; |
|
|
modalFilename.textContent = file.name; |
|
|
modalSize.textContent = file.size; |
|
|
modalType.textContent = file.file.type || 'Unknown'; |
|
|
modalModified.textContent = file.modified; |
|
|
modalUrl.textContent = file.url || 'N/A'; |
|
|
modalTitle.textContent = `Preview: ${file.name}`; |
|
|
|
|
|
imageModal.classList.remove('hidden'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
} |
|
|
|
|
|
|
|
|
function closeImageModal() { |
|
|
imageModal.classList.add('hidden'); |
|
|
document.body.style.overflow = ''; |
|
|
} |
|
|
|
|
|
|
|
|
closeModal.addEventListener('click', closeImageModal); |
|
|
closeModalBtn.addEventListener('click', closeImageModal); |
|
|
|
|
|
|
|
|
saveImageBtn.addEventListener('click', function() { |
|
|
const link = document.createElement('a'); |
|
|
link.href = modalImage.src; |
|
|
link.download = modalFilename.textContent; |
|
|
document.body.appendChild(link); |
|
|
link.click(); |
|
|
document.body.removeChild(link); |
|
|
}); |
|
|
|
|
|
|
|
|
searchInput.addEventListener('input', function() { |
|
|
updateFileList(this.value); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.sortable').forEach(header => { |
|
|
header.addEventListener('click', function() { |
|
|
const column = this.dataset.sort; |
|
|
|
|
|
if (currentSort.column === column) { |
|
|
currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc'; |
|
|
} else { |
|
|
currentSort.column = column; |
|
|
currentSort.direction = 'asc'; |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.sortable i').forEach(icon => { |
|
|
icon.className = 'fas fa-sort ml-1'; |
|
|
}); |
|
|
|
|
|
const sortIcon = this.querySelector('i'); |
|
|
sortIcon.className = currentSort.direction === 'asc' |
|
|
? 'fas fa-sort-up ml-1' |
|
|
: 'fas fa-sort-down ml-1'; |
|
|
|
|
|
updateFileList(searchInput.value); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
selectAll.addEventListener('change', function() { |
|
|
const checkboxes = document.querySelectorAll('.file-checkbox'); |
|
|
checkboxes.forEach(checkbox => { |
|
|
checkbox.checked = this.checked; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
fileTableBody.addEventListener('change', function(e) { |
|
|
if (e.target.classList.contains('file-checkbox')) { |
|
|
updateSelectAllCheckbox(); |
|
|
} |
|
|
}); |
|
|
|
|
|
function updateSelectAllCheckbox() { |
|
|
const checkboxes = document.querySelectorAll('.file-checkbox'); |
|
|
const allChecked = checkboxes.length > 0 && Array.from(checkboxes).every(checkbox => checkbox.checked); |
|
|
selectAll.checked = allChecked; |
|
|
} |
|
|
|
|
|
|
|
|
refreshBtn.addEventListener('click', function() { |
|
|
if (fileInput.files.length) { |
|
|
handleFiles(fileInput.files); |
|
|
} else { |
|
|
statusInfo.textContent = 'No files selected to refresh'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
exportBtn.addEventListener('click', function() { |
|
|
const selectedIndices = []; |
|
|
document.querySelectorAll('.file-checkbox:checked').forEach(checkbox => { |
|
|
const row = checkbox.closest('tr'); |
|
|
selectedIndices.push(row.dataset.index); |
|
|
}); |
|
|
|
|
|
if (selectedIndices.length === 0) { |
|
|
statusInfo.textContent = 'No files selected for export'; |
|
|
return; |
|
|
} |
|
|
|
|
|
statusInfo.textContent = `Exporting ${selectedIndices.length} files...`; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
statusInfo.textContent = `Exported ${selectedIndices.length} files as images.zip`; |
|
|
}, 1000); |
|
|
}); |
|
|
|
|
|
|
|
|
const scanHtmlBtn = document.getElementById('scanHtmlBtn'); |
|
|
scanHtmlBtn.addEventListener('click', function() { |
|
|
if (currentFiles.length === 0) { |
|
|
statusInfo.textContent = 'No files loaded to scan'; |
|
|
return; |
|
|
} |
|
|
|
|
|
statusInfo.textContent = 'Scanning for Base64 encoded images...'; |
|
|
|
|
|
const base64Images = []; |
|
|
const regex = /<img[^>]+src="data:image\/(jpeg|jpg|png);base64,([^"]+)"[^>]*>/g; |
|
|
|
|
|
|
|
|
currentFiles.forEach(file => { |
|
|
if (file.file.type === 'text/html') { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = function(e) { |
|
|
const content = e.target.result; |
|
|
let match; |
|
|
while ((match = regex.exec(content)) !== null) { |
|
|
const [, type, data] = match; |
|
|
base64Images.push({ |
|
|
file: file.file, |
|
|
name: `${file.name}_embedded_${base64Images.length}.${type}`, |
|
|
size: 'Embedded', |
|
|
rawSize: 0, |
|
|
modified: file.modified, |
|
|
rawModified: file.rawModified, |
|
|
url: `Extracted from ${file.name}`, |
|
|
previewUrl: `data:image/${type};base64,${data}` |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
if (base64Images.length > 0) { |
|
|
currentFiles = [...currentFiles, ...base64Images]; |
|
|
updateFileList(); |
|
|
statusInfo.textContent = `Found ${base64Images.length} Base64 images`; |
|
|
} else { |
|
|
statusInfo.textContent = 'No Base64 images found'; |
|
|
} |
|
|
}; |
|
|
reader.readAsText(file.file); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
clearBtn.addEventListener('click', function() { |
|
|
if (confirm('Are you sure you want to clear the displayed cache files? This will only clear them from this viewer, not from Firefox.')) { |
|
|
currentFiles = []; |
|
|
updateFileList(); |
|
|
pathInfo.classList.add('hidden'); |
|
|
statusInfo.textContent = 'Cache cleared from viewer'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const viewToggle = document.createElement('div'); |
|
|
viewToggle.className = 'flex gap-2 mb-4'; |
|
|
viewToggle.innerHTML = ` |
|
|
<button id="tableViewBtn" class="bg-blue-600 text-white px-4 py-2 rounded-md transition"> |
|
|
<i class="fas fa-table mr-2"></i> Table View |
|
|
</button> |
|
|
<button id="gridViewBtn" class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 px-4 py-2 rounded-md transition"> |
|
|
<i class="fas fa-th-large mr-2"></i> Grid View |
|
|
</button> |
|
|
`; |
|
|
document.querySelector('.container').insertBefore(viewToggle, document.querySelector('#imageGrid')); |
|
|
|
|
|
const tableViewBtn = document.getElementById('tableViewBtn'); |
|
|
const gridViewBtn = document.getElementById('gridViewBtn'); |
|
|
const fileTableContainer = document.querySelector('.bg-white.dark\\:bg-gray-800.rounded-lg.shadow-lg.overflow-hidden'); |
|
|
|
|
|
tableViewBtn.addEventListener('click', function() { |
|
|
fileTableContainer.classList.remove('hidden'); |
|
|
imageGrid.classList.add('hidden'); |
|
|
tableViewBtn.className = 'bg-blue-600 text-white px-4 py-2 rounded-md transition'; |
|
|
gridViewBtn.className = 'bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 px-4 py-2 rounded-md transition'; |
|
|
}); |
|
|
|
|
|
gridViewBtn.addEventListener('click', function() { |
|
|
if (currentFiles.length === 0) return; |
|
|
|
|
|
fileTableContainer.classList.add('hidden'); |
|
|
imageGrid.classList.remove('hidden'); |
|
|
tableViewBtn.className = 'bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 px-4 py-2 rounded-md transition'; |
|
|
gridViewBtn.className = 'bg-blue-600 text-white px-4 py-2 rounded-md transition'; |
|
|
|
|
|
updateGridView(); |
|
|
}); |
|
|
|
|
|
function updateGridView() { |
|
|
imageGrid.innerHTML = ''; |
|
|
|
|
|
let filteredFiles = currentFiles; |
|
|
|
|
|
if (searchInput.value) { |
|
|
const searchTerm = searchInput.value.toLowerCase(); |
|
|
filteredFiles = currentFiles.filter(file => |
|
|
file.name.toLowerCase().includes(searchTerm) || |
|
|
file.url.toLowerCase().includes(searchTerm) |
|
|
); |
|
|
} |
|
|
|
|
|
filteredFiles.forEach((file, index) => { |
|
|
const card = document.createElement('div'); |
|
|
card.className = 'bg-white dark:bg-gray-700 rounded-lg shadow overflow-hidden'; |
|
|
card.dataset.index = index; |
|
|
|
|
|
card.innerHTML = ` |
|
|
<div class="p-4"> |
|
|
<img src="${file.previewUrl}" alt="${file.name}" class="preview-image w-full h-40 cursor-pointer"> |
|
|
</div> |
|
|
<div class="px-4 pb-4"> |
|
|
<h3 class="text-sm font-medium mb-1 truncate">${file.name}</h3> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-2">${file.size}</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button class="text-blue-600 hover:text-blue-800 dark:hover:text-blue-400 text-sm"> |
|
|
<i class="fas fa-download mr-1"></i> Save |
|
|
</button> |
|
|
<button class="text-blue-600 hover:text-blue-800 dark:hover:text-blue-400 text-sm"> |
|
|
<i class="fas fa-eye mr-1"></i> Preview |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
imageGrid.appendChild(card); |
|
|
|
|
|
|
|
|
const img = card.querySelector('img'); |
|
|
const saveBtn = card.querySelector('button:first-of-type'); |
|
|
const previewBtn = card.querySelector('button:last-of-type'); |
|
|
|
|
|
img.addEventListener('click', () => showImageModal(file)); |
|
|
previewBtn.addEventListener('click', () => showImageModal(file)); |
|
|
saveBtn.addEventListener('click', () => { |
|
|
const link = document.createElement('a'); |
|
|
link.href = file.previewUrl; |
|
|
link.download = file.name; |
|
|
document.body.appendChild(link); |
|
|
link.click(); |
|
|
document.body.removeChild(link); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=fnch/firefox-cache-image-viewer-with-base64" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
