Update frontend with some style and adapt app.py
This commit is contained in:
pjmalandrino
parent
92de48359e
commit
d1876487f8
4 changed files with 319 additions and 245 deletions
30
app.py
30
app.py
|
|
@ -39,27 +39,6 @@ def index():
|
|||
def serve_static(filename):
|
||||
return send_file(os.path.join('static', filename))
|
||||
|
||||
@app.route('/<path:filename>')
|
||||
def serve_pdf(filename):
|
||||
"""Serve PDF files from the current directory"""
|
||||
try:
|
||||
# Security check: only allow PDF files and prevent directory traversal
|
||||
if not filename.endswith('.pdf') or '..' in filename or '/' in filename:
|
||||
logger.warning(f"Blocked access to non-PDF or invalid file: {filename}")
|
||||
return jsonify({"error": "Access denied"}), 403
|
||||
|
||||
# Check if file exists in current directory
|
||||
file_path = Path(filename)
|
||||
if not file_path.exists() or not file_path.is_file():
|
||||
logger.error(f"PDF file not found: {filename}")
|
||||
return jsonify({"error": f"PDF file not found: {filename}"}), 404
|
||||
|
||||
logger.info(f"Serving PDF file: {filename}")
|
||||
return send_file(filename, mimetype='application/pdf')
|
||||
except Exception as e:
|
||||
logger.error(f"Error serving PDF {filename}: {str(e)}")
|
||||
return jsonify({"error": f"Error serving PDF: {str(e)}"}), 500
|
||||
|
||||
@app.route('/pdf-files')
|
||||
def pdf_files():
|
||||
try:
|
||||
|
|
@ -285,10 +264,15 @@ def run_extractor():
|
|||
@app.route('/results/<path:filename>')
|
||||
def results(filename):
|
||||
try:
|
||||
return send_file(os.path.join('results', filename))
|
||||
file_path = os.path.join('results', filename)
|
||||
if os.path.exists(file_path):
|
||||
return send_file(file_path)
|
||||
else:
|
||||
logger.error(f"File not found: {file_path}")
|
||||
return jsonify({'error': f"File not found: {filename}"}), 404
|
||||
except Exception as e:
|
||||
logger.error(f"Error serving file {filename}: {str(e)}")
|
||||
return jsonify({'error': f"File not found: {filename}"}), 404
|
||||
return jsonify({'error': f"Error serving file: {filename}"}), 500
|
||||
|
||||
@app.route('/check-environment')
|
||||
def check_environment():
|
||||
|
|
|
|||
29
index.html
29
index.html
|
|
@ -62,25 +62,6 @@
|
|||
<h3>Document Analysis</h3>
|
||||
<p>Extract comprehensive document structure from your PDF using advanced AI-powered analysis. This process identifies headers, paragraphs, images, tables, and other document elements with precise coordinate information.</p>
|
||||
|
||||
<!-- PDF Preview Section -->
|
||||
<div id="pdf-preview-container" class="pdf-preview-container hidden">
|
||||
<h4>PDF Preview</h4>
|
||||
<div class="pdf-preview-controls">
|
||||
<button id="prev-page-btn" onclick="changePage(-1)" disabled>← Previous</button>
|
||||
<button id="next-page-btn" onclick="changePage(1)" disabled>Next →</button>
|
||||
<button id="refresh-preview-btn" onclick="refreshPreview()">Refresh</button>
|
||||
<div class="pdf-preview-info">
|
||||
<span id="page-info">Page 1 of 1</span> |
|
||||
<span id="zoom-info">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pdf-preview-loading" class="pdf-preview-loading hidden">
|
||||
<div class="loader"></div>
|
||||
Loading PDF preview...
|
||||
</div>
|
||||
<canvas id="pdf-preview-canvas" class="hidden"></canvas>
|
||||
</div>
|
||||
|
||||
<button id="analyzer-btn" onclick="runScript('analyzer')">
|
||||
Start Analysis
|
||||
</button>
|
||||
|
|
@ -136,6 +117,14 @@
|
|||
|
||||
<div id="extractor-status" class="status hidden"></div>
|
||||
|
||||
<!-- Extracted Images Gallery -->
|
||||
<div id="extracted-images-container" class="hidden">
|
||||
<h4>Extracted Images</h4>
|
||||
<div id="extracted-images-gallery" class="images-gallery">
|
||||
<!-- Images will be loaded here dynamically -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-description">
|
||||
<strong>Extraction Capabilities:</strong>
|
||||
<ul>
|
||||
|
|
@ -165,8 +154,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PDF.js Library -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
||||
<script src="static/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
246
static/app.js
246
static/app.js
|
|
@ -2,15 +2,6 @@
|
|||
const activeTasks = {};
|
||||
let pollingInterval = null;
|
||||
|
||||
// PDF preview variables
|
||||
let currentPdf = null;
|
||||
let currentPageNum = 1;
|
||||
let totalPages = 0;
|
||||
let renderScale = 1.0;
|
||||
|
||||
// Initialize PDF.js
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
|
||||
|
||||
// Tab switching functionality
|
||||
function switchTab(tabName) {
|
||||
// Hide all tab contents
|
||||
|
|
@ -48,143 +39,105 @@ function updateProgress(completedSteps) {
|
|||
}
|
||||
}
|
||||
|
||||
// PDF Preview Functions
|
||||
async function loadPdfPreview(pdfFile) {
|
||||
if (!pdfFile) {
|
||||
hidePdfPreview();
|
||||
return;
|
||||
// Load extracted images from the results folder
|
||||
function loadExtractedImages() {
|
||||
const imageGallery = document.getElementById('extracted-images-gallery');
|
||||
const imageContainer = document.getElementById('extracted-images-container');
|
||||
|
||||
// First try to load the index.html to get the list of images
|
||||
fetch('/results/pictures/index.html')
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('No extracted images found');
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then(html => {
|
||||
// Parse the HTML to extract image information
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(html, 'text/html');
|
||||
const imageCards = doc.querySelectorAll('.picture-card');
|
||||
|
||||
if (imageCards.length === 0) {
|
||||
imageGallery.innerHTML = '<div class="no-images">No images were extracted from this page.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
let galleryHTML = '';
|
||||
imageCards.forEach((card, index) => {
|
||||
const img = card.querySelector('img');
|
||||
const caption = card.querySelector('.picture-caption');
|
||||
const coords = card.querySelector('.picture-coords');
|
||||
|
||||
if (img) {
|
||||
const imgSrc = img.getAttribute('src');
|
||||
const pictureId = index + 1;
|
||||
const captionText = caption ? caption.textContent : '';
|
||||
const coordsText = coords ? coords.textContent : '';
|
||||
|
||||
galleryHTML += `
|
||||
<div class="extracted-image-card">
|
||||
<div class="image-wrapper">
|
||||
<img src="/results/pictures/${imgSrc}" alt="Extracted Image ${pictureId}"
|
||||
onclick="openImageModal('/results/pictures/${imgSrc}', '${captionText}', '${coordsText}')">
|
||||
</div>
|
||||
<div class="image-info">
|
||||
<h4>Picture ${pictureId}</h4>
|
||||
${captionText ? `<p class="image-caption">${captionText}</p>` : ''}
|
||||
<p class="image-coords">${coordsText}</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
});
|
||||
|
||||
imageGallery.innerHTML = galleryHTML;
|
||||
imageContainer.classList.remove('hidden');
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('No extracted images found:', error);
|
||||
imageGallery.innerHTML = '<div class="no-images">No images have been extracted yet. Run the image extraction first.</div>';
|
||||
});
|
||||
}
|
||||
|
||||
// Open image in modal for better viewing
|
||||
function openImageModal(imageSrc, caption, coords) {
|
||||
// Create modal if it doesn't exist
|
||||
let modal = document.getElementById('image-modal');
|
||||
if (!modal) {
|
||||
modal = document.createElement('div');
|
||||
modal.id = 'image-modal';
|
||||
modal.className = 'image-modal';
|
||||
modal.innerHTML = `
|
||||
<div class="modal-content">
|
||||
<span class="modal-close" onclick="closeImageModal()">×</span>
|
||||
<img id="modal-image" src="" alt="Extracted Image">
|
||||
<div class="modal-info">
|
||||
<p id="modal-caption"></p>
|
||||
<p id="modal-coords"></p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(modal);
|
||||
}
|
||||
|
||||
const previewContainer = document.getElementById('pdf-preview-container');
|
||||
const loadingDiv = document.getElementById('pdf-preview-loading');
|
||||
const canvas = document.getElementById('pdf-preview-canvas');
|
||||
// Set image and info
|
||||
document.getElementById('modal-image').src = imageSrc;
|
||||
document.getElementById('modal-caption').textContent = caption;
|
||||
document.getElementById('modal-coords').textContent = coords;
|
||||
|
||||
// Show preview container and loading
|
||||
previewContainer.classList.remove('hidden');
|
||||
loadingDiv.classList.remove('hidden');
|
||||
canvas.classList.add('hidden');
|
||||
// Show modal
|
||||
modal.classList.add('active');
|
||||
}
|
||||
|
||||
try {
|
||||
// Load the PDF
|
||||
const loadingTask = pdfjsLib.getDocument(`/${pdfFile}`);
|
||||
currentPdf = await loadingTask.promise;
|
||||
totalPages = currentPdf.numPages;
|
||||
|
||||
// Update page info
|
||||
updatePageInfo();
|
||||
updatePageControls();
|
||||
|
||||
// Render the current page
|
||||
await renderPage();
|
||||
|
||||
// Hide loading, show canvas
|
||||
loadingDiv.classList.add('hidden');
|
||||
canvas.classList.remove('hidden');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading PDF preview:', error);
|
||||
loadingDiv.innerHTML = '<span class="error">Error loading PDF preview: ' + error.message + '</span>';
|
||||
// Close image modal
|
||||
function closeImageModal() {
|
||||
const modal = document.getElementById('image-modal');
|
||||
if (modal) {
|
||||
modal.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
async function renderPage() {
|
||||
if (!currentPdf) return;
|
||||
|
||||
const canvas = document.getElementById('pdf-preview-canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
try {
|
||||
// Get the page
|
||||
const page = await currentPdf.getPage(currentPageNum);
|
||||
|
||||
// Calculate scale to fit container width (max 600px)
|
||||
const viewport = page.getViewport({ scale: 1.0 });
|
||||
const maxWidth = 600;
|
||||
renderScale = Math.min(maxWidth / viewport.width, 1.5);
|
||||
|
||||
const scaledViewport = page.getViewport({ scale: renderScale });
|
||||
|
||||
// Set canvas dimensions
|
||||
canvas.height = scaledViewport.height;
|
||||
canvas.width = scaledViewport.width;
|
||||
|
||||
// Render the page
|
||||
const renderContext = {
|
||||
canvasContext: ctx,
|
||||
viewport: scaledViewport
|
||||
};
|
||||
|
||||
await page.render(renderContext).promise;
|
||||
|
||||
// Update zoom info
|
||||
document.getElementById('zoom-info').textContent = Math.round(renderScale * 100) + '%';
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error rendering page:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function updatePageInfo() {
|
||||
document.getElementById('page-info').textContent = `Page ${currentPageNum} of ${totalPages}`;
|
||||
}
|
||||
|
||||
function updatePageControls() {
|
||||
document.getElementById('prev-page-btn').disabled = currentPageNum <= 1;
|
||||
document.getElementById('next-page-btn').disabled = currentPageNum >= totalPages;
|
||||
}
|
||||
|
||||
async function changePage(delta) {
|
||||
const newPage = currentPageNum + delta;
|
||||
if (newPage >= 1 && newPage <= totalPages) {
|
||||
currentPageNum = newPage;
|
||||
|
||||
// Update the page number input
|
||||
document.getElementById('page_num').value = currentPageNum;
|
||||
|
||||
updatePageInfo();
|
||||
updatePageControls();
|
||||
await renderPage();
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshPreview() {
|
||||
const pdfFile = document.getElementById('pdf_file').value;
|
||||
if (pdfFile) {
|
||||
await loadPdfPreview(pdfFile);
|
||||
}
|
||||
}
|
||||
|
||||
function hidePdfPreview() {
|
||||
document.getElementById('pdf-preview-container').classList.add('hidden');
|
||||
currentPdf = null;
|
||||
totalPages = 0;
|
||||
currentPageNum = 1;
|
||||
}
|
||||
|
||||
// Event listeners for PDF selection and page changes
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// PDF file selection change
|
||||
document.getElementById('pdf_file').addEventListener('change', async function() {
|
||||
const selectedFile = this.value;
|
||||
if (selectedFile) {
|
||||
await loadPdfPreview(selectedFile);
|
||||
} else {
|
||||
hidePdfPreview();
|
||||
}
|
||||
});
|
||||
|
||||
// Page number input change
|
||||
document.getElementById('page_num').addEventListener('change', async function() {
|
||||
const pageNum = parseInt(this.value);
|
||||
if (pageNum >= 1 && pageNum <= totalPages && pageNum !== currentPageNum) {
|
||||
currentPageNum = pageNum;
|
||||
updatePageInfo();
|
||||
updatePageControls();
|
||||
await renderPage();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Load PDF files on page load
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
const pdfStatus = document.getElementById('pdf-load-status');
|
||||
|
|
@ -219,6 +172,9 @@ window.addEventListener('DOMContentLoaded', function() {
|
|||
|
||||
// Run an environment check on startup
|
||||
checkEnvironment();
|
||||
|
||||
// Try to load any existing extracted images
|
||||
loadExtractedImages();
|
||||
});
|
||||
|
||||
// Check the environment
|
||||
|
|
@ -362,6 +318,13 @@ function pollTasks() {
|
|||
document.getElementById('image-container').classList.remove('hidden');
|
||||
}
|
||||
|
||||
// Load extracted images if extractor completed
|
||||
if (taskInfo.type === 'extractor') {
|
||||
setTimeout(() => {
|
||||
loadExtractedImages();
|
||||
}, 1000); // Small delay to ensure files are written
|
||||
}
|
||||
|
||||
// Enable next step button and update progress
|
||||
if (taskInfo.type === 'analyzer') {
|
||||
document.getElementById('visualizer-btn').disabled = false;
|
||||
|
|
@ -436,6 +399,11 @@ function runScript(script) {
|
|||
document.getElementById('image-container').classList.add('hidden');
|
||||
}
|
||||
|
||||
// Hide extracted images if not running extractor
|
||||
if (script !== 'extractor') {
|
||||
document.getElementById('extracted-images-container').classList.add('hidden');
|
||||
}
|
||||
|
||||
// Determine endpoint
|
||||
let endpoint;
|
||||
switch(script) {
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ h4 {
|
|||
color: var(--primary-dark);
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
margin: 0 0 var(--spacing-sm) 0;
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -279,60 +279,6 @@ label:has(input[type="checkbox"]) {
|
|||
display: block;
|
||||
}
|
||||
|
||||
/* PDF Preview Section */
|
||||
.pdf-preview-container {
|
||||
margin-top: var(--spacing-lg);
|
||||
padding: var(--spacing-lg);
|
||||
background: var(--surface-light);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.pdf-preview-controls {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-md);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pdf-preview-controls button {
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
font-size: 0.8rem;
|
||||
background: var(--text-medium);
|
||||
}
|
||||
|
||||
.pdf-preview-controls button:hover {
|
||||
background: var(--text-dark);
|
||||
}
|
||||
|
||||
.pdf-preview-controls button:disabled {
|
||||
background: var(--border-light);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.pdf-preview-info {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-medium);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#pdf-preview-canvas {
|
||||
max-width: 100%;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: var(--shadow-sm);
|
||||
background: white;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pdf-preview-loading {
|
||||
text-align: center;
|
||||
padding: var(--spacing-xl);
|
||||
color: var(--text-medium);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
button {
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
|
|
@ -455,7 +401,7 @@ button:disabled {
|
|||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* Image container */
|
||||
/* Image container (for visualizer) */
|
||||
#image-container {
|
||||
margin-top: var(--spacing-lg);
|
||||
text-align: center;
|
||||
|
|
@ -478,6 +424,187 @@ button:disabled {
|
|||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* Extracted Images Gallery */
|
||||
#extracted-images-container {
|
||||
margin-top: var(--spacing-lg);
|
||||
padding: var(--spacing-lg);
|
||||
background: var(--surface-light);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
#extracted-images-container h4 {
|
||||
color: var(--primary-dark);
|
||||
margin: 0 0 var(--spacing-lg) 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.images-gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: var(--spacing-lg);
|
||||
margin-top: var(--spacing-md);
|
||||
}
|
||||
|
||||
.extracted-image-card {
|
||||
background: var(--surface-white);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.extracted-image-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
background: var(--surface-light);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-wrapper img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.image-wrapper:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.image-info {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.image-info h4 {
|
||||
margin: 0 0 var(--spacing-xs) 0;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.image-caption {
|
||||
margin: 0 0 var(--spacing-xs) 0;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-medium);
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-coords {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-light);
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
}
|
||||
|
||||
.no-images {
|
||||
text-align: center;
|
||||
padding: var(--spacing-xl);
|
||||
color: var(--text-light);
|
||||
font-style: italic;
|
||||
background: var(--surface-white);
|
||||
border-radius: var(--radius-md);
|
||||
border: 2px dashed var(--border-light);
|
||||
}
|
||||
|
||||
/* Image Modal */
|
||||
.image-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.image-modal.active {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--surface-white);
|
||||
border-radius: var(--radius-lg);
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: var(--spacing-md);
|
||||
right: var(--spacing-lg);
|
||||
color: var(--text-light);
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
z-index: 1001;
|
||||
background: var(--surface-white);
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: var(--error);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
#modal-image {
|
||||
max-width: 100%;
|
||||
max-height: 70vh;
|
||||
object-fit: contain;
|
||||
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
||||
}
|
||||
|
||||
.modal-info {
|
||||
padding: var(--spacing-lg);
|
||||
border-top: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.modal-info p {
|
||||
margin: 0 0 var(--spacing-sm) 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#modal-caption {
|
||||
color: var(--text-dark);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#modal-coords {
|
||||
color: var(--text-light);
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* Environment check */
|
||||
#environment-check {
|
||||
margin-top: var(--spacing-lg);
|
||||
|
|
@ -593,13 +720,21 @@ button:disabled {
|
|||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.pdf-preview-controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
.images-gallery {
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.pdf-preview-info {
|
||||
margin-left: 0;
|
||||
text-align: center;
|
||||
.image-wrapper {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
margin: var(--spacing-md);
|
||||
max-width: calc(100vw - 32px);
|
||||
}
|
||||
|
||||
#modal-image {
|
||||
max-height: 60vh;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue