implement language dropdown and update language selection functionality

index.html

@@ -21,7 +21,35 @@
         <div class="header-actions">
           <div class="language-switcher">
             <label class="language-label" for="language-select" data-i18n="languageLabel">Language</label>
-            <select id="language-select" class="language-select">
+            <div id="language-dropdown" class="language-dropdown">
+              <button
+                id="language-toggle"
+                type="button"
+                class="language-toggle"
+                aria-haspopup="listbox"
+                aria-expanded="false"
+              >
+                <span id="language-selected-label">English</span>
+                <span class="language-chevron" aria-hidden="true"></span>
+              </button>
+              <ul
+                id="language-options"
+                class="language-options"
+                role="listbox"
+                aria-labelledby="language-toggle"
+              >
+                <li class="language-option" data-lang="ja" role="option">
+                  <span data-i18n="languageJapanese">Japanese</span>
+                </li>
+                <li class="language-option" data-lang="en" role="option">
+                  <span data-i18n="languageEnglish">English</span>
+                </li>
+                <li class="language-option" data-lang="vi" role="option">
+                  <span data-i18n="languageVietnamese">Vietnamese</span>
+                </li>
+              </ul>
+            </div>
+            <select id="language-select" class="language-select sr-only">
               <option value="ja" data-i18n="languageJapanese">Japanese</option>
               <option value="en" data-i18n="languageEnglish" selected>English</option>
               <option value="vi" data-i18n="languageVietnamese">Vietnamese</option>

login.html

@@ -10,7 +10,35 @@
     <div class="login-layout">
       <div class="login-language-switcher">
         <label class="language-label" for="language-select" data-i18n="languageLabel">Language</label>
-        <select id="language-select" class="language-select">
+        <div id="language-dropdown" class="language-dropdown">
+          <button
+            id="language-toggle"
+            type="button"
+            class="language-toggle"
+            aria-haspopup="listbox"
+            aria-expanded="false"
+          >
+            <span id="language-selected-label">English</span>
+            <span class="language-chevron" aria-hidden="true"></span>
+          </button>
+          <ul
+            id="language-options"
+            class="language-options"
+            role="listbox"
+            aria-labelledby="language-toggle"
+          >
+            <li class="language-option" data-lang="ja" role="option">
+              <span data-i18n="languageJapanese">Japanese</span>
+            </li>
+            <li class="language-option" data-lang="en" role="option">
+              <span data-i18n="languageEnglish">English</span>
+            </li>
+            <li class="language-option" data-lang="vi" role="option">
+              <span data-i18n="languageVietnamese">Vietnamese</span>
+            </li>
+          </ul>
+        </div>
+        <select id="language-select" class="language-select sr-only">
           <option value="ja" data-i18n="languageJapanese">Japanese</option>
           <option value="en" data-i18n="languageEnglish" selected>English</option>
           <option value="vi" data-i18n="languageVietnamese">Vietnamese</option>

login.js

