Spaces:

maralvic
/

tributarista-live-countdown

Running

App Files Files Community

maralvic commited on Nov 4, 2025

Commit

e407f11

verified ·

1 Parent(s): 1621400

Corrigir para que o botão "Acessar Live Agora" seja habilitado para poder ser clicado, da mesma maneira que ocorre com o botão "Bora decolar" assim que o timer atingir o horário final.

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +541 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Tributarista Live Countdown
-emoji: 👀
-colorFrom: yellow
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Tributarista Live Countdown 🚀
+colorFrom: red
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,541 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Live com o Prof. Marcelo Vicente | Tributarista</title>
+    <!-- Favicon -->
+    <link rel="icon" href="/img/favicon/favicon_01.png" type="image/x-icon">
+    <link rel="shortcut icon" href="/img/favicon/favicon_01.png" type="image/x-icon">
+    <link rel="apple-touch-icon" href="/img/favicon/favicon_01.png">
+    <!-- Para melhor compatibilidade com diferentes dispositivos -->
+    <link rel="icon" type="image/png" href="/img/favicon/favicon_01.png">
+    <meta name="theme-color" content="#000000">
+    <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">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Poppins', sans-serif;
+            scroll-behavior: smooth;
+            overflow-x: hidden;
+        }
+        html {
+            scroll-behavior: smooth;
+        }
+        .profmarcelovicente-bg {
+            background: linear-gradient(135deg, #5466DD 0%, #3a4fc7 100%);
+        }
+        .profmarcelovicente-btn {
+            background: linear-gradient(135deg, #00CC88 0%, #00AA6E 100%);
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(0, 204, 136, 0.3);
+        }
+        .profmarcelovicente-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 25px rgba(0, 204, 136, 0.4);
+        }
+        .card-hover {
+            transition: all 0.3s ease;
+        }
+        .card-hover:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(0, 204, 136, 0.7); }
+            70% { box-shadow: 0 0 0 15px rgba(0, 204, 136, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(0, 204, 136, 0); }
+        }
+        .modalidade-card {
+            border-left: 4px solid #5466DD;
+        }
+        .profile-container {
+            display: flex;
+            align-items: center;
+            gap: 30px;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        .profile-circle {
+            width: 180px;
+            height: 180px;
+            border-radius: 50%;
+            overflow: hidden;
+            border: 5px solid white;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+            background: #5466DD;
+            flex-shrink: 0;
+        }
+        .profile-circle img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center top;
+        }
+        .step-number {
+            width: 40px;
+            height: 40px;
+            background: #5466DD;
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            margin-right: 15px;
+            flex-shrink: 0;
+        }
+        .check-icon {
+            color: #00AA6E;
+            margin-right: 10px;
+        }
+        /* Estilos para o card com fade */
+        .fade-card {
+            position: relative;
+            overflow: hidden;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .fade-text {
+            position: relative;
+            overflow: hidden;
+            height: 120px;
+        }
+        .fade-text::after {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 100px;
+            background: linear-gradient(transparent, #f0f8ff 90%);
+        }
+        .card-content {
+            display: none;
+        }
+        .card-indicator {
+            text-align: center;
+            margin-top: 10px;
+            color: #5466DD;
+            font-weight: 500;
+        }
+        .card-indicator i {
+            margin-right: 5px;
+            animation: bounce 2s infinite;
+        }
+        @keyframes bounce {
+            0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
+            40% {transform: translateY(-10px);}
+            60% {transform: translateY(-5px);}
+        }
+        .form-pointer {
+            position: absolute;
+            right: 20px;
+            top: -25px;
+            color: #5466DD;
+            font-size: 24px;
+            animation: pointDown 2s infinite;
+            transform-origin: top right;
+        }
+        @keyframes pointDown {
+            0%, 20%, 50%, 80%, 100% {transform: rotate(45deg) translate(0, 0);}
+            40% {transform: rotate(45deg) translate(5px, 5px);}
+        }
+        @media (max-width: 768px) {
+            .profile-container {
+                flex-direction: column;
+                text-align: center;
+            }
+            .profile-circle {
+                width: 150px;
+                height: 150px;
+            }
+            .form-pointer {
+                right: 10px;
+                top: -20px;
+                font-size: 20px;
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <!-- Header -->
+    <header class="profmarcelovicente-bg text-white shadow-lg sticky top-0 z-50 w-full">
+        <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
+            <div class="text-2xl font-bold"><a href="https://marcelovicente.prof" class="text-white hover:text-white/90 transition">@profmarcelovicente</a></div>
+            <div class="flex space-x-6">
+                <a href="https://instagram.com/profmarcelovicente" target="_blank" class="text-white hover:text-white/80 transition text-xl">
+                    <i class="fab fa-instagram"></i>
+                </a>
+                <a href="https://youtube.com/@profmarcelovicente" target="_blank" class="text-white hover:text-white/80 transition text-xl">
+                    <i class="fab fa-youtube"></i>
+                </a>
+                <div class="hidden md:flex space-x-6">
+                    <a href="https://facebook.com/profmarcelovicente" target="_blank" class="text-white hover:text-white/80 transition text-xl">
+                        <i class="fab fa-facebook"></i>
+                    </a>
+                    <a href="https://www.linkedin.com/company/profmarcelovicente" target="_blank" class="text-white hover:text-white/80 transition text-xl">
+                        <i class="fab fa-linkedin"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </header>
+<!-- Hero Section Modificada -->
+    <section class="relative overflow-hidden">
+        <div class="absolute inset-0 bg-black/40 z-10"></div>
+        <div class="absolute inset-0 bg-gradient-to-r from-blue-900/80 to-purple-900/80 z-10"></div>
+        <img src="https://marcelovicente.prof/img/image_03.jpg" alt="Prof. Marcelo Vicente" class="w-full h-full object-cover absolute">
+        <div class="container mx-auto px-4 py-24 relative z-50">
+            <div class="max-w-3xl mx-auto text-center">
+                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4 leading-tight">Live com o Prof. Marcelo Vicente</h1>
+                <p class="text-xl md:text-2xl text-white/90 mb-6 text-center">Sempre as terças e quintas, às 19:47 pelo Instagram, YouTube ou Zoom / Google Meets só para quem estiver no grupo!</p>
+            </div>
+        </div>
+    </section>
+    <!-- Botão de acesso aos materiais -->
+    <div class="container mx-auto px-4 -mt-20 relative z-30">
+        <div class="max-w-3xl mx-auto text-center">
+            <div id="timerButton" class="profmarcelovicente-btn text-white font-semibold px-8 py-4 rounded-full text-lg inline-flex items-center justify-center mx-auto">
+                <span>O acesso será liberado em </span>
+                <span id="countdownTo1947" class="ml-2 text-2xl font-bold"></span>
+            </div>
+            <div id="liveButton" class="hidden">
+                <a href="https://mvic.pro/live" class="profmarcelovicente-btn text-white font-semibold px-8 py-4 rounded-full text-lg inline-flex items-center justify-center mx-auto">
+                    <i class="fas fa-video mr-2"></i>
+                    <span>Acessar Live Agora</span>
+                </a>
+            </div>
+        </div>
+    </div>
+<!-- Main Content -->
+    <section class="container mx-auto px-4 py-12 max-w-6xl">
+        <!-- Video Section -->
+        <div id="form-section" class="bg-white rounded-xl shadow-lg p-8 card-hover mb-8 relative">
+<div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden" style="width: 50%; margin: 0 auto;">
+                <video class="w-full h-full object-cover" autoplay loop muted playsinline>
+<source src="https://marcelovicente.prof/live1947/acesso/videos/aovivo.mp4" type="video/mp4">
+Your browser does not support the video tag.
+                </video>
+            </div>
+    <!-- Espaçamento de uma linha após o video -->
+    <div class="h-6"></div>
+<div class="text-center">
+    <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Sua participação é essencial <i class="fas fa-hand-paper ml-2"></i></h2>
+    <p style="font-weight:normal" class="text-xl text-gray-600 mb-4">Assista à Live até o final, porque depois eu vou te enviar o pdf completo com o resumo e os principais insights do que foi conversado!</p>
+    <p class="text-xl text-gray-600 mb-8">Vamos juntos decolar com as Transações Tributárias!</p>
+</div>
+<div class="text-center">
+                    <div id="timerButton2" class="profmarcelovicente-btn text-white font-semibold px-8 py-4 rounded-full text-lg inline-flex items-center justify-center">
+                        <span>O acesso será liberado em </span>
+                        <span id="countdownTo1947_2" class="ml-2 text-2xl font-bold"></span>
+                    </div>
+                    <div id="liveButton2" class="hidden">
+                        <a href="https://mvic.pro/live" class="profmarcelovicente-btn text-white font-semibold px-8 py-4 rounded-full text-lg inline-flex items-center justify-center">
+                            <i class="fas fa-video mr-2"></i>
+                            <span>Bora decolar!</span>
+                        </a>
+                    </div>
+                    <p class="text-center text-gray-600 mt-4 text-xl"><br><strong>Aproveite ao máximo esta jornada!</strong><br>Participe de todas as lives para construir conhecimento sólido e transformar sua atuação profissional na área tributária</p>
+</div>
+            </div>
+        </div>
+    </section>
+    <!-- Observação -->
+    <div class="container mx-auto px-4 pt-2 pb-6 max-w-6xl text-center text-sm text-gray-500">
+Obs.: Os temas, o conteúdo das Lives, as plataformas de transmissão e as datas e horários poderão ser alterados sem prévio aviso. Caso haja alguma alteração, serão encaminhadas mensagens via e-mail e/ou WhatsApp informando com antecedência, na medida do possível.<br>
+<a href="#" id="showTermsLink" class="text-gray-500 underline hover:no-underline">Termos legais de participação nas Lives</a>
+</div>
+    <!-- Footer -->
+<footer class="profmarcelovicente-bg text-white py-12 w-full">
+        <div class="max-w-7xl mx-auto px-4">
+<div class="flex flex-col md:flex-row justify-between items-center mb-8">
+                <div class="mb-6 md:mb-0">
+                    <h3 class="text-2xl font-bold mb-2"><a href="https://marcelovicente.prof">@profmarcelovicente</a></h3>
+                    <p class="text-white/80">Prof. Marcelo Vicente | Tributarista</p>
+                </div>
+                <div class="flex space-x-6">
+                    <a href="https://instagram.com/profmarcelovicente" target="_blank" class="text-white hover:text-white/80 transition text-xl">
+                        <i class="fab fa-instagram"></i>
+                    </a>
+                    <a href="https://facebook.com/profmarcelovicente" target="_blank" class="text-white hover:text-white/80 transition text-xl">
+                        <i class="fab fa-facebook"></i>
+                    </a>
+                    <a href="https://youtube.com/@profmarcelovicente" target="_blank" class="text-white hover:text-white/80 transition text-xl">
+                        <i class="fab fa-youtube"></i>
+                    </a>
+                    <a href="https://www.linkedin.com/company/profmarcelovicente" target="_blank" class="text-white hover:text-white/80 transition text-xl">
+                        <i class="fab fa-linkedin"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="border-t border-white/20 pt-8 text-center">
+                <p class="text-white/70">© 2025 ECOJURiS - Educação Corporativa e Jurídica. Todos os direitos reservados.</p>
+                <p class="text-white/70 text-sm mt-2"><a href="https://www.ecojuris.online/termos" class="hover:underline">Termos Legais</a></p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Show terms popup only if not previously accepted
+        if (!localStorage.getItem('termsAccepted')) {
+            setTimeout(() => {
+                const popup = document.getElementById('termsPopup');
+                const agreeCheckbox = document.getElementById('agreeCheckbox');
+                if (popup) {
+                    popup.classList.remove('hidden');
+                    document.body.classList.add('popup-open');
+                    // Marcar o checkbox automaticamente e habilitar botão
+                    if (agreeCheckbox) {
+                        agreeCheckbox.checked = true;
+                        updateButtonState();
+                    }
+                }
+            }, 1000);
+        }
+// Configure terms link
+        const termsLink = document.getElementById('termsLink');
+        if (termsLink) {
+            termsLink.addEventListener('click', (e) => {
+                e.preventDefault();
+                document.getElementById('termsPopup').classList.remove('hidden');
+                document.body.classList.add('popup-open');
+                // Marcar o checkbox automaticamente
+                const agreeCheckbox = document.getElementById('agreeCheckbox');
+                if (agreeCheckbox) {
+                    agreeCheckbox.checked = true;
+                    updateButtonState();
+                }
+            });
+        }
+// Mostrar botão Fechar inicialmente
+        document.getElementById('accessLiveBtn').classList.add('hidden');
+        // Mostrar botão Fechar inicialmente
+        document.getElementById('accessLiveBtn').classList.add('hidden');
+        // Função para rolagem suave
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function(e) {
+                e.preventDefault();
+                const targetId = this.getAttribute('href');
+                if (targetId === '#') return;
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    const headerOffset = 100;
+                    const elementPosition = targetElement.getBoundingClientRect().top;
+                    const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
+                    window.scrollTo({
+                        top: offsetPosition,
+                        behavior: 'smooth'
+                    });
+                }
+            });
+        });
+    </script>
+    <script>
+        // Função para criar data no horário de Brasília (GMT-3)
+        function getBrasiliaTime() {
+            const now = new Date();
+            // Ajustar para GMT-3 (Brasília)
+            const offset = -3 * 60; // GMT-3 em minutos
+            const localTime = now.getTime();
+            const localOffset = now.getTimezoneOffset() * 60000;
+            const utc = localTime + localOffset;
+            const brasiliaTime = new Date(utc + (offset * 60000));
+            return brasiliaTime;
+        }
+        // Configuração do countdown para 19:47
+        function updateCountdownTo1947() {
+            const now = getBrasiliaTime();
+            const eventDate = new Date(now);
+            eventDate.setHours(19, 47, 0, 0); // 19:47:00
+            // Se já passou das 19:47 hoje, mostrar botão de acesso
+            if (eventDate < now) {
+                document.getElementById('timerButton').classList.add('hidden');
+                document.getElementById('liveButton').classList.remove('hidden');
+                document.getElementById('timerButton2').classList.add('hidden');
+                document.getElementById('liveButton2').classList.remove('hidden');
+                return;
+            }
+const diff = eventDate - now;
+            if (diff <= 0) {
+                document.getElementById('timerButton').classList.add('hidden');
+                document.getElementById('liveButton').classList.remove('hidden');
+                document.getElementById('timerButton2').classList.add('hidden');
+                document.getElementById('liveButton2').classList.remove('hidden');
+                return;
+            }
+const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+            const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+            const countdownText = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+            document.getElementById('countdownTo1947').textContent = countdownText;
+            document.getElementById('countdownTo1947_2').textContent = countdownText;
+        }
+        // Iniciar o contador para 19:47
+        setInterval(updateCountdownTo1947, 1000);
+        updateCountdownTo1947();
+    </script>
+    <script src="script.js"></script>
+    <!-- Terms Popup -->
+    <div id="termsPopup" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-hidden mx-4">
+            <div class="p-6 overflow-y-auto max-h-[80vh] text-xs">
+                <h2 class="text-lg font-bold mb-4 text-center">LIVES PROF. MARCELO VICENTE - TERMOS DE PARTICIPAÇÃO</h2>
+                <div class="border-b mb-4"></div>
+                <div class="space-y-4">
+                    <p>Ao prosseguir e participar desta live, reunião ou evento online ("Evento") - gratuito e independente do pagamento de qualquer taxa, assunção de encargo ou de qualquer contrapartida por parte do usuário -, você declara, de forma livre e esclarecida, que leu, compreendeu e concorda integralmente com os termos e condições abaixo:</p>
+                    <h3 class="font-bold">1. ACEITAÇÃO E OBJETO</h3>
+                    <p>Este é um termo de adesão. O seu acesso e a sua permanência neste Evento, realizado pelo Prof. Marcelo Vicente e pela ECOJURIS - Educação Corporativa e Jurídica (CNPJ: 23.076.051/0001-00), constituem sua aceitação irrevogável e inequívoca a todas as disposições aqui contidas.</p>
+                    <h3 class="font-bold">2. NATUREZA DO CONTEÚDO - CARÁTER ESTRITAMENTE EDUCACIONAL</h3>
+                    <p>O conteúdo apresentado no Evento possui FINS EXCLUSIVAMENTE EDUCACIONAIS E INFORMATIVOS. Ele NÃO CONSTITUI E NÃO SUBSTITUI:</p>
+                    <ul class="list-disc pl-5 space-y-2">
+                        <li>Consultoria jurídica, tributária ou de qualquer outra natureza;</li>
+                        <li>Orientação legal individualizada ou advocacia;</li>
+                        <li>Garantia ou promessa de resultados específicos.</li>
+                    </ul>
+                    <p>O participante assume toda a responsabilidade por quaisquer decisões tomadas com base nas informações aqui apresentadas.</p>
+                    <h3 class="font-bold">3. PROIBIÇÃO DE USO INDEVIDO DO CONTEÚDO</h3>
+                    <p>O participante fica expressamente PROIBIDO de utilizar, reproduzir, distribuir ou explorar economicamente o conteúdo (incluindo, mas não se limitando, a métodos, planilhas, estruturas e estratégias) apresentado no Evento para quaisquer fins que não sejam de uso educacional e pessoal, sem a AUTORIZAÇÃO PRÉVIA, EXPRESSA E POR ESCRITO do Prof. Marcelo Vicente e da ECOJURIS.</p>
+                    <p>O descumprimento desta cláusula sujeitará o infrator às sanções civis e penais cabíveis, incluindo as previstas na Lei de Direitos Autorais (Lei nº 9.610/98), na Lei de Software (Lei nº 9.609/98), e nos arts. 184 e 186 do Código Penal Brasileiro, sem prejuízo de ações por perdas e danos.</p>
+                    <h3 class="font-bold">4. ESCOPO DA AUTORIZAÇÃO DO PARTICIPANTE</h3>
+                    <p>Você autoriza, de forma GRATUITA, DEFINITIVA E IRREVOGÁVEL, a utilização integral de sua:</p>
+                    <ul class="list-disc pl-5 space-y-2">
+                        <li>Imagem (estática ou em movimento);</li>
+                        <li>Voz;</li>
+                        <li>Nome; e</li>
+                        <li>Quaisquer comentários, perguntas ou contribuições por você realizadas durante o Evento.</li>
+                    </ul>
+                    <h3 class="font-bold">5. FINALIDADES E FORMAS DE USO</h3>
+                    <p>A autorização concedida inclui, mas não se limita a:</p>
+                    <ul class="list-disc pl-5 space-y-2">
+                        <li>Gravação, reprodução, transmissão e divulgação do Evento na íntegra ou em partes (clipes, trechos, highlights);</li>
+                        <li>Uso para fins de marketing, publicidade e divulgação comercial do Prof. Marcelo Vicente e da ECOJURIS;</li>
+                        <li>Veiculação em quaisquer plataformas e mídias, incluindo, mas não se limitando a: YouTube, Instagram, LinkedIn, Facebook, sites, aplicativos e materiais impressos;</li>
+                        <li>Utilização do conteúdo por ferramentas próprias e de terceiros parceiros;</li>
+                        <li>Criação de transcrições, materiais derivados e obras futuras.</li>
+                    </ul>
+                    <h3 class="font-bold">6. CARÁTER GRATUITO E CESSÃO DE DIREITOS</h3>
+                    <p>Você declara estar ciente de que esta autorização NÃO É ONEROSA. Fica acordado que NÃO HÁ DIREITO A QUALQUER TIPO DE REMUNERAÇÃO, ROYALTIES OU RETORNO FINANCEIRO pelo uso de sua imagem, voz, nome ou qualquer outro direito de personalidade, que ficam desde já cedidos em caráter definitivo ao Prof. Marcelo Vicente e à ECOJURIS.</p>
+                    <h3 class="font-bold">7. CONSENTIMENTO ESPECÍFICO</h3>
+                    <p>Você reconhece que sua participação voluntária no Evento, que é transmitido ao vivo e gravado, configura consentimento expresso para a captação e uso de seus dados pessoais (imagem e voz), nos termos da LGPD (Lei nº 13.709/18), para as finalidades aqui descritas.</p>
+                    <p>Para consultar os Termos e Condições Gerais completos e a Política de Privacidade, acesse: ecojuris.online/termos</p>
+                    <p>Ao clicar em "Aceito e Concordo" ou ao permanecer conectado ao Evento, você manifesta sua total e irrevogável concordância com este Termo.</p>
+                    <div class="mt-6 p-4 bg-gray-50 rounded-lg">
+                        <div class="flex items-start">
+                            <input type="checkbox" id="agreeCheckbox" class="mt-1 mr-2">
+                            <label for="agreeCheckbox" class="text-xs">
+                                <strong class="text-xs">Estou ciente e concordo que: (1) O conteúdo é educacional, não é consultoria e não garante resultados; (2) Minha imagem, voz e participação serão gravadas e utilizadas gratuitamente para divulgação pelo Prof. Marcelo Vicente e pela ECOJURIS; (3) O uso do conteúdo para fins não educacionais sem autorização é proibido por lei. Li e aceito o Termo Completo.</strong>
+                            </label>
+                        </div>
+                        <p class="text-xs mt-2 text-gray-600">Para prosseguir para a live, você deve marcar a caixa de seleção acima.</p>
+                            <div class="text-center mt-4">
+                                <button id="closePopupBtn" class="profmarcelovicente-btn text-white font-semibold px-6 py-2 rounded-full text-sm">
+                                    <i class="fas fa-check mr-2"></i>
+                                    <span>Fechar e Continuar</span>
+                                </button>
+                            </div>
+</div>
+                </div>
+            </div>
+        </div>
+    </div>
+<script>
+        // Observar quando o checkbox é marcado
+        const agreeCheckbox = document.getElementById('agreeCheckbox');
+        const closePopupBtn = document.getElementById('closePopupBtn');
+        const termsPopup = document.getElementById('termsPopup');
+        agreeCheckbox.addEventListener('change', function() {
+            if(this.checked) {
+                closePopupBtn.classList.remove('hidden');
+            } else {
+                closePopupBtn.classList.add('hidden');
+            }
+        });
+        // Fechar popup quando o botão for clicado
+        closePopupBtn.addEventListener('click', function() {
+            if (agreeCheckbox.checked) {
+                localStorage.setItem('termsAccepted', 'true');
+            }
+            termsPopup.classList.add('hidden');
+            document.body.classList.remove('popup-open');
+            // Rolar suavemente para o topo após fechar
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        });
+</script>
+    <script>
+        // Adiciona evento para mostrar termos quando link for clicado
+        document.getElementById('showTermsLink').addEventListener('click', function(e) {
+            e.preventDefault();
+            document.getElementById('termsPopup').classList.remove('hidden');
+            document.body.classList.add('popup-open');
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>