Skip to content

redesigning of login/register page #376

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
chaithu-gif wants to merge 7 commits into
base: main
Choose a base branch
from
Open

redesigning of login/register page #376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
811969c
redesigning of login/register page
Jan 3, 2026
1c0423a
Redesign login and signup pages
Jan 5, 2026
6f08b08
Merge branch 'main' into redesign-login-signup
chaithu-gif Jan 10, 2026
033377e
Merge branch 'main' into redesign-login-signup
chaithu-gif Jan 11, 2026
e4d8905
Fix UI overlay contrast and improve visibility
Jan 13, 2026
ac27b78
Merge remote-tracking branch 'upstream/main' into redesign-login-signup
Jan 13, 2026
afb7088
Merge branch 'main' into redesign-login-signup
chaithu-gif Jan 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 126 additions & 7 deletions frontend/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,25 @@ body {
line-height: 1.6;
color: var(--black);
overflow-x: hidden;

background:
url('../logo/sharebite_logo.png') center center / contain no-repeat,
linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(255, 107, 53, 0.1) 50%, rgba(76, 175, 80, 0.1) 100%);
background-attachment: fixed;
}

body.dark-mode {
background:
url('../logo/sharebite_logo.png') center center / contain no-repeat,
linear-gradient(135deg, rgba(0, 50, 0, 0.3) 0%, rgba(0, 30, 0, 0.4) 50%, rgba(0, 50, 0, 0.3) 100%);
background-attachment: fixed;

padding-top: 80px;

padding-top: 60px;

padding-top: 80px;

}

.container {
Expand Down Expand Up @@ -971,6 +989,31 @@ body.dark .profile-menu-item:hover {
}


.toast {
right: 10px;
left: 10px;
text-align: center;
}
}
/* Navigation */
.navbar {
position: fixed;
top: 0;
width: 100%;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 50%, rgba(240, 147, 251, 0.95) 100%);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
z-index: 1000;
transition: var(--transition-medium);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}


/* Navbar state when scrolled (light mode) */
.navbar.scrolled {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.98) 0%, rgba(118, 75, 162, 0.98) 50%, rgba(240, 147, 251, 0.98) 100%);
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);

