452 lines
25 KiB
HTML
452 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-br">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Netflix Clone - Assistir</title>
|
|
<!-- Tailwind CSS v4 via CDN -->
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
netflix: {
|
|
red: '#e50914',
|
|
black: '#141414',
|
|
dark: '#181818',
|
|
gray: '#808080',
|
|
light: '#e5e5e5'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
.movie-card:hover .movie-info {
|
|
opacity: 1;
|
|
}
|
|
.movie-card:hover {
|
|
transform: scale(1.05);
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Estilos específicos para o player de vídeo */
|
|
.video-progress {
|
|
width: 100%;
|
|
height: 4px;
|
|
background-color: rgba(128, 128, 128, 0.5);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.video-progress-filled {
|
|
background-color: #e50914;
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
width: 30%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.video-progress:hover .video-progress-handle {
|
|
opacity: 1;
|
|
}
|
|
|
|
.video-progress-handle {
|
|
height: 12px;
|
|
width: 12px;
|
|
border-radius: 50%;
|
|
background-color: #e50914;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: 30%;
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.video-controls {
|
|
opacity: 1;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.video-container:hover .video-controls {
|
|
opacity: 1;
|
|
}
|
|
|
|
.video-container.playing .video-controls {
|
|
opacity: 0;
|
|
}
|
|
|
|
.video-container.playing:hover .video-controls {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Animação para o botão de play */
|
|
@keyframes pulse {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.1); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
.play-button {
|
|
animation: pulse 2s infinite;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-netflix-black text-white min-h-screen">
|
|
<!-- Header simplificado para a página de assistir -->
|
|
<header class="fixed top-0 w-full z-50 transition-all duration-500 bg-gradient-to-b from-black/80 to-transparent">
|
|
<div class="container mx-auto px-4 py-4 flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<a href="index.html" class="flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
<span>Voltar</span>
|
|
</a>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<button class="text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</button>
|
|
<div class="relative">
|
|
<img src="https://placehold.co/32" alt="Perfil" class="rounded">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Player de Vídeo Principal -->
|
|
<section class="video-container relative h-screen bg-black">
|
|
<!-- Overlay para gradiente -->
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent z-10 pointer-events-none"></div>
|
|
|
|
<!-- Vídeo -->
|
|
<img src="https://placehold.co/1920x1080/000000/FFFFFF?text=Stranger+Things" alt="Stranger Things" class="w-full h-full object-contain">
|
|
|
|
<!-- Botão de play central -->
|
|
<div class="absolute inset-0 flex items-center justify-center z-20">
|
|
<button class="play-button bg-white/20 rounded-full p-6">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-white" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Controles do player -->
|
|
<div class="video-controls absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 z-30">
|
|
<!-- Barra de progresso -->
|
|
<div class="video-progress mb-4">
|
|
<div class="video-progress-filled"></div>
|
|
<div class="video-progress-handle"></div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center space-x-4">
|
|
<button class="text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
<button class="text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15.536a5 5 0 001.414 1.414m2.828-9.9a9 9 0 012.728-2.728" />
|
|
</svg>
|
|
</button>
|
|
<div class="text-white text-sm">
|
|
<span>00:15:22</span>
|
|
<span class="mx-2">/</span>
|
|
<span>00:50:32</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-4">
|
|
<button class="text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
|
|
</svg>
|
|
</button>
|
|
<button class="text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
</button>
|
|
<button class="text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
|
|
</svg>
|
|
</button>
|
|
<button class="text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Informações do Episódio -->
|
|
<section class="py-8 px-4 md:px-16 bg-netflix-black">
|
|
<div class="max-w-6xl mx-auto">
|
|
<div class="flex flex-col md:flex-row md:items-start gap-8">
|
|
<div class="md:w-2/3">
|
|
<h1 class="text-3xl font-bold mb-2">Stranger Things</h1>
|
|
<div class="flex items-center text-sm mb-4">
|
|
<span class="text-green-500 font-bold">97% relevante</span>
|
|
<span class="mx-2 border border-white/40 px-1">16</span>
|
|
<span class="mr-2">2023</span>
|
|
<span>4 Temporadas</span>
|
|
</div>
|
|
|
|
<h2 class="text-xl font-bold mb-2">S1:E1 "Capítulo Um: O Desaparecimento de Will Byers"</h2>
|
|
<p class="text-netflix-light/80 mb-6">
|
|
Em 6 de novembro de 1983, em Hawkins, Indiana, o cientista Will Byers desaparece misteriosamente. A mãe
|
|
de Will, Joyce, torna-se frenética e tenta encontrar Will enquanto o chefe de polícia Jim Hopper inicia
|
|
uma investigação. No dia seguinte, uma menina psicocinética que sabe sobre o desaparecimento de Will é
|
|
encontrada por Mike, Lucas e Dustin.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div>
|
|
<h4 class="text-netflix-gray text-sm">Elenco:</h4>
|
|
<p class="text-netflix-light">Winona Ryder, David Harbour, Finn Wolfhard, Millie Bobby Brown</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-netflix-gray text-sm">Gêneros:</h4>
|
|
<p class="text-netflix-light">Sci-Fi, Terror, Drama</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-netflix-gray text-sm">Cenas e momentos:</h4>
|
|
<p class="text-netflix-light">Assustador, Suspense, Sombrio</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:w-1/3">
|
|
<h3 class="text-lg font-bold mb-3">Mais episódios</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex gap-3 p-2 bg-white/10 rounded-md">
|
|
<div class="w-24 h-16 flex-shrink-0 relative">
|
|
<img src="https://placehold.co/160x90/000000/FFFFFF?text=Ep+1" alt="Episódio 1" class="w-full h-full object-cover rounded">
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="font-medium">1. O Desaparecimento de Will Byers</p>
|
|
<p class="text-sm text-netflix-gray">50 min</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-3 p-2 hover:bg-white/10 rounded-md transition-colors">
|
|
<div class="w-24 h-16 flex-shrink-0">
|
|
<img src="https://placehold.co/160x90/000000/FFFFFF?text=Ep+2" alt="Episódio 2" class="w-full h-full object-cover rounded">
|
|
</div>
|
|
<div>
|
|
<p class="font-medium">2. A Estranha na Rua Maple</p>
|
|
<p class="text-sm text-netflix-gray">48 min</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-3 p-2 hover:bg-white/10 rounded-md transition-colors">
|
|
<div class="w-24 h-16 flex-shrink-0">
|
|
<img src="https://placehold.co/160x90/000000/FFFFFF?text=Ep+3" alt="Episódio 3" class="w-full h-full object-cover rounded">
|
|
</div>
|
|
<div>
|
|
<p class="font-medium">3. Luzes de Natal</p>
|
|
<p class="text-sm text-netflix-gray">51 min</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-3 p-2 hover:bg-white/10 rounded-md transition-colors">
|
|
<div class="w-24 h-16 flex-shrink-0">
|
|
<img src="https://placehold.co/160x90/000000/FFFFFF?text=Ep+4" alt="Episódio 4" class="w-full h-full object-cover rounded">
|
|
</div>
|
|
<div>
|
|
<p class="font-medium">4. O Corpo</p>
|
|
<p class="text-sm text-netflix-gray">47 min</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Conteúdo relacionado -->
|
|
<section class="py-6 px-4 md:px-16">
|
|
<h3 class="text-xl md:text-2xl font-bold mb-4">Mais como este</h3>
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
|
<div class="movie-card transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Sugestão+1" alt="Sugestão 1" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Título Sugerido 1</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">97% relevante</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="movie-card transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Sugestão+2" alt="Sugestão 2" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Título Sugerido 2</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">95% relevante</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="movie-card transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Sugestão+3" alt="Sugestão 3" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Título Sugerido 3</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">93% relevante</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="movie-card transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Sugestão+4" alt="Sugestão 4" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Título Sugerido 4</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">91% relevante</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="movie-card transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Sugestão+5" alt="Sugestão 5" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Título Sugerido 5</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">96% relevante</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="movie-card transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Sugestão+6" alt="Sugestão 6" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Título Sugerido 6</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">94% relevante</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Seção de Avaliação -->
|
|
<section class="py-6 px-4 md:px-16 border-t border-netflix-gray/20">
|
|
<div class="max-w-6xl mx-auto">
|
|
<h3 class="text-xl font-bold mb-4">Avalie este título</h3>
|
|
<div class="flex space-x-4 items-center">
|
|
<button class="p-3 rounded-full hover:bg-white/10 transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5" />
|
|
</svg>
|
|
</button>
|
|
<button class="p-3 rounded-full hover:bg-white/10 transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018a2 2 0 01.485.06l3.76.94m-7 10v5a2 2 0 002 2h.096c.5 0 .905-.405.905-.904 0-.715.211-1.413.608-2.008L17 13V4m-7 10h2" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="py-10 px-4 md:px-16 text-netflix-gray border-t border-netflix-gray/20">
|
|
<div class="max-w-6xl mx-auto">
|
|
<div class="flex space-x-6 mb-6 justify-center">
|
|
<a href="#" class="text-white hover:text-netflix-red transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z" />
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="text-white hover:text-netflix-red transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723 10.054 10.054 0 01-3.127 1.184 4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="text-white hover:text-netflix-red transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<p class="text-sm text-center">© 1997-2023 Netflix, Inc.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Script para simular interatividade do player -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const videoContainer = document.querySelector('.video-container');
|
|
const playButton = document.querySelector('.play-button');
|
|
const videoControls = document.querySelector('.video-controls');
|
|
|
|
// Simular play/pause ao clicar no botão central
|
|
playButton.addEventListener('click', function() {
|
|
videoContainer.classList.toggle('playing');
|
|
if (videoContainer.classList.contains('playing')) {
|
|
playButton.style.display = 'none';
|
|
} else {
|
|
playButton.style.display = 'flex';
|
|
}
|
|
});
|
|
|
|
// Simular play/pause ao clicar no vídeo
|
|
videoContainer.addEventListener('click', function(e) {
|
|
// Evitar que cliques nos controles acionem o play/pause
|
|
if (!videoControls.contains(e.target) && e.target !== playButton) {
|
|
videoContainer.classList.toggle('playing');
|
|
if (videoContainer.classList.contains('playing')) {
|
|
playButton.style.display = 'none';
|
|
} else {
|
|
playButton.style.display = 'flex';
|
|
}
|
|
}
|
|
});
|
|
|
|
// Mostrar controles ao passar o mouse
|
|
videoContainer.addEventListener('mousemove', function() {
|
|
videoControls.style.opacity = '1';
|
|
clearTimeout(videoContainer.timeout);
|
|
|
|
if (videoContainer.classList.contains('playing')) {
|
|
videoContainer.timeout = setTimeout(function() {
|
|
videoControls.style.opacity = '0';
|
|
}, 3000);
|
|
}
|
|
});
|
|
|
|
// Esconder controles ao sair do vídeo
|
|
videoContainer.addEventListener('mouseleave', function() {
|
|
if (videoContainer.classList.contains('playing')) {
|
|
videoControls.style.opacity = '0';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |