Hugging Face's logo

Spaces:
darkred06
/
compresorpdfnova
Sleeping

App Files Community
darkred06 commited on
Commit
27fe9e6
·
verified ·
1 Parent(s): e2e101a

Update templates/compressor_index.html

Browse files
Files changed (1) hide show
  1. templates/compressor_index.html +227 -0
templates/compressor_index.html CHANGED
@@ -0,0 +1,227 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Compresor PDF Pro</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
8
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet">
9
+
10
+ <style>
11
+ /* --- VARIABLES DE ESTILO (Diseño Oscuro) --- */
12
+ *, *::before, *::after { box-sizing: border-box; }
13
+ :root {
14
+ --bg-dark-blue: #141c30;
15
+ --card-dark-blue: #1e2945;
16
+ --accent-green: #00ffc0;
17
+ --text-light-gray: #e0e6f0;
18
+ --text-muted: #a0aec0;
19
+ --border-color: rgba(255, 255, 255, 0.1);
20
+ --shadow-elevated: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.15);
21
+ --shadow-pressed: inset 2px 2px 5px rgba(0, 0, 0, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 0.05);
22
+ --danger-color: #e74c3c;
23
+ --success-color: #27ae60;
24
+ --error-color: #e74c3c;
25
+ --highlight-color: #007bff; /* Azul para el compresor */
26
+ }
27
+
28
+ body {
29
+ background-color: var(--bg-dark-blue); font-family: 'Poppins', sans-serif;
30
+ display: flex; justify-content: center; align-items: center; min-height: 100vh;
31
+ margin: 0; color: var(--text-light-gray); padding: 20px;
32
+ }
33
+
34
+ .container {
35
+ width: 100%; max-width: 500px; background: var(--card-dark-blue); padding: 40px;
36
+ border-radius: 20px; box-shadow: var(--shadow-elevated); text-align: center;
37
+ transition: transform 0.3s ease; border: 1px solid var(--border-color);
38
+ }
39
+
40
+ h1 { font-weight: 800; font-size: 2.2rem; margin-bottom: 5px; color: var(--highlight-color); letter-spacing: 1.5px; }
41
+ .subtitle { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 25px; }
42
+
43
+ .form-group { margin-bottom: 20px; text-align: left; }
44
+ .form-label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 8px; color: var(--text-light-gray); }
45
+ .form-input {
46
+ width: 100%; padding: 12px 18px; border: 1px solid var(--border-color); border-radius: 12px;
47
+ background: var(--bg-dark-blue); color: var(--text-light-gray); font-size: 1rem; outline: none;
48
+ transition: all 0.2s ease; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
49
+ }
50
+ .form-input::placeholder { color: var(--text-muted); }
51
+ .form-input:focus { border-color: var(--highlight-color); box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3); }
52
+
53
+ /* Estilo para el selector de calidad */
54
+ select.form-input {
55
+ -webkit-appearance: none;
56
+ -moz-appearance: none;
57
+ appearance: none;
58
+ 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>");
59
+ background-repeat: no-repeat;
60
+ background-position: right 10px top 50%;
61
+ padding-right: 30px;
62
+ }
63
+
64
+ .file-upload-label {
65
+ 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 */
66
+ }
67
+ .file-upload-label:hover { background: #253355; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); }
68
+ .file-upload-icon { color: var(--highlight-color); font-size: 2.5rem; margin-bottom: 10px; }
69
+ .file-upload-label p { margin: 0; font-weight: 600; }
70
+ .file-input { display: none; }
71
+
72
+ #submitBtn {
73
+ background: var(--highlight-color); border: none; padding: 15px; border-radius: 12px;
74
+ font-size: 1rem; font-weight: 700; width: 100%; cursor: pointer; transition: all 0.2s ease;
75
+ color: var(--bg-dark-blue); box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4); /* Sombra azul */
76
+ display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
77
+ }
78
+
79
+ #submitBtn:hover { background: #0069d9; box-shadow: 0 8px 20px rgba(0, 123, 255, 0.5); }
80
+ #submitBtn:active { box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4); transform: translateY(1px); color: var(--bg-dark-blue); }
81
+ #submitBtn:disabled { opacity: 0.4; cursor: not-allowed; background: var(--text-muted); box-shadow: none; }
82
+
83
+ #statusMessage { margin-top: 20px; padding: 12px; border-radius: 12px; font-weight: 600; text-align: center; border: 1px solid; color: var(--text-light-gray); }
84
+ .status-success { background: rgba(39, 174, 96, 0.2); border-color: var(--success-color); color: var(--success-color); }
85
+ .status-error { background: rgba(231, 76, 60, 0.2); border-color: var(--error-color); color: var(--error-color); }
86
+ .status-info { background: rgba(0, 123, 255, 0.2); border-color: var(--highlight-color); color: var(--highlight-color); }
87
+
88
+ .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; }
89
+ @keyframes spin { to { transform: rotate(360deg); } }
90
+ .hidden { display: none !important; }
91
+
92
+ </style>
93
+ </head>
94
+ <body>
95
+
96
+ <div class="container">
97
+ <h1>🗜️ Compresor PDF PRO 🗜️</h1>
98
+ <p class="subtitle">Comprime tus PDF de forma agresiva usando Ghostscript.</p>
99
+ <p style="font-size: 0.9em; color: var(--text-muted); margin-bottom: 30px;">
100
+ *La compresión es fuerte. El tamaño final depende del contenido (imágenes) del PDF.
101
+ </p>
102
+
103
+ <form id="compressForm">
104
+
105
+ <div class="form-group">
106
+ <label for="qualitySelector" class="form-label">Nivel de Compresión (Perfil Ghostscript)</label>
107
+ <div class="compression-slider-container" style="justify-content: space-between; gap: 0;">
108
+ <select id="qualitySelector" name="quality" class="form-input" style="width: 100%; box-shadow: none;">
109
+ <option value="ebook">Ebook (Buena compresión, calidad media)</option>
110
+ <option value="screen" selected>Screen (Alta compresión, baja calidad)</option>
111
+ <option value="printer">Printer (Baja compresión, alta calidad)</option>
112
+ <option value="prepress">Prepress (Mínima compresión, máxima calidad)</option>
113
+ </select>
114
+ </div>
115
+ </div>
116
+
117
+ <label for="pdfFileInput" class="file-upload-label" style="border: 1px dashed var(--highlight-color);">
118
+ <i class="file-upload-icon fas fa-file-upload" style="color: var(--highlight-color);"></i>
119
+ <p>Haz clic para seleccionar el archivo PDF</p>
120
+ <p id="fileNameDisplay" style="color: var(--text-muted); font-size: 0.85rem; margin-top: 5px !important;">Solo un archivo permitido (.pdf)</p>
121
+ </label>
122
+ <input type="file" id="pdfFileInput" name="pdf_file" accept="application/pdf" required class="file-input" onchange="displayFileName(this.files[0])">
123
+
124
+ <button type="submit" id="submitBtn">
125
+ <span id="buttonText">Comprimir y Descargar PDF</span>
126
+ <div id="loadingSpinner" class="spinner hidden ml-3"></div>
127
+ </button>
128
+ </form>
129
+
130
+ <div id="statusMessage" class="hidden"></div>
131
+ </div>
132
+
133
+ <script>
134
+ const pdfFileInput = document.getElementById('pdfFileInput');
135
+ const submitBtn = document.getElementById('submitBtn');
136
+ const compressForm = document.getElementById('compressForm');
137
+ const statusMessage = document.getElementById('statusMessage');
138
+ const loadingSpinner = document.getElementById('loadingSpinner');
139
+ const buttonText = document.getElementById('buttonText');
140
+ const fileNameDisplay = document.getElementById('fileNameDisplay');
141
+ const qualitySelector = document.getElementById('qualitySelector');
142
+
143
+ function showStatus(message, type) {
144
+ statusMessage.textContent = message;
145
+ statusMessage.classList.remove('hidden', 'status-error', 'status-success', 'status-info');
146
+
147
+ if (type === 'error') {
148
+ statusMessage.classList.add('status-error');
149
+ } else if (type === 'success') {
150
+ statusMessage.classList.add('status-success');
151
+ } else if (type === 'info') {
152
+ statusMessage.classList.add('status-info');
153
+ }
154
+ }
155
+
156
+ function toggleLoading(isLoading) {
157
+ submitBtn.disabled = isLoading;
158
+ if (isLoading) {
159
+ buttonText.textContent = 'Comprimiendo...';
160
+ loadingSpinner.classList.remove('hidden');
161
+ } else {
162
+ buttonText.textContent = 'Comprimir y Descargar PDF';
163
+ loadingSpinner.classList.add('hidden');
164
+ }
165
+ }
166
+
167
+ function displayFileName(file) {
168
+ if (file) {
169
+ fileNameDisplay.textContent = `${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)`;
170
+ } else {
171
+ fileNameDisplay.textContent = "Solo un archivo permitido (.pdf)";
172
+ }
173
+ }
174
+
175
+ compressForm.addEventListener('submit', async (e) => {
176
+ e.preventDefault();
177
+
178
+ if (pdfFileInput.files.length === 0) {
179
+ showStatus('⚠️ Por favor, selecciona un archivo PDF.', 'error');
180
+ return;
181
+ }
182
+
183
+ showStatus('⏳ Subiendo y comprimiendo PDF...', 'info');
184
+ toggleLoading(true);
185
+
186
+ const formData = new FormData(compressForm);
187
+
188
+ try {
189
+ // Envía a la ruta /compress
190
+ const response = await fetch('/compress', {
191
+ method: 'POST',
192
+ body: formData
193
+ });
194
+
195
+ if (response.ok) {
196
+ const blob = await response.blob();
197
+ const url = window.URL.createObjectURL(blob);
198
+ const a = document.createElement('a');
199
+ const originalName = pdfFileInput.files[0].name.replace('.pdf', '');
200
+ const selectedQuality = qualitySelector.options[qualitySelector.selectedIndex].text.split('(')[0].trim();
201
+
202
+ a.style.display = 'none';
203
+ a.href = url;
204
+ a.download = `comp_${selectedQuality.toLowerCase().replace(/ /g, '_')}_${originalName}.pdf`;
205
+ document.body.appendChild(a);
206
+ a.click();
207
+ window.URL.revokeObjectURL(url);
208
+
209
+ showStatus('✅ Compresión exitosa. Descarga iniciada.', 'success');
210
+
211
+ } else {
212
+ const errorText = await response.text();
213
+ showStatus(`❌ Error en la compresión: ${errorText}`, 'error');
214
+ }
215
+ } catch (error) {
216
+ showStatus(`❌ Error de red: ${error.message}`, 'error');
217
+ } finally {
218
+ toggleLoading(false);
219
+ }
220
+ });
221
+
222
+ document.addEventListener('DOMContentLoaded', () => {
223
+ displayFileName(null);
224
+ });
225
+ </script>
226
+ </body>
227
+ </html>