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 @@
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 @@
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");
+ }
}
}