From 2f6ddd26c9465bb43287a482294205177bc031d8 Mon Sep 17 00:00:00 2001 From: Sizolwakhe Leonard Mthimunye Date: Fri, 13 Mar 2026 04:43:42 +0200 Subject: [PATCH 1/8] added counter --- .../src/main/resources/static/js/count.js | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 users_microservice/src/main/resources/static/js/count.js diff --git a/users_microservice/src/main/resources/static/js/count.js b/users_microservice/src/main/resources/static/js/count.js new file mode 100644 index 00000000..05eddf76 --- /dev/null +++ b/users_microservice/src/main/resources/static/js/count.js @@ -0,0 +1,32 @@ +document.addEventListener('DOMContentLoaded', () => { + const counters = document.querySelectorAll('.stats-number'); + + const options = { + threshold: 0.2, + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const target = parseInt(entry.target.getAttribute('data-target')) || 0; + animateValue(entry.target, 0, target, 1800); + observer.unobserve(entry.target); + } + }); + }, options); + + counters.forEach(el => observer.observe(el)); + + function animateValue(obj, start, end, duration) { + let startTimestamp = null; + const step = (timestamp) => { + if (!startTimestamp) startTimestamp = timestamp; + const progress = Math.min((timestamp - startTimestamp) / duration, 1); + obj.textContent = Math.floor(progress * (end - start) + start).toLocaleString(); + if (progress < 1) { + window.requestAnimationFrame(step); + } + }; + window.requestAnimationFrame(step); + } +}); \ No newline at end of file From e232c1fa52554d4f9c31c2aba63d60b17ef80e6b Mon Sep 17 00:00:00 2001 From: Sizolwakhe Leonard Mthimunye Date: Fri, 13 Mar 2026 04:45:26 +0200 Subject: [PATCH 2/8] added global styles --- .../resources/static/css/global-styles.css | 258 +++++------------- 1 file changed, 65 insertions(+), 193 deletions(-) diff --git a/users_microservice/src/main/resources/static/css/global-styles.css b/users_microservice/src/main/resources/static/css/global-styles.css index 8042c783..794f85ab 100644 --- a/users_microservice/src/main/resources/static/css/global-styles.css +++ b/users_microservice/src/main/resources/static/css/global-styles.css @@ -1,3 +1,7 @@ +/* ================================================ + GLOBAL STYLES - site-wide variables & resets + ================================================ */ + :root { --black: #000000; --dark-grey: #111111; @@ -5,7 +9,6 @@ --light-orange: #ffb74d; --light-green: #81c784; --focus-green: #4caf50; - --pink: #ff69b4; --light-grey: #1e1e1e; --medium-grey: #2a2a2a; --text-light: #e0e0e0; @@ -15,240 +18,109 @@ * { box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; } body { - background-color: #0a0a0a; + background-color: var(--black); 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; + min-height: 100vh; } -h1, h2, h3, h4 { +h1, h2, h3, h4, h5, h6 { color: white; font-weight: 700; + line-height: 1.2; } -section { - padding-top: 3.5rem; - padding-bottom: 4rem; -} - -.section-grey, -.section-medium { - border: 2px solid var(--pink); - border-radius: 12px; - background-color: var(--light-grey); - margin: 0 auto 2rem auto; - max-width: 1400px; - color: var(--text-light); -} - -.section-medium { - background-color: var(--medium-grey); -} - -.card { - 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); +a { + text-decoration: none; + color: inherit; } -.card:hover { - transform: translateY(-6px); - 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%; +img { + max-width: 100%; + height: auto; + display: block; } -.btn-black, -.btn-primary-custom { - background-color: white; - color: var(--black); - border: 2px solid white; +/* Buttons - global base styles */ +.btn { font-weight: 600; transition: all 0.3s ease; + border-radius: 6px; } -.btn-black:hover, -.btn-primary-custom:hover { - background-color: var(--dark-orange); - color: white; - border-color: var(--dark-orange); - transform: translateY(-2px); - box-shadow: 0 8px 20px rgba(230, 81, 0, 0.4); -} - -.btn-login { - 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; -} - -.btn-login:hover { - background-color: var(--dark-orange); - color: white; - border-color: var(--dark-orange); +.btn:hover { transform: translateY(-2px); } -.btn-learn-more { - background-color: var(--light-orange); - 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.3); -} - -.btn-learn-more:hover { - background-color: #ff9800; - border-color: #388e3c; - color: white; - transform: translateY(-3px) scale(1.05); - box-shadow: 0 12px 28px rgba(76, 175, 80, 0.4); -} - -.btn-learn-more:focus { - outline: none; - box-shadow: 0 0 0 0.3rem rgba(76, 175, 80, 0.4); -} - -.nav-link { - color: white !important; - font-weight: 500; - position: relative; - padding-bottom: 0.6rem; - transition: color 0.25s ease; -} - -.nav-link:hover, -.nav-link.active { - color: var(--light-orange) !important; -} - -.nav-link::after { - content: ''; - position: absolute; - bottom: 0; - left: 5%; - width: 0; - height: 3px; - background-color: var(--light-orange); - border-radius: 3px; - transition: width 0.35s ease, left 0.35s ease; -} - -.nav-link.active::after, -.nav-link:hover::after { - width: 90%; - left: 5%; +/* Container helper */ +.container { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; + margin-right: auto; + margin-left: auto; + max-width: 1400px; } -nav { - border-bottom: 3px solid var(--pink); - background-color: #111111; +/* Section spacing – reduced vertical padding & margin */ +section { + padding: 2.5rem 1rem; } -.hero { - min-height: 70vh; - display: flex; - align-items: center; - border-bottom: 4px solid var(--pink); - margin-bottom: 3rem; - padding: 5rem 0 4rem; - background-color: #0a0a0a; +.section-grey, +.section-medium { + border-radius: 12px; + margin: 0 auto 1.5rem; + max-width: 1400px; + padding: 2.5rem 1.5rem; } -.hero-text h1 { - color: var(--light-orange); +/* Cards */ +.card { + background-color: #0d0d0d; + border: 1px solid #222; + border-radius: 10px; + color: var(--text-light); + transition: transform 0.25s ease, box-shadow 0.25s ease; + overflow: hidden; } -.hero-img img { - max-width: 100%; - height: auto; - border-radius: 16px; - border: 3px solid var(--pink); +.card:hover { + transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6); } -@media (max-width: 991px) { - .hero-text { - text-align: center; - margin-bottom: 3rem; - } - .hero-img { - text-align: center; - } -} - -/* 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; +.card h4 { color: white; + margin-bottom: 1rem; } -.form-label { - color: var(--text-light); -} - -.form-group:focus-within .form-label { - color: var(--focus-green) !important; -} - -/* Footer */ -footer { - background-color: #111111; - border-top: 4px solid var(--pink); - color: var(--text-muted); - padding: 3rem 0 2rem; -} - -footer p { +.card p { color: var(--text-muted); } -footer a { - color: var(--light-orange); -} - -/* Extra spacing helpers */ -.py-5 { - padding-top: 3rem !important; - padding-bottom: 3rem !important; +/* Force consistent black background + reduced spacing override */ +.hero, +.section-grey, +.section-medium, +nav, +footer, +.card { + background-color: var(--black) !important; } -.mt-5 { - margin-top: 3rem !important; +.card { + border: 1px solid #222; } \ No newline at end of file From 7f0203f87451b7f3efe2bdd287111939c3454916 Mon Sep 17 00:00:00 2001 From: Sizolwakhe Leonard Mthimunye Date: Fri, 13 Mar 2026 04:45:46 +0200 Subject: [PATCH 3/8] added global styles --- .../main/resources/templates/home/index.html | 356 +++++++++++------- 1 file changed, 225 insertions(+), 131 deletions(-) diff --git a/users_microservice/src/main/resources/templates/home/index.html b/users_microservice/src/main/resources/templates/home/index.html index e40cacf5..70a2d2a9 100644 --- a/users_microservice/src/main/resources/templates/home/index.html +++ b/users_microservice/src/main/resources/templates/home/index.html @@ -1,97 +1,145 @@ - - - - - + + + Alcohol Agent - - - - - + + - + - -