From 911c261c7909e1f339c1e50fd77307e36b19ac4f Mon Sep 17 00:00:00 2001 From: Sizolwakhe Leonard Mthimunye Date: Wed, 4 Mar 2026 21:14:52 +0200 Subject: [PATCH 1/6] add aa html structure --- .../resources/templates/home/forgot-password.html | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/users_microservice/src/main/resources/templates/home/forgot-password.html b/users_microservice/src/main/resources/templates/home/forgot-password.html index 30495e77..f29fb712 100644 --- a/users_microservice/src/main/resources/templates/home/forgot-password.html +++ b/users_microservice/src/main/resources/templates/home/forgot-password.html @@ -110,19 +110,6 @@ - -
From 5061679755a717528c76e56951fecac61bd8f597 Mon Sep 17 00:00:00 2001 From: Sizolwakhe Leonard Mthimunye Date: Wed, 4 Mar 2026 21:15:27 +0200 Subject: [PATCH 2/6] add aa html structure --- .../src/main/resources/templates/home/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/users_microservice/src/main/resources/templates/home/index.html b/users_microservice/src/main/resources/templates/home/index.html index 6699a7df..2700eef4 100644 --- a/users_microservice/src/main/resources/templates/home/index.html +++ b/users_microservice/src/main/resources/templates/home/index.html @@ -33,7 +33,7 @@ Pricing Contact Get Started - + @@ -139,7 +139,7 @@

Pricing Plans

Free

R0

Basic tracking & awareness tools

- Start Free + Start Free
@@ -147,7 +147,7 @@

Free

Premium

R49/mo

Advanced insights • Reports • No ads

- Try 14 days free + Try 14 days free
From 8799f727c729530dded969700a3213f6a57fbdcd Mon Sep 17 00:00:00 2001 From: Sizolwakhe Leonard Mthimunye Date: Wed, 4 Mar 2026 21:16:17 +0200 Subject: [PATCH 3/6] add aa html structure --- .../src/main/resources/templates/home/login.html | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/users_microservice/src/main/resources/templates/home/login.html b/users_microservice/src/main/resources/templates/home/login.html index f7b582c7..1c2e63f0 100644 --- a/users_microservice/src/main/resources/templates/home/login.html +++ b/users_microservice/src/main/resources/templates/home/login.html @@ -118,9 +118,8 @@ Alcohol Agent
@@ -149,7 +148,7 @@

Login Form

