done

ayush-that · Nov 1, 2024 · efa32a1 · efa32a1
1 parent 0d22f0b
commit efa32a1
Show file tree

Hide file tree

Showing 5 changed files with 453 additions and 1 deletion.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -3327,4 +3327,40 @@ transition: background-color 0.3s;
 }
 .dropdown-toggle::after {
   border-top: 1px;
-}
+}
+
+.profile-icon {
+
+  border-radius: 50%;
+  position: relative;
+  margin-left: 20px; /* Adjust space between Login button and Profile icon */
+
+}
+
+.dropdown-menu {
+
+  display: none;
+  position: absolute;
+  top: 35px; /* Adjust based on the height of your navbar */
+  right: 0;
+  background-color: white;
+  color: black;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  z-index: 1;
+
+}
+
+.dropdown-menu a {
+
+  display: block;
+  padding: 10px 15px;
+  text-decoration: none;
+
+}
+
+.dropdown-menu a:hover {
+
+  background-color: #f1f1f1;
+
+}
diff --git a/index.html b/index.html
@@ -306,6 +306,22 @@
                         data-scroll-nav="0" href="./loginPage.html">Login/Register 💻</a>
                     </li>
 
+                    <!-- Profile Icon -->
+                    <li class="nav-item no-underline">
+                         <a href="./profile.html" class="profile-link" style="display: flex; align-items: center; text-decoration: none;">
+                         <img src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" alt="Profile Icon" style="width: 50px; height: 50px; border-radius: 50%; margin-top: -17px;">
+                        </a>
+                    </li>
+
+                    <style>
+                      /* Override the existing hover styles */
+                      .navbar-nav .nav-item .profile-link:hover {
+                          background-color: transparent !important; /* Remove background color */
+                          border-radius: 0 !important; /* Reset border radius */
+                          transform: none !important; /* Prevent scaling */
+                      }
+                    </style>
+
                     <li class="nav-item no-underline">
                       <button id="theme-toggle" class="theme-toggle" style="margin-right: 2px;">
                         🌙
@@ -315,6 +331,23 @@
                 </div>
 
                 <script>
+                  function toggleMenu() {
+                      const menu = document.getElementById('profileMenu');
+                      menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
+                  }
+
+                  // Close the dropdown if the user clicks outside of it
+                  window.onclick = function(event) {
+                      if (!event.target.matches('.profile-icon img')) {
+                          const menu = document.getElementById('profileMenu');
+                          if (menu.style.display === 'block') {
+                              menu.style.display = 'none';
+                          }
+                      }
+                  }
+              </script>
+
+              <script>
                   // Function to update the authentication button based on login status
                   function updateAuthButton() {
                     const authBtnContainer = document.getElementById("auth-btn-container");

diff --git a/profile.html b/profile.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="stylesheet" href="testp.css"> <!-- Link to your CSS file -->
+
+    <script src="testp.js" defer></script>
+
+    <title>Profile Page</title>
+
+</head>
+
+<body>
+
+    <div class="profile-container">
+
+        <div class="content-section">
+            <h2>Your Profile</h2>
+            <a href="index.html">
+                <i class="fas fa-home"></i>
+            </a>
+            <div class="profile-card">
+                <div class="profile-header">
+                    <img src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" alt="Profile Image" class="profile-image">
+
+                    <div class="profile-info">
+                        <h3 class="profile-name">Skylar Reed</h3>
+                        <p class="profile-email">Email: [email protected]</p>
+                        <p class="profile-phone">Phone: +987 654 3210</p>
+                        <p class="profile-bio">Joined: October 31, 2024</p>
+                        <p class="profile-bio">About Me: Hello!🙋🏻‍♂️ Feel free to reach out to me at [email protected] 😎</p>
+                        <p id="last-active">Last active: 31/10/2024, 11:12 PM</p>
+
+                    </div>
+
+                </div>
+                    <button class="edit-profile-btn edit_profiled">Edit Profile</button>
+                </a>
+            </div>
+        </div>
+
+        <div class="content-section">
+
+            <h2>Account Details</h2>
+            <div class="profile-details">
+                <div class="profile-detail-card" id="profileCard">
+                    <h3>Address</h3>
+                    <p id="addressText" contenteditable="false">789 Pine Lane, Austin, TX 73301</p>
+                    <a href="#"><button class="edit-profile-btn">Edit</button></a>
+                </div>
+
+                <div class="profile-detail-card">
+                    <h3>Change Password</h3>
+                    <p>*********63</p>
+                    <button class="edit-profile-btn">Change</button></a>
+                </div>
+
+                <div class="profile-detail-card">
+                    <h3>Privacy Settings</h3>
+                    <p>Visibility Status: Public</p>
+                    <a href="#">
+                    <button class="edit-profile-btn">Edit</button></a>
+                </div>
+
+                <div class="profile-detail-card">
+                    <h3>Recent Activity</h3>
+                    <p>Updated profile information</p>
+                    <a href="#">
+                    <button class="edit-profile-btn">View</button></a>
+                </div>
+
+            </div>
+        </div>
+
+        <section class="content-section">
+
+            <h2>Notifications</h2>
+            <div class="card">
+                <p>Your profile has been updated successfully!</p>
+
+                <button class="edit-profile-btn">View Notification</button>
+            </div>
+            <div class="card">
+                <p>Joshef Roy has sent you a friend request. Accept or decline?</p>
+
+                <button class="edit-profile-btn">View Notification</button>
+            </div>
+
+        </section>
+
+</body>
+
+</html>