add pronragupgrade

src/app/app.module.ts

@@ -29,6 +29,7 @@ import { FooterComponent } from './footer/footer.component';
 import { ButtonComponent } from './shared/button/button.component';
 import { PronunciationVideoComponent } from './pronunciationvideo/pronunciationvideo.component';
 import { PronunciationRaggComponent } from './pronunciationragg/pronunciationragg.component';
+import { PronunciationRagUpgradeComponent } from './pronunciationragupgrade/pronunciationragupgrade.component';
 
 
 @NgModule({
@@ -40,7 +41,8 @@ import { PronunciationRaggComponent } from './pronunciationragg/pronunciationrag
     RootRedirectComponent,
     PronunciationComponent,
     PronunciationVideoComponent,
-    PronunciationRaggComponent
+    PronunciationRaggComponent,
+    PronunciationRagUpgradeComponent
   ],
   imports: [
     BrowserModule,

src/app/home/home.component.html

@@ -35,6 +35,11 @@
                 Pronunciation Trainer Rag
               </a>
             </li>
+            <li>
+              <a href="#" (click)="openPronunciationRagUpgrade(); $event.preventDefault()" role="button" aria-pressed="false">
+                Pronunciation Trainer Rag Upgrade
+              </a>
+            </li>
             <li><a class="nav-link--disabled" routerLink="/personality-improvement" routerLinkActive="active-link">Personality Improvement</a></li>
             <li><a class="nav-link--disabled" routerLink="/body-language-improvement" routerLinkActive="active-link">Body Language Improvement</a></li>
           </ul>

src/app/home/home.component.ts

@@ -7,6 +7,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { PronunciationComponent } from '../pronunciation/pronunciation.component';
 import { PronunciationVideoComponent } from '../pronunciationvideo/pronunciationvideo.component';
 import { PronunciationRaggComponent } from '../pronunciationragg/pronunciationragg.component';
+import { PronunciationRagUpgradeComponent } from '../pronunciationragupgrade/pronunciationragupgrade.component';
 
 @Component({
   selector: 'app-home',
@@ -190,4 +191,13 @@ export class HomeComponent implements AfterViewInit, OnInit, OnDestroy {
       disableClose: true
     });
   }
+
+  openPronunciationRagUpgrade(): void {
+    const dialogRef = this.dialog.open(PronunciationRagUpgradeComponent, {
+      width: '90vw',
+      maxWidth: '95vw',
+      height: '85vh',
+      disableClose: true
+    });
+  }
 }

src/app/pronunciationragupgrade/pronunciationragupgrade.component.css

@@ -0,0 +1,920 @@
+:host {
+  display: block;
+  /*font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;*/
+  font-family: Raleway, Roboto, "Helvetica Neue", sans-serif;
+}
+
+/* Page background */
+.pp-page {
+  height: 85vh;
+  /* background: #e9f7f6;*/
+  padding: 28px 24px 18px;
+  box-sizing: border-box;
+  border: 7px solid #3aaea8;
+  border-radius: 1vw;
+}
+
+/* Header */
+.pp-header {
+  text-align: center;
+  margin-bottom: 18px;
+}
+
+  .pp-header h1 {
+    margin: 0;
+    font-size: 42px;
+    font-weight: 800;
+    color: #3aaea8;
+    letter-spacing: 0.3px;
+  }
+
+.pp-sub {
+  margin-top: 6px;
+  color: #6b7f7e;
+  font-size: 15px;
+  position: relative;
+}
+
+.pp-tooltip {
+  margin-left: 8px;
+  display: inline-block;
+  background: #ffffff;
+  border: 1px solid #d8eeee;
+  color: #2f6f6b;
+  padding: 6px 10px;
+  border-radius: 14px;
+  font-size: 12px;
+  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
+}
+
+/* Main 3 columns */
+.pp-main {
+  display: flex;
+  gap: 1vw;
+  align-items: start;
+  justify-content: space-around;
+}
+
+/* LEFT */
+.pp-left {
+  display: flex;
+  justify-content: center;
+}
+
+.word-card {
+  width: 22vw;
+  height: 34vw;
+  background: #e9f7f6;
+  border-radius: 18px;
+  padding: 22px 18px 26px;
+  text-align: center;
+  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
+  border: 3px dashed #3aaea8;
+  gap: 0.5vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.word-img-wrap {
+  width: 20vw;
+  height: 20vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+  .word-img-wrap img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 1vw;
+  }
+
+.word-text {
+  font-size: 3vw;
+  font-weight: 800;
+  color: #1f2b2a;
+}
+
+.phonetic-pill {
+  color: #3aaea8;
+  font-size: 1.5vw;
+  font-weight: 600;
+}
+
+.audio-img {
+  width: 4.8vw;
+  cursor: pointer;
+}
+/* CENTER */
+.pp-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+  position: relative;
+}
+
+.teacher-frame {
+  /* width: 240px;
+  height: 210px;
+  border-radius: 18px;
+  padding: 12px;
+  background: #e7f4f3;
+  border: 2px dashed #b9dedb;
+  display: flex;
+  align-items: center;
+  justify-content: center;*/
+  width: 22vw;
+  height: 33vw;
+  background: #e9f7f6;
+  border-radius: 18px;
+  padding: 22px 18px 26px;
+  text-align: center;
+  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
+  border: 3px dashed #3aaea8;
+}
+
+  .teacher-frame img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 12px;
+    background: #ffffff;
+  }
+
+/* Listen button */
+.listen-btn {
+  border: none;
+  background: #49b6ae;
+  color: #ffffff;
+  padding: 12px 18px;
+  border-radius: 12px;
+  font-weight: 700;
+  font-size: 16px;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
+}
+
+  .listen-btn:active {
+    transform: scale(0.99);
+  }
+
+.listen-ico {
+  font-size: 18px;
+}
+
+/* Record circle */
+.rec-circle {
+  width: 92px;
+  height: 92px;
+  border-radius: 50%;
+  border: none;
+  background: #f07b48;
+  color: #ffffff;
+  cursor: pointer;
+  /* box-shadow: 0 12px 22px rgba(0,0,0,0.12);*/
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* transition: transform 0.08s ease, filter 0.2s ease;*/
+  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.4);
+  transition: all 0.3s ease;
+}
+
+  .rec-circle:active {
+    transform: scale(0.98);
+  }
+
+  .rec-circle.recording {
+    filter: brightness(0.95);
+    animation: recPulse 1s infinite;
+  }
+
+@keyframes recPulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(240,123,72,1);
+  }
+
+  70% {
+    box-shadow: 0 0 0 18px rgba(240,123,72,0);
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 rgba(240,123,72,0);
+  }
+}
+
+.rec-inner {
+  text-align: center;
+  line-height: 1.1;
+}
+
+.mic {
+  font-size: 22px;
+  margin-bottom: 4px;
+}
+
+.rec-text {
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.6px;
+}
+
+/* RIGHT */
+.pp-right {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: column;
+  gap: 18vw;
+}
+
+/* little connector dots */
+.connector {
+  display: flex;
+  flex-direction: column;
+  gap: 2vw;
+}
+
+  .connector span {
+    width: 34px;
+    height: 10px;
+    border-radius: 999px;
+    background: #98d8d4;
+    opacity: 0.6;
+  }
+
+/* feedback card */
+.feedback-card {
+  width: 15vw;
+  background: #9edfd9;
+  border-radius: 16px;
+  padding: 22px 22px 24px;
+  box-shadow: 0 12px 22px rgba(0,0,0,0.08);
+  height: 15vw;
+}
+
+.feedback-title {
+  font-size: 18px;
+  font-weight: 800;
+  color: #205f5a;
+  letter-spacing: 0.6px;
+  margin-bottom: 8px;
+}
+
+.feedback-body {
+  background: transparent;
+}
+
+.feedback-muted {
+  color: #2c6d68;
+  opacity: 0.8;
+  font-style: italic;
+  font-size: 14px;
+  margin-top: 8px;
+}
+
+/* Result UI inside feedback */
+.feedback-result {
+  margin-top: 8px;
+}
+
+.score-row {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+
+.score-label {
+  font-size: 12px;
+  color: #1d514d;
+  font-weight: 700;
+}
+
+.score-value {
+  font-size: 28px;
+  font-weight: 900;
+  color: #103c39;
+}
+
+/* Speakometer */
+.meter {
+  margin-top: 10px;
+}
+
+.meter-track {
+  height: 10px;
+  background: rgba(255,255,255,0.45);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.meter-fill {
+  height: 100%;
+  width: 0%;
+  background: #2b8f88;
+  transition: width 0.5s ease;
+}
+
+/* Stars */
+.stars {
+  margin-top: 10px;
+  font-size: 22px;
+  display: flex;
+  gap: 4px;
+}
+
+  .stars span {
+    color: rgba(255,255,255,0.55);
+  }
+
+    .stars span.active {
+      color: #ffcc4d;
+      animation: starPop 0.3s ease;
+    }
+
+@keyframes starPop {
+  0% {
+    transform: scale(0.85);
+  }
+
+  60% {
+    transform: scale(1.12);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* 3 lines feedback */
+.feedback-lines {
+  margin: 10px 0 0 18px;
+  color: #114744;
+  font-size: 13.5px;
+  font-weight: 600;
+}
+
+/* Bottom area */
+.pp-bottom {
+  max-width: 1200px;
+  margin: 22px auto 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+}
+
+/* Prev/Next line */
+/* Prev/Next line */
+.nav-row {
+  display: flex;
+  align-items: center;
+  gap: 3vw;
+}
+
+/* Increased arrow size and perfectly center it inside the circular button */
+.nav-btn {
+  width: 7vw;
+  height: 7vw;
+  border-radius: 50%;
+  border: none;
+  background: #dcefee;
+  color: #1b5551;
+  font-size: 7vw; /* larger arrow */
+  display: flex; /* center text horizontally & vertically */
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  line-height: 1; /* avoid font baseline shifts */
+  padding: 0; /* ensure perfect centering */
+  cursor: pointer;
+  font-weight: 700;
+  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
+  transition: transform 0.08s ease;
+}
+
+  .nav-btn:active {
+    transform: scale(0.98);
+  }
+
+  .nav-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+.nav-center {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.nav-letter {
+  font-size: 5vw;
+  font-weight: 900;
+  color: #3aaea8;
+}
+
+.nav-count {
+  font-size: 14px;
+  color: #667b79;
+  font-weight: 600;
+}
+
+/* Responsive override so buttons don't overflow on smaller screens */
+@media (max-width: 980px) {
+  .nav-btn {
+    width: 56px;
+    height: 56px;
+    font-size: 28px;
+  }
+}
+
+/* Alphabet pills */
+.alpha-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  max-width: 900px;
+}
+
+.alpha-pill {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  border: none;
+  background: #dfeeee;
+  color: #3a5a58;
+  font-weight: 700;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+  .alpha-pill.active {
+    background: #49b6ae;
+    color: #ffffff;
+    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
+  }
+
+/* Responsive */
+@media (max-width: 1100px) {
+  .pp-main {
+    grid-template-columns: 260px 320px 1fr;
+  }
+}
+
+@media (max-width: 980px) {
+  .pp-main {
+    grid-template-columns: 1fr;
+  }
+
+  .pp-left, .pp-center, .pp-right {
+    justify-content: center;
+  }
+
+  .connector {
+    display: none;
+  }
+
+  .feedback-card {
+    width: 100%;
+    max-width: 520px;
+  }
+}
+
+.gauge-wrapper {
+  position: relative;
+  width: 20vw;
+  height: 10vw;
+}
+
+.gauge {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+  width: 100%;
+  height: 100%;
+  border-radius: 260px 260px 0 0;
+  overflow: hidden;
+  background: #f3f3f3;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.25) inset;
+}
+
+.gauge-arc {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: conic-gradient( from 270deg, #e53935 0deg 45deg, #fb8c00 45deg 90deg, #fbc02d 90deg 135deg, #43a047 135deg 180deg, transparent 180deg 360deg );
+  height: 20vw;
+}
+
+.needle {
+  position: absolute;
+  bottom: 0vw;
+  left: 50%;
+  width: 0.7vw;
+  height: 8vw;
+  background: #333;
+  transform: translateX(-50%) rotate(var(--angle, -90deg));
+  transform-origin: 50% 100%;
+  transition: transform 700ms cubic-bezier(.2,.9,.2,1);
+  border-radius: 10px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
+}
+
+.mic-badge {
+  position: absolute;
+  bottom: -0.3vw;
+  left: 50%;
+  transform: translate(-50%, 35%);
+  width: 3vw;
+  height: 3vw;
+  border-radius: 50%;
+  background: #000;
+  box-shadow: 0 8px 18px rgba(0,0,0,0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.score-span {
+  color: white;
+  font-size: 1vw;
+  font-weight: bold;
+}
+
+.notepad {
+  display: flex;
+  align-items: center;
+}
+
+.user-guide-close-icon {
+  position: fixed;
+  top: 3vw;
+  right: 4vw;
+  background: #009688;
+  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;
+}
+/* Teacher media container — ensures image and video occupy exactly the same box */
+.teacher-media {
+  width: 20vw; /* same as you used inline before */
+  max-width: 260px; /* optional limit for very wide screens */
+  min-width: 140px; /* optional floor */
+  aspect-ratio: 3 / 4; /* change to 16 / 9 if your videos are widescreen */
+  position: relative;
+  overflow: hidden;
+  display: block;
+}
+
+/* Shared styles for image and video so sizes match exactly */
+.teacher-media__img,
+.teacher-media__video {
+  width: 100%;
+  height: 100%;
+  display: block;
+  border-radius: 1vw;
+  border: 2px solid #ccc; /* keep previously visible border */
+  object-fit: cover; /* makes video/image fill box similarly */
+}
+
+/* A neutral background for video while it loads */
+.teacher-media__video {
+  background-color: #000;
+}
+/* Make play/pause image match record button size and add shadow */
+.listen-img {
+  width: 4.8vw; /* match .rec-circle size */
+  height: 4.8vw;
+  border-radius: 50%;
+  display: inline-block;
+  object-fit: contain; /* keep icon aspect */
+  cursor: pointer;
+  user-select: none;
+  margin-right: 1vw;
+  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.4);
+  transition: all 0.3s ease;
+  /*box-shadow: 0 12px 22px rgba(0,0,0,0.12);
+  transition: transform 0.08s ease, filter 0.15s ease, box-shadow 0.15s ease;
+  
+  box-sizing: border-box;*/
+  border: none;
+}
+
+  /* pressed / active */
+  .listen-img:active {
+    transform: scale(0.98);
+  }
+
+  /* playing state — subtle visual change */
+  .listen-img.playing,
+  .listen-img[aria-pressed="true"] {
+    filter: brightness(0.95);
+    box-shadow: 0 18px 30px rgba(0,0,0,0.16);
+  }
+
+  /* keyboard focus for accessibility */
+  .listen-img:focus {
+    outline: 3px solid rgba(58,174,168,0.18);
+    outline-offset: 3px;
+  }
+
+/* Small-screen fallback (keep sizes proportional) */
+@media (max-width: 980px) {
+  .listen-img {
+    width: 72px;
+    height: 72px;
+    padding: 14px;
+  }
+}
+/* add oscillation keyframes and state */
+@keyframes needleOscillate {
+  0% {
+    transform: translateX(-50%) rotate(-70deg);
+  }
+
+  25% {
+    transform: translateX(-50%) rotate(-20deg);
+  }
+
+  50% {
+    transform: translateX(-50%) rotate(60deg);
+  }
+
+  75% {
+    transform: translateX(-50%) rotate(-10deg);
+  }
+
+  100% {
+    transform: translateX(-50%) rotate(-70deg);
+  }
+}
+
+/* existing needle default uses CSS variable for final angle */
+.needle {
+  position: absolute;
+  bottom: 0vw;
+  left: 50%;
+  width: 0.7vw;
+  height: 8vw;
+  background: #333;
+  transform: translateX(-50%) rotate(var(--angle, -90deg));
+  transform-origin: 50% 100%;
+  transition: transform 700ms cubic-bezier(.2,.9,.2,1);
+  border-radius: 10px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
+}
+
+  /* while recording / waiting for score, run oscillation animation */
+  .needle.oscillate {
+    /* override transform with animation while oscillating */
+    animation: needleOscillate 1.2s ease-in-out infinite;
+    /* disable the smooth transition while animation runs to prevent conflicts */
+    transition: none;
+  }
+
+/* when oscillation ends (isRecording/isScoring false), the animation class is removed
+   and the element will smoothly transition to the value provided by --angle */
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 40px; /* Increase the space between elements */
+}
+
+.arrow {
+  font-size: 4rem; /* Increased font size for bigger buttons */
+  background-color: #e0f7fa;
+  border: none;
+  width: 92px; /* Set width */
+  height: 92px; /* Set height */
+  border-radius: 50%; /* Make the button circular */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2); /* Box shadow for the button */
+  color: #00796b; /* Set color of the arrows */
+  transition: background-color 0.3s, color 0.3s; /* Smooth transition for background and text color */
+}
+
+  /* Disabled state styles */
+  .arrow:disabled {
+    background-color: #cfd8dc; /* Light gray background when disabled */
+    color: #90a4ae; /* Gray color for the arrow */
+    cursor: not-allowed; /* Change cursor to indicate the button is disabled */
+    box-shadow: none; /* Remove box shadow for disabled button */
+  }
+
+.center-text {
+  font-size: 5rem; /* Increased font size for the 'Y' text */
+  font-weight: bold;
+  color: #00796b;
+  width: 4vw;
+  text-align: center;
+}
+
+
+/* Styling the container */
+.image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+/* Styling the round image with shadow */
+.round-image {
+  width: 4.8vw; /* Adjust the size as needed */
+  height: 4.8vw;
+  border-radius: 50%; /* Makes the image round */
+  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.4);
+  transition: all 0.3s ease; /* Smooth transition for animation */
+  cursor: pointer;
+}
+
+  /* Scaling effect on click */
+  .round-image:active {
+    transform: scale(1.1); /* Scale up by 10% when clicked */
+  }
+
+/* Subtle zoom in/out */
+.apple-anim {
+  transform-origin: 50% 50%;
+  animation: appleZoom 2.8s ease-in-out infinite alternate;
+  will-change: transform;
+}
+
+@keyframes appleZoom {
+  from {
+    transform: scale(0.8);
+  }
+
+  to {
+    transform: scale(1.06);
+  }
+  /* slight zoom */
+}
+
+/* Respect reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  .apple-anim {
+    animation: none;
+    transform: none;
+  }
+}
+
+
+
+
+
+/* Progress / record button (circular) */
+.progress-btn {
+  width: 4.8vw;
+  height: 4.8vw;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: #f07b48;
+  position: relative;
+  cursor: pointer;
+  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.4);
+  transition: transform .12s ease, box-shadow .12s ease;
+}
+
+  .progress-btn:active {
+    transform: scale(.98);
+  }
+
+  .progress-btn.recording {
+    /* box-shadow: 0 10px 26px rgba(63,81,181,0.18);*/
+    filter: brightness(0.95);
+    animation: recPulse 1s infinite;
+  }
+
+/* SVG ring occupies full button */
+.progress-ring {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg); /* rotate so progress starts at top */
+  display: block;
+}
+
+/* style the static background ring and active bar */
+.progress-ring__background {
+  stroke: #eee;
+  opacity: 1;
+}
+
+.progress-ring__bar {
+  stroke: #3aaea8;
+  transition: stroke-dashoffset 0.12s linear;
+}
+
+/* central label stacked over the SVG */
+.label {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  font-weight: 700;
+  color: #222;
+  font-size: 2.5rem;
+}
+
+/* seconds shown while counting down */
+.seconds {
+  color: #fff;
+  /* background: rgba(0,0,0,0.5);*/
+  padding: 4px 8px;
+  border-radius: 6px;
+}
+
+/* dot shown when recording/waiting for result */
+.finished-dot {
+  color: #d32f2f;
+  font-size: 1.4rem;
+}
+
+
+/*.fb-board {
+  position: absolute;
+  top: 15.5vw;
+  right: 3.8vw;
+}*/
+
+
+.fb-board {
+  position: absolute;
+  top: 15.3vw;
+  right: 3.6vw;
+}
+
+  .fb-board img {
+    width: 100%;
+    display: block;
+  }
+
+.center-text1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-size: 20px;
+  font-weight: bold;
+  text-align: center;
+  width: 14vw;
+}
+
+
+
+/* Responsive video container */
+.video-frame {
+  width: 100%;
+  aspect-ratio: 16 / 9; /* default; adjust per need */
+  border-radius: 1vw;
+  overflow: hidden;
+  background: #000; /* avoids blank edges before first frame */
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 12px 24px rgba(0, 0, 0, 0.16), 0 24px 48px rgba(0, 0, 0, 0.12);
+}
+
+  /* For square videos (like the apple video) */
+  .video-frame.square {
+    aspect-ratio: 1 / 1;
+  }
+
+  /* Make the video fill the frame */
+  .video-frame > video {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover; /* use 'contain' if you do not want cropping */
+  }

src/app/pronunciationragupgrade/pronunciationragupgrade.component.html

@@ -0,0 +1,165 @@
+<div class="pp-page">
+
+  <!-- Header -->
+  <div class="pp-header">
+    <h1>Pronunciation Practice</h1>
+  </div>
+
+  <!-- Main area -->
+  <div class="pp-main">
+
+    <!-- LEFT: Word card -->
+    <div class="pp-left">
+      <div class="word-card">
+        <div class="word-img-wrap">
+          <div class="video-frame square">
+            <video [src]="current.imgSrc"
+                   autoplay
+                   loop
+                   muted
+                   playsinline>
+              Your browser does not support the video tag.
+            </video>
+          </div>
+          </div>
+
+        <div class="word-text">{{ current.word }}</div>
+
+        <div class="phonetic-pill">
+          {{ current.phonetics }}
+        </div>
+
+
+        <div class="image-container">
+          <img src="assets/pronvideo/audio.png" alt="Round Image" class="round-image" (click)="playWordAudio()">
+        </div>
+
+      </div>
+    </div>
+
+    <!-- CENTER: Teacher area -->
+    <div class="pp-center">
+      <div class="word-card" style="width:30vw!important">
+        <div style="width:28vw;height:25vw">
+        
+
+          <video *ngIf="!showVideo"
+                 src="assets/pronvideo/listening.mp4"
+                 style="border-radius:1vw; object-fit:cover;"
+                 autoplay
+                 loop
+                 muted
+                 (ended)="onVideoEnded()"
+                 height="469"
+                 width="521">
+            Your browser does not support the video tag.
+          </video>
+
+          <!-- single video element used for both teacher and feedback videos -->
+          <video *ngIf="showVideo"
+                 #videoEl
+                 [src]="videoSrc"
+                 style="border-radius:1vw; object-fit:cover;"
+                 (play)="onVideoPlay()"
+                 (pause)="onVideoPause()"
+                 autoplay
+                 (ended)="onVideoEnded()"
+                 height="469"
+                 width="521">
+            Your browser does not support the video tag.
+          </video>
+        </div>
+
+        <!-- Toggle listen button: image acts as the button and switches between play/pause -->
+        <!-- Replace the button with a single image that acts as a toggle control -->
+
+        <div style="display:flex;margin-top:1.8vw;gap:2vw;">
+          <img class="listen-img"
+               [src]="isPlayingVideo ? pauseIconDataUrl : playIconDataUrl"
+               [attr.alt]="isPlayingVideo ? 'Pause pronunciation' : 'Play pronunciation'"
+               [attr.aria-label]="isPlayingVideo ? 'Pause pronunciation' : 'Play pronunciation'"
+               [attr.aria-pressed]="isPlayingVideo"
+               role="button"
+               tabindex="0"
+               (click)="toggleVideoPlay()"
+               (keydown.enter)="toggleVideoPlay()"
+               (keydown.space)="toggleVideoPlay(); $event.preventDefault()" />
+
+         
+          <button class="progress-btn"
+                  [class.recording]="isRecording"
+                  [attr.aria-pressed]="isRecording"
+                  (click)="toggleRecording()"
+                  type="button">
+            <svg class="progress-ring" width="85" height="85" viewBox="0 0 90 90" aria-hidden="true">
+              <circle class="progress-ring__background"
+                      stroke="#3aaea8"
+                      stroke-width="6"
+                      fill="transparent"
+                      r="38"
+                      cx="45"
+                      cy="45" />
+              <circle class="progress-ring__bar"
+                      stroke="#3aaea8"
+                      stroke-linecap="round"
+                      stroke-width="6"
+                      fill="transparent"
+                      r="38"
+                      cx="45"
+                      cy="45"
+                      [attr.stroke-dasharray]="circumference"
+                      [attr.stroke-dashoffset]="strokeDashoffset" />
+            </svg>
+
+            <div class="label" aria-hidden="true">
+              <!-- show a live mic while recording -->
+              <span class="action-text" *ngIf="isRecording">🎙️</span>
+
+              <!-- default mic before countdown starts -->
+              <span class="action-text" *ngIf="!isCountingDown && !isRecording">🎤</span>
+
+              <!-- countdown number -->
+              <span class="seconds" *ngIf="isCountingDown">{{ timeLeft | number:'1.0-0' }}</span>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- RIGHT: Feedback panel -->
+    <div class="pp-right">
+
+      <!-- needle binding changed to use isOscillating -->
+      <div class="gauge-wrapper">
+        <div class="gauge">
+          <div class="gauge-arc"></div>
+          <div class="needle" [class.oscillate]="isOscillating" [style.--angle]="needleAngle + 'deg'"></div>
+        </div>
+
+        <div class="mic-badge">
+          <span class="score-span">{{score}}%</span>
+        </div>
+      </div>
+
+      
+
+      <div class="fb-board">
+        <img src="assets/pronvideo/slate.png" alt="Sample Image">
+        <div class="center-text1">
+          {{ shortfeedback ? shortfeedback : 'Speak to get feedback' }}
+        </div>
+      </div>
+
+
+      <div class="container">
+        <button class="arrow left" (click)="prev()" [disabled]="index === 0">&#8249;</button>
+        <span class="center-text">{{ current.letter }}</span>
+        <button class="arrow right" (click)="next()" [disabled]="index === items.length - 1">&#8250;</button>
+      </div>
+
+    </div>
+
+  </div>
+
+</div>
+<button aria-label="Close" class="user-guide-close-icon" (click)="closePopup()">×</button>

src/app/pronunciationragupgrade/pronunciationragupgrade.component.ts

@@ -0,0 +1,679 @@
+import {
+  Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild, ChangeDetectorRef
+} from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { finalize, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+interface PracticeItem {
+  letter: string;
+  word: string;
+  phonetics: string;
+  imgSrc: string;
+  audioSrc: string;
+}
+
+@Component({
+  selector: 'app-pronunciationragupgrade',
+  templateUrl: './pronunciationragupgrade.component.html',
+  styleUrls: ['./pronunciationragupgrade.component.css']
+})
+export class PronunciationRagUpgradeComponent implements OnInit, OnDestroy {
+
+  @ViewChild('videoEl') videoElRef?: ElementRef<HTMLVideoElement>;
+
+  // ---------------- CONFIG ----------------
+  private API_BASE = location.hostname.endsWith('hf.space')
+    ? 'https://pykara-py-learn-backend.hf.space'
+    : 'http://localhost:5000';
+
+  private readonly SCORE_ENDPOINT = `${this.API_BASE}/pronragupgrade/score`;
+
+  private readonly preferredMimeTypes = [
+    'audio/webm;codecs=opus',
+    'audio/webm',
+    'audio/ogg;codecs=opus',
+    'audio/ogg'
+  ];
+
+  // ---------------- UI STATE ----------------
+  showVideo = false;
+  videoSrc = '';
+  isPlayingVideo = false;
+  playIconDataUrl = 'assets/pronvideo/play.png';
+  pauseIconDataUrl = 'assets/pronvideo/pause.png';
+
+  // ---------------- DATA ----------------
+  items: PracticeItem[] = [
+    { letter: 'A', word: 'Apple', phonetics: '/ˈæpəl/', imgSrc: 'assets/pronvideo/animvideo/apple.mp4', audioSrc: 'assets/pronvideo/audio/apple.mp3' },
+    { letter: 'B', word: 'Ball', phonetics: '/bɔːl/', imgSrc: 'assets/pronvideo/animvideo/ball.mp4', audioSrc: 'assets/pronvideo/audio/ball.mp3' },
+    { letter: 'C', word: 'Cat', phonetics: '/kæt/', imgSrc: 'assets/pronvideo/animvideo/cat.mp4', audioSrc: 'assets/pronvideo/audio/cat.mp3' },
+    { letter: 'D', word: 'Dog', phonetics: '/dɒɡ/', imgSrc: 'assets/pronvideo/animvideo/dog.mp4', audioSrc: 'assets/pronvideo/audio/dog.mp3' },
+    { letter: 'E', word: 'Egg', phonetics: '/eɡ/', imgSrc: 'assets/pronvideo/animvideo/egg.mp4', audioSrc: 'assets/pronvideo/audio/egg.mp3' },
+    { letter: 'F', word: 'Fish', phonetics: '/fɪʃ/', imgSrc: 'assets/pronvideo/animvideo/fish.mp4', audioSrc: 'assets/pronvideo/audio/fish.mp3' },
+    { letter: 'G', word: 'Grapes', phonetics: '/ɡreɪps/', imgSrc: 'assets/pronvideo/animvideo/grapes.mp4', audioSrc: 'assets/pronvideo/audio/grapes.mp3' },
+    { letter: 'H', word: 'Hat', phonetics: '/hæt/', imgSrc: 'assets/pronvideo/animvideo/hat.mp4', audioSrc: 'assets/pronvideo/audio/hat.mp3' },
+    { letter: 'I', word: 'Ice cream', phonetics: '/ˈaɪs ˌkriːm/', imgSrc: 'assets/pronvideo/animvideo/icecream.mp4', audioSrc: 'assets/pronvideo/audio/icecream.mp3' },
+    { letter: 'J', word: 'Jar', phonetics: '/dʒɑːr/', imgSrc: 'assets/pronvideo/animvideo/jar.mp4', audioSrc: 'assets/pronvideo/audio/jar.mp3' },
+    { letter: 'K', word: 'Kite', phonetics: '/kaɪt/', imgSrc: 'assets/pronvideo/animvideo/kite.mp4', audioSrc: 'assets/pronvideo/audio/kite.mp3' },
+    { letter: 'L', word: 'Lion', phonetics: '/ˈlaɪən/', imgSrc: 'assets/pronvideo/animvideo/lion.mp4', audioSrc: 'assets/pronvideo/audio/lion.mp3' },
+    { letter: 'M', word: 'Moon', phonetics: '/muːn/', imgSrc: 'assets/pronvideo/animvideo/moon.mp4', audioSrc: 'assets/pronvideo/audio/moon.mp3' },
+    { letter: 'N', word: 'Nest', phonetics: '/nest/', imgSrc: 'assets/pronvideo/animvideo/nest.mp4', audioSrc: 'assets/pronvideo/audio/nest.mp3' },
+    { letter: 'O', word: 'Orange', phonetics: '/ˈɒrɪndʒ/', imgSrc: 'assets/pronvideo/animvideo/orange.mp4', audioSrc: 'assets/pronvideo/audio/orange.mp3' },
+    { letter: 'P', word: 'Pig', phonetics: '/pɪɡ/', imgSrc: 'assets/pronvideo/animvideo/pig.mp4', audioSrc: 'assets/pronvideo/audio/pig.mp3' },
+    { letter: 'Q', word: 'Queen', phonetics: '/kwiːn/', imgSrc: 'assets/pronvideo/animvideo/queen.mp4', audioSrc: 'assets/pronvideo/audio/queen.mp3' },
+    { letter: 'R', word: 'Rabbit', phonetics: '/ˈræbɪt/', imgSrc: 'assets/pronvideo/animvideo/rabbit.mp4', audioSrc: 'assets/pronvideo/audio/rabbit.mp3' },
+    { letter: 'S', word: 'Sun', phonetics: '/sʌn/', imgSrc: 'assets/pronvideo/animvideo/sun.mp4', audioSrc: 'assets/pronvideo/audio/sun.mp3' },
+    { letter: 'T', word: 'Tree', phonetics: '/triː/', imgSrc: 'assets/pronvideo/animvideo/tree.mp4', audioSrc: 'assets/pronvideo/audio/tree.mp3' },
+    { letter: 'U', word: 'Umbrella', phonetics: '/ʌmˈbrelə/', imgSrc: 'assets/pronvideo/animvideo/umbrella.mp4', audioSrc: 'assets/pronvideo/audio/umbrella.mp3' },
+    { letter: 'V', word: 'Van', phonetics: '/væn/', imgSrc: 'assets/pronvideo/animvideo/van.mp4', audioSrc: 'assets/pronvideo/audio/van.mp3' },
+    { letter: 'W', word: 'Watch', phonetics: '/wɒtʃ/', imgSrc: 'assets/pronvideo/animvideo/watch.mp4', audioSrc: 'assets/pronvideo/audio/watch.mp3' },
+    { letter: 'X', word: 'Xylophone', phonetics: '/ˈzaɪləfəʊn/', imgSrc: 'assets/pronvideo/animvideo/xylophone.mp4', audioSrc: 'assets/pronvideo/audio/xylophone.mp3' },
+    { letter: 'Y', word: 'Yarn', phonetics: '/jɑːn/', imgSrc: 'assets/pronvideo/animvideo/yarn.mp4', audioSrc: 'assets/pronvideo/audio/yarn.mp3' },
+    { letter: 'Z', word: 'Zebra', phonetics: '/ˈzebrə/', imgSrc: 'assets/pronvideo/animvideo/zebra.mp4', audioSrc: 'assets/pronvideo/audio/zebra.mp3' }
+  ];
+
+  index = 0;
+  get current(): PracticeItem { return this.items[this.index]; }
+
+  // ---------------- RECORDING ----------------
+  isRecording = false;
+  isScoring = false;
+  isOscillating = false;
+
+  private mediaStream?: MediaStream;
+  private mediaRecorder?: MediaRecorder;
+  private chunks: BlobPart[] = [];
+  private currentMimeType = 'audio/webm';
+
+  recordedAudioUrl: string | null = null;
+  lastRecordedBlob: Blob | null = null;
+
+  // ---------------- SILENCE DETECTION ----------------
+  private audioCtx?: AudioContext;
+  private analyser?: AnalyserNode;
+  private micSource?: MediaStreamAudioSourceNode;
+  private silenceCheckId?: number;
+
+  private lastSpeechAt = 0;
+  private recordingStartedAt = 0;
+  private hasSpoken = false;
+
+  private readonly silenceMs = 5000;
+  private readonly startSilenceMs = 5000;
+  private readonly silenceThreshold = 0.01;
+
+  // ---------------- COUNTDOWN ----------------
+  duration = 3;
+  isCountingDown = false;
+  timeLeft = this.duration;
+  private preRecordIntervalId?: number;
+
+  readonly radius = 38;
+  readonly circumference = 2 * Math.PI * this.radius;
+  strokeDashoffset = this.circumference;
+
+  // ---------------- RESULT ----------------
+  showResult = false;
+  score = 0;
+  stars = 0;
+  feedbackLines: string[] = [];
+  videoUrl = '';
+  private lastVideoBlobUrl: string | null = null;
+  shortfeedback: string = '';
+
+  // ---------------- CANCEL / RESET CONTROL ----------------
+  private cancelScoring$ = new Subject<void>();  // cancels API call
+  private recordRunId = 0;                       // blocks onstop->API after navigation
+
+  // ---------------- LIFECYCLE ----------------
+  constructor(
+    private http: HttpClient,
+    public dialogRef: MatDialogRef<PronunciationRagUpgradeComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private cdr: ChangeDetectorRef
+  ) { }
+
+  ngOnInit(): void {
+    this.setupBestMimeType();
+    this.resetResult();
+  }
+
+  ngOnDestroy(): void {
+    // cancel any pending api
+    this.cancelScoring$.next();
+    this.cancelScoring$.complete();
+
+    this.stopTracks();
+    this.safeStopRecorder();
+    this.teardownAudioGraph();
+
+    if (this.lastVideoBlobUrl) {
+      try { URL.revokeObjectURL(this.lastVideoBlobUrl); } catch { }
+      this.lastVideoBlobUrl = null;
+    }
+  }
+
+  // ---------------- RECORD CONTROL ----------------
+  async toggleRecording(): Promise<void> {
+    if (this.isRecording) {
+      this.stopRecording(false);
+      return;
+    }
+    this.startPreRecordCountdown();
+  }
+
+  private startPreRecordCountdown(): void {
+    this.score = 0;
+    this.shortfeedback = '';
+
+    if (this.isCountingDown || this.isRecording) return;
+
+    // stop any previous run/api
+    this.cancelScoring$.next();
+    this.isScoring = false;
+    this.isOscillating = false;
+
+    this.isCountingDown = true;
+    this.timeLeft = this.duration;
+
+    const totalMs = this.duration * 1000;
+    const start = performance.now();
+
+    this.strokeDashoffset = this.circumference;
+
+    this.preRecordIntervalId = window.setInterval(() => {
+      const elapsed = performance.now() - start;
+      const progress = Math.min(1, elapsed / totalMs);
+
+      this.strokeDashoffset = this.circumference * (1 - progress);
+      this.timeLeft = Math.ceil((totalMs - elapsed) / 1000);
+
+      if (elapsed >= totalMs) {
+        if (this.preRecordIntervalId) {
+          try { clearInterval(this.preRecordIntervalId); } catch { }
+          this.preRecordIntervalId = undefined;
+        }
+        this.startRecordingInternal();
+      }
+
+      try { this.cdr.detectChanges(); } catch { }
+    }, 100);
+  }
+
+  private async startRecordingInternal(): Promise<void> {
+    this.isCountingDown = false;
+
+    // new run id (used to ignore late onstop)
+    const myRunId = ++this.recordRunId;
+
+    this.mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    this.mediaRecorder = new MediaRecorder(this.mediaStream, { mimeType: this.currentMimeType });
+    this.chunks = [];
+
+    this.mediaRecorder.ondataavailable = e => e.data.size && this.chunks.push(e.data);
+
+    this.mediaRecorder.onstop = () => {
+      // If user navigated/reset, ignore this stop event
+      if (myRunId !== this.recordRunId) return;
+      this.onRecordingStopped(myRunId);
+    };
+
+    this.isRecording = true;
+
+    this.setupSilenceDetection(this.mediaStream);
+    this.mediaRecorder.start();
+
+    try { this.cdr.detectChanges(); } catch { }
+  }
+
+  stopRecording(_isAutoStop: boolean = false): void {
+    if (!this.isRecording) return;
+
+    // stop countdown interval (if any)
+    if (this.preRecordIntervalId) {
+      try { clearInterval(this.preRecordIntervalId); } catch { }
+      this.preRecordIntervalId = undefined;
+    }
+    this.isCountingDown = false;
+
+    this.isRecording = false;
+
+    this.safeStopRecorder();
+    this.stopTracks();
+    this.teardownAudioGraph();
+
+    try { this.cdr.detectChanges(); } catch { }
+  }
+
+  private safeStopRecorder(): void {
+    try {
+      if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
+        this.mediaRecorder.stop();
+      }
+    } catch { }
+  }
+
+  private onRecordingStopped(runId: number): void {
+    // if reset happened, do nothing
+    if (runId !== this.recordRunId) return;
+
+    const blob = new Blob(this.chunks, { type: this.currentMimeType });
+    this.chunks = [];
+
+    // If audio is too small, do not call API
+    if (!blob || blob.size < 2000) {
+      this.isOscillating = false;
+      this.isScoring = false;
+      this.shortfeedback = 'No voice detected. Please try again.';
+      this.showResult = true;
+      try { this.cdr.detectChanges(); } catch { }
+      return;
+    }
+
+    this.lastRecordedBlob = blob;
+
+    // start gauge oscillation while scoring
+    this.isOscillating = true;
+    try { this.cdr.detectChanges(); } catch { }
+
+    this.sendForScoring(blob, this.current.word, runId);
+  }
+
+  // ---------------- SILENCE DETECTION (AUTO STOP) ----------------
+  private setupSilenceDetection(stream: MediaStream): void {
+    this.teardownAudioGraph();
+
+    this.audioCtx = new AudioContext();
+    this.analyser = this.audioCtx.createAnalyser();
+    this.analyser.fftSize = 2048;
+
+    this.micSource = this.audioCtx.createMediaStreamSource(stream);
+    this.micSource.connect(this.analyser);
+
+    this.recordingStartedAt = performance.now();
+    this.lastSpeechAt = this.recordingStartedAt;
+    this.hasSpoken = false;
+
+    const loop = () => {
+      if (!this.analyser) return;
+      if (!this.isRecording) return;
+
+      const data = new Float32Array(this.analyser.fftSize);
+      this.analyser.getFloatTimeDomainData(data);
+
+      let sumSq = 0;
+      for (let i = 0; i < data.length; i++) sumSq += data[i] * data[i];
+      const rms = Math.sqrt(sumSq / data.length);
+
+      const now = performance.now();
+
+      if (rms > this.silenceThreshold) {
+        this.lastSpeechAt = now;
+        this.hasSpoken = true;
+      }
+
+      // A) never spoke -> stop
+      if (!this.hasSpoken && (now - this.recordingStartedAt) > this.startSilenceMs) {
+        this.stopRecording(true);
+        return;
+      }
+
+      // B) spoke then silent -> stop
+      if (this.hasSpoken && (now - this.lastSpeechAt) > this.silenceMs) {
+        this.stopRecording(true);
+        return;
+      }
+
+      this.silenceCheckId = window.setTimeout(loop, 100);
+    };
+
+    loop();
+  }
+
+  private teardownAudioGraph(): void {
+    if (this.silenceCheckId) {
+      try { clearTimeout(this.silenceCheckId); } catch { }
+      this.silenceCheckId = undefined;
+    }
+    try { this.micSource?.disconnect(); } catch { }
+    try { this.analyser?.disconnect(); } catch { }
+    try { this.audioCtx?.close(); } catch { }
+
+    this.micSource = undefined;
+    this.analyser = undefined;
+    this.audioCtx = undefined;
+  }
+
+  private stopTracks(): void {
+    this.mediaStream?.getTracks().forEach(t => t.stop());
+    this.mediaStream = undefined;
+  }
+
+  // ---------------- BACKEND ----------------
+  private sendForScoring(blob: Blob, word: string, runId: number): void {
+    // if reset happened, do nothing
+    if (runId !== this.recordRunId) return;
+
+    const fd = new FormData();
+    fd.append('audio', blob, 'student.webm');
+    fd.append('word', word.toLowerCase());
+
+    this.isScoring = true;
+
+    this.http.post<any>(this.SCORE_ENDPOINT, fd)
+      .pipe(
+        takeUntil(this.cancelScoring$), // ✅ cancel API on navigation
+        finalize(() => {
+          this.isScoring = false;
+          this.isOscillating = false;
+          try { this.cdr.detectChanges(); } catch { }
+        })
+      )
+      .subscribe(res => {
+        // If user navigated/reset while API was in progress, ignore response
+        if (runId !== this.recordRunId) return;
+
+        this.score = this.normalizeScore(res.score);
+        this.stars = this.mapStars(this.score);
+        this.shortfeedback = res.feedback;
+        this.feedbackLines = this.mapFeedbackFromStatus(res.status);
+        this.showResult = true;
+
+        if (res.videoBlobBase64) {
+          const bytes = Uint8Array.from(atob(res.videoBlobBase64), c => c.charCodeAt(0));
+          const videoBlob = new Blob([bytes], { type: 'video/mp4' });
+
+          // revoke previous
+          if (this.lastVideoBlobUrl) {
+            try { URL.revokeObjectURL(this.lastVideoBlobUrl); } catch { }
+          }
+
+          this.videoUrl = URL.createObjectURL(videoBlob);
+          this.lastVideoBlobUrl = this.videoUrl;
+          this.tryPlayFeedbackVideo(this.videoUrl);
+        }
+
+        try { this.cdr.detectChanges(); } catch { }
+      }, _err => {
+        if (runId !== this.recordRunId) return;
+        this.shortfeedback = 'Error while scoring. Please try again.';
+        this.showResult = true;
+        try { this.cdr.detectChanges(); } catch { }
+      });
+  }
+
+  // ---------------- HARD RESET (for navigation) ----------------
+  private cancelAllRunningProcesses(): void {
+    // 1) block any pending onstop -> API
+    this.recordRunId++;
+
+    // 2) cancel API call if running
+    this.cancelScoring$.next();
+
+    // 3) stop oscillation/scoring UI immediately
+    this.isScoring = false;
+    this.isOscillating = false;
+
+    // 4) stop countdown
+    if (this.preRecordIntervalId) {
+      try { clearInterval(this.preRecordIntervalId); } catch { }
+      this.preRecordIntervalId = undefined;
+    }
+    this.isCountingDown = false;
+    this.timeLeft = this.duration;
+    this.strokeDashoffset = this.circumference;
+
+    // 5) stop recording + audio graph + tracks
+    this.isRecording = false;
+    this.safeStopRecorder();
+    this.stopTracks();
+    this.teardownAudioGraph();
+    this.chunks = [];
+
+    // 6) reset speaker/video (pause button -> play)
+    this.resetVideoPlayerState();
+
+    try { this.cdr.detectChanges(); } catch { }
+  }
+
+  private resetVideoPlayerState(): void {
+    try {
+      const v = this.videoElRef?.nativeElement;
+      if (v) {
+        v.pause();
+        v.currentTime = 0;
+        v.removeAttribute('src');
+        v.load();
+      }
+    } catch { }
+
+    this.showVideo = false;     // teacher looping video will show
+    this.videoSrc = '';
+    this.isPlayingVideo = false;
+  }
+
+  // ---------------- FEEDBACK ----------------
+  private mapFeedbackFromStatus(status: string): string[] {
+    switch (status) {
+      case 'success': return ['Excellent pronunciation.', 'Very clear sound.'];
+      case 'vowel_error': return ['Check your vowel sound.', 'Open your mouth clearly.'];
+      case 'consonant_error': return ['Focus on consonant sound.', 'Try again slowly.'];
+      case 'ending_error': return ['Ending sound missing.', 'Finish the word properly.'];
+      case 'stress_error': return ['Stress needs correction.', 'Listen and repeat.'];
+      case 'wrong_word': return ['Wrong word spoken.', 'Say only the target word.'];
+      case 'silence': return ['No speech detected.', 'Please try again.'];
+      default: return ['Good attempt.', 'Try once more.'];
+    }
+  }
+
+  private normalizeScore(n: any): number {
+    n = Number(n);
+    return isNaN(n) ? 0 : Math.min(100, Math.max(0, Math.round(n)));
+  }
+
+  private mapStars(s: number): number {
+    if (s >= 90) return 5;
+    if (s >= 80) return 4;
+    if (s >= 70) return 3;
+    if (s >= 60) return 2;
+    return 1;
+  }
+
+  // ---------------- VIDEO ----------------
+  private tryPlayFeedbackVideo(url: string): void {
+    this.showVideo = true;
+    this.videoSrc = url;
+
+    setTimeout(() => {
+      const v = this.videoElRef?.nativeElement;
+      if (!v) return;
+
+      v.src = url;
+      v.load();
+
+      v.play()
+        .then(() => {
+          this.isPlayingVideo = true;     // ✅ icon becomes pause
+          try { this.cdr.detectChanges(); } catch { }
+        })
+        .catch(() => {
+          this.isPlayingVideo = false;
+          try { this.cdr.detectChanges(); } catch { }
+        });
+    }, 0);
+  }
+
+  // ---------------- UTILS ----------------
+  private setupBestMimeType(): void {
+    for (const t of this.preferredMimeTypes) {
+      if ((window as any).MediaRecorder?.isTypeSupported(t)) {
+        this.currentMimeType = t;
+        return;
+      }
+    }
+  }
+
+  private resetResult(): void {
+    this.showResult = false;
+    this.score = 0;
+    this.stars = 0;
+    this.feedbackLines = [];
+    this.showVideo = false;
+    this.videoSrc = '';
+    this.shortfeedback = '';
+  }
+
+  // ---------------------------
+  // PLAY MODEL PRONUNCIATION AUDIO
+  // ---------------------------
+  playWordAudio(): void {
+    const src = this.current?.audioSrc || this.getAudioSrcFromWord(this.current.word);
+    if (!src) return;
+
+    try {
+      const audio = new Audio(src);
+      audio.currentTime = 0;
+      audio.play().catch(() => { });
+    } catch { }
+  }
+
+  private getAudioSrcFromWord(word: string): string {
+    if (!word) return '';
+    const fileName = word.trim().toLowerCase().replace(/\s+/g, '-');
+    return `assets/pronvideo/audio/${fileName}.mp3`;
+  }
+
+  // ---------------------------
+  // VIDEO END HANDLER
+  // ---------------------------
+  onVideoEnded(): void {
+    this.resetVideoPlayerState();
+    this.isOscillating = false;
+    try { this.cdr.detectChanges(); } catch { }
+  }
+
+  onVideoPlay(): void {
+    this.isPlayingVideo = true;
+    try { this.cdr.detectChanges(); } catch { }
+  }
+
+  onVideoPause(): void {
+    this.isPlayingVideo = false;
+    try { this.cdr.detectChanges(); } catch { }
+  }
+
+  // ---------------------------
+  // TOGGLE PLAY / PAUSE FOR VIDEO
+  // ---------------------------
+  toggleVideoPlay(): void {
+    try {
+      const v = this.videoElRef?.nativeElement;
+
+      if (!this.showVideo) {
+        this.videoSrc = this.getVideoSrcFromWord(this.current.word);
+        this.showVideo = true;
+
+        setTimeout(() => {
+          const video = this.videoElRef?.nativeElement;
+          if (!video) return;
+
+          video.src = this.videoSrc;
+          video.load();
+          video.play()
+            .then(() => {
+              this.isPlayingVideo = true;
+              try { this.cdr.detectChanges(); } catch { }
+            })
+            .catch(() => {
+              this.isPlayingVideo = false;
+              try { this.cdr.detectChanges(); } catch { }
+            });
+        }, 0);
+
+        return;
+      }
+
+      if (!v) return;
+
+      if (v.paused) {
+        v.play()
+          .then(() => {
+            this.isPlayingVideo = true;
+            try { this.cdr.detectChanges(); } catch { }
+          })
+          .catch(() => {
+            this.isPlayingVideo = false;
+            try { this.cdr.detectChanges(); } catch { }
+          });
+      } else {
+        v.pause();
+        this.isPlayingVideo = false;
+        try { this.cdr.detectChanges(); } catch { }
+      }
+    } catch { }
+  }
+
+  private getVideoSrcFromWord(word: string): string {
+    if (!word) return '';
+    const fileName = word.trim().toLowerCase().replace(/\s+/g, '-');
+    return `assets/pronvideo/videos/${fileName}.mp4`;
+  }
+
+  // ---------------------------
+  // GAUGE NEEDLE ANGLE (0–100 → -90° to +90°)
+  // ---------------------------
+  get needleAngle(): number {
+    const value = Math.max(0, Math.min(100, Number(this.score || 0)));
+    return -90 + (value * 1.8);
+  }
+
+  // ---------------------------
+  // NAVIGATION : PREVIOUS / NEXT WORD
+  // ---------------------------
+  prev(): void {
+    if (this.index <= 0) return;
+
+    // ✅ stop api + reset oscillation + reset speaker + stop countdown/record
+    this.cancelAllRunningProcesses();
+
+    this.index--;
+    this.resetAfterNavigation();
+  }
+
+  next(): void {
+    if (this.index >= this.items.length - 1) return;
+
+    // ✅ stop api + reset oscillation + reset speaker + stop countdown/record
+    this.cancelAllRunningProcesses();
+
+    this.index++;
+    this.resetAfterNavigation();
+  }
+
+  private resetAfterNavigation(): void {
+    // ensure everything is stopped
+    this.cancelAllRunningProcesses();
+
+    this.score = 0;
+    this.stars = 0;
+    this.feedbackLines = [];
+    this.showResult = false;
+    this.shortfeedback = '';
+
+    this.lastRecordedBlob = null;
+    if (this.recordedAudioUrl) {
+      try { URL.revokeObjectURL(this.recordedAudioUrl); } catch { }
+      this.recordedAudioUrl = null;
+    }
+
+    try { this.cdr.detectChanges(); } catch { }
+  }
+
+  closePopup(): void {
+    // stop everything before closing
+    this.cancelAllRunningProcesses();
+    this.dialogRef.close();
+  }
+}

src/assets/pronvideo/animvideo/apple.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:158222ad1b07188440d77474f9cdc6002973e5ed9213a234e603ff66adaa37ca
+size 5790714

src/assets/pronvideo/animvideo/ball.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bbf6c21e57ebb0f34acf11dfc57eca9a6ceb944708b1dd573e0bb4f082efe7d7
+size 5634357

src/assets/pronvideo/animvideo/cat.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0a4e400917eb73e7b2481b5e89799f4c877f860b96fef49e61f1a6fee2db718d
+size 5360080

src/assets/pronvideo/animvideo/dog.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:aced7cd298f418f1d7ac6952c99df14d6030bd56a22ac17d08352bf283b1e0de
+size 5342277

src/assets/pronvideo/animvideo/egg.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ea0b1500966539eee652962355c20c380a903ee79bd79ef57e3c730302525382
+size 4935460

src/assets/pronvideo/animvideo/fish.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0c724abc31b32d058b69c2142093c24504fa863dc5f7e7fb78310e6c78295013
+size 4907809

src/assets/pronvideo/animvideo/grapes.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e8e26b650686a72c010852f336982b188f779af5938d554bf86f755a5fcdf9b6
+size 9053666

src/assets/pronvideo/animvideo/hat.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9a435204cb5e26fb7dda794b0b1ae482445841bd8643a3bd8eb4dbca2fa69921
+size 7203469

src/assets/pronvideo/animvideo/icecream.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:89530e185f406945a71b19300c5a00711ada88641af6dcb6c59ab5dc5c5835c4
+size 6187864

src/assets/pronvideo/animvideo/jar.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:85e954d6f782f5d17da42cf60c2a061d114068396285fd5d14602ca88f975d5d
+size 9213510

src/assets/pronvideo/animvideo/kite.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ba84336efc7cb4e687eee64ed861cd753fe99781cc6c5bebe3cefe1b4b5ca4e7
+size 1843752

src/assets/pronvideo/animvideo/lion.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:eef94bc7cd6806e735254fdd077c3c211ca6cb1b5eefff27e125a7723ca3b305
+size 6097806

src/assets/pronvideo/animvideo/moon.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:147b9e565116439983091812d786a55752e4e44511d7bf61fa218ac9a0805464
+size 4901274

src/assets/pronvideo/animvideo/nest.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:820d37c3b5b153753a58532c914e011d5cdbc90df30d1bd3c5788834bfbe6d84
+size 7650498

src/assets/pronvideo/animvideo/orange.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e9e3c0daecbcf4c8c26c2ec43a0bc68531922bd621117849624a88f01e1eb5b4
+size 6440257

src/assets/pronvideo/animvideo/pig.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b6db18186b1ac3e735eda91d9d73522f900a7414b83985fc063aa7b537be133e
+size 6421810

src/assets/pronvideo/animvideo/queen.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b2e153fd06d061dc8f44595c3b5cccf1c11a2b4a3676c0d411f3586a4e965bd3
+size 2724148

src/assets/pronvideo/animvideo/rabbit.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2bfb9ec3714cc6dcd7cae3be5594e53a2267a26da0eb82770a60ea5c91bba6b8
+size 7266712

src/assets/pronvideo/animvideo/sun.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:85cb830b40c979014ed19ace95229fd8d806db3be52a87a3a387a20a017a6110
+size 1269242

src/assets/pronvideo/animvideo/tree.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e6a80995e8b2ab65495d769ca18250c2a979d0b0a2865f8ea6bfcb6e70106a70
+size 12132430

src/assets/pronvideo/animvideo/umbrella.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6df6d94e25ac51f98d33f3a452a937bb81c8d6000172fd51564bc8b43f925678
+size 2489346

src/assets/pronvideo/animvideo/van.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:86c3bdd636d07bb59384b530c66cc6518ac251a5cdae3c02ca70818c8c69ae04
+size 10097663

src/assets/pronvideo/animvideo/watch.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4ed42674319ae37c38f5d1e1b27c7deb7ade849e91a53e7e105c0fbed36f9701
+size 8078945

src/assets/pronvideo/animvideo/xylophone.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3fa2d40bc1f9f0bc96f147b0696000b33607ad9662ca5dd319b2f429d6bcfaa6
+size 2050298

src/assets/pronvideo/animvideo/yarn.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:742ba761ac8f917629fde9c560598fb2258131bb625d2d5c55f77c8440cf9e08
+size 3490049

src/assets/pronvideo/animvideo/zebra.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1144f6b4892b7ed3b31d6895dd692b40428b8e985e41c0f7306087ad4a5a37fc
+size 7161675

src/assets/pronvideo/listening.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:26c028bad47e42b3b89e05b2e603d90309b82d53193d7e2be0c88686c5dc57ea
+size 3569866

src/assets/pronvideo/videos/lion-old.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ca2d4e211b05380e1152ede6052e0751d29e46da96c78431d7bd22a83f301e94
+size 5431178

src/assets/pronvideo/videos/lion.mp4

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ca2d4e211b05380e1152ede6052e0751d29e46da96c78431d7bd22a83f301e94
-size 5431178
+oid sha256:952c1a94530ce8e620851326e7d6d368be370b42709a3677aace687e925303f8
+size 5127880

src/assets/pronvideo/videos/rabbit-old.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9c3b59991ee348ba0a9117ad5648fbf0ea03fc69298b4d3f8863d45dd94194ee
+size 4932831

src/assets/pronvideo/videos/rabbit.mp4

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9c3b59991ee348ba0a9117ad5648fbf0ea03fc69298b4d3f8863d45dd94194ee
-size 4932831
+oid sha256:cebe3f87a003315b40ef9ceaa62ac7ed47f05b5e37858d891c413b5dd01626a2
+size 4795049

src/assets/pronvideo/videos/van-old.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4724e2cab20be89b9148c699a33c2a433e239611a7787c45487942ba7ef9d981
+size 4462232

src/assets/pronvideo/videos/van.mp4

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4724e2cab20be89b9148c699a33c2a433e239611a7787c45487942ba7ef9d981
-size 4462232
+oid sha256:19ef3b0027192a8d08ebd3069d0bbc09a3dbfdf2c10262ba0c756db54517d57b
+size 4232804

src/assets/pronvideo/videos/xylophone-old.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:93fc9aef9f9419f344a0ba97ff3b5d1c0743ad121956f462e504e31388893164
+size 5199424

src/assets/pronvideo/videos/xylophone.mp4

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:93fc9aef9f9419f344a0ba97ff3b5d1c0743ad121956f462e504e31388893164
-size 5199424
+oid sha256:dfc61e0844b3df40b4ec74694fd048c3811ba2dd5fd16b48ac48a2619aa4d3a6
+size 18925813

src/assets/pronvideo/videos/yarn-old.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3fc19acd88c47a3f7c33d750ef0f77c2dce6272d51e9e532576c2d00bda52413
+size 5095081

src/assets/pronvideo/videos/yarn.mp4

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3fc19acd88c47a3f7c33d750ef0f77c2dce6272d51e9e532576c2d00bda52413
-size 5095081
+oid sha256:640cb94a1c14d8b733556a81f765319b3eea544b26022f5eece33530523c2b95
+size 15318745