Merge pull request #176 from My-Mation/language-button-improvement

Ctoic · web-flow · commit 4df430c1d2be · 2025-10-02T12:11:45.000+05:00
Improve language selection button attractiveness
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5503
+}
diff --git a/adventures.html b/adventures.html
@@ -147,7 +147,6 @@
                             <select
                                 id="language"
                                 onchange="changeLanguage()"
-                                style="background-color: #1db954; color: #fff"
                             >
                                 <option value="en">English</option>
                                 <option value="fr">Français</option>
diff --git a/fs.html b/fs.html
@@ -147,7 +147,6 @@
                             <select
                                 id="language"
                                 onchange="changeLanguage()"
-                                style="background-color: #1db954; color: #fff"
                             >
                                 <option value="en">English</option>
                                 <option value="fr">Français</option>
diff --git a/gd.html b/gd.html
@@ -151,7 +151,6 @@
                                 <select
                                     id="language"
                                     onchange="changeLanguageLocally()"
-                                    style="background-color: #1db954; color: #fff"
                                 >
                                     <option value="en">English</option>
                                     <option value="fr">Français</option>
diff --git a/index.html b/index.html
@@ -107,7 +107,6 @@
           <select
               id="language"
               onchange="changeLanguage()"
-              style="background-color: #1db954; color: #fff"
           >
               <option value="en">English</option>
               <option value="fr">Français</option>
diff --git a/pbd.html b/pbd.html
@@ -148,7 +148,6 @@
                             <select
                                 id="language"
                                 onchange="changeLanguage()"
-                                style="background-color: #1db954; color: #fff"
                             >
                                 <option value="en">English</option>
                                 <option value="fr">Français</option>
diff --git a/rdpd.html b/rdpd.html
@@ -147,7 +147,6 @@
                             <select
                                 id="language"
                                 onchange="changeLanguage()"
-                                style="background-color: #1db954; color: #fff"
                             >
                                 <option value="en">English</option>
                                 <option value="fr">Français</option>
diff --git a/style.css b/style.css
@@ -117,13 +117,37 @@ li:hover {
 
 .language-selector {
   margin: 20px;
+  position: relative;
 }
 
 .language-selector select {
-  padding: 10px;
-  font-size: 10px;
-  border-radius: 7px;
+  padding: 12px 16px;
+  font-size: 16px;
+  border-radius: 25px;
   font-weight: 500;
+  border: 2px solid #1db954;
+  background-color: #1db954;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  appearance: none; /* Remove default arrow */
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 20px;
+  padding-right: 40px; /* Space for the icon */
+}
+
+.language-selector select:hover {
+  background-color: #25a56a;
+  border-color: #25a56a;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(29, 185, 84, 0.3);
+}
+
+.language-selector select:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.5);
 }
 
 body {

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "liveServer.settings.port": 5503`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -147,7 +147,6 @@`
`147`	`147`	`<select`
`148`	`148`	`id="language"`
`149`	`149`	`onchange="changeLanguage()"`
`150`		`- style="background-color: #1db954; color: #fff"`
`151`	`150`	`>`
`152`	`151`	`<option value="en">English</option>`
`153`	`152`	`<option value="fr">Français</option>`
Original file line number	Diff line number	Diff line change
`@@ -151,7 +151,6 @@`
`151`	`151`	`<select`
`152`	`152`	`id="language"`
`153`	`153`	`onchange="changeLanguageLocally()"`
`154`		`- style="background-color: #1db954; color: #fff"`
`155`	`154`	`>`
`156`	`155`	`<option value="en">English</option>`
`157`	`156`	`<option value="fr">Français</option>`
Original file line number	Diff line number	Diff line change
`@@ -107,7 +107,6 @@`
`107`	`107`	`<select`
`108`	`108`	`id="language"`
`109`	`109`	`onchange="changeLanguage()"`
`110`		`- style="background-color: #1db954; color: #fff"`
`111`	`110`	`>`
`112`	`111`	`<option value="en">English</option>`
`113`	`112`	`<option value="fr">Français</option>`
Original file line number	Diff line number	Diff line change
`@@ -148,7 +148,6 @@`
`148`	`148`	`<select`
`149`	`149`	`id="language"`
`150`	`150`	`onchange="changeLanguage()"`
`151`		`- style="background-color: #1db954; color: #fff"`
`152`	`151`	`>`
`153`	`152`	`<option value="en">English</option>`
`154`	`153`	`<option value="fr">Français</option>`