@@ -1,4 +1,11 @@
-import { initI18n, bindLanguageSelector, t, onLanguageChange } from './i18n.js';
+import {
+  initI18n,
+  bindLanguageSelector,
+  t,
+  onLanguageChange,
+  setLanguage,
+  getCurrentLanguage,
+} from './i18n.js';
 import {
   findAccount,
   getAuthUser,
@@ -14,6 +21,73 @@ const errorElement = document.getElementById('login-error');
 initI18n();
 bindLanguageSelector('#language-select');
 
+const languageLabelMap = {
+  en: () => t('languageEnglish') || 'English',
+  ja: () => t('languageJapanese') || 'Japanese',
+  vi: () => t('languageVietnamese') || 'Vietnamese',
+};
+
+const languageDropdown = document.getElementById('language-dropdown');
+const languageToggle = document.getElementById('language-toggle');
+const languageOptions = document.querySelectorAll('.language-option');
+const languageSelectedLabel = document.getElementById(
+  'language-selected-label'
+);
+const hiddenLanguageSelect = document.getElementById('language-select');
+
+function setLanguageUI(lang) {
+  const labelFn = languageLabelMap[lang];
+  if (languageSelectedLabel && labelFn) {
+    languageSelectedLabel.textContent = labelFn();
+  }
+  languageOptions.forEach((option) => {
+    const isActive = option.dataset.lang === lang;
+    option.classList.toggle('active', isActive);
+    option.setAttribute('aria-selected', isActive.toString());
+  });
+  if (hiddenLanguageSelect) {
+    hiddenLanguageSelect.value = lang;
+  }
+  if (languageToggle) {
+    languageToggle.setAttribute('aria-expanded', 'false');
+  }
+  if (languageDropdown) {
+    languageDropdown.classList.remove('open');
+  }
+}
+
+function setupLanguageDropdown() {
+  if (!languageDropdown || !languageToggle) return;
+
+  languageToggle.addEventListener('click', (event) => {
+    event.stopPropagation();
+    const isOpen = languageDropdown.classList.toggle('open');
+    languageToggle.setAttribute('aria-expanded', isOpen.toString());
+  });
+
+  languageOptions.forEach((option) => {
+    option.addEventListener('click', (event) => {
+      event.stopPropagation();
+      const lang = option.dataset.lang;
+      if (lang) {
+        setLanguage(lang);
+      }
+    });
+  });
+
+  document.addEventListener('click', (event) => {
+    if (!languageDropdown.classList.contains('open')) return;
+    if (!languageDropdown.contains(event.target)) {
+      languageDropdown.classList.remove('open');
+      languageToggle.setAttribute('aria-expanded', 'false');
+    }
+  });
+
+  setLanguageUI(getCurrentLanguage());
+}
+
+setupLanguageDropdown();
+
 function redirectToApp() {
   window.location.href = 'index.html';
 }
@@ -33,7 +107,8 @@ if (existingUser) {
 
 applyLoginTitle();
 
-onLanguageChange(() => {
+onLanguageChange((lang) => {
+  setLanguageUI(lang);
   applyLoginTitle();
   if (errorElement.textContent) {
     setError(t('loginError'));

main.js

@@ -4,6 +4,7 @@ import {
   bindLanguageSelector,
   onLanguageChange,
   getCurrentLanguage,
+  setLanguage,
 } from './i18n.js';
 import { closeIcon, eyeIcon, trashIcon } from './constants.js';
 import {
@@ -59,6 +60,73 @@ const languageApiMap = {
   vi: 'Vietnamese',
 };
 
+const languageLabelMap = {
+  en: () => t('languageEnglish') || 'English',
+  ja: () => t('languageJapanese') || 'Japanese',
+  vi: () => t('languageVietnamese') || 'Vietnamese',
+};
+
+const languageDropdown = document.getElementById('language-dropdown');
+const languageToggle = document.getElementById('language-toggle');
+const languageOptions = document.querySelectorAll('.language-option');
+const languageSelectedLabel = document.getElementById(
+  'language-selected-label'
+);
+const hiddenLanguageSelect = document.getElementById('language-select');
+
+function setLanguageUI(lang) {
+  const labelFn = languageLabelMap[lang];
+  if (languageSelectedLabel && labelFn) {
+    languageSelectedLabel.textContent = labelFn();
+  }
+  languageOptions.forEach((option) => {
+    const isActive = option.dataset.lang === lang;
+    option.classList.toggle('active', isActive);
+    option.setAttribute('aria-selected', isActive.toString());
+  });
+  if (hiddenLanguageSelect) {
+    hiddenLanguageSelect.value = lang;
+  }
+  if (languageToggle) {
+    languageToggle.setAttribute('aria-expanded', 'false');
+  }
+  if (languageDropdown) {
+    languageDropdown.classList.remove('open');
+  }
+}
+
+function setupLanguageDropdown() {
+  if (!languageDropdown || !languageToggle) return;
+
+  languageToggle.addEventListener('click', (event) => {
+    event.stopPropagation();
+    const isOpen = languageDropdown.classList.toggle('open');
+    languageToggle.setAttribute('aria-expanded', isOpen.toString());
+  });
+
+  languageOptions.forEach((option) => {
+    option.addEventListener('click', (event) => {
+      event.stopPropagation();
+      const lang = option.dataset.lang;
+      if (lang) {
+        setLanguage(lang);
+      }
+    });
+  });
+
+  document.addEventListener('click', (event) => {
+    if (!languageDropdown.classList.contains('open')) return;
+    if (!languageDropdown.contains(event.target)) {
+      languageDropdown.classList.remove('open');
+      languageToggle.setAttribute('aria-expanded', 'false');
+    }
+  });
+
+  setLanguageUI(getCurrentLanguage());
+}
+
+setupLanguageDropdown();
+
 const formInputs = [
   textInputElement,
   socialMediaInputElement,
@@ -82,7 +150,8 @@ function updateSubmitButtonLabel() {
     : t('submitButton');
 }
 
-onLanguageChange(() => {
+onLanguageChange((lang) => {
+  setLanguageUI(lang);
   updateSubmitButtonLabel();
   if (!data.value) {
     setDefaultOutputPlaceholder();

styles.css

@@ -125,11 +125,132 @@ body {
   background-repeat: no-repeat;
   background-position: right 12px center;
   background-size: 14px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  transition: border-color 0.2s ease, background-color 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
 .language-select:focus {
+  border-color: #fd7e14;
+  outline: none;
+}
+
+.language-select:hover {
+  border-color: #b6bec8;
+  background-color: #fdfdfd;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+}
+
+.language-select option {
+  padding: 8px 10px;
+  color: #1f2937;
+  background-color: #ffffff;
+  font-weight: 500;
+}
+
+.language-select option:checked {
+  background-color: #fff4e6;
+  color: #d35400;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.language-dropdown {
+  position: relative;
+  min-width: 170px;
+}
+
+.language-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  width: 100%;
+  padding: 6px 12px;
+  background: #ffffff;
+  border: 1px solid #ced4da;
+  border-radius: 8px;
+  color: #1f2937;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease,
+    transform 0.15s ease;
+}
+
+.language-toggle:hover {
+  border-color: #b6bec8;
+  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
+  transform: translateY(-1px);
+}
+
+.language-toggle:focus-visible {
   outline: 2px solid #fd7e14;
-  outline-offset: 1px;
+  outline-offset: 2px;
+}
+
+.language-chevron {
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid #4b5563;
+  transition: transform 0.2s ease;
+}
+
+.language-dropdown.open .language-chevron {
+  transform: rotate(180deg);
+}
+
+.language-options {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  width: 220px;
+  background: #ffffff;
+  border: 1px solid #d7dce3;
+  border-radius: 10px;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
+  padding: 6px;
+  display: none;
+  flex-direction: column;
+  gap: 4px;
+  z-index: 20;
+}
+
+.language-dropdown.open .language-options {
+  display: flex;
+}
+
+.language-option {
+  padding: 10px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  color: #1f2937;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.language-option:hover {
+  background-color: #f5f7fb;
+}
+
+.language-option.active {
+  background-color: #fff4e6;
+  color: #d35400;
 }
 
 /* Main Content Layout */
@@ -1195,5 +1316,5 @@ textarea:focus {
 
 .btn-logout {
   padding: 6px 10px;
-  height: 37px;
+  height: 38px;
 }