From f037ee90639c1872a1219f6d01e2c141dc7def7e Mon Sep 17 00:00:00 2001
From: sultanbek_askaruly <askaruly.sultanbek@gmail.com>
Date: Fri, 19 Jun 2026 07:27:28 +0000
Subject: [PATCH] add language switcher (EN/RU/KK) with full i18n support

---
 contact.html       |  41 ++---
 css/style.css      |  33 +++-
 exercises.html     |  45 ++---
 grammar.html       |  49 ++---
 index.html         | 101 +++++------
 js/lang.js         | 434 +++++++++++++++++++++++++++++++++++++++++++++
 progress.html      |  25 +--
 pronunciation.html | 113 ++++++------
 reading.html       |  25 +--
 tests.html         |  27 +--
 vocabulary.html    |  43 ++---
 11 files changed, 705 insertions(+), 231 deletions(-)
 create mode 100644 js/lang.js

diff --git a/contact.html b/contact.html
index 78922b6..a2e932f 100644
--- a/contact.html
+++ b/contact.html
@@ -17,15 +17,15 @@
       <button class="menu-toggle" aria-label="Menu">☰</button>
       <nav>
         <ul class="nav-list">
-          <li><a href="index.html">Home</a></li>
-          <li><a href="vocabulary.html">Vocabulary</a></li>
-          <li><a href="grammar.html">Grammar</a></li>
-          <li><a href="pronunciation.html">Pronunciation</a></li>
-          <li><a href="exercises.html">Exercises</a></li>
-          <li><a href="tests.html">Tests</a></li>
-          <li><a href="reading.html">Reading</a></li>
-          <li><a href="progress.html">Progress</a></li>
-          <li><a href="contact.html">Contact</a></li>
+          <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>
@@ -33,8 +33,8 @@
 
   <section class="page-header">
     <div class="container">
-      <h1>Contact Us</h1>
-      <p>Have a question or suggestion? Send us a message!</p>
+      <h1 data-i18n="page-contact-title">Contact Us</h1>
+      <p data-i18n="page-contact-desc">Have a question or suggestion? Send us a message!</p>
     </div>
   </section>
 
@@ -42,29 +42,30 @@
     <div class="container">
       <form class="contact-form" id="contact-form" onsubmit="submitForm(event)">
         <div class="form-group">
-          <label for="name">Name</label>
-          <input type="text" id="name" name="name" placeholder="Your name" required>
+          <label for="name" data-i18n="form-name">Name</label>
+          <input type="text" id="name" name="name" placeholder="Your name" required data-i18n-placeholder="form-name-placeholder">
         </div>
         <div class="form-group">
-          <label for="email">Email</label>
-          <input type="email" id="email" name="email" placeholder="your@email.com" required>
+          <label for="email" data-i18n="form-email">Email</label>
+          <input type="email" id="email" name="email" placeholder="your@email.com" required data-i18n-placeholder="form-email-placeholder">
         </div>
         <div class="form-group">
-          <label for="message">Message</label>
-          <textarea id="message" name="message" placeholder="Write your message here..." required></textarea>
+          <label for="message" data-i18n="form-message">Message</label>
+          <textarea id="message" name="message" placeholder="Write your message here..." required data-i18n-placeholder="form-message-placeholder"></textarea>
         </div>
-        <button type="submit" class="btn btn-primary">Send Message</button>
-        <div class="form-message" id="form-message">Thank you! Your message has been received.</div>
+        <button type="submit" class="btn btn-primary" data-i18n="form-send">Send Message</button>
+        <div class="form-message" id="form-message" data-i18n="form-thankyou">Thank you! Your message has been received.</div>
       </form>
     </div>
   </section>
 
   <footer>
     <div class="container">
