From 2a9affbab260f43688d95e3306623db30479fb02 Mon Sep 17 00:00:00 2001 From: Chandan Gowda K S Date: Fri, 3 Oct 2025 13:22:24 +0530 Subject: [PATCH 1/2] Enhanced login,Signin UI/UX Sheet --- frontend/static/styles.css | 40 +++++++++++++++++++++++++++++++++++--- 1 file changed, 37 insertions(+), 3 deletions(-) diff --git a/frontend/static/styles.css b/frontend/static/styles.css index 19295bf..ca7c410 100644 --- a/frontend/static/styles.css +++ b/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); @@ -1933,3 +1950,20 @@ 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; +} From 74652295fa9996cd63138642959a5e380ba22ea2 Mon Sep 17 00:00:00 2001 From: Chandan Gowda K S Date: Fri, 3 Oct 2025 19:51:33 +0530 Subject: [PATCH 2/2] Fixed reponsiveness --- frontend/static/script.js | 17 ++++++ frontend/static/styles.css | 109 +++++++++++++------------------------ 2 files changed, 54 insertions(+), 72 deletions(-) diff --git a/frontend/static/script.js b/frontend/static/script.js index 513225b..88a4946 100644 --- a/frontend/static/script.js +++ b/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'); + } + }); + }); }); diff --git a/frontend/static/styles.css b/frontend/static/styles.css index ca7c410..1e10726 100644 --- a/frontend/static/styles.css +++ b/frontend/static/styles.css @@ -1121,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; - } - - .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; + opacity: 1; + pointer-events: auto; } - - .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; } } @@ -1967,3 +1922,13 @@ body { 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; + } +}