Enhanced login & Sign-in UI/UX Sheet

frontend/static/script.js

@@ -84,6 +84,23 @@ document.addEventListener("DOMContentLoaded", function () {
   }
   // Call scroll-to-top setup here
   setupScrollToTop();
+
+  // Hamburger menu toggle for mobile
+  const navToggle = document.getElementById('nav-toggle');
+  const navMenu = document.getElementById('nav-menu');
+
+  navToggle.addEventListener('click', function () {
+      navMenu.classList.toggle('open');
+  });
+
+  // Optional: Close menu when a link is clicked (for better UX)
+  document.querySelectorAll('.nav-link').forEach(link => {
+      link.addEventListener('click', () => {
+          if (window.innerWidth <= 768) {
+              navMenu.classList.remove('open');
+          }
+      });
+  });
 });
 
 

frontend/static/styles.css

@@ -28,7 +28,7 @@
   --nav-bg: rgba(44, 44, 46, 0.8);
   --card-bg: #2c2c2e;
   --shadow-light: rgba(0, 0, 0, 0.3);
-  --shadow-medium: rgba(0, 0, 0, 0.5);
+  --shadow-medium: rgba(37, 35, 35, 0.5);
   --gradient-bg: linear-gradient(135deg, #1c1c1e 0%, #2c2c2e 100%);
 }
 
@@ -182,8 +182,8 @@ body {
   align-items: center;
   gap: 3px;
   white-space: nowrap;
-  height: 32px;
-  min-width: fit-content;
+  height: 38px;
+  width:60px;
 }
 
 .theme-toggle:hover {
@@ -450,6 +450,23 @@ body {
   font-size: 1rem;
 }
 
+/* Make form label and placeholder text white in dark mode */
+[data-theme="dark"] .auth-card label,
+[data-theme="dark"] .auth-card input,
+[data-theme="dark"] .auth-card input::placeholder,
+[data-theme="dark"] .auth-card input[type="text"],
+[data-theme="dark"] .auth-card input[type="password"],
+[data-theme="dark"] .auth-card textarea,
+[data-theme="dark"] .auth-card textarea::placeholder {
+  color: #fff !important;
+}
+
+/* Make all auth-card text white in dark mode, including headings and labels */
+[data-theme="dark"] .auth-card,
+[data-theme="dark"] .auth-card * {
+  color: #fff !important;
+}
+
 /* Make featured items more prominent */
 .featured-items {
   background: var(--gradient-bg);
@@ -1104,88 +1121,43 @@ body {
 /* Responsive Design */
 @media (max-width: 768px) {
   .nav-menu {
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    top: 100%;
-    width: 100%;
-    background: var(--nav-bg);
-    backdrop-filter: blur(20px);
-    right: 0;
-    padding: 22px;
-    gap: 22px;
-    border-top: 1px solid var(--border-color);
-  }
-  .navItems {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-  .nav-menu #auth-buttons {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    width: 100%;
-  }
-  .nav-menu #auth-buttons button {
-    width: 100%;
-  }
-  .active {
     display: none;
+    position: absolute;
+    top: 60px;
+    left: 0;
+    width: 100vw;
+    background: rgba(30, 32, 36, 0.85); /* transparent glassy effect */
+    box-shadow: 0 8px 32px rgba(0,122,255,0.10);
+    border-radius: 0 0 22px 22px;
+    z-index: 1001;
+    transition: opacity 0.3s;
+    opacity: 0;
+    pointer-events: none;
   }
-
-  .nav-toggle {
+  .nav-menu.open {
     display: flex;
-  }
-
-  .hero {
     flex-direction: column;
-    text-align: center;
-    padding: 60px 0;
+    opacity: 1;
+    pointer-events: auto;
   }
-
-  .hero h1 {
-    font-size: 2.5rem;
-  }
-
-  .hero-buttons {
-    justify-content: center;
-  }
-
-  .features-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .items-grid {
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  }
-
-  .form-row {
-    grid-template-columns: 1fr;
-  }
-
-  .user-stats {
+  .navItems {
     flex-direction: column;
-    align-items: center;
-  }
-
-  .swaps-container {
-    grid-template-columns: 1fr;
-  }
-
-  .item-detail-header {
-    grid-template-columns: 1fr;
+    gap: 18px;
+    padding: 18px 0;
+    align-items: flex-start;
   }
-
-  .search-filters {
+  #auth-buttons {
     flex-direction: column;
-    align-items: center;
+    gap: 12px;
+    margin-top: 10px;
   }
+}
 
-  .search-input,
-  .filter-select {
-    width: 100%;
-    max-width: 300px;
+/* Hamburger always visible on mobile */
+@media (max-width: 768px) {
+  .nav-toggle {
+    display: flex !important;
+    z-index: 1002;
   }
 }
 
@@ -1933,3 +1905,30 @@ body {
   max-width: 100%;
   object-fit: contain;
 }
+
+/* Attractive form style for dark mode */
+[data-theme="dark"] .auth-card,
+[data-theme="dark"] .feedback-form,
+[data-theme="dark"] .modal-content {
+  background: rgba(30, 32, 36, 0.82); /* slightly more transparent for glass effect */
+  border: 1.5px solid #3a3a40;
+  box-shadow:
+    0 8px 32px 0 rgba(0, 122, 255, 0.18),
+    0 1.5px 0 rgba(88, 86, 214, 0.10),
+    0 0 0 1.5px rgba(255,255,255,0.10) inset,
+    0 0 40px 4px rgba(0, 174, 255, 0.10); /* brighter, glassy glow */
+  backdrop-filter: blur(22px) saturate(1.3);
+  -webkit-backdrop-filter: blur(22px) saturate(1.3);
+  color: #fff;
+  transition: box-shadow 0.3s, background 0.3s;
+}
+
+/* Make nav menu text white in mobile menu for light mode */
+@media (max-width: 768px) {
+  [data-theme="light"] .nav-menu,
+  [data-theme="light"] .nav-menu .nav-link,
+  [data-theme="light"] .nav-menu .nav-link:visited,
+  [data-theme="light"] .nav-menu .nav-link:active {
+    color: #fff !important;
+  }
+}