diff --git a/Quiz App Master/app.css b/Quiz App Master/app.css index e78aa52..ff93d31 100644 --- a/Quiz App Master/app.css +++ b/Quiz App Master/app.css @@ -125,3 +125,50 @@ input { input::placeholder { color: #aaa; } +.end-container { + text-align: center; + padding: 2rem; + max-width: 600px; + margin: 0 auto; +} + +.score-container { + background: #f8f9fa; + border-radius: 10px; + padding: 2rem; + margin: 2rem 0; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.score-text { + font-size: 1.5rem; + font-weight: bold; + margin-bottom: 1rem; +} + +.correct-answers, .percentage { + font-size: 1.2rem; + margin: 0.5rem 0; +} + +#feedbackMessage { + font-size: 1.3rem; + margin-top: 1.5rem; + color: #2c3e50; + font-weight: bold; +} + +button { + background: #3498db; + color: white; + border: none; + padding: 0.8rem 1.5rem; + font-size: 1.1rem; + border-radius: 5px; + cursor: pointer; + transition: background 0.3s; +} + +button:hover { + background: #2980b9; +} diff --git a/Quiz App Master/game.css b/Quiz App Master/game.css index c8c3e24..f2bf437 100644 --- a/Quiz App Master/game.css +++ b/Quiz App Master/game.css @@ -59,9 +59,10 @@ #progressBarFull { height: 3.4rem; background-color: #56a5eb; - width: 0%; +#timer { + font-size: 3.5rem; + color: #56a5eb; } - /* LOADER */ #loader { border: 1.6rem solid white; @@ -79,4 +80,20 @@ 100% { transform: rotate(360deg); } +#category-selection { + text-align: center; +} +#category-select { + width: 30rem; + margin-bottom: 2rem; + padding: 1.5rem; + font-size: 1.8rem; + border: 0.1rem solid #56a5eb; + background-color: white; + cursor: pointer; +} +#category-select:hover { + box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5); + transform: translateY(-0.1rem); + transition: transform 150ms; } diff --git a/Quiz App Master/game.html b/Quiz App Master/game.html index 044c033..9afe034 100644 --- a/Quiz App Master/game.html +++ b/Quiz App Master/game.html @@ -10,7 +10,17 @@
-
+
+

Select Category

+ + +