feat: adicionando msgs de alertas necessários para o código.

agleicesousa · Sep 7, 2024 · 916d284 · 916d284
1 parent 7733487
commit 916d284
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 61 deletions.
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://fonts.googleapis.com/css2?family=Martel+Sans:wght@600&family=Poppins:wght@300;400;700&display=swap" rel="stylesheet">
-    <link rel="shortcut icon" href="../../../assets/images/favicon.ico" type="image/x-icon"> <!-- Define o ícone do site (favicon) -->
+    <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon"> <!-- Define o ícone do site (favicon) -->
     <link rel="stylesheet" href="style.css">
     <title>CinemaFlix</title>
 </head>
@@ -19,13 +19,13 @@ <h1>CinemaFlix</h1>
         </div>
         <nav>
             <a href="./src/pages/filmes/index.html">Filmes</a>
-            <a href="#">Séries</a>
-            <a href="#">Animes</a>
-            <a href="#">Documentários</a>
+            <a href="#" class="alertButton" data-message="Em breve as melhores séries 🎥">Séries</a>
+            <a href="#" class="alertButton" data-message="Animes incríveis estarão disponíveis 🎥">Animes</a>
+            <a href="#" class="alertButton" data-message="Documentários fascinantes em breve 🎥">Documentários</a>
         </nav>
         <div class="auth-buttons">
-            <button class="btn btn-white">Entrar</button>
-            <button class="btn btn-red">Cadastrar</button>
+            <button class="btn btn-white" id="loginButton" data-message="Ainda não estamos ativos 😞">Entrar</button>
+            <button class="btn btn-red" id="signupButton" data-message="Em breve você poderá se cadastrar 😞">Cadastrar</button>
         </div>
     </header>
 
@@ -36,23 +36,17 @@ <h1>Maratonas Sem Fim, Emoções Inigualáveis!</h1>
             <p>Inscreva-se agora e seja o primeiro a receber novidades e surpresas exclusivas no seu e-mail!</p>
             <div class="hero-buttons">
                 <input type="text" id="search-input" placeholder="E-mail">
-                <button class="btn btn-red" id="search-button">Vamos lá &gt;</button>
+                <button class="btn btn-red" id="newsletterButton" data-message="Ainda não estamos recebendo e-mails 📥">Vamos lá &gt;</button>
             </div>
         </div>
     </main>
 
     <footer>
         <!-- O JavaScript insere o ano atual automaticamente -->
-        <p>&copy; <span id="year"></span> <a href="https://www.linkedin.com/in/agleice-sousa">Agleice Sousa</a>. Todos
-            os direitos reservados.</p>
+        <p>&copy; <span id="year"></span> <a href="https://www.linkedin.com/in/agleice-sousa">Agleice Sousa</a>. Todos os direitos reservados.</p>
     </footer>
 
-    <!-- Script para inserir o ano atual no rodapé -->
-    <script> 
-        document.addEventListener('DOMContentLoaded', () => {
-            document.getElementById('year').textContent = new Date().getFullYear();
-        });
-    </script>
+    <script src="script.js"></script>
 </body>
 
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,17 @@
+// Script para inserir o ano atual no rodapé
+document.addEventListener('DOMContentLoaded', () => {
+    document.getElementById('year').textContent = new Date().getFullYear();
+});
+
+// Script para mostrar alertas personalizados
+const alertButtons = document.querySelectorAll('.alertButton');
+const authButtons = document.querySelectorAll('.auth-buttons button');
+const searchButton = document.getElementById('newsletterButton');
+const allButtons = [...alertButtons, ...authButtons, searchButton];
+
+allButtons.forEach(button => {
+    button.addEventListener('click', function () {
+        const message = this.getAttribute('data-message');
+        alert(message);
+    });
+});
diff --git a/src/pages/filmes/index.html b/src/pages/filmes/index.html
@@ -4,34 +4,34 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link
-        href="https://fonts.googleapis.com/css2?family=Martel+Sans:wght@600&family=Poppins:wght@300;400;700&display=swap"
-        rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Martel+Sans:wght@600&family=Poppins:wght@300;400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-    <link rel="shortcut icon" href="../../../assets/images/favicon.ico" type="image/x-icon"> <!-- Define o ícone do site (favicon) -->
+    <link rel="shortcut icon" href="../../../assets/images/favicon.ico" type="image/x-icon">
     <link rel="stylesheet" href="style.css">
     <title>CinemaFlix</title>
 </head>
 
 <body>
-    <header> <!-- Cabeçalho do site -->
+    <header>
+        <!-- Cabeçalho do site -->
         <div class="logo-container">
             <a href="../../../index.html"><img src="../../../assets/images/logo.png" alt="Logo"></a>
             <h1><a href="../../../index.html">CinemaFlix</a></h1>
         </div>
         <nav>
