Hugging Face's logo

Spaces:
maralvic
/
tributarista-live-countdown-timer
Running

App Files Community
tributarista-live-countdown-timer / index.html
maralvic's picture
maralvic
Preparar o mesmo efeito que é feito no site do Enzo em https://www.en-zo.dev/ (efeito de água quando quando passa o cursor) sobre o vídeo que se encontra no meio da tela. Alternar o vídeo com a imagem disponível em https://marcelovicente.prof/img/capa_01.png
3c1a84d verified
raw
history blame contribute delete
27.4 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">
<script src="script.js"></script>
<!-- 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="video-container ripple-effect" 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>
<img src="https://marcelovicente.prof/img/capa_01.png" alt="Prof. Marcelo Vicente" class="video-overlay">
<canvas class="ripple-canvas absolute inset-0 w-full h-full pointer-events-none"></canvas>
</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 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>
</body>
</html>