integrated shared header into all components

src/app/findword/findword.component.css

@@ -7,70 +7,6 @@ body {
 }
 
 
-
-/* Header */
-.header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0vw 2vw;
-  background-color: #009688;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-  width: 100%;
-  position: sticky;
-  top: 0;
-}
-
-.logo img {
-  max-width: 5vw;
-  height: auto;
-  background: #fff;
-  border-radius: 1vw;
-  margin: 0.5vw;
-}
-
-
-.header-title h1 {
-  font-size: 3vw;
-  color: #fff;
-  margin: 0;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-
-.home-btn img {
-  width: 5vw;
-}
-
-  .home-btn img:hover {
-    transform: scale(1.1);
-  }
-
-/* Background */
-.imgbgcontainter {
-  background-image: url(/assets/images/grammar-bg.png);
-  background-size: auto;
-  background-position: center;
-  background-attachment: fixed;
-  width: 100%;
-  height: 100%;
-}
-
-.grammar-bg {
-  position: absolute;
-  top: 10%;
-  left: 0;
-  width: 100%;
-  height: auto;
-  max-height: calc(100vh - 100px);
-  object-fit: fill;
-  z-index: -1;
-  opacity: 0.2;
-}
-
 /* Responsive Card */
 .card1 {
   background: #fff;

src/app/findword/findword.component.html

@@ -1,20 +1,6 @@
 <div class="full-container">
-  <div class="header-container">
-    <div class="logo">
-      <a (click)="goToHome()" routerLink="/home" class="brand-link">
-        <img src="assets/images/pykara-logo.png" alt="Pykara Logo" />
-      </a>
-      <span class="product-name">Py-Learn</span>
-    </div>
-    <div class="header-title">
-      <h1>Find the Word</h1>
-    </div>
-    <div class="home-btn">
-      <a (click)="goToHome()" routerLink="/home">
-        <img src="assets/images/home.png" alt="Home" class="home-icon" />
-      </a>
-    </div>
-  </div>
+  <app-header [title]="'Find the Word'"></app-header>
+
 
   <img src="assets/images/grammar-bg.png" alt="Chat Background" class="grammar-bg" />
 

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

@@ -15,54 +15,6 @@ body {
 
 
 
-.header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0vw 2vw;
-  background-color: #009688;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow */
-  width: 100%;
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-.logo img {
-  max-width: 5vw;
-  height: auto;
-  background: #fff;
-  border-radius: 1vw;
-  margin: 0.5vw;
-}
-
-.header-title {
-  text-align: center;
-  flex: 1;
-}
-
-  .header-title h1 {
-    font-size: 3vw;
-    color: #fff;
-    margin: 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-.home-btn img {
-  width: 5vw;
-}
-
-  .home-btn img:hover {
-    transform: scale(1.1);
-  }
-
-/* ==================================================*/
-
-
-
 
 
 /* Header Section Styling */
@@ -170,17 +122,6 @@ body {
 
 
 
-.grammar-bg {
-  position: absolute;
-  top: 10%;
-  left: 0;
-  width: 100%;
-  height: auto;
-  max-height: calc(100vh - 100px);
-  object-fit: fill;
-  z-index: -1;
-  opacity: 0.2;
-}
 
 
 

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

@@ -5,27 +5,8 @@
   </div>
 
 
-  <div class="header-container">
-    <!-- Logo Section -->
-    <div class="logo">
-      <a (click)="goToHome()" routerLink="/home" class="brand-link">
-        <img src="assets/images/pykara-logo.png" alt="Pykara Logo" />
-      </a>
-      <span class="product-name">Py-Learn</span>
-    </div>
-
-    <!-- Title Section -->
-    <div class="header-title">
-      <h1>Grammar Questions</h1>
-    </div>
+  <app-header [title]="'Grammar Questions'"></app-header>
 
-    <!-- Home Button Section -->
-    <div class="home-btn">
-      <a (click)="goToHome()" routerLink="/home">
-        <img src="assets/images/home.png" alt="Home" class="home-icon" />
-      </a>
-    </div>
-  </div>
 
   <img src="assets/images/grammar-bg.png" alt="Chat Background" class="grammar-bg" />
 

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

@@ -5,6 +5,7 @@ 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
 
 
 interface QuestionWithAnswer {
@@ -20,7 +21,7 @@ interface Question {
 @Component({
   selector: 'app-generate-questions',
   standalone: true,
-  imports: [FormsModule, CommonModule], // Ensure the necessary imports are listed
+  imports: [FormsModule, CommonModule, HeaderComponent], // Add HeaderComponent here
   templateUrl: './generate-questions.component.html',
   styleUrls: ['./generate-questions.component.css']
 })

src/app/listen/listen.component.css

@@ -11,69 +11,6 @@ body, html {
 }
 
 
-.header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0vw 2vw;
-  background-color: #009688;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow */
-  width: 100%;
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-.logo img {
-  max-width: 5vw;
-  height: auto;
-  background: #fff;
-  border-radius: 1vw;
-  margin: 0.5vw;
-}
-
-.header-title {
-  text-align: center;
-  flex: 1;
-}
-
-  .header-title h1 {
-    font-size: 3vw;
-    color: #fff;
-    margin: 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-.home-btn img {
-  width: 5vw;
-}
-
-  .home-btn img:hover {
-    transform: scale(1.1);
-  }
-
-img {
-  width: 100%;
-  display: block;
-}
-
-
-.grammar-bg {
-  position: absolute;
-  top: 10%;
-  left: 0;
-  width: 100%;
-  height: auto;
-  max-height: calc(100vh - 100px);
-  object-fit: fill;
-  z-index: -1;
-  opacity: 0.2;
-}
-
-
 
 
 /* Listen Card Style */

src/app/listen/listen.component.html

@@ -3,23 +3,8 @@
   <div class="loader"></div>
 </div>
 
-<!-- Header Section -->
-<div class="header-container">
-  <div class="logo">
-    <a (click)="goToHome()" routerLink="/home" class="brand-link">
-      <img src="assets/images/pykara-logo.png" alt="Pykara Logo" />
-    </a>
-    <span class="product-name">Py-Learn</span>
-  </div>
-  <div class="header-title">
-    <h1>Listen</h1>
-  </div>
-  <div class="home-btn">
-    <a (click)="goToHome()" routerLink="/home">
-      <img src="assets/images/home.png" alt="Home" class="home-icon" />
-    </a>
-  </div>
-</div>
+<app-header [title]="'Listen'"></app-header>
+
 
 <!-- Background image (optional) -->
 <img src="assets/images/listen.png" alt="Chat Background" class="grammar-bg" />

src/app/reading/reading.component.css

@@ -8,63 +8,6 @@
   height: 100%
 }
 
-.header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 2vw;
-  background-color: #009688;
-  box-shadow: 0 4px 8px rgba(0,0,0,.2);
-  width: 100%;
-  position: sticky;
-  top: 0;
-  z-index: 1
-}
-
-.logo img {
-  max-width: 5vw;
-  height: auto;
-  background: #fff;
-  border-radius: 1vw;
-  margin: .5vw
-}
-
-.header-title {
-  text-align: center;
-  flex: 1
-}
-
-  .header-title h1 {
-    font-size: 3vw;
-    color: #fff;
-    margin: 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-.home-btn img {
-  width: 5vw;
-  cursor: pointer
-}
-
-  .home-btn img:hover {
-    transform: scale(1.1)
-  }
-
-.grammar-bg {
-  position: absolute;
-  top: 10%;
-  left: 0;
-  width: 100%;
-  height: auto;
-  max-height: calc(100vh - 100px);
-  object-fit: fill;
-  z-index: -1;
-  opacity: .2
-}
-
 .main-container {
   width: 85%;
   margin: 5vh auto;

src/app/reading/reading.component.html

@@ -1,23 +1,6 @@
 <div class="reading-container">
-  <!-- Header -->
-  <div class="header-container">
-    <div class="logo">
-      <a (click)="goToHome()" routerLink="/home" class="brand-link">
-        <img src="assets/images/pykara-logo.png" alt="Pykara Logo" />
-      </a>
-      <span class="product-name">Py-Learn</span>
-    </div>
-
-    <div class="header-title">
-      <h1>Reading</h1>
-    </div>
+  <app-header [title]="'Reading'"></app-header>
 
-    <div class="home-btn">
-      <a (click)="goToHome()" routerLink="/home">
-        <img src="assets/images/home.png" alt="Home" class="home-icon" />
-      </a>
-    </div>
-  </div>
 
   <!-- Background -->
   <img src="assets/images/grammar-bg.png" alt="Background" class="grammar-bg" />

src/app/vocabulary-builder/vocabulary-builder.component.css

@@ -1 +1 @@
-
  margin-top: 1rem;
  padding: 1rem;
  background-color: #f0f4f8;
  border-radius: 8px;
  border: 1px solid #cdd5df;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0vw 2vw;
  background-color: #009688;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow */
  width: 100%;
  position: sticky;
  top: 0;
  max-width: 5vw;
  height: auto;
  background: #fff;
  border-radius: 1vw;
  margin: 0.5vw;
  text-align: center;
  flex: 1;
  .header-title h1 {
    font-size: 3vw;
    color: #fff;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  width: 5vw;
  .home-btn img:hover {
    transform: scale(1.1);
  }
  background-image: url(/assets/images/grammar-bg.png);
  background-size: auto;
  background-position: center;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 100px);
  object-fit: fill;
  z-index: -1;
  opacity: 0.2;
  background: rgba(255, 255, 255, 0.9);
  width: 80vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 66vh;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 4vw;
  gap: 2vw;
  background-color: #fff;
  border: 10px solid #009688;
  border-radius: 1vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  margin: 2vw auto;
  max-width: 90%;
  display: flex;
  align-items: center;
  gap: 4vw;
  width: 50%;
  font-size: 2.5vw;
  font-weight: 800;
  color: #006780;
  margin-bottom: 20px;
  text-align: center;
  width: 100%;
  height: auto;
  border-radius: 10px;
  width: 66%;
  .description-container p {
    font-size: 1.4vw;
    margin-bottom: 30px;
    text-align: justify;
  }
  position: relative;
  border-radius: 0.5vw;
  font-size: 1.5vw;
  transition: background-color 0.3s;
  width: auto;
  font-weight: bold;
  background-color: #006780;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 5vw;
  height: 2.9vw;
  margin-top: 1.5vw;
  .validate-button:hover {
    background-color: #bdc3c7;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  }
  .validate-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
  position: absolute;
  border-radius: 0.5vw;
  font-size: 1.5vw;
  transition: background-color 0.3s;
  font-weight: bold;
  background-color: #006780;
  border: none;
  color: white;
  left: 50%;
  text-decoration: none;
  transform: translateX(-50%);
  padding: 0.5vw;
  .submit-button:hover {
    background-color: #bdc3c7;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  }
  .submit-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
  background: rgba(255, 255, 255, 0.9);
  padding: 2vw;
  border-radius: 1vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  width: 80vw;
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 70vh;
  border: 10px solid #009688;
  background-color: #fff;
  .card2 .content-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
  }
  max-width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 50%;
  .word-container h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin-top: 2.7vw;
  }
  width: 45%;
  text-align: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  margin-right: 4vw;
  font-size: 1.2vw;
  margin-bottom: 20px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ccc;
  color: white;
  padding: 12px 24px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.2rem;
  margin: 10px;
  width: 80%;
  transition: background-color 0.3s ease;
  background-color: #ffffff;
  color: #333;
  border: 2px solid #000000;
  font-size: 1.1vw;
  border-radius: 3vw;
  transition: all 0.3s ease;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: -1px 1vw 0.5vw rgb(0 0 0 / 13%);
  height: 100%;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  width: 21vw;
  /* Make state classes override :hover */
  .option-btn.correct,
  .option-btn.incorrect,
  .option-btn.selected {
    position: relative; /* keeps layout stable */
  }
    /* Correct = green (state wins even on hover) */
    .option-btn.correct,
    .option-btn.correct:hover {
      background: #e8f7ed; /* soft green */
      border-color: #22c55e; /* green-500 */
      color: #14532d; /* dark green text */
    }
    /* Incorrect = red (state wins even on hover) */
    .option-btn.incorrect,
    .option-btn.incorrect:hover {
      background: #fee2e2; /* soft red */
      border-color: #ef4444; /* red-500 */
      color: #7f1d1d; /* dark red text */
    }
    /* Selected (pre-validation) = blue (state wins even on hover) */
    .option-btn.selected,
    .option-btn.selected:hover {
      background: #e0f2fe; /* soft blue */
      border-color: #3b82f6; /* blue-500 */
      color: #0c4a6e; /* dark blue text */
    }
  /* Default hover only when no state class is present */
  .option-btn:not(.selected):not(.correct):not(.incorrect):hover {
    background: #f3f4f6; /* light grey hover */
  }
  /* Optional: disabled look still visible */
  .option-btn.disabled,
  .option-btn:disabled {
    cursor: not-allowed;
    filter: grayscale(10%);
  }
  .option-btn.picked {
    outline: 2px dashed rgba(0,0,0,0.25);
    outline-offset: 2px;
  }
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  background: rgba(0,0,0,0.06);
  background: rgba(255, 255, 255, 0.9);
  padding: 2vw;
  border-radius: 1vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  width: 80vw;
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 70vh;
  border: 10px solid #009688;
  background-color: #fff;
  list-style-type: disc;
  padding: 0 5vw;
  color: #000000;
  overflow-y: auto;
  height: 18vw;
  font-size: 1.5vw;
  margin-bottom: 30px;
  text-align: justify;
  .feedback-list1 li {
    margin-bottom: 10px;
    line-height: 1.5;
    display: list-item;
  }
  list-style-type: none !important;
  text-align: justify;
  height: 20vw;
  overflow-y: auto;
  padding: 0 3vw;
  margin-bottom: 2vw;
  font-size: 1.5vw;
  .feedback-list li {
    margin-bottom: 1vw;
    font-weight: 500;
  }
  color: green;
  color: red;
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  background: rgba(255, 255, 255, 0.9);
  padding: 2vw;
  border-radius: 1vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  width: 80vw;
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 70vh;
  border: 10px solid #009688;
  background-color: #fff;
  resize: none
  font-size: 1.8vw;
  text-align: center;
  margin-bottom: 20px;
  color: #006780;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  max-width: 600px;
  margin-bottom: 20px;
  .card4 .sentence-input-group label {
    font-weight: bold;
    text-align: left;
    width: 30%;
    font-size: 1.7vw;
  }
  .card4 .sentence-input-group .input-group {
    width: 60%;
  }
  .card4 .sentence-input-group textarea {
    width: 138%;
    height: 100%;
    font-size: 1.4rem;
    border: 2px solid #006780;
    font-family: Arial, sans-serif;
    border-radius: 8px;
    padding: 0.4vw;
  }
    .card4 .sentence-input-group textarea:focus {
      outline: none;
      border: 1px solid #007bff;
    }
  background: rgba(255, 255, 255, 0.9);
  padding: 2vw;
  border-radius: 1vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  width: 80vw;
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 70vh;
  border: 10px solid #009688;
  background-color: #fff;
  .card5 .feedback-text {
    font-size: 1.8vw;
    font-weight: 600;
    color: #333;
    margin-top: 1vw;
    word-wrap: break-word;
    max-height: 400px;
    overflow-y: auto;
    padding-left: 20px;
    padding-right: 20px;
    text-align: justify;
    margin-bottom: 1vw;
  }
  position: absolute;
  top: 1vw;
  left: 2vw;
  color: #007bff;
  font-size: 24px;
  width: 5vw;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  .back-icon:hover {
    transform: scale(1.1);
    color: #0056b3;
  }
  .back-icon img {
    width: 30px;
    height: auto;
    cursor: pointer;
  }
  position: absolute;
  top: -1vw;
  right: -1.4vw;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #009688;
  color: #0f172a;
  border: 4px solid #009688;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  z-index: 10;
  .icon-btn1:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 14px rgba(0,0,0,.22);
    background: #f7fafc;
  }
  .icon-btn1:active {
    transform: scale(0.98);
  }
  .icon-btn1 {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  font-size: 15px;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  animation: mulShdSpin 1.1s infinite ease;
  transform: translateZ(0);
  0%, 100% {
    box-shadow: 0em -3em 0em 0em #808080, 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.5), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.7);
  }
  12.5% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.7), 2.2em -2.2em 0 0em #808080, 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.5);
  }
  25% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.5), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.7), 3em 0em 0 0em #808080, 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }
  37.5% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.5), 3em 0em 0 0em rgba(128, 128, 128, 0.7), 2.2em 2.2em 0 0em #808080, 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }
  50% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.5), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.7), 0em 3em 0 0em #808080, -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }
  62.5% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.5), 0em 3em 0 0em rgba(128, 128, 128, 0.7), -2.2em 2.2em 0 0em #808080, -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }
  75% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.5), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.7), -3em 0em 0 0em #808080, -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }
  87.5% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.5), -3em 0em 0 0em rgba(128, 128, 128, 0.7), -2.2em -2.2em 0 0em #808080;
  }
