diff --git a/Dark/game.css b/Dark/game.css index d7a3331..add8ce6 100644 --- a/Dark/game.css +++ b/Dark/game.css @@ -59,6 +59,10 @@ font-weight: 900; } +.alert { + animation: bounceTimer 1.2s infinite ease-in-out; +} + .hud-prefix { text-align: center; font-size: 2rem; @@ -92,14 +96,37 @@ animation: spin 2s linear infinite; } + +@keyframes bounceTimer { + + 0%, + 100% { + transform: scale(1); + } + + 25% { + transform: scale(1.5); + } + + 50% { + transform: scale(1); + } + + 75% { + transform: scale(1.5); + } +} + @keyframes spin { 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } } + #question { margin-bottom: 0px; position: relative; @@ -110,38 +137,45 @@ .container { padding: 20px; } + #hud { position: relative; bottom: 6em; } + #question { position: relative; bottom: 1em; } + .choice-container { position: relative; top: 1em; } } + @media screen and (max-width: 1024px) { .container { padding: 40px; } + #hud { position: relative; bottom: 6em; } + #question { position: relative; bottom: 1em; } + .choice-container { position: relative; top: 0.5em; } } -footer{ +footer { position: relative; display: flex; width: 100%; @@ -149,7 +183,7 @@ footer{ align-items: center; } -.next_btn{ +.next_btn { background-color: #56a5eb; height: 4rem; border: none; @@ -158,6 +192,7 @@ footer{ position: relative; color: white; } + .next_btn:hover { cursor: pointer; box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5); diff --git a/Dark/game.html b/Dark/game.html index 953ef77..590c762 100644 --- a/Dark/game.html +++ b/Dark/game.html @@ -24,7 +24,7 @@
Time Left
-
15
+
15
diff --git a/Dark/game.js b/Dark/game.js index 1ebebee..7aa1724 100644 --- a/Dark/game.js +++ b/Dark/game.js @@ -174,6 +174,13 @@ function startTimer(time) { choices.children[i].classList.add("disabled"); } } + if(time <5) + { + document.getElementById("timer").classList.add("alert"); + } + else{ + document.getElementById("timer").classList.remove("alert"); + } } } diff --git a/Light/game.css b/Light/game.css index a358dcf..f376a8d 100644 --- a/Light/game.css +++ b/Light/game.css @@ -93,6 +93,30 @@ animation: spin 2s linear infinite; } +.alert { + animation: bounceTimer 1.2s infinite ease-in-out; +} + +@keyframes bounceTimer { + + 0%, + 100% { + transform: scale(1); + } + + 25% { + transform: scale(1.5); + } + + 50% { + transform: scale(1); + } + + 75% { + transform: scale(1.5); + } +} + @keyframes spin { 0% { transform: rotate(0deg); @@ -151,7 +175,7 @@ } } -footer{ +footer { position: relative; display: flex; width: 100%; @@ -159,7 +183,7 @@ footer{ align-items: center; } -.next_btn{ +.next_btn { background-color: #56a5eb; height: 4rem; border: none; diff --git a/Light/game.html b/Light/game.html index 953ef77..590c762 100644 --- a/Light/game.html +++ b/Light/game.html @@ -24,7 +24,7 @@
Time Left
-
15
+
15
diff --git a/Light/game.js b/Light/game.js index 1ebebee..7aa1724 100644 --- a/Light/game.js +++ b/Light/game.js @@ -174,6 +174,13 @@ function startTimer(time) { choices.children[i].classList.add("disabled"); } } + if(time <5) + { + document.getElementById("timer").classList.add("alert"); + } + else{ + document.getElementById("timer").classList.remove("alert"); + } } }