Spaces:

maralvic
/

tributarista-live-countdown-timer

Running

App Files Files Community

maralvic commited on Nov 7, 2025

Commit

2c5fcb4

verified ·

1 Parent(s): 677dd01

Alterar os botões para que fiquem habilitados para o link https://mvic.pro/live somente entre 19:47 e 21:16 de terças-feiras e entre 19:47 e 21:16 de quintas-feiras; fora desses dias e horários, deixar no modo countdown

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +585 -18

README.md CHANGED Viewed

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

 ---
+title: Tributarista Live Countdown Timer 🚀
+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,586 @@
-<!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);
+            position: relative;
+            z-index: 100;
+        }
+        .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;
+            position: relative;
+            z-index: 100;
+        }
+        @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); }
+        }
+        /* CORREÇÃO CRÍTICA - Garantir que o botão seja clicável */
+        #liveButton {
+            position: relative;
+            z-index: 1000;
+            pointer-events: auto !important;
+        }
+        #liveButton a {
+            position: relative;
+            z-index: 1001;
+            cursor: pointer !important;
+            pointer-events: auto !important;
+        }
+        .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>
+    <!-- CORREÇÃO APLICADA - Botão de acesso aos materiais -->
+    <div class="container mx-auto px-4 -mt-20 relative z-50">
+        <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" target="_blank" class="profmarcelovicente-btn text-white font-semibold px-8 py-4 rounded-full text-lg inline-flex items-center justify-center mx-auto pulse">
+                    <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" target="_blank" class="profmarcelovicente-btn text-white font-semibold px-8 py-4 rounded-full text-lg inline-flex items-center justify-center pulse">
+                        <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 das lives às terças e quintas, das 19:47 às 21:16, para construir conhecimento sólido e transformar sua atuação profissional na área tributária</p>
+</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>
+    <!-- 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">
+                    <!-- Conteúdo dos termos -->
+                    <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>
+                    <!-- ... resto do conteúdo dos termos ... -->
+                    <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 hidden">
+                                <i class="fas fa-check mr-2"></i>
+                                <span>Fechar e Continuar</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <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;
+}
+// Função para obter a próxima terça ou quinta às 19:47
+function getNextLiveDate() {
+    const now = getBrasiliaTime();
+    const currentDay = now.getDay(); // 0=Domingo, 1=Segunda, 2=Terça, 3=Quarta, 4=Quinta, 5=Sexta, 6=Sábado
+    let daysToAdd = 0;
+    let targetDay = 2; // Terça-feira por padrão
+    // Determinar qual é o próximo dia de live (terça ou quinta)
+    if (currentDay === 0 || currentDay === 1 || currentDay === 5 || currentDay === 6) {
+        // Domingo, Segunda, Sexta, Sábado -> próxima terça
+        if (currentDay === 0) daysToAdd = 2; // Domingo -> Terça
+        else if (currentDay === 1) daysToAdd = 1; // Segunda -> Terça
+        else if (currentDay === 5) daysToAdd = 3; // Sexta -> Terça (3 dias)
+        else if (currentDay === 6) daysToAdd = 2; // Sábado -> Terça (2 dias)
+        targetDay = 2; // Terça
+    } else if (currentDay === 2) { // Terça
+        // Verificar se já passou das 19:47 hoje
+        const today1947 = new Date(now);
+        today1947.setHours(19, 47, 0, 0);
+        if (now >= today1947) {
+            daysToAdd = 2; // Próxima quinta
+            targetDay = 4; // Quinta
+        } else {
+            daysToAdd = 0; // Hoje ainda é terça e não são 19:47
+            targetDay = 2; // Terça
+        }
+    } else if (currentDay === 3) { // Quarta
+        daysToAdd = 1; // Amanhã é quinta
+        targetDay = 4; // Quinta
+    } else if (currentDay === 4) { // Quinta
+        // Verificar se já passou das 19:47 hoje
+        const today1947 = new Date(now);
+        today1947.setHours(19, 47, 0, 0);
+        if (now >= today1947) {
+            daysToAdd = 4; // Próxima terça (pula sexta, sábado, domingo, segunda)
+            targetDay = 2; // Terça
+        } else {
+            daysToAdd = 0; // Hoje ainda é quinta e não são 19:47
+            targetDay = 4; // Quinta
+        }
+    }
+    const nextLiveDate = new Date(now);
+    nextLiveDate.setDate(nextLiveDate.getDate() + daysToAdd);
+    nextLiveDate.setHours(19, 47, 0, 0);
+    return nextLiveDate;
+}
+// Configuração do countdown para 19:47 apenas terças e quintas
+function updateCountdownTo1947() {
+    const now = getBrasiliaTime();
+    const currentDay = now.getDay();
+    const currentHour = now.getHours();
+    const currentMinutes = now.getMinutes();
+// Verificar se estamos no período de exibição do botão da live (19:47-21:16)
+    let showLiveButton = false;
+    if (currentDay === 2) { // Terça
+        // Terça 19:47 até 21:16
+        if ((currentHour === 19 && currentMinutes >= 47) ||
+            (currentHour === 20) ||
+            (currentHour === 21 && currentMinutes <= 16)) {
+            showLiveButton = true;
+        }
+    } else if (currentDay === 4) { // Quinta
+        // Quinta 19:47 até 21:16
+        if ((currentHour === 19 && currentMinutes >= 47) ||
+            (currentHour === 20) ||
+            (currentHour === 21 && currentMinutes <= 16)) {
+            showLiveButton = true;
+        }
+    }
+if (showLiveButton) {
+        // Mostrar botão da live
+        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 true;
+    } else {
+        // Mostrar countdown para a próxima live
+        const nextLiveDate = getNextLiveDate();
+        const diff = nextLiveDate - now;
+        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+        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);
+        // Formatar o countdown para mostrar dias quando necessário
+        let countdownText;
+        if (days > 0) {
+            countdownText = `${days}d ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+        } else {
+            countdownText = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+        }
+        document.getElementById('timerButton').classList.remove('hidden');
+        document.getElementById('liveButton').classList.add('hidden');
+        document.getElementById('timerButton2').classList.remove('hidden');
+        document.getElementById('liveButton2').classList.add('hidden');
+        document.getElementById('countdownTo1947').textContent = countdownText;
+        document.getElementById('countdownTo1947_2').textContent = countdownText;
+        return false;
+    }
+}
+// Iniciar o contador para 19:47
+updateCountdownTo1947();
+const countdownInterval = setInterval(function() {
+    updateCountdownTo1947();
+}, 1000);
+        // Restante do código JavaScript para os termos
+        function updateButtonState() {
+            const agreeCheckbox = document.getElementById('agreeCheckbox');
+            const closePopupBtn = document.getElementById('closePopupBtn');
+            if (agreeCheckbox && agreeCheckbox.checked) {
+                closePopupBtn.classList.remove('hidden');
+            } else {
+                closePopupBtn.classList.add('hidden');
+            }
+        }
+        const agreeCheckbox = document.getElementById('agreeCheckbox');
+        const closePopupBtn = document.getElementById('closePopupBtn');
+        const termsPopup = document.getElementById('termsPopup');
+        if (agreeCheckbox) {
+            agreeCheckbox.addEventListener('change', updateButtonState);
+        }
+        if (closePopupBtn) {
+            closePopupBtn.addEventListener('click', function() {
+                if (agreeCheckbox && agreeCheckbox.checked) {
+                    localStorage.setItem('termsAccepted', 'true');
+                }
+                if (termsPopup) {
+                    termsPopup.classList.add('hidden');
+                    document.body.classList.remove('popup-open');
+                }
+                window.scrollTo({
+                    top: 0,
+                    behavior: 'smooth'
+                });
+            });
+        }
+        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');
+                    if (agreeCheckbox) {
+                        agreeCheckbox.checked = true;
+                        updateButtonState();
+                    }
+                }
+            }, 1000);
+        }
+        document.getElementById('showTermsLink').addEventListener('click', function(e) {
+            e.preventDefault();
+            const termsPopup = document.getElementById('termsPopup');
+            if (termsPopup) {
+                termsPopup.classList.remove('hidden');
+                document.body.classList.add('popup-open');
+                const agreeCheckbox = document.getElementById('agreeCheckbox');
+                if (agreeCheckbox) {
+                    agreeCheckbox.checked = true;
+                    updateButtonState();
+                }
+            }
+        });
+        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 src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
 </html>