Update index.html

index.html

@@ -13,126 +13,83 @@
             font-family: 'Arial Rounded MT', sans-serif;
         }
               
-    <!-- Pesquisa Dropdown Section -->
-
-        .container {
-            background: white;
-            padding: 40px;
-            border-radius: 15px;
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-            text-align: center;
-            max-width: 500px;
-            width: 100%;
-        }
-
-        .search-form {
+        .search-container {
+            background-color: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
             margin-bottom: 20px;
-        }
-
-        .input-group {
             display: flex;
-            gap: 10px;
-            margin-bottom: 20px;
         }
-
-        input[type="text"] {
-            flex: 1;
-            padding: 15px;
-            border: 2px solid #e0e0e0;
-            border-radius: 8px;
+        input {
+            padding: 10px;
+            flex-grow: 1;
+            border: 1px solid #ddd;
+            border-radius: 4px;
             font-size: 16px;
-            transition: border-color 0.3s ease;
         }
-
-        input[type="text"]:focus {
-            outline: none;
-            border-color: #667eea;
-        }
-
-        .btn-acessar {
-            background: #5466DD;
+        button {
+            padding: 10px 15px;
+            background-color: #4CAF50;
             color: white;
             border: none;
-            padding: 15px 30px;
-            border-radius: 25px;
-            font-size: 18px;
+            border-radius: 4px;
             cursor: pointer;
-            transition: transform 0.2s ease;
+            font-size: 16px;
+            margin-left: 10px;
         }
-
-        .btn-acessar:hover {
-            transform: translateY(-2px);
+        button:hover {
+            background-color: #45a049;
         }
-
-        .help-text {
-            color: #666;
-            font-size: 14px;
-            margin-top: 10px;
+        .result {
+            background-color: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            margin-top: 20px;
         }
-
-        /* Modal styles */
-        .modal {
-            display: none;
-            position: fixed;
-            z-index: 1000;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.5);
+        .city-item {
+            margin: 10px 0;
+            padding: 10px;
+            border-bottom: 1px solid #eee;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
         }
-
-        .modal-content {
-            background-color: white;
-            margin: 15% auto;
-            padding: 30px;
-            border-radius: 10px;
-            width: 90%;
-            max-width: 400px;
-            text-align: center;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+        .access-btn {
+            background-color: #2196F3;
+            padding: 5px 10px;
+            color: white;
+            text-decoration: none;
+            border-radius: 4px;
+            font-size: 14px;
         }
-
-        .modal-header {
-            font-size: 1.5em;
-            font-weight: bold;
-            color: #333;
-            margin-bottom: 20px;
+        .access-btn:hover {
+            background-color: #0b7dda;
         }
-
-        .modal-body {
+        .error {
+            color: #f44336;
+        }
+        .loading {
             color: #666;
-            margin-bottom: 25px;
-            font-size: 16px;
+            font-style: italic;
         }
-
-        .btn-ok {
-            background: #6778EE;
-            color: white;
-            border: none;
-            padding: 12px 25px;
-            border-radius: 6px;
-            font-size: 16px;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
+        .loader {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #3498db;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+            margin: 20px auto;
         }
-
-        .btn-ok:hover {
-            background: #5b68c7;
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
-
-        @media (max-width: 600px) {
-            .container {
-                padding: 30px 20px;
-            }
-
-            h1 {
-                font-size: 1.8em;
-            }
-
-            .input-group {
-                flex-direction: column;
-            }
+        .loading-container {
+            text-align: center;
+            padding: 20px;
         }
       
     <!-- Original Section -->      
@@ -214,112 +171,205 @@
     <!-- Content Section -->
     <section class="container mx-auto px-4 py-12 max-w-4xl">
         <div class="bg-white rounded-lg shadow-lg p-8">
-            <div class="container">
-        <h1 style="text-align: center;">Acessar as Negociações de Débitos Inscritos em Dívida Ativa - Procuradorias das Fazendas dos Estados e DF</h1>
-        <br>
-        
-        <form class="search-form" onsubmit="buscarEstado(event)">
-            <div class="input-group">
-                <input 
-                    type="text" 
-                    id="estadoInput" 
-                    placeholder="Digite a sigla (ex: SP) ou nome do estado (ex: São Paulo)"
-                    autocomplete="off"
-                >
-                <button type="submit" class="btn-acessar"> <i class="fas fa-search"></i> Pesquisar</button>
-            </div>
-        </form>
-        
+    <div class="search-container">
+        <input type="text" id="cityInput" placeholder="Digite o nome de uma cidade e pressione Enter">
+        <button id="searchBtn">Buscar</button>
     </div>
-
-    <!-- Modal -->
-    <div id="errorModal" class="modal">
-        <div class="modal-content">
-            <div class="modal-header">Resultado da pesquisa</div>
-            <div class="modal-body">Unidade não encontrada. Tente novamente</div>
-            <button class="btn-ok" onclick="fecharModal()">OK</button>
-        </div>
+    
+    <div id="resultContainer" class="result" style="display: none;">
+        <div id="resultContent"></div>
     </div>
 
     <script>
-        // Dados dos estados brasileiros
-        const statesData = {
-            'AC': 'www.pge.ac.gov.br/', 'ACRE': 'www.pge.ac.gov.br/',
-            'AL': 'http://www.pge.al.gov.br/', 'ALAGOAS': 'http://www.pge.al.gov.br/',
-            'AM': 'http://www.pge.am.gov.br/', 'AMAZONAS': 'http://www.pge.am.gov.br/',
-            'AP': 'http://www.pge.ap.gov.br/', 'AMAPÁ': 'http://www.pge.ap.gov.br/', 'AMAPA': 'http://www.pge.ap.gov.br/',
-            'BA': 'http://www.pge.ba.gov.br/', 'BAHIA': 'http://www.pge.ba.gov.br/',
-            'CE': 'http://www.pge.ce.gov.br/', 'CEARÁ': 'http://www.pge.ce.gov.br/', 'CEARA': 'http://www.pge.ce.gov.br/',
-            'DF': 'http://www.pg.df.gov.br/', 'DISTRITO FEDERAL': 'http://www.pg.df.gov.br/',
-            'ES': 'http://www.pge.es.gov.br/', 'ESPÍRITO SANTO': 'http://www.pge.es.gov.br/', 'ESPIRITO SANTO': 'http://www.pge.es.gov.br/',
-            'GO': 'http://www.procuradoria.go.gov.br/', 'GOIÁS': 'http://www.procuradoria.go.gov.br/', 'GOIAS': 'http://www.procuradoria.go.gov.br/',
-            'MA': 'http://www.pge.ma.gov.br/', 'MARANHÃO': 'http://www.pge.ma.gov.br/', 'MARANHAO': 'http://www.pge.ma.gov.br/',
-            'MG': 'http://www.pge.mg.gov.br/', 'MINAS GERAIS': 'http://www.pge.mg.gov.br/',
-            'MS': 'http://www.pge.ms.gov.br/', 'MATO GROSSO DO SUL': 'http://www.pge.ms.gov.br/',
-            'MT': 'http://www.pge.mt.gov.br/', 'MATO GROSSO': 'http://www.pge.mt.gov.br/',
-            'PA': 'http://www.pge.pa.gov.br/', 'PARÁ': 'http://www.pge.pa.gov.br/', 'PARA': 'http://www.pge.pa.gov.br/',
-            'PB': 'http://www.pge.pb.gov.br/', 'PARAÍBA': 'http://www.pge.pb.gov.br/', 'PARAIBA': 'http://www.pge.pb.gov.br/',
-            'PE': 'http://www.pge.pe.gov.br/', 'PERNAMBUCO': 'http://www.pge.pe.gov.br/',
-            'PI': 'http://www.pge.pi.gov.br/', 'PIAUÍ': 'http://www.pge.pi.gov.br/', 'PIAUI': 'http://www.pge.pi.gov.br/',
-            'PR': 'http://www.pge.pr.gov.br/', 'PARANÁ': 'http://www.pge.pr.gov.br/', 'PARANA': 'http://www.pge.pr.gov.br/',
-            'RJ': 'http://www.pge.rj.gov.br/', 'RIO DE JANEIRO': 'http://www.pge.rj.gov.br/',
-            'RN': 'http://www.pge.rn.gov.br/', 'RIO GRANDE DO NORTE': 'http://www.pge.rn.gov.br/',
-            'RO': 'http://www.pge.ro.gov.br/', 'RONDÔNIA': 'http://www.pge.ro.gov.br/', 'RONDONIA': 'http://www.pge.ro.gov.br/',
-            'RR': 'http://www.pge.rn.gov.br/', 'RORAIMA': 'http://www.pge.rn.gov.br/',
-            'RS': 'http://www.pge.rs.gov.br/', 'RIO GRANDE DO SUL': 'http://www.pge.rs.gov.br/',
-            'SC': 'http://www.pge.sc.gov.br/', 'SANTA CATARINA': 'http://www.pge.sc.gov.br/',
-            'SE': 'http://www.pge.se.gov.br/', 'SERGIPE': 'http://www.pge.se.gov.br/',
-            'SP': 'http://www.pge.sp.gov.br/', 'SÃO PAULO': 'http://www.pge.sp.gov.br/', 'SAO PAULO': 'http://www.pge.sp.gov.br/',
-            'TO': 'http://www.pge.to.gov.br/', 'TOCANTINS': 'http://www.pge.to.gov.br/'
-        };
+        let cachedMunicipios = null;
+        let currentSearchController = null;
+
+        // Adiciona evento de tecla no input
+        document.getElementById('cityInput').addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                searchCity();
+            }
+        });
 
-        function buscarEstado(event) {
-            event.preventDefault();
+        document.getElementById('searchBtn').addEventListener('click', searchCity);
+
+        async function searchCity() {
+            // Cancela a pesquisa anterior se existir
+            if (currentSearchController) {
+                currentSearchController.abort();
+            }
             
-            const input = document.getElementById('estadoInput');
-            const busca = input.value.trim().toUpperCase();
+            const input = document.getElementById('cityInput').value.trim();
+            const resultContainer = document.getElementById('resultContainer');
+            const resultContent = document.getElementById('resultContent');
             
-            if (!busca) {
-                mostrarModal();
+            resultContainer.style.display = 'block';
+            resultContent.innerHTML = `
+                <div class="loading-container">
+                    <div class="loader"></div>
+                    <p>Buscando cidades...</p>
+                </div>
+            `;
+
+            if (!input) {
+                resultContent.innerHTML = '<p class="error">Por favor, digite o nome de uma cidade.</p>';
                 return;
             }
-            
-            const url = statesData[busca];
-            
-            if (url) {
-                // Adiciona protocolo se não existir
-                const urlCompleta = url.startsWith('http') ? url : 'http://' + url;
-                window.open(urlCompleta, '_blank');
-                input.value = ''; // Limpa o campo após busca bem-sucedida
-            } else {
-                mostrarModal();
+
+            try {
+                // Cria um novo AbortController para esta pesquisa
+                const controller = new AbortController();
+                currentSearchController = controller;
+                
+                if (!cachedMunicipios) {
+                    const response = await fetch('https://servicodados.ibge.gov.br/api/v1/localidades/municipios', {
+                        signal: controller.signal
+                    });
+                    cachedMunicipios = await response.json();
+                }
+                
+                const normalizedInput = normalizeString(input).toLowerCase();
+                const matchedCities = cachedMunicipios.filter(municipio => 
+                    normalizeString(municipio.nome).toLowerCase().includes(normalizedInput)
+                ).map(municipio => ({
+                    name: municipio.nome,
+                    state: municipio.microrregiao.mesorregiao.UF.sigla
+                }));
+
+                if (controller.signal.aborted) return;
+
+                if (matchedCities.length === 0) {
+                    resultContent.innerHTML = `<p class="error">O nome "${input}" não corresponde a nenhuma cidade brasileira. Tente outro.</p>`;
+                    return;
+                }
+
+                resultContent.innerHTML = `
+                    <div class="loading-container">
+                        <div class="loader"></div>
+                        <p>Aguarde enquanto os acessos estão sendo gerados...</p>
+                    </div>
+                `;
+
+                await displayResults(matchedCities, input, resultContent, controller);
+
+            } catch (error) {
+                if (error.name !== 'AbortError') {
+                    resultContent.innerHTML = '<p class="error">Erro ao carregar dados das cidades. Tente novamente mais tarde.</p>';
+                    console.error("Erro na busca:", error);
+                }
+            } finally {
+                currentSearchController = null;
             }
         }
 
-        function mostrarModal() {
-            document.getElementById('errorModal').style.display = 'block';
+        async function displayResults(matchedCities, input, resultElement, controller) {
+            if (controller.signal.aborted) return;
+
+            if (matchedCities.length === 1) {
+                const city = matchedCities[0];
+                const cityUrl = await generateAccessibleUrl(city.name, city.state, controller);
+                
+                if (controller.signal.aborted) return;
+                
+                resultElement.innerHTML = `
+                    <p>Você está procurando pela cidade de ${city.name}, ${city.state}?</p>
+                    <div class="city-item">
+                        <span>${city.name}, ${city.state}</span>
+                        ${cityUrl ? 
+                            `<a href="${cityUrl}" class="access-btn" target="_blank">Acessar</a>` :
+                            `<span class="error">Acesso não disponível</span>`}
+                    </div>
+                `;
+            } else {
+                resultElement.innerHTML = `<p>Foram encontradas ${matchedCities.length} cidades com o nome "${input}":</p>`;
+                
+                for (const city of matchedCities) {
+                    if (controller.signal.aborted) return;
+                    
+                    const cityUrl = await generateAccessibleUrl(city.name, city.state, controller);
+                    const cityElement = document.createElement('div');
+                    cityElement.className = 'city-item';
+                    cityElement.innerHTML = `
+                        <span>${city.name}, ${city.state}</span>
+                        ${cityUrl ? 
+                            `<a href="${cityUrl}" class="access-btn" target="_blank">Acessar</a>` :
+                            `<span class="error">Acesso não disponível</span>`}
+                    `;
+                    resultElement.appendChild(cityElement);
+                }
+            }
         }
 
-        function fecharModal() {
-            document.getElementById('errorModal').style.display = 'none';
+        function normalizeString(str) {
+            return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
+                .replace(/ç/g, 'c')
+                .replace(/Ç/g, 'C');
         }
 
-        // Fechar modal ao clicar fora dele
-        window.onclick = function(event) {
-            const modal = document.getElementById('errorModal');
-            if (event.target === modal) {
-                fecharModal();
+        async function generateAccessibleUrl(cityName, state, controller) {
+            const baseVariations = [
+                normalizeString(cityName).toLowerCase().replace(/[\s-]/g, ''),
+                normalizeString(cityName).toLowerCase().replace(/(\sde|\sdo|\sda|\sdos|\sdas|\s)/g, ''),
+                getCommonShortName(cityName)
+            ];
+
+            const prefixVariations = ['', 'portal.', 'www.portal.', 'prefeitura.'];
+            
+            const testedUrls = new Set();
+            const validUrls = [];
+
+            for (const base of baseVariations) {
+                for (const prefix of prefixVariations) {
+                    if (controller.signal.aborted) return null;
+                    
+                    const url = `https://${prefix}${base}.${state.toLowerCase()}.gov.br`;
+                    
+                    if (!testedUrls.has(url)) {
+                        testedUrls.add(url);
+                        const isAccessible = await checkUrlAccessibility(url, controller);
+                        if (isAccessible) {
+                            validUrls.push(url);
+                        }
+                    }
+                }
             }
+
+            return validUrls.length > 0 ? validUrls[0] : null;
         }
 
-        // Permitir busca ao pressionar Enter
-        document.getElementById('estadoInput').addEventListener('keypress', function(event) {
-            if (event.key === 'Enter') {
-                buscarEstado(event);
+        async function checkUrlAccessibility(url, controller) {
+            try {
+                const response = await fetch(url, { 
+                    method: 'HEAD', 
+                    mode: 'no-cors',
+                    signal: controller.signal
+                });
+                return true;
+            } catch (e) {
+                if (e.name !== 'AbortError') {
+                    console.warn(`URL não acessível: ${url}`);
+                }
+                return false;
             }
-        });
-    </script>               
-        </div>
+        }
+
+        function getCommonShortName(cityName) {
+            const commonShortNames = {
+                'são paulo': 'sp',
+                'rio de janeiro': 'rj',
+                'belo horizonte': 'bh',
+                'porto alegre': 'poa',
+                'são bernardo do campo': 'saobernardo',
+                'santo andré': 'santoandre',
+                'são josé dos campos': 'sjc',
+                'são josé do rio preto': 'riopreto'
+            };
+            
+            const lowerName = cityName.toLowerCase();
+            return commonShortNames[lowerName] || 
+                   normalizeString(cityName).toLowerCase().replace(/[\s-]/g, '').slice(0, 10);
+        }
+    </script>
    <span style="display: inline-block; height: 0;">
    </span>
             <!-- Torne-se um Expert Section -->