Merge pull request #936 from Subhajit-2023-44/profile

Add a User Profiles page done ! #875

index.html

@@ -521,6 +521,53 @@ <h2>What type of transportation do you prefer for your travels?</h2>
             <a href="sell.html"><i class="fas fa-tags"></i> Sell</a>
             <a href="contactus.html"><i class="fas fa-envelope"></i> Contact</a>
             <a href="contributor.html"><i class="fas fa-users"></i> Contributors</a>
+
+            <a href="register.html"><i class="fas fa-sign-in-alt"></i> Login</a>
+
+          </div>
+
+
+           <!-- Profile Icon -->
+            <a href="./testp.html" class="profile-link" style="display: flex; align-items: center; text-decoration: none;">
+            <img src="https://i.postimg.cc/tCL5Td4H/gold-membership-icon-default-avatar-profile-icon-membership-icon-social-media-user-image-illustratio.jpg" alt="Profile Icon" style="width: 35px; height: 35px; border-radius: 50%; margin-left: -170px;">
+           </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>
+
+        <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>
+
+
+          <button id="darkModeToggle" style="width: 40px; height: 40px;">🌙</button>
+
+      </nav>
+
             <a href="AI suggestions.html"><i class="fas fa-robot"></i> AI Suggestions</a>
             <a href="client/login.html"><i class="fas fa-sign-in-alt"></i> Login</a>
         </div>
@@ -529,6 +576,7 @@ <h2>What type of transportation do you prefer for your travels?</h2>
         <button id="darkModeToggle" style="width: 40px; height: 40px;">🌙</button>
     </nav>
 
+
     <!-- <div class="slider"> -->
         <div class="slide active">
             <img src="images/6.jpeg" alt="Slide 1">

styles.css

@@ -1224,6 +1224,40 @@ button:hover {
 }
 
 
+.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;
+
+}
 
 
-

testp.css

@@ -0,0 +1,255 @@
+body {
+
+    font-family: 'Arial', sans-serif;
+    background: #1f2937; 
+    margin: 0;
+    padding: 0;
+    /*background-image: url(./assets/images/banner-bg.svg);*/
+
+}
+
+.fa-home {
+
+    position: absolute;
+    right: 190px;
+    top: 40px;
+    font-size: 25px;
+    color: #079874;
+
+}
+
+.fa-home:hover {
+
+    color: #076887; 
+
+}
+
+.profile-container {
+
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    background: #1f2937; 
+    border-radius: 8px; 
+    box-shadow: 0 4px 10px rgb(0 0 0 / 40%); 
+    /*background-image: url(./assets/images/banner-bg.svg);*/
+
+}
+
+.navbar a:hover {
+
+    color: #0056b3; 
+
+}
+
+.profile-card {
+
+    text-align: left;
+    margin: 20px 0;
+    padding: 20px;
+    /*border: 1px solid #ddd;*/ /* Border for the card */
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    background: linear-gradient(135deg, #ead6ee, #a0f1ea);
+
+}
+
+.profile-image {
+
+    border-radius: 50%; 
+    width: 170px;
+    height: 170px;
+    object-fit: cover;
+
+}
+
+.profile-name {
+
+    font-size: 24px;
+    margin: 10px 0;
+
+}
+
+.profile-bio {
+
+    font-size: 16px;
+    color: black; 
+
+}
+
+.edit-profile-btn {
+
+    background: linear-gradient(135deg, #079874, #076887); 
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: background 0.3s, transform 0.3s;
+
+}
+
+.edit-profile-btn:hover {
+
+    background-color: linear-gradient(135deg, #079874, #076887); 
+    transform: scale(1.05); 
+
+}
+
+.edit_profiled{
+
+    background: linear-gradient(135deg, #079874, #076887); 
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: background 0.3s, transform 0.3s;
+    position: relative;
+    right: 40%;
+    left: 290px;
+
+}
+
+.content-section {
+
+    margin: 20px 0;
+
+}
+
+.content-section h2 {
+
+    font-size: 22px;
+    margin-bottom: 10px;
+    color: white;
+
+}
+
+.card {
+
+    background: #f9f9f9; 
+    margin-bottom: 15px;
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    background: linear-gradient(135deg, #ead6ee, #a0f1ea); 
+
+}
+
+.card h3 {
+
+    font-size: 18px;
+    margin: 5px 0;
+
+}
+
+.card p {
+
+    font-size: 14px;
+    color: black;
+
+}
+
+
+.profile-details {
+
+    display: flex; 
+    flex-wrap: wrap; 
+    gap: 20px; 
+
+}
+
+.profile-detail-card {
+
+    flex: 1; /* Allow cards to grow and fill space */
+    min-width: 200px; 
+    background: #f9f9f9; 
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    text-align: center; 
+    background: linear-gradient(135deg, #ead6ee, #a0f1ea); 
+
+}
+
+.nav-links {
+
+    list-style-type: none; 
+    padding: 0; 
+    margin: 0;
+    text-align: right; 
+
+}
+
+.home-link {
+
+    float: right; 
+
+}
+
+.profile-header {
+
+    display: flex; 
+    align-items: center; 
+
+}
+
+.profile-image {
+    margin-right: 20px; 
+    margin-left: 50px;
+    margin-top: 30px;
+}
+
+.profile-info {
+
+    flex: 1; /* Allow this section to take the remaining space */
+    margin-left: 50px;
+
+}
+
+
+
+/* Media Queries for Responsiveness */
+@media (max-width: 768px) {
+
+    .navbar ul {
+
+        flex-direction: column; /* Stack navbar items on smaller screens */
+        align-items: center;
+
+    }
+
+    .profile-container {
+
+        padding: 10px; /* Reduce padding on smaller screens */
+
+    }
+
+    .profile-card {
+
+        margin: 10px 0; /* Reduce margin for smaller screens */
+
+    }
+
+    .content-section h2 {
+
+        font-size: 20px; /* Smaller headings */
+
+    }
+
+    .edit-profile-btn, .view-order-btn {
+
+        width: 100%; /* Full width buttons */
+        padding: 12px; /* Increase padding for easier tapping */
+
+    }
+
+    .footer {
+
+        font-size: 14px; /* Smaller footer text */
+
+    }
+
+}
+
+