From a659bf728b9acc62c3bdb13bb8ac1956b30ae0c3 Mon Sep 17 00:00:00 2001 From: Ijas Ahammed <83322316+ijas9118@users.noreply.github.com> Date: Wed, 11 Mar 2026 10:01:27 +0300 Subject: [PATCH 1/9] refactor: new ui for auth pages --- src/public/css/footer.css | 3 - src/public/css/signup.css | 14 -- src/public/css/user-ui/auth.css | 166 +++++++++++++++++++++ src/public/css/user-ui/home.css | 94 ++++++++++++ src/public/css/user-ui/main.css | 136 +++++++++++++++++ src/public/css/user.css | 5 +- src/routes/userRoutes.js | 4 +- src/views/layout.ejs | 11 ++ src/views/partials/footer.ejs | 94 +++--------- src/views/partials/header.ejs | 69 ++------- src/views/partials/login_header.ejs | 96 +++--------- src/views/users/home.ejs | 217 ++++++++++------------------ src/views/users/login.ejs | 158 +++++++++----------- src/views/users/signup.ejs | 174 +++++++++++----------- 14 files changed, 705 insertions(+), 536 deletions(-) delete mode 100644 src/public/css/footer.css delete mode 100644 src/public/css/signup.css create mode 100644 src/public/css/user-ui/auth.css create mode 100644 src/public/css/user-ui/home.css create mode 100644 src/public/css/user-ui/main.css diff --git a/src/public/css/footer.css b/src/public/css/footer.css deleted file mode 100644 index 9b51661..0000000 --- a/src/public/css/footer.css +++ /dev/null @@ -1,3 +0,0 @@ -footer { - background: #030013 !important; -} diff --git a/src/public/css/signup.css b/src/public/css/signup.css deleted file mode 100644 index 51557d1..0000000 --- a/src/public/css/signup.css +++ /dev/null @@ -1,14 +0,0 @@ -.img-container { - object-fit: cover; - overflow: hidden; -} -.signup-image { - max-width: 100%; - height: 100%; -} -.form-container { - padding: 20px; -} -.form-group label { - font-weight: bold; -} diff --git a/src/public/css/user-ui/auth.css b/src/public/css/user-ui/auth.css new file mode 100644 index 0000000..0e9c9d4 --- /dev/null +++ b/src/public/css/user-ui/auth.css @@ -0,0 +1,166 @@ +/* =========================== + Auth Pages — Minimal Centered + =========================== */ + +.auth-page { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--surface-color); + padding: 40px 20px; +} + +.auth-card { + width: 100%; + max-width: 460px; + background: var(--bg-color); + border-radius: 24px; + padding: 48px 40px; + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); +} + +@media (max-width: 576px) { + .auth-card { + padding: 32px 24px; + border-radius: 20px; + } +} + +/* Header */ +.auth-header { + text-align: center; + margin-bottom: 36px; +} + +.auth-logo { + height: 36px; + margin-bottom: 28px; +} + +.auth-title { + font-size: 1.75rem; + font-weight: 700; + margin-bottom: 8px; + color: var(--text-color); +} + +.auth-subtitle { + font-size: 0.95rem; + color: var(--text-secondary); + margin: 0; +} + +/* Social / OAuth */ +.auth-social { + display: flex; + gap: 12px; + margin-bottom: 24px; +} + +@media (max-width: 480px) { + .auth-social { + flex-direction: column; + } +} + +.btn-social { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + padding: 11px 16px; + border: 1px solid #E2E8F0; + border-radius: 12px; + background: var(--bg-color); + font-size: 0.9rem; + font-weight: 500; + color: var(--text-color); + cursor: pointer; + transition: var(--transition); +} + +.btn-social:hover { + background: var(--surface-color); + border-color: #CBD5E1; +} + +.btn-social img { + width: 18px; + height: 18px; +} + +/* Divider */ +.auth-divider { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 24px; + font-size: 0.8rem; + font-weight: 500; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.auth-divider::before, +.auth-divider::after { + content: ""; + flex: 1; + height: 1px; + background-color: #E2E8F0; +} + +/* Form Fields */ +.auth-card .form-label { + font-size: 0.85rem; + font-weight: 500; + color: var(--text-color); + margin-bottom: 6px; +} + +.auth-card .form-control-modern { + border-radius: 12px; + padding: 11px 16px; + border: 1px solid #E2E8F0; + background-color: var(--bg-color); + font-size: 0.925rem; + transition: var(--transition); +} + +.auth-card .form-control-modern:focus { + border-color: var(--primary-color); + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08); + outline: none; +} + +.auth-card .form-control-modern::placeholder { + color: #94A3B8; +} + +/* Submit Button */ +.auth-card .btn-primary-modern { + border-radius: 12px; + padding: 12px; + font-size: 0.95rem; + font-weight: 600; +} + +/* Footer */ +.auth-footer { + margin-top: 28px; + text-align: center; + font-size: 0.9rem; + color: var(--text-secondary); +} + +.auth-footer a { + color: var(--primary-color); + font-weight: 600; + text-decoration: none; +} + +.auth-footer a:hover { + text-decoration: underline; +} diff --git a/src/public/css/user-ui/home.css b/src/public/css/user-ui/home.css new file mode 100644 index 0000000..bd0eecf --- /dev/null +++ b/src/public/css/user-ui/home.css @@ -0,0 +1,94 @@ +/* Home Hero Section */ +.hero-section { + padding: 100px 0; + background: white; +} + +.hero-title { + font-size: 3.5rem; + line-height: 1.1; + margin-bottom: 24px; +} + +.hero-subtitle { + font-size: 1.25rem; + color: var(--text-secondary); + margin-bottom: 40px; + max-width: 540px; +} + +/* Categories Section */ +.category-card { + background: white; + border-radius: 20px; + overflow: hidden; + border: none; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); + transition: var(--transition); + text-decoration: none; + display: block; +} + +.category-card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); + transform: translateY(-6px); +} + +.category-img-wrap { + background-color: var(--surface-color); + padding: 32px 24px; + display: flex; + align-items: center; + justify-content: center; + height: 220px; + overflow: hidden; +} + +.category-img-wrap img { + max-width: 100%; + max-height: 100%; + object-fit: contain; + transition: transform 0.4s ease; +} + +.category-card:hover .category-img-wrap img { + transform: scale(1.08); +} + +.category-content { + padding: 24px; + text-align: center; +} + +.category-name { + font-size: 1.1rem; + font-weight: 700; + margin-bottom: 8px; + color: var(--text-color); +} + +.category-link { + font-weight: 600; + font-size: 0.9rem; + color: var(--primary-color); + text-decoration: none; + display: inline-flex; + align-items: center; + gap: 6px; + transition: var(--transition); +} + +.category-link:hover { + gap: 10px; +} + +@media (max-width: 767px) { + .hero-title { + font-size: 2.25rem; + } + + .category-img-wrap { + height: 180px; + padding: 24px 20px; + } +} diff --git a/src/public/css/user-ui/main.css b/src/public/css/user-ui/main.css new file mode 100644 index 0000000..807a135 --- /dev/null +++ b/src/public/css/user-ui/main.css @@ -0,0 +1,136 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); + +:root { + --bg-color: #FFFFFF; + --surface-color: #F8FAFC; + --primary-color: #2563EB; + --primary-hover: #1D4ED8; + --text-color: #0F172A; + --text-secondary: #64748B; + --border-radius: 16px; + --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --transition: all 0.3s ease; +} + +body { + font-family: 'Inter', sans-serif; + background-color: var(--bg-color); + color: var(--text-color); + line-height: 1.6; +} + +h1, h2, h3, h4, h5, h6 { + font-weight: 700; + color: var(--text-color); +} + +/* White & Light Gray layout */ +.bg-surface { + background-color: var(--surface-color); +} + +/* Rounded corners & Soft shadows */ +.card-modern { + background: white; + border-radius: var(--border-radius); + border: none; + box-shadow: var(--shadow-md); + transition: var(--transition); + overflow: hidden; +} + +.card-modern:hover { + box-shadow: var(--shadow-lg); + transform: translateY(-4px); +} + +/* Buttons */ +.btn-primary-modern { + background-color: var(--primary-color); + color: white; + border-radius: 12px; + padding: 12px 24px; + font-weight: 600; + border: none; + transition: var(--transition); + display: inline-flex; + align-items: center; + gap: 8px; +} + +.btn-primary-modern:hover { + background-color: var(--primary-hover); + color: white; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); +} + +.btn-secondary-modern { + background-color: white; + color: var(--text-color); + border: 1px solid #E2E8F0; + border-radius: 12px; + padding: 12px 24px; + font-weight: 600; + transition: var(--transition); +} + +.btn-secondary-modern:hover { + background-color: var(--surface-color); + border-color: #CBD5E1; +} + +/* Form Styles */ +.form-control-modern { + border-radius: 12px; + padding: 12px 16px; + border: 1px solid #E2E8F0; + background-color: var(--surface-color); + transition: var(--transition); +} + +.form-control-modern:focus { + border-color: var(--primary-color); + box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); + outline: none; + background-color: white; +} + +/* Layout Utilities */ +.section-padding { + padding: 80px 0; +} + +.section-title { + font-size: 2.5rem; + margin-bottom: 48px; + text-align: center; +} + +/* Product Image Optimization */ +.product-img-large { + width: 100%; + height: auto; + object-fit: contain; + border-radius: var(--border-radius); +} + +/* Navbar Modern */ +.navbar-modern { + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(12px); + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + padding: 16px 0; +} + +.nav-link-modern { + font-weight: 500; + color: var(--text-secondary); + transition: var(--transition); +} + +.nav-link-modern:hover, .nav-link-modern.active { + color: var(--primary-color); +} diff --git a/src/public/css/user.css b/src/public/css/user.css index 3bbf20a..f6b795f 100644 --- a/src/public/css/user.css +++ b/src/public/css/user.css @@ -1,6 +1,5 @@ -body { - background: linear-gradient(to right, #f3f9fe, #faf3fe); -} +/* Body background handled by user-ui/main.css */ + .order-status-pill { display: inline-flex; diff --git a/src/routes/userRoutes.js b/src/routes/userRoutes.js index 2a8235c..d8e4759 100644 --- a/src/routes/userRoutes.js +++ b/src/routes/userRoutes.js @@ -57,7 +57,7 @@ router.get('/signup', (req, res) => { title: 'Sign Up', header: 'partials/header', viewName: 'users/signup', - activePage: 'home', + activePage: 'signup', isAdmin: false, }); }); @@ -82,7 +82,7 @@ router.get('/login', (req, res) => { title: 'Login', header: 'partials/header', viewName: 'users/login', - activePage: 'home', + activePage: 'login', isAdmin: false, }); }); diff --git a/src/views/layout.ejs b/src/views/layout.ejs index 62db3bc..eca7925 100644 --- a/src/views/layout.ejs +++ b/src/views/layout.ejs @@ -4,6 +4,10 @@ <%= title %> + <% if (!isAdmin) { %> + + <% if (activePage === 'home') { %> + + <% } %> + <% if (activePage === 'login' || activePage === 'signup') { %> + + <% } %> <% } else { %> <% } %> diff --git a/src/views/partials/footer.ejs b/src/views/partials/footer.ejs index de78e45..35845a9 100644 --- a/src/views/partials/footer.ejs +++ b/src/views/partials/footer.ejs @@ -1,77 +1,31 @@ -