From 7ada6fa77d15386ad6147a914debcea18666802f Mon Sep 17 00:00:00 2001
From: irammendes <80186002+irammendes@users.noreply.github.com>
Date: Sat, 29 Mar 2025 18:17:12 -0300
Subject: [PATCH] =?UTF-8?q?Create=20Relat=C3=B3rio=202?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Relatório | 1349 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 1349 insertions(+)
 create mode 100644 Relatório
diff --git a/Relatório b/Relatório
new file mode 100644
index 0000000..dc18836
--- /dev/null
+++ b/Relatório
@@ -0,0 +1,1349 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Relatório Fotográfico Ambiental 3.1</title>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 900px;
+            margin: 0 auto;
+            padding: 20px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 2px solid #006400;
+        }
+        h1, h2 {
+            color: #006400;
+        }
+        .form-section {
+            margin-bottom: 25px;
+            page-break-inside: avoid;
+        }
+        .form-group {
+            margin-bottom: 15px;
+        }
+        label {
+            display: block;
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+        input, textarea, select {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+        }
+        #map {
+            height: 400px;
+            width: 100%;
+            margin: 15px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        .btn {
+            background-color: #006400;
+            color: white;
+            padding: 10px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            margin-top: 10px;
+        }
+        .btn-secondary {
+            background-color: #6c757d;
+        }
+        .btn-danger {
+            background-color: #dc3545;
+        }
+        .coordinates {
+            display: flex;
+            gap: 15px;
+        }
+        .coord-input {
+            flex: 1;
+        }
+        .error {
+            color: red;
+            margin-top: 5px;
+        }
+        .photo-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 15px;
+            margin-top: 15px;
+            page-break-inside: avoid;
+        }
+        .photo-item {
+            flex: 1 1 300px;
+            border: 1px solid #ddd;
+            padding: 10px;
+            border-radius: 5px;
+            position: relative;
+            page-break-inside: avoid;
+        }
+        .photo-number {
+            position: absolute;
+            top: 5px;
+            left: 5px;
+            background-color: rgba(0, 100, 0, 0.7);
+            color: white;
+            padding: 3px 8px;
+            border-radius: 3px;
+            font-weight: bold;
+        }
+        .photo-preview {
+            width: 100%;
+            height: 200px;
+            object-fit: cover;
+            background-color: #f5f5f5;
+            margin-bottom: 10px;
+        }
+        .datetime-group {
+            display: flex;
+            gap: 15px;
+        }
+        .datetime-input {
+            flex: 1;
+        }
+        .dms-coordinates {
+            font-family: monospace;
+            background-color: #f5f5f5;
+            padding: 5px;
+            border-radius: 3px;
+        }
+        .map-controls {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 10px;
+        }
+        .map-type-btn {
+            padding: 5px 10px;
+            background-color: #f8f9fa;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        .map-type-btn.active {
+            background-color: #006400;
+            color: white;
+        }
+        .action-buttons {
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+            margin-top: 20px;
+        }
+        .connection-status {
+            position: fixed;
+            top: 10px;
+            right: 10px;
+            padding: 5px 10px;
+            border-radius: 4px;
+            color: white;
+            font-weight: bold;
+            z-index: 1000;
+        }
+        .online {
+            background-color: #28a745;
+        }
+        .offline {
+            background-color: #dc3545;
+        }
+        .footer {
+            text-align: center;
+            margin-top: 30px;
+            padding-top: 15px;
+            border-top: 1px solid #ddd;
+            font-size: 0.9em;
+            color: #666;
+        }
+        .termo-item {
+            border: 1px solid #ddd;
+            padding: 10px;
+            margin-bottom: 10px;
+            border-radius: 4px;
+            page-break-inside: avoid;
+        }
+        .auto-item {
+            border: 1px solid #ddd;
+            padding: 10px;
+            margin-bottom: 10px;
+            border-radius: 4px;
+            page-break-inside: avoid;
+        }
+        .add-btn {
+            margin-bottom: 15px;
+        }
+        .signature-pad {
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background-color: white;
+        }
+        .signature-clear {
+            margin-top: 10px;
+        }
+        #qrcode {
+            margin: 15px 0;
+            text-align: center;
+        }
+        #infrator-search {
+            margin-bottom: 15px;
+        }
+        #infrator-results {
+            max-height: 200px;
+            overflow-y: auto;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            padding: 10px;
+            margin-bottom: 15px;
+            display: none;
+        }
+        .infrator-item {
+            padding: 8px;
+            border-bottom: 1px solid #eee;
+            cursor: pointer;
+        }
+        .infrator-item:hover {
+            background-color: #f5f5f5;
+        }
+        .infrator-selected {
+            background-color: #e6f7e6;
+            border-left: 3px solid #006400;
+            padding-left: 5px;
+        }
+        @media print {
+            .no-print {
+                display: none;
+            }
+            body {
+                margin: 0;
+                padding: 0;
+            }
+            .container {
+                border: none;
+                box-shadow: none;
+                padding: 0;
+            }
+            .footer {
+                display: none;
+            }
+            .photo-item {
+                page-break-inside: avoid;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="connectionStatus" class="connection-status offline">Offline</div>
+    
+    <div class="container" id="relatorio">
+        <div class="header">
+            <h1>Relatório Fotográfico Ambiental - Versão 3.1</h1>
+            <p>Instituto Chico Mendes de Conservação da Biodiversidade - ICMBio</p>
+            <div id="qrcode"></div>
+        </div>
+        
+        <div class="form-section">
+            <h2>Dados do Relatório</h2>
+            
+            <div class="datetime-group">
+                <div class="datetime-input">
+                    <label for="data">Data:</label>
+                    <input type="date" id="data" required>
+                </div>
+                <div class="datetime-input">
+                    <label for="hora">Hora:</label>
+                    <input type="time" id="hora" required>
+                </div>
+            </div>
+            
+            <div class="form-group">
+                <label for="local">Local da Fiscalização:</label>
+                <input type="text" id="local" required>
+            </div>
+            
+            <div class="form-group">
+                <label for="infrator-search">Buscar Infrator:</label>
+                <input type="text" id="infrator-search" placeholder="Digite nome, CPF/CNPJ ou número de auto anterior">
+                <div id="infrator-results"></div>
+            </div>
+            
+            <div class="form-group">
+                <label for="infrator_nome">Nome do Infrator:</label>
+                <input type="text" id="infrator_nome" required>
+            </div>
+            
+            <div class="form-group">
+                <label for="infrator_documento">CPF/CNPJ:</label>
+                <input type="text" id="infrator_documento" required>
+            </div>
+            
+            <div class="form-group">
+                <label>Coordenadas Geográficas (Graus Decimais):</label>
+                <div class="coordinates">
+                    <input type="text" id="latitude" class="coord-input" placeholder="Latitude" readonly>
+                    <input type="text" id="longitude" class="coord-input" placeholder="Longitude" readonly>
+                </div>
+                <div id="coord-error" class="error"></div>
+                <div class="form-group">
+                    <input type="checkbox" id="rastreamento" checked>
+                    <label for="rastreamento" style="display: inline;">Atualizar coordenadas automaticamente</label>
+                </div>
+            </div>
+            
+            <div class="form-group">
+                <label>Coordenadas em Graus, Minutos e Segundos:</label>
+                <div id="dms-coordinates" class="dms-coordinates">Não disponível</div>
+            </div>
+            
+            <div class="buttons no-print">
+                <button id="get-location" class="btn">Obter Localização Atual</button>
+                <button id="manual-coords" class="btn btn-secondary">Inserir Coordenadas Manualmente</button>
+            </div>
+            
+            <div id="map"></div>
+        </div>
+        
+        <div class="form-section">
+            <h2>Autos de Infração</h2>
+            <div id="autos-container">
+                <div class="auto-item">
+                    <div class="form-group">
+                        <label for="auto_numero_1">Número do Auto de Infração:</label>
+                        <input type="text" id="auto_numero_1" class="auto-numero" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="auto_descricao_1">Descrição da Infração:</label>
+                        <textarea id="auto_descricao_1" class="auto-descricao" rows="3" required></textarea>
+                    </div>
+                </div>
+            </div>
+            <button id="add-auto" class="btn btn-secondary add-btn no-print">Adicionar outro Auto</button>
+        </div>
+        
+        <div class="form-section">
+            <h2>Termos</h2>
+            <div id="termos-container">
+                <div class="termo-item">
+                    <div class="form-group">
+                        <label for="termo_tipo_1">Tipo de Termo:</label>
+                        <select id="termo_tipo_1" class="termo-tipo" required>
+                            <option value="">Selecione...</option>
+                            <option value="notificacao">Termo de Notificação</option>
+                            <option value="apreensao">Termo de Apreensão</option>
+                            <option value="embargo">Termo de Embargo</option>
+                            <option value="soltura">Termo de Soltura</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="termo_numero_1">Número do Termo:</label>
+                        <input type="text" id="termo_numero_1" class="termo-numero" required>
+                    </div>
+                </div>
+            </div>
+            <button id="add-termo" class="btn btn-secondary add-btn no-print">Adicionar outro Termo</button>
+        </div>
+        
+        <div class="form-section">
+            <h2>Descrição da Ação</h2>
+            <div class="form-group">
+                <label for="descricao">Descrição detalhada do que foi realizado em campo:</label>
+                <textarea id="descricao" rows="6" required></textarea>
+            </div>
+        </div>
+        
+        <div class="form-section">
+            <h2>Registro Fotográfico</h2>
+            
+            <div class="form-group no-print">
+                <label for="photo-upload">Adicionar Fotos:</label>
+                <input type="file" id="photo-upload" accept="image/*" multiple>
+                <small>Selecione uma ou mais fotos para upload</small>
+            </div>
+            
+            <div id="photo-container" class="photo-container">
+                <div class="photo-item" style="display: none;">
+                    <div class="photo-number">Figura 1</div>
+                    <img class="photo-preview" src="">
+                    <div class="form-group">
+                        <label>Legenda:</label>
+                        <input type="text" class="photo-caption" placeholder="Descreva a foto">
+                    </div>
+                    <div class="form-group">
+                        <label>Coordenadas:</label>
+                        <input type="text" class="photo-coords" readonly>
+                    </div>
+                    <button class="btn btn-secondary remove-photo no-print">Remover</button>
+                </div>
+            </div>
+        </div>
+        
+        <div class="form-section">
+            <h2>Assinatura do Fiscal</h2>
+            <div class="form-group">
+                <label for="fiscal_nome">Nome do Fiscal:</label>
+                <input type="text" id="fiscal_nome" required>
+            </div>
+            <div class="form-group">
+                <label for="fiscal_matricula">Matrícula:</label>
+                <input type="text" id="fiscal_matricula" required>
+            </div>
+            <div class="form-group">
+                <label>Assinatura:</label>
+                <canvas id="signature-pad" class="signature-pad" width="400" height="200"></canvas>
+                <button id="clear-signature" class="btn btn-secondary signature-clear no-print">Limpar Assinatura</button>
+            </div>
+        </div>
+        
+        <div class="action-buttons no-print">
+            <button id="print-report" class="btn">Imprimir Relatório</button>
+            <button id="generate-pdf" class="btn btn-secondary">Gerar PDF</button>
+            <button id="save-data" class="btn btn-secondary">Salvar Dados</button>
+            <button id="load-data" class="btn btn-secondary">Carregar Dados</button>
+        </div>
+        
+        <div class="footer">
+            <p>Todos os direitos reservados &copy; <span id="current-year"></span> - Iram Mendes Jr - Analista Ambiental - ICMBio</p>
+        </div>
+    </div>
+
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
+    
+    <script>
+        // Código do Service Worker como Blob URL
+        function registerServiceWorker() {
+            if ('serviceWorker' in navigator) {
+                const swCode = `
+                    const CACHE_NAME = 'ambiental-report-v3';
+                    const OFFLINE_TILES = [
+                        '/offline-tiles/{z}/{x}/{y}.png',
+                        '/offline-page'
+                    ];
+
+                    self.addEventListener('install', (event) => {
+                        event.waitUntil(
+                            caches.open(CACHE_NAME)
+                                .then((cache) => {
+                                    return cache.addAll(OFFLINE_TILES);
+                                })
+                        );
+                    });
+
+                    self.addEventListener('fetch', (event) => {
+                        if (event.request.mode === 'navigate' || 
+                            (event.request.method === 'GET' && 
+                             event.request.headers.get('accept').includes('text/html'))) {
+                            event.respondWith(
+                                fetch(event.request)
+                                    .catch(() => {
+                                        return caches.match('/offline-page');
+                                    })
+                            );
+                        } else if (event.request.url.includes('{z}/{x}/{y}')) {
+                            event.respondWith(
+                                caches.match(event.request)
+                                    .then((response) => {
+                                        return response || fetch(event.request)
+                                            .catch(() => {
+                                                return new Response('<svg>...</svg>', {
+                                                    headers: { 'Content-Type': 'image/svg+xml' }
+                                                });
+                                            });
+                                    })
+                            );
+                        } else {
+                            event.respondWith(
+                                caches.match(event.request)
+                                    .then((response) => {
+                                        return response || fetch(event.request);
+                                    })
+                            );
+                        }
+                    });
+                `;
+
+                const blob = new Blob([swCode], { type: 'application/javascript' });
+                const swUrl = URL.createObjectURL(blob);
+
+                navigator.serviceWorker.register(swUrl)
+                    .then(registration => {
+                        console.log('ServiceWorker registration successful');
+                    })
+                    .catch(err => {
+                        console.log('ServiceWorker registration failed: ', err);
+                    });
+            }
+        }
+
+        // Variáveis globais
+        let map;
+        let marker;
+        const coordError = document.getElementById('coord-error');
+        let currentPhotos = [];
+        let baseLayers = {};
+        let currentLayer;
+        let isOnline = navigator.onLine;
+        const connectionStatus = document.getElementById('connectionStatus');
+        let autoCount = 1;
+        let termoCount = 1;
+        let photoCount = 0;
+        let signaturePad;
+        let watchPositionId = null;
+        let infratoresDB = [];
+        
+        // Inicialização
+        window.onload = function() {
+            const now = new Date();
+            document.getElementById('data').value = now.toISOString().split('T')[0];
+            document.getElementById('hora').value = now.toTimeString().substring(0, 5);
+            document.getElementById('current-year').textContent = new Date().getFullYear();
+            
+            // Inicializa o Signature Pad
+            const canvas = document.getElementById('signature-pad');
+            signaturePad = new SignaturePad(canvas);
+            
+            // Carrega banco de infratores (simulado)
+            loadInfratoresDB();
+            
+            updateConnectionStatus();
+            initMap(-15.788, -47.879);
+            registerServiceWorker();
+            generateQRCode();
+            
+            // Configura eventos de busca
+            document.getElementById('infrator-search').addEventListener('input', searchInfrator);
+        };
+
+        // Carrega banco de infratores (simulação)
+        function loadInfratoresDB() {
+            // Simulação de banco de dados
+            infratoresDB = [
+                { nome: "João da Silva", documento: "123.456.789-09", autos: ["AI-2023-001", "AI-2022-045"] },
+                { nome: "Empresa XYZ Ltda", documento: "12.345.678/0001-99", autos: ["AI-2023-078"] },
+                { nome: "Maria Oliveira", documento: "987.654.321-00", autos: ["AI-2021-123", "AI-2020-056"] }
+            ];
+        }
+        
+        // Busca infrator no banco de dados
+        function searchInfrator() {
+            const searchTerm = document.getElementById('infrator-search').value.toLowerCase();
+            const resultsContainer = document.getElementById('infrator-results');
+            
+            if (searchTerm.length < 3) {
+                resultsContainer.style.display = 'none';
+                return;
+            }
+            
+            const results = infratoresDB.filter(infrator => 
+                infrator.nome.toLowerCase().includes(searchTerm) ||
+                infrator.documento.includes(searchTerm) ||
+                infrator.autos.some(auto => auto.toLowerCase().includes(searchTerm))
+            );
+            
+            if (results.length > 0) {
+                resultsContainer.innerHTML = '';
+                results.forEach(infrator => {
+                    const div = document.createElement('div');
+                    div.className = 'infrator-item';
+                    div.innerHTML = `
+                        <strong>${infrator.nome}</strong><br>
+                        ${infrator.documento}<br>
+                        <small>Autos anteriores: ${infrator.autos.join(', ')}</small>
+                    `;
+                    div.addEventListener('click', () => selectInfrator(infrator));
+                    resultsContainer.appendChild(div);
+                });
+                resultsContainer.style.display = 'block';
+            } else {
+                resultsContainer.style.display = 'none';
+            }
+        }
+        
+        // Seleciona um infrator dos resultados
+        function selectInfrator(infrator) {
+            document.getElementById('infrator_nome').value = infrator.nome;
+            document.getElementById('infrator_documento').value = infrator.documento;
+            document.getElementById('infrator-results').style.display = 'none';
+            document.getElementById('infrator-search').value = '';
+        }
+        
+        // Gera QR Code com informações do relatório
+        function generateQRCode() {
+            const qrElement = document.getElementById('qrcode');
+            qrElement.innerHTML = '';
+            
+            // Gera um ID único para o relatório
+            const reportId = 'REL-' + Date.now();
+            
+            QRCode.toCanvas(qrElement, reportId, { width: 150 }, function(error) {
+                if (error) console.error(error);
+            });
+        }
+        
+        // Atualiza o status da conexão
+        function updateConnectionStatus() {
+            isOnline = navigator.onLine;
+            if (isOnline) {
+                connectionStatus.textContent = 'Online';
+                connectionStatus.className = 'connection-status online';
+                initMapWithOnlineLayers();
+            } else {
+                connectionStatus.textContent = 'Offline';
+                connectionStatus.className = 'connection-status offline';
+                initMapWithOfflineLayers();
+            }
+        }
+        
+        // Inicializa o mapa com camadas online
+        function initMapWithOnlineLayers(lat, lng) {
+            if (!map) {
+                const defaultLat = lat || -15.788;
+                const defaultLng = lng || -47.879;
+                initMap(defaultLat, defaultLng);
+                return;
+            }
+            
+            map.eachLayer(layer => {
+                if (layer._url && layer._url.includes('offline-tiles')) {
+                    map.removeLayer(layer);
+                }
+            });
+            
+            baseLayers["Satélite"].addTo(map);
+            currentLayer = baseLayers["Satélite"];
+        }
+        
+        // Inicializa o mapa com camadas offline
+        function initMapWithOfflineLayers(lat, lng) {
+            if (!map) {
+                const defaultLat = lat || -15.788;
+                const defaultLng = lng || -47.879;
+                initMap(defaultLat, defaultLng);
+                return;
+            }
+            
+            map.eachLayer(layer => {
+                if (layer._url && (layer._url.includes('openstreetmap') || layer._url.includes('google'))) {
+                    map.removeLayer(layer);
+                }
+            });
+            
+            try {
+                const offlineLayer = L.tileLayer('offline-tiles/{z}/{x}/{y}.png', {
+                    attribution: 'Map data offline',
+                    maxZoom: 18,
+                    minZoom: 3
+                }).addTo(map);
+                currentLayer = offlineLayer;
+            } catch (e) {
+                document.getElementById('map').innerHTML = 
+                    '<p style="text-align: center; padding-top: 180px;">Mapa offline não disponível. Conecte-se à internet para carregar mapas.</p>';
+            }
+        }
+        
+        // Inicializa o mapa
+        function initMap(lat, lng) {
+            if (map) {
+                map.setView([lat, lng], 15);
+                if (marker) {
+                    marker.setLatLng([lat, lng]);
+                }
+                return;
+            }
+            
+            map = L.map('map').setView([lat, lng], 15);
+            
+            const streetLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            });
+            
+            const satelliteLayer = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
+                attribution: 'Imagens © Google Satellite'
+            });
+            
+            const hybridLayer = L.tileLayer('https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}', {
+                attribution: 'Imagens © Google Hybrid'
+            });
+            
+            baseLayers = {
+                "Satélite": satelliteLayer,
+                "Ruas": streetLayer,
+                "Híbrido": hybridLayer
+            };
+            
+            if (isOnline) {
+                satelliteLayer.addTo(map);
+                currentLayer = satelliteLayer;
+            } else {
+                initMapWithOfflineLayers(lat, lng);
+            }
+            
+            marker = L.marker([lat, lng], {
+                draggable: true
+            }).addTo(map);
+            
+            marker.on('dragend', function() {
+                const newLatLng = marker.getLatLng();
+                updateCoordinates(newLatLng.lat, newLatLng.lng);
+            });
+            
+            map.on('click', function(e) {
+                updateCoordinates(e.latlng.lat, e.latlng.lng);
+                if (!marker) {
+                    marker = L.marker(e.latlng, {
+                        draggable: true
+                    }).addTo(map);
+                    marker.on('dragend', function() {
+                        const newLatLng = marker.getLatLng();
+                        updateCoordinates(newLatLng.lat, newLatLng.lng);
+                    });
+                } else {
+                    marker.setLatLng(e.latlng);
+                }
+            });
+        }
+        
+        // Converte graus decimais para DMS
+        function decimalToDMS(decimal, isLatitude) {
+            const absDecimal = Math.abs(decimal);
+            const degrees = Math.floor(absDecimal);
+            const minutesNotTruncated = (absDecimal - degrees) * 60;
+            const minutes = Math.floor(minutesNotTruncated);
+            const seconds = ((minutesNotTruncated - minutes) * 60).toFixed(2);
+            
+            const direction = isLatitude 
+                ? (decimal >= 0 ? 'N' : 'S') 
+                : (decimal >= 0 ? 'E' : 'W');
+            
+            return `${degrees}° ${minutes}' ${seconds}" ${direction}`;
+        }
+        
+        // Atualiza as coordenadas DMS
+        function updateDMSCoordinates(lat, lng) {
+            const latDMS = decimalToDMS(lat, true);
+            const lngDMS = decimalToDMS(lng, false);
+            document.getElementById('dms-coordinates').textContent = 
+                `Latitude: ${latDMS} | Longitude: ${lngDMS}`;
+        }
+        
+        // Atualiza os campos de coordenadas
+        function updateCoordinates(lat, lng) {
+            document.getElementById('latitude').value = lat.toFixed(6);
+            document.getElementById('longitude').value = lng.toFixed(6);
+            updateDMSCoordinates(lat, lng);
+            coordError.textContent = '';
+            
+            if (map) {
+                map.setView([lat, lng]);
+                if (marker) {
+                    marker.setLatLng([lat, lng]);
+                } else {
+                    marker = L.marker([lat, lng], {
+                        draggable: true
+                    }).addTo(map);
+                    marker.on('dragend', function() {
+                        const newLatLng = marker.getLatLng();
+                        updateCoordinates(newLatLng.lat, newLatLng.lng);
+                    });
+                }
+            }
+        }
+        
+        // Obtém a localização atual
+        function getLocation() {
+            coordError.textContent = 'Obtendo localização...';
+            
+            if (!navigator.geolocation) {
+                coordError.textContent = 'Geolocalização não é suportada pelo seu navegador';
+                return;
+            }
+            
+            // Para qualquer rastreamento anterior
+            if (watchPositionId) {
+                navigator.geolocation.clearWatch(watchPositionId);
+            }
+            
+            // Verifica se o rastreamento está ativado
+            const rastreamentoAtivo = document.getElementById('rastreamento').checked;
+            
+            if (rastreamentoAtivo) {
+                // Inicia o rastreamento contínuo
+                watchPositionId = navigator.geolocation.watchPosition(
+                    function(position) {
+                        const lat = position.coords.latitude;
+                        const lng = position.coords.longitude;
+                        updateCoordinates(lat, lng);
+                        initMap(lat, lng);
+                        coordError.textContent = 'Rastreamento ativo - coordenadas atualizadas';
+                    },
+                    function(error) {
+                        handleGeolocationError(error);
+                    },
+                    {
+                        enableHighAccuracy: true,
+                        timeout: 10000,
+                        maximumAge: 0
+                    }
+                );
+            } else {
+                // Obtém apenas uma posição
+                navigator.geolocation.getCurrentPosition(
+                    function(position) {
+                        const lat = position.coords.latitude;
+                        const lng = position.coords.longitude;
+                        updateCoordinates(lat, lng);
+                        initMap(lat, lng);
+                    },
+                    function(error) {
+                        handleGeolocationError(error);
+                    },
+                    {
+                        enableHighAccuracy: true,
+                        timeout: 10000,
+                        maximumAge: 0
+                    }
+                );
+            }
+        }
+        
+        // Trata erros de geolocalização
+        function handleGeolocationError(error) {
+            let errorMessage;
+            switch(error.code) {
+                case error.PERMISSION_DENIED:
+                    errorMessage = "Permissão de localização negada pelo usuário";
+                    break;
+                case error.POSITION_UNAVAILABLE:
+                    errorMessage = "Informações de localização indisponíveis";
+                    break;
+                case error.TIMEOUT:
+                    errorMessage = "Tempo limite para obter localização excedido";
+                    break;
+                case error.UNKNOWN_ERROR:
+                    errorMessage = "Ocorreu um erro desconhecido";
+                    break;
+            }
+            coordError.textContent = "Erro: " + errorMessage;
+        }
+        
+        // Permite inserir coordenadas manualmente
+        function manualCoords() {
+            const lat = prompt("Digite a latitude (ex: -15.788):");
+            const lng = prompt("Digite a longitude (ex: -47.879):");
+            
+            if (lat && lng && !isNaN(lat) && !isNaN(lng)) {
+                updateCoordinates(parseFloat(lat), parseFloat(lng));
+                initMap(parseFloat(lat), parseFloat(lng));
+            } else {
+                alert("Coordenadas inválidas. Por favor, insira valores numéricos.");
+            }
+        }
+        
+        // Adiciona um novo auto de infração
+        function addAuto() {
+            autoCount++;
+            const newAuto = document.createElement('div');
+            newAuto.className = 'auto-item';
+            newAuto.innerHTML = `
+                <div class="form-group">
+                    <label for="auto_numero_${autoCount}">Número do Auto de Infração:</label>
+                    <input type="text" id="auto_numero_${autoCount}" class="auto-numero" required>
+                </div>
+                <div class="form-group">
+                    <label for="auto_descricao_${autoCount}">Descrição da Infração:</label>
+                    <textarea id="auto_descricao_${autoCount}" class="auto-descricao" rows="3" required></textarea>
+                </div>
+                <button class="btn btn-secondary remove-auto no-print" data-id="${autoCount}">Remover Auto</button>
+            `;
+            document.getElementById('autos-container').appendChild(newAuto);
+            
+            // Adiciona evento para remover o auto
+            newAuto.querySelector('.remove-auto').addEventListener('click', function() {
+                if (autoCount > 1) {
+                    document.getElementById('autos-container').removeChild(newAuto);
+                    autoCount--;
+                } else {
+                    alert("Pelo menos um auto de infração deve ser mantido.");
+                }
+            });
+        }
+        
+        // Adiciona um novo termo
+        function addTermo() {
+            termoCount++;
+            const newTermo = document.createElement('div');
+            newTermo.className = 'termo-item';
+            newTermo.innerHTML = `
+                <div class="form-group">
+                    <label for="termo_tipo_${termoCount}">Tipo de Termo:</label>
+                    <select id="termo_tipo_${termoCount}" class="termo-tipo" required>
+                        <option value="">Selecione...</option>
+                        <option value="notificacao">Termo de Notificação</option>
+                        <option value="apreensao">Termo de Apreensão</option>
+                        <option value="embargo">Termo de Embargo</option>
+                        <option value="soltura">Termo de Soltura</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="termo_numero_${termoCount}">Número do Termo:</label>
+                    <input type="text" id="termo_numero_${termoCount}" class="termo-numero" required>
+                </div>
+                <button class="btn btn-secondary remove-termo no-print" data-id="${termoCount}">Remover Termo</button>
+            `;
+            document.getElementById('termos-container').appendChild(newTermo);
+            
+            // Adiciona evento para remover o termo
+            newTermo.querySelector('.remove-termo').addEventListener('click', function() {
+                if (termoCount > 1) {
+                    document.getElementById('termos-container').removeChild(newTermo);
+                    termoCount--;
+                } else {
+                    alert("Pelo menos um termo deve ser mantido.");
+                }
+            });
+        }
+        
+        // Adiciona uma foto ao relatório
+        function addPhoto(file, coords) {
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                photoCount++;
+                const photoContainer = document.getElementById('photo-container');
+                const template = photoContainer.querySelector('.photo-item');
+                const newPhoto = template.cloneNode(true);
+                
+                newPhoto.style.display = 'block';
+                newPhoto.querySelector('.photo-number').textContent = `Figura ${photoCount}`;
+                newPhoto.querySelector('.photo-preview').src = e.target.result;
+                newPhoto.querySelector('.photo-coords').value = 
+                    `${coords.lat.toFixed(6)}, ${coords.lng.toFixed(6)}`;
+                
+                newPhoto.querySelector('.remove-photo').addEventListener('click', function() {
+                    photoContainer.removeChild(newPhoto);
+                    currentPhotos = currentPhotos.filter(p => p.id !== newPhoto.dataset.id);
+                    updatePhotoNumbers();
+                });
+                
+                const photoId = 'photo-' + Date.now();
+                newPhoto.dataset.id = photoId;
+                photoContainer.appendChild(newPhoto);
+                
+                currentPhotos.push({
+                    id: photoId,
+                    file: file,
+                    coords: coords,
+                    element: newPhoto
+                });
+            };
+            reader.readAsDataURL(file);
+        }
+        
+        // Atualiza a numeração das fotos
+        function updatePhotoNumbers() {
+            const photos = document.querySelectorAll('.photo-item:not([style*="display: none"])');
+            photoCount = 0;
+            
+            photos.forEach((photo, index) => {
+                photoCount++;
+                photo.querySelector('.photo-number').textContent = `Figura ${photoCount}`;
+            });
+        }
+        
+        // Imprime o relatório
+        function printReport() {
+            window.print();
+        }
+        
+        // Gera PDF do relatório com controle de paginação
+        function generatePDF() {
+            const { jsPDF } = window.jspdf;
+            const doc = new jsPDF('p', 'pt', 'a4');
+            const element = document.getElementById('relatorio');
+            const padding = 40;
+            const pageWidth = doc.internal.pageSize.getWidth() - padding * 2;
+            
+            // Primeiro criamos um canvas temporário para calcular a altura total
+            html2canvas(element, {
+                scale: 1,
+                logging: false,
+                useCORS: true
+            }).then(tempCanvas => {
+                const tempImgData = tempCanvas.toDataURL('image/png');
+                const tempImgWidth = pageWidth;
+                const tempImgHeight = (tempCanvas.height * tempImgWidth) / tempCanvas.width;
+                
+                // Calcula quantas páginas serão necessárias
+                const pageHeight = doc.internal.pageSize.getHeight() - padding;
+                const totalPages = Math.ceil(tempImgHeight / pageHeight);
+                
+                // Agora geramos o PDF com qualidade maior, controlando a paginação
+                html2canvas(element, {
+                    scale: 2, // Maior qualidade
+                    logging: false,
+                    useCORS: true
+                }).then(finalCanvas => {
+                    const imgData = finalCanvas.toDataURL('image/png');
+                    const imgWidth = pageWidth;
+                    const imgHeight = (finalCanvas.height * imgWidth) / finalCanvas.width;
+                    
+                    let position = padding;
+                    const imgHeightPerPage = pageHeight - padding;
+                    
+                    // Adiciona a primeira página com cabeçalho
+                    doc.setFontSize(18);
+                    doc.text('Relatório Fotográfico Ambiental', padding, padding - 20);
+                    
+                    // Adiciona a imagem em páginas segmentadas
+                    for (let i = 0; i < totalPages; i++) {
+                        if (i > 0) {
+                            doc.addPage();
+                        }
+                        
+                        const cropY = position - padding;
+                        const cropHeight = Math.min(imgHeightPerPage, imgHeight - cropY);
+                        
+                        doc.addImage(imgData, 'PNG', 
+                            padding, padding, 
+                            imgWidth, imgHeight,
+                            undefined, undefined, 0,
+                            cropY, imgWidth, cropHeight);
+                        
+                        position += imgHeightPerPage;
+                        
+                        // Adiciona rodapé com número de página
+                        doc.setFontSize(10);
+                        doc.text(`Página ${i + 1} de ${totalPages}`, 
+                            doc.internal.pageSize.getWidth() - padding - 50, 
+                            doc.internal.pageSize.getHeight() - 20);
+                    }
+                    
+                    doc.save('relatorio_ambiental.pdf');
+                });
+            });
+        }
+        
+        // Salva os dados no localStorage e IndexedDB
+        function saveData() {
+            const reportData = {
+                data: document.getElementById('data').value,
+                hora: document.getElementById('hora').value,
+                local: document.getElementById('local').value,
+                infrator_nome: document.getElementById('infrator_nome').value,
+                infrator_documento: document.getElementById('infrator_documento').value,
+                latitude: document.getElementById('latitude').value,
+                longitude: document.getElementById('longitude').value,
+                descricao: document.getElementById('descricao').value,
+                fiscal_nome: document.getElementById('fiscal_nome').value,
+                fiscal_matricula: document.getElementById('fiscal_matricula').value,
+                signature: signaturePad.isEmpty() ? null : signaturePad.toDataURL(),
+                autos: [],
+                termos: [],
+                photos: []
+            };
+            
+            // Coleta dados dos autos
+            document.querySelectorAll('.auto-item').forEach((auto, index) => {
+                const autoId = index + 1;
+                reportData.autos.push({
+                    numero: document.getElementById(`auto_numero_${autoId}`).value,
+                    descricao: document.getElementById(`auto_descricao_${autoId}`).value
+                });
+            });
+            
+            // Coleta dados dos termos
+            document.querySelectorAll('.termo-item').forEach((termo, index) => {
+                const termoId = index + 1;
+                reportData.termos.push({
+                    tipo: document.getElementById(`termo_tipo_${termoId}`).value,
+                    numero: document.getElementById(`termo_numero_${termoId}`).value
+                });
+            });
+            
+            // Coleta dados das fotos
+            document.querySelectorAll('.photo-item:not([style*="display: none"])').forEach(photo => {
+                reportData.photos.push({
+                    caption: photo.querySelector('.photo-caption').value,
+                    coords: photo.querySelector('.photo-coords').value,
+                    src: photo.querySelector('.photo-preview').src
+                });
+            });
+            
+            localStorage.setItem('ambientalReportData', JSON.stringify(reportData));
+            
+            if ('indexedDB' in window) {
+                const request = indexedDB.open('AmbientalReportsDB', 1);
+                
+                request.onupgradeneeded = function(event) {
+                    const db = event.target.result;
+                    if (!db.objectStoreNames.contains('reports')) {
+                        db.createObjectStore('reports', { keyPath: 'id' });
+                    }
+                    if (!db.objectStoreNames.contains('infratores')) {
+                        const store = db.createObjectStore('infratores', { keyPath: 'documento' });
+                        store.createIndex('nome', 'nome', { unique: false });
+                    }
+                };
+                
+                request.onsuccess = function(event) {
+                    const db = event.target.result;
+                    const transaction = db.transaction(['reports', 'infratores'], 'readwrite');
+                    const reportStore = transaction.objectStore('reports');
+                    const infratorStore = transaction.objectStore('infratores');
+                    
+                    // Salva o relatório
+                    const reportToSave = {
+                        id: Date.now(),
+                        data: reportData,
+                        createdAt: new Date()
+                    };
+                    
+                    reportStore.put(reportToSave);
+                    
+                    // Atualiza/insere o infrator no banco de dados
+                    const infrator = {
+                        nome: reportData.infrator_nome,
+                        documento: reportData.infrator_documento,
+                        autos: reportData.autos.map(auto => auto.numero),
+                        updatedAt: new Date()
+                    };
+                    
+                    infratorStore.put(infrator);
+                    
+                    alert('Dados salvos com sucesso no banco de dados offline!');
+                };
+                
+                request.onerror = function(event) {
+                    console.error('IndexedDB error:', event.target.error);
+                    alert('Dados salvos apenas no localStorage. Erro ao acessar IndexedDB.');
+                };
+            } else {
+                alert('Dados salvos com sucesso no localStorage!');
+            }
+        }
+        
+        // Carrega os dados do localStorage ou IndexedDB
+        function loadData() {
+            const savedData = localStorage.getItem('ambientalReportData');
+            if (savedData) {
+                loadDataFromStorage(savedData);
+                return;
+            }
+            
+            if ('indexedDB' in window) {
+                const request = indexedDB.open('AmbientalReportsDB', 1);
+                
+                request.onsuccess = function(event) {
+                    const db = event.target.result;
+                    const transaction = db.transaction(['reports'], 'readonly');
+                    const store = transaction.objectStore('reports');
+                    const getAllRequest = store.getAll();
+                    
+                    getAllRequest.onsuccess = function() {
+                        if (getAllRequest.result.length > 0) {
+                            const reports = getAllRequest.result;
+                            reports.sort((a, b) => b.createdAt - a.createdAt);
+                            loadDataFromStorage(JSON.stringify(reports[0].data));
+                        } else {
+                            alert('Nenhum dado salvo encontrado.');
+                        }
+                    };
+                    
+                    getAllRequest.onerror = function() {
+                        alert('Erro ao carregar dados do banco de dados offline.');
+                    };
+                };
+                
+                request.onerror = function(event) {
+                    console.error('IndexedDB error:', event.target.error);
+                    alert('Nenhum dado salvo encontrado.');
+                };
+            } else {
+                alert('Nenhum dado salvo encontrado.');
+            }
+        }
+        
+        function loadDataFromStorage(savedData) {
+            const reportData = JSON.parse(savedData);
+            
+            // Limpa os containers antes de carregar novos dados
+            document.getElementById('autos-container').innerHTML = '';
+            document.getElementById('termos-container').innerHTML = '';
+            document.getElementById('photo-container').innerHTML = '';
+            
+            // Define os contadores para zero
+            autoCount = 0;
+            termoCount = 0;
+            photoCount = 0;
+            
+            // Carrega dados básicos
+            document.getElementById('data').value = reportData.data || '';
+            document.getElementById('hora').value = reportData.hora || '';
+            document.getElementById('local').value = reportData.local || '';
+            document.getElementById('infrator_nome').value = reportData.infrator_nome || '';
+            document.getElementById('infrator_documento').value = reportData.infrator_documento || '';
+            document.getElementById('latitude').value = reportData.latitude || '';
+            document.getElementById('longitude').value = reportData.longitude || '';
+            document.getElementById('descricao').value = reportData.descricao || '';
+            document.getElementById('fiscal_nome').value = reportData.fiscal_nome || '';
+            document.getElementById('fiscal_matricula').value = reportData.fiscal_matricula || '';
+            
+            if (reportData.signature) {
+                signaturePad.fromDataURL(reportData.signature);
+            }
+            
+            if (reportData.latitude && reportData.longitude) {
+                updateDMSCoordinates(
+                    parseFloat(reportData.latitude),
+                    parseFloat(reportData.longitude)
+                );
+                
+                initMap(
+                    parseFloat(reportData.latitude),
+                    parseFloat(reportData.longitude)
+                );
+            }
+            
+            // Carrega autos de infração
+            if (reportData.autos && reportData.autos.length > 0) {
+                reportData.autos.forEach((auto, index) => {
+                    if (index === 0) {
+                        // Usa o primeiro auto que já existe
+                        document.getElementById('auto_numero_1').value = auto.numero || '';
+                        document.getElementById('auto_descricao_1').value = auto.descricao || '';
+                        autoCount = 1;
+                    } else {
+                        // Adiciona novos autos para os demais
+                        addAuto();
+                        const autoId = index + 1;
+                        document.getElementById(`auto_numero_${autoId}`).value = auto.numero || '';
+                        document.getElementById(`auto_descricao_${autoId}`).value = auto.descricao || '';
+                    }
+                });
+            }
+            
+            // Carrega termos
+            if (reportData.termos && reportData.termos.length > 0) {
+                reportData.termos.forEach((termo, index) => {
+                    if (index === 0) {
+                        // Usa o primeiro termo que já existe
+                        document.getElementById('termo_tipo_1').value = termo.tipo || '';
+                        document.getElementById('termo_numero_1').value = termo.numero || '';
+                        termoCount = 1;
+                    } else {
+                        // Adiciona novos termos para os demais
+                        addTermo();
+                        const termoId = index + 1;
+                        document.getElementById(`termo_tipo_${termoId}`).value = termo.tipo || '';
+                        document.getElementById(`termo_numero_${termoId}`).value = termo.numero || '';
+                    }
+                });
+            }
+            
+            // Carrega fotos (se existirem URLs salvas)
+            if (reportData.photos && reportData.photos.length > 0) {
+                reportData.photos.forEach(photo => {
+                    if (photo.src) {
+                        // Simula um objeto File para carregar a foto
+                        const fakeFile = {
+                            name: 'foto_carregada.png',
+                            type: 'image/png'
+                        };
+                        
+                        // Cria um objeto de coordenadas
+                        const coords = {
+                            lat: parseFloat(photo.coords.split(',')[0]),
+                            lng: parseFloat(photo.coords.split(',')[1])
+                        };
+                        
+                        // Cria um elemento de foto manualmente
+                        photoCount++;
+                        const photoContainer = document.getElementById('photo-container');
+                        const template = photoContainer.querySelector('.photo-item');
+                        const newPhoto = template.cloneNode(true);
+                        
+                        newPhoto.style.display = 'block';
+                        newPhoto.querySelector('.photo-number').textContent = `Figura ${photoCount}`;
+                        newPhoto.querySelector('.photo-preview').src = photo.src;
+                        newPhoto.querySelector('.photo-caption').value = photo.caption || '';
+                        newPhoto.querySelector('.photo-coords').value = photo.coords || '';
+                        
+                        newPhoto.querySelector('.remove-photo').addEventListener('click', function() {
+                            photoContainer.removeChild(newPhoto);
+                            currentPhotos = currentPhotos.filter(p => p.id !== newPhoto.dataset.id);
+                            updatePhotoNumbers();
+                        });
+                        
+                        const photoId = 'photo-loaded-' + Date.now();
+                        newPhoto.dataset.id = photoId;
+                        photoContainer.appendChild(newPhoto);
+                        
+                        currentPhotos.push({
+                            id: photoId,
+                            file: fakeFile,
+                            coords: coords,
+                            element: newPhoto
+                        });
+                    }
+                });
+            }
+            
+            alert('Dados carregados com sucesso!');
+        }
+
+        // Event Listeners
+        document.getElementById('get-location').addEventListener('click', getLocation);
+        document.getElementById('manual-coords').addEventListener('click', manualCoords);
+        document.getElementById('print-report').addEventListener('click', printReport);
+        document.getElementById('generate-pdf').addEventListener('click', generatePDF);
+        document.getElementById('save-data').addEventListener('click', saveData);
+        document.getElementById('load-data').addEventListener('click', loadData);
+        document.getElementById('add-auto').addEventListener('click', addAuto);
+        document.getElementById('add-termo').addEventListener('click', addTermo);
+        document.getElementById('clear-signature').addEventListener('click', function() {
+            signaturePad.clear();
+        });
+        
+        document.getElementById('photo-upload').addEventListener('change', function(e) {
+            const files = e.target.files;
+            const lat = parseFloat(document.getElementById('latitude').value);
+            const lng = parseFloat(document.getElementById('longitude').value);
+            
+            if (isNaN(lat) || isNaN(lng)) {
+                alert("Por favor, defina as coordenadas antes de adicionar fotos.");
+                return;
+            }
+            
+            for (let i = 0; i < files.length; i++) {
+                addPhoto(files[i], { lat, lng });
+            }
+            
+            e.target.value = '';
+        });
+        
+        // Monitora mudanças na conexão
+        window.addEventListener('online', updateConnectionStatus);
+        window.addEventListener('offline', updateConnectionStatus);
+        
+        // Atualiza o QR Code quando os dados mudam
+        document.getElementById('auto_numero_1').addEventListener('change', generateQRCode);
+    </script>
+</body>
+</html>