-            <a href="#" class="active">Filmes</a>
-            <a href="#">Séries</a>
-            <a href="#">Animes</a>
-            <a href="#">Documentários</a>
+            <a href="#" class="active" data-message="Você já está na página de Filmes">Filmes</a>
+            <a href="#" class="alertButton" data-message="Em breve as melhores séries 🎥">Séries</a>
+            <a href="#" class="alertButton" data-message="Animes incríveis estarão disponíveis 🎥">Animes</a>
+            <a href="#" class="alertButton" data-message="Documentários fascinantes em breve 🎥">Documentários</a>
         </nav>
         <div class="auth-buttons">
-            <button class="btn btn-white">Entrar</button>
-            <button class="btn btn-red">Cadastrar</button>
+            <button class="btn btn-white" id="loginButton" data-message="Ainda não estamos ativos 😞">Entrar</button>
+            <button class="btn btn-red" id="signupButton" data-message="Em breve você poderá se cadastrar 😞">Cadastrar</button>
         </div>
     </header>
 
-    <main> <!-- Conteúdo principal do site -->
+    <main>
+        <!-- Conteúdo principal do site -->
         <div class="hero">
             <div class="hero-buttons">
                 <input type="text" id="search-input" placeholder="Buscar filmes...">
@@ -41,24 +41,27 @@ <h1><a href="../../../index.html">CinemaFlix</a></h1>
                     <!-- As opções serão adicionadas dinamicamente -->
                 </select>
             </div>
+            <div id="no-results-message" class="no-results-message"></div> <!-- Novo elemento para a mensagem de erro -->
         </div>
         <div class="movie-grid" id="movie-grid">
             <!-- Os cards dos filmes serão inseridos aqui pelo JavaScript -->
         </div>
-    </main>
+    </main>    
 
-    <footer>  <!-- Rodapé do site -->
+    <footer>
+        <!-- Rodapé do site -->
         <div class="footer-content">
             <div class="footer-logo">
                 <img src="../../../assets/images/logo.png" alt="Logo">
+                <h2>CinemaFlix</h2>
             </div>
             <div class="footer-nav">
                 <h3>Links Rápidos</h3>
-                <a href="#">Início</a>
-                <a href="#">Sobre Nós</a>
-                <a href="#">Ajuda</a>
-                <a href="#">Termos de Serviço</a>
-                <a href="#">Política de Privacidade</a>
+                <a href="../../../index.html">Início</a>
+                <a href="#" class="alertButton" data-message="Mais sobre nós em breve 🎥">Sobre Nós</a>
+                <a href="#" class="alertButton" data-message="Precisa de ajuda? Em breve mais informações 🎥">Ajuda</a>
+                <a href="#" class="alertButton" data-message="Termos de serviço em breve disponíveis 🎥">Termos de Serviço</a>
+                <a href="#" class="alertButton" data-message="Política de Privacidade estará disponível 🎥">Política de Privacidade</a>
             </div>
             <div class="footer-contact">
                 <h3>Contato</h3>
@@ -67,29 +70,20 @@ <h3>Contato</h3>
             </div>
             <div class="footer-social">
                 <h3>Siga-nos</h3>
-                <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
-                <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
-                <a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
+                <a href="https://www.linkedin.com/in/agleice-sousa" target="_blank" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
+                <a href="https://www.instagram.com/glehsousa_/" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
+                <a href="https://www.github.com/agleicesousa" target="_blank" aria-label="GitHub"><i class="fab fa-github"></i></a>
                 <div class="newsletter">
                     <input type="email" placeholder="Inscreva-se para a newsletter">
-                    <button class="btn-red">Inscrever-se</button>
+                    <button class="btn-red" id="newsletterButton" data-message="Ainda não estamos recebendo e-mails 📥">Inscrever-se</button>
                 </div>
             </div>
         </div>
         <div class="footer-bottom">
-            <!-- O JavaScript insere o ano atual automaticamente -->
-            <p>&copy; <span id="year"></span> <a href="https://www.linkedin.com/in/agleice-sousa">Agleice Sousa.</a>
-                Todos os direitos reservados.</p>
+            <p>&copy; <span id="year"></span> <a href="https://www.linkedin.com/in/agleice-sousa">Agleice Sousa</a>. Todos os direitos reservados.</p>
         </div>
     </footer>
 
-    <!-- Script para inserir o ano atual no rodapé -->
-    <script> 
-        document.addEventListener('DOMContentLoaded', () => {
-            document.getElementById('year').textContent = new Date().getFullYear();
-        });
-    </script>
-
     <script src="../../../dados.js"></script>
     <script src="script.js"></script>
 </body>

