Estiliza pagina de upload externo - responsiva (novo47)

upload.php

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <title>Upload de Documentos</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 20px; }
+        .upload-form { max-width: 500px; margin: 0 auto; padding: 20px; background: #fff; }
+        .button { padding: 10px 20px; background: #4CAF50; color: white; border: none; }
+        .preview { max-width: 100%; margin: 20px 0; }
+        .preview img { max-width: 100%; }
+        #result { display: none; }
+        .error { color: red; }
+        select { width: 100%; padding: 8px; margin-bottom: 10px; }
+    </style>
+</head>
+<body>
+    <div class="upload-form">
+        <h2>Upload de Documentos</h2>
+        <form action="process.php" method="post" enctype="multipart/form-data" id="uploadForm">
+            <p>
+                <label>Cliente:</label><br>
+                <select name="client_id" required>
+                    <?php
+                    // Buscar clientes do banco de dados
+                    $sql = "SELECT id, nome FROM clientes ORDER BY nome";
+                    $result = $conn->query($sql);
+                    
+                    while ($row = $result->fetch_assoc()) {
+                        echo "<option value='" . $row['id'] . "'>" . $row['nome'] . "</option>";
+                    }
+                    ?>
+                </select>
+            </p>
+            <p>
+                <label>Selecione o documento:</label><br>
+                <input type="file" name="document" accept="image/*" required>
+            </p>
+            <p>
+                <label>Tipo de documento:</label><br>
+                <select name="doc_type" required>
+                    <option value="cpf">CPF</option>
+                    <option value="rg">RG</option>
+                    <option value="cnh">CNH</option>
+                </select>
+            </p>
+            <input type="submit" value="Processar" class="button">
+        </form>
+        <p><a href="index.php?page=doc_list">Ver documentos processados</a></p>
+    </div>
+
+    <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);
+            
+            try {
+                const response = await fetch('process.php', {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                if (response.ok) {
+                    window.location.href = 'index.php?page=doc_list&status=success';
+                } else {
+                    throw new Error('Erro ao processar documento');
+                }
+            } catch (error) {
+                document.getElementById('error').textContent = error.message;
+            }
+        };
+    </script>
+</body>
+</html>