.

settings/index.css

@@ -88,12 +88,14 @@ h2 {
 }
 
 
-.theme-grid {
+.theme-grid,
+.language-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
 }
-.theme-option {
+.theme-option,
+.language-option {
   background: none;
   border: none;
   padding: 0;
@@ -104,13 +106,18 @@ h2 {
   gap: 8px;
   transition: transform 0.2s ease;
 }
-.theme-option:hover {
+.theme-option:hover,
+.language-option:hover {
   transform: translateY(-2px);
 }
 .theme-option.active .theme-preview {
   outline: 2px solid var(--accent-accent);
   outline-offset: 2px;
 }
+.language-option.active .language-preview {
+  outline: 2px solid var(--accent-accent);
+  outline-offset: 2px;
+}
 .theme-preview {
   width: 100%;
   height: 100px;
@@ -135,6 +142,30 @@ h2 {
   border-radius: 8px;
 }
 
+.language-option {
+  background: var(--card-card);
+  border: 1px solid var(--border-border);
+  border-radius: 8px;
+  padding: 12px;
+  transition: all 0.2s ease;
+}
+
+.language-option:hover {
+  background: var(--card-hover);
+  border-color: var(--accent-accent);
+}
+
+.language-option.active {
+  background: var(--accent-accent);
+  border-color: var(--accent-accent);
+  color: white;
+}
+
+.language-name {
+  font-weight: 500;
+  font-size: 14px;
+}
+
 
 .theme-preview.light-blue {
   background: #DAE4F7;

settings/index.html

@@ -23,12 +23,12 @@
     </header>
 
     <div class="settings-card">
-      <h2>Beállítások</h2>
+      <h2 data-i18n="settings.title">Beállítások</h2>
       <div class="settings-group">
         <div class="setting-section">
           <div class="setting-header">
             <span class="material-icons-round">palette</span>
-            Téma
+            <span data-i18n="settings.theme">Téma</span>
           </div>
           <div class="theme-grid">
             <button class="theme-option" data-theme="default">
@@ -38,7 +38,7 @@
                   <div class="preview-card"></div>
                 </div>
               </div>
-              <span class="theme-name">Világos Kék</span>
+              <span class="theme-name" data-i18n="settings.themes.light_blue">Világos Kék</span>
             </button>
             <button class="theme-option" data-theme="light-green">
               <div class="theme-preview light-green">
@@ -47,7 +47,7 @@
                   <div class="preview-card"></div>
                 </div>
               </div>
-              <span class="theme-name">Világos Zöld</span>
+              <span class="theme-name" data-i18n="settings.themes.light_green">Világos Zöld</span>
             </button>
             <button class="theme-option" data-theme="dark-blue">
               <div class="theme-preview dark-blue">
@@ -56,7 +56,7 @@
                   <div class="preview-card"></div>
                 </div>
               </div>
-              <span class="theme-name">Sötét Kék</span>
+              <span class="theme-name" data-i18n="settings.themes.dark_blue">Sötét Kék</span>
             </button>
             <button class="theme-option" data-theme="dark-green">
               <div class="theme-preview dark-green">
@@ -65,7 +65,22 @@
                   <div class="preview-card"></div>
                 </div>
               </div>
-              <span class="theme-name">Sötét Zöld</span>
+              <span class="theme-name" data-i18n="settings.themes.dark_green">Sötét Zöld</span>
+            </button>
+          </div>
+        </div>
+        
+        <div class="setting-section">
+          <div class="setting-header">
+            <span class="material-icons-round">language</span>
+            <span data-i18n="settings.language">Nyelv</span>
+          </div>
+          <div class="language-grid">
+            <button class="language-option" data-language="hu">
+              <span class="language-name" data-i18n="settings.languages.hu">Magyar</span>
+            </button>
+            <button class="language-option" data-language="en">
+              <span class="language-name" data-i18n="settings.languages.en">English</span>
             </button>
           </div>
         </div>
@@ -73,24 +88,24 @@
     </div>
 
     <div class="about-card">
-      <h2>Névjegy</h2>
+      <h2 data-i18n="settings.about.title">Névjegy</h2>
       <div class="about-content">
-        <p>A Firka egy nyílt forráskódú projekt, amely a KRÉTA rendszerhez készít saját felhasználói felületet.</p>
+        <p data-i18n="settings.about.description">A Firka egy nyílt forráskódú projekt, amely a KRÉTA rendszerhez készít saját felhasználói felületet.</p>
         <a href="https://github.com/QwIT-Development/" target="_blank" class="github-link">
           <span class="material-icons-round">code</span>
-          GitHub
+          <span data-i18n="settings.about.github">GitHub</span>
         </a>
       </div>
     </div>
 
     <div class="support-card">
-      <h2>Támogatás</h2>
+      <h2 data-i18n="settings.support.title">Támogatás</h2>
       <div class="support-content">
-        <p>Ha tetszik a munkánk és szeretnéd támogatni a fejlesztést, az alábbi módon teheted meg:</p>
+        <p data-i18n="settings.support.description">Ha tetszik a munkánk és szeretnéd támogatni a fejlesztést, az alábbi módon teheted meg:</p>
         <div class="support-buttons">
           <a href="https://ko-fi.com/zan1456" target="_blank" class="support-button">
             <span class="material-icons-round">coffee</span>
-            Ko-Fi
+            <span data-i18n="settings.support.kofi">Ko-Fi</span>
           </a>
         </div>
       </div>
@@ -100,6 +115,8 @@
       <div class="version-info" id="version">v1.1.0</div>
     </footer>
   </div>
-  <script src="index.js"></script>
+  <script src="../tools/cookieManager.js"></script>
+    <script src="../global/language.js"></script>
+    <script src="index.js"></script>
 </body>
 </html>

settings/index.js

@@ -1,4 +1,7 @@
 document.addEventListener('DOMContentLoaded', async () => {
+  while (typeof window.LanguageManager === 'undefined') {
+    await new Promise(resolve => setTimeout(resolve, 10));
+  }
   
   function isThemeDisabled(theme) {
       const blueThemesUnlocked = localStorage.getItem('blueThemesUnlocked') === 'true';
@@ -59,6 +62,35 @@ document.addEventListener('DOMContentLoaded', async () => {
       });
       updateThemeAvailability();
   }
+
+  function getCurrentLanguage() {
+      return localStorage.getItem('languagePreference') || 
+             getCookie('languagePreference') || 
+             'hu';
+  }
+  
+  function updateLanguageButtons(currentLanguage) {
+      document.querySelectorAll('.language-option').forEach(button => {
+          const language = button.dataset.language;
+          button.classList.toggle('active', language === currentLanguage);
+      });
+  }
+  
+  async function applyLanguage(language) {
+      setCookie('languagePreference', language);
+      localStorage.setItem('languagePreference', language);
+
+      updateLanguageButtons(language);
+
+      const tabs = await chrome.tabs.query({});
+      tabs.forEach(tab => {
+          chrome.tabs.sendMessage(tab.id, {
+              action: 'changeLanguage',
+              language: language
+          }).catch(() => {
+          });
+      });
+  }
   
   async function applyTheme(theme) {
       setCookie('themePreference', theme);
@@ -77,8 +109,6 @@ document.addEventListener('DOMContentLoaded', async () => {
               action: 'changeTheme',
               theme: theme
           }).catch(() => {
-              
-              console.log('Tab not ready for theme change:', tab.id);
           });
       });
   }
@@ -91,7 +121,7 @@ document.addEventListener('DOMContentLoaded', async () => {
           
           
           if (button.hasAttribute('disabled')) {
-              alert('Ez a téma jelenleg nem elérhető.');
+              alert(window.LanguageManager.t('common.warning') + ': ' + window.LanguageManager.t('settings.theme_not_available'));
               return;
           }
           
@@ -99,6 +129,14 @@ document.addEventListener('DOMContentLoaded', async () => {
       });
   });
   
+  const languageButtons = document.querySelectorAll('.language-option');
+  languageButtons.forEach(button => {
+      button.addEventListener('click', () => {
+          const language = button.dataset.language;
+          applyLanguage(language);
+      });
+  });
+  
   
   let initialTheme = getCurrentTheme();
   
@@ -111,6 +149,9 @@ document.addEventListener('DOMContentLoaded', async () => {
   updateThemeAvailability();
   await applyTheme(initialTheme);
   
+  const initialLanguage = getCurrentLanguage();
+  updateLanguageButtons(initialLanguage);
+  
   
   chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
       if (message.action === 'themeChanged') {
@@ -148,7 +189,7 @@ document.addEventListener('DOMContentLoaded', async () => {
               box-shadow: 0 4px 12px rgba(0,0,0,0.15);
               animation: slideIn 0.3s ease-out;
           `;
-          notification.textContent = 'Kék témák feloldva! 🎉';
+          notification.textContent = window.LanguageManager.t('common.success') + ': ' + window.LanguageManager.t('settings.blue_themes_unlocked');
           
           
           const style = document.createElement('style');
@@ -184,4 +225,18 @@ document.addEventListener('DOMContentLoaded', async () => {
           button.style.transform = 'translateY(0)';
       });
   });
+  
+  languageButtons.forEach(button => {
+      button.addEventListener('mouseover', () => {
+          button.style.transform = 'translateY(-2px)';
+      });
+      
+      button.addEventListener('mouseout', () => {
+          button.style.transform = 'translateY(0)';
+      });
+  });
+  
+  window.addEventListener('languageChanged', (event) => {
+      updateLanguageButtons(event.detail.language);
+  });
 });