compscreen.md

layout	none
title	Computer Screen Close Up
author	Emma
permalink	/compscreen

Back

Close Reset

<script src="gravity_game/gravityscript.js"></script>

Close Reset

Email Phishing Game

Start

Legitimate Email Phishing Email

<script src="phishing_game/phishingscript.js"></script>

Password Game

Start

Check

• At least 8 characters
• At least one uppercase letter
• At least one lowercase letter
• At least one number
• At least one special character

0:00

Restart

×

You met all the requirements, your password's:

-

-

<script src="password_game/passwordscript.js"></script> Close

<script> var backBtn = document.getElementById("back-btn"); function goBack() { window.location.href = '{{site.baseurl}}/insidehouse'; } const gravityBtn = document.getElementById('gravityBtn'); const phishingBtn = document.getElementById('phishingBtn'); const passwordBtn = document.getElementById('passwordBtn'); const closeGBtn = document.getElementById('closeGModal'); const gmodal = document.getElementById('g-modal'); const closePhishBtn = document.getElementById('closePhishModal'); const phishmodal = document.getElementById('phish-modal'); const closePassBtn = document.getElementById('closePassModal'); const passmodal = document.getElementById('pass-modal'); //gravity popup gravityBtn.addEventListener("click", () => { gmodal.classList.add("open"); }); closeGBtn.addEventListener("click", () => { gmodal.classList.remove("open"); }); //phishing game popup phishingBtn.addEventListener("click", () => { phishmodal.classList.add("open"); }); closePhishBtn.addEventListener("click", () => { phishmodal.classList.remove("open"); }); //password game popup passwordBtn.addEventListener("click", () => { passmodal.classList.add("open"); }); closePassBtn.addEventListener("click", () => { passmodal.classList.remove("open"); }); function startPhish() { document.getElementById("phishing-container").style = "display:block;"; document.getElementById("startPhish").style = "display:none;"; } </script> <style> @import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap'); * { font-family: "DotGothic16", sans-serif; box-sizing: border-box; } .legitBtn { background-color: green; font-size: 23px; border-radius: 10px; position: absolute; bottom: 190px; left: 650px; } .phishingButton { background-color: red; font-size: 23px; border-radius: 10px; position: absolute; bottom: 190px; right: 650px; } .container { height: 100%; width: 100%; } .backBtn:hover { background-color: #ddd; } .backBtn{ border: 3px solid black; cursor: pointer; font-size: 20px; border-radius: 10px; position: absolute; left: 20px; top: 20px; } body { /* background-image: url("{{site.baseurl}}/images/blankScreenWide.png");*/ background-image: url("https://raw.githubusercontent.com/Codemaxxers/codemaxxerFrontend/main/game/img/pb2.jpeg"); background-repeat: repeat; background-size: auto; background-position: center; /* optional, to center the image */ height: 25vh; margin-bottom: 30px; background-size: 300px; } /* pop up change positioning*/ .g-modal, .pass-modal, .phish-modal { background-color: none; opacity: 0; position: fixed; top:0px; left: 55px; right: 0; bottom: 250px; transition: all 0.3s ease-in-out; z-index: -1; display: flex; align-items: center; justify-content: center; } .g-modal.open { opacity: 1; z-index: 999; } .screen_img { border: 5px solid black; width: 1550; position: absolute; top: 10%; left: 9%; } .pass-modal.open { opacity: 1; z-index: 999; } .phish-modal.open { opacity: 1; z-index: 999; } /* pop up change size*/ .modal-inner { background-color: white; border-radius: 2px; padding: 40px 25px; text-align: center; width: 1002px; height: 521px; } #popup-window { position: fixed; width: 70%; height: 70%; background: white; border: 1px solid black; padding: 10px; margin: auto; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; display: none; } /* the invisible button*/ .gravityBtn { width: 135px; height: 135px; position: absolute; left: 31%; top:190%; } .phishingBtn { width: 175px; height: 120px; position: absolute; left: 47%; top:190%; } .passwordBtn { width: 140px; height: 180px; position: absolute; left: 65.7%; top:170%; } h1 { position: absolute; top: 120px; left: 35%; text-align: center; font-size: 60px; color: black; } h2, h3, p { color: black; } .closeGBtn, .closePassBtn, .closePhishBtn{ position: absolute; top: 140px; left: 75%; } .playAgainBtnG { position: absolute; top: 140px; left: 72%; } .playAgainBtnP { position: absolute; top: 140px; left: 72%; } .restart_button { position: absolute; top: 140px; left: 69%; } #phishing-container { display: none; } </style>