From 299fb70d78dde39a74c320218b8141b3c92af4e7 Mon Sep 17 00:00:00 2001
From: singharaj usai <djjd22938@gmail.com>
Date: Mon, 30 Sep 2024 21:05:28 -0400
Subject: [PATCH] gender picker setting

---
 client/html/pages/settings/settings.html | 20 ++++++++++++++++++++
 client/js/settings.js                    | 16 ++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/client/html/pages/settings/settings.html b/client/html/pages/settings/settings.html
index 4f004fe..28b82b4 100644
--- a/client/html/pages/settings/settings.html
+++ b/client/html/pages/settings/settings.html
@@ -32,9 +32,29 @@ <h3 class="panel-title">Appearance</h3>
                         <option value="cyborg">Dark Mode</option>
                     </select>
                 </div>
+
+                <div class="form-group">
+                    <label>Gender</label>
+                    <div id="gender-picker">
+                        <label>
+                            <input type="radio" name="gender" value="male">
+                            <i class="bi bi-gender-male"></i> Male
+                        </label>
+                        <label>
+                            <input type="radio" name="gender" value="female">
+                            <i class="bi bi-gender-female"></i> Female
+                        </label>
+                        <label>
+                            <input type="radio" name="gender" value="other">
+                            <i class="bi bi-gender-trans"></i> Other
+                        </label>
+                    </div>
+                </div>
                 <button id="save-settings" class="btn btn-primary">Save Settings</button>
             </div>
         </div>
+
+        
     </div>
 
     <!-- Scripts -->
diff --git a/client/js/settings.js b/client/js/settings.js
index 301d232..1a7d240 100644
--- a/client/js/settings.js
+++ b/client/js/settings.js
@@ -3,20 +3,36 @@ $(document).ready(function() {
     App.init();
     loadUserSettings();
 
+    // gender picker
+    $('.gender-option').on('click', function() {
+        $('.gender-option').removeClass('selected');
+        $(this).addClass('selected');
+    });
+
     // Handle save settings button click
     $('#save-settings').on('click', saveUserSettings);
+    
 });
 
 function loadUserSettings() {
     const theme = localStorage.getItem('theme') || 'cyborg';
     $('#theme-select').val(theme);
     applyTheme(theme);
+
+    const gender = localStorage.getItem('gender') || 'other';
+    $(`#gender-picker input[value="${gender}"]`).prop('checked', true);
+
 }
 
 function saveUserSettings() {
     const theme = $('#theme-select').val();
+    const gender = $('#gender-picker input:checked').val();
+
     localStorage.setItem('theme', theme);
+    localStorage.setItem('gender', gender);
+
     applyTheme(theme);
+    
     showAlert('Settings saved successfully!', 'success');
 }