From 85ccaac8d449eb215cbd2eed4a48237a3b895a81 Mon Sep 17 00:00:00 2001 From: Avni Singh Date: Sun, 26 Jan 2025 14:06:47 +0530 Subject: [PATCH] Updated Login page updated login --- pages/Login.css | 131 +++++++++++++++++++++++++++++++++++++--------- pages/Login.html | 65 +++++++++-------------- pages/email.png | Bin 0 -> 9451 bytes pages/padlock.png | Bin 0 -> 9362 bytes 4 files changed, 132 insertions(+), 64 deletions(-) create mode 100644 pages/email.png create mode 100644 pages/padlock.png diff --git a/pages/Login.css b/pages/Login.css index 1307c641..9a8f006f 100644 --- a/pages/Login.css +++ b/pages/Login.css @@ -2,17 +2,99 @@ body { font-family: 'Poppins', sans-serif; background: linear-gradient(to top right, #80ff00, #07922a); - color: #ffffff; /* Keeps text readable against the green */ + color: #333; margin: 0; padding: 0; display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - min-height: 100vh; + justify-content: center; + align-items: center; + min-height: 100vh; +} + + + +/* Unified Input Styling */ +.unified-input { + display: flex; + align-items: center; + background: #f5f5f5; + padding: 0.75rem 1rem; + border: 2px solid #ddd; + border-radius: 8px; + transition: border-color 0.3s, box-shadow 0.3s; +} + + +/* Hover and Focus Effects */ +.unified-input:hover { + border-color: #007bff; + box-shadow: 0 0 8px rgba(0, 123, 255, 0.2); +} + + +.unified-input:focus-within { + background: #ffffff; /* Clean white background */ + border-color: #007bff; /* Blue border on focus */ + box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); /* Glow effect */ +} + +/* Input Icon Styling */ +.input-icon { + width: 24px; /* Icon size */ + height: 24px; + margin-right: 0.75rem; /* Spacing between icon and input */ + opacity: 0.8; /* Slight transparency */ + transition: opacity 0.3s ease; /* Smooth hover effect */ +} + +.unified-input:hover .input-icon { + opacity: 1; /* Fully visible on hover */ +} + +/* Input Field Styling */ +.input-field { + flex: 1; + border: none; + outline: none; + background: none; + font-size: 1rem; + color: #333; +} + +.input-field::placeholder { + color: #aaa; + font-style: italic; } +.input-field:focus::placeholder { + color: transparent; /* Hide placeholder on focus */ + opacity: 0; +} + +/* Input Group (for spacing) */ +.input-group { + margin-bottom: 1.2rem; +} +/* Submit Button (for color harmony) */ +.submit-btn { + width: 100%; + padding: 1rem; + background: linear-gradient(135deg, #007bff, #0056b3); /* Blue gradient */ + border: none; + border-radius: 12px; + color: white; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + margin-bottom: 1.5rem; +} + +.submit-btn:hover { + transform: translateY(-2px); + box-shadow: 0 10px 20px -10px rgba(0, 123, 255, 0.5); +} /* Navbar Styles */ .navbar { @@ -213,16 +295,14 @@ body { } .auth-container { - width: 70vw; - max-width: 420px; - padding: 2.5rem; - background: #f5f5dc; /* Earthy beige tone */ - border-radius: 24px; - box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3); - backdrop-filter: blur(10px); - border: 1px solid rgba(0, 0, 0, 0.1); - color: #333; /* Dark gray for good contrast */ -} + background: #fff; + border-radius: 20px; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); + padding: 2rem; + max-width: 400px; + width: 100%; + text-align: center; + } .auth-header { text-align: center; @@ -262,11 +342,7 @@ body { font-size: 0.95rem; } - .input-group { - position: relative; - margin-bottom: 1.5rem; - } - + .input-label { display: block; font-size: 0.875rem; @@ -298,10 +374,17 @@ body { background: rgba(6, 184, 66, 0.1); /* Slightly darker background on hover */ } - .input-field::placeholder { - color: var(--text-secondary); - opacity: 0.7; - } +.input-field::placeholder { + color: var(--text-secondary); + opacity: 0.7; + transition: color 0.3s ease, opacity 0.3s ease; +} + +.input-field:focus::placeholder { + color: transparent; /* Hides placeholder on focus */ + opacity: 0; +} + .auth-options { display: flex; diff --git a/pages/Login.html b/pages/Login.html index 3316d240..97e5b124 100644 --- a/pages/Login.html +++ b/pages/Login.html @@ -3,37 +3,25 @@ - - - - - Sign In / Sign Up - - + + Sign In / Sign Up - -