Spaces:
Sleeping
Sleeping
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Compresor PDF Pro</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| /* --- VARIABLES DE ESTILO (Diseño Oscuro) --- */ | |
| *, *::before, *::after { box-sizing: border-box; } | |
| :root { | |
| --bg-dark-blue: #141c30; | |
| --card-dark-blue: #1e2945; | |
| --accent-green: #00ffc0; | |
| --text-light-gray: #e0e6f0; | |
| --text-muted: #a0aec0; | |
| --border-color: rgba(255, 255, 255, 0.1); | |
| --shadow-elevated: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.15); | |
| --shadow-pressed: inset 2px 2px 5px rgba(0, 0, 0, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 0.05); | |
| --danger-color: #e74c3c; | |
| --success-color: #27ae60; | |
| --error-color: #e74c3c; | |
| --highlight-color: #007bff; /* Azul para el compresor */ | |
| } | |
| body { | |
| background-color: var(--bg-dark-blue); font-family: 'Poppins', sans-serif; | |
| display: flex; justify-content: center; align-items: center; min-height: 100vh; | |
| margin: 0; color: var(--text-light-gray); padding: 20px; | |
| } | |
| .container { | |
| width: 100%; max-width: 500px; background: var(--card-dark-blue); padding: 40px; | |
| border-radius: 20px; box-shadow: var(--shadow-elevated); text-align: center; | |
| transition: transform 0.3s ease; border: 1px solid var(--border-color); | |
| } | |
| h1 { font-weight: 800; font-size: 2.2rem; margin-bottom: 5px; color: var(--highlight-color); letter-spacing: 1.5px; } | |
| .subtitle { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 25px; } | |
| .form-group { margin-bottom: 20px; text-align: left; } | |
| .form-label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 8px; color: var(--text-light-gray); } | |
| .form-input { | |
| width: 100%; padding: 12px 18px; border: 1px solid var(--border-color); border-radius: 12px; | |
| background: var(--bg-dark-blue); color: var(--text-light-gray); font-size: 1rem; outline: none; | |
| transition: all 0.2s ease; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); | |
| } | |
| .form-input::placeholder { color: var(--text-muted); } | |
| .form-input:focus { border-color: var(--highlight-color); box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3); } | |
| /* Estilo para el selector de calidad */ | |
| select.form-input { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| background-image: url("data:image/svg+xml;utf8,<svg fill='%23a0aec0' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>"); | |
| background-repeat: no-repeat; | |
| background-position: right 10px top 50%; | |
| padding-right: 30px; | |
| } | |
| .file-upload-label { | |
| display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px; border-radius: 12px; cursor: pointer; background: var(--bg-dark-blue); box-shadow: var(--shadow-elevated); transition: all 0.2s ease; margin-bottom: 15px; border: 1px dashed var(--highlight-color); /* Color azul */ | |
| } | |
| .file-upload-label:hover { background: #253355; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } | |
| .file-upload-icon { color: var(--highlight-color); font-size: 2.5rem; margin-bottom: 10px; } | |
| .file-upload-label p { margin: 0; font-weight: 600; } | |
| .file-input { display: none; } | |
| #submitBtn { | |
| background: var(--highlight-color); border: none; padding: 15px; border-radius: 12px; | |
| font-size: 1rem; font-weight: 700; width: 100%; cursor: pointer; transition: all 0.2s ease; | |
| color: var(--bg-dark-blue); box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4); /* Sombra azul */ | |
| display: flex; align-items: center; justify-content: center; margin-bottom: 10px; | |
| } | |
| #submitBtn:hover { background: #0069d9; box-shadow: 0 8px 20px rgba(0, 123, 255, 0.5); } | |
| #submitBtn:active { box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4); transform: translateY(1px); color: var(--bg-dark-blue); } | |
| #submitBtn:disabled { opacity: 0.4; cursor: not-allowed; background: var(--text-muted); box-shadow: none; } | |
| #statusMessage { margin-top: 20px; padding: 12px; border-radius: 12px; font-weight: 600; text-align: center; border: 1px solid; color: var(--text-light-gray); } | |
| .status-success { background: rgba(39, 174, 96, 0.2); border-color: var(--success-color); color: var(--success-color); } | |
| .status-error { background: rgba(231, 76, 60, 0.2); border-color: var(--error-color); color: var(--error-color); } | |
| .status-info { background: rgba(0, 123, 255, 0.2); border-color: var(--highlight-color); color: var(--highlight-color); } | |
| .spinner { border: 4px solid rgba(255, 255, 255, 0.1); border-top-color: var(--bg-dark-blue); border-right-color: var(--bg-dark-blue); border-bottom-color: var(--bg-dark-blue); border-left-color: var(--highlight-color); /* Spinner azul */ border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| .hidden { display: none ; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>🗜️ Compresor PDF PRO 🗜️</h1> | |
| <p class="subtitle">Comprime tus PDF de forma agresiva usando Ghostscript.</p> | |
| <p style="font-size: 0.9em; color: var(--text-muted); margin-bottom: 30px;"> | |
| *La compresión es fuerte. El tamaño final depende del contenido (imágenes) del PDF. | |
| </p> | |
| <form id="compressForm"> | |
| <div class="form-group"> | |
| <label for="qualitySelector" class="form-label">Nivel de Compresión (Perfil Ghostscript)</label> | |
| <div class="compression-slider-container" style="justify-content: space-between; gap: 0;"> | |
| <select id="qualitySelector" name="quality" class="form-input" style="width: 100%; box-shadow: none;"> | |
| <option value="ebook">Ebook (Buena compresión, calidad media)</option> | |
| <option value="screen" selected>Screen (Alta compresión, baja calidad)</option> | |
| <option value="printer">Printer (Baja compresión, alta calidad)</option> | |
| <option value="prepress">Prepress (Mínima compresión, máxima calidad)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <label for="pdfFileInput" class="file-upload-label" style="border: 1px dashed var(--highlight-color);"> | |
| <i class="file-upload-icon fas fa-file-upload" style="color: var(--highlight-color);"></i> | |
| <p>Haz clic para seleccionar el archivo PDF</p> | |
| <p id="fileNameDisplay" style="color: var(--text-muted); font-size: 0.85rem; margin-top: 5px !important;">Solo un archivo permitido (.pdf)</p> | |
| </label> | |
| <input type="file" id="pdfFileInput" name="pdf_file" accept="application/pdf" required class="file-input" onchange="displayFileName(this.files[0])"> | |
| <button type="submit" id="submitBtn"> | |
| <span id="buttonText">Comprimir y Descargar PDF</span> | |
| <div id="loadingSpinner" class="spinner hidden ml-3"></div> | |
| </button> | |
| </form> | |
| <div id="statusMessage" class="hidden"></div> | |
| </div> | |
| <script> | |
| const pdfFileInput = document.getElementById('pdfFileInput'); | |
| const submitBtn = document.getElementById('submitBtn'); | |
| const compressForm = document.getElementById('compressForm'); | |
| const statusMessage = document.getElementById('statusMessage'); | |
| const loadingSpinner = document.getElementById('loadingSpinner'); | |
| const buttonText = document.getElementById('buttonText'); | |
| const fileNameDisplay = document.getElementById('fileNameDisplay'); | |
| const qualitySelector = document.getElementById('qualitySelector'); | |
| function showStatus(message, type) { | |
| statusMessage.textContent = message; | |
| statusMessage.classList.remove('hidden', 'status-error', 'status-success', 'status-info'); | |
| if (type === 'error') { | |
| statusMessage.classList.add('status-error'); | |
| } else if (type === 'success') { | |
| statusMessage.classList.add('status-success'); | |
| } else if (type === 'info') { | |
| statusMessage.classList.add('status-info'); | |
| } | |
| } | |
| function toggleLoading(isLoading) { | |
| submitBtn.disabled = isLoading; | |
| if (isLoading) { | |
| buttonText.textContent = 'Comprimiendo...'; | |
| loadingSpinner.classList.remove('hidden'); | |
| } else { | |
| buttonText.textContent = 'Comprimir y Descargar PDF'; | |
| loadingSpinner.classList.add('hidden'); | |
| } | |
| } | |
| function displayFileName(file) { | |
| if (file) { | |
| fileNameDisplay.textContent = `${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)`; | |
| } else { | |
| fileNameDisplay.textContent = "Solo un archivo permitido (.pdf)"; | |
| } | |
| } | |
| compressForm.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| if (pdfFileInput.files.length === 0) { | |
| showStatus('⚠️ Por favor, selecciona un archivo PDF.', 'error'); | |
| return; | |
| } | |
| showStatus('⏳ Subiendo y comprimiendo PDF...', 'info'); | |
| toggleLoading(true); | |
| const formData = new FormData(compressForm); | |
| try { | |
| // Envía a la ruta /compress | |
| const response = await fetch('/compress', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| if (response.ok) { | |
| const blob = await response.blob(); | |
| const url = window.URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| const originalName = pdfFileInput.files[0].name.replace('.pdf', ''); | |
| const selectedQuality = qualitySelector.options[qualitySelector.selectedIndex].text.split('(')[0].trim(); | |
| a.style.display = 'none'; | |
| a.href = url; | |
| a.download = `comp_${selectedQuality.toLowerCase().replace(/ /g, '_')}_${originalName}.pdf`; | |
| document.body.appendChild(a); | |
| a.click(); | |
| window.URL.revokeObjectURL(url); | |
| showStatus('✅ Compresión exitosa. Descarga iniciada.', 'success'); | |
| } else { | |
| const errorText = await response.text(); | |
| showStatus(`❌ Error en la compresión: ${errorText}`, 'error'); | |
| } | |
| } catch (error) { | |
| showStatus(`❌ Error de red: ${error.message}`, 'error'); | |
| } finally { | |
| toggleLoading(false); | |
| } | |
| }); | |
| document.addEventListener('DOMContentLoaded', () => { | |
| displayFileName(null); | |
| }); | |
| </script> | |
| </body> | |
| </html> |