Hugging Face's logo

Spaces:
thigas88
/
vaquinha
Running

App Files Community
vaquinha / index.html
thigas88's picture
thigas88
Corrija o erro que faz com que o conteúdo não carregue - Follow Up Deployment
a21e052 verified
raw
history blame contribute delete
42.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>Crianças de Cristo - Conteúdo Infantil Cristão</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Custom CSS for video player */
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* Hide YouTube controls and branding */
.video-container iframe {
pointer-events: none;
}
/* Custom scrollbar for carousels */
.carousel-container {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
}
.carousel-container::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
/* Modal transition */
.modal {
transition: opacity 0.3s ease;
}
/* Auth form animation */
.auth-form {
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Loading spinner */
.spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body class="bg-gray-900 text-white">
<!-- Auth Modal -->
<div id="authModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center p-4 modal hidden">
<div class="bg-gray-800 rounded-lg p-8 max-w-md w-full auth-form">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold">Entrar</h2>
<button id="closeAuthModal" class="text-gray-400 hover:text-white">
<i class="fas fa-times"></i>
</button>
</div>
<form id="loginForm" class="space-y-4">
<div>
<label for="email" class="block text-sm font-medium mb-1">Email</label>
<input type="email" id="email" class="w-full bg-gray-700 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
</div>
<div>
<label for="password" class="block text-sm font-medium mb-1">Senha</label>
<input type="password" id="password" class="w-full bg-gray-700 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
</div>
<button type="submit" class="w-full bg-red-600 hover:bg-red-700 py-2 rounded font-medium transition duration-200">
Entrar
</button>
<div class="text-center text-sm text-gray-400">
Não tem uma conta? <button type="button" id="switchToRegister" class="text-blue-400 hover:underline">Cadastre-se</button>
</div>
</form>
<form id="registerForm" class="space-y-4 hidden">
<div>
<label for="regName" class="block text-sm font-medium mb-1">Nome</label>
<input type="text" id="regName" class="w-full bg-gray-700 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
</div>
<div>
<label for="regEmail" class="block text-sm font-medium mb-1">Email</label>
<input type="email" id="regEmail" class="w-full bg-gray-700 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
</div>
<div>
<label for="regPassword" class="block text-sm font-medium mb-1">Senha</label>
<input type="password" id="regPassword" class="w-full bg-gray-700 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
</div>
<div>
<label for="regConfirmPassword" class="block text-sm font-medium mb-1">Confirmar Senha</label>
<input type="password" id="regConfirmPassword" class="w-full bg-gray-700 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
</div>
<button type="submit" class="w-full bg-red-600 hover:bg-red-700 py-2 rounded font-medium transition duration-200">
Cadastrar
</button>
<div class="text-center text-sm text-gray-400">
Já tem uma conta? <button type="button" id="switchToLogin" class="text-blue-400 hover:underline">Faça login</button>
</div>
</form>
</div>
</div>
<!-- Video Player Modal -->
<div id="videoModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center p-4 modal hidden">
<div class="w-full max-w-4xl">
<div class="flex justify-between items-center mb-4">
<h2 id="videoModalTitle" class="text-xl font-bold"></h2>
<button id="closeVideoModal" class="text-gray-400 hover:text-white text-2xl">
<i class="fas fa-times"></i>
</button>
</div>
<div class="video-container rounded-lg overflow-hidden">
<iframe id="videoPlayer" src="" frameborder="0" allowfullscreen></iframe>
</div>
<div class="mt-4 flex justify-between items-center">
<button id="toggleFavorite" class="text-gray-300 hover:text-red-500">
<i class="far fa-heart"></i> <span class="ml-1">Favoritar</span>
</button>
<div class="text-gray-400 text-sm">
Conteúdo infantil cristão
</div>
</div>
</div>
</div>
<!-- PDF Viewer Modal -->
<div id="pdfModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center p-4 modal hidden">
<div class="w-full max-w-4xl bg-gray-800 rounded-lg overflow-hidden">
<div class="flex justify-between items-center bg-gray-900 p-4">
<h2 id="pdfModalTitle" class="text-xl font-bold"></h2>
<button id="closePdfModal" class="text-gray-400 hover:text-white text-2xl">
<i class="fas fa-times"></i>
</button>
</div>
<div class="h-96 md:h-[80vh] w-full">
<iframe id="pdfViewer" src="" frameborder="0" class="w-full h-full"></iframe>
</div>
<div class="bg-gray-900 p-4 flex justify-between items-center">
<button id="togglePdfFavorite" class="text-gray-300 hover:text-red-500">
<i class="far fa-heart"></i> <span class="ml-1">Favoritar</span>
</button>
<div class="text-gray-400 text-sm">
Conteúdo infantil cristão
</div>
</div>
</div>
</div>
<!-- Loading Screen -->
<div id="loadingScreen" class="fixed inset-0 bg-gray-900 flex items-center justify-center z-50">
<div class="text-center">
<div class="spinner inline-block w-16 h-16 border-4 border-red-600 border-t-transparent rounded-full mb-4"></div>
<h2 class="text-xl font-bold">Carregando conteúdo...</h2>
</div>
</div>
<!-- Main App (hidden until authenticated) -->
<div id="app" class="hidden">
<!-- Header -->
<header class="fixed top-0 left-0 right-0 z-40 bg-gradient-to-b from-black to-transparent p-4 transition-all duration-300">
<div class="flex justify-between items-center">
<div class="flex items-center">
<h1 class="text-red-600 font-bold text-2xl md:text-3xl">Crianças de Cristo</h1>
</div>
<div class="flex items-center space-x-4">
<button id="favoritesBtn" class="text-gray-300 hover:text-white">
<i class="fas fa-heart mr-1"></i> Favoritos
</button>
<button id="logoutBtn" class="bg-red-600 hover:bg-red-700 px-4 py-1 rounded transition duration-200">
Sair
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main class="pt-20 pb-16 px-4">
<!-- Featured Content -->
<section id="featured" class="mb-12">
<h2 class="text-xl font-bold mb-4">Destaque</h2>
<div id="featuredContent" class="relative rounded-xl overflow-hidden h-64 md:h-96 w-full bg-gray-800">
<!-- Featured content will be loaded here -->
</div>
</section>
<!-- Video Carousels -->
<section id="videoCarousels" class="space-y-10">
<!-- Recentes -->
<div>
<h2 class="text-xl font-bold mb-4">Recentes</h2>
<div id="recentCarousel" class="carousel-container flex space-x-4 overflow-x-auto pb-4">
<!-- Recent videos will be loaded here -->
</div>
</div>
<!-- Histórias Bíblicas -->
<div>
<h2 class="text-xl font-bold mb-4">Histórias Bíblicas</h2>
<div id="bibleStoriesCarousel" class="carousel-container flex space-x-4 overflow-x-auto pb-4">
<!-- Bible story videos will be loaded here -->
</div>
</div>
<!-- Milagres de Jesus -->
<div>
<h2 class="text-xl font-bold mb-4">Milagres de Jesus</h2>
<div id="miraclesCarousel" class="carousel-container flex space-x-4 overflow-x-auto pb-4">
<!-- Miracle videos will be loaded here -->
</div>
</div>
<!-- Músicas -->
<div>
<h2 class="text-xl font-bold mb-4">Músicas</h2>
<div id="songsCarousel" class="carousel-container flex space-x-4 overflow-x-auto pb-4">
<!-- Song videos will be loaded here -->
</div>
</div>
</section>
<!-- PDF Content -->
<section id="pdfContent" class="mt-16">
<h2 class="text-xl font-bold mb-4">Conteúdo para Baixar</h2>
<div id="pdfGrid" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<!-- PDF content will be loaded here -->
</div>
</section>
</main>
<!-- Footer -->
<footer class="fixed bottom-0 left-0 right-0 bg-gray-900 p-4 text-center text-gray-400 text-sm">
<p>© 2023 Crianças de Cristo - Conteúdo Infantil Cristão</p>
</footer>
</div>
<script>
// App state
const state = {
authenticated: false,
currentUser: null,
videos: [],
pdfs: [],
favorites: JSON.parse(localStorage.getItem('favorites')) || { videos: [], pdfs: [] }
};
// DOM Elements
const authModal = document.getElementById('authModal');
const loginForm = document.getElementById('loginForm');
const registerForm = document.getElementById('registerForm');
const switchToRegister = document.getElementById('switchToRegister');
const switchToLogin = document.getElementById('switchToLogin');
const closeAuthModal = document.getElementById('closeAuthModal');
const app = document.getElementById('app');
const loadingScreen = document.getElementById('loadingScreen');
const videoModal = document.getElementById('videoModal');
const videoPlayer = document.getElementById('videoPlayer');
const videoModalTitle = document.getElementById('videoModalTitle');
const closeVideoModal = document.getElementById('closeVideoModal');
const toggleFavorite = document.getElementById('toggleFavorite');
const pdfModal = document.getElementById('pdfModal');
const pdfViewer = document.getElementById('pdfViewer');
const pdfModalTitle = document.getElementById('pdfModalTitle');
const closePdfModal = document.getElementById('closePdfModal');
const togglePdfFavorite = document.getElementById('togglePdfFavorite');
const logoutBtn = document.getElementById('logoutBtn');
const favoritesBtn = document.getElementById('favoritesBtn');
// Content containers
const featuredContent = document.getElementById('featuredContent');
const recentCarousel = document.getElementById('recentCarousel');
const bibleStoriesCarousel = document.getElementById('bibleStoriesCarousel');
const miraclesCarousel = document.getElementById('miraclesCarousel');
const songsCarousel = document.getElementById('songsCarousel');
const pdfGrid = document.getElementById('pdfGrid');
// Initialize the app
function init() {
// Show loading screen initially
loadingScreen.classList.remove('hidden');
// Check if user is authenticated
const user = JSON.parse(localStorage.getItem('currentUser'));
if (user) {
state.authenticated = true;
state.currentUser = user;
app.classList.remove('hidden');
loadContent();
} else {
loadingScreen.classList.add('hidden');
authModal.classList.remove('hidden');
}
// Set up event listeners
setupEventListeners();
}
// Set up all event listeners
function setupEventListeners() {
// Auth modal
switchToRegister.addEventListener('click', () => {
loginForm.classList.add('hidden');
registerForm.classList.remove('hidden');
});
switchToLogin.addEventListener('click', () => {
registerForm.classList.add('hidden');
loginForm.classList.remove('hidden');
});
closeAuthModal.addEventListener('click', () => {
if (!state.authenticated) return;
authModal.classList.add('hidden');
});
// Login form
loginForm.addEventListener('submit', (e) => {
e.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
// Simple validation
if (email && password) {
// In a real app, you would validate with a backend
state.currentUser = { email, name: email.split('@')[0] };
state.authenticated = true;
localStorage.setItem('currentUser', JSON.stringify(state.currentUser));
authModal.classList.add('hidden');
loadContent();
app.classList.remove('hidden');
loadingScreen.classList.add('hidden');
}
});
// Register form
registerForm.addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById('regName').value;
const email = document.getElementById('regEmail').value;
const password = document.getElementById('regPassword').value;
const confirmPassword = document.getElementById('regConfirmPassword').value;
// Simple validation
if (name && email && password && password === confirmPassword) {
// In a real app, you would register with a backend
state.currentUser = { email, name };
state.authenticated = true;
localStorage.setItem('currentUser', JSON.stringify(state.currentUser));
authModal.classList.add('hidden');
loadContent();
app.classList.remove('hidden');
loadingScreen.classList.add('hidden');
// Switch back to login form for next time
registerForm.classList.add('hidden');
loginForm.classList.remove('hidden');
}
});
// Video modal
closeVideoModal.addEventListener('click', () => {
videoModal.classList.add('hidden');
videoPlayer.src = '';
});
// PDF modal
closePdfModal.addEventListener('click', () => {
pdfModal.classList.add('hidden');
pdfViewer.src = '';
});
// Logout
logoutBtn.addEventListener('click', () => {
state.authenticated = false;
state.currentUser = null;
localStorage.removeItem('currentUser');
app.classList.add('hidden');
authModal.classList.remove('hidden');
});
// Favorites
favoritesBtn.addEventListener('click', showFavorites);
}
// Load content from Google Sheets
async function loadContent() {
try {
// In a real app, you would fetch from your backend that accesses the Google Sheet
// For this demo, we'll use mock data
// Mock video data (in a real app, this would come from the Google Sheet)
state.videos = [
{
titulo: "A Criação do Mundo",
video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
imagem: "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg",
categoria: "Histórias Bíblicas",
destaque: true
},
{
titulo: "Noé e o Dilúvio",
video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
imagem: "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg",
categoria: "Histórias Bíblicas",
destaque: false
},
{
titulo: "Jesus Acalma a Tempestade",
video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
imagem: "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg",
categoria: "Milagres de Jesus",
destaque: true
},
{
titulo: "A Multiplicação dos Pães",
video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
imagem: "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg",
categoria: "Milagres de Jesus",
destaque: false
},
{
titulo: "Cristo Me Ama",
video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
imagem: "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg",
categoria: "Músicas",
destaque: false
},
{
titulo: "A Arca de Noé",
video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
imagem: "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg",
categoria: "Histórias Bíblicas",
destaque: false
},
{
titulo: "Jesus Cura o Cego",
video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
imagem: "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg",
categoria: "Milagres de Jesus",
destaque: false
},
{
titulo: "Deus é Tão Bom",
video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
imagem: "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg",
categoria: "Músicas",
destaque: false
}
];
// Mock PDF data
state.pdfs = [
{
titulo: "História de Noé para Colorir",
pdf: "https://example.com/sample.pdf",
imagem: "https://via.placeholder.com/300x424/333/fff?text=PDF+1",
categoria: "Histórias Bíblicas"
},
{
titulo: "Jesus e as Crianças",
pdf: "https://example.com/sample.pdf",
imagem: "https://via.placeholder.com/300x424/333/fff?text=PDF+2",
categoria: "Histórias Bíblicas"
},
{
titulo: "Atividades Bíblicas",
pdf: "https://example.com/sample.pdf",
imagem: "https://via.placeholder.com/300x424/333/fff?text=PDF+3",
categoria: "Atividades"
},
{
titulo: "Músicas Cristãs Infantis",
pdf: "https://example.com/sample.pdf",
imagem: "https://via.placeholder.com/300x424/333/fff?text=PDF+4",
categoria: "Músicas"
}
];
// Render content
renderContent();
} catch (error) {
console.error('Error loading content:', error);
loadingScreen.classList.add('hidden');
app.innerHTML = `
<div class="text-center">
<i class="fas fa-exclamation-triangle text-red-500 text-4xl mb-4"></i>
<h2 class="text-xl font-bold">Erro ao carregar conteúdo</h2>
<p class="text-gray-400 mt-2">Por favor, tente novamente mais tarde.</p>
<button id="retryBtn" class="mt-4 bg-red-600 hover:bg-red-700 px-4 py-2 rounded transition duration-200">
Tentar Novamente
</button>
</div>
`;
document.getElementById('retryBtn').addEventListener('click', loadContent);
}
}
// Render all content
function renderContent() {
renderFeaturedContent();
renderVideoCarousels();
renderPDFContent();
loadingScreen.classList.add('hidden');
app.classList.remove('hidden');
}
// Render featured content
function renderFeaturedContent() {
const featuredVideos = state.videos.filter(video => video.destaque);
if (featuredVideos.length > 0) {
const video = featuredVideos[0];
featuredContent.innerHTML = `
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent z-10 flex items-end p-6">
<div>
<h3 class="text-2xl md:text-4xl font-bold mb-2">${video.titulo}</h3>
<p class="text-gray-300 mb-4">Assista agora a esta história bíblica especial para crianças</p>
<button class="play-featured bg-red-600 hover:bg-red-700 px-6 py-2 rounded font-medium transition duration-200 flex items-center" data-video="${video.video}" data-title="${video.titulo}">
<i class="fas fa-play mr-2"></i> Assistir
</button>
</div>
</div>
<img src="${video.imagem}" alt="${video.titulo}" class="absolute inset-0 w-full h-full object-cover">
`;
// Add event listener to play button
document.querySelector('.play-featured').addEventListener('click', function() {
openVideoModal(this.dataset.video, this.dataset.title);
});
} else {
featuredContent.innerHTML = `
<div class="absolute inset-0 flex items-center justify-center">
<p class="text-gray-400">Nenhum conteúdo em destaque disponível</p>
</div>
`;
}
}
// Render video carousels
function renderVideoCarousels() {
// Recent videos (just use all videos for demo)
renderCarousel(recentCarousel, state.videos, 'Recentes');
// Bible stories
const bibleStories = state.videos.filter(video => video.categoria === 'Histórias Bíblicas');
renderCarousel(bibleStoriesCarousel, bibleStories, 'Histórias Bíblicas');
// Miracles
const miracles = state.videos.filter(video => video.categoria === 'Milagres de Jesus');
renderCarousel(miraclesCarousel, miracles, 'Milagres de Jesus');
// Songs
const songs = state.videos.filter(video => video.categoria === 'Músicas');
renderCarousel(songsCarousel, songs, 'Músicas');
}
// Render a single carousel
function renderCarousel(container, videos, category) {
container.innerHTML = '';
if (videos.length === 0) {
container.innerHTML = `
<div class="flex items-center justify-center w-full h-32 text-gray-400">
Nenhum vídeo disponível na categoria ${category}
</div>
`;
return;
}
videos.forEach(video => {
const isFavorite = state.favorites.videos.includes(video.video);
const videoCard = document.createElement('div');
videoCard.className = 'flex-none w-48 md:w-56 lg:w-64 rounded-lg overflow-hidden bg-gray-800 hover:scale-105 transition-transform duration-200';
videoCard.innerHTML = `
<div class="relative">
<img src="${video.imagem}" alt="${video.titulo}" class="w-full h-28 md:h-32 lg:h-36 object-cover">
<button class="play-btn absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity duration-200" data-video="${video.video}" data-title="${video.titulo}">
<i class="fas fa-play text-white text-3xl"></i>
</button>
<button class="favorite-btn absolute top-2 right-2 text-white bg-black bg-opacity-60 rounded-full p-2" data-video="${video.video}" data-title="${video.titulo}">
<i class="${isFavorite ? 'fas' : 'far'} fa-heart ${isFavorite ? 'text-red-500' : ''}"></i>
</button>
</div>
<div class="p-3">
<h3 class="font-medium truncate">${video.titulo}</h3>
</div>
`;
container.appendChild(videoCard);
// Add event listeners
videoCard.querySelector('.play-btn').addEventListener('click', function() {
openVideoModal(this.dataset.video, this.dataset.title);
});
videoCard.querySelector('.favorite-btn').addEventListener('click', function() {
toggleVideoFavorite(this.dataset.video, this.dataset.title);
this.querySelector('i').classList.toggle('far');
this.querySelector('i').classList.toggle('fas');
this.querySelector('i').classList.toggle('text-red-500');
});
});
}
// Render PDF content
function renderPDFContent() {
pdfGrid.innerHTML = '';
if (state.pdfs.length === 0) {
pdfGrid.innerHTML = `
<div class="col-span-full flex items-center justify-center h-32 text-gray-400">
Nenhum conteúdo PDF disponível
</div>
`;
return;
}
state.pdfs.forEach(pdf => {
const isFavorite = state.favorites.pdfs.includes(pdf.pdf);
const pdfCard = document.createElement('div');
pdfCard.className = 'bg-gray-800 rounded-lg overflow-hidden hover:scale-105 transition-transform duration-200';
pdfCard.innerHTML = `
<div class="relative">
<img src="${pdf.imagem}" alt="${pdf.titulo}" class="w-full h-40 object-cover">
<button class="view-pdf-btn absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity duration-200" data-pdf="${pdf.pdf}" data-title="${pdf.titulo}">
<i class="fas fa-eye text-white text-3xl"></i>
</button>
<button class="favorite-pdf-btn absolute top-2 right-2 text-white bg-black bg-opacity-60 rounded-full p-2" data-pdf="${pdf.pdf}" data-title="${pdf.titulo}">
<i class="${isFavorite ? 'fas' : 'far'} fa-heart ${isFavorite ? 'text-red-500' : ''}"></i>
</button>
</div>
<div class="p-3">
<h3 class="font-medium truncate">${pdf.titulo}</h3>
<p class="text-gray-400 text-sm mt-1">${pdf.categoria}</p>
</div>
`;
pdfGrid.appendChild(pdfCard);
// Add event listeners
pdfCard.querySelector('.view-pdf-btn').addEventListener('click', function() {
openPdfModal(this.dataset.pdf, this.dataset.title);
});
pdfCard.querySelector('.favorite-pdf-btn').addEventListener('click', function() {
togglePdfFavorite(this.dataset.pdf, this.dataset.title);
this.querySelector('i').classList.toggle('far');
this.querySelector('i').classList.toggle('fas');
this.querySelector('i').classList.toggle('text-red-500');
});
});
}
// Open video modal
function openVideoModal(videoUrl, title) {
// Modify YouTube URL to hide controls and branding
let embedUrl = videoUrl;
if (videoUrl.includes('youtube.com') || videoUrl.includes('youtu.be')) {
embedUrl = videoUrl.replace(/(youtube\.com\/watch\?v=|youtu\.be\/)/, 'youtube.com/embed/');
embedUrl += '?autoplay=1&controls=0&modestbranding=1&rel=0&showinfo=0';
}
videoPlayer.src = embedUrl;
videoModalTitle.textContent = title;
videoModal.classList.remove('hidden');
// Update favorite button state
const isFavorite = state.favorites.videos.includes(videoUrl);
toggleFavorite.innerHTML = `
<i class="${isFavorite ? 'fas' : 'far'} fa-heart ${isFavorite ? 'text-red-500' : ''}"></i>
<span class="ml-1">${isFavorite ? 'Remover dos' : 'Adicionar aos'} favoritos</span>
`;
// Set up favorite toggle for this video
toggleFavorite.onclick = () => {
toggleVideoFavorite(videoUrl, title);
const newIsFavorite = state.favorites.videos.includes(videoUrl);
toggleFavorite.innerHTML = `
<i class="${newIsFavorite ? 'fas' : 'far'} fa-heart ${newIsFavorite ? 'text-red-500' : ''}"></i>
<span class="ml-1">${newIsFavorite ? 'Remover dos' : 'Adicionar aos'} favoritos</span>
`;
};
}
// Open PDF modal
function openPdfModal(pdfUrl, title) {
pdfViewer.src = pdfUrl;
pdfModalTitle.textContent = title;
pdfModal.classList.remove('hidden');
// Update favorite button state
const isFavorite = state.favorites.pdfs.includes(pdfUrl);
togglePdfFavorite.innerHTML = `
<i class="${isFavorite ? 'fas' : 'far'} fa-heart ${isFavorite ? 'text-red-500' : ''}"></i>
<span class="ml-1">${isFavorite ? 'Remover dos' : 'Adicionar aos'} favoritos</span>
`;
// Set up favorite toggle for this PDF
togglePdfFavorite.onclick = () => {
togglePdfFavorite(pdfUrl, title);
const newIsFavorite = state.favorites.pdfs.includes(pdfUrl);
togglePdfFavorite.innerHTML = `
<i class="${newIsFavorite ? 'fas' : 'far'} fa-heart ${newIsFavorite ? 'text-red-500' : ''}"></i>
<span class="ml-1">${newIsFavorite ? 'Remover dos' : 'Adicionar aos'} favoritos</span>
`;
};
}
// Toggle video favorite
function toggleVideoFavorite(videoUrl, title) {
const index = state.favorites.videos.indexOf(videoUrl);
if (index === -1) {
state.favorites.videos.push(videoUrl);
} else {
state.favorites.videos.splice(index, 1);
}
localStorage.setItem('favorites', JSON.stringify(state.favorites));
}
// Toggle PDF favorite
function togglePdfFavorite(pdfUrl, title) {
const index = state.favorites.pdfs.indexOf(pdfUrl);
if (index === -1) {
state.favorites.pdfs.push(pdfUrl);
} else {
state.favorites.pdfs.splice(index, 1);
}
localStorage.setItem('favorites', JSON.stringify(state.favorites));
}
// Show favorites
function showFavorites() {
const favoriteVideos = state.videos.filter(video => state.favorites.videos.includes(video.video));
const favoritePDFs = state.pdfs.filter(pdf => state.favorites.pdfs.includes(pdf.pdf));
// Create a modal to display favorites
const modal = document.createElement('div');
modal.className = 'fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center p-4';
modal.innerHTML = `
<div class="bg-gray-800 rounded-lg p-6 max-w-4xl w-full max-h-[90vh] overflow-y-auto">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold">Meus Favoritos</h2>
<button id="closeFavoritesModal" class="text-gray-400 hover:text-white">
<i class="fas fa-times"></i>
</button>
</div>
<div class="space-y-8">
<div>
<h3 class="text-xl font-bold mb-4">Vídeos Favoritos</h3>
${favoriteVideos.length > 0 ? `
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
${favoriteVideos.map(video => `
<div class="bg-gray-700 rounded-lg overflow-hidden">
<div class="relative">
<img src="${video.imagem}" alt="${video.titulo}" class="w-full h-28 object-cover">
<button class="play-btn absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity duration-200" data-video="${video.video}" data-title="${video.titulo}">
<i class="fas fa-play text-white text-3xl"></i>
</button>
</div>
<div class="p-3">
<h3 class="font-medium truncate">${video.titulo}</h3>
</div>
</div>
`).join('')}
</div>
` : `
<p class="text-gray-400">Nenhum vídeo favoritado</p>
`}
</div>
<div>
<h3 class="text-xl font-bold mb-4">PDFs Favoritos</h3>
${favoritePDFs.length > 0 ? `
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
${favoritePDFs.map(pdf => `
<div class="bg-gray-700 rounded-lg overflow-hidden">
<div class="relative">
<img src="${pdf.imagem}" alt="${pdf.titulo}" class="w-full h-28 object-cover">
<button class="view-pdf-btn absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity duration-200" data-pdf="${pdf.pdf}" data-title="${pdf.titulo}">
<i class="fas fa-eye text-white text-3xl"></i>
</button>
</div>
<div class="p-3">
<h3 class="font-medium truncate">${pdf.titulo}</h3>
</div>
</div>
`).join('')}
</div>
` : `
<p class="text-gray-400">Nenhum PDF favoritado</p>
`}
</div>
</div>
</div>
`;
document.body.appendChild(modal);
// Add event listeners
modal.querySelector('#closeFavoritesModal').addEventListener('click', () => {
modal.remove();
});
// Add play button listeners
modal.querySelectorAll('.play-btn').forEach(btn => {
btn.addEventListener('click', function() {
modal.remove();
openVideoModal(this.dataset.video, this.dataset.title);
});
});
// Add PDF button listeners
modal.querySelectorAll('.view-pdf-btn').forEach(btn => {
btn.addEventListener('click', function() {
modal.remove();
openPdfModal(this.dataset.pdf, this.dataset.title);
});
});
}
// Initialize the app when the DOM is loaded
document.addEventListener('DOMContentLoaded', init);
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=thigas88/vaquinha" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>