Spaces:

maralvic
/

tributarista-live-countdown-countdown

Running

App Files Files Community

tributarista-live-countdown-countdown / index.html

maralvic

Manual changes saved

0097301 verified 5 months ago

raw

history blame contribute delete

27.5 kB




	<!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">Assista à Live até o final e receba o pdf completo com o resumo e os principais insights do que foi conversado!</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 relative" 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>
	<a href="https://mvic.pro/last1947" target="_blank" class="absolute inset-0 flex items-center justify-center group">
	<div class="w-16 h-16 md:w-20 md:h-20 bg-red-600 rounded-full flex items-center justify-center transform transition-transform group-hover:scale-110">
	<i class="fab fa-youtube text-white text-2xl md:text-3xl"></i>
	</div>
	</a>
	</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">
	Perdeu a última Live?<br />Assista agora antes que saia do ar! <i class="fas fa-video ml-2"></i></h2>
	<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"> <a href="https://mvic.pro/last1947" 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>O vídeo sairá do ar em </span>
	<span id="countdownTo1947_2" class="ml-2 text-2xl font-bold"></span><span> !</span></a>
	</div>
	<div id="liveButton2" class="hidden">
	<a href="https://mvic.pro/1947" 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!<br /></strong><br>Participe das lives terças e quintas às 19:47 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. 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 21:16 hoje (fim da live)
	const today2116 = new Date(now);
	today2116.setHours(21, 16, 0, 0);
	if (now > today2116) {
	daysToAdd = 2; // Próxima quinta
	targetDay = 4; // Quinta
	} else {
	// Verificar se estamos antes das 19:47
	const today1947 = new Date(now);
	today1947.setHours(19, 47, 0, 0);
	if (now < today1947) {
	daysToAdd = 0; // Hoje ainda é terça e não são 19:47
	targetDay = 2; // Terça
	} else {
	// Estamos no horário da live (19:47-21:16)
	daysToAdd = 0;
	targetDay = 2; // Terça
	}
	}
	} else if (currentDay === 3) { // Quarta
	daysToAdd = 1; // Amanhã é quinta
	targetDay = 4; // Quinta
	}
	else if (currentDay === 1) { // Segunda
	daysToAdd = 1; // Amanhã é terça
	targetDay = 2; // Terça
	} else if (currentDay === 5) { // Sexta
	daysToAdd = 4; // Sexta -> Terça (4 dias)
	targetDay = 2; // Terça
	} else if (currentDay === 6) { // Sábado
	daysToAdd = 3; // Sábado -> Terça (3 dias)
	targetDay = 2; // Terça
	} else if (currentDay === 0) { // Domingo
	daysToAdd = 2; // Domingo -> Terça (2 dias)
	targetDay = 2; // Terça
	}
	else if (currentDay === 4) { // Quinta
	// Verificar se já passou das 21:16 hoje (fim da live)
	const today2116 = new Date(now);
	today2116.setHours(21, 16, 0, 0);
	if (now > today2116) {
	// Após 21:16 de quinta, próxima live será na terça (5 dias depois)
	daysToAdd = 5;
	targetDay = 2; // Próxima terça
	} else {
	// Verificar se estamos antes das 19:47
	const today1947 = new Date(now);
	today1947.setHours(19, 47, 0, 0);
	if (now < today1947) {
	daysToAdd = 0; // Hoje ainda é quinta e não são 19:47
	targetDay = 4; // Quinta
	} else {
	// Estamos no horário da live (19:47-21:16)
	daysToAdd = 0;
	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;
	}
	} else if (currentDay === 3) { // Quarta
	// Quarta - sempre mostrar countdown para quinta-feira
	showLiveButton = false;
	} else if (currentDay === 5 \|\| currentDay === 6 \|\| currentDay === 0) {
	// Sexta, Sábado, Domingo - sempre mostrar countdown para terça-feira
	showLiveButton = false;
	}
	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>
	<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
	</body>
	</html>