Recoded the Language Selector

index.html

@@ -1123,32 +1123,48 @@ <h1>Material You NewTab</h1>
                                 </g>
                             </svg>
                         </div>
-
-                        <!-- Language selection button -->
-                        <select class="languageSelector" id="languageSelector">
-                            <option value="en">English</option>
-                            <option value="bn">বাংলা (Bangla)</option>
-                            <option value="zh">中文 (Simplified Chinese)</option>
-                            <option value="cs">Čeština (Czech)</option>
-                            <option value="fr">Français (French)</option>
-                            <option value="hi">हिन्दी (Hindi)</option>
-                            <option value="idn">Bahasa Indonesia (Indonesian)</option>
-                            <option value="it">Italiano (Italian)</option>
-                            <option value="ja">日本語 (Japanese)</option>
-                            <option value="ko">한국어 (Korean)</option>
-                            <option value="mr">मराठी (Marathi)</option>
-                            <option value="pt">Português (Portuguese)</option>
-                            <option value="ru">Русский (Russian)</option>
-                            <option value="es">Español (Spanish)</option>
-                            <option value="tr">Türkçe (Turkish)</option>
-                            <option value="uz">O'zbek (Uzbek)</option>
-                            <option value="vi">Tiếng Việt (Vietnamese)</option>
-                            <!-- Place new language alphabetically -->
-                        </select>
-                        <!-- end of languageSelector -->
+                        <div class="languageSection">
+                            <button class="languageButton" id="languageButton">
+                                <span class="selectedLanguage">English</span>
+                            </button>
+                            <div class="languageDropdown" id="languageDropdown">
+                                <div class="languageOption" data-value="en">English</div>
+                                <hr>
+                                <div class="languageOption" data-value="bn">Bangla <span class="subtext">(বাংলা)</span></div>
+                                <hr>
+                                <div class="languageOption" data-value="zh">Simplified Chinese <span class="subtext">(中文)</span></div>
+                                <hr>
+                                <div class="languageOption" data-value="cs">Czech <span class="subtext">(Čeština)</span></div>
+                                <hr>
+                                <div class="languageOption" data-value="fr">French <span class="subtext">(Français)</span></div>
+                                <hr>
+                                <div class="languageOption" data-value="hi">Hindi <span class="subtext">(हिन्दी)</span></div>
+                                <hr>
+                                <div class="languageOption" data-value="idn">Indonesian <span class="subtext">(Bahasa Indonesia)</span></div>
+                                <hr>
+                                <div class="languageOption" data-value="it">Italian <span class="subtext">(Italiano)</span></div>
+                                <hr>
+                                <div class="languageOption" data-value="ja">Japanese <span class="subtext">(日本語)</span></div>
+                                <hr>
+                                <div class="languageOption" data-value="ko">Korean <span class="subtext">(한국어)</span></div>
+                                <hr>
+                                <div class="languageOption" data-value="mr">Marathi <span class="subtext">(मराठी)</span></div>
+                                <hr>
+                                <div class="languageOption" data-value="pt">Portuguese <span class="subtext">(Português)</span></div>
+                                <hr>
+                                <div class="languageOption" data-value="ru">Russian <span class="subtext">(Русский)</span></div>
+                                <hr>
+                                <div class="languageOption" data-value="es">Spanish <span class="subtext">(Español)</span></div>
+                                <hr>
+                                <div class="languageOption" data-value="tr">Turkish <span class="subtext">(Türkçe)</span></div>
+                                <hr>
+                                <div class="languageOption" data-value="uz">Uzbek <span class="subtext">(O'zbek)</span></div>
+                                <hr>
+                                <div class="languageOption" data-value="vi">Vietnamese <span class="subtext">(Tiếng Việt)</span></div>
+                            </div>
+                        </div>
                     </div>
                     <br>
-
                     <div class="themingStuff">
                         <!-- ⚫🟣🔵🔴🟡🟢🟠⚪ -->
                         <div class="btn" id="themeButton">

languages.js

@@ -1840,7 +1840,7 @@ function localizeNumbers(text, language) {
     return text;  // Return the localized text
 }
 
-// Function to apply the language to the page
+// Function to apply the selected language
 function applyLanguage(lang) {
     // Define an array of elements and their corresponding translation keys
     const translationMap = [
@@ -1959,38 +1959,44 @@ function applyLanguage(lang) {
         menuCont.style.width = menuWidths[lang] || menuWidths['en'];
     }
 
-    //Update hover text for .themingStuff
-    const themingElement = document.querySelector('.themingStuff');
-    if (themingElement) {
-        const localizedText = translations[lang]?.reloadHint || translations['en'].reloadHint;
-        themingElement.setAttribute('data-lang', localizedText);
+        saveLanguageStatus('selectedLanguage', lang); // Save language in localStorage
+        document.querySelector('.selectedLanguage').innerText = document.querySelector(`.languageOption[data-value="${lang}"]`).innerText.trim(); // Update button text
     }
-
-    // Save the selected language in localStorage
-    saveLanguageStatus('selectedLanguage', lang);
-}
-
-// Detect language from navigator.language
-document.getElementById('languageSelector').addEventListener('change', (event) => {
-    applyLanguage(event.target.value);
-    location.reload();
-});
-
-// Function to apply the language when the page loads
-window.onload = function () {
-    const savedLanguage = getLanguageStatus('selectedLanguage') || 'en'; // Default language is English
-    if (savedLanguage) {
-        document.getElementById("languageSelector").value = savedLanguage;
+
+    // Event listener for clicking language options
+    document.querySelectorAll('.languageOption').forEach(option => {
+        option.addEventListener('click', (event) => {
+            const selectedLang = event.target.getAttribute('data-value');
+            applyLanguage(selectedLang);
+
+            // Toggle selected class
+            document.querySelectorAll('.languageOption').forEach(opt => opt.classList.remove('selected'));
+            event.target.classList.add('selected');
+            location.reload(); 
+        });
+    });
+
+    // Toggle dropdown visibility on button click
+    document.getElementById('languageButton').addEventListener('click', () => {
+        document.getElementById('languageDropdown').classList.toggle('visible');
+    });
+
+    // Apply language on page load
+    window.onload = function () {
+        const savedLanguage = getLanguageStatus('selectedLanguage') || 'en'; // Default language
+        applyLanguage(savedLanguage);
+
+        // Set selected class and button text
+        document.querySelector(`.languageOption[data-value="${savedLanguage}"]`).classList.add('selected');
+        document.querySelector('.selectedLanguage').innerText = document.querySelector(`.languageOption[data-value="${savedLanguage}"]`).innerText.trim();
+    };
+
+    // Function to save the language status in localStorage
+    function saveLanguageStatus(key, languageStatus) {
+        localStorage.setItem(key, languageStatus);
     }
-    applyLanguage(savedLanguage);
-};
-
-// Function to save the language status in localStorage
-function saveLanguageStatus(key, languageStatus) {
-    localStorage.setItem(key, languageStatus);
-}
-
-// Function to get the language status from localStorage
-function getLanguageStatus(key) {
-    return localStorage.getItem(key);
-}
+
+    // Function to get the language status from localStorage
+    function getLanguageStatus(key) {
+        return localStorage.getItem(key);
+    }

script.js

@@ -277,7 +277,46 @@ document.addEventListener("click", function (event) {
         googleAppsCont.classList.remove('menu-open'); // Restore tooltip
     }
 });
-// ------------------------End of Google App Menu Setup-----------------------------------
+// ------------------------End of Google App Menu Setup------------------------
+
+// ------------------------Language Selector Setup------------------------
+document.addEventListener("DOMContentLoaded", function() {
+    const languageButton = document.getElementById("languageButton");
+    const languageDropdown = document.getElementById("languageDropdown");
+
+    languageButton.addEventListener("click", function() {
+        const isDropdownVisible = languageDropdown.classList.toggle("show");
+        languageButton.classList.toggle("active", isDropdownVisible);
+    });
+
+    const languageOptions = document.querySelectorAll(".languageOption");
+    languageOptions.forEach(option => {
+        option.addEventListener("click", function() {
+            // Remove selected class from all options
+            languageOptions.forEach(opt => opt.classList.remove("selected"));
+            // Add selected class to clicked option
+            this.classList.add("selected");
+            // Update button text with subtext
+            const mainText = this.childNodes[0].textContent.trim();
+            const subtext = this.querySelector(".subtext") ? this.querySelector(".subtext").outerHTML : "";
+            languageButton.querySelector(".selectedLanguage").innerHTML = mainText + " " + subtext;
+            // Update button's data-value attribute
+            languageButton.setAttribute("data-value", this.getAttribute("data-value"));
+            // Close dropdown
+            languageDropdown.classList.remove("show");
+            languageButton.classList.remove("active");
+        });
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener("click", function(event) {
+        if (!languageButton.contains(event.target) && !languageDropdown.contains(event.target)) {
+            languageDropdown.classList.remove("show");
+            languageButton.classList.remove("active");
+        }
+    });
+});
+// ------------------------End of Language Selector Setup------------------------
 
 // Retrieve current time and calculate initial angles
 var currentTime = new Date();
@@ -1150,13 +1189,15 @@ const applySelectedTheme = (colorValue) => {
             }
 
             .dark-theme .languageIcon,
-            .dark-theme .languageSelector {
+            .dark-theme .languageButton {
                 background-color: #212121;
-                scrollbar-color: var(--darkerColor-blue) transparent;
             }
 
-            .dark-theme .languageSelector::-webkit-scrollbar-thumb,
-            .dark-theme .languageSelector::-webkit-scrollbar-thumb:hover {
+            .dark-theme .languageDropdown {
+                background-color: #212121;
+            }
+            .dark-theme .languageDropdown::-webkit-scrollbar-thumb,
+            .dark-theme .languageDropdown::-webkit-scrollbar-thumb:hover {
                 background-color: var(--darkerColor-blue);
             }
 

style.css

@@ -1886,62 +1886,104 @@ input:checked + .toggle:before {
 	display: flex;
 	justify-content: space-between;
 	gap: var(--gap);
-	margin-top: 30px;
+	position: relative; /* Ensure the dropdown is positioned relative to this container */
 }
 
-.languageSelector {
-	background-color: var(--whitishColor-blue);
+.languageButton {
+	display: flex;
 	align-items: center;
 	justify-content: center;
 	height: fit-content;
-	/* width: 80%; */
-	width: 240px;
+	width: 240px; /* Set a fixed width */
 	border: 2px solid transparent;
-	/* adding transparent border on focus it will be turned to theme color*/
-	display: grid;
-	grid-template-columns: repeat(5, 1fr);
-	/* 5 divs in the first row */
-	grid-auto-rows: auto;
-	grid-gap: 10px;
-	padding: 12px;
-	color: var(--textColorDark-blue);
-	/* padding-right: 0px; */
+	padding: 10px 20px;
+	font-size: 0.82rem;
 	border-radius: 26px;
-	appearance: none;
-	/* Remove default browser styles */
-	-webkit-appearance: none;
-	/* For Safari */
-	-moz-appearance: none;
-	/* For Firefox */
+	background-color: var(--whitishColor-blue);
+	color: var(--textColorDark-blue);
 	cursor: pointer;
-	padding-left: 13px;
+	transition: outline 0.3s ease-in-out;
+	z-index: 1; /* Ensure the button stays above the dropdown */
+}
 
-	@-moz-document url-prefix() {
-		/* Scrollbar styles for Firefox */
-		scrollbar-width: auto;
-		scrollbar-color: var(--darkColor-blue) transparent;
-	}
+.languageButton.active {
+	border: 2px solid var(--darkColor-blue);
+	outline: none;
+}
+
+.languageButton .selectedLanguage {
+	flex-grow: 1; /* Ensure the text takes up available space */
+	text-align: left; /* Align text to the left */
+}
+
+.languageDropdown {
+	display: none;
+	flex-direction: column;
+	border-radius: 20px; /* Rounded corners */
+	background-color: var(--whitishColor-blue);
+	position: absolute; /* Position dropdown absolutely */
+	bottom: -190px; /* Adjust this value based on the height of the dropdown */
+	width: 240px; /* Match width of button */
+	max-height: 190px; /* Set max height for scrollbar */
+	font-size: 12px;
+	overflow-y: auto; /* Enable vertical scrollbar */
+	overflow-x: hidden; /* Hide horizontal scrollbar */
+	z-index: 3; /* Ensure the dropdown stays below the button */
 }
 
-/* Scrollbar styles for Chrome, Edge, Safari */
-.languageSelector::-webkit-scrollbar {
+.languageDropdown .languageOption {
+	padding: 10px 20px;
+	cursor: pointer;
+}
+
+.languageDropdown .languageOption .subtext {
+	color: gray; /* Inherit color from parent */
+	font-size: 10px; /* Adjust font size as needed */
+	margin-left: 5px; /* Space between main text and subtext */
+}
+
+.languageDropdown .languageOption:hover .subtext,
+.languageDropdown .languageOption.selected .subtext {
+	color: var(--darkColor-blue);
+}
+
+.languageDropdown .languageOption:hover,
+.languageDropdown .languageOption.selected {
+	background-color: var(--accentLightTint-blue);
+}
+
+/* Add some margin below each hr element for spacing */
+.languageSelector hr {
+	margin: 5px 0;
+	border: 0.5px solid var(--textColorDark-blue); /* Change the color to gray */
+}
+
+.languageDropdown.show {
+	display: flex;
+}
+
+/* Customize scrollbar to appear on the border */
+/* For Chrome, Edge, Safari */
+.languageDropdown::-webkit-scrollbar {
 	width: 6px;
 }
 
-.languageSelector::-webkit-scrollbar-track {
+.languageDropdown::-webkit-scrollbar-track {
 	background-color: transparent;
 }
 
-.languageSelector::-webkit-scrollbar-thumb {
-	background-color: var(--bg-color-blue);
+.languageDropdown::-webkit-scrollbar-thumb,
+.languageDropdown::-webkit-scrollbar-thumb:hover {
+	background-color: var(--darkColor-blue);
 	border-radius: 3px;
 }
 
-.languageSelector:focus {
-	border: 2px solid var(--darkColor-blue);
-	/* color matching border on focus */
-	outline: none;
-	/* Removes the default outline */
+/* For Firefox */
+@-moz-document url-prefix() {
+	.languageDropdown {
+		scrollbar-width: auto;
+		scrollbar-color: var(--darkColor-blue) transparent;
+	}
 }
 
 .colorsContainer {
@@ -1965,7 +2007,7 @@ input:checked + .toggle:before {
 	appearance: none;
 	-webkit-appearance: none;
 	-moz-appearance: none;
-	background-color: #fff;
+	background-color: var(--whitishColor-blue);
 	height: 36px;
 	width: 36px;
 	border-radius: 18px;