.nav-logo {
order: 1;
flex: 1;
Expand Down Expand Up @@ -1061,14 +1104,14 @@ body.dark .profile-menu-item:hover {

.nav-link {
text-decoration: none;
color: var(--black);
color: #ffffff;
font-weight: 500;
transition: var(--transition-fast);
position: relative;
}

.nav-link:hover {
color: var(--primary-color);
color: #ffc107;
}

.nav-link::after {
Expand All @@ -1078,7 +1121,7 @@ body.dark .profile-menu-item:hover {
left: 0;
width: 0;
height: 2px;
background: var(--primary-gradient);
background: linear-gradient(90deg, #ffc107 0%, #ff6b35 100%);
transition: var(--transition-medium);
}

Expand Down Expand Up @@ -3285,12 +3328,22 @@ button#cancelForm:hover {
}

:root.dark .navbar {
background: linear-gradient(135deg, rgba(44, 62, 80, 0.95) 0%, rgba(52, 73, 94, 0.95) 50%, rgba(155, 89, 182, 0.95) 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);

background: rgba(18, 18, 18, 0.9);
border-bottom: 1px solid #2a2a2a;
}

/* Navbar state when scrolled (dark mode) */
:root.dark .navbar.scrolled {
background: linear-gradient(135deg, rgba(44, 62, 80, 0.98) 0%, rgba(52, 73, 94, 0.98) 50%, rgba(155, 89, 182, 0.98) 100%);
box-shadow: 0 4px 20px rgba(44, 62, 80, 0.3);
}

:root.dark .nav-link { color: #ffffff; }
:root.dark .nav-link:hover { color: #ffc107; }

background: rgba(18, 18, 18, 0.95);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
Expand All @@ -3304,16 +3357,78 @@ button#cancelForm:hover {
}

.theme-toggle {
background: var(--light-gray);
background: linear-gradient(135deg, #ffc107 0%, #ff6b35 100%);
border: none;
padding: 0.6rem 0.8rem;
border-radius: var(--border-radius);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
color: #fff;
transition: var(--transition-medium);
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

.home-btn {
position: relative;
overflow: hidden;
padding: 10px 20px;
font-size: 0.9rem;
font-family: 'Poppins', sans-serif;
color: #fff;
border: none;
cursor: pointer;
border-radius: 40px;
letter-spacing: 0.5px;
background: linear-gradient(90deg, #3b82f6, #9333ea, #f43f5e);
background-size: 300%;
transition: background-position 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
z-index: 1;
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 500;
}

.home-btn:hover {
background-position: right;
box-shadow: 0 0 12px rgba(147, 51, 234, 0.8), 0 0 25px rgba(59, 130, 246, 0.6);
transform: scale(1.07);
}

.home-btn::before {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.15);
transform: scale(0);
border-radius: inherit;
transition: transform 0.4s ease;
z-index: 0;
}

.home-btn:hover::before {
transform: scale(2.5);
}

.home-btn:active {
animation: pulse 0.4s ease;
}
.theme-toggle:hover {
background: linear-gradient(135deg, #ff8f00 0%, #e65100 100%);
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.5);
}
:root.dark .theme-toggle {
background: linear-gradient(135deg, #9b59b6 0%, #34495e 100%);
color: #fff;
box-shadow: 0 2px 8px rgba(155, 89, 182, 0.3);
}
:root.dark .theme-toggle:hover {
background: linear-gradient(135deg, #8e44ad 0%, #2c3e50 100%);
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(155, 89, 182, 0.5);
}

.theme-toggle:hover {
Expand Down Expand Up @@ -4678,9 +4793,10 @@ body.dark-mode .divider-icon {
}

.notification-bell:hover {
background: rgba(76, 175, 80, 0.1);
background: linear-gradient(135deg, rgba(76, 175, 80, 0.2) 0%, rgba(255, 107, 53, 0.2) 100%);
color: var(--primary-color);
transform: scale(1.1);
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.notification-bell.active {
Expand All @@ -4692,7 +4808,7 @@ body.dark-mode .divider-icon {
position: absolute;
top: -5px;
right: -5px;
background: var(--secondary-color);
background: linear-gradient(135deg, var(--secondary-color) 0%, #ffc107 100%);
color: white;
border-radius: 50%;
width: 18px;
Expand All @@ -4701,6 +4817,9 @@ body.dark-mode .divider-icon {
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: bold;
box-shadow: 0 2px 4px rgba(255, 107, 53, 0.3);
}
font-weight: 600;
animation: pulse 2s infinite;
}
Expand Down
49 changes: 49 additions & 0 deletions frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,55 @@
<button class="clear-notifications" id="clearNotifications">Clear All</button>
main
</div>
<ul class="nav-menu" id="navMenu">
<li><a href="#home" class="nav-link">Home</a></li>
<li><a href="#features" class="nav-link">Features</a></li>
<li><a href="#listings" class="nav-link" id ="listingsLink">Listings</a></li>
<li><a href="#about" class="nav-link">About</a></li>
<li><a href="#contact-section" class="nav-link">Contact</a></li>
</ul>
<div class="user-actions">
<button id="themeToggle" class="theme-toggle" aria-label="Toggle dark mode">
<i class="fas fa-moon"></i>
</button>
<div class="notification-bell" id="notificationBell">
<i class="fas fa-bell"></i>
<span class="notification-badge" id="notificationBadge">3</span>
<div class="notification-panel" id="notificationPanel">
<div class="notification-header">
<span>Notifications</span>
<button class="clear-notifications" id="clearNotifications">Clear All</button>
</div>
<div class="notification-list" id="notificationList">
<div class="notification-item">
<div class="notification-title">New food donation available</div>
<div class="notification-time">5 minutes ago</div>
</div>
<div class="notification-item">
<div class="notification-title">Your listing was viewed 12 times</div>
<div class="notification-time">1 hour ago</div>
</div>
<div class="notification-item">
<div class="notification-title">Reminder: Pickup scheduled for today</div>
<div class="notification-time">3 hours ago</div>
</div>
</div>
</div>
</div>
<button class="role-switch" id="roleSwitch">
<i class="fas fa-exchange-alt"></i>
<span id="currentRole">Donor</span>
</button>


<button class="login-btn" onclick="window.location.href='login.html'">User Login</button>
<button class="login-btn" onclick="window.location.href='login_ngo.html'">NGO Login</button>

</div>
<div class="hamburger" id="menuToggle">
<span></span>
<span></span>
<span></span>
<div class="notification-list" id="notificationList">
<div class="notification-item">
<div class="notification-title">New food donation available</div>
Expand Down
Loading