diff --git a/README.md b/README.md deleted file mode 100644 index dd24e13..0000000 --- a/README.md +++ /dev/null @@ -1,7 +0,0 @@ -

Memory Card

- -Image - - - - diff --git a/css/game.css b/css/game.css index 60e9ec5..5e1ee7b 100644 --- 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 index 43d5a58..bbb5081 100644 --- 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 index b65e9de..2b6b710 100644 --- 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 deleted file mode 100644 index 7ddcb02..0000000 Binary files a/images/back.png and /dev/null differ diff --git a/images/bb.png b/images/bb.png new file mode 100644 index 0000000..59a4416 Binary files /dev/null and b/images/bb.png differ diff --git a/images/bbfake.png b/images/bbfake.png new file mode 100644 index 0000000..9160764 Binary files /dev/null and b/images/bbfake.png differ diff --git a/images/bbori.png b/images/bbori.png new file mode 100644 index 0000000..4024c15 Binary files /dev/null and b/images/bbori.png differ diff --git a/images/beth.png b/images/beth.png deleted file mode 100644 index c0a957d..0000000 Binary files a/images/beth.png and /dev/null differ diff --git a/images/bg.jpg b/images/bg.jpg deleted file mode 100644 index 568c406..0000000 Binary files a/images/bg.jpg and /dev/null differ diff --git a/images/brain.png b/images/brain.png deleted file mode 100644 index 742aa95..0000000 Binary files a/images/brain.png and /dev/null differ diff --git a/images/card2.png b/images/card2.png new file mode 100644 index 0000000..27cbf1f Binary files /dev/null and b/images/card2.png differ diff --git a/images/cerebro.jpg b/images/cerebro.jpg deleted file mode 100644 index b565f1a..0000000 Binary files a/images/cerebro.jpg and /dev/null differ diff --git a/images/facebook.png b/images/facebook.png new file mode 100644 index 0000000..1cee83f Binary files /dev/null and b/images/facebook.png differ diff --git a/images/facefake.png b/images/facefake.png new file mode 100644 index 0000000..70dfc8b Binary files /dev/null and b/images/facefake.png differ diff --git a/images/faceori.png b/images/faceori.png new file mode 100644 index 0000000..f6d2853 Binary files /dev/null and b/images/faceori.png differ diff --git a/images/instagram.png b/images/instagram.png new file mode 100644 index 0000000..cbcf5e5 Binary files /dev/null and b/images/instagram.png differ diff --git a/images/instagramfake.png b/images/instagramfake.png new file mode 100644 index 0000000..140f1f1 Binary files /dev/null and b/images/instagramfake.png differ diff --git a/images/instagramori.png b/images/instagramori.png new file mode 100644 index 0000000..1a1b64d Binary files /dev/null and b/images/instagramori.png differ diff --git a/images/itau.png b/images/itau.png new file mode 100644 index 0000000..1ac66eb Binary files /dev/null and b/images/itau.png differ diff --git a/images/itaufake.png b/images/itaufake.png new file mode 100644 index 0000000..0643f81 Binary files /dev/null and b/images/itaufake.png differ diff --git a/images/itauori.png b/images/itauori.png new file mode 100644 index 0000000..63f6f60 Binary files /dev/null and b/images/itauori.png differ diff --git a/images/jerry.png b/images/jerry.png deleted file mode 100644 index bae49da..0000000 Binary files a/images/jerry.png and /dev/null differ diff --git a/images/jessica.png b/images/jessica.png deleted file mode 100644 index 08c6fe4..0000000 Binary files a/images/jessica.png and /dev/null differ diff --git a/images/logo.png b/images/logo.png deleted file mode 100644 index 309bf44..0000000 Binary files a/images/logo.png and /dev/null differ diff --git a/images/logo2.png b/images/logo2.png new file mode 100644 index 0000000..9f2115b Binary files /dev/null and b/images/logo2.png differ diff --git a/images/meeseeks.png b/images/meeseeks.png deleted file mode 100644 index b5f465f..0000000 Binary files a/images/meeseeks.png and /dev/null differ diff --git a/images/morty.png b/images/morty.png deleted file mode 100644 index 70027bc..0000000 Binary files a/images/morty.png and /dev/null differ diff --git a/images/nubank.png b/images/nubank.png new file mode 100644 index 0000000..e7f7eab Binary files /dev/null and b/images/nubank.png differ diff --git a/images/nubankfake.png b/images/nubankfake.png new file mode 100644 index 0000000..2b38697 Binary files /dev/null and b/images/nubankfake.png differ diff --git a/images/nubankori.png b/images/nubankori.png new file mode 100644 index 0000000..b6fd882 Binary files /dev/null and b/images/nubankori.png differ diff --git a/images/pessoa-passaro.png b/images/pessoa-passaro.png deleted file mode 100644 index 0d6357c..0000000 Binary files a/images/pessoa-passaro.png and /dev/null differ diff --git a/images/pickle-rick.png b/images/pickle-rick.png deleted file mode 100644 index 6ae588c..0000000 Binary files a/images/pickle-rick.png and /dev/null differ diff --git a/images/rick.png b/images/rick.png deleted file mode 100644 index beeb96a..0000000 Binary files a/images/rick.png and /dev/null differ diff --git a/images/scroopy.png b/images/scroopy.png deleted file mode 100644 index abf83fb..0000000 Binary files a/images/scroopy.png and /dev/null differ diff --git a/images/summer.png b/images/summer.png deleted file mode 100644 index 2da8ab6..0000000 Binary files a/images/summer.png and /dev/null differ diff --git a/index.html b/index.html index 18f28a2..fd7f5ce 100644 --- a/index.html +++ b/index.html @@ -9,8 +9,8 @@ - - Memory Game | Login + + Phish Or Legit | Login @@ -18,13 +18,15 @@
- logo - brain icon -