+
  margin-top: 1rem;
  padding: 1rem;
  background-color: #f0f4f8;
  border-radius: 8px;
  border: 1px solid #cdd5df;
  background: rgba(255, 255, 255, 0.9);
  width: 80vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 66vh;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 4vw;
  gap: 2vw;
  background-color: #fff;
  border: 10px solid #009688;
  border-radius: 1vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  margin: 2vw auto;
  max-width: 90%;
  display: flex;
  align-items: center;
  gap: 4vw;
  width: 50%;
  font-size: 2.5vw;
  font-weight: 800;
  color: #006780;
  margin-bottom: 20px;
  text-align: center;
  width: 100%;
  height: auto;
  border-radius: 10px;
  width: 66%;
  .description-container p {
    font-size: 1.4vw;
    margin-bottom: 30px;
    text-align: justify;
  }
  position: relative;
  border-radius: 0.5vw;
  font-size: 1.5vw;
  transition: background-color 0.3s;
  width: auto;
  font-weight: bold;
  background-color: #006780;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 5vw;
  height: 2.9vw;
  margin-top: 1.5vw;
  .validate-button:hover {
    background-color: #bdc3c7;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  }
  .validate-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
  position: absolute;
  border-radius: 0.5vw;
  font-size: 1.5vw;
  transition: background-color 0.3s;
  font-weight: bold;
  background-color: #006780;
  border: none;
  color: white;
  left: 50%;
  text-decoration: none;
  transform: translateX(-50%);
  padding: 0.5vw;
  .submit-button:hover {
    background-color: #bdc3c7;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  }
  .submit-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
  background: rgba(255, 255, 255, 0.9);
  padding: 2vw;
  border-radius: 1vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  width: 80vw;
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 70vh;
  border: 10px solid #009688;
  background-color: #fff;
  .card2 .content-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
  }
  max-width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 50%;
  .word-container h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin-top: 2.7vw;
  }
  width: 45%;
  text-align: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  margin-right: 4vw;
  font-size: 1.2vw;
  margin-bottom: 20px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ccc;
  color: white;
  padding: 12px 24px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.2rem;
  margin: 10px;
  width: 80%;
  transition: background-color 0.3s ease;
  background-color: #ffffff;
  color: #333;
  border: 2px solid #000000;
  font-size: 1.1vw;
  border-radius: 3vw;
  transition: all 0.3s ease;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: -1px 1vw 0.5vw rgb(0 0 0 / 13%);
  height: 100%;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  width: 21vw;
  /* Make state classes override :hover */
  .option-btn.correct,
  .option-btn.incorrect,
  .option-btn.selected {
    position: relative; /* keeps layout stable */
  }
    /* Correct = green (state wins even on hover) */
    .option-btn.correct,
    .option-btn.correct:hover {
      background: #e8f7ed; /* soft green */
      border-color: #22c55e; /* green-500 */
      color: #14532d; /* dark green text */
    }
    /* Incorrect = red (state wins even on hover) */
    .option-btn.incorrect,
    .option-btn.incorrect:hover {
      background: #fee2e2; /* soft red */
      border-color: #ef4444; /* red-500 */
      color: #7f1d1d; /* dark red text */
    }
    /* Selected (pre-validation) = blue (state wins even on hover) */
    .option-btn.selected,
    .option-btn.selected:hover {
      background: #e0f2fe; /* soft blue */
      border-color: #3b82f6; /* blue-500 */
      color: #0c4a6e; /* dark blue text */
    }
  /* Default hover only when no state class is present */
  .option-btn:not(.selected):not(.correct):not(.incorrect):hover {
    background: #f3f4f6; /* light grey hover */
  }
  /* Optional: disabled look still visible */
  .option-btn.disabled,
  .option-btn:disabled {
    cursor: not-allowed;
    filter: grayscale(10%);
  }
  .option-btn.picked {
    outline: 2px dashed rgba(0,0,0,0.25);
    outline-offset: 2px;
  }
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  background: rgba(0,0,0,0.06);
  background: rgba(255, 255, 255, 0.9);
  padding: 2vw;
  border-radius: 1vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  width: 80vw;
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 70vh;
  border: 10px solid #009688;
  background-color: #fff;
  list-style-type: disc;
  padding: 0 5vw;
  color: #000000;
  overflow-y: auto;
  height: 18vw;
  font-size: 1.5vw;
  margin-bottom: 30px;
  text-align: justify;
  .feedback-list1 li {
    margin-bottom: 10px;
    line-height: 1.5;
    display: list-item;
  }
  list-style-type: none !important;
  text-align: justify;
  height: 20vw;
  overflow-y: auto;
  padding: 0 3vw;
  margin-bottom: 2vw;
  font-size: 1.5vw;
  .feedback-list li {
    margin-bottom: 1vw;
    font-weight: 500;
  }
  color: green;
  color: red;
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  background: rgba(255, 255, 255, 0.9);
  padding: 2vw;
  border-radius: 1vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  width: 80vw;
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 70vh;
  border: 10px solid #009688;
  background-color: #fff;
  resize: none
  font-size: 1.8vw;
  text-align: center;
  margin-bottom: 20px;
  color: #006780;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  max-width: 600px;
  margin-bottom: 20px;
  .card4 .sentence-input-group label {
    font-weight: bold;
    text-align: left;
    width: 30%;
    font-size: 1.7vw;
  }
  .card4 .sentence-input-group .input-group {
    width: 60%;
  }
  .card4 .sentence-input-group textarea {
    width: 138%;
    height: 100%;
    font-size: 1.4rem;
    border: 2px solid #006780;
    font-family: Arial, sans-serif;
    border-radius: 8px;
    padding: 0.4vw;
  }
    .card4 .sentence-input-group textarea:focus {
      outline: none;
      border: 1px solid #007bff;
    }
  background: rgba(255, 255, 255, 0.9);
  padding: 2vw;
  border-radius: 1vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  width: 80vw;
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 70vh;
  border: 10px solid #009688;
  background-color: #fff;
  .card5 .feedback-text {
    font-size: 1.8vw;
    font-weight: 600;
    color: #333;
    margin-top: 1vw;
    word-wrap: break-word;
    max-height: 400px;
    overflow-y: auto;
    padding-left: 20px;
    padding-right: 20px;
    text-align: justify;
    margin-bottom: 1vw;
  }
  position: absolute;
  top: 1vw;
  left: 2vw;
  color: #007bff;
  font-size: 24px;
  width: 5vw;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  .back-icon:hover {
    transform: scale(1.1);
    color: #0056b3;
  }
  .back-icon img {
    width: 30px;
    height: auto;
    cursor: pointer;
  }
  position: absolute;
  top: -1vw;
  right: -1.4vw;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #009688;
  color: #0f172a;
  border: 4px solid #009688;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  z-index: 10;
  .icon-btn1:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 14px rgba(0,0,0,.22);
    background: #f7fafc;
  }
  .icon-btn1:active {
    transform: scale(0.98);
  }
  .icon-btn1 {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  font-size: 15px;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  animation: mulShdSpin 1.1s infinite ease;
  transform: translateZ(0);
  0%, 100% {
    box-shadow: 0em -3em 0em 0em #808080, 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.5), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.7);
  }
  12.5% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.7), 2.2em -2.2em 0 0em #808080, 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.5);
  }
  25% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.5), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.7), 3em 0em 0 0em #808080, 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }
  37.5% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.5), 3em 0em 0 0em rgba(128, 128, 128, 0.7), 2.2em 2.2em 0 0em #808080, 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }
  50% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.5), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.7), 0em 3em 0 0em #808080, -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }
  62.5% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.5), 0em 3em 0 0em rgba(128, 128, 128, 0.7), -2.2em 2.2em 0 0em #808080, -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }
  75% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.5), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.7), -3em 0em 0 0em #808080, -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }
  87.5% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.5), -3em 0em 0 0em rgba(128, 128, 128, 0.7), -2.2em -2.2em 0 0em #808080;
  }

