feat: improve theme selection accessibility and styling in index, stats, and studio pages

Author: pphatdev

src/views/pages/index.ejs

@@ -100,16 +100,16 @@
                     <input type="text" name="username" placeholder="pphatdev" required class="w-full px-4 py-3 rounded-xl bg-slate-800 border border-slate-700 text-white focus:ring-2 focus:ring-primary"/>
                 </div>
                 <div>
-                    <label class="block text-sm font-semibold text-slate-300 mb-2">Theme</label>
-                    <select name="theme" class="w-full px-4 py-3 rounded-xl bg-slate-800 border border-slate-700 text-white focus:ring-2 focus:ring-primary">
+                    <label for="tryItTheme" class="block text-sm font-semibold text-slate-300 mb-2">Theme</label>
+                    <select id="tryItTheme" name="theme" class="w-full px-4 py-3 rounded-xl bg-slate-800 border border-slate-700 text-white focus:ring-2 focus:ring-primary">
                         <% themes.forEach(function(themeName) { %>
                             <option value="<%= themeName %>" <%= themeName === 'dark' ? 'selected' : '' %>>
                                 <%= themeName.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ') %>
                             </option>
                         <% }); %>
                     </select>
                 </div>
-                <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-semibold px-6 py-3 rounded-xl transition-colors flex items-center justify-center gap-2">
+                <button type="submit" class="w-full bg-primary/80 hover:bg-primary/90 text-white font-semibold px-6 py-3 rounded-xl transition-colors flex items-center justify-center gap-2">
                     Generate Stats Card
                     <span class="material-icons-outlined">arrow_forward</span>
                 </button>
@@ -248,7 +248,7 @@
 <!-- Footer -->
 <footer class="border-t border-slate-800 mt-24 bg-card-dark">
     <div class="max-w-7xl mx-auto px-6 py-8 text-center">
-        <p class="text-slate-500 dark:text-slate-400">Made with ❤️ by <a href="https://pphat.top" class="text-primary hover:underline">pphatdev</a></p>
+        <p class="text-slate-300">Made with ❤️ by <a href="https://pphat.top" class="text-primary hover:underline">pphatdev</a></p>
     </div>
 </footer>
 

src/views/pages/stats.ejs

@@ -56,8 +56,8 @@
             </div>
             <div class="grid md:grid-cols-3 gap-4">
                 <div>
-                    <label class="block text-sm font-semibold text-slate-300 mb-2">Theme</label>
-                    <select name="theme" class="w-full px-4 py-2 rounded-lg bg-slate-800 border border-slate-700 text-white">
+                    <label for="statsTheme" class="block text-sm font-semibold text-slate-300 mb-2">Theme</label>
+                    <select id="statsTheme" name="theme" class="w-full px-4 py-2 rounded-lg bg-slate-800 border border-slate-700 text-white">
                         <% themes.forEach(function(themeName) { %>
                             <option value="<%= themeName %>" <%= theme === themeName ? 'selected' : '' %>>
                                 <%= themeName.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ') %>
@@ -71,7 +71,7 @@
                 </div>
                 <div class="grid">
                     <label class="block text-sm font-semibold text-slate-300 mb-2 invisible">Custom Title</label>
-                    <button type="submit" class="bg-primary w-full hover:bg-primary/90 text-white font-semibold px-6 py-2 rounded-xl transition-colors">
+                    <button type="submit" class="bg-primary/80 w-full hover:bg-primary/90 text-white font-semibold px-6 py-2 rounded-xl transition-colors">
                         Update Preview
                     </button>
                 </div>
@@ -124,7 +124,7 @@
 <!-- Footer -->
 <footer class="border-t border-slate-800 mt-24 bg-card-dark">
     <div class="max-w-7xl mx-auto px-6 py-8 text-center">
-        <p class="text-slate-400">Made with ❤️ by <a href="https://pphat.top" class="text-primary hover:underline">pphatdev</a></p>
+        <p class="text-slate-300">Made with ❤️ by <a href="https://pphat.top" class="text-primary hover:underline">pphatdev</a></p>
     </div>
 </footer>
 

src/views/pages/studio.ejs

@@ -156,7 +156,7 @@
                 <div class="flex flex-col gap-4">
                     <!-- Theme Selector -->
                     <div class="flex flex-col gap-2 mt-4 px-2 pt-2">
-                        <label class="block text-xs font-medium text-slate-400 uppercase tracking-wide">Theme Preset</label>
+                        <label for="themeSelect" class="block text-xs font-medium text-slate-400 uppercase tracking-wide">Theme Preset</label>
                         <select id="themeSelect" class="w-full px-3 py-2.5 text-sm rounded-lg bg-slate-800/50 border border-slate-700/50 text-white focus:border-primary/50 focus:ring-2 focus:ring-primary/20 transition-all">
                             <option value="">Custom</option>
                             <optgroup label="Built-in Themes">