diff options
| -rw-r--r-- | cards.js | 106 | ||||
| -rw-r--r-- | customize.css | 31 | ||||
| -rw-r--r-- | index.html | 83 |
3 files changed, 220 insertions, 0 deletions
diff --git a/cards.js b/cards.js new file mode 100644 index 0000000..409647a --- /dev/null +++ b/cards.js @@ -0,0 +1,106 @@ +// You can add new scenarios, but make sure that there is exactly... +// * 1 hackerCard per scenario +// * 3 playerCards per scenario + +var scenarios = [ + { + hackerCard : { + description : "I set up a fake Wi-Fi station to steal people’s email and track them online.", + power : 4, + }, + playerCards : [ + { + description : "I never use public wifi networks.", + power : 5, + }, + { + description : "I browse the web, but I never do any personal business on a public wifi network.", + power : 3, + }, + { + description : "I connect to any wifi network I can use in public.", + power : 1, + } + ] + }, + { + hackerCard : { + description : "I sent a fake email from your bank asking for your account details.", + power : 3, + }, + playerCards : [ + { + description : "I checked the email address - the message didn’t come from my bank.", + power : 5, + }, + { + description : "I never give out personal information in response to an email.", + power : 4, + }, + { + description : "I sent the details you asked for so you could check on my account.", + power : 1, + } + ] + }, + { + hackerCard : { + description : "I figured out where you live from all the personal information you share on social media.", + power : 3, + }, + playerCards : [ + { + description : "I never share personal information on my social media accounts.", + power : 5, + }, + { + description : "I keep my accounts private so only my friends can see them.", + power : 4, + }, + { + description : "I tag everything so my friends always know what I’m doing.", + power : 1, + } + ] + }, + { + hackerCard : { + description : "I watched you type your password and hacked your account.", + power : 2, + }, + playerCards : [ + { + description : "I use different passwords for all of my other accounts.", + power : 4, + }, + { + description : "I changed my password on all of my accounts because they are the same.", + power : 2, + }, + { + description : "I deleted that account and started a new one. ", + power : 1, + } + ] + }, + { + hackerCard : { + description : "I looked at your browsing history on your phone to see what you do online.", + power : 2, + }, + playerCards : [ + { + description : "I always use a private browser that never keeps my history.", + power : 4, + }, + { + description : "I set my browser to delete my history every time I quit. ", + power : 3, + }, + { + description : "I never clear my browser history because I don’t like typing in big web addresses.", + power : 1, + } + ] + } +];
\ No newline at end of file diff --git a/customize.css b/customize.css new file mode 100644 index 0000000..d670b53 --- /dev/null +++ b/customize.css @@ -0,0 +1,31 @@ +/* Change the colors in this stylesheet to customize the game. */ + +/* Player Styles */ + +.player-color { + background-color: #2a79d0; +} + +.player-area { + background-color: #0d3158; + background-image: url(images/chip.svg); +} + +.player-card .power { + background-image: url(images/shield.svg); +} + +/* Hacker Styles */ + +.hacker-color { + background-color: #ce3d20; +} + +.hacker-area { + background-color: #3c1912; + background-image: url(images/chip.svg); +} + +.hacker-card .power { + background-image: url(images/skull.svg); +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..f41f01e --- /dev/null +++ b/index.html @@ -0,0 +1,83 @@ +<html> + <head> + <title>Privacy Card Game</title> + <link rel="icon" type="image/png" sizes="128x128" href="images/favicon.png"> + <link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet"> + <link rel="stylesheet" href="styles/style.css" type="text/css"> + <link rel="stylesheet" href="customize.css" type="text/css"> + <script src="cards.js" type="text/javascript"></script> + </head> + + <body> + <div class="game-board"> + + <div class="hacker-area"> + + <h1> + <strong>HACKER CARDS</strong> <br/> Choose the best card to stop the hackers' attack + </h1> + + <div class="stats hacker-stats"> + <div class="life-bar"> + <div class="life-left hacker-color"></div> + </div> + <div class="life-total"></div> + + <div class="thumbnail">👹</div> + <div class="name">Hacker</div> + </div> + + <div class="card hacker-card hacker-color"> + <div class="text"></div> + <div class="power"></div> + </div> + + </div> + + <div class="player-area"> + + <div class="stats player-stats"> + <div class="life-bar"> + <div class="life-left player-color"></div> + </div> + <div class="life-total"></div> + + <div class="thumbnail">😎</div> + <div class="name">You</div> + </div> + + <div class="card player-card player-color"> + <div class="text"></div> + <div class="power"></div> + </div> + + <div class="card player-card player-color"> + <div class="text"></div> + <div class="power"></div> + </div> + + <div class="card player-card player-color"> + <div class="text"></div> + <div class="power"></div> + </div> + + <button class="start-game" onClick="startGame()">Go Online!</button> + <button class="next-turn" onClick="playTurn()">Keep Surfing!</button> + </div> + </div> + + <div class="license"> + A game by <strong>Lucifer</strong> + </div> + + <div class="winner-section"> + <div> + <span class="winner-message">You got hacked!</span> + <button class="restart" onClick="restartGame()">Play Again</button> + </div> + </div> + + <script src="scripts/script.js" type="text/javascript"></script> + + </body> +</html>
\ No newline at end of file |