Estiliza pagina de upload externo - responsiva (novo47)

upload.php

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <title>Processador de Documentos</title>
+    <style>
+        .preview { max-width: 800px; margin: 20px 0; }
+        .preview img { max-width: 100%; }
+        #result { display: none; }
+        .error { color: red; }
+    </style>
+</head>
+<body>
+    <form id="uploadForm" enctype="multipart/form-data">
+        <input type="file" name="document" accept="image/jpeg,image/png" required>
+        <button type="submit">Processar Documento</button>
+    </form>
+
+    <div id="result">
+        <h3>Resultado do Processamento:</h3>
+        <div class="preview">
+            <h4>Documento Original:</h4>
+            <img id="originalImage" src="" alt="Original">
+        </div>
+        <div class="preview">
+            <h4>Documento Processado:</h4>
+            <img id="processedImage" src="" alt="Processado">
+        </div>
+    </div>
+
+    <div id="error" class="error"></div>
+
+    <script>
+        document.getElementById('uploadForm').onsubmit = async (e) => {
+            e.preventDefault();
+            
+            const formData = new FormData(e.target);
+            const resultDiv = document.getElementById('result');
+            const errorDiv = document.getElementById('error');
+            
+            try {
+                const response = await fetch('process_document.php', {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                const result = await response.json();
+                
+                if (result.success) {
+                    document.getElementById('originalImage').src = result.original;
+                    document.getElementById('processedImage').src = result.file;
+                    resultDiv.style.display = 'block';
+                    errorDiv.textContent = '';
+                } else {
+                    throw new Error(result.message);
+                }
+            } catch (error) {
+                errorDiv.textContent = error.message;
+                resultDiv.style.display = 'none';
+            }
+        };
+    </script>
+</body>
+</html>