- Forgot Password? + Forgot Password?
From 8c93fc02c198d8c1592f43baa5fd5b4b4a9662af Mon Sep 17 00:00:00 2001 From: Sizolwakhe Leonard Mthimunye Date: Wed, 4 Mar 2026 21:16:47 +0200 Subject: [PATCH 4/6] add aa html structure --- .../src/main/resources/templates/home/registration.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/users_microservice/src/main/resources/templates/home/registration.html b/users_microservice/src/main/resources/templates/home/registration.html index c61f37fd..6b5ec708 100644 --- a/users_microservice/src/main/resources/templates/home/registration.html +++ b/users_microservice/src/main/resources/templates/home/registration.html @@ -94,9 +94,8 @@ Alcohol Agent
From c3ca674f60d60ea9b6dc185425cdb591caaa3077 Mon Sep 17 00:00:00 2001 From: Sizolwakhe Leonard Mthimunye Date: Wed, 4 Mar 2026 21:17:13 +0200 Subject: [PATCH 5/6] add aa html structure --- .../src/main/resources/templates/home/reset.html | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/users_microservice/src/main/resources/templates/home/reset.html b/users_microservice/src/main/resources/templates/home/reset.html index 87786f64..352f451e 100644 --- a/users_microservice/src/main/resources/templates/home/reset.html +++ b/users_microservice/src/main/resources/templates/home/reset.html @@ -110,19 +110,7 @@ - - +
From 16ecfd207387a7a1fd8874d747cf59d434c7a509 Mon Sep 17 00:00:00 2001 From: Sizolwakhe Leonard Mthimunye Date: Wed, 4 Mar 2026 21:17:42 +0200 Subject: [PATCH 6/6] add aa html structure --- .../src/main/resources/static/css/styles.css | 155 +++++++++++------- 1 file changed, 98 insertions(+), 57 deletions(-) diff --git a/users_microservice/src/main/resources/static/css/styles.css b/users_microservice/src/main/resources/static/css/styles.css index 88bebf3e..8042c783 100644 --- a/users_microservice/src/main/resources/static/css/styles.css +++ b/users_microservice/src/main/resources/static/css/styles.css @@ -6,18 +6,30 @@ --light-green: #81c784; --focus-green: #4caf50; --pink: #ff69b4; - --light-grey: #f8f9fa; - --medium-grey: #e9ecef; + --light-grey: #1e1e1e; + --medium-grey: #2a2a2a; + --text-light: #e0e0e0; + --text-muted: #a0a0a0; --nav-height: 70px; } +* { + box-sizing: border-box; +} + body { - background-color: #ffffff; - color: #111111; + background-color: #0a0a0a; + color: var(--text-light); font-family: 'Space Grotesk', system-ui, sans-serif; line-height: 1.6; scroll-behavior: smooth; padding-top: var(--nav-height); + margin: 0; +} + +h1, h2, h3, h4 { + color: white; + font-weight: 700; } section { @@ -32,6 +44,7 @@ section { background-color: var(--light-grey); margin: 0 auto 2rem auto; max-width: 1400px; + color: var(--text-light); } .section-medium { @@ -39,39 +52,57 @@ section { } .card { - background-color: #ffffff; + background-color: #111111; border: 2px solid var(--pink) !important; border-radius: 10px; + color: var(--text-light); transition: transform 0.2s ease, box-shadow 0.2s ease; } +.card h4 { + color: white; +} + +.card p { + color: var(--text-muted); +} + .card:hover { transform: translateY(-6px); - box-shadow: 0 12px 24px rgba(255,105,180,0.25); + box-shadow: 0 12px 24px rgba(255, 105, 180, 0.25); +} + +.feature-img { + max-height: 160px; + object-fit: cover; + border-radius: 8px; + border: 1px solid var(--pink); + margin-bottom: 1.25rem; + width: 100%; } .btn-black, .btn-primary-custom { - background-color: var(--black); - color: #ffffff; - border: 2px solid var(--black); + background-color: white; + color: var(--black); + border: 2px solid white; font-weight: 600; transition: all 0.3s ease; } .btn-black:hover, .btn-primary-custom:hover { - background-color: var(--light-orange); - color: #222222; - border-color: var(--light-orange); + background-color: var(--dark-orange); + color: white; + border-color: var(--dark-orange); transform: translateY(-2px); - box-shadow: 0 8px 20px rgba(255,183,77,0.4); + box-shadow: 0 8px 20px rgba(230, 81, 0, 0.4); } .btn-login { - background-color: #ffffff; - color: var(--dark-grey); - border: 2px solid var(--dark-grey); + background-color: transparent; + color: var(--text-light); + border: 2px solid var(--text-light); font-weight: 500; transition: all 0.3s ease; padding: 0.375rem 1rem; @@ -86,11 +117,11 @@ section { .btn-learn-more { background-color: var(--light-orange); - color: white; + color: var(--black); border: 2px solid var(--focus-green); font-weight: 600; transition: all 0.3s ease; - box-shadow: 0 4px 12px rgba(129, 199, 132, 0.25); + box-shadow: 0 4px 12px rgba(129, 199, 132, 0.3); } .btn-learn-more:hover { @@ -98,7 +129,7 @@ section { border-color: #388e3c; color: white; transform: translateY(-3px) scale(1.05); - box-shadow: 0 12px 28px rgba(76, 175, 80, 0.35); + box-shadow: 0 12px 28px rgba(76, 175, 80, 0.4); } .btn-learn-more:focus { @@ -107,7 +138,7 @@ section { } .nav-link { - color: var(--black) !important; + color: white !important; font-weight: 500; position: relative; padding-bottom: 0.6rem; @@ -116,7 +147,7 @@ section { .nav-link:hover, .nav-link.active { - color: var(--black) !important; + color: var(--light-orange) !important; } .nav-link::after { @@ -126,7 +157,7 @@ section { left: 5%; width: 0; height: 3px; - background-color: var(--light-green); + background-color: var(--light-orange); border-radius: 3px; transition: width 0.35s ease, left 0.35s ease; } @@ -137,30 +168,9 @@ section { left: 5%; } -.form-control:focus, -.form-control:active { - border-color: var(--focus-green) !important; - box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25) !important; - outline: none; -} - -.form-label { - transition: color 0.2s ease; -} - -.form-group:focus-within .form-label { - color: var(--focus-green) !important; - font-weight: 500; -} - -h1, h2, h3, h4 { - font-weight: 700; - color: var(--black); -} - nav { border-bottom: 3px solid var(--pink); - background-color: #ffffff; + background-color: #111111; } .hero { @@ -170,13 +180,11 @@ nav { border-bottom: 4px solid var(--pink); margin-bottom: 3rem; padding: 5rem 0 4rem; - background-color: #fff; + background-color: #0a0a0a; } .hero-text h1 { - color: var(--dark-orange); - font-size: 4.5rem; - line-height: 1.1; + color: var(--light-orange); } .hero-img img { @@ -184,7 +192,7 @@ nav { height: auto; border-radius: 16px; border: 3px solid var(--pink); - box-shadow: 0 12px 32px rgba(0,0,0,0.15); + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6); } @media (max-width: 991px) { @@ -197,17 +205,50 @@ nav { } } -.feature-img { - max-height: 160px; - object-fit: cover; - border-radius: 8px; - border: 1px solid var(--pink); - margin-bottom: 1.25rem; +/* Form styling in dark mode */ +.form-control { + background-color: #222; + color: white; + border: 1px solid #444; } +.form-control:focus { + border-color: var(--focus-green) !important; + box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25) !important; + background-color: #222; + color: white; +} + +.form-label { + color: var(--text-light); +} + +.form-group:focus-within .form-label { + color: var(--focus-green) !important; +} + +/* Footer */ footer { - background-color: var(--light-grey); + background-color: #111111; border-top: 4px solid var(--pink); + color: var(--text-muted); padding: 3rem 0 2rem; - color: var(--black); +} + +footer p { + color: var(--text-muted); +} + +footer a { + color: var(--light-orange); +} + +/* Extra spacing helpers */ +.py-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; +} + +.mt-5 { + margin-top: 3rem !important; } \ No newline at end of file