-      <p>&copy; 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>
+      <p>&copy; 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>
diff --git a/css/style.css b/css/style.css
index a2928d7..eacc0a0 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1336,7 +1336,38 @@ footer a:hover {
 
 /* ===== MOBILE ===== */
 @media (max-width: 768px) {
-  .menu-toggle {
+.lang-switcher {
+  display: flex;
+  gap: 2px;
+  margin-left: 12px;
+}
+
+.lang-btn {
+  background: none;
+  border: 1px solid var(--gold-dark);
+  color: var(--parchment-dark);
+  font-family: 'Cinzel', serif;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 4px 8px;
+  cursor: pointer;
+  transition: all 0.3s;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.lang-btn:hover {
+  color: var(--gold);
+  background: rgba(201, 168, 76, 0.1);
+}
+
+.lang-btn.active {
+  background: var(--gold);
+  color: var(--night);
+  border-color: var(--gold);
+}
+
+.menu-toggle {
     display: block;
   }
 
diff --git a/exercises.html b/exercises.html
index 5a7e024..1902148 100644
--- a/exercises.html
+++ b/exercises.html
@@ -17,15 +17,15 @@
       <button class="menu-toggle" aria-label="Menu">☰</button>
       <nav>
         <ul class="nav-list">
-          <li><a href="index.html">Home</a></li>
-          <li><a href="vocabulary.html">Vocabulary</a></li>
-          <li><a href="grammar.html">Grammar</a></li>
-          <li><a href="pronunciation.html">Pronunciation</a></li>
-          <li><a href="exercises.html">Exercises</a></li>
-          <li><a href="tests.html">Tests</a></li>
-          <li><a href="reading.html">Reading</a></li>
-          <li><a href="progress.html">Progress</a></li>
-          <li><a href="contact.html">Contact</a></li>
+          <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>
@@ -33,8 +33,8 @@
 
   <section class="page-header">
     <div class="container">
-      <h1>Exercises</h1>
-      <p>Practice your English with these fun exercises.</p>
+      <h1 data-i18n="page-exercises-title">Exercises</h1>
+      <p data-i18n="page-exercises-desc">Practice your English with these fun exercises.</p>
     </div>
   </section>
 
@@ -50,7 +50,7 @@
           <label class="option"><input type="radio" name="ex1" value="false"> studies</label>
           <label class="option"><input type="radio" name="ex1" value="false"> studied</label>
         </div>
-        <button class="btn btn-primary" onclick="checkExercise(this)">Check</button>
+        <button class="btn btn-primary" onclick="checkExercise(this)" data-i18n="btn-check">Check</button>
         <div class="feedback"></div>
       </div>
 
@@ -63,7 +63,7 @@
           <label class="option"><input type="radio" name="ex2" value="true"> is</label>
           <label class="option"><input type="radio" name="ex2" value="false"> are</label>
         </div>
-        <button class="btn btn-primary" onclick="checkExercise(this)">Check</button>
+        <button class="btn btn-primary" onclick="checkExercise(this)" data-i18n="btn-check">Check</button>
         <div class="feedback"></div>
       </div>
 
@@ -76,7 +76,7 @@
           <label class="option"><input type="radio" name="ex3" value="true"> played</label>
           <label class="option"><input type="radio" name="ex3" value="false"> playing</label>
         </div>
-        <button class="btn btn-primary" onclick="checkExercise(this)">Check</button>
+        <button class="btn btn-primary" onclick="checkExercise(this)" data-i18n="btn-check">Check</button>
         <div class="feedback"></div>
       </div>
 
@@ -88,7 +88,7 @@
           <input type="text" class="fill-input" data-answer="read" placeholder="Type your answer">
         </div>
         <br>
-        <button class="btn btn-primary" onclick="checkFill(this.previousElementSibling.previousElementSibling.querySelector('input'))">Check</button>
+        <button class="btn btn-primary" onclick="checkFill(this.previousElementSibling.previousElementSibling.querySelector('input'))" data-i18n="btn-check">Check</button>
         <div class="feedback"></div>
       </div>
 
@@ -100,7 +100,7 @@
           <input type="text" class="fill-input" data-answer="goes" placeholder="Type your answer">
         </div>
         <br>
-        <button class="btn btn-primary" onclick="checkFill(this.previousElementSibling.previousElementSibling.querySelector('input'))">Check</button>
+        <button class="btn btn-primary" onclick="checkFill(this.previousElementSibling.previousElementSibling.querySelector('input'))" data-i18n="btn-check">Check</button>
         <div class="feedback"></div>
       </div>
 
@@ -112,7 +112,7 @@
           <input type="text" class="fill-input" data-answer="were" placeholder="Type your answer">
         </div>
         <br>
-        <button class="btn btn-primary" onclick="checkFill(this.previousElementSibling.previousElementSibling.querySelector('input'))">Check</button>
+        <button class="btn btn-primary" onclick="checkFill(this.previousElementSibling.previousElementSibling.querySelector('input'))" data-i18n="btn-check">Check</button>
         <div class="feedback"></div>
       </div>
 
@@ -124,7 +124,7 @@
           <input type="text" class="fill-input" data-answer="i like music" placeholder="Type your translation">
         </div>
         <br>
-        <button class="btn btn-primary" onclick="checkTranslate(this)">Check</button>
+        <button class="btn btn-primary" onclick="checkTranslate(this)" data-i18n="btn-check">Check</button>
         <div class="feedback"></div>
       </div>
 
@@ -136,7 +136,7 @@
           <input type="text" class="fill-input" data-answer="he is my friend" placeholder="Type your translation">
         </div>
         <br>
-        <button class="btn btn-primary" onclick="checkTranslate(this)">Check</button>
+        <button class="btn btn-primary" onclick="checkTranslate(this)" data-i18n="btn-check">Check</button>
         <div class="feedback"></div>
       </div>
 
@@ -149,7 +149,7 @@
           <div>School → <input type="text" class="fill-input" data-answer="школа" style="width:120px;"></div>
           <div>Friend → <input type="text" class="fill-input" data-answer="друг" style="width:120px;"></div>
         </div>
-        <button class="btn btn-primary" onclick="checkMatch(this)">Check All</button>
+        <button class="btn btn-primary" onclick="checkMatch(this)" data-i18n="btn-check">Check All</button>
         <div class="feedback"></div>
       </div>
 
@@ -162,7 +162,7 @@
           <label class="option"><input type="radio" name="ex10" value="true"> an</label>
           <label class="option"><input type="radio" name="ex10" value="false"> the</label>
         </div>
-        <button class="btn btn-primary" onclick="checkExercise(this)">Check</button>
+        <button class="btn btn-primary" onclick="checkExercise(this)" data-i18n="btn-check">Check</button>
         <div class="feedback"></div>
       </div>
 
@@ -171,10 +171,11 @@
 
   <footer>
     <div class="container">
-      <p>&copy; 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>
+      <p><p><p><p>&copy; 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>copy; 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>copy; 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>copy; 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>
diff --git a/grammar.html b/grammar.html
index 5662712..4a3242b 100644
--- a/grammar.html
+++ b/grammar.html
@@ -17,15 +17,15 @@
       <button class="menu-toggle" aria-label="Menu">☰</button>
       <nav>
         <ul class="nav-list">
-          <li><a href="index.html">Home</a></li>
-          <li><a href="vocabulary.html">Vocabulary</a></li>
-          <li><a href="grammar.html">Grammar</a></li>
-          <li><a href="pronunciation.html">Pronunciation</a></li>
-          <li><a href="exercises.html">Exercises</a></li>
-          <li><a href="tests.html">Tests</a></li>
-          <li><a href="reading.html">Reading</a></li>
-          <li><a href="progress.html">Progress</a></li>
-          <li><a href="contact.html">Contact</a></li>
+          <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>
@@ -33,8 +33,8 @@
 
   <section class="page-header">
     <div class="container">
-      <h1>Grammar</h1>
-      <p>Simple explanations of English grammar with formulas and examples.</p>
+      <h1 data-i18n="page-grammar-title">Grammar</h1>
+      <p data-i18n="page-grammar-desc">Simple explanations of English grammar with formulas and examples.</p>
     </div>
   </section>
 
@@ -42,8 +42,8 @@
     <div class="container">
       <div class="grammar-grid">
         <div class="grammar-card">
-          <h3>Present Simple</h3>
-          <p>Present Simple is used for habits, routines, and general facts.</p>
+          <h3 data-i18n="grammar-present-simple">Present Simple</h3>
+          <p data-i18n="grammar-present-simple-desc">Present Simple is used for habits, routines, and general facts.</p>
           <div class="formula">Subject + V / V+s (he/she/it)</div>
           <ul class="examples">
             <li>I study English every day.</li>
@@ -53,8 +53,8 @@
         </div>
 
         <div class="grammar-card">
-          <h3>Past Simple</h3>
-          <p>Past Simple is used for completed actions in the past.</p>
+          <h3 data-i18n="grammar-past-simple">Past Simple</h3>
+          <p data-i18n="grammar-past-simple-desc">Past Simple is used for completed actions in the past.</p>
           <div class="formula">Subject + V-ed (regular) / V2 (irregular)</div>
           <ul class="examples">
             <li>I visited my grandmother yesterday.</li>
@@ -64,8 +64,8 @@
         </div>
 
         <div class="grammar-card">
-          <h3>Future Simple (will)</h3>
-          <p>Future Simple is used for predictions, promises, and spontaneous decisions.</p>
+          <h3 data-i18n="grammar-future-simple">Future Simple (will)</h3>
+          <p data-i18n="grammar-future-simple-desc">Future Simple is used for predictions, promises, and spontaneous decisions.</p>
           <div class="formula">Subject + will + V</div>
           <ul class="examples">
             <li>I will call you tomorrow.</li>
@@ -75,8 +75,8 @@
         </div>
 
         <div class="grammar-card">
-          <h3>Articles: a / an / the</h3>
-          <p>Use <strong>a</strong> before consonant sounds, <strong>an</strong> before vowel sounds, and <strong>the</strong> for specific things.</p>
+          <h3 data-i18n="grammar-articles">Articles: a / an / the</h3>
+          <p data-i18n="grammar-articles-desc">Use <strong>a</strong> before consonant sounds, <strong>an</strong> before vowel sounds, and <strong>the</strong> for specific things.</p>
           <div class="formula">a + consonant sound &nbsp;|&nbsp; an + vowel sound &nbsp;|&nbsp; the + specific</div>
           <ul class="examples">
             <li>I have <strong>a</strong> book.</li>
@@ -86,8 +86,8 @@
         </div>
 
         <div class="grammar-card">
-          <h3>Pronouns</h3>
-          <p>Pronouns replace nouns. They can be subject or object pronouns.</p>
+          <h3 data-i18n="grammar-pronouns">Pronouns</h3>
+          <p data-i18n="grammar-pronouns-desc">Pronouns replace nouns. They can be subject or object pronouns.</p>
           <div class="formula">I / you / he / she / it / we / they (subject)</div>
           <ul class="examples">
             <li><strong>She</strong> is a student.</li>
@@ -97,8 +97,8 @@
         </div>
 
         <div class="grammar-card">
-          <h3>Prepositions</h3>
-          <p>Prepositions show relationships of time, place, and direction.</p>
+          <h3 data-i18n="grammar-prepositions">Prepositions</h3>
+          <p data-i18n="grammar-prepositions-desc">Prepositions show relationships of time, place, and direction.</p>
           <div class="formula">in / on / at / under / next to / between</div>
           <ul class="examples">
             <li>The book is <strong>on</strong> the table.</li>
@@ -112,10 +112,11 @@
 
   <footer>
     <div class="container">
-      <p>&copy; 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>
+      <p>&copy; 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>
diff --git a/index.html b/index.html
index 13da396..b60b644 100644
--- a/index.html
+++ b/index.html
@@ -17,15 +17,15 @@
       <button class="menu-toggle" aria-label="Menu">☰</button>
       <nav>
         <ul class="nav-list">
-          <li><a href="index.html">Home</a></li>
-          <li><a href="vocabulary.html">Vocabulary</a></li>
-          <li><a href="grammar.html">Grammar</a></li>
-          <li><a href="pronunciation.html">Pronunciation</a></li>
-          <li><a href="exercises.html">Exercises</a></li>
-          <li><a href="tests.html">Tests</a></li>
-          <li><a href="reading.html">Reading</a></li>
-          <li><a href="progress.html">Progress</a></li>
-          <li><a href="contact.html">Contact</a></li>
+          <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>
@@ -33,62 +33,62 @@
 
   <section class="hero">
     <div class="container">
-      <div class="hero-badge">⚡ Welcome to Hogwarts School of English</div>
-      <h1>Master the <span class="highlight">Magic</span> of English</h1>
-      <p>Discover vocabulary, grammar, exercises, reading, and tests — your magical journey to speaking English begins now.</p>
+      <div class="hero-badge" data-i18n="hero-badge">⚡ Welcome to Hogwarts School of English</div>
+      <h1 data-i18n="hero-title">Master the <span class="highlight">Magic</span> of English</h1>
+      <p data-i18n="hero-subtitle">Discover vocabulary, grammar, exercises, reading, and tests — your magical journey to speaking English begins now.</p>
       <div class="hero-buttons">
-        <a href="vocabulary.html" class="btn">🔮 Begin Your Journey</a>
-        <a href="exercises.html" class="btn btn-outline">✨ Try a Spell (Exercise)</a>
+        <a href="vocabulary.html" class="btn" data-i18n="btn-begin">🔮 Begin Your Journey</a>
+        <a href="exercises.html" class="btn btn-outline" data-i18n="btn-try">✨ Try a Spell (Exercise)</a>
       </div>
     </div>
   </section>
 
   <section class="section">
     <div class="container">
-      <h2 class="section-title">Your <span>Magical</span> Subjects</h2>
-      <p class="section-subtitle">Like a wizard at Hogwarts, master every branch of English magic.</p>
+      <h2 class="section-title" data-i18n="section-subjects-title">Your <span>Magical</span> Subjects</h2>
+      <p class="section-subtitle" data-i18n="section-subjects-subtitle">Like a wizard at Hogwarts, master every branch of English magic.</p>
       <div class="cards-grid">
         <div class="card">
           <div class="card-icon">📖</div>
-          <h3>Vocabulary</h3>
-          <p>Learn new words with translations and example sentences. Over 20 words to start with!</p>
-          <a href="vocabulary.html" class="btn btn-primary">Explore Words</a>
+          <h3 data-i18n="card-vocab-title">Vocabulary</h3>
+          <p data-i18n="card-vocab-desc">Learn new words with translations and example sentences. Over 20 words to start with!</p>
+          <a href="vocabulary.html" class="btn btn-primary" data-i18n="card-vocab-btn">Explore Words</a>
         </div>
         <div class="card">
           <div class="card-icon">📝</div>
-          <h3>Grammar</h3>
-          <p>Simple explanations of English grammar with formulas and examples. Present Simple, Past Simple, and more.</p>
-          <a href="grammar.html" class="btn btn-primary">Study Grammar</a>
+          <h3 data-i18n="card-grammar-title">Grammar</h3>
+          <p data-i18n="card-grammar-desc">Simple explanations of English grammar with formulas and examples. Present Simple, Past Simple, and more.</p>
+          <a href="grammar.html" class="btn btn-primary" data-i18n="card-grammar-btn">Study Grammar</a>
         </div>
         <div class="card">
           <div class="card-icon">💪</div>
-          <h3>Exercises</h3>
-          <p>Practice what you learn with fun exercises. Choose answers, fill gaps, and translate sentences.</p>
-          <a href="exercises.html" class="btn btn-primary">Practice Now</a>
+          <h3 data-i18n="card-exercises-title">Exercises</h3>
+          <p data-i18n="card-exercises-desc">Practice what you learn with fun exercises. Choose answers, fill gaps, and translate sentences.</p>
+          <a href="exercises.html" class="btn btn-primary" data-i18n="card-exercises-btn">Practice Now</a>
         </div>
         <div class="card">
           <div class="card-icon">📊</div>
-          <h3>Tests</h3>
-          <p>Check your knowledge with a full test. 10 questions to test your vocabulary, grammar, and reading.</p>
-          <a href="tests.html" class="btn btn-primary">Take a Test</a>
+          <h3 data-i18n="card-tests-title">Tests</h3>
+          <p data-i18n="card-tests-desc">Check your knowledge with a full test. 10 questions to test your vocabulary, grammar, and reading.</p>
+          <a href="tests.html" class="btn btn-primary" data-i18n="card-tests-btn">Take a Test</a>
         </div>
         <div class="card">
           <div class="card-icon">📚</div>
-          <h3>Reading</h3>
-          <p>Read short and simple texts in English. Each text has questions to check your understanding.</p>
-          <a href="reading.html" class="btn btn-primary">Start Reading</a>
+          <h3 data-i18n="card-reading-title">Reading</h3>
+          <p data-i18n="card-reading-desc">Read short and simple texts in English. Each text has questions to check your understanding.</p>
+          <a href="reading.html" class="btn btn-primary" data-i18n="card-reading-btn">Start Reading</a>
         </div>
         <div class="card">
           <div class="card-icon">🗣️</div>
-          <h3>Pronunciation</h3>
-          <p>Listen to words and phrases spoken aloud. Practice your pronunciation and improve your speaking skills.</p>
-          <a href="pronunciation.html" class="btn btn-primary">Start Speaking</a>
+          <h3 data-i18n="card-pronunciation-title">Pronunciation</h3>
+          <p data-i18n="card-pronunciation-desc">Listen to words and phrases spoken aloud. Practice your pronunciation and improve your speaking skills.</p>
+          <a href="pronunciation.html" class="btn btn-primary" data-i18n="card-pronunciation-btn">Start Speaking</a>
         </div>
         <div class="card">
           <div class="card-icon">📊</div>
-          <h3>My Progress</h3>
-          <p>Track your XP, level, and completed activities. Watch yourself improve from Beginner to Advanced!</p>
-          <a href="progress.html" class="btn btn-primary">View Progress</a>
+          <h3 data-i18n="card-progress-title">My Progress</h3>
+          <p data-i18n="card-progress-desc">Track your XP, level, and completed activities. Watch yourself improve from Beginner to Advanced!</p>
+          <a href="progress.html" class="btn btn-primary" data-i18n="card-progress-btn">View Progress</a>
         </div>
       </div>
     </div>
@@ -97,36 +97,36 @@
   <section class="section motivation-banner" style="padding:0;background:none;">
     <div class="container">
       <div class="motivation-banner">
-        <h3>✨ The Chamber of Progress Awaits</h3>
-        <p>Every great wizard started with their first spell. Begin your English magic today!</p>
+        <h3 data-i18n="motivation-title">✨ The Chamber of Progress Awaits</h3>
+        <p data-i18n="motivation-desc">Every great wizard started with their first spell. Begin your English magic today!</p>
       </div>
     </div>
   </section>
 
   <section class="section section-alt">
     <div class="container">
-      <h2 class="section-title">The Four <span>Houses</span></h2>
-      <p class="section-subtitle">Choose your path — every house has its own strength in learning English.</p>
+      <h2 class="section-title" data-i18n="section-houses-title">The Four <span>Houses</span></h2>
+      <p class="section-subtitle" data-i18n="section-houses-subtitle">Choose your path — every house has its own strength in learning English.</p>
       <div class="houses-grid">
         <div class="card house-card house-gryffindor">
           <div class="house-crest">🦁</div>
-          <h3>Gryffindor</h3>
-          <p>Brave and bold — take risks with new words and speak English without fear. Perfect for conversation practice!</p>
+          <h3 data-i18n="house-gryffindor-title">Gryffindor</h3>
+          <p data-i18n="house-gryffindor-desc">Brave and bold — take risks with new words and speak English without fear. Perfect for conversation practice!</p>
         </div>
         <div class="card house-card house-slytherin">
           <div class="house-crest">🐍</div>
-          <h3>Slytherin</h3>
-          <p>Ambitious and determined — master grammar rules and achieve high scores on every test.</p>
+          <h3 data-i18n="house-slytherin-title">Slytherin</h3>
+          <p data-i18n="house-slytherin-desc">Ambitious and determined — master grammar rules and achieve high scores on every test.</p>
         </div>
         <div class="card house-card house-ravenclaw">
           <div class="house-crest">🦅</div>
-          <h3>Ravenclaw</h3>
-          <p>Wise and curious — dive deep into reading texts and expand your vocabulary with every lesson.</p>
+          <h3 data-i18n="house-ravenclaw-title">Ravenclaw</h3>
+          <p data-i18n="house-ravenclaw-desc">Wise and curious — dive deep into reading texts and expand your vocabulary with every lesson.</p>
         </div>
         <div class="card house-card house-hufflepuff">
           <div class="house-crest">🦡</div>
-          <h3>Hufflepuff</h3>
-          <p>Loyal and patient — practice daily, build your streak, and grow step by step.</p>
+          <h3 data-i18n="house-hufflepuff-title">Hufflepuff</h3>
+          <p data-i18n="house-hufflepuff-desc">Loyal and patient — practice daily, build your streak, and grow step by step.</p>
         </div>
       </div>
     </div>
@@ -134,10 +134,11 @@
 
   <footer>
     <div class="container">
-      <p>&copy; 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>
+      <p>&copy; 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>
diff --git a/js/lang.js b/js/lang.js
new file mode 100644
index 0000000..d81a797
--- /dev/null
+++ b/js/lang.js
@@ -0,0 +1,434 @@
+var LANG = {};
+
+LANG.en = {
+  // Nav
+  'nav-home': 'Home',
+  'nav-vocabulary': 'Vocabulary',
+  'nav-grammar': 'Grammar',
+  'nav-pronunciation': 'Pronunciation',
+  'nav-exercises': 'Exercises',
+  'nav-tests': 'Tests',
+  'nav-reading': 'Reading',
+  'nav-progress': 'Progress',
+  'nav-contact': 'Contact',
+
+  // Hero
+  'hero-badge': '⚡ Welcome to Hogwarts School of English',
+  'hero-title': 'Master the <span class="highlight">Magic</span> of English',
+  'hero-subtitle': 'Discover vocabulary, grammar, exercises, reading, and tests — your magical journey to speaking English begins now.',
+  'btn-begin': '🔮 Begin Your Journey',
+  'btn-try': '✨ Try a Spell (Exercise)',
+
+  // Index sections
+  'section-subjects-title': 'Your <span>Magical</span> Subjects',
+  'section-subjects-subtitle': 'Like a wizard at Hogwarts, master every branch of English magic.',
+
+  'card-vocab-title': 'Vocabulary',
+  'card-vocab-desc': 'Learn new words with translations and example sentences. Over 20 words to start with!',
+  'card-vocab-btn': 'Explore Words',
+  'card-grammar-title': 'Grammar',
+  'card-grammar-desc': 'Simple explanations of English grammar with formulas and examples.',
+  'card-grammar-btn': 'Study Grammar',
+  'card-exercises-title': 'Exercises',
+  'card-exercises-desc': 'Practice what you learn with fun exercises. Choose answers, fill gaps, and translate.',
+  'card-exercises-btn': 'Practice Now',
+  'card-tests-title': 'Tests',
+  'card-tests-desc': 'Check your knowledge with a full test. 10 questions to test your skills.',
+  'card-tests-btn': 'Take a Test',
+  'card-reading-title': 'Reading',
+  'card-reading-desc': 'Read short and simple texts in English. Each text has questions.',
+  'card-reading-btn': 'Start Reading',
+  'card-pronunciation-title': 'Pronunciation',
+  'card-pronunciation-desc': 'Listen to words spoken aloud. Practice and improve your speaking.',
+  'card-pronunciation-btn': 'Start Speaking',
+  'card-progress-title': 'My Progress',
+  'card-progress-desc': 'Track your XP, level, and completed activities. Watch yourself improve!',
+  'card-progress-btn': 'View Progress',
+
+  // Houses
+  'section-houses-title': 'The Four <span>Houses</span>',
+  'section-houses-subtitle': 'Choose your path — every house has its own strength in learning English.',
+  'house-gryffindor-title': 'Gryffindor',
+  'house-gryffindor-desc': 'Brave and bold — take risks with new words and speak English without fear.',
+  'house-slytherin-title': 'Slytherin',
+  'house-slytherin-desc': 'Ambitious and determined — master grammar rules and achieve high scores.',
+  'house-ravenclaw-title': 'Ravenclaw',
+  'house-ravenclaw-desc': 'Wise and curious — dive deep into reading and expand your vocabulary.',
+  'house-hufflepuff-title': 'Hufflepuff',
+  'house-hufflepuff-desc': 'Loyal and patient — practice daily, build your streak, and grow step by step.',
+
+  // Motivation
+  'motivation-title': '✨ The Chamber of Progress Awaits',
+  'motivation-desc': 'Every great wizard started with their first spell. Begin your English magic today!',
+
+  // Page headers
+  'page-vocabulary-title': 'Vocabulary',
+  'page-vocabulary-desc': 'Learn 20+ common English words with translations and examples.',
+  'page-grammar-title': 'Grammar',
+  'page-grammar-desc': 'Simple explanations of English grammar with formulas and examples.',
+  'page-pronunciation-title': 'Pronunciation',
+  'page-pronunciation-desc': 'Listen, repeat, and improve your English pronunciation.',
+  'page-exercises-title': 'Exercises',
+  'page-exercises-desc': 'Practice your English with these fun exercises.',
+  'page-tests-title': 'English Test',
+  'page-tests-desc': 'Test your knowledge with 10 questions. Choose the correct answer for each question.',
+  'page-reading-title': 'Reading',
+  'page-reading-desc': 'Read short texts in English and check your understanding.',
+  'page-progress-title': 'My Progress',
+  'page-progress-desc': 'Track your learning journey and see how much you\'ve achieved.',
+  'page-contact-title': 'Contact Us',
+  'page-contact-desc': 'Have a question or suggestion? Send us a message!',
+
+  // Footer
+  'footer-text': 'Made for learning English.',
+  'footer-by': 'English Easy',
+
+  // Tests
+  'test-check': 'Check Result',
+  'test-result': 'Keep learning and try again!',
+
+  // Contact form
+  'form-name': 'Name',
+  'form-name-placeholder': 'Your name',
+  'form-email': 'Email',
+  'form-email-placeholder': 'your@email.com',
+  'form-message': 'Message',
+  'form-message-placeholder': 'Write your message here...',
+  'form-send': 'Send Message',
+  'form-thankyou': 'Thank you! Your message has been received.',
+
+  // Pronunciation tips
+  'pron-tip': '💡 Tip: 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!',
+  'pron-common-words': 'Common <span>Words</span>',
+  'pron-common-phrases': 'Common <span>Phrases</span>',
+  'pron-tips': 'Pronunciation <span>Tips</span>',
+  'pron-dictation': 'Dictation <span>Practice</span>',
+  'pron-dictation-desc': 'Listen to the word, then type what you hear.',
+  'pron-th-sound': '👄 The "th" Sound',
+  'pron-th-desc': 'Put your tongue between your teeth and blow air.',
+  'pron-r-sound': '🗣️ The "r" Sound',
+  'pron-r-desc': 'In English, the tongue does not touch the top of the mouth.',
+  'pron-stress': '🎵 Word Stress',
+  'pron-stress-desc': 'English words have one stressed syllable. Say it louder and longer.',
+  'pron-listen': '🔊 Listen',
+  'pron-slow': '🐢 Slow',
+  'btn-check': 'Check',
+  'btn-all': 'All',
+  'btn-school': 'School',
+  'btn-family': 'Family',
+  'btn-food': 'Food',
+  'btn-daily': 'Daily Routine',
+  'btn-hobbies': 'Hobbies',
+  'vocab-english': 'English',
+  'vocab-translation': 'Translation',
+  'vocab-example': 'Example Sentence',
+
+  // Grammar
+  'grammar-present-simple': 'Present Simple',
+  'grammar-present-simple-desc': 'Present Simple is used for habits, routines, and general facts.',
+  'grammar-past-simple': 'Past Simple',
+  'grammar-past-simple-desc': 'Past Simple is used for completed actions in the past.',
+  'grammar-future-simple': 'Future Simple (will)',
+  'grammar-future-simple-desc': 'Future Simple is used for predictions, promises, and spontaneous decisions.',
+  'grammar-articles': 'Articles: a / an / the',
+  'grammar-articles-desc': 'Use <strong>a</strong> before consonant sounds, <strong>an</strong> before vowel sounds, and <strong>the</strong> for specific things.',
+  'grammar-pronouns': 'Pronouns',
+  'grammar-pronouns-desc': 'Pronouns replace nouns. They can be subject or object pronouns.',
+  'grammar-prepositions': 'Prepositions',
+  'grammar-prepositions-desc': 'Prepositions show relationships of time, place, and direction.',
+};
+
+LANG.ru = {
+  'nav-home': 'Главная',
+  'nav-vocabulary': 'Словарь',
+  'nav-grammar': 'Грамматика',
+  'nav-pronunciation': 'Произношение',
+  'nav-exercises': 'Упражнения',
+  'nav-tests': 'Тесты',
+  'nav-reading': 'Чтение',
+  'nav-progress': 'Прогресс',
+  'nav-contact': 'Контакты',
+
+  'hero-badge': '⚡ Добро пожаловать в Школу Английского Хогвартс',
+  'hero-title': 'Освой <span class="highlight">Магию</span> Английского',
+  'hero-subtitle': 'Словарь, грамматика, упражнения, чтение и тесты — твоё волшебное путешествие в мир английского начинается сейчас.',
+  'btn-begin': '🔮 Начать Путешествие',
+  'btn-try': '✨ Попробовать Заклинание',
+
+  'section-subjects-title': 'Твои <span>Волшебные</span> Предметы',
+  'section-subjects-subtitle': 'Как волшебник в Хогвартсе, освой каждую ветвь английской магии.',
+
+  'card-vocab-title': 'Словарь',
+  'card-vocab-desc': 'Учи новые слова с переводом и примерами. Более 20 слов для начала!',
+  'card-vocab-btn': 'Изучить Слова',
+  'card-grammar-title': 'Грамматика',
+  'card-grammar-desc': 'Простые объяснения английской грамматики с формулами и примерами.',
+  'card-grammar-btn': 'Изучить',
+  'card-exercises-title': 'Упражнения',
+  'card-exercises-desc': 'Практикуйся с весёлыми упражнениями. Выбирай ответы и переводи предложения.',
+  'card-exercises-btn': 'Тренироваться',
+  'card-tests-title': 'Тесты',
+  'card-tests-desc': 'Проверь свои знания. 10 вопросов, чтобы оценить твой уровень.',
+  'card-tests-btn': 'Пройти Тест',
+  'card-reading-title': 'Чтение',
+  'card-reading-desc': 'Читай короткие тексты на английском. К каждому есть вопросы.',
+  'card-reading-btn': 'Начать Чтение',
+  'card-pronunciation-title': 'Произношение',
+  'card-pronunciation-desc': 'Слушай слова вслух. Тренируй произношение и улучшай речь.',
+  'card-pronunciation-btn': 'Начать Говорить',
+  'card-progress-title': 'Мой Прогресс',
+  'card-progress-desc': 'Отслеживай XP, уровень и выполненные задания. Смотри, как растёшь!',
+  'card-progress-btn': 'Смотреть',
+
+  'section-houses-title': 'Четыре <span>Факультета</span>',
+  'section-houses-subtitle': 'Выбери свой путь — у каждого факультета своя сила в изучении английского.',
+  'house-gryffindor-title': 'Гриффиндор',
+  'house-gryffindor-desc': 'Храбрые и смелые — рискуй с новыми словами и говори по-английски без страха.',
+  'house-slytherin-title': 'Слизерин',
+  'house-slytherin-desc': 'Амбициозные и решительные — осваивай грамматику и достигай высоких результатов.',
+  'house-ravenclaw-title': 'Когтевран',
+  'house-ravenclaw-desc': 'Мудрые и любознательные — читай тексты и расширяй словарный запас.',
+  'house-hufflepuff-title': 'Пуффендуй',
+  'house-hufflepuff-desc': 'Верные и терпеливые — занимайся каждый день и расти шаг за шагом.',
+
+  'motivation-title': '✨ Зал Прогресса Ждёт',
+  'motivation-desc': 'Каждый великий волшебник начинал с первого заклинания. Начни свою английскую магию сегодня!',
+
+  'page-vocabulary-title': 'Словарь',
+  'page-vocabulary-desc': 'Выучи 20+ популярных английских слов с переводом и примерами.',
+  'page-grammar-title': 'Грамматика',
+  'page-grammar-desc': 'Простые объяснения английской грамматики с формулами и примерами.',
+  'page-pronunciation-title': 'Произношение',
+  'page-pronunciation-desc': 'Слушай, повторяй и улучшай своё английское произношение.',
+  'page-exercises-title': 'Упражнения',
+  'page-exercises-desc': 'Тренируй английский с помощью интересных упражнений.',
+  'page-tests-title': 'Тест по Английскому',
+  'page-tests-desc': 'Проверь знания: 10 вопросов. Выбери правильный ответ на каждый.',
+  'page-reading-title': 'Чтение',
+  'page-reading-desc': 'Читай короткие тексты на английском и проверяй понимание.',
+  'page-progress-title': 'Мой Прогресс',
+  'page-progress-desc': 'Отслеживай свой путь обучения и смотри, сколько ты достиг.',
+  'page-contact-title': 'Свяжитесь с Нами',
+  'page-contact-desc': 'Есть вопрос или предложение? Отправьте нам сообщение!',
+
+  'footer-text': 'Сделано для изучения английского.',
+  'footer-by': 'English Easy',
+
+  'test-check': 'Проверить',
+  'test-result': 'Продолжай учиться и пробуй снова!',
+
+  'form-name': 'Имя',
+  'form-name-placeholder': 'Ваше имя',
+  'form-email': 'Email',
+  'form-email-placeholder': 'ваш@email.com',
+  'form-message': 'Сообщение',
+  'form-message-placeholder': 'Напишите сообщение...',
+  'form-send': 'Отправить',
+  'form-thankyou': 'Спасибо! Ваше сообщение получено.',
+
+  'pron-tip': '💡 Совет: Нажми <strong>Слушать</strong>, чтобы услышать слово, затем повтори вслух. Используй <strong>Медленно</strong>, чтобы услышать медленное произношение.',
+  'pron-common-words': 'Популярные <span>Слова</span>',
+  'pron-common-phrases': 'Популярные <span>Фразы</span>',
+  'pron-tips': 'Советы по <span>Произношению</span>',
+  'pron-dictation': 'Диктант',
+  'pron-dictation-desc': 'Послушай слово и напиши, что услышал.',
+  'pron-th-sound': '👄 Звук "th"',
+  'pron-th-desc': 'Помести язык между зубами и выдохни воздух.',
+  'pron-r-sound': '🗣️ Звук "r"',
+  'pron-r-desc': 'В английском язык не касается нёба.',
+  'pron-stress': '🎵 Ударение',
+  'pron-stress-desc': 'В английских словах один ударный слог. Произноси его громче и длиннее.',
+  'pron-listen': '🔊 Слушать',
+  'pron-slow': '🐢 Медленно',
+  'btn-check': 'Проверить',
+  'btn-all': 'Все',
+  'btn-school': 'Школа',
+  'btn-family': 'Семья',
+  'btn-food': 'Еда',
+  'btn-daily': 'Распорядок дня',
+  'btn-hobbies': 'Хобби',
+  'vocab-english': 'Английский',
+  'vocab-translation': 'Перевод',
+  'vocab-example': 'Пример',
+
+  'grammar-present-simple': 'Настоящее Простое',
+  'grammar-present-simple-desc': 'Present Simple используется для привычек, рутины и общих фактов.',
+  'grammar-past-simple': 'Прошедшее Простое',
+  'grammar-past-simple-desc': 'Past Simple используется для завершённых действий в прошлом.',
+  'grammar-future-simple': 'Будущее Простое (will)',
+  'grammar-future-simple-desc': 'Future Simple используется для предсказаний, обещаний и спонтанных решений.',
+  'grammar-articles': 'Артикли: a / an / the',
+  'grammar-articles-desc': 'Используй <strong>a</strong> перед согласными, <strong>an</strong> перед гласными, <strong>the</strong> для конкретных вещей.',
+  'grammar-pronouns': 'Местоимения',
+  'grammar-pronouns-desc': 'Местоимения заменяют существительные.',
+  'grammar-prepositions': 'Предлоги',
+  'grammar-prepositions-desc': 'Предлоги показывают отношения времени, места и направления.',
+};
+
+LANG.kk = {
+  'nav-home': 'Басты бет',
+  'nav-vocabulary': 'Сөздік',
+  'nav-grammar': 'Грамматика',
+  'nav-pronunciation': 'Айтылуы',
+  'nav-exercises': 'Жаттығулар',
+  'nav-tests': 'Тесттер',
+  'nav-reading': 'Оқу',
+  'nav-progress': 'Прогресс',
+  'nav-contact': 'Байланыс',
+
+  'hero-badge': '⚡ Хогвартс Ағылшын Мектебіне Қош Келдіңіз',
+  'hero-title': 'Ағылшынның <span class="highlight">Сиқырын</span> Меңгер',
+  'hero-subtitle': 'Сөздік, грамматика, жаттығулар, оқу және тесттер — ағылшын тілінде сөйлеуге арналған сиқырлы саяхатың басталады.',
+  'btn-begin': '🔮 Саяхатты Бастау',
+  'btn-try': '✨ Сиқырды Қолданып Көр',
+
+  'section-subjects-title': 'Сенің <span>Сиқырлы</span> Пәндерің',
+  'section-subjects-subtitle': 'Хогвартстағы сиқыршы сияқты, ағылшын сиқырының әр саласын меңгер.',
+
+  'card-vocab-title': 'Сөздік',
+  'card-vocab-desc': 'Жаңа сөздерді аудармасымен және мысалдарымен үйрен. Бастау үшін 20+ сөз!',
+  'card-vocab-btn': 'Сөздерді Үйрен',
+  'card-grammar-title': 'Грамматика',
+  'card-grammar-desc': 'Ағылшын грамматикасының қарапайым түсіндірмесі формулалармен және мысалдармен.',
+  'card-grammar-btn': 'Грамматиканы Оқу',
+  'card-exercises-title': 'Жаттығулар',
+  'card-exercises-desc': 'Қызықты жаттығулармен тәжірибе жаса. Жауаптарды таңда және аудар.',
+  'card-exercises-btn': 'Жаттығу',
+  'card-tests-title': 'Тесттер',
+  'card-tests-desc': 'Біліміңді тексер. Деңгейіңді бағалау үшін 10 сұрақ.',
+  'card-tests-btn': 'Тест Тапсыру',
+  'card-reading-title': 'Оқу',
+  'card-reading-desc': 'Ағылшынша қысқа мәтіндерді оқы. Әр мәтін бойынша сұрақтар бар.',
+  'card-reading-btn': 'Оқуды Бастау',
+  'card-pronunciation-title': 'Айтылуы',
+  'card-pronunciation-desc': 'Сөздерді дауыстап тыңда. Айтылуыңды жаттықтырып, сөйлеуіңді жақсарт.',
+  'card-pronunciation-btn': 'Сөйлеуді Бастау',
+  'card-progress-title': 'Менің Прогрессім',
+  'card-progress-desc': 'XP, деңгей және орындалған тапсырмаларды қадағала. Өсіп келе жатқаныңды көр!',
+  'card-progress-btn': 'Прогресті Көру',
+
+  'section-houses-title': 'Төрт <span>Факультет</span>',
+  'section-houses-subtitle': 'Өз жолыңды таңда — әр факультеттің ағылшын үйренуде өз күші бар.',
+  'house-gryffindor-title': 'Гриффиндор',
+  'house-gryffindor-desc': 'Батыл және қайсар — жаңа сөздермен тәуекел ет және ағылшынша қорықпай сөйле.',
+  'house-slytherin-title': 'Слизерин',
+  'house-slytherin-desc': 'Амбициялы және табанды — грамматиканы меңгер және жоғары нәтижеге жет.',
+  'house-ravenclaw-title': 'Когтевран',
+  'house-ravenclaw-desc': 'Дана және білімқұмар — мәтіндерді оқы және сөздік қорыңды кеңейт.',
+  'house-hufflepuff-title': 'Хаффлпафф',
+  'house-hufflepuff-desc': 'Адал және сабырлы — күнделікті жаттық, streak-іңді құр және қадаммен өс.',
+
+  'motivation-title': '✨ Прогресс Залы Күтіп Тұр',
+  'motivation-desc': 'Әр ұлы сиқыршы өзінің бірінші сиқырынан бастады. Бүгін ағылшын сиқырыңды баста!',
+
+  'page-vocabulary-title': 'Сөздік',
+  'page-vocabulary-desc': '20+ танымал ағылшын сөздерін аудармамен және мысалдармен үйрен.',
+  'page-grammar-title': 'Грамматика',
+  'page-grammar-desc': 'Ағылшын грамматикасының қарапайым түсіндірмелері формулалармен және мысалдармен.',
+  'page-pronunciation-title': 'Айтылуы',
+  'page-pronunciation-desc': 'Тыңда, қайтала және ағылшын айтылуыңды жақсарт.',
+  'page-exercises-title': 'Жаттығулар',
+  'page-exercises-desc': 'Қызықты жаттығулармен ағылшын тілін жаттықтыр.',
+  'page-tests-title': 'Ағылшын Тесті',
+  'page-tests-desc': 'Біліміңді тексер: 10 сұрақ. Әр сұраққа дұрыс жауапты таңда.',
+  'page-reading-title': 'Оқу',
+  'page-reading-desc': 'Ағылшынша қысқа мәтіндерді оқы және түсінгеніңді тексер.',
+  'page-progress-title': 'Менің Прогрессім',
+  'page-progress-desc': 'Оқу саяхатыңды бақыла және қанша жеткеніңді көр.',
+  'page-contact-title': 'Бізбен Байланысу',
+  'page-contact-desc': 'Сұрағың немесе ұсынысың бар ма? Бізге хабарлама жібер!',
+
+  'footer-text': 'Ағылшын үйрену үшін жасалған.',
+  'footer-by': 'English Easy',
+
+  'test-check': 'Тексеру',
+  'test-result': 'Оқуды жалғастыр және қайтадан тырыс!',
+
+  'form-name': 'Атыңыз',
+  'form-name-placeholder': 'Атыңыз',
+  'form-email': 'Email',
+  'form-email-placeholder': 'сіздің@email.kz',
+  'form-message': 'Хабарлама',
+  'form-message-placeholder': 'Хабарламаңызды жазыңыз...',
+  'form-send': 'Жіберу',
+  'form-thankyou': 'Рахмет! Сіздің хабарламаңыз қабылданды.',
+
+  'pron-tip': '💡 Кеңес: <strong>Тыңдау</strong> түймесін басып сөзді есті, содан кейін дауыстап қайтала. <strong>Баяу</strong> түймесі баяу айтылуды естуге көмектеседі.',
+  'pron-common-words': 'Танымал <span>Сөздер</span>',
+  'pron-common-phrases': 'Танымал <span>Фразалар</span>',
+  'pron-tips': 'Айтылу <span>Кеңестері</span>',
+  'pron-dictation': 'Диктант',
+  'pron-dictation-desc': 'Сөзді тыңда және естігеніңді жаз.',
+  'pron-th-sound': '👄 "th" Дыбысы',
+  'pron-th-desc': 'Тіліңді тістеріңнің арасына салып, ауаны үрле.',
+  'pron-r-sound': '🗣️ "r" Дыбысы',
+  'pron-r-desc': 'Ағылшын тілінде тіл таңдайға тимейді.',
+  'pron-stress': '🎵 Сөз Екпіні',
+  'pron-stress-desc': 'Ағылшын сөздерінде бір екпінді буын бар. Оны қаттырақ және ұзағырақ айт.',
+  'pron-listen': '🔊 Тыңдау',
+  'pron-slow': '🐢 Баяу',
+  'btn-check': 'Тексеру',
+  'btn-all': 'Барлығы',
+  'btn-school': 'Мектеп',
+  'btn-family': 'Отбасы',
+  'btn-food': 'Тамақ',
+  'btn-daily': 'Күнделікті режим',
+  'btn-hobbies': 'Хобби',
+  'vocab-english': 'Ағылшын',
+  'vocab-translation': 'Аударма',
+  'vocab-example': 'Мысал',
+
+  'grammar-present-simple': 'Қазіргі Жай Шақ',
+  'grammar-present-simple-desc': 'Present Simple әдеттер, күнделікті істер және жалпы фактілер үшін қолданылады.',
+  'grammar-past-simple': 'Өткен Жай Шақ',
+  'grammar-past-simple-desc': 'Past Simple өткенде аяқталған әрекеттер үшін қолданылады.',
+  'grammar-future-simple': 'Келер Жай Шақ (will)',
+  'grammar-future-simple-desc': 'Future Simple болжамдар, уәделер және кенеттен шешімдер үшін қолданылады.',
+  'grammar-articles': 'Артикльдер: a / an / the',
+  'grammar-articles-desc': '<strong>a</strong> дауыссыз дыбыстар алдында, <strong>an</strong> дауысты дыбыстар алдында, <strong>the</strong> нақты заттар үшін.',
+  'grammar-pronouns': 'Есімдіктер',
+  'grammar-pronouns-desc': 'Есімдіктер зат есімдердің орнына қолданылады.',
+  'grammar-prepositions': 'Предлогтар',
+  'grammar-prepositions-desc': 'Предлогтар уақыт, орын және бағыт қатынасын көрсетеді.',
+};
+
+// Current language
+var currentLang = localStorage.getItem('english_easy_lang') || 'en';
+
+function setLanguage(lang) {
+  if (!LANG[lang]) return;
+  currentLang = lang;
+  localStorage.setItem('english_easy_lang', lang);
+
+  // Update all data-i18n elements
+  var elements = document.querySelectorAll('[data-i18n]');
+  elements.forEach(function(el) {
+    var key = el.getAttribute('data-i18n');
+    if (LANG[lang][key]) {
+      el.innerHTML = LANG[lang][key];
+    }
+  });
+
+  // Update placeholders
+  var placeholders = document.querySelectorAll('[data-i18n-placeholder]');
+  placeholders.forEach(function(el) {
+    var key = el.getAttribute('data-i18n-placeholder');
+    if (LANG[lang][key]) {
+      el.placeholder = LANG[lang][key];
+    }
+  });
+
+  // Update lang switcher UI
+  var btns = document.querySelectorAll('.lang-btn');
+  btns.forEach(function(btn) {
+    btn.classList.toggle('active', btn.getAttribute('data-lang') === lang);
+  });
+
+  // Update html lang attribute
+  document.documentElement.lang = lang;
+}
+
+// Init on DOM ready
+document.addEventListener('DOMContentLoaded', function() {
+  setLanguage(currentLang);
+});
diff --git a/progress.html b/progress.html
index 113f207..8c8ad9b 100644
--- a/progress.html
+++ b/progress.html
@@ -17,15 +17,15 @@
       <button class="menu-toggle" aria-label="Menu">☰</button>
       <nav>
         <ul class="nav-list">
-          <li><a href="index.html">Home</a></li>
-          <li><a href="vocabulary.html">Vocabulary</a></li>
-          <li><a href="grammar.html">Grammar</a></li>
-          <li><a href="pronunciation.html">Pronunciation</a></li>
-          <li><a href="exercises.html">Exercises</a></li>
-          <li><a href="tests.html">Tests</a></li>
-          <li><a href="reading.html">Reading</a></li>
-          <li><a href="progress.html">Progress</a></li>
-          <li><a href="contact.html">Contact</a></li>
+          <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>
@@ -33,8 +33,8 @@
 
   <section class="page-header">
     <div class="container">
-      <h1>My Progress</h1>
-      <p>Track your learning journey and see how much you've achieved.</p>
+      <h1 data-i18n="page-progress-title">My Progress</h1>
+      <p data-i18n="page-progress-desc">Track your learning journey and see how much you've achieved.</p>
     </div>
   </section>
 
@@ -84,10 +84,11 @@
 
   <footer>
     <div class="container">
-      <p>&copy; 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>
+      <p><p><p><p>&copy; 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>copy; 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>copy; 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>copy; 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>
   <script>
     document.addEventListener('DOMContentLoaded', function() {
diff --git a/pronunciation.html b/pronunciation.html
index 090039a..de7d41b 100644
--- a/pronunciation.html
+++ b/pronunciation.html
@@ -114,15 +114,15 @@
       <button class="menu-toggle" aria-label="Menu">☰</button>
       <nav>
         <ul class="nav-list">
-          <li><a href="index.html">Home</a></li>
-          <li><a href="vocabulary.html">Vocabulary</a></li>
-          <li><a href="grammar.html">Grammar</a></li>
-          <li><a href="pronunciation.html">Pronunciation</a></li>
-          <li><a href="exercises.html">Exercises</a></li>
-          <li><a href="tests.html">Tests</a></li>
-          <li><a href="reading.html">Reading</a></li>
-          <li><a href="progress.html">Progress</a></li>
-          <li><a href="contact.html">Contact</a></li>
+          <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>
@@ -130,15 +130,15 @@
 
   <section class="page-header">
     <div class="container">
-      <h1>Pronunciation</h1>
-      <p>Listen, repeat, and improve your English pronunciation.</p>
+      <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">
+      <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>
 
@@ -147,7 +147,7 @@
       </div>
 
       <!-- Common Words -->
-      <h2 class="section-title" style="font-size:28px;margin-bottom:24px;">Common <span>Words</span></h2>
+      <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">
@@ -156,8 +156,8 @@
           <span class="translation">Привет</span>
         </div>
         <div class="pron-actions">
-          <button class="btn btn-listen" data-word="Hello" onclick="repeatWord(this)">🔊 Listen</button>
-          <button class="btn btn-slow" data-word="Hello" onclick="speakSlow(this)">🐢 Slow</button>
+          <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>
 
@@ -168,8 +168,8 @@
           <span class="translation">До свидания</span>
         </div>
         <div class="pron-actions">
-          <button class="btn btn-listen" data-word="Goodbye" onclick="repeatWord(this)">🔊 Listen</button>
-          <button class="btn btn-slow" data-word="Goodbye" onclick="speakSlow(this)">🐢 Slow</button>
+          <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>
 
@@ -180,8 +180,8 @@
           <span class="translation">Спасибо</span>
         </div>
         <div class="pron-actions">
-          <button class="btn btn-listen" data-word="Thank you" onclick="repeatWord(this)">🔊 Listen</button>
-          <button class="btn btn-slow" data-word="Thank you" onclick="speakSlow(this)">🐢 Slow</button>
+          <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>
 
@@ -192,8 +192,8 @@
           <span class="translation">Пожалуйста</span>
         </div>
         <div class="pron-actions">
-          <button class="btn btn-listen" data-word="Please" onclick="repeatWord(this)">🔊 Listen</button>
-          <button class="btn btn-slow" data-word="Please" onclick="speakSlow(this)">🐢 Slow</button>
+          <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>
 
@@ -204,8 +204,8 @@
           <span class="translation">Извините</span>
         </div>
         <div class="pron-actions">
-          <button class="btn btn-listen" data-word="Sorry" onclick="repeatWord(this)">🔊 Listen</button>
-          <button class="btn btn-slow" data-word="Sorry" onclick="speakSlow(this)">🐢 Slow</button>
+          <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>
 
@@ -216,8 +216,8 @@
           <span class="translation">Вода</span>
         </div>
         <div class="pron-actions">
-          <button class="btn btn-listen" data-word="Water" onclick="repeatWord(this)">🔊 Listen</button>
-          <button class="btn btn-slow" data-word="Water" onclick="speakSlow(this)">🐢 Slow</button>
+          <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>
 
@@ -228,8 +228,8 @@
           <span class="translation">Красивый</span>
         </div>
         <div class="pron-actions">
-          <button class="btn btn-listen" data-word="Beautiful" onclick="repeatWord(this)">🔊 Listen</button>
-          <button class="btn btn-slow" data-word="Beautiful" onclick="speakSlow(this)">🐢 Slow</button>
+          <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>
 
@@ -240,8 +240,8 @@
           <span class="translation">Важный</span>
         </div>
         <div class="pron-actions">
-          <button class="btn btn-listen" data-word="Important" onclick="repeatWord(this)">🔊 Listen</button>
-          <button class="btn btn-slow" data-word="Important" onclick="speakSlow(this)">🐢 Slow</button>
+          <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>
 
@@ -252,8 +252,8 @@
           <span class="translation">Разный</span>
         </div>
         <div class="pron-actions">
-          <button class="btn btn-listen" data-word="Different" onclick="repeatWord(this)">🔊 Listen</button>
-          <button class="btn btn-slow" data-word="Different" onclick="speakSlow(this)">🐢 Slow</button>
+          <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>
 
@@ -264,8 +264,8 @@
           <span class="translation">Семья</span>
         </div>
         <div class="pron-actions">
-          <button class="btn btn-listen" data-word="Family" onclick="repeatWord(this)">🔊 Listen</button>
-          <button class="btn btn-slow" data-word="Family" onclick="speakSlow(this)">🐢 Slow</button>
+          <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>
 
@@ -276,8 +276,8 @@
           <span class="translation">Погода</span>
         </div>
         <div class="pron-actions">
-          <button class="btn btn-listen" data-word="Weather" onclick="repeatWord(this)">🔊 Listen</button>
-          <button class="btn btn-slow" data-word="Weather" onclick="speakSlow(this)">🐢 Slow</button>
+          <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>
 
@@ -288,13 +288,13 @@
           <span class="translation">Утро</span>
         </div>
         <div class="pron-actions">
-          <button class="btn btn-listen" data-word="Morning" onclick="repeatWord(this)">🔊 Listen</button>
-          <button class="btn btn-slow" data-word="Morning" onclick="speakSlow(this)">🐢 Slow</button>
+          <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;">Common <span>Phrases</span></h2>
+      <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">
@@ -302,7 +302,7 @@
           <span class="translation">Как дела?</span>
         </div>
         <div class="pron-actions">
-          <button class="btn btn-listen" data-phrase="How are you?" onclick="speakPhrase(this)">🔊 Hear Phrase</button>
+          <button class="btn btn-listen" data-phrase="How are you?" onclick="speakPhrase(this)" data-i18n="pron-listen">🔊 Hear Phrase</button>
         </div>
       </div>
 
@@ -312,7 +312,7 @@
           <span class="translation">Я в порядке, спасибо.</span>
         </div>
         <div class="pron-actions">
-          <button class="btn btn-listen" data-phrase="I am fine, thank you." onclick="speakPhrase(this)">🔊 Hear Phrase</button>
+          <button class="btn btn-listen" data-phrase="I am fine, thank you." onclick="speakPhrase(this)" data-i18n="pron-listen">🔊 Hear Phrase</button>
         </div>
       </div>
 
@@ -322,7 +322,7 @@
           <span class="translation">Приятно познакомиться.</span>
         </div>
         <div class="pron-actions">
-          <button class="btn btn-listen" data-phrase="Nice to meet you." onclick="speakPhrase(this)">🔊 Hear Phrase</button>
+          <button class="btn btn-listen" data-phrase="Nice to meet you." onclick="speakPhrase(this)" data-i18n="pron-listen">🔊 Hear Phrase</button>
         </div>
       </div>
 
@@ -332,7 +332,7 @@
           <span class="translation">Как тебя зовут?</span>
         </div>
         <div class="pron-actions">
-          <button class="btn btn-listen" data-phrase="What is your name?" onclick="speakPhrase(this)">🔊 Hear Phrase</button>
+          <button class="btn btn-listen" data-phrase="What is your name?" onclick="speakPhrase(this)" data-i18n="pron-listen">🔊 Hear Phrase</button>
         </div>
       </div>
 
@@ -342,34 +342,34 @@
           <span class="translation">Откуда ты?</span>
         </div>
         <div class="pron-actions">
-          <button class="btn btn-listen" data-phrase="Where are you from?" onclick="speakPhrase(this)">🔊 Hear Phrase</button>
+          <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;">Pronunciation <span>Tips</span></h2>
+      <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>👄 The "th" Sound</h3>
-          <p>Put your tongue between your teeth and blow air.</p>
+          <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>🗣️ The "r" Sound</h3>
-          <p>In English, the tongue does not touch the top of the mouth.</p>
+          <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>🎵 Word Stress</h3>
-          <p>English words have one stressed syllable. Say it louder and longer.</p>
+          <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;">Dictation <span>Practice</span></h2>
-      <p class="section-subtitle">Listen to the word, then type what you hear.</p>
+      <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>
@@ -377,7 +377,7 @@
         <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)">Check</button>
+          <button class="btn" onclick="checkDictation(this.previousElementSibling)" data-i18n="btn-check">Check</button>
         </div>
         <div class="feedback"></div>
       </div>
@@ -388,7 +388,7 @@
         <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)">Check</button>
+          <button class="btn" onclick="checkDictation(this.previousElementSibling)" data-i18n="btn-check">Check</button>
         </div>
         <div class="feedback"></div>
       </div>
@@ -399,7 +399,7 @@
         <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)">Check</button>
+          <button class="btn" onclick="checkDictation(this.previousElementSibling)" data-i18n="btn-check">Check</button>
         </div>
         <div class="feedback"></div>
       </div>
@@ -409,10 +409,11 @@
 
   <footer>
     <div class="container">
-      <p>&copy; 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>
+      <p>&copy; 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>
diff --git a/reading.html b/reading.html
index 5e49524..9603265 100644
--- a/reading.html
+++ b/reading.html
@@ -17,15 +17,15 @@
       <button class="menu-toggle" aria-label="Menu">☰</button>
       <nav>
         <ul class="nav-list">
-          <li><a href="index.html">Home</a></li>
-          <li><a href="vocabulary.html">Vocabulary</a></li>
-          <li><a href="grammar.html">Grammar</a></li>
-          <li><a href="pronunciation.html">Pronunciation</a></li>
-          <li><a href="exercises.html">Exercises</a></li>
-          <li><a href="tests.html">Tests</a></li>
-          <li><a href="reading.html">Reading</a></li>
-          <li><a href="progress.html">Progress</a></li>
-          <li><a href="contact.html">Contact</a></li>
+          <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>
@@ -33,8 +33,8 @@
 
   <section class="page-header">
     <div class="container">
-      <h1>Reading</h1>
-      <p>Read short texts in English and check your understanding.</p>
+      <h1 data-i18n="page-reading-title">Reading</h1>
+      <p data-i18n="page-reading-desc">Read short texts in English and check your understanding.</p>
     </div>
   </section>
 
@@ -99,10 +99,11 @@
 
   <footer>
     <div class="container">
-      <p>&copy; 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>
+      <p><p><p><p>&copy; 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>copy; 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>copy; 2026 <a href="index.html" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>copy; 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>
diff --git a/tests.html b/tests.html
index 23efbca..fe2eb9c 100644
--- a/tests.html
+++ b/tests.html
@@ -17,15 +17,15 @@
       <button class="menu-toggle" aria-label="Menu">☰</button>
       <nav>
         <ul class="nav-list">
-          <li><a href="index.html">Home</a></li>
-          <li><a href="vocabulary.html">Vocabulary</a></li>
-          <li><a href="grammar.html">Grammar</a></li>
-          <li><a href="pronunciation.html">Pronunciation</a></li>
-          <li><a href="exercises.html">Exercises</a></li>
-          <li><a href="tests.html">Tests</a></li>
-          <li><a href="reading.html">Reading</a></li>
-          <li><a href="progress.html">Progress</a></li>
-          <li><a href="contact.html">Contact</a></li>
+          <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>
@@ -34,7 +34,7 @@
   <section class="page-header">
     <div class="container">
       <h1>English Test</h1>
-      <p>Test your knowledge with 10 questions. Choose the correct answer for each question.</p>
+      <p data-i18n="page-tests-desc">Test your knowledge with 10 questions. Choose the correct answer for each question.</p>
     </div>
   </section>
 
@@ -132,12 +132,12 @@
       </div>
 
       <div style="text-align:center;margin-top:24px;">
-        <button class="btn" onclick="checkTest()">Check Result</button>
+        <button class="btn" onclick="checkTest()" data-i18n="test-check">Check Result</button>
       </div>
 
       <div class="result-box" id="test-result">
         <div class="score" id="score">0/10</div>
-        <p id="test-detail">Keep learning and try again!</p>
+        <p id="test-detail" data-i18n="test-result">Keep learning and try again!</p>
       </div>
 
     </div>
@@ -145,10 +145,11 @@
 
   <footer>
     <div class="container">
-      <p>&copy; 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>
+      <p>&copy; 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>
diff --git a/vocabulary.html b/vocabulary.html
index 5c0db2b..fc0e081 100644
--- a/vocabulary.html
+++ b/vocabulary.html
@@ -17,15 +17,15 @@
       <button class="menu-toggle" aria-label="Menu">☰</button>
       <nav>
         <ul class="nav-list">
-          <li><a href="index.html">Home</a></li>
-          <li><a href="vocabulary.html">Vocabulary</a></li>
-          <li><a href="grammar.html">Grammar</a></li>
-          <li><a href="pronunciation.html">Pronunciation</a></li>
-          <li><a href="exercises.html">Exercises</a></li>
-          <li><a href="tests.html">Tests</a></li>
-          <li><a href="reading.html">Reading</a></li>
-          <li><a href="progress.html">Progress</a></li>
-          <li><a href="contact.html">Contact</a></li>
+          <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>
@@ -33,28 +33,28 @@
 
   <section class="page-header">
     <div class="container">
-      <h1>Vocabulary</h1>
-      <p>Learn 20+ common English words with translations and examples.</p>
+      <h1 data-i18n="page-vocabulary-title">Vocabulary</h1>
+      <p data-i18n="page-vocabulary-desc">Learn 20+ common English words with translations and examples.</p>
     </div>
   </section>
 
   <section class="section">
     <div class="container">
       <div class="vocab-categories">
-        <button class="category-btn active" onclick="filterVocab('all', this)">All</button>
-        <button class="category-btn" onclick="filterVocab('school', this)">School</button>
-        <button class="category-btn" onclick="filterVocab('family', this)">Family</button>
-        <button class="category-btn" onclick="filterVocab('food', this)">Food</button>
-        <button class="category-btn" onclick="filterVocab('daily', this)">Daily Routine</button>
-        <button class="category-btn" onclick="filterVocab('hobbies', this)">Hobbies</button>
+        <button class="category-btn active" onclick="filterVocab('all', this)" data-i18n="btn-all">All</button>
+        <button class="category-btn" onclick="filterVocab('school', this)" data-i18n="btn-school">School</button>
+        <button class="category-btn" onclick="filterVocab('family', this)" data-i18n="btn-family">Family</button>
+        <button class="category-btn" onclick="filterVocab('food', this)" data-i18n="btn-food">Food</button>
+        <button class="category-btn" onclick="filterVocab('daily', this)" data-i18n="btn-daily">Daily Routine</button>
+        <button class="category-btn" onclick="filterVocab('hobbies', this)" data-i18n="btn-hobbies">Hobbies</button>
       </div>
 
       <table class="vocab-table">
         <thead>
           <tr>
-            <th>English</th>
-            <th>Translation</th>
-            <th>Example Sentence</th>
+            <th data-i18n="vocab-english">English</th>
+            <th data-i18n="vocab-translation">Translation</th>
+            <th data-i18n="vocab-example">Example Sentence</th>
           </tr>
         </thead>
         <tbody>
@@ -175,10 +175,11 @@
 
   <footer>
     <div class="container">
-      <p>&copy; 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>
+      <p>&copy; 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>