Added Password Change Modal

profile.html

@@ -54,7 +54,7 @@ <h3>Friends List</h3>
                 <div class="profile-detail-card">
                     <h3>Change Password</h3>
                     <p>*********63</p>
-                    <button class="edit-profile-btn">Change</button>
+                    <button class="edit-profile-btn" id="changePasswordBtn">Change</button>
                 </div>
 
                 <div class="profile-detail-card">
@@ -93,6 +93,23 @@ <h2>Notifications</h2>
 
     </div>
 
+    <!-- Change Password Modal -->
+    <div id="changePasswordModal" class="modal">
+        <div class="modal-content">
+            <span class="close-btn" id="closeChangePasswordModal">&times;</span>
+            <h2>Change Password</h2>
+            <form id="changePasswordForm">
+                <label for="currentPassword">Current Password:</label>
+                <input type="text" id="currentPassword" required><br>
+                <label for="newPassword">New Password:</label>
+                <input type="password" id="newPassword" required><br>
+                <label for="confirmPassword">Confirm Password:</label>
+                <input type="password" id="confirmPassword" required><br>
+                <button type="submit">Update Password</button>
+            </form>
+        </div>
+    </div>
+
     <script>
         document.addEventListener("DOMContentLoaded", function() {
             // Load saved profile information from localStorage
@@ -119,6 +136,35 @@ <h2>Notifications</h2>
             if (savedAvatar) {
                 document.getElementById("profileImage").src = savedAvatar;
             }
+
+            // Open Change Password Modal
+            document.getElementById("changePasswordBtn").addEventListener("click", function() {
+                console.log("Opening Change Password Modal");
+                document.getElementById("changePasswordModal").style.display = "block";
+            });
+
+            // Close Change Password Modal
+            document.getElementById("closeChangePasswordModal").addEventListener("click", function() {
+                document.getElementById("changePasswordModal").style.display = "none";
+            });
+
+            // Handle Change Password Form Submission
+            document.getElementById("changePasswordForm").addEventListener("submit", function(e) {
+                e.preventDefault();
+                const currentPassword = document.getElementById("currentPassword").value;
+                const newPassword = document.getElementById("newPassword").value;
+                const confirmPassword = document.getElementById("confirmPassword").value;
+
+                if (newPassword === confirmPassword) {
+                    // Save the new password in sessionStorage (for now)
+                    sessionStorage.setItem("userPassword", newPassword);
+                    alert("Password updated successfully!");
+                    document.getElementById("changePasswordModal").style.display = "none";
+                } else {
+                    alert("Passwords do not match!");
+                }
+            });
+
         });
     </script>
 

testp.css

@@ -204,8 +204,81 @@ body {
 
 }
 
-.button-container {
+/* General styles for modal */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: hidden; /* Enable scroll if needed */
+    background-color: rgba(0, 0, 0, 0.4); /* Black background with opacity */
+}
+
+/* Modal Content */
+.modal-content {
+    background: rgb(244 237 227); 
+    margin: 5% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 500px;
+    border-radius: 8px;
+}
+
+.close-btn {
+    color: #aaa;
+    font-size: 28px;
+    font-weight: bold;
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    cursor: pointer;
+}
+
+.close-btn:hover,
+.close-btn:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.modal-content form {
+    display: flex;
+    flex-direction: column;
+}
+
+.modal-content form label {
+    margin: 10px 0 5px;
+    font-weight: bold;
+}
+
+.modal-content form input {
+    padding: 10px;
+    margin-bottom: 15px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+.modal-content form button {
+    padding: 10px 20px;
+    background: rgb(51 51 51); 
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: background 0.3s, transform 0.3s;
+}
 
+.modal-content form button:hover {
+    background-color: #000000; 
+    transform: scale(1.05); 
+}
+
+.button-container {
     display: flex; 
     justify-content: right;
     gap: 15px;