diff --git a/src/pages/filmes/script.js b/src/pages/filmes/script.js
@@ -4,19 +4,16 @@ document.addEventListener('DOMContentLoaded', () => {
     const searchInput = document.getElementById('search-input');    // Campo de input da busca
     const moviesSection = document.querySelector('.movie-grid');    // Seção onde os filmes serão exibidos
     const genreFilter = document.getElementById('genre-filter');    // Filtro de gênero
+    const noResultsMessage = document.getElementById('no-results-message'); // Mensagem de sem resultados
 
     let filteredFilms = filmes; // Inicializa a variável com a lista de filmes
 
-    // Exibe os filmes iniciais e preenche o filtro de gêneros
-    displayMovies(filteredFilms);
-    populateGenreFilter(filmes);
-
     // Cria um card para exibir as informações de um filme
     function createMovieCard(film) {
         const movieCard = document.createElement('div');
         movieCard.className = 'movie-card';
         movieCard.innerHTML = `
-            <img src="${film.capa}" alt="${film.nome}">
+            <img src="${film.capa}" alt="${film.nome}" title="É apenas um poster, não vai a lugar algum! 😶">
             <div class="info">
                 <h3>${film.nome}</h3>
                 <p>${film.ano} - ${film.avaliacao} / 10</p>
@@ -25,16 +22,22 @@ document.addEventListener('DOMContentLoaded', () => {
         return movieCard;
     }
 
-    // Exibe os filmes na seção de grid
+    // Exibe os filmes na seção de grid e gerencia a mensagem de sem resultados
     function displayMovies(films) {
         moviesSection.innerHTML = ''; // Limpa a seção de filmes
-        films.forEach(film => {
-            const movieCard = createMovieCard(film); // Cria um card para cada filme
-            moviesSection.appendChild(movieCard);   // Adiciona o card à seção de filmes
-        });
+        if (films.length > 0) {
+            films.forEach(film => {
+                const movieCard = createMovieCard(film);
+                moviesSection.appendChild(movieCard);
+            });
+            noResultsMessage.style.display = 'none'; // Esconde a mensagem de sem resultados
+        } else {
+            noResultsMessage.style.display = 'block'; // Mostra a mensagem de sem resultados
+            noResultsMessage.textContent = 'Nenhum resultado encontrado'; // Define o texto da mensagem
+        }
     }
 
-    // Filtra e exibe filmes de acordo com a busca
+    // Filtra filmes com base na busca do usuário
     function searchMovies(query) {
         const lowerQuery = query.toLowerCase(); // Converte a busca para letras minúsculas
         filteredFilms = filmes.filter(film =>
@@ -90,4 +93,27 @@ document.addEventListener('DOMContentLoaded', () => {
         allOption.textContent = 'Todos';
         genreFilter.insertBefore(allOption, genreFilter.firstChild); // Coloca a opção "Todos" como a primeira
     }
+
+    // Script para inserir o ano atual no rodapé
+    document.getElementById('year').textContent = new Date().getFullYear();
+
+    // Adiciona eventos de clique para botões com data-message
+    const alertButtons = document.querySelectorAll('[data-message]'); // Seleciona botões com data-message
+    const authButtons = document.querySelectorAll('.auth-buttons button'); // Seleciona botões de autenticação
+    const allButtons = [...alertButtons, ...authButtons, document.getElementById('search-button'), document.getElementById('newsletterButton')];
+
+    allButtons.forEach(button => {
+        button.addEventListener('click', function () {
+            const message = this.getAttribute('data-message');
+            if (message) { // Verifica se a mensagem existe
+                alert(message); // Exibe a mensagem de alerta
+            }
+        });
+    });
+
+    // Inicializa o filtro de gêneros
+    populateGenreFilter(filmes);
+
+    // Exibe todos os filmes ao carregar a página
+    displayMovies(filmes); 
 });
diff --git a/src/pages/filmes/style.css b/src/pages/filmes/style.css
@@ -245,12 +245,24 @@ main {
     font-size: 16px;
 }
 
+/* Estilo para a mensagem de nenhum resultado encontrado */
+.no-results-message {
+    color: #e50914;
+    font-size: 18px;
+    text-align: center;
+    margin-top: 20px;
+    display: none; /* Inicialmente escondido */
+}
+
 /* Estilos do rodapé */
 footer {
     background-color: rgba(0, 0, 0, 0.9);
     color: #e0e0e0;
-    padding: 50px 30px;
-    border-top: 1px solid #333;
+    align-items: center;
+    /* display: flex; */
+    justify-content: center;
+    /* border-top: 1px solid #333; */
+    margin-top: 10px;
     text-align: center;
 }