manualdodev · clararicioni · Nov 10, 2023
diff --git a/README.md b/README.md
diff --git a/css/game.css b/css/game.css
@@ -2,13 +2,15 @@ main {
   display: flex;
   flex-direction: column;
   width: 100%;
-  background-image: url('../images/bg.jpg');
   background-size: cover;
   min-height: 100vh;
   align-items: center;
   justify-content: center;
   padding: 20px 20px 50px;
 }
+span{
+  background: none;
+}
 
 header {
   display: flex;
@@ -19,10 +21,21 @@ header {
   width: 100%;
   max-width: 800px;
   padding: 30px;
-  margin: 0 0 30px;
+  margin-bottom: 120px;
   border-radius: 5px;
 }
 
+.btnDesisto {/*Botão 'desisto'*/
+  padding: 9px;
+  text-decoration: none;
+  background-color: red;
+  color: white;
+}
+
+.btnDesisto:hover {/*efeito no botão 'desisto'*/
+  opacity: 50%;
+}
+
 .grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
@@ -33,7 +46,7 @@ header {
 }
 
 .card {
-  aspect-ratio: 3/4;
+  aspect-ratio: 4/4;
   width: 100%;
   border-radius: 5px;
   position: relative;
@@ -48,7 +61,7 @@ header {
   position: absolute;
   background-size: cover;
   background-position: center;
-  border: 5px solid #00b5cc;
+  border: 3px solid #19691d;
   border-radius: 5px;
   transition: all 400ms ease;
 }
@@ -58,7 +71,7 @@ header {
 }
 
 .back {
-  background-image: url('../images/back.png');
+  background-image: url('../images/card2.png');
   backface-visibility: hidden;
 }
 

diff --git a/css/login.css b/css/login.css
@@ -4,6 +4,7 @@
   flex-direction: column;
   height: 100vh;
   justify-content: center;
+  font-family: 'Oswald'; 
 }
 
 .login__header {
@@ -14,19 +15,28 @@
   margin-bottom: 50px;
 }
 
+
 .login__header img {
-  width: 250px;
+  width: 400px;
 }
 
-
-
 .login__header h1 {
-  color: #333;
+  color: #fff;
   font-size: 1.5em;
+  user-select: none;
+}
+
+.login__header p {
+  font-family: 'Rubik';
+  color: #fff;
+  font-size: 1.2em;
+  text-align: center;
+  word-spacing: 3px;
+  margin-top: 4%;
+  user-select: none
 }
 
 .login__input {
-  border: 2px solid #333;
   border-radius: 8px;
   color: #333;
   font-size: 1em;
@@ -35,18 +45,28 @@
   outline: none;
   padding: 15px;
   width: 100%;
+  background-color: whitesmoke;
 }
 
 .login__button {
-  background-color: #00b5cc;
-  border: 3px solid #b2df28;
+  /*botão "JOGAR"*/
+  background-color: #19691d;
+  border: none;
   border-radius: 8px;
+  transition: background 1s;
   color: #fff;
   cursor: pointer;
   font-size: 1em;
   max-width: 300px;
   padding: 15px;
   width: 100%;
+  text-shadow: 0.07em 0.07em 0.07em black;
+}
+
+.login__button:hover,
+.login_button:focus {
+  /*efeito ao passar o cursor no botão jogar*/
+  background: red;
 }
 
 .login__button:disabled {

diff --git a/css/reset.css b/css/reset.css
@@ -1,10 +1,11 @@
 @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
-
+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&family=Rubik&display=swap');
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   list-style: none;
+  background-color: black;
   border: none;
   font-family: 'Press Start 2P', cursive;
 }
diff --git a/images/back.png b/images/back.png
diff --git a/images/bb.png b/images/bb.png
diff --git a/images/bbfake.png b/images/bbfake.png
diff --git a/images/bbori.png b/images/bbori.png
diff --git a/images/beth.png b/images/beth.png
diff --git a/images/bg.jpg b/images/bg.jpg
diff --git a/images/brain.png b/images/brain.png
diff --git a/images/card2.png b/images/card2.png
diff --git a/images/cerebro.jpg b/images/cerebro.jpg
diff --git a/images/facebook.png b/images/facebook.png
diff --git a/images/facefake.png b/images/facefake.png
diff --git a/images/faceori.png b/images/faceori.png
diff --git a/images/instagram.png b/images/instagram.png
diff --git a/images/instagramfake.png b/images/instagramfake.png
diff --git a/images/instagramori.png b/images/instagramori.png
diff --git a/images/itau.png b/images/itau.png
diff --git a/images/itaufake.png b/images/itaufake.png
diff --git a/images/itauori.png b/images/itauori.png
diff --git a/images/jerry.png b/images/jerry.png
diff --git a/images/jessica.png b/images/jessica.png
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/logo2.png b/images/logo2.png
diff --git a/images/meeseeks.png b/images/meeseeks.png
diff --git a/images/morty.png b/images/morty.png
diff --git a/images/nubank.png b/images/nubank.png
diff --git a/images/nubankfake.png b/images/nubankfake.png
diff --git a/images/nubankori.png b/images/nubankori.png
diff --git a/images/pessoa-passaro.png b/images/pessoa-passaro.png
diff --git a/images/pickle-rick.png b/images/pickle-rick.png
diff --git a/images/rick.png b/images/rick.png
diff --git a/images/scroopy.png b/images/scroopy.png
diff --git a/images/summer.png b/images/summer.png
diff --git a/index.html b/index.html
@@ -9,22 +9,24 @@
   <link rel="stylesheet" href="./css/login.css">
 
   <script defer src="./js/login.js"></script>
-  <link rel="shortcut icon" href="./images/brain.png" type="image/x-icon">
-  <title>Memory Game | Login</title>
+  <link rel="shortcut icon" href="./images/logo2.png" type="image/x-icon">
+  <title>Phish Or Legit | Login</title>
 </head>
 
 <body>
 
   <form class="login-form">
 
     <div class="login__header">
-      <img src="./images/logo.png" alt="logo">
-      <img src="./images/cerebro.jpg" alt="brain icon">
-      <h1>Memory Game</h1>
+      <img src="./images/logo2.png" alt="logo">
+      <h1>JOGO DA MEMÓRIA</h1>
+      <p> Jogo sugerido para a participação da turma e fonte de auxílio na conclusão do artigo<br>
+        "A AMEAÇA OFERECIDA POR GOLPES E CRIMES CIBERNÉTICOS PRESENTES NA WEB: PHISHING".<br><br>Comunicação e Expressão
+        - 1º Semestre ADS - FATEC SOROCABA</p>
     </div>
 
-    <input type="text" placeholder="Name" class="login__input">
-    <button type="submit" class="login__button">Play</button>
+    <input type="text" placeholder="Nome" class="login__input">
+    <button type="submit" class="login__button">JOGAR</button>
 
   </form>
 

diff --git a/js/game.js b/js/game.js
@@ -2,43 +2,117 @@ const grid = document.querySelector('.grid');
 const spanPlayer = document.querySelector('.player');
 const timer = document.querySelector('.timer');
 
-const characters = [
-  'beth',
-  'jerry',
-  'jessica',
-  'morty',
-  'pessoa-passaro',
-  'pickle-rick',
-  'rick',
-  'summer',
-  'meeseeks',
-  'scroopy',
+const characters = [//estabelece os pares de cartas, de acordo com cada elemento (no caso, serão 5 pares.)
+  'facebook',
+  'bb',
+  'instagram',
+  'nubank',
+  'itau',
 ];
 
-const createElement = (tag, className) => {
+const createElement = (tag, className) => {//criar dinamicamente elementos HTML em JavaScript
   const element = document.createElement(tag);
   element.className = className;
   return element;
 }
 
-let firstCard = '';
+let firstCard = '';//a princípio, duas cartas são selecionáveis e ainda não possuem um valor (até o usuário selecionar alguma).
 let secondCard = '';
 
-const checkEndGame = () => {
+const checkEndGame = () => { //checa o fim do jogo
   const disabledCards = document.querySelectorAll('.disabled-card');
 
-  if (disabledCards.length === 20) {
+  if (disabledCards.length === 10) {//caso 10 cartas estejam desativadas, significa que o jogo acabou.
     clearInterval(this.loop);
-    alert(`Parabéns, ${spanPlayer.innerHTML}! Seu tempo foi de: ${timer.innerHTML}`);
+    // Recupera os acertos e erros de cada site
+    var resultbb = parseInt(localStorage.getItem('resultbb'), 10) || 0;
+    var resultface = parseInt(localStorage.getItem('resultface'), 10) || 0;
+    var resultinsta = parseInt(localStorage.getItem('resultinsta'), 10) || 0;
+    var resultitau = parseInt(localStorage.getItem('resultitau'), 10) || 0;
+    var resultnubank = parseInt(localStorage.getItem('resultnubank'), 10) || 0;
+
+    // Realiza a soma aritmética dos resultados
+    var resultadoTotal = resultbb + resultface + resultinsta + resultitau + resultnubank;
+
+    // Exibe o resultado em um alert
+    if (resultadoTotal < 3) {//o usuário será parabenizado somente caso faça 3 acertos ou mais.
+      alert(`${spanPlayer.innerHTML}, Seu tempo foi de: ${timer.innerHTML} segundos. Você acertou ${resultadoTotal} sites. Seja mais atento(a) ao se deparar com algumas páginas!`);
+    } else {
+      alert(`Parabéns, ${spanPlayer.innerHTML}! Seu tempo foi de: ${timer.innerHTML} segundos. Você acertou ${resultadoTotal} sites.`);
+    }
   }
-}
+};
 
 const checkCards = () => {
   const firstCharacter = firstCard.getAttribute('data-character');
   const secondCharacter = secondCard.getAttribute('data-character');
 
-  if (firstCharacter === secondCharacter) {
+  if (firstCharacter === 'facebook' && secondCharacter === 'facebook') {
+    firstCard.firstChild.classList.add('disabled-card');
+    secondCard.firstChild.classList.add('disabled-card');
+    window.open('../pages/face.html', '_blank');
+    localStorage.setItem('disabled-card', 'facebook');
+    firstCard = '';
+    secondCard = '';
+
+    checkEndGame();
+
+  } else {
+    setTimeout(() => {
+
+      firstCard.classList.remove('reveal-card');
+      secondCard.classList.remove('reveal-card');
+
+      firstCard = '';
+      secondCard = '';
+
+    }, 500);
+
+  }
+  if (firstCharacter === 'instagram' && secondCharacter === 'instagram') {
+    window.open('../pages/insta.html', '_blank');
+    firstCard.firstChild.classList.add('disabled-card');
+    secondCard.firstChild.classList.add('disabled-card');
+
+    firstCard = '';
+    secondCard = '';
+
+    checkEndGame();
+
+  } else {
+    setTimeout(() => {
+
+      firstCard.classList.remove('reveal-card');
+      secondCard.classList.remove('reveal-card');
+
+      firstCard = '';
+      secondCard = '';
+
+    }, 500);
+  }
+  if (firstCharacter === 'bb' && secondCharacter === 'bb') {
+    window.open('../pages/bb.html', '_blank');
+    firstCard.firstChild.classList.add('disabled-card');
+    secondCard.firstChild.classList.add('disabled-card');
+
+    firstCard = '';
+    secondCard = '';
 
+    checkEndGame();
+
+  } else {
+    setTimeout(() => {
+
+      firstCard.classList.remove('reveal-card');
+      secondCard.classList.remove('reveal-card');
+
+      firstCard = '';
+      secondCard = '';
+
+    }, 500);
+  }
+  if (firstCharacter === 'itau' && secondCharacter === 'itau') {
+    window.open('../pages/itau.html', '_blank');
     firstCard.firstChild.classList.add('disabled-card');
     secondCard.firstChild.classList.add('disabled-card');
 
@@ -58,7 +132,26 @@ const checkCards = () => {
 
     }, 500);
   }
+  if (firstCharacter === 'nubank' && secondCharacter === 'nubank') {
+    window.open('../pages/nubank.html', '_blank');
+    firstCard.firstChild.classList.add('disabled-card');
+    secondCard.firstChild.classList.add('disabled-card');
+
+    firstCard = '';
+    secondCard = '';
+
+    checkEndGame();
+  } else {
+    setTimeout(() => {
 
+      firstCard.classList.remove('reveal-card');
+      secondCard.classList.remove('reveal-card');
+
+      firstCard = '';
+      secondCard = '';
+
+    }, 500);
+  }
 }
 
 const revealCard = ({ target }) => {