| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Level 2</title> |
| <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet"> |
| <script src="https://kit.fontawesome.com/1f712cb951.js" crossorigin="anonymous"></script> |
| |
| <style> |
| html { |
| height: 100%; |
| } |
| |
| body { |
| background: #f7f7f7; |
| font-family: 'Share Tech Mono', monospace; |
| display: flex; |
| vertical-align: middle; |
| justify-content: center; |
| align-items: center; |
| height: 100%; |
| } |
| |
| #content { |
| display: inline-block; |
| margin-left: 20px; |
| } |
| |
| #levelLabel { |
| text-transform: uppercase; |
| font-size: 3em; |
| margin: 0; |
| color: #cf2c2f; |
| } |
| |
| #levelLabel:before { |
| font-family: "Font Awesome 5 Free"; |
| content: '\f00d'; |
| display: inline-block; |
| vertical-align: middle; |
| font-weight: 900; |
| padding-bottom: 10px; |
| margin-right: 10px; |
| font-size: 0.7em; |
| } |
| |
| |
| #rewards { |
| font-size: 2em; |
| } |
| |
| #statistics { |
| margin-top: 8px; |
| font-size: 1.1em; |
| } |
| |
| #statistics > p { |
| display: inline-block; |
| margin: 0 15px 0 0; |
| } |
| |
| #statistics > p > i { |
| margin-right: 5px; |
| } |
| |
| p.xp { |
| margin: 0; |
| color: #273C66; |
| display: inline; |
| } |
| |
| .fa-coins { |
| color: #ffa500; |
| } |
| |
| .fa-dizzy { |
| font-size: 9em; |
| display: inline-block; |
| color: #273C66; |
| } |
| |
| #resumeToDashboard { |
| padding: 12px 30px; |
| font-size: 1em; |
| margin-top: 10px; |
| text-transform: uppercase; |
| float: right; |
| letter-spacing: 0.05em; |
| font-family: 'Share Tech Mono', monospace; |
| background: #273C66; |
| border-radius: 3px; |
| border: none; |
| color: white; |
| cursor: pointer; |
| transition: 0.1s; |
| } |
| |
| #resumeToDashboard:hover { |
| background: #3f7fc0; |
| transition: 0.1s; |
| } |
| </style> |
| </head> |
| <body> |
| <div> |
| <div> |
| <i class="fas fa-dizzy"></i> |
| <div id="content"> |
| <p id="levelLabel">Level 3</p> |
| <div id="rewards">Game over :(</div> |
| <div id="statistics"> |
| <p id="moves"><i class="fas fa-hand-point-right"></i>3 moves</p> |
| <p id="errors"><i class="fas fa-times-circle"></i>2 errors</p> |
| <p id="time"><i class="fas fa-stopwatch"></i>243 seconds</p> |
| </div> |
| </div> |
| </div> |
| <button id="resumeToDashboard" onclick="resumeToDashboard()" class="button button1">Resume to dashboard <i |
| class="fas fa-arrow-right"></i></button> |
| </div> |
| |
| </body> |
| |
| <script> |
| window.onload = function () { |
| pageLoaded(); |
| } |
| |
| function displayResults(result){ |
| document.getElementById("levelLabel").innerHTML = result.levelLabel; |
| document.getElementById("moves").innerHTML = "<i class=\"fas fa-hand-point-right\"></i>"+result.okMoves + " move(s)"; |
| document.getElementById("errors").innerHTML = "<i class=\"fas fa-times-circle\"></i>"+result.errors + " error(s)"; |
| document.getElementById("time").innerHTML = "<i class=\"fas fa-stopwatch\"></i>"+result.timeSpent + " seconds"; |
| } |
| </script> |
| </html> |
