name changed

2026-03-27 05:08:31 +07:00 · 2025-10-01 10:56:03 +05:45
parent 9fe8b1f4d8
commit 828c5444e9
1 changed files with 123 additions and 0 deletions
--- a/11_Pronunciation/index.html
+++ b/11_Pronunciation/index.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>IELTS Pronunciation Trainer - 100 Words</title>
+<style>
+:root {
+    --bg-dark: #121212;
+    --bg-light: #f4f4f4;
+    --card-dark: #1e1e1e;
+    --card-light: #ffffff;
+    --text-dark: #ffffff;
+    --text-light: #121212;
+    --accent: #4caf50;
+}
+body.dark { background: var(--bg-dark); color: var(--text-dark); }
+body.light { background: var(--bg-light); color: var(--text-light); }
+body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin:0; padding:20px; transition:0.3s; }
+h1 { text-align:center; margin-bottom:20px; }
+#controls { text-align:center; margin-bottom:20px; }
+#toggleTheme, #addWordBtn { padding:10px 15px; background:var(--accent); border:none; color:#fff; border-radius:5px; cursor:pointer; margin:5px; }
+#searchBar, #newWordInput { padding:10px; font-size:16px; border-radius:5px; border:1px solid #ccc; margin:5px; width:200px; }
+.word-card { display:flex; align-items:center; justify-content:space-between; background:var(--card-dark); padding:10px 15px; border-radius:8px; margin-bottom:10px; transition:0.3s; }
+body.light .word-card { background: var(--card-light); color: var(--text-light); }
+.word { font-size:18px; font-weight:500; }
+.buttons button { margin-left:5px; padding:5px 10px; border-radius:5px; border:none; cursor:pointer; background:var(--accent); color:#fff; font-size:14px; transition:0.3s; }
+.buttons button:hover { background:#388e3c; }
+</style>
+</head>
+<body class="dark">
+<h1>IELTS Pronunciation Trainer - 100 Words</h1>
+<div id="controls">
+    <button id="toggleTheme">Toggle Light/Dark Mode</button><br>
+    <input type="text" id="searchBar" placeholder="Search a word...">
+    <input type="text" id="newWordInput" placeholder="Add new word">
+    <button id="addWordBtn">Add Word</button>
+</div>
+<div id="wordList"></div>
+
+<script>
+let words = [
+"Advertisement","Schedule","Route","Tomato","Leisure","Either","Neither","Garage","Mobile","Privacy",
+"Process","Data","Vase","Zebra","Vehicle","Receipt","Energy","Success","Comfort","Chocolate",
+"Clothes","Ballet","Adult","Often","Focus","Result","Famous","History","Problem","Favorite",
+"Intelligence","Decision","Opportunity","Restaurant","Environment","Culture","Company","Science","Example","Government",
+"Important","Possible","Different","Technology","Development","Interest","Beautiful","Friend","Experience","Language",
+"Education","Health","Professional","Information","Knowledge","Performance","Practice","University","Community","Population",
+"Government","Future","Travel","Exercise","Leader","Quality","Support","Resource","Achievement","Modern",
+"Necessary","Situation","Effort","Material","International","Society","Strategy","Decision","Success","Activity",
+"Individual","Creative","Organization","Research","Understanding","Communication","Positive","Negative","Performance","Solution",
+"Traditional","Modern","Global","Economic","Political","Cultural","Environment","Science","Education","Technology"
+];
+
+const wordList = document.getElementById('wordList');
+
+function createWordCard(word, index) {
+    const card = document.createElement('div');
+    card.className = 'word-card';
+    card.innerHTML = `
+        <div class="word">${index + 1}. ${word}</div>
+        <div class="buttons">
+            <button onclick="speak('${word}','en-US')">US</button>
+            <button onclick="speak('${word}','en-GB')">UK</button>
+        </div>
+    `;
+    wordList.appendChild(card);
+}
+
+function renderWords(list) {
+    wordList.innerHTML = '';
+    list.forEach((word,index)=>createWordCard(word,index));
+}
+
+// Speak function forcing female voice
+function speak(word, lang) {
+    const utter = new SpeechSynthesisUtterance(word);
+    utter.lang = lang;
+    utter.rate = 0.85; // slower like Google TTS
+    let voices = window.speechSynthesis.getVoices();
+    let femaleVoice;
+    if(lang.includes('en-US')) {
+        femaleVoice = voices.find(v => v.lang.includes('en-US') && /zira|samantha/i.test(v.name));
+    } else {
+        femaleVoice = voices.find(v => v.lang.includes('en-GB') && /female|hazel|kate/i.test(v.name));
+    }
+    if(femaleVoice) utter.voice = femaleVoice;
+    window.speechSynthesis.speak(utter);
+}
+
+
+
+// Initial render
+renderWords(words);
+
+// Search filter
+document.getElementById('searchBar').addEventListener('input',(e)=>{
+    const filter = e.target.value.toLowerCase();
+    const filtered = words.filter(word=>word.toLowerCase().includes(filter));
+    renderWords(filtered);
+});
+
+// Toggle Dark/Light
+document.getElementById('toggleTheme').addEventListener('click', ()=>{
+    document.body.classList.toggle('dark');
+    document.body.classList.toggle('light');
+});
+
+// Add new word dynamically
+document.getElementById('addWordBtn').addEventListener('click', ()=>{
+    const newWord = document.getElementById('newWordInput').value.trim();
+    if(newWord && !words.includes(newWord)) {
+        words.push(newWord);
+        renderWords(words);
+        document.getElementById('newWordInput').value = '';
+    }
+});
+
+// Ensure voices are loaded
+window.speechSynthesis.onvoiceschanged = () => {};
+</script>
+</body>
+</html>