diff --git a/package.json b/package.json
index 90a0e4a9c8dfdfc1c6daca6d79f6f94f346c4755..ae1f874123ff17fa014e93ef936b34787bebeb3b 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
"rxjs": "~7.8.0",
"tailwindcss": "^3.4.17",
"tslib": "^2.3.0",
+ "wavesurfer.js": "^7.11.1",
"zone.js": "~0.14.3"
},
"devDependencies": {
diff --git a/src/app/pronunciation/pronunciation.component.css b/src/app/pronunciation/pronunciation.component.css
index 4e8dc6be7a4d8278c2c7338f9f44c5043c5664d2..e4fc3f5cec14adf0f91b6bd17abb67a24af67c90 100644
--- a/src/app/pronunciation/pronunciation.component.css
+++ b/src/app/pronunciation/pronunciation.component.css
@@ -8,8 +8,71 @@
flex-direction: column;
}
+/* Keep the dropdown at the start */
+.dropdown-row {
+ display: flex;
+ align-items: center;
+
+}
+
+/* Accessible helper — hide visually but keep available to screen readers */
+.visually-hidden {
+ position: absolute !important;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+ clip: rect(1px, 1px, 1px, 1px);
+ white-space: nowrap;
+ border: 0;
+ padding: 0;
+ margin: -1px;
+}
+
+/* Styled select that fits the app button styles */
+.select-dropdown {
+ appearance: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ display: inline-block;
+ min-width: 180px;
+ height: 36px;
+ padding: 6px 36px 6px 12px; /* extra right padding for custom arrow */
+ font-size: 14px;
+ line-height: 1;
+ color: #111827;
+ background-color: #ffffff;
+ border: 1px solid #d1d5db;
+ border-radius: 8px;
+ background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%), linear-gradient(to right, #fff, #fff);
+ background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px), 100% 0;
+ background-size: 6px 6px, 6px 6px, 2.5em 2.5em;
+ background-repeat: no-repeat;
+ cursor: pointer;
+}
+
+ /* Hover / focus states for accessibility */
+ .select-dropdown:hover {
+ border-color: #9ca3af;
+ }
+
+ .select-dropdown:focus {
+ outline: none;
+ box-shadow: 0 0 0 3px rgba(59,130,246,0.14);
+ border-color: #3b82f6;
+ }
+
+ /* Smaller variant if needed */
+ .select-dropdown.small {
+ min-width: 140px;
+ height: 32px;
+ font-size: 13px;
+ border-radius: 6px;
+ }
+
.header {
- text-align: center;
+ /*text-align: center;*/
+ display:flex;
+ gap:13vw;
}
.title {
@@ -53,8 +116,8 @@
.controls-section {
display: flex;
flex-direction: column;
- justify-content: center;
- gap: 2vw;
+ justify-content: space-evenly;
+ gap: 0.5vw;
width: 30vw;
}
diff --git a/src/app/pronunciation/pronunciation.component.html b/src/app/pronunciation/pronunciation.component.html
index c46a6867bc6b3939d3b7ab7dd41e75c4f4a72b6e..6aba4ebb9252421b7e0f38a08715a204d81a557b 100644
--- a/src/app/pronunciation/pronunciation.component.html
+++ b/src/app/pronunciation/pronunciation.component.html
@@ -1,7 +1,16 @@
@@ -44,7 +53,7 @@
[class.active]="!isOriginal"
(click)="isOriginal = false; updateSelection()">
Original Voice
-
+
+
+
+