Unicive Graduação e Pós EAD

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cursos - Polo UniCV UNICIVE</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        unicive: {
                            green: '#009640',
                            dark: '#006d2e',
                            light: '#e6f4ea'
                        }
                    }
                }
            }
        }
    </script>
    <style>
        /* Estilos adicionais para transições suaves */
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        }
        .loader {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #009640;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Estilos específicos para a galeria de fotos do Polo */
        .polo-photo {
            object-fit: cover;
            width: 100%;
            border-radius: 0.75rem; /* rounded-xl padrão para as menores */
            transition: transform 0.4s ease, filter 0.3s ease;
            cursor: pointer;
        }
        .polo-photo:hover {
            transform: scale(1.03);
            filter: brightness(1.05);
        }
        .polo-photo-main {
            border-radius: 1rem; /* rounded-2xl para a foto maior */
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen font-sans text-gray-800">

<header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-20">
                
                <div class="flex-shrink-0 flex items-center">
                    <img class="h-12 w-auto" src="https://diariodebordo.unicive.edu.br/assets/images/logounicvverde.png" alt="Logo UniCV">
                </div>
                
                
                <div class="flex items-center gap-3">
                    
                    <a href="https://sistema.unicv.edu.br/academico/aluno-v2/login" target="_blank"
                       class="hidden md:inline-flex items-center justify-center px-4 py-2 border border-gray-200 rounded-lg shadow-sm text-sm font-bold text-gray-600 bg-white hover:bg-gray-50 focus:outline-none transition-colors">
                        <i class="fa-solid fa-user-graduate text-lg mr-2 text-green-700"></i>
                        Portal do Aluno
                    </a>
                    
                    
                    <a href="https://wa.me/5547991140592?text=Olá,%20gostaria%20de%20mais%20informações%20sobre%20os%20cursos%20da%20UniCV." 
                       target="_blank"
                       class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-green-500 hover:bg-green-600 focus:outline-none transition-colors">
                        <i class="fa-brands fa-whatsapp text-lg mr-2"></i>
                        <span class="hidden sm:inline">Fale Conosco</span>
                    </a>
                </div>
            </div>
        </div>
    </header>

<div class="bg-unicive-green py-12 px-4 sm:px-6 lg:px-8 bg-opacity-95 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')]">
        <div class="max-w-7xl mx-auto text-center">
            <h1 class="text-3xl font-extrabold text-white sm:text-4xl drop-shadow-md">
                Encontre o curso ideal para você
            </h1>
            <p class="mt-4 text-lg text-unicive-light max-w-2xl mx-auto mb-8">
                Transforme seu futuro com a UniCIVE. Explore nossas opções de graduação, 2ª licenciatura e pós-graduação.
            </p>

<div class="flex flex-col sm:flex-row justify-center gap-4 mt-6">
                <button id="btnSegundaGraduacao" class="hidden bg-white text-green-700 hover:bg-green-50 px-6 py-3.5 rounded-xl font-bold shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all items-center justify-center gap-2 border border-transparent">
                    <i class="fa-solid fa-graduation-cap text-xl"></i> Segunda Graduação
                </button>
                <button id="btnTecnicoTecnologo" class="hidden bg-unicive-dark text-white hover:bg-green-900 px-6 py-3.5 rounded-xl font-bold shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all items-center justify-center gap-2 border border-green-600">
                    <i class="fa-solid fa-rocket text-xl"></i> Técnico para Tecnólogo
                </button>
            </div>
        </div>
    </div>

<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        
        
        <div id="iframeContainer" class="hidden w-full flex-col items-center mb-12 relative z-20">
            <div class="w-full flex flex-col sm:flex-row justify-between items-center mb-6 bg-white p-4 rounded-xl shadow-sm border border-gray-200 gap-4">
                <h2 id="iframeTitle" class="text-xl sm:text-2xl font-black text-green-700 uppercase tracking-wide">Programa Especial</h2>
                <button onclick="closeIframe()" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-6 py-2.5 rounded-lg font-bold flex items-center gap-2 transition-colors border border-gray-300 shadow-sm text-sm sm:text-base w-full sm:w-auto justify-center">
                    <i class="fa-solid fa-arrow-left"></i> Voltar aos Cursos
                </button>
            </div>
            
            <div class="w-full h-[75vh] rounded-2xl overflow-hidden shadow-lg border border-gray-200 bg-white">
                <iframe id="specialIframe" src="" width="100%" height="100%" frameborder="0" class="w-full h-full"></iframe>
            </div>
        </div>

<div id="searchContainer" class="bg-white p-4 rounded-xl shadow-sm border border-gray-200 mb-8 flex flex-col md:flex-row gap-4 relative z-10 -mt-14">
            
            
            <div class="flex-1 relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <i class="fa-solid fa-magnifying-glass text-gray-400"></i>
                </div>
                <input type="text" id="searchInput" 
                       class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-unicive-green focus:border-unicive-green sm:text-sm transition-colors" 
                       placeholder="Buscar por nome do curso...">
            </div>

<div class="md:w-1/3">
                <select id="categorySelect" 
                        class="block w-full pl-3 pr-10 py-3 text-base border border-gray-300 focus:outline-none focus:ring-2 focus:ring-unicive-green focus:border-unicive-green sm:text-sm rounded-lg transition-colors cursor-pointer bg-gray-50 hover:bg-white">
                    <option value="ALL">Todas as Categorias</option>
                    
                </select>
            </div>
        </div>

<div id="loadingState" class="flex flex-col items-center justify-center py-20">
            <div class="loader mb-4"></div>
            <p class="text-gray-500 font-medium animate-pulse">Buscando cursos na base de dados...</p>
        </div>

<div id="coursesGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 hidden mb-12">
            
        </div>

<div id="emptyState" class="hidden text-center py-20 bg-white rounded-2xl border border-gray-100 shadow-sm mb-12">
            <i class="fa-regular fa-face-frown text-5xl text-gray-300 mb-4"></i>
            <h3 class="text-lg font-medium text-gray-900">Nenhum curso encontrado</h3>
            <p class="mt-1 text-gray-500">Tente ajustar sua busca ou limpar a categoria.</p>
        </div>

<div id="institutionalSection" class="pt-10 mt-10 border-t border-gray-200">
            
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
                
                
                <div class="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 h-full flex flex-col">
                    <h3 class="text-green-700 font-black text-[11px] uppercase mb-4 flex items-center gap-2 tracking-wider">
                        <i class="fa-solid fa-university text-lg"></i> Por que escolher a UniCIVE?
                    </h3>
                    <div class="space-y-4 flex-grow">
                        <p class="text-[11px] text-gray-600 leading-relaxed font-medium">
                            Recebemos <span class="text-green-700 font-bold">avaliação máxima em conceito institucional no MEC</span>. Somos uma rede global com mais de 900 polos no Brasil e presença em 10 países. UniCV agora é UniCIVE!
                        </p>
                        
                        <div class="grid grid-cols-2 gap-3">
                            <div class="bg-green-50 p-3 rounded-2xl border border-green-100 hover:bg-green-100 transition-colors">
                                <i class="fa-solid fa-cloud text-green-600 mb-1"></i>
                                <p class="text-[9px] font-bold uppercase text-green-800">Estude com flexibilidade</p>
                                <p class="text-[8px] text-green-700 opacity-80 mt-1">Aulas e avaliações 100% Online.</p>
                            </div>
                            <div class="bg-blue-50 p-3 rounded-2xl border border-blue-100 hover:bg-blue-100 transition-colors">
                                <i class="fa-solid fa-mobile-screen-button text-blue-600 mb-1"></i>
                                <p class="text-[9px] font-bold uppercase text-blue-800">App Exclusivo</p>
                                <p class="text-[8px] text-blue-700 opacity-80 mt-1">Estude na palma da mão.</p>
                            </div>
                        </div>

<div class="rounded-2xl overflow-hidden shadow-md border border-gray-100 my-4 aspect-video bg-gray-100">
                            <iframe width="100%" height="100%" src="https://www.youtube.com/embed/FWPQRmwUGxA?si=9NfM66Fqu7xZNtJ5" title="Vídeo Institucional UniCV" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                        </div>

<p class="text-[10px] text-gray-500 leading-snug">
                            Nossa <span class="font-bold">Trilha de Conhecimento</span> inclui videoaulas, podcasts, apostilas e artigos interativos. Estágios e atividades extensionistas podem ser realizados na sua cidade com apoio da nossa tutoria.
                        </p>

<a href="https://emec.mec.gov.br/emec/consulta-cadastro/detalhamento/d96957f455f6405d14c6542552b0f6eb/MzY0OQ==" target="_blank" class="flex items-center justify-between bg-gray-50 mt-4 p-3 rounded-xl border border-gray-200 group hover:border-green-300 transition-colors">
                            <span class="text-[9px] font-black uppercase text-gray-500 group-hover:text-green-700 transition-colors">Verificar Portal E-MEC</span>
                            <i class="fa-solid fa-arrow-up-right-from-square text-[10px] text-gray-400 group-hover:text-green-600"></i>
                        </a>
                    </div>
                </div>

<div class="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 h-full">
                    <h3 class="text-gray-500 font-black text-[11px] uppercase tracking-wider mb-4 flex items-center gap-2">
                        <i class="fa-solid fa-images text-gray-400 text-lg"></i> Galeria do Polo
                    </h3>
                    <div class="space-y-3">
                        
                        <div class="overflow-hidden rounded-2xl shadow-sm border border-gray-100">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEierWlG7qzYkIDxoI_TVwmlPEZhvNC0L7l_pI_aawOKM8F-KbUH6-86Z-_rlP5ccaBJw_ecpdBTCsR3iyBf4MuWYUMOGkFWlOp7ELpxcedltl4lu0TcXjevhrV2SBNFaKBNNVyf_mm4K_HFkZkyNNLWbqKbRV6f5VV1TIPrr5_8viPePFBbXPZPcYL3ePY/s16000-rw/638854393974469059.jpg" 
                                 class="polo-photo polo-photo-main h-[200px]" 
                                 alt="Fachada do Polo">
                        </div>
                        
                        
                        <div class="grid grid-cols-2 gap-3">
                            <div class="overflow-hidden rounded-xl border border-gray-100 h-[90px]">
                                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilQ_I2BBSvLFOZDl4z_IGz8Tt8AC_jNZfPrksKeU7rYrVDVD5zBBtlfxfJWXZ_m8wNFubl-xJQxLXcXn_slXUR7EYt4ZG3oxsHW9gKbI9-fHDBowiAfOA-LHUXyRqFm_jgGTSI68MeX2zauWS-vbBTOqw8k3mEKbo8G-XOrKbQaKoVcUnFFAbN3GhK9lW_/s16000/unnamed%20(5).jpg" 
                                     class="polo-photo h-full" alt="Recepção">
                            </div>
                            <div class="overflow-hidden rounded-xl border border-gray-100 h-[90px]">
                                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrS9gNCc_PY-KfbAhL0w4qZgvHLNYT5zqtQfQ0vPCLk39vY3-rXV2K-HAn0e3zTkjb-vyxeF4u6UMd3q8cMNmA2JQt37XdIA_IpRyo1CbXQ5-5_TOrX8TyOzPGYcPxgXezCJOsqBjvAl0D8J5jlWXJEJ367F_F_seKhkm2a-Ygci3urD0llRwzwJ9iNAk/w680-rw/IMG-20230711-WA0047.jpg" 
                                     class="polo-photo h-full" alt="Biblioteca">
                            </div>
                            <div class="overflow-hidden rounded-xl border border-gray-100 h-[90px]">
                                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvrNLbHMtHFPSFyywnJBAwyV_HHM8JptHqlYpX51gK13SbhfBIJdubRtJEQK4uw6jsvwuRhCiecCDHLSkbglxFObqUKtNAeLXPdt0jpLs-gH2z7vAZgO5jqA3SPKP7SZNSbIyK5gaY3PLEPc_7iv7SwamqWwmlnNSzIzS7AcGCbnKJnSMTTYtfUCFmWE0/s320-rw/IMG-20230711-WA0044.jpg" 
                                     class="polo-photo h-full" alt="Sala de Treinamentos">
                            </div>
                            <div class="overflow-hidden rounded-xl border border-gray-100 h-[90px]">
                                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_uFaJb39qU4lB5frCeQjYY6uL3ZTlAEi6BzqeHbmUl7LGJBmz8QaQIR7_cYm60HezoFSfI5XPOvy6s_x_naFOWjQg2eHIBojdaadco832-zgLV3OUM7JsJhGFFoGkPzpycmEOoojrWqfwhnYMPtUndvkiHsALriwyKjgCyX6n1yHcW7_-FLk42wmAGP4/s320-rw/IMG-20230711-WA0038.jpg" 
                                     class="polo-photo h-full" alt="Sala Informatizada">
                            </div>
                        </div>
                    </div>
                </div>

<div class="bg-white rounded-3xl p-6 shadow-sm border border-green-100 h-full flex flex-col relative overflow-hidden group">
                    
                    <div class="absolute top-0 right-0 w-32 h-32 bg-green-50 rounded-bl-full -mr-10 -mt-10 z-0 opacity-50"></div>
                    
                    <h3 class="text-green-700 font-black text-[11px] mb-4 flex items-center uppercase tracking-widest relative z-10">
                        <i class="fa-solid fa-location-dot mr-2 text-green-500 text-lg"></i> Onde estamos
                    </h3>
                    
                    <div class="rounded-2xl overflow-hidden border border-gray-200 mb-4 shadow-inner flex-grow relative z-10 bg-gray-100">
                        <iframe src="https://www.google.com/maps/embed?pb=!4v1768176776648!6m8!1m7!1sFxbndkvOct79LZhS9uTyQg!2m2!1d-26.24736193237291!2d-48.63632177101231!3f322.65!4f-4.209999999999994!5f1.3112900371734753" 
                                width="100%" 
                                height="100%" 
                                style="border:0; min-height: 250px;" 
                                allowfullscreen="" 
                                loading="lazy" 
                                referrerpolicy="no-referrer-when-downgrade">
                        </iframe>
                    </div>
                    
                    <div class="bg-gray-50 rounded-xl p-3 border border-gray-100 relative z-10 text-center">
                        <p class="text-[11px] text-gray-700 font-bold uppercase leading-relaxed">
                            Rua Marcílio Dias, 607 - Centro<br>
                            <span class="text-green-700">São Francisco do Sul - SC</span>
                        </p>
                    </div>
                </div>

</div>
        </div>

</main>

<footer class="bg-white border-t border-gray-200 mt-8">
        <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-4">
            <div class="flex items-center gap-4">
                <img class="h-8 w-auto grayscale opacity-70 hover:grayscale-0 hover:opacity-100 transition-all" src="https://diariodebordo.unicive.edu.br/assets/images/logounicvverde.png" alt="Logo UniCV">
            </div>
            <p class="text-center text-gray-400 text-sm">
                © <span id="year"></span> Polo UniCV. Todos os direitos reservados.
            </p>
        </div>
    </footer>

<a href="https://wa.me/5547991140592?text=Olá,%20gostaria%20de%20mais%20informações%20sobre%20a%20faculdade." 
       target="_blank"
       class="fixed bottom-6 right-6 bg-green-500 text-white p-4 rounded-full shadow-xl hover:bg-green-600 transition-transform transform hover:scale-110 z-50 flex items-center justify-center animate-bounce-slow">
        <i class="fa-brands fa-whatsapp text-3xl"></i>
    </a>

<script>
        document.getElementById('year').textContent = new Date().getFullYear();

// =====================================================================
        // CONFIGURAÇÃO DA API (Vinculada conforme solicitado)
        // =====================================================================
        const GOOGLE_SCRIPT_URL = "https://script.google.com/macros/s/AKfycbynWXtwDXcJkPuYL5b9JbbXQSpzgBUW92--ugUq1uVC0-lpKTyDOq4mZOedpBytSBNMsQ/exec";
        const WHATSAPP_NUMBER = "5547991140592";

let allCourses = []; 
        let filteredCourses = [];

const coursesGrid = document.getElementById('coursesGrid');
        const loadingState = document.getElementById('loadingState');
        const emptyState = document.getElementById('emptyState');
        const searchInput = document.getElementById('searchInput');
        const categorySelect = document.getElementById('categorySelect');

// Busca dados na Planilha
        async function fetchCourses() {
            try {
                const response = await fetch(GOOGLE_SCRIPT_URL);
                const data = await response.json();
                
                if(data && data.length > 0) {
                    // Normaliza strings para evitar erros de digitação na planilha
                    const normalizeCat = (c) => (c || '').trim().toUpperCase();
                    
                    // Extrair link "Segunda Graduação"
                    const segGradCourse = data.find(c => normalizeCat(c.categoria).includes("SEGUNDA GRADUA"));
                    if (segGradCourse && segGradCourse.linkDestino) {
                        const btn = document.getElementById('btnSegundaGraduacao');
                        btn.classList.remove('hidden');
                        btn.classList.add('inline-flex');
                        btn.onclick = () => openIframe(segGradCourse.linkDestino, "Segunda Graduação");
                    }

// Extrair link "Técnico para Tecnólogo"
                    const tecTecCourse = data.find(c => {
                        const cat = normalizeCat(c.categoria);
                        return (cat.includes("TÉCNICO") || cat.includes("TECNICO")) && cat.includes("TECNÓLOGO");
                    });
                    if (tecTecCourse && tecTecCourse.linkDestino) {
                        const btn = document.getElementById('btnTecnicoTecnologo');
                        btn.classList.remove('hidden');
                        btn.classList.add('inline-flex');
                        btn.onclick = () => openIframe(tecTecCourse.linkDestino, "Técnico para Tecnólogo");
                    }

// Filtra todas as "categorias especiais" para que não virem cards normais
                    allCourses = data.filter(c => {
                        const cat = normalizeCat(c.categoria);
                        const isSeg = cat.includes("SEGUNDA GRADUA");
                        const isTec = (cat.includes("TÉCNICO") || cat.includes("TECNICO")) && cat.includes("TECNÓLOGO");
                        return !isSeg && !isTec; // Se não for nenhum dos dois especiais, adiciona aos cursos normais
                    });
                } else {
                    allCourses = [];
                }
                initData();
            } catch (error) {
                console.error("Erro ao buscar dados do Google Sheets:", error);
                loadingState.innerHTML = `<p class="text-red-500 font-bold"><i class="fa-solid fa-triangle-exclamation"></i> Erro ao carregar cursos. Verifique se a planilha está publicada.</p>`;
            }
        }

// Inicializa a interface com os dados
        function initData() {
            filteredCourses = [...allCourses];
            populateCategories();
            renderCourses();
            
            loadingState.classList.add('hidden');
            coursesGrid.classList.remove('hidden');
        }

// Preenche o Select de Categorias
        function populateCategories() {
            const uniqueCategories = [...new Set(allCourses.map(course => course.categoria))].filter(Boolean);
            
            categorySelect.innerHTML = '<option value="ALL">Todas as Categorias</option>';
            
            uniqueCategories.forEach(category => {
                const option = document.createElement('option');
                option.value = category;
                option.textContent = category;
                categorySelect.appendChild(option);
            });
        }

// Função de Filtro
        function filterData() {
            const searchTerm = searchInput.value.toLowerCase();
            const selectedCategory = categorySelect.value;

filteredCourses = allCourses.filter(course => {
                const courseName = course.nome ? course.nome.toLowerCase() : '';
                const courseDesc = course.descricao ? course.descricao.toLowerCase() : '';
                
                const matchesSearch = courseName.includes(searchTerm) || courseDesc.includes(searchTerm);
                const matchesCategory = selectedCategory === "ALL" || course.categoria === selectedCategory;
                
                return matchesSearch && matchesCategory;
            });

renderCourses();
        }

// Renderiza os Cards
        function renderCourses() {
            coursesGrid.innerHTML = '';

if (filteredCourses.length === 0) {
                coursesGrid.classList.add('hidden');
                emptyState.classList.remove('hidden');
                return;
            }

emptyState.classList.add('hidden');
            coursesGrid.classList.remove('hidden');

filteredCourses.forEach(course => {
                // Nome limpo para o WhatsApp
                const nomeCurso = course.nome || 'um curso';
                const zapMessage = `Olá, tenho interesse no curso de ${nomeCurso}. Poderia me passar mais informações?`;
                const zapLink = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(zapMessage)}`;

const imageUrl = course.imagem || 'https://placehold.co/500x300/e6f4ea/009640?text=UniCV';
                const botaoDestino = course.linkDestino && course.linkDestino.trim() !== '' ? course.linkDestino : zapLink;
                const textoBotDestino = course.textoBotao || 'Ver Detalhes';

const cardHTML = `
                    <div class="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100 flex flex-col h-full card-hover relative group">
                        
                        
                        <div class="relative h-44 w-full bg-gray-100 overflow-hidden">
                            <img src="${imageUrl}" 
                                 alt="${course.nome}" 
                                 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                                 onerror="this.src='https://placehold.co/500x300/e6f4ea/009640?text=UniCV'">
                            <div class="absolute top-3 left-3 bg-white/90 backdrop-blur-sm text-green-700 text-[10px] font-black px-3 py-1.5 rounded-lg shadow-sm uppercase tracking-wide">
                                ${course.categoria || 'Curso'}
                            </div>
                        </div>
                        
                        
                        <div class="p-5 flex flex-col flex-grow">
                            <h3 class="text-lg font-bold text-gray-900 leading-tight mb-2">${course.nome}</h3>
                            
                            
                            <div class="mb-3 flex flex-wrap gap-2">
                                <span class="inline-flex items-center text-[11px] bg-gray-50 border border-gray-200 text-gray-600 px-2 py-1 rounded-md font-medium">
                                    <i class="fa-regular fa-clock mr-1 text-gray-400"></i> ${course.turno || 'EAD'}
                                </span>
                            </div>

<p class="text-gray-500 text-xs mb-5 flex-grow line-clamp-3 leading-relaxed">
                                ${course.descricao || 'Conheça mais sobre este curso entrando em contato com nossa equipe.'}
                            </p>
                            
                            
                            <div class="flex flex-col gap-2 mt-auto">
                                <a href="${zapLink}" target="_blank" 
                                   class="w-full inline-flex justify-center items-center px-4 py-2.5 rounded-xl shadow-sm text-[13px] font-bold text-white bg-green-500 hover:bg-green-600 focus:outline-none transition-all hover:shadow-md">
                                    <i class="fa-brands fa-whatsapp mr-2 text-lg"></i>
                                    Tenho interesse
                                </a>
                                <a href="${botaoDestino}" target="_blank"
                                   class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-200 text-[12px] font-bold rounded-xl shadow-sm text-gray-600 bg-white hover:bg-gray-50 hover:text-green-700 focus:outline-none transition-all">
                                    ${textoBotDestino}
                                </a>
                            </div>
                        </div>
                    </div>
                `;
                
                coursesGrid.insertAdjacentHTML('beforeend', cardHTML);
            });
        }

searchInput.addEventListener('input', filterData);
        categorySelect.addEventListener('change', filterData);

// =====================================================================
        // LOGICA DE IFRAME - PROGRAMAS ESPECIAIS
        // =====================================================================
        function openIframe(url, title) {
            const iframe = document.getElementById('specialIframe');
            const container = document.getElementById('iframeContainer');
            const titleEl = document.getElementById('iframeTitle');
            
            // Configura URL e Titulo
            iframe.src = url;
            titleEl.textContent = title;
            
            // Oculta os itens normais (Busca, Grid de Cursos e Rodapé Institucional)
            document.getElementById('searchContainer').classList.add('hidden');
            document.getElementById('coursesGrid').classList.add('hidden');
            document.getElementById('emptyState').classList.add('hidden');
            document.getElementById('institutionalSection').classList.add('hidden');
            
            // Mostra a sessão do Iframe
            container.classList.remove('hidden');
            container.classList.add('flex');
            
            // Rola a página suavemente para o topo do Iframe
            window.scrollTo({ top: container.offsetTop - 50, behavior: 'smooth' });
        }

function closeIframe() {
            const iframe = document.getElementById('specialIframe');
            const container = document.getElementById('iframeContainer');
            
            // Limpa o Iframe para parar reproduções/carregamentos pesados em 2º plano
            iframe.src = ""; 
            
            // Esconde o contêiner do Iframe
            container.classList.add('hidden');
            container.classList.remove('flex');
            
            // Exibe a barra de busca e bloco institucional novamente
            document.getElementById('searchContainer').classList.remove('hidden');
            document.getElementById('institutionalSection').classList.remove('hidden');
            
            // Roda o filtro para que a grade de cursos apareça corretamente
            filterData();
        }

window.addEventListener('DOMContentLoaded', fetchCourses);

</script>
</body>
</html>

Pesquisar este blog

UNICIVE - Centro Universitário Cidade Verde | Graduação, Pós e Segunda Licenciatura EAD

Unicive Graduação e Pós EAD