button component added

src/app/chat/chat.component.css

@@ -52,7 +52,7 @@
     overflow-y: auto;
     resize: none;
     padding: 8px;
-    font-size: 1rem;
+    font-size: 1vw;
     line-height: 1.2;
     border: 1px solid rgb(93, 145, 195);
     border-radius: 8px;
@@ -454,7 +454,6 @@
   gap: 10px;
   align-items: center;
   margin-right: 15px;
-  
 }
 
 /* Disabled state for toggle buttons */
@@ -517,7 +516,6 @@
   gap: 18px;
   align-items: center;
   margin-right: 15px;
- 
 }
 
 .toggle-btn.modern {
@@ -709,26 +707,11 @@
   padding: 1vw;
   z-index: 2001;
   overflow: visible; /* Allow button to overflow outside modal */
-  border: 10px solid #009688; /* Four-side border */
+  border: 10px solid var(--main-accent-color); /* Four-side border */
   box-sizing: border-box;
 }
 
-.close-icon {
-  position: absolute;
-  top: 1vw;
-  right: 1vw;
-  background: none;
-  border: none;
-  font-size: 2vw;
-  color: #2b6296;
-  cursor: pointer;
-  z-index: 2010;
-  transition: color 0.2s;
-}
 
-.user-guide-close-icon:hover {
-  color: #009688;
-}
 
 /* Overlay for closing on outside click */
 .user-guide-overlay {
@@ -793,51 +776,6 @@
 
 
 
-/* Close button styles */
-.user-guide-close-icon {
-  display: block;
-  position: absolute;
-  top: 1vw;
-  right: 1vw;
-  background: none;
-  border: none;
-  font-size: 2vw;
-  color: #2b6296;
-  cursor: pointer;
-  z-index: 2010;
-  transition: color 0.2s;
-}
-
-  .user-guide-close-icon:hover {
-    color: #009688;
-  }
-
-.user-guide-close-icon {
-  font-size: 6vw;
-  top: 2vw;
-  right: 2vw;
-}
-
-
-
-/* Close button styles */
-.user-guide-close-icon {
-  display: block;
-  position: absolute;
-  top: 1vw;
-  right: 1vw;
-  background: none;
-  border: none;
-  font-size: 2vw;
-  color: #2b6296;
-  cursor: pointer;
-  z-index: 2010;
-  transition: color 0.2s;
-}
-
-  .user-guide-close-icon:hover {
-    color: #009688;
-  }
 
 /* Overlay for closing on outside click */
 .user-guide-overlay {
@@ -860,40 +798,15 @@
       width: 6vw;
       height: 6vw;
     }
-
-  .user-guide-close-icon {
-    font-size: 6vw;
-    top: 2vw;
-    right: 2vw;
-  }
 }
 
 
 .user-guide-close-icon {
-  position: absolute;
   top: -22px; /* Move above modal, adjust as needed */
   right: -22px; /* Move to the right outside modal, adjust as needed */
-  background: #009688; /* Match border color */
-  border: none;
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2vw;
-  color: black;
-  cursor: pointer;
-  z-index: 2010;
-  box-shadow: 0 2px 8px rgba(93,145,195,0.18);
-  transition: background 0.2s, color 0.2s;
-  ;
 }
 