Memory Game

+ logo +

JOGO DA MEMÓRIA

+

Jogo sugerido para a participação da turma e fonte de auxílio na conclusão do artigo
+ "A AMEAÇA OFERECIDA POR GOLPES E CRIMES CIBERNÉTICOS PRESENTES NA WEB: PHISHING".

Comunicação e Expressão + - 1º Semestre ADS - FATEC SOROCABA

- - + +
diff --git a/js/game.js b/js/game.js index 860aac8..0cdb686 100644 --- 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 }) => { diff --git a/pages/bb.html b/pages/bb.html new file mode 100644 index 0000000..ec4b3ae --- /dev/null +++ b/pages/bb.html @@ -0,0 +1,115 @@ + + + + + + + + Banco do Brasil + + + +

Qual destes sites é o correto?


+
+ + +

+
+ + +

+

+ + + + + \ No newline at end of file diff --git a/pages/face.html b/pages/face.html new file mode 100644 index 0000000..036b2ae --- /dev/null +++ b/pages/face.html @@ -0,0 +1,115 @@ + + + + + + + + Facebook + + + +

Qual destes sites é o correto?


+
+ + +

+
+ + +

+

+ + + + + + \ No newline at end of file diff --git a/pages/game.html b/pages/game.html index 69da1eb..fb3118d 100644 --- a/pages/game.html +++ b/pages/game.html @@ -5,11 +5,12 @@ + - Memory Game + Phish or Legit @@ -18,6 +19,7 @@
Tempo: 00 + Desisto
diff --git a/pages/insta.html b/pages/insta.html new file mode 100644 index 0000000..0ab1980 --- /dev/null +++ b/pages/insta.html @@ -0,0 +1,114 @@ + + + + + + + + Instagram + + + +

Qual destes sites é o correto?


+
+ + +
+ + +

+

+ + + + + \ No newline at end of file diff --git a/pages/itau.html b/pages/itau.html new file mode 100644 index 0000000..6a90f77 --- /dev/null +++ b/pages/itau.html @@ -0,0 +1,114 @@ + + + + + + + + Itaú + + + +

Qual destes sites é o correto?


+
+ + +

+
+ + +

+

+ + + + + \ No newline at end of file diff --git a/pages/nubank.html b/pages/nubank.html new file mode 100644 index 0000000..e822d04 --- /dev/null +++ b/pages/nubank.html @@ -0,0 +1,115 @@ + + + + + + + + Nubank + + + +

Qual destes sites é o correto?


+
+ + +

+
+ + + +

+ + + + + \ No newline at end of file