420 lines
17 KiB
HTML
420 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Pronunciation — English Easy</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<style>
|
||
.pron-card {
|
||
background: var(--white);
|
||
border: 1px solid var(--gray-100);
|
||
border-radius: 20px;
|
||
padding: 24px 28px;
|
||
margin-bottom: 16px;
|
||
box-shadow: var(--shadow);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
transition: all 0.3s;
|
||
}
|
||
.pron-card:hover {
|
||
box-shadow: var(--shadow-hover);
|
||
}
|
||
.pron-word {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.pron-word .word {
|
||
font-size: 24px;
|
||
font-weight: 800;
|
||
color: var(--accent);
|
||
}
|
||
.pron-word .transcription {
|
||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||
font-size: 16px;
|
||
color: var(--gray-500);
|
||
background: var(--gray-100);
|
||
padding: 4px 12px;
|
||
border-radius: 8px;
|
||
}
|
||
.pron-word .translation {
|
||
font-size: 15px;
|
||
color: var(--gray-500);
|
||
}
|
||
.pron-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.pron-actions .btn {
|
||
font-size: 13px;
|
||
padding: 8px 16px;
|
||
border-radius: 10px;
|
||
}
|
||
.btn-listen {
|
||
background: var(--green);
|
||
color: var(--white);
|
||
box-shadow: 0 3px 10px rgba(0,184,148,0.2);
|
||
}
|
||
.btn-listen:hover {
|
||
box-shadow: 0 6px 20px rgba(0,184,148,0.3);
|
||
}
|
||
.btn-slow {
|
||
background: var(--accent-50);
|
||
color: var(--accent);
|
||
box-shadow: none;
|
||
border: 2px solid var(--accent-light);
|
||
}
|
||
.btn-slow:hover {
|
||
background: var(--accent);
|
||
color: var(--white);
|
||
}
|
||
.tip-box {
|
||
background: var(--warm-light);
|
||
border-left: 4px solid #fdcb6e;
|
||
padding: 16px 20px;
|
||
border-radius: 12px;
|
||
margin-bottom: 24px;
|
||
font-size: 15px;
|
||
color: var(--ink);
|
||
}
|
||
.tip-box strong {
|
||
color: #e17055;
|
||
}
|
||
.phonetics-intro {
|
||
max-width: 700px;
|
||
margin: 0 auto 32px;
|
||
text-align: center;
|
||
color: var(--gray-500);
|
||
}
|
||
@media (max-width: 600px) {
|
||
.pron-card {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
.pron-word .word {
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="stars-bg" id="stars-bg"></div>
|
||
<header>
|
||
<div class="header-inner">
|
||
<a href="index.html" class="logo"><span class="logo-icon">E</span>English <span>Easy</span></a>
|
||
<button class="menu-toggle" aria-label="Menu">☰</button>
|
||
<nav>
|
||
<ul class="nav-list">
|
||
<li><a href="index.html" data-i18n="nav-home">Home</a></li>
|
||
<li><a href="vocabulary.html" data-i18n="nav-vocabulary">Vocabulary</a></li>
|
||
<li><a href="grammar.html" data-i18n="nav-grammar">Grammar</a></li>
|
||
<li><a href="pronunciation.html" data-i18n="nav-pronunciation">Pronunciation</a></li>
|
||
<li><a href="exercises.html" data-i18n="nav-exercises">Exercises</a></li>
|
||
<li><a href="tests.html" data-i18n="nav-tests">Tests</a></li>
|
||
<li><a href="reading.html" data-i18n="nav-reading">Reading</a></li>
|
||
<li><a href="progress.html" data-i18n="nav-progress">Progress</a></li>
|
||
<li><a href="contact.html" data-i18n="nav-contact">Contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="page-header">
|
||
<div class="container">
|
||
<h1 data-i18n="page-pronunciation-title">Pronunciation</h1>
|
||
<p data-i18n="page-pronunciation-desc">Listen, repeat, and improve your English pronunciation.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="container">
|
||
|
||
<div class="tip-box" data-i18n="pron-tip">
|
||
<strong>💡 Tip:</strong> Click <strong>Listen</strong> to hear the word, then repeat it out loud. Use <strong>Slow</strong> to hear it spoken slowly. Practice every day!
|
||
</div>
|
||
|
||
<div class="phonetics-intro">
|
||
<p>Click on any word to hear how it's pronounced. Repeat after the speaker. The transcription shows you how to read the sounds.</p>
|
||
</div>
|
||
|
||
<!-- Common Words -->
|
||
<h2 class="section-title" style="font-size:28px;margin-bottom:24px;" data-i18n="pron-common-words">Common <span>Words</span></h2>
|
||
|
||
<div class="pron-card">
|
||
<div class="pron-word">
|
||
<span class="word">Hello</span>
|
||
<span class="transcription">/həˈloʊ/</span>
|
||
<span class="translation">Привет</span>
|
||
</div>
|
||
<div class="pron-actions">
|
||
<button class="btn btn-listen" data-word="Hello" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||
<button class="btn btn-slow" data-word="Hello" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pron-card">
|
||
<div class="pron-word">
|
||
<span class="word">Goodbye</span>
|
||
<span class="transcription">/ɡʊdˈbaɪ/</span>
|
||
<span class="translation">До свидания</span>
|
||
</div>
|
||
<div class="pron-actions">
|
||
<button class="btn btn-listen" data-word="Goodbye" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||
<button class="btn btn-slow" data-word="Goodbye" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pron-card">
|
||
<div class="pron-word">
|
||
<span class="word">Thank you</span>
|
||
<span class="transcription">/θæŋk juː/</span>
|
||
<span class="translation">Спасибо</span>
|
||
</div>
|
||
<div class="pron-actions">
|
||
<button class="btn btn-listen" data-word="Thank you" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||
<button class="btn btn-slow" data-word="Thank you" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pron-card">
|
||
<div class="pron-word">
|
||
<span class="word">Please</span>
|
||
<span class="transcription">/pliːz/</span>
|
||
<span class="translation">Пожалуйста</span>
|
||
</div>
|
||
<div class="pron-actions">
|
||
<button class="btn btn-listen" data-word="Please" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||
<button class="btn btn-slow" data-word="Please" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pron-card">
|
||
<div class="pron-word">
|
||
<span class="word">Sorry</span>
|
||
<span class="transcription">/ˈsɒri/</span>
|
||
<span class="translation">Извините</span>
|
||
</div>
|
||
<div class="pron-actions">
|
||
<button class="btn btn-listen" data-word="Sorry" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||
<button class="btn btn-slow" data-word="Sorry" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pron-card">
|
||
<div class="pron-word">
|
||
<span class="word">Water</span>
|
||
<span class="transcription">/ˈwɔːtər/</span>
|
||
<span class="translation">Вода</span>
|
||
</div>
|
||
<div class="pron-actions">
|
||
<button class="btn btn-listen" data-word="Water" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||
<button class="btn btn-slow" data-word="Water" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pron-card">
|
||
<div class="pron-word">
|
||
<span class="word">Beautiful</span>
|
||
<span class="transcription">/ˈbjuːtɪfəl/</span>
|
||
<span class="translation">Красивый</span>
|
||
</div>
|
||
<div class="pron-actions">
|
||
<button class="btn btn-listen" data-word="Beautiful" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||
<button class="btn btn-slow" data-word="Beautiful" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pron-card">
|
||
<div class="pron-word">
|
||
<span class="word">Important</span>
|
||
<span class="transcription">/ɪmˈpɔːrtənt/</span>
|
||
<span class="translation">Важный</span>
|
||
</div>
|
||
<div class="pron-actions">
|
||
<button class="btn btn-listen" data-word="Important" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||
<button class="btn btn-slow" data-word="Important" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pron-card">
|
||
<div class="pron-word">
|
||
<span class="word">Different</span>
|
||
<span class="transcription">/ˈdɪfərənt/</span>
|
||
<span class="translation">Разный</span>
|
||
</div>
|
||
<div class="pron-actions">
|
||
<button class="btn btn-listen" data-word="Different" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||
<button class="btn btn-slow" data-word="Different" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pron-card">
|
||
<div class="pron-word">
|
||
<span class="word">Family</span>
|
||
<span class="transcription">/ˈfæməli/</span>
|
||
<span class="translation">Семья</span>
|
||
</div>
|
||
<div class="pron-actions">
|
||
<button class="btn btn-listen" data-word="Family" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||
<button class="btn btn-slow" data-word="Family" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pron-card">
|
||
<div class="pron-word">
|
||
<span class="word">Weather</span>
|
||
<span class="transcription">/ˈweðər/</span>
|
||
<span class="translation">Погода</span>
|
||
</div>
|
||
<div class="pron-actions">
|
||
<button class="btn btn-listen" data-word="Weather" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||
<button class="btn btn-slow" data-word="Weather" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pron-card">
|
||
<div class="pron-word">
|
||
<span class="word">Morning</span>
|
||
<span class="transcription">/ˈmɔːrnɪŋ/</span>
|
||
<span class="translation">Утро</span>
|
||
</div>
|
||
<div class="pron-actions">
|
||
<button class="btn btn-listen" data-word="Morning" onclick="repeatWord(this)" data-i18n="pron-listen">🔊 Listen</button>
|
||
<button class="btn btn-slow" data-word="Morning" onclick="speakSlow(this)" data-i18n="pron-slow">🐢 Slow</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Phrases -->
|
||
<h2 class="section-title" style="font-size:28px;margin-bottom:24px;margin-top:48px;" data-i18n="pron-common-phrases">Common <span>Phrases</span></h2>
|
||
|
||
<div class="pron-card">
|
||
<div class="pron-word">
|
||
<span class="word">How are you?</span>
|
||
<span class="translation">Как дела?</span>
|
||
</div>
|
||
<div class="pron-actions">
|
||
<button class="btn btn-listen" data-phrase="How are you?" onclick="speakPhrase(this)" data-i18n="pron-listen">🔊 Hear Phrase</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pron-card">
|
||
<div class="pron-word">
|
||
<span class="word">I am fine, thank you.</span>
|
||
<span class="translation">Я в порядке, спасибо.</span>
|
||
</div>
|
||
<div class="pron-actions">
|
||
<button class="btn btn-listen" data-phrase="I am fine, thank you." onclick="speakPhrase(this)" data-i18n="pron-listen">🔊 Hear Phrase</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pron-card">
|
||
<div class="pron-word">
|
||
<span class="word">Nice to meet you.</span>
|
||
<span class="translation">Приятно познакомиться.</span>
|
||
</div>
|
||
<div class="pron-actions">
|
||
<button class="btn btn-listen" data-phrase="Nice to meet you." onclick="speakPhrase(this)" data-i18n="pron-listen">🔊 Hear Phrase</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pron-card">
|
||
<div class="pron-word">
|
||
<span class="word">What is your name?</span>
|
||
<span class="translation">Как тебя зовут?</span>
|
||
</div>
|
||
<div class="pron-actions">
|
||
<button class="btn btn-listen" data-phrase="What is your name?" onclick="speakPhrase(this)" data-i18n="pron-listen">🔊 Hear Phrase</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pron-card">
|
||
<div class="pron-word">
|
||
<span class="word">Where are you from?</span>
|
||
<span class="translation">Откуда ты?</span>
|
||
</div>
|
||
<div class="pron-actions">
|
||
<button class="btn btn-listen" data-phrase="Where are you from?" onclick="speakPhrase(this)" data-i18n="pron-listen">🔊 Hear Phrase</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pronunciation Tips -->
|
||
<h2 class="section-title" style="font-size:28px;margin-bottom:24px;margin-top:48px;" data-i18n="pron-tips">Pronunciation <span>Tips</span></h2>
|
||
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;">
|
||
<div class="grammar-card">
|
||
<h3 data-i18n="pron-th-sound">👄 The "th" Sound</h3>
|
||
<p data-i18n="pron-th-desc">Put your tongue between your teeth and blow air.</p>
|
||
<div class="formula">Think /θɪŋk/ — Thank you /θæŋk juː/</div>
|
||
</div>
|
||
<div class="grammar-card">
|
||
<h3 data-i18n="pron-r-sound">🗣️ The "r" Sound</h3>
|
||
<p data-i18n="pron-r-desc">In English, the tongue does not touch the top of the mouth.</p>
|
||
<div class="formula">Red /red/ — Right /raɪt/</div>
|
||
</div>
|
||
<div class="grammar-card">
|
||
<h3 data-i18n="pron-stress">🎵 Word Stress</h3>
|
||
<p data-i18n="pron-stress-desc">English words have one stressed syllable. Say it louder and longer.</p>
|
||
<div class="formula">im<strong>POR</strong>tant — <strong>BEAU</strong>tiful</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Dictation -->
|
||
<h2 class="section-title" style="font-size:28px;margin-bottom:24px;margin-top:48px;" data-i18n="pron-dictation">Dictation <span>Practice</span></h2>
|
||
<p class="section-subtitle" data-i18n="pron-dictation-desc">Listen to the word, then type what you hear.</p>
|
||
|
||
<div class="exercise">
|
||
<h3>Listen and type the word</h3>
|
||
<p class="question">🔊 Click the button to hear a word, then type it:</p>
|
||
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px;">
|
||
<button class="btn btn-listen" data-word="Hello" onclick="repeatWord(this)">🔊 Hear Word</button>
|
||
<input type="text" class="fill-input" data-answer="hello" placeholder="Type the word..." style="width:180px;">
|
||
<button class="btn" onclick="checkDictation(this.previousElementSibling)" data-i18n="btn-check">Check</button>
|
||
</div>
|
||
<div class="feedback"></div>
|
||
</div>
|
||
|
||
<div class="exercise">
|
||
<h3>Listen and type the word</h3>
|
||
<p class="question">🔊 Click the button to hear a word, then type it:</p>
|
||
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px;">
|
||
<button class="btn btn-listen" data-word="Friend" onclick="repeatWord(this)">🔊 Hear Word</button>
|
||
<input type="text" class="fill-input" data-answer="friend" placeholder="Type the word..." style="width:180px;">
|
||
<button class="btn" onclick="checkDictation(this.previousElementSibling)" data-i18n="btn-check">Check</button>
|
||
</div>
|
||
<div class="feedback"></div>
|
||
</div>
|
||
|
||
<div class="exercise">
|
||
<h3>Listen and type the word</h3>
|
||
<p class="question">🔊 Click the button to hear a word, then type it:</p>
|
||
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px;">
|
||
<button class="btn btn-listen" data-word="Teacher" onclick="repeatWord(this)">🔊 Hear Word</button>
|
||
<input type="text" class="fill-input" data-answer="teacher" placeholder="Type the word..." style="width:180px;">
|
||
<button class="btn" onclick="checkDictation(this.previousElementSibling)" data-i18n="btn-check">Check</button>
|
||
</div>
|
||
<div class="feedback"></div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<p>© 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="js/lang.js"></script>
|
||
<script src="js/script.js"></script>
|
||
</body>
|
||
</html>
|