src/app/vocabulary-builder/vocabulary-builder.component.html

@@ -1,23 +1,8 @@
 <div class="imgbgcontainter">
   <div class="vocabulary-builder-container">
 
-    <!-- Header -->
-    <div class="header-container">
-      <div class="logo">
-        <a (click)="goToHome()" routerLink="/home" class="brand-link">
-          <img src="assets/images/pykara-logo.png" alt="Pykara Logo" />
-        </a>
-        <span class="product-name">Py-Learn</span>
-      </div>
-      <div class="header-title">
-        <h1>Vocabulary Builder</h1>
-      </div>
-      <div class="home-btn">
-        <a (click)="goToHome()" routerLink="/home">
-          <img src="assets/images/home.png" alt="Home" class="home-icon" />
-        </a>
-      </div>
-    </div>
+    <app-header [title]="'Vocabulary Builder'"></app-header>
+
 
     <!-- Background Image -->
     <img src="assets/images/grammar-bg.png" alt="Chat Background" class="grammar-bg" />

src/app/writing/writing.component.css

@@ -1,72 +1,4 @@
 
-/*header container */
-
-
-.header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0vw 2vw;
-  background-color: #009688;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-  width: 100%;
-  position: fixed;
-  top: 0;
-  z-index: 1;
-}
-
-.logo img {
-  max-width: 5vw;
-  height: auto;
-  background: #fff;
-  border-radius: 1vw;
-  margin: 0.5vw;
-}
-
-.header-title {
-  text-align: center;
-  flex: 1;
-}
-
-  .header-title h1 {
-    font-size: 3vw;
-    color: #fff;
-    margin: 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-.home-btn img {
-  width: 5vw;
-}
-
-  .home-btn img:hover {
-    transform: scale(1.1);
-  }
-
-.imgbgcontainter {
-  background-image: url(/assets/images/grammar-bg.png);
-  background-size: auto;
-  background-position: center;
-  background-attachment: fixed;
-  width: 100%;
-  height: 100%;
-}
-
-.grammar-bg {
-  position: absolute;
-  top: 10%;
-  left: 0;
-  width: 100%;
-  height: auto;
-  max-height: calc(100vh - 100px);
-  object-fit: fill;
-  z-index: -1;
-  opacity: 0.2;
-}
-
 
 body {
   margin: 0;
@@ -79,13 +11,13 @@ body {
 
 .main-container {
   width: 85%;
-  margin: 18vh auto;
+  margin: 7vh auto;
   border: 9px solid #009688;
   border-radius: 1.5vw;
   background: #ffffff;
   padding: 2vw;
   box-shadow: 0 0.4vw 1vw rgba(0, 0, 0, 0.1);
-  height: 76vh;
+  height: 73vh;
 }
 
 /* Section Layouts */

src/app/writing/writing.component.html

@@ -1,20 +1,6 @@
 <!-- Header container -->
-<div class="header-container">
-  <div class="logo">
-    <a (click)="goToHome()" routerLink="/home" class="brand-link">
-      <img src="assets/images/pykara-logo.png" alt="Pykara Logo" />
-    </a>
-    <span class="product-name">Py-Learn</span>
-  </div>
-  <div class="header-title">
-    <h1>Writing Exercise</h1>
-  </div>
-  <div class="home-btn">
-    <a (click)="goToHome()" routerLink="/home">
-      <img src="assets/images/home.png" alt="Home" class="home-icon" />
-    </a>
-  </div>
-</div>
+<app-header [title]="'Writing Exercise'"></app-header>
+
 
 <!-- Background Image -->
 <img src="assets/images/grammar-bg.png" alt="Chat Background" class="grammar-bg" />
@@ -75,29 +61,29 @@
       </fieldset>
 
       <textarea [(ngModel)]="userAnswer" placeholder="Write your answer here..." (input)="checkWordCount()"></textarea>
-  <!--<div class="submit-area">
-    <button (click)="submitAnswer()" [disabled]="isSubmitDisabled || isSubmitInProgress">
-      {{ isSubmitInProgress ? 'Submitting...' : 'Submit Writing' }}
-    </button>
-    <div *ngIf="isLoaderVisible" class="loader-overlay">
-      <div class="loader"></div>
-    </div>
-  </div>-->
-
-    <div class="submit-area with-blue-tooltip">
-      <button (click)="submitAnswer()"
-              [disabled]="isSubmitDisabled || isSubmitInProgress"
-              [ngClass]="{ 'disabled-btn': isSubmitDisabled }">
-        {{ isSubmitInProgress ? 'Submitting...' : 'Submit Writing' }}
-      </button>
-      <div *ngIf="isLoaderVisible" class="loader-overlay">
-        <div class="loader"></div>
-      </div>
+      <!--<div class="submit-area">
+        <button (click)="submitAnswer()" [disabled]="isSubmitDisabled || isSubmitInProgress">
+          {{ isSubmitInProgress ? 'Submitting...' : 'Submit Writing' }}
+        </button>
+        <div *ngIf="isLoaderVisible" class="loader-overlay">
+          <div class="loader"></div>
+        </div>
+      </div>-->
+
+      <div class="submit-area with-blue-tooltip">
+        <button (click)="submitAnswer()"
+                [disabled]="isSubmitDisabled || isSubmitInProgress"
+                [ngClass]="{ 'disabled-btn': isSubmitDisabled }">
+          {{ isSubmitInProgress ? 'Submitting...' : 'Submit Writing' }}
+        </button>
+        <div *ngIf="isLoaderVisible" class="loader-overlay">
+          <div class="loader"></div>
+        </div>
 
-      <div class="blue-tooltip" *ngIf="isSubmitDisabled">
-        We need at least 10 words to enable the submit button.
+        <div class="blue-tooltip" *ngIf="isSubmitDisabled">
+          We need at least 10 words to enable the submit button.
+        </div>
       </div>
-    </div>
 
 
     </div>
@@ -105,24 +91,24 @@
 
 
   <!-- Feedback Section -->
-<div class="feedback-section" *ngIf="showFeedback">
-  <img src="assets/images/writing/back.png" alt="Go Back" class="back-icon" (click)="goBack('feedback')" />
+  <div class="feedback-section" *ngIf="showFeedback">
+    <img src="assets/images/writing/back.png" alt="Go Back" class="back-icon" (click)="goBack('feedback')" />
 
-  <div class="feedback-header">
-    <img src="assets/images/writing/feedback.png" alt="Feedback Icon"  />
-    <h3>Suggestions for Improvement</h3>
-  </div>
+    <div class="feedback-header">
+      <img src="assets/images/writing/feedback.png" alt="Feedback Icon" />
+      <h3>Suggestions for Improvement</h3>
+    </div>
 
-  <div class="feedback-box">
-    <ul>
-      <li *ngFor="let suggestion of feedbackList"> {{ suggestion }}</li>
-    </ul>
-  </div>
+    <div class="feedback-box">
+      <ul>
+        <li *ngFor="let suggestion of feedbackList"> {{ suggestion }}</li>
+      </ul>
+    </div>
 
-  <div class="try-again-button">
-    <button (click)="resetForm()">🔄 Try Another</button>
+    <div class="try-again-button">
+      <button (click)="resetForm()">🔄 Try Another</button>
+    </div>
   </div>
-</div>