mirror of
https://github.com/SahashRaee/IELTS.git
synced 2026-03-27 13:18:31 +07:00
150 lines
5.8 KiB
HTML
150 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Pronunciation English 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>
|
|
<h1> Pronunciation English 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>
|
|
const defaultWords = [
|
|
"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"
|
|
];
|
|
|
|
// Load words from localStorage or default
|
|
let words = JSON.parse(localStorage.getItem('words')) || defaultWords.slice();
|
|
|
|
// Load theme from localStorage or default dark
|
|
const savedTheme = localStorage.getItem('theme') || 'dark';
|
|
document.body.classList.add(savedTheme);
|
|
|
|
// Word list container
|
|
const wordList = document.getElementById('wordList');
|
|
|
|
// Save words to localStorage
|
|
function saveWords() {
|
|
localStorage.setItem('words', JSON.stringify(words));
|
|
}
|
|
|
|
// Save theme to localStorage
|
|
function saveTheme(theme) {
|
|
localStorage.setItem('theme', theme);
|
|
}
|
|
|
|
// Create word card
|
|
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);
|
|
}
|
|
|
|
// Render word list
|
|
function renderWords(list){
|
|
wordList.innerHTML = '';
|
|
list.forEach((word,index)=>createWordCard(word,index));
|
|
}
|
|
|
|
// Speak function
|
|
function speak(word, lang){
|
|
const utter = new SpeechSynthesisUtterance(word);
|
|
utter.lang = lang;
|
|
utter.rate = 0.85;
|
|
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', ()=>{
|
|
if(document.body.classList.contains('dark')){
|
|
document.body.classList.remove('dark');
|
|
document.body.classList.add('light');
|
|
saveTheme('light');
|
|
} else {
|
|
document.body.classList.remove('light');
|
|
document.body.classList.add('dark');
|
|
saveTheme('dark');
|
|
}
|
|
});
|
|
|
|
// Add new word
|
|
document.getElementById('addWordBtn').addEventListener('click', ()=>{
|
|
const newWord = document.getElementById('newWordInput').value.trim();
|
|
if(newWord && !words.includes(newWord)){
|
|
words.push(newWord);
|
|
saveWords();
|
|
renderWords(words);
|
|
document.getElementById('newWordInput').value = '';
|
|
}
|
|
});
|
|
|
|
// Ensure voices are loaded
|
|
window.speechSynthesis.onvoiceschanged = () => {};
|
|
</script>
|
|
</body>
|
|
</html>
|