-  .user-guide-close-icon:hover {
-    background: white;
-    color: black;
-  }
+
 
 
 @keyframes fadeInScale {

src/app/generate-questions/generate-questions.component.css

@@ -1,8 +1,3 @@
-/* General Styling */
-/*@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&family=Open+Sans:wght@600&display=swap');*/
-
-
-
 body {
   font-family: 'Roboto', sans-serif;
   background: linear-gradient(to bottom, #f8f9fa, #e0e6ed);
@@ -11,13 +6,6 @@ body {
   margin: 0;
 }
 
-
-
-
-
-
-
-/* Header Section Styling */
 .header-section {
   display: flex;
   align-items: end;
@@ -28,36 +16,6 @@ body {
   justify-content: space-between;
 }
 
-
-/* Buttons Styling */
-.btn-generate,
-.reset-btn {
-  padding: 1vw 2vw;
-  font-size: 1.6rem;
-  border: none;
-  border-radius: 0.5vw;
-  cursor: pointer;
-  background-color: #5c67f2;
-  color: white;
-  font-family: "Open Sans", sans-serif;
-  font-weight: bold;
-  transition: all 0.3s ease;
-}
-
-
-
-  .btn-generate:disabled,
-  .reset-btn:disabled {
-    background-color: #cccccc;
-    color: #666666;
-    cursor: not-allowed;
-  }
-
-
-/*================================*/
-
-
-/* Error Popup Styling */
 .error-popup {
   position: fixed;
   top: 0;
@@ -79,6 +37,7 @@ body {
   text-align: center;
   max-width: 40vw;
   width: 80%;
+  border: 10px solid var(--main-accent-color);
 }
 
   .error-popup-content p {
@@ -87,63 +46,26 @@ body {
     margin-bottom: 1vw;
   }
 
-.close-popup-btn {
-  padding: 0.8vw 1.5vw;
-  font-size: 1.2vw;
-  background-color: #007bff;
-  color: #fff;
-  border: none;
-  border-radius: 0.5vw;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-  .close-popup-btn:hover {
-    background-color: #0056b3;
-  }
-
-
-
-
-
-
-
-
-/* Full-Screen Chat Container */
 .app-container {
   display: flex;
   flex-direction: column;
-  height: 100vh; /* Full viewport height */
-  width: 100%; /* Full viewport width */
-  /*background: linear-gradient(to bottom right, #fefefe, #f3f4f6);*/ /* Soft white-gray gradient */
+  height: 100vh;
+  width: 100%;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   background-color: rgb(35 34 32 / 43%);
 }
 
-
-
-
-
-
-
-
-/* Use the `src` of the hidden image */
-.app-container::before {
-  content: "";
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-image: attr(data-bg); /* This doesn't work in CSS alone */
-  background-size: cover;
-  background-position: center;
-  z-index: -1; /* Push behind other content */
-}
-
-
-
-
+  .app-container::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center;
+    z-index: -1;
+  }
 
 .input-box {
   padding: 15px;
@@ -154,12 +76,10 @@ body {
   box-shadow: 0 0.2vw 0.5vw rgba(0, 0, 0, 0.1);
 }
 
-
   .input-box:focus-visible {
     outline: 2px solid #5d5959;
   }
 
-
 .full-content {
   display: flex;
   padding: 10px;
@@ -167,9 +87,8 @@ body {
   margin-top: 1vw;
 }
 
-/* Questions Section */
 .questions-container {
-  position: relative; /* important for centering inside this box */
+  position: relative;
   max-height: 100%;
   overflow: hidden;
   margin: 1vw;
@@ -177,18 +96,15 @@ body {
   background-color: #f9f9f9;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  /* background: #9cd2d529;*/
   background: #e3f2fd;
   padding: 1vw 1vw 1vw 2vw;
   width: 100%;
   box-shadow: 0 .4vw 1vw rgba(0, 0, 0, .1);
-  border: 9px solid #009688;
+  border: 9px solid var(--main-accent-color);
 }
 
-
 .quesHintbtn {
   display: flex;
-  /* align-content: flex-end; */
   justify-content: space-between;
 }
 
@@ -207,52 +123,41 @@ body {
 
 .answer-input {
   margin-left: 5px;
-  width: auto; /* Adjust as needed */
+  width: auto;
   max-width: 100%;
   padding: 5px;
   border: 1px solid #ccc;
   border-radius: 4px;
 }
 
-
-.btn-submit:disabled {
-  background-color: #ccc;
-  cursor: not-allowed;
-}
-
 .section-title {
   font-size: 2.5rem;
   color: #4ca1af;
   font-family: 'Open Sans', sans-serif;
 }
 
-
 .questions-list {
   list-style: none;
   padding: 0;
   margin: 1.4vw;
 }
 
-
-
 .question-wrapper {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
-
 .question-text {
   font-size: 1.3vw;
   font-family: 'Roboto', sans-serif;
   line-height: 1.5;
 }
 
-
 .answer-input {
   width: 100%;
   max-width: 203px;
-  border: 1px solid #999; /* Darker shade for the border */
+  border: 1px solid #999;
   border-radius: 8px;
   font-family: "Roboto", sans-serif;
   font-size: 1.6rem;
@@ -273,7 +178,7 @@ body {
 }
 
   .answer-input:focus {
-    border-color: #5c67f2; /* Keep focus effect */
+    border-color: #5c67f2;
     outline: none;
   }
 
@@ -283,8 +188,6 @@ body {
     font-style: italic;
   }
 
-
-/* Submit Button */
 .submit-container {
   position: relative;
   right: 6vw;
@@ -292,36 +195,6 @@ body {
   justify-content: flex-end;
 }
 
-.btn-submit {
-  padding: 15px 30px;
-  font-size: 1.6rem;
-  font-family: "Open Sans", sans-serif;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  font-weight: bold;
-  /*  background: #52a8b4;*/
-
-  background: #297782;
-}
-
-  .btn-submit:disabled {
-    background-color: #ccc;
-    cursor: not-allowed;
-  }
-
-  .btn-submit:hover:not(:disabled) {
-    transform: scale(1.05);
-  }
-
-
-
-
-
-
-/* Fade-in animation */
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -333,16 +206,14 @@ body {
 }
 
 .warning-label {
-  color: red; /* Make the text red */
-  text-align: center; /* Center the text horizontally */
-  font-size: 1.5em; /* Adjust font size for readability */
-  margin-top: 10px; /* Add spacing from the input box above */
-  display: block; /* Ensure the text is displayed as a block element */
-  width: 100%; /* Center the text within the container */
+  color: red;
+  text-align: center;
+  font-size: 1.5em;
+  margin-top: 10px;
+  display: block;
+  width: 100%;
 }
 
-
-
 .congratulation-message {
   text-align: center;
   margin: 50px auto;
@@ -359,10 +230,9 @@ body {
   position: relative;
   z-index: 1;
   box-shadow: 0 .4vw 1vw rgba(0, 0, 0, .1);
-  border: 9px solid #009688;
+  border: 9px solid var(--main-accent-color);
 }
 
-
   .congratulation-message h2 {
     color: #4ca1af;
     margin-bottom: 15px;
@@ -385,73 +255,12 @@ body {
   }
 }
 
-
 .congratulation-message p {
   color: #333;
   margin-bottom: 20px;
   font-size: 1.8vw;
 }
 
-.congratulation-message button {
-  padding: 20px 40px;
-  font-size: 1.7em;
-  background: #006780;
-  color: white;
-  border: none;
-  border-radius: 10px;
-  cursor: pointer;
-  margin-top: 20px;
-  transition: all 0.3s ease;
-  font-family: 'Open Sans', sans-serif;
-  font-weight: bold;
-}
-
-  .congratulation-message button:hover {
-    background-color: #006780;
-    transform: scale(1.03);
-  }
-
-
-
-
-
-.hint-toggle-btn {
-  background-color: #5c67f2;
-  color: white;
-  padding: 12px 18px;
-  font-size: 1.5rem;
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 50px;
-  height: 50px;
-}
-
-  .hint-toggle-btn:hover {
-    background-color: #3c4ec5;
-    transform: scale(1.1);
-  }
-
-  .hint-toggle-btn:focus {
-    outline: none;
-    box-shadow: 0 0 8px rgba(0, 0, 255, 0.6);
-  }
-
-  .hint-toggle-btn::before {
-    content: "i";
-    font-weight: bold;
-    font-size: 2rem;
-    color: white;
-  }
-
-
-
-
-
 .side-menu {
   position: fixed;
   top: 0;
@@ -471,7 +280,6 @@ body {
     right: 0;
   }
 
-
 .side-menu-header {
   display: flex;
   justify-content: space-between;
@@ -509,9 +317,6 @@ body {
   text-align: justify;
 }
 
-
-
-
 @keyframes glow {
   0% {
     box-shadow: 0 0 10px #ff5c5c;
@@ -526,18 +331,17 @@ body {
   }
 }
 
-/* For screen resolutions near 1366px width */
 @media (max-width: 1366px) {
   body {
-    font-size: 1.4rem; /* Adjust font size */
+    font-size: 1.4rem;
   }
 
   .header-section {
-    padding: 8px 15px; /* Adjust padding for smaller height */
+    padding: 8px 15px;
   }
 
   .logo-container {
-    width: 10vw; /* Adjust logo width */
+    width: 10vw;
   }
 
   .back-button {
@@ -547,37 +351,31 @@ body {
   }
 
   .input-box {
-    width: 250px; /* Smaller input width */
+    width: 250px;
     font-size: 1.4rem;
   }
 
   .btn-generate, .reset-btn {
-    padding: 10px 20px; /* Adjust button size */
-    font-size: 1.4rem; /* Smaller font size */
+    padding: 10px 20px;
+    font-size: 1.4rem;
   }
 
   .current-level {
-    font-size: 1rem; /* Smaller font size */
+    font-size: 1rem;
     padding: 8px 10px;
     margin: 15px 15px 0;
   }
 
   .question-text {
-    font-size: 1rem; /* Reduce question text size */
+    font-size: 1rem;
   }
 
   .answer-input {
-    width: 80%; /* Adjust width for text inputs */
+    width: 80%;
     font-size: 1.4rem;
     padding: 5px;
   }
 
-  .btn-submit {
-    padding: 12px 25px; /* Adjust size */
-    font-size: 1.4rem; /* Adjust font size */
-  }
-
-
   .side-menu {
     width: 40%;
   }
@@ -588,30 +386,28 @@ body {
     height: 45vh;
   }
 
-
     .congratulation-message h2 {
       color: #4ca1af;
       margin-bottom: 15px;
-      font-size: 2.5vw; /* Responsive font size relative to the viewport width */
-      white-space: nowrap; /* Prevent text from wrapping */
-      overflow: hidden; /* Hide overflow text */
-      text-overflow: ellipsis; /* Add ellipsis if text is too long */
-      text-align: center; /* Center the text */
+      font-size: 2.5vw;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-align: center;
     }
 
   @media (max-width: 768px) {
     .congratulation-message h2 {
-      font-size: 2vw; /* Larger font size for smaller screens */
+      font-size: 2vw;
     }
   }
 
   @media (max-width: 480px) {
     .congratulation-message h2 {
-      font-size: 3vw; /* Even larger font size for very small screens */
+      font-size: 3vw;
     }
   }
 
-
   .congratulation-message p {
     font-size: 1.4rem;
   }
@@ -622,25 +418,18 @@ body {
   }
 }
 
-
 h3 {
   font-weight: bold;
 }
 
-
-
-/* Make only the text inside the topic input appear gray */
 .topic-input[readonly] {
-  color: #999 !important; /* Light gray text */
-  opacity: 1 !important; /* Ensure text opacity remains */
-  background-color: white !important; /* Keep background normal */
-  border: 1px solid #ccc !important; /* Keep a subtle border */
-  cursor: not-allowed; /* Show disabled cursor */
+  color: #999 !important;
+  opacity: 1 !important;
+  background-color: white !important;
+  border: 1px solid #ccc !important;
+  cursor: not-allowed;
 }
 
-
-
-/* Zoom-in and zoom-out animation for hint button */
 @keyframes hint-zoom {
   0% {
     transform: scale(1);
@@ -649,43 +438,18 @@ h3 {
   50% {
     transform: scale(1.2);
   }
-  /* Slightly zoom in */
+
   100% {
     transform: scale(1);
   }
 }
 
-.hint-toggle-btn {
-  background-color: #5c67f2;
-  color: white;
-  padding: 12px 18px;
-  font-size: 1.5rem;
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 50px;
-  height: 50px;
-}
-
-  /* Apply zoom-in effect when hints are available */
-  .hint-toggle-btn.blink {
-    animation: hint-zoom 1s infinite alternate;
-  }
-
-
-/*
- 🐝 Flying Honeybee Loader */
 .loading-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  /*  background: rgba(0, 0, 0, 0.6);*/
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -696,12 +460,10 @@ h3 {
   overflow: hidden;
 }
 
-
-
 .loader {
-  font-size: 15px; /* Font size */
-  width: 1.5em; /* Width of the loader */
-  height: 1.5em; /* Height of the loader */
+  font-size: 15px;
+  width: 1.5em;
+  height: 1.5em;
   border-radius: 50%;
   position: relative;
   text-indent: -9999em;
@@ -743,25 +505,9 @@ h3 {
   }
 }
 
-
-/* Fix Generate and Reset button alignment */
-.input-section {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 10px; /* ✅ Ensure proper spacing */
-  position: relative;
-}
-
-
-
-
-
-/* Ensure the dropdown is positioned exactly below the input field */
 .suggestions-container {
   position: absolute;
-  top: 100%; /* ✅ Attach dropdown directly below input field */
+  top: 100%;
   left: 0;
   width: 100%;
   max-width: 400px;
@@ -770,14 +516,13 @@ h3 {
   border-radius: 8px;
   z-index: 10;
   overflow: hidden;
-  margin-top: 0px; /* ✅ Remove extra gap */
+  margin-top: 0px;
 }
 
-/* Dropdown Items */
 .suggestions-list {
   display: flex;
   flex-direction: column;
-  padding: 0px; /* ✅ Remove extra padding */
+  padding: 0px;
 }
 
 .suggestion-item {
@@ -786,11 +531,11 @@ h3 {
   color: #333;
   cursor: pointer;
   transition: background 0.3s ease;
-  border-bottom: 1px solid #ddd; /* ✅ Separator between items */
+  border-bottom: 1px solid #ddd;
 }
 
   .suggestion-item:last-child {
-    border-bottom: none; /* ✅ Remove bottom border from last item */
+    border-bottom: none;
   }
 
   .suggestion-item:hover {
@@ -798,89 +543,60 @@ h3 {
     font-weight: bold;
   }
 
-/* Ensure input field and buttons are in a single row */
+.answer-slot {
+  display: inline-block;
+  margin: 0 0.25vw;
+  vertical-align: middle;
+}
+
+
 .input-section {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: center;
+  gap: 10px;
+  position: relative;
 }
 
-/* Ensure buttons are next to input field */
+
 .button-group {
   display: flex;
-  gap: 0.5vw; /* ✅ Reduce spacing between buttons */
+  gap: 0.5vw;
   flex: 1;
-  justify-content: flex-start; /* ✅ Aligns buttons next to input field */
-}
-
-/* Make buttons the same height as the input field */
-.btn-generate, .reset-btn {
-  height: 3.6vw; /* ✅ Match input field height */
-  padding: 12px 20px;
-  font-size: 1.3vw;
-  font-weight: bold;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.3s ease-in-out;
-  white-space: nowrap; /* ✅ Prevent buttons from wrapping */
-}
-
-/* Button Colors */
-.btn-generate {
-  background-color: #006780;
-  color: white;
-}
-
-.reset-btn {
-  background-color: #006780;
-  color: white;
+  justify-content: flex-start;
 }
 
-  /* Hover Effects */
-  .btn-generate:hover, .reset-btn:hover {
-    transform: scale(1.05);
-    opacity: 0.9;
-  }
-
 .correct-answer {
-  color: green !important; /* Correct answer should be green */
+  color: green !important;
 }
 
 .wrong-answer {
-  color: red !important; /* Wrong answer should be red */
+  color: red !important;
 }
 
 .default {
-  color: black !important; /* Default color (black) when user is typing */
+  color: black !important;
 }
 
 .answer-input:focus {
-  outline: none; /* Optional: You can remove outline for a clean effect */
+  outline: none;
 }
 
 .wrong-answer-removed {
-  background-color: white; /* Reset the background to white after 2 seconds */
-  color: #333; /* Reset the text color */
-  border: 1px solid #ccc; /* Reset the border */
-  transition: background-color 2s ease-out; /* Smooth transition */
+  background-color: white;
+  color: #333;
+  border: 1px solid #ccc;
+  transition: background-color 2s ease-out;
 }
 
-
-
-/*progress bar css start here*/
-
-/* --- New Progress Bar Style --- */
-
 .difficulty-container {
   position: relative;
   width: 100%;
   max-width: 600px;
-  /*margin: 20px auto;*/
   height: 20px;
   background: #e0e0e0;
   border-radius: 50px;
-  /*overflow: hidden;*/
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
 }
 
@@ -904,7 +620,6 @@ h3 {
   transform: translateY(-50%);
   display: flex;
   justify-content: space-between;
-  /* z-index: 2;*/
   padding: 0 8px;
 }
 
@@ -923,7 +638,6 @@ h3 {
     transform: scale(1.3);
   }
 
-/* Tooltip above active dot */
 .level-tooltip {
   position: absolute;
   bottom: 150%;
@@ -937,11 +651,9 @@ h3 {
   border-radius: 6px;
   white-space: nowrap;
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
-  /* z-index: 5;*/
   opacity: 1;
 }
 
-  /* Tooltip arrow */
   .level-tooltip::after {
     content: '';
     position: absolute;
@@ -953,7 +665,6 @@ h3 {
     border-color: #4ca1af transparent transparent transparent;
   }
 
-/* Responsive adjustment (optional) */
 @media (max-width: 480px) {
   .level-tooltip {
     font-size: 0.65rem;
@@ -965,9 +676,6 @@ h3 {
     }
 }
 
-
-/*hint button css start here */
-/* Anchor the i button on the right side of the screen (adjust as you like) */
 .hint-anchor {
   position: fixed;
   top: 15.6vw;
@@ -975,7 +683,6 @@ h3 {
   z-index: 1101;
 }
 
-/* i button design (compact circular) */
 .hint-toggle-btn {
   width: 56px;
   height: 56px;
@@ -1003,7 +710,6 @@ h3 {
     outline-offset: 3px;
   }
 
-/* Popover: opens to the LEFT of the i button */
 .hint-popover {
   position: absolute;
   top: 11vw;
@@ -1015,11 +721,10 @@ h3 {
   border-radius: 12px;
   padding: 16px 20px;
   box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
-  animation: _ngcontent-ng-c2774789824_hint-slide-in .18s ease;
-  border: 4px solid #009688;
+  border: 10px solid var(--main-accent-color);
+  overflow-y: auto;
 }
 
-  /* Arrow pointing at the button */
   .hint-popover::before {
     content: "";
     position: absolute;
@@ -1032,37 +737,11 @@ h3 {
     box-shadow: 2px -2px 8px rgba(0,0,0,.08);
   }
 
-/* Round close (X) inside the popover */
-.hint-close {
-  position: absolute;
+.user-guide-close-icon {
   top: 8px;
   right: 10px;
-  width: 40px;
-  height: 40px;
-  border: 0;
-  border-radius: 50%;
-  background: #eeeeee;
-  color: red;
-  font-size: 2vw;
-  line-height: 0.9;
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-  transition: background .15s ease, transform .15s ease;
-  font-weight: 900;
 }
 
-  .hint-close:hover {
-    background: #e0e0e0;
-    transform: scale(1.04);
-  }
-
-  .hint-close:focus-visible {
-    outline: 3px solid rgba(0,103,128,.35);
-    outline-offset: 2px;
-  }
-
-/* List spacing */
 .hint-title {
   margin: 0 0 8px;
   font-size: 18px;
@@ -1077,15 +756,13 @@ h3 {
   margin-bottom: .5rem;
 }
 
-/* Transparent backdrop that closes on click */
 .hint-backdrop {
   position: fixed;
   inset: 0;
-  background: transparent; /* no dim; only captures outside clicks */
+  background: transparent;
   z-index: 1100;
 }
 
-/* Entrance animation */
 @keyframes hint-slide-in {
   from {
     transform: translateY(-50%) translateX(8px);
@@ -1098,7 +775,6 @@ h3 {
   }
 }
 
-/* Mobile: show popover above the button for better fit */
 @media (max-width: 640px) {
   .hint-anchor {
     right: 12px;
@@ -1122,8 +798,6 @@ h3 {
     }
 }
 
-
-/* Circular countdown */
 .ring {
   position: relative;
   width: 220px;
@@ -1137,25 +811,22 @@ h3 {
   display: block;
 }
 
-/* static track */
 .ring-track {
   fill: none;
-  stroke: rgba(15, 23, 42, 0.18); /* slate-900 @ 18% */
+  stroke: rgba(15, 23, 42, 0.18);
   stroke-width: 16;
 }
 
-/* animated arc */
 .ring-progress {
   fill: none;
-  stroke: #006780; /* accent */
+  stroke: #006780;
   stroke-width: 16;
   stroke-linecap: round;
-  transform: rotate(-90deg); /* start at 12 o’clock */
+  transform: rotate(-90deg);
   transform-origin: 50% 50%;
-  transition: stroke-dashoffset 0.1s linear; /* smooth update */
+  transition: stroke-dashoffset 0.1s linear;
 }
 
-/* big number in the center */
 .ring-number {
   position: absolute;
   inset: 0;
@@ -1166,9 +837,8 @@ h3 {
   color: #0f172a;
 }
 
-
 .global-countdown-overlay {
-  position: absolute; /* not fixed */
+  position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
@@ -1177,8 +847,6 @@ h3 {
   z-index: 20;
 }
 
-
-/* Keep overlay centered and always on top */
 :host ::ng-deep .global-countdown-overlay {
   position: fixed;
   inset: 0;
@@ -1186,10 +854,9 @@ h3 {
   place-items: center;
   background: transparent;
   pointer-events: none;
-  z-index: 2000; /* higher to avoid being covered */
+  z-index: 2000;
 }
 
-/* Frosted card so text never blends with page content */
 :host ::ng-deep .overlay-card {
   background: rgba(255,255,255,0.98);
   backdrop-filter: blur(2px);
@@ -1202,7 +869,6 @@ h3 {
   pointer-events: none;
 }
 
-/* Ensure the ring forms a stacking context for the disk/number */
 :host ::ng-deep .ring {
   position: relative;
   width: 220px;
@@ -1210,48 +876,43 @@ h3 {
   margin: 0 auto 8px;
 }
 
-/* Place the SVG above the disk, below the number */
 :host ::ng-deep .ring-svg {
   position: relative;
   z-index: 2;
 }
 
-/* ADD a white center disk behind the number (no HTML changes) */
 :host ::ng-deep .ring::before {
   content: "";
   position: absolute;
   inset: 0;
   margin: auto;
-  width: 120px; /* adjust if you scale the ring */
+  width: 120px;
   height: 120px;
   border-radius: 50%;
   background: #ffffff;
   border: 1px solid rgba(15,23,42,.08);
   box-shadow: inset 0 0 0 4px rgba(255,255,255,.9), 0 2px 10px rgba(0,0,0,.08);
-  z-index: 1; /* under number, over background */
+  z-index: 1;
 }
 
-/* Stronger, crisper number; always readable */
 :host ::ng-deep .ring-number {
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
-  z-index: 3; /* above everything in the ring */
+  z-index: 3;
   font-weight: 900;
-  font-size: 64px; /* bump if you increased ring size */
+  font-size: 64px;
   line-height: 1;
-  color: #0b1220; /* deep slate */
+  color: #0b1220;
   text-shadow: 0 0 2px #fff, 0 0 8px rgba(255,255,255,.85), 0 2px 8px rgba(0,0,0,.35);
 }
 
-/* Keep the ring thicker for visibility (optional) */
 :host ::ng-deep .ring-track,
 :host ::ng-deep .ring-progress {
-  stroke-width: 18px; /* increase if needed */
+  stroke-width: 18px;
 }
 
-/* Caption pill with high contrast */
 :host ::ng-deep .caption-pill {
   display: inline-block;
   margin-top: 10px;

src/app/generate-questions/generate-questions.component.html

@@ -1,30 +1,25 @@
 <div class="app-container">
-
   <div *ngIf="isLoading" class="loading-overlay">
     <span class="loader"></span>
   </div>
 
-
   <app-header [title]="'Grammar Questions'"></app-header>
 
-
   <img src="assets/images/grammar-bg.png" alt="Chat Background" class="grammar-bg" />
 
   <div class="header-section">
     <div class="input-section">
       <!-- Input Field & Suggestions -->
       <div class="input-wrapper">
-        <input [(ngModel)]="topic" (input)="onTopicChange()"
-               [readonly]="isTopicLocked" placeholder="Enter a Topic..."
+        <input [(ngModel)]="topic"
+               (input)="onTopicChange()"
+               [readonly]="isTopicLocked"
+               placeholder="Enter a Topic..."
                class="input-box topic-input"
                (focus)="showSuggestions = true"
-               onclick="showSuggestions = true"
+               (click)="showSuggestions = true"
                (blur)="hideSuggestions()" />
 
-
-
-
-
         <!-- Suggestions Dropdown -->
         <div *ngIf="showSuggestions && !isDropdownDisabled" class="suggestions-container">
           <div class="suggestions-list">
@@ -37,21 +32,11 @@
         </div>
       </div>
 
-
-
-      <button [disabled]="isGenerateDisabled" (click)="generateQuestions()" class="btn-generate">🚀 Generate</button>
-      <!--<button [disabled]="isResetDisabled" (click)="resetTopic()" class="reset-btn">Reset</button>-->
-      <button [disabled]="!topic || isResetDisabled" (click)="resetTopic()" class="reset-btn">Reset</button>
-
-
-
-
-
-
+      <app-button [disabled]="isGenerateDisabled" (click)="generateQuestions()">🚀 Generate</app-button>
+      <app-button [disabled]="!topic || isResetDisabled" (click)="resetTopic()">Reset</app-button>
     </div>
 
-
-    <!-- Difficulty Indicator (Remains on Right) -->
+    <!-- Difficulty Indicator -->
     <div *ngIf="isQuestionsGenerated" class="difficulty-container">
       <div class="progress-bar-fill" [style.width]="getProgressWidth()"></div>
       <div class="level-dots">
@@ -65,20 +50,17 @@
       </div>
     </div>
 
-
-
-
     <div *ngIf="error" class="error-popup">
       <div class="error-popup-content">
         <p>{{ error }}</p>
-        <button class="close-popup-btn" (click)="closeErrorPopup()">Close</button>
+        <app-button class="close-popup-btn" (click)="closeErrorPopup()">Close</app-button>
       </div>
     </div>
   </div>
 
   <!-- Main Content Section -->
   <div *ngIf="!isAllLevelsCompleted" class="full-content">
-    <div class="questions-container" *ngIf="questions.length > 0 && !isAllLevelsCompleted">
+    <div class="questions-container" *ngIf="questions.length > 0">
       <div class="quesHintbtn">
         <h2 class="section-title">📝 Questions</h2>
       </div>
@@ -87,63 +69,63 @@
         <li *ngFor="let question of questions" class="question-item">
           <div class="question-wrapper">
             <div class="question-text-wrapper">
+
+              <!-- Sentence + Answer Box -->
               <span class="question-text" *ngFor="let part of question.parts; let i = index">
                 {{ part }}
-                <span class="answer-slot">
-                  <input *ngIf="i < question.parts.length - 1"
-                         [(ngModel)]="userAnswers[question.index]"
+
+                <!-- Inline answer slot -->
+                <span class="answer-slot" *ngIf="i < question.parts.length - 1">
+                  <input [(ngModel)]="userAnswers[question.index]"
                          [readonly]="isValidationInProgress || readonlyAnswers[question.index]"
                          placeholder=""
                          class="answer-input"
                          pattern="[A-Za-z]*"
-                         (input)="onInput($event, question.index)"
+                         (input)="onInput($event, question.index); onAnswerChange(question.index)"
                          [ngClass]="{
-         'correct-answer': !isLoading && isChecked && userAnswers[question.index] === questionsWithAnswers[question.index].correctAnswer,
-         'wrong-answer': !isLoading && isChecked && userAnswers[question.index] !== questionsWithAnswers[question.index].correctAnswer
-       }"
-                         (input)="onAnswerChange(question.index)" />
-
-
-                  <div *ngIf="showGlobalCountdown" class="global-countdown-overlay" role="status" aria-live="assertive">
-                    <div class="overlay-card">
-                      <div class="ring">
-                        <svg class="ring-svg" viewBox="0 0 220 220" aria-hidden="true">
-                          <circle class="ring-track" cx="110" cy="110" r="90"></circle>
-                          <circle class="ring-progress"
-                                  cx="110" cy="110" r="90"
-                                  [attr.stroke-dasharray]="ringCircumference"
-                                  [attr.stroke-dashoffset]="ringDashoffset"></circle>
-                        </svg>
-                        <div class="ring-number">{{ globalCountdown }}</div>
-                      </div>
-                      <div class="caption-pill">{{ overlayCaption }}  {{ globalCountdown }}s</div>
-                    </div>
-                  </div>
-
-
+                      'correct-answer': !isLoading && isChecked && userAnswers[question.index] === questionsWithAnswers[question.index].correctAnswer,
+                      'wrong-answer': !isLoading && isChecked && userAnswers[question.index] !== questionsWithAnswers[question.index].correctAnswer
+                    }" />
                 </span>
 
-
               </span>
             </div>
           </div>
         </li>
       </ul>
 
+      <!-- Hints Section -->
       <ng-container *ngIf="isFirstAttemptDone && hints?.length">
         <div class="hint-anchor" (click)="$event.stopPropagation()">
-          <button type="button" class="hint-toggle-btn" aria-haspopup="dialog" [attr.aria-expanded]="isHintMenuVisible ? 'true' : 'false'" aria-controls="hintsPanel" (click)="toggleHintMenu()">
+          <button type="button" class="hint-toggle-btn"
+                  aria-haspopup="dialog"
+                  [attr.aria-expanded]="isHintMenuVisible ? 'true' : 'false'"
+                  aria-controls="hintsPanel"
+                  (click)="toggleHintMenu()">
+            💡
           </button>
 
-          <section *ngIf="isHintMenuVisible" id="hintsPanel" class="hint-popover" role="dialog" aria-modal="true" aria-label="Hints" (click)="$event.stopPropagation()">
-            <button type="button" class="hint-close" aria-label="Close hints" (click)="closeHints()">
+          <section *ngIf="isHintMenuVisible"
+                   id="hintsPanel"
+                   class="hint-popover"
+                   role="dialog"
+                   aria-modal="true"
+                   aria-label="Hints"
+                   (click)="$event.stopPropagation()">
+
+            <button type="button"
+                    class="user-guide-close-icon"
+                    aria-label="Close hints"
+                    (click)="closeHints()">
               ×
             </button>
 
             <h3 class="hint-title">Hints</h3>
+
             <ul class="hint-list" role="list">
               <ng-container *ngFor="let hint of hints; let i = index">
-                <li *ngIf="hint && hint.trim() !== '' && userAnswers[i] !== questionsWithAnswers[i]?.correctAnswer" class="hint-item">
+                <li *ngIf="hint && hint.trim() !== '' && userAnswers[i] !== questionsWithAnswers[i]?.correctAnswer"
+                    class="hint-item">
                   <strong>Hint for Question {{ i + 1 }}:</strong> {{ hint }}
                 </li>
               </ng-container>
@@ -156,19 +138,43 @@
     </div>
   </div>
 
-  <div class="submit-container" *ngIf="isQuestionsGenerated && !isAllLevelsCompleted">
-    <button [disabled]="!areAllAnswersFilled() || isChecked"
-            (click)="checkAllAnswers()"
-            class="btn-submit">
+  <!-- Validate Button -->
+  <div class="submit-container"
+       *ngIf="isQuestionsGenerated && !isAllLevelsCompleted">
+    <app-button [disabled]="!areAllAnswersFilled() || isChecked"
+                (click)="checkAllAnswers()">
       Validate Answers
-    </button>
+    </app-button>
+  </div>
+
+  <!-- Global Countdown Overlay (ONLY ONCE) -->
+  <div *ngIf="showGlobalCountdown"
+       class="global-countdown-overlay"
+       role="status"
+       aria-live="assertive">
+
+    <div class="overlay-card">
+      <div class="ring">
+        <svg class="ring-svg" viewBox="0 0 220 220" aria-hidden="true">
+          <circle class="ring-track" cx="110" cy="110" r="90"></circle>
+          <circle class="ring-progress"
+                  cx="110" cy="110" r="90"
+                  [attr.stroke-dasharray]="ringCircumference"
+                  [attr.stroke-dashoffset]="ringDashoffset"></circle>
+        </svg>
+        <div class="ring-number">{{ globalCountdown }}</div>
+      </div>
+
+      <div class="caption-pill">
+        {{ overlayCaption }} {{ globalCountdown }}s
+      </div>
+    </div>
   </div>
 
-  <!-- Congratulatory Message -->
+  <!-- Completion Message -->
   <div *ngIf="isAllLevelsCompleted" class="congratulation-message">
     <h2>🎉 Congratulations! You have completed all levels! 🎉</h2>
     <p>Ready to start over and improve even more?</p>
-    <button (click)="stopConfettiAndReset()">Start Over</button>
+    <app-button (click)="stopConfettiAndReset()">Start Over</app-button>
   </div>
-
 </div>

src/app/generate-questions/generate-questions.component.ts

@@ -5,7 +5,8 @@ import { GenerateQuestionsService } from './generate-questions.service';
 import { Router } from '@angular/router';
 import confetti from 'canvas-confetti';
 import { ChangeDetectorRef } from '@angular/core';
-import { HeaderComponent } from '../shared/header/header.component'; // Import HeaderComponent
+import { HeaderComponent } from '../shared/header/header.component';
+import { ButtonComponent } from '../shared/button/button.component'; 
 
 
 interface QuestionWithAnswer {
@@ -21,7 +22,7 @@ interface Question {
 @Component({
   selector: 'app-generate-questions',
   standalone: true,
-  imports: [FormsModule, CommonModule, HeaderComponent], // Add HeaderComponent here
+  imports: [FormsModule, CommonModule, HeaderComponent, ButtonComponent], 
   templateUrl: './generate-questions.component.html',
   styleUrls: ['./generate-questions.component.css']
 })
@@ -217,7 +218,7 @@ export class GenerateQuestionsComponent {
     this.validated = false;
     this.currentDifficulty = "basic";
     this.error = "";
-    this.isGenerateDisabled = false;
+    this.isGenerateDisabled = true;
     this.isResetDisabled = true;
     this.showSuggestions = false;
     this.showLevelTooltip = false;
@@ -557,7 +558,7 @@ export class GenerateQuestionsComponent {
   hideSuggestions(): void {
     setTimeout(() => {
       this.showSuggestions = false;
-    }, 200);
+    }, 150);
   }
 
   processHints(hints: string[]) {

src/app/shared/button/button.component.css

@@ -0,0 +1,23 @@
+button {
+  background-color: #006780;
+  color: white;
+  border: none;
+  padding: 15px 32px;
+  font-size: 1.3vw;
+  border-radius: 0.5vw;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.3s;
+  font-weight: bold;
+}
+
+button:disabled {
+  background: #bdbdbd;
+  cursor: not-allowed;
+}
+
+button:hover:not(:disabled) {
+  background-color: #18788f;
+  transform: scale(1.05);
+}
+
+

src/app/shared/button/button.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { NgClass } from '@angular/common';
+
+@Component({
+  selector: 'app-button',
+  standalone: true,
+  imports: [NgClass],
+  template: `
+    <button [type]="type" [ngClass]="class" [disabled]="disabled">
+      <ng-content></ng-content>
+    </button>
+  `,
+  styleUrls: ['./button.component.css']
+})
+export class ButtonComponent {
+  @Input() type: 'button' | 'submit' | 'reset' = 'button';
+  @Input() class = '';
+  @Input() disabled = false;
+}

src/styles.css

@@ -7,6 +7,11 @@
 @import '@angular/material/prebuilt-themes/indigo-pink.css';
 
 /* -------------------- Custom Fonts -------------------- */
+
+:root {
+  --main-accent-color: #009688;
+}
+
 @font-face {
   font-family: 'Super Cartoon';
   src: url('assets/font/Super Cartoon.ttf') format('truetype');
@@ -92,6 +97,7 @@ body {
   overflow-x: hidden;
 }
 
+/*background image for all the component */
 
 .imgbgcontainter {
   background-image: url(/assets/images/grammar-bg.png);
@@ -117,38 +123,53 @@ body {
 
 
 
-.logo {
-  display: flex;
-  align-items: center;
-  gap: 1vw;
+.mat-mdc-dialog-surface.mdc-dialog__surface {
+  border-radius: 1vw !important;
 }
 
+.cdk-global-scrollblock {
+  overflow: hidden;
+}
 
-.brand-link {
+/*overall close icon button color change on hover in user guide modal*/
+.user-guide-close-icon {
+  position: absolute;
+  background: #009688;
+  border: none;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
   display: flex;
   align-items: center;
-  gap: 0.6vw; 
-  text-decoration: none;
+  justify-content: center;
+  font-size: 2vw;
+  color: black;
+  cursor: pointer;
+  z-index: 2010;
+  box-shadow: 0 2px 8px rgba(93, 145, 195, 0.18);
+  transition: background 0.2s, color 0.2s;
 }
 
-.product-name {
-  color: #fff;
-  font-size: 2vw; 
-  letter-spacing: 0.5px;
-  
-  font-family: Amonk_Outline;
-  line-height: 1;
-}
-
-.brand-link:hover .product-name {
-  opacity: 0.9;
-}
 
-.mat-mdc-dialog-surface.mdc-dialog__surface {
-  border-radius: 1vw !important;
-}
+  .user-guide-close-icon:hover {
+    background: white;
+    color: black;
+    border: 3px solid #009688;
+  }
 
-.cdk-global-scrollblock {
-  overflow: hidden;
-}
 
+/*back arrow button*/
+.back-btn {
+  position: absolute;
+  top: 1vw;
+  left: 1vw;
+  transform: translateY(-50%);
+  cursor: pointer;
+  padding: 0 1rem;
+  transition: transform 0.3s;
+  width: 4.5vw;
+}
+
+  .back-btn:hover {
+    transform: translateY(-50%) scale(1.1);
+  }