diff --git a/users_microservice/src/main/java/com/users/application/controllers/PagesController.java b/users_microservice/src/main/java/com/users/application/controllers/PagesController.java index 495d2911..5c694b68 100644 --- a/users_microservice/src/main/java/com/users/application/controllers/PagesController.java +++ b/users_microservice/src/main/java/com/users/application/controllers/PagesController.java @@ -15,7 +15,7 @@ public String index(){ @GetMapping("/sign-up") public String signupPage() { - return "home/sign-up"; // looks for signup.html in src/main/resources/templates + return "home/registration"; // looks for signup.html in src/main/resources/templates } @GetMapping("/reset") diff --git a/users_microservice/src/main/resources/static/css/styles.css b/users_microservice/src/main/resources/static/css/styles.css new file mode 100644 index 00000000..88bebf3e --- /dev/null +++ b/users_microservice/src/main/resources/static/css/styles.css @@ -0,0 +1,213 @@ +:root { + --black: #000000; + --dark-grey: #111111; + --dark-orange: #e65100; + --light-orange: #ffb74d; + --light-green: #81c784; + --focus-green: #4caf50; + --pink: #ff69b4; + --light-grey: #f8f9fa; + --medium-grey: #e9ecef; + --nav-height: 70px; +} + +body { + background-color: #ffffff; + color: #111111; + font-family: 'Space Grotesk', system-ui, sans-serif; + line-height: 1.6; + scroll-behavior: smooth; + padding-top: var(--nav-height); +} + +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; +} + +.section-medium { + background-color: var(--medium-grey); +} + +.card { + background-color: #ffffff; + border: 2px solid var(--pink) !important; + border-radius: 10px; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.card:hover { + transform: translateY(-6px); + box-shadow: 0 12px 24px rgba(255,105,180,0.25); +} + +.btn-black, +.btn-primary-custom { + background-color: var(--black); + color: #ffffff; + border: 2px solid var(--black); + 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); + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(255,183,77,0.4); +} + +.btn-login { + background-color: #ffffff; + color: var(--dark-grey); + border: 2px solid var(--dark-grey); + 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); + transform: translateY(-2px); +} + +.btn-learn-more { + background-color: var(--light-orange); + color: white; + 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); +} + +.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.35); +} + +.btn-learn-more:focus { + outline: none; + box-shadow: 0 0 0 0.3rem rgba(76, 175, 80, 0.4); +} + +.nav-link { + color: var(--black) !important; + font-weight: 500; + position: relative; + padding-bottom: 0.6rem; + transition: color 0.25s ease; +} + +.nav-link:hover, +.nav-link.active { + color: var(--black) !important; +} + +.nav-link::after { + content: ''; + position: absolute; + bottom: 0; + left: 5%; + width: 0; + height: 3px; + background-color: var(--light-green); + border-radius: 3px; + transition: width 0.35s ease, left 0.35s ease; +} + +.nav-link.active::after, +.nav-link:hover::after { + width: 90%; + 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; +} + +.hero { + min-height: 70vh; + display: flex; + align-items: center; + border-bottom: 4px solid var(--pink); + margin-bottom: 3rem; + padding: 5rem 0 4rem; + background-color: #fff; +} + +.hero-text h1 { + color: var(--dark-orange); + font-size: 4.5rem; + line-height: 1.1; +} + +.hero-img img { + max-width: 100%; + height: auto; + border-radius: 16px; + border: 3px solid var(--pink); + box-shadow: 0 12px 32px rgba(0,0,0,0.15); +} + +@media (max-width: 991px) { + .hero-text { + text-align: center; + margin-bottom: 3rem; + } + .hero-img { + text-align: center; + } +} + +.feature-img { + max-height: 160px; + object-fit: cover; + border-radius: 8px; + border: 1px solid var(--pink); + margin-bottom: 1.25rem; +} + +footer { + background-color: var(--light-grey); + border-top: 4px solid var(--pink); + padding: 3rem 0 2rem; + color: var(--black); +} \ No newline at end of file diff --git a/users_microservice/src/main/resources/static/css/templatemo-606-string-master.css b/users_microservice/src/main/resources/static/css/templatemo-606-string-master.css deleted file mode 100644 index 87cdf00d..00000000 --- a/users_microservice/src/main/resources/static/css/templatemo-606-string-master.css +++ /dev/null @@ -1,1733 +0,0 @@ -@charset "utf-8"; -/* CSS Document - -TemplateMo 606 String Master - -https://templatemo.com/tm-606-string-master - -*/ - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --bg-dark: darkblue; - --bg-card: seagreen; - --bg-elevated: #242424; - --accent: #f59e0b; - --accent-light: #fbbf24; - --accent-dark: #d97706; - --text-primary: orange; - --text-secondary: azure; - --text-muted: White; - --border: #2e2e2e; -} - -html { - scroll-behavior: smooth; -} - -body { - font-family: 'Space Grotesk', sans-serif; - background: var(--bg-white); - color: var(--text-primary); - line-height: 1.6; -} -/* Centering via container */ -.form-container { - display: flex; - justify-content: center; - align-items: center; - height: 46vh; /* full viewport height */ -} - - -.contact-form { - - background-color: forestgreen; - border: 2px solid orange; - padding: 20px; - border-radius: 8px; - width: 550px; - box-shadow: 0 4px 6px rgba(0,0,0,0.1); -} - -.contact-form h2 { - text-align: center; - margin-bottom: 20px; - color: #333; -} - -.contact-form label { - display: block; - margin-bottom: 5px; - font-weight: bold; - color: white; -} - -.contact-form input, -.contact-form textarea { - width: 100%; - padding: 8px; - margin-bottom: 15px; - border: 1px solid #ccc; - border-radius: 4px; - box-sizing: border-box; - height:57px; - font-size:20px; -} - -.contact-form button { - width: 100%; - padding: 10px; - background-color: orange; - border: none; - border-radius: 4px; - color: white; - font-size: 26px; - cursor: pointer; - height:63px; -} - -.contact-form button:hover { - background-color: darkorange; -} - -/* Popup overlay */ -.popup { - display: none; /* hidden by default */ - position: fixed; - top: 0; left: 0; - width: 100%; height: 100%; - background: rgba(0,0,0,0.5); /* semi-transparent background */ - justify-content: center; - align-items: center; - z-index: 999; -} - -/* Popup box */ -.popup-content { - background: #ffffff; - border: 3px solid orange; - border-radius: 8px; - padding: 20px; - width: 500px; - height: 200px; - text-align: center; - box-shadow: 0 4px 10px rgba(0,0,0,0.3); - color: forestgreen; -} - -.error-message { - color: red; - font-weight: bold; -} - -.input-error { - border: 2px solid red !important; -} - - -.ok-btn { - margin-top: 20px; - padding: 12px 30px; - background: orange; /* vibrant orange background */ - border: none; - border-radius: 25px; /* pill-shaped button */ - color: white; /* white text */ - font-size: 16px; - font-weight: bold; - cursor: pointer; - box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* subtle shadow */ - transition: all 0.3s ease; /* smooth hover effect */ -} - -.ok-btn:hover { - background: darkorange; /* darker orange on hover */ - transform: scale(1.05); /* slight zoom effect */ -} - -.ok-btn:active { - transform: scale(0.95); /* press-down effect */ -} -/* Slider viewport */ -.slider { - position: relative; - height: 387px; - width: 526px; /* adjust as needed */ - overflow: hidden; /* show only one slide at a time */ - margin: auto; - border: 3px solid orange; - border-radius: 8px; -} - -/* Slides strip */ -.slides { - display: flex; /* lay images in a row */ - transition: transform 1s ease-in-out; /* smooth slide */ -} - -/* Each image occupies exactly one viewport */ -.slides img { - flex: 0 0 100%; /* each slide = 100% of slider width */ - width: 100%; - height: 100%; - object-fit: cover; /* fill nicely without distortion */ - display: block; /* avoid inline spacing issues */ -} - -/* Navigation buttons */ -.prev, .next { - position: absolute; - top: 50%; - transform: translateY(-50%); - background: green; - color: white; - border: none; - padding: 10px 14px; - cursor: pointer; - font-size: 18px; - border-radius: 50%; - z-index: 2; -} - -.prev { left: 10px; } -.next { right: 10px; } - -.prev:hover, .next:hover { - background: darkgreen; -} - -/* Navigation */ -nav { - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 1000; - background: rgba(13, 13, 13, 0.9); - backdrop-filter: blur(20px); - border-bottom: 1px solid var(--border); -} - -.nav-container { - max-width: 1200px; - margin: 0 auto; - padding: 1rem 2rem; - display: flex; - justify-content: space-between; - align-items: center; -} - -.logo { - font-size: 1.5rem; - font-weight: 700; - color: var(--text-primary); - text-decoration: none; - display: flex; - align-items: center; - gap: 0.5rem; - - -} - -.logo-img{ -width: 110px; - height: 110px; - display: inline-block; - -} -.logo-img2{ -width: 750px; - height: 750px; - display: inline-block; - -} - -.logo-icon { - width: 32px; - height: 32px; - background: var(--accent); - border-radius: 8px; - display: flex; - align-items: center; - justify-content: center; -} - -.nav-links { - display: flex; - gap: 2rem; - list-style: none; -} - -.nav-links a { - color: burlywood; - text-decoration: none; - font-size: 0.95rem; - font-weight: 500; - transition: color 0.2s; -} - -.nav-links a:hover { - color: var(--accent); -} - -.nav-cta { - background: var(--accent); - color: white; - padding: 0.6rem 1.5rem; - border-radius: 8px; - text-decoration: none; - font-weight: 600; - font-size: 0.9rem; - transition: all 0.2s; -} - -.nav-cta span { - display: inline; - background: transparent; - padding: 0; -} - -.nav-cta:hover { - background: var(--accent-light); - transform: translateY(-1px); -} - -/* Hero Section */ -.hero { - /* min-height: 100vh; */ - /* Uncomment for full-screen hero */ - display: flex; - align-items: center; - padding: 8rem 2rem 4rem; - position: relative; - overflow: hidden; -} - -.hero::before { - content: ''; - position: absolute; - top: -50%; - right: -20%; - width: 80%; - height: 150%; - background: radial-gradient(ellipse, rgba(245, 158, 11, 0.08) 0%, transparent 70%); - pointer-events: none; -} - -.hero-container { - max-width: 1200px; - margin: 0 auto; - display: grid; - grid-template-columns: 1fr 1fr; - gap: 4rem; - align-items: center; -} - -.hero-content { - position: relative; - z-index: 1; -} - -.hero-badge { - display: inline-flex; - align-items: center; - gap: 0.5rem; - background: var(--bg-card); - border: 1px solid var(--border); - padding: 0.5rem 1rem; - border-radius: 100px; - font-size: 0.85rem; - color: var(--text-secondary); - margin-bottom: 1.5rem; -} - -.hero-badge span { - color: var(--accent); -} - -.hero h1 { - font-size: clamp(2.5rem, 5vw, 4rem); - font-weight: 700; - line-height: 1.1; - margin-bottom: 1.5rem; - letter-spacing: -0.02em; - color: green; - margin: 32px 0px; - -} - -.hero h1 .highlight { - color: var(--accent); -} - -.hero-description { - font-size: 1.15rem; - color: var(--text-secondary); - margin-bottom: 2rem; - max-width: 480px; - color: black; - -} - -.hero-buttons { - display: flex; - gap: 1rem; - margin-bottom: 3rem; -} - -.btn-primary { - background: var(--accent); - color: white; - padding: 1rem 2rem; - border-radius: 10px; - text-decoration: none; - font-weight: 600; - display: inline-flex; - align-items: center; - gap: 0.5rem; - transition: all 0.2s; -} - -.btn-primary:hover { - background: var(--accent-light); - transform: translateY(-2px); - box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3); -} - -.btn-secondary { - background: transparent; - color: var(--text-primary); - padding: 1rem 2rem; - border-radius: 10px; - text-decoration: none; - font-weight: 600; - border: 1px solid var(--border); - transition: all 0.2s; -} - -.btn-secondary:hover { - border-color: var(--text-secondary); - background: var(--bg-card); -} - -.hero-stats { - display: flex; - gap: 3rem; -} - -.stat { - text-align: left; -} - -.stat-value { - font-size: 2rem; - font-weight: 700; - color: var(--text-primary); -} - -.stat-label { - font-size: 0.85rem; - color: black; -} - -/* Guitar Section */ -.guitar-wrapper { - position: relative; - z-index: 1; - height:387px; -} - -.guitar-card { - background: var(--bg-card); - border: 1px solid var(--border); - border-radius: 20px; - padding: 1.5rem; - box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5); -} - -.guitar-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 1rem; - padding-bottom: 1rem; - border-bottom: 1px solid var(--border); -} - -.guitar-title { - font-size: 0.9rem; - font-weight: 600; - color: var(--text-secondary); -} - -.guitar-controls { - display: flex; - gap: 0.5rem; -} - -.chord-btn { - background: var(--bg-elevated); - border: 1px solid var(--border); - color: var(--text-primary); - padding: 0.4rem 0.8rem; - border-radius: 6px; - font-size: 0.8rem; - font-family: inherit; - font-weight: 500; - cursor: pointer; - transition: all 0.15s; -} - -.chord-btn:hover { - background: var(--accent); - color: var(--bg-dark); - border-color: var(--accent); -} - -.chord-btn.active { - background: var(--accent); - color: var(--bg-dark); - border-color: var(--accent); -} - -/* Mini Guitar Fretboard */ -.guitar-neck { - position: relative; - overflow: hidden; - border-radius: 8px; -} - -.fretboard { - background: - repeating-linear-gradient(90deg, - transparent 0px, - rgba(60, 30, 20, 0.15) 1px, - transparent 2px, - transparent 6px), - linear-gradient(180deg, - #3d2517 0%, - #2a1810 20%, - #1f120b 50%, - #2a1810 80%, - #3d2517 100%); - border-radius: 6px; - border: 3px solid #1a0f08; - border-top: none; -} - -.nut { - height: 10px; - background: linear-gradient(180deg, - #f5f5dc 0%, - #d4cba8 50%, - #c9c098 100%); - border-radius: 6px 6px 0 0; -} - -.fretboard-grid { - display: grid; - grid-template-columns: repeat(8, 1fr); - grid-template-rows: repeat(6, 32px); - position: relative; -} - -.string-labels { - position: absolute; - left: -28px; - top: 0; - height: calc(6 * 32px); - display: flex; - flex-direction: column; -} - -.string-label { - height: 32px; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.7rem; - color: var(--text-muted); - font-weight: 500; -} - -.fret { - position: relative; - border-right: 2px solid #c0a080; - border-bottom: 1px solid rgba(200, 200, 200, 0.4); - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: background 0.1s; -} - -.fret:hover { - background: rgba(245, 158, 11, 0.15); -} - -.fret::after { - content: ''; - position: absolute; - left: 0; - right: 0; - top: 50%; - transform: translateY(-50%); - pointer-events: none; -} - -/* String thickness - thicker for lower strings */ -.fret[data-string="0"]::after { - height: 1px; - background: linear-gradient(90deg, - rgba(200, 180, 160, 0.4), - rgba(240, 220, 200, 0.7), - rgba(200, 180, 160, 0.4)); -} - -.fret[data-string="1"]::after { - height: 1px; - background: linear-gradient(90deg, - rgba(200, 180, 160, 0.4), - rgba(240, 220, 200, 0.7), - rgba(200, 180, 160, 0.4)); -} - -.fret[data-string="2"]::after { - height: 2px; - background: linear-gradient(90deg, - rgba(190, 170, 150, 0.5), - rgba(230, 210, 190, 0.8), - rgba(190, 170, 150, 0.5)); -} - -.fret[data-string="3"]::after { - height: 2px; - background: linear-gradient(90deg, - rgba(180, 160, 140, 0.5), - rgba(220, 200, 180, 0.8), - rgba(180, 160, 140, 0.5)); -} - -.fret[data-string="4"]::after { - height: 3px; - background: linear-gradient(90deg, - rgba(160, 140, 120, 0.5), - rgba(200, 180, 160, 0.85), - rgba(160, 140, 120, 0.5)); - box-shadow: 0 0 2px rgba(200, 180, 160, 0.3); -} - -.fret[data-string="5"]::after { - height: 4px; - background: linear-gradient(90deg, - rgba(150, 130, 110, 0.5), - rgba(190, 170, 150, 0.9), - rgba(150, 130, 110, 0.5)); - box-shadow: 0 0 3px rgba(190, 170, 150, 0.4); -} - -.note-marker { - width: 18px; - height: 18px; - background: var(--accent); - border-radius: 50%; - display: none; - align-items: center; - justify-content: center; - font-size: 0.5rem; - font-weight: 700; - color: var(--bg-dark); - z-index: 2; - box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5); -} - -.note-marker.show { - display: flex; -} - -.note-marker.playing { - animation: notePulse 0.3s ease; -} - -@keyframes notePulse { - 0% { - transform: scale(1); - } - - 50% { - transform: scale(1.3); - } - - 100% { - transform: scale(1); - } -} -.contact-form input:focus, -.contact-form textarea:focus { - border: 2px solid orange; /* green border when active */ - outline: none; /* remove default browser outline */ -} - -.fret-marker { - position: absolute; - width: 8px; - height: 8px; - background: rgba(255, 255, 255, 0.15); - border-radius: 50%; - pointer-events: none; -} - -.guitar-footer { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid var(--border); - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.guitar-footer-row { - display: flex; - justify-content: space-between; - align-items: center; -} - -.guitar-hint { - font-size: 0.75rem; - color: var(--text-muted); -} - -.footer-controls { - display: flex; - align-items: center; - gap: 1rem; -} - -.clear-btn { - background: var(--bg-elevated); - border: 1px solid var(--border); - color: var(--text-secondary); - padding: 0.3rem 0.6rem; - border-radius: 5px; - font-size: 0.7rem; - font-family: inherit; - cursor: pointer; - transition: all 0.15s; -} - -.clear-btn:hover { - background: var(--border); - color: var(--text-primary); -} - -.sound-toggle { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.8rem; - color: var(--text-secondary); -} - -.toggle-switch { - width: 36px; - height: 20px; - background: var(--bg-elevated); - border-radius: 10px; - position: relative; - cursor: pointer; - transition: background 0.2s; -} - -.toggle-switch.active { - background: var(--accent); -} - -.toggle-switch::after { - content: ''; - position: absolute; - width: 16px; - height: 16px; - background: var(--text-primary); - border-radius: 50%; - top: 2px; - left: 2px; - transition: transform 0.2s; -} - -.toggle-switch.active::after { - transform: translateX(16px); -} - -/* Song Player */ -.song-player { - display: flex; - align-items: center; - gap: 0.75rem; - background: var(--bg-elevated); - border-radius: 8px; - padding: 0.5rem 0.75rem; -} - -.play-btn { - width: 32px; - height: 32px; - background: var(--accent); - border: none; - border-radius: 50%; - color: var(--bg-dark); - font-size: 0.9rem; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.15s; - flex-shrink: 0; -} - -.play-btn:hover { - background: var(--accent-light); - transform: scale(1.05); -} - -.play-btn.playing { - background: var(--accent-dark); -} - -.song-info { - flex: 1; - min-width: 0; -} - -.song-title { - font-size: 0.75rem; - font-weight: 600; - color: var(--text-primary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.song-progress { - width: 100%; - height: 3px; - background: var(--border); - border-radius: 2px; - margin-top: 4px; - overflow: hidden; -} - -.song-progress-bar { - height: 100%; - background: var(--accent); - width: 0%; - transition: width 0.1s linear; -} - -.song-select { - background: var(--bg-dark); - border: 1px solid var(--border); - color: var(--text-secondary); - padding: 0.3rem 0.5rem; - border-radius: 5px; - font-size: 0.7rem; - font-family: inherit; - cursor: pointer; -} - -.song-select:focus { - outline: none; - border-color: var(--accent); -} - -/* Features Section */ -.features { - padding: 6rem 2rem; - background: var(--bg-card); -} - -.section-container { - max-width: 1200px; - margin: 0 auto; -} - -.section-header { - text-align: center; - margin-bottom: 4rem; -} - -.section-label { - font-size: 0.85rem; - color: var(--accent); - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.1em; - margin-bottom: 1rem; -} - -.section-title { - font-size: clamp(2rem, 4vw, 3rem); - font-weight: 700; - margin-bottom: 1rem; - letter-spacing: -0.02em; -} - -.section-description { - font-size: 1.1rem; - color: black; - max-width: 600px; - margin: 0 auto; -} - -.features-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 2rem; -} - -.feature-card { - background: var(--bg-dark); - border: 1px solid var(--border); - border-radius: 16px; - padding: 2rem; - transition: all 0.3s; -} - -.feature-card:hover { - border-color: var(--accent); - transform: translateY(-4px); -} - -.feature-icon { - width: 56px; - height: 56px; - background: var(--bg-elevated); - border-radius: 14px; - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 1.5rem; - color: var(--accent); - transition: all 0.3s; -} - -.feature-card:hover .feature-icon { - background: var(--accent); - color: var(--bg-dark); -} - -.feature-card h3 { - font-size: 1.25rem; - font-weight: 600; - margin-bottom: 0.75rem; -} - -.feature-card p { - color: var(--text-secondary); - font-size: 0.95rem; -} - -/* Pricing Section */ -.pricing { - padding: 6rem 2rem; -} - -.billing-toggle { - display: flex; - justify-content: center; - align-items: center; - gap: 0.5rem; - margin-bottom: 3rem; - background: var(--bg-card); - padding: 0.5rem; - border-radius: 12px; - width: fit-content; - margin-left: auto; - margin-right: auto; - border: 1px solid var(--border); -} - -.billing-option { - padding: 0.75rem 1.5rem; - border-radius: 8px; - font-size: 0.9rem; - font-weight: 500; - color: var(--text-secondary); - cursor: pointer; - transition: all 0.2s; - position: relative; - background: transparent; - border: none; - font-family: inherit; -} - -.billing-option:hover { - color: var(--text-primary); -} - -.billing-option.active { - background: var(--accent); - color: var(--bg-dark); -} - -.billing-option .discount-badge { - position: absolute; - top: -8px; - right: -8px; - background: #22c55e; - color: #fff; - font-size: 0.65rem; - font-weight: 700; - padding: 0.2rem 0.4rem; - border-radius: 4px; -} - -.pricing-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 2rem; -} - -.pricing-card { - background: var(--bg-card); - border: 1px solid var(--border); - border-radius: 20px; - padding: 2.5rem; - position: relative; - transition: all 0.3s; -} - -.pricing-card:hover { - transform: translateY(-4px); -} - -.pricing-card.featured { - border-color: var(--accent); - box-shadow: 0 0 40px rgba(245, 158, 11, 0.15); -} - -.pricing-card.featured::before { - content: 'Most Popular'; - position: absolute; - top: -12px; - left: 50%; - transform: translateX(-50%); - background: var(--accent); - color: var(--bg-dark); - padding: 0.3rem 1rem; - border-radius: 100px; - font-size: 0.75rem; - font-weight: 600; -} - -.pricing-name { - font-size: 1.1rem; - font-weight: 600; - color: var(--text-secondary); - margin-bottom: 0.5rem; -} - -.pricing-price { - font-size: 3rem; - font-weight: 700; - margin-bottom: 0.25rem; - display: flex; - align-items: baseline; - gap: 0.25rem; -} - -.pricing-price .currency { - font-size: 1.5rem; - font-weight: 600; -} - -.pricing-price .period { - font-size: 1rem; - font-weight: 400; - color: var(--text-muted); -} - -.pricing-billed { - font-size: 0.85rem; - color: var(--text-muted); - margin-bottom: 0.5rem; - min-height: 1.2rem; -} - -.pricing-savings { - display: inline-block; - background: rgba(34, 197, 94, 0.15); - color: #22c55e; - font-size: 0.8rem; - font-weight: 600; - padding: 0.25rem 0.75rem; - border-radius: 100px; - margin-bottom: 1rem; - min-height: 1.5rem; -} - -.pricing-savings:empty { - visibility: hidden; -} - -.pricing-description { - color: var(--text-muted); - font-size: 0.9rem; - margin-bottom: 2rem; - padding-bottom: 2rem; - border-bottom: 1px solid var(--border); -} - -.pricing-features { - list-style: none; - margin-bottom: 2rem; -} - -.pricing-features li { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.5rem 0; - color: var(--text-secondary); - font-size: 0.95rem; -} - -.pricing-features li::before { - content: '✓'; - color: var(--accent); - font-weight: 700; -} - -.pricing-btn { - display: block; - text-align: center; - padding: 1rem; - border-radius: 10px; - text-decoration: none; - font-weight: 600; - transition: all 0.2s; -} - -.pricing-card .pricing-btn { - background: var(--bg-elevated); - color: var(--text-primary); - border: 1px solid var(--border); -} - -.pricing-card .pricing-btn:hover { - background: var(--text-primary); - color: var(--bg-dark); -} - -.pricing-card.featured .pricing-btn { - background: var(--accent); - color: var(--bg-dark); - border: none; -} - -.pricing-card.featured .pricing-btn:hover { - background: var(--accent-light); -} - -/* Instructors Section */ -.instructors { - padding: 6rem 2rem; - background: var(--bg-card); -} - -.instructors-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 2rem; -} - -.instructor-card { - text-align: center; -} - -.instructor-image { - width: 160px; - height: 160px; - border-radius: 50%; - margin: 0 auto 1.5rem; - border: 4px solid var(--border); - transition: all 0.3s; - overflow: hidden; - background: var(--bg-elevated); -} - -.instructor-image img { - width: 100%; - height: 100%; - object-fit: cover; - filter: grayscale(20%); - transition: filter 0.3s; -} - -.instructor-card:hover .instructor-image { - border-color: var(--accent); - box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); -} - -.instructor-card:hover .instructor-image img { - filter: grayscale(0%); -} - -.instructor-name { - font-size: 1.1rem; - font-weight: 600; - margin-bottom: 0.25rem; -} - -.instructor-role { - color: var(--accent); - font-size: 0.85rem; - font-weight: 500; - margin-bottom: 0.5rem; -} - -.instructor-bio { - color: var(--text-muted); - font-size: 0.85rem; -} - -/* Testimonials */ -.testimonials { - padding: 6rem 2rem; -} - -.testimonials-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 2rem; -} - -.testimonial-card { - background: var(--bg-card); - border: 1px solid var(--border); - border-radius: 16px; - padding: 2rem; -} - -.testimonial-stars { - color: var(--accent); - font-size: 1rem; - margin-bottom: 1rem; -} - -.testimonial-text { - color: var(--text-secondary); - font-size: 1rem; - line-height: 1.7; - margin-bottom: 1.5rem; -} - -.testimonial-author { - display: flex; - align-items: center; - gap: 1rem; -} - -.testimonial-avatar { - width: 64px; - height: 64px; - border-radius: 50%; - overflow: hidden; - flex-shrink: 0; -} - -.testimonial-avatar img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.testimonial-name { - font-weight: 600; - font-size: 0.95rem; -} - -.testimonial-title { - color: var(--text-muted); - font-size: 0.8rem; -} - -/* CTA Section */ -.cta { - padding: 6rem 2rem; - background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-dark) 100%); - text-align: center; - position: relative; - overflow: hidden; -} - -.cta::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 600px; - height: 600px; - background: black; - pointer-events: none; -} - -.cta-content { - position: relative; - z-index: 1; -} - -.cta h2 { - font-size: clamp(2rem, 4vw, 3rem); - font-weight: 700; - margin-bottom: 1rem; -} - -.cta p { - color: var(--text-secondary); - font-size: 1.1rem; - margin-bottom: 2rem; - max-width: 500px; - margin-left: auto; - margin-right: auto; -} - -/* Footer */ -footer { - padding: 4rem 2rem 2rem; - border-top: 1px solid var(--border); - background:forestgreen; -} - -.footer-container { - max-width: 1200px; - margin: 0 auto; -} - -.footer-grid { - display: grid; - grid-template-columns: 2fr 1fr 1fr 1fr; - gap: 3rem; - margin-bottom: 3rem; -} - -.footer-brand p { - color: var(--text-muted); - font-size: 0.9rem; - margin-top: 1rem; - max-width: 280px; -} - -.footer-title { - font-size: 0.85rem; - font-weight: 600; - color: var(--text-secondary); - text-transform: uppercase; - letter-spacing: 0.05em; - margin-bottom: 1.5rem; -} - -.footer-links { - list-style: none; -} - -.footer-links li { - margin-bottom: 0.75rem; -} - -.footer-links a { - color: var(--text-muted); - text-decoration: none; - font-size: 0.9rem; - transition: color 0.2s; -} - -.footer-links a:hover { - color: var(--accent); -} - -.footer-bottom { - padding-top: 2rem; - border-top: 1px solid var(--border); - display: flex; - justify-content: space-between; - align-items: center; - font-size: 0.85rem; - color: var(--text-muted); -} - -.footer-bottom a { - color: var(--accent); - text-decoration: none; - transition: color 0.2s; -} - -.footer-bottom a:hover { - color: var(--accent-light); -} - -/* Mobile Menu */ -.mobile-menu-btn { - display: none; - background: none; - border: none; - color: var(--text-primary); - font-size: 1.5rem; - cursor: pointer; -} - - -/* Responsive */ -@media (max-width: 1024px) { - .hero-container { - grid-template-columns: 1fr; - text-align: center; - } - - .hero-content { - order: 1; - } - - .guitar-wrapper { - order: 0; - max-width: 500px; - margin: 63px 64px; - - } - - .hero-description { - margin: 0 auto 2rem; - } - - .hero-buttons { - justify-content: center; - } - - .hero-stats { - justify-content: center; - } - - .features-grid, - .pricing-grid, - .testimonials-grid { - grid-template-columns: 1fr; - max-width: 500px; - margin: 0 auto; - } - - .billing-toggle { - flex-wrap: wrap; - justify-content: center; - } - - .billing-option { - padding: 0.6rem 1.2rem; - font-size: 0.85rem; - } - - .instructors-grid { - grid-template-columns: repeat(2, 1fr); - } - - .footer-grid { - grid-template-columns: 1fr 1fr; - } -} - -@media (max-width: 880px) { - - .nav-links, - .nav-cta { - display: none; - } - - .logo-img2{ - width: 316px; - height: 266px; - display: inline-block; - - } - - .btn-primary { - background: var(--accent); - color: white; - padding: 1rem 2rem; - border-radius: 10px; - text-decoration: none; - font-weight: 600; - display: inline-flex; - align-items: center; - gap: 0.5rem; - transition: all 0.2s; - width: 262px; - margin: 0px 107px; - } - .btn-secondary{ - background: transparent; - color: var(--text-primary); - padding: 1rem 2rem; - border-radius: 10px; - text-decoration: none; - font-weight: 600; - border: 1px solid var(--border); - transition: all 0.2s; - width: 262px; - margin: 0px 107px; -} - .slider { - position: relative; - height: 387px; - width: 377px; /* adjust as needed */ - overflow: hidden; /* show only one slide at a time */ - margin: auto; - border: 3px solid orange; - border-radius: 8px; - margin: 0px -25px; - } - - .slides{ - height:383px; - } - - /* Centering via container */ - .form-container { - display: flex; - justify-content: center; - align-items: center; - height: 85vh; /* full viewport height */ - margin: -162px 0px; - } - - - .contact-form { - - background-color: forestgreen; - border: 2px solid orange; - padding: 20px; - border-radius: 8px; - width: 397px; - box-shadow: 0 4px 6px rgba(0,0,0,0.1); - } - - .contact-form h2 { - text-align: center; - margin-bottom: 20px; - color: #333; - } - - .contact-form label { - display: block; - margin-bottom: 5px; - font-weight: bold; - color: white; - } - - .contact-form input, - .contact-form textarea { - width: 100%; - padding: 8px; - margin-bottom: 15px; - border: 1px solid #ccc; - border-radius: 4px; - box-sizing: border-box; - height:51px; - font-size: 16px; - } - - .contact-form button { - width: 100%; - padding: 10px; - background-color: orange; - border: none; - border-radius: 4px; - color: white; - font-size: 16px; - cursor: pointer; - } - - .contact-form button:hover { - background-color: darkorange; - } - - - .mobile-menu-btn { - display: block; - } - - /* Mobile Menu */ - .nav-links.active { - display: flex; - flex-direction: column; - position: absolute; - top: 100%; - left: 0; - right: 0; - background: rgba(13, 13, 13, 0.98); - backdrop-filter: blur(20px); - padding: 0.5rem 0 0 0; - gap: 0; - } - - .nav-links.active li { - border-bottom: 1px solid var(--border); - } - - .nav-links.active li:last-child { - border-bottom: none; - } - - .nav-links.active a { - display: block; - padding: 1.35rem 2rem; - font-size: 1.1rem; - } - - .nav-cta.active { - display: block; - position: absolute; - top: 100%; - left: 0; - right: 0; - text-align: center; - background: var(--bg-dark); - padding: 1.5rem 2rem; - border-top: 1px solid var(--border); - } - - .nav-cta.active span { - display: block; - background: var(--accent); - color: var(--bg-dark); - padding: 1rem; - border-radius: 8px; - font-weight: 600; - } - - .hero { - padding: 6rem 1rem 3rem; - } - - .hero h1 { - font-size: 26px; - margin: 2px 33px; - width: 379px; - - } - - .hero-buttons { - flex-direction: column; - } - - .hero-stats { - flex-direction: column; - gap: 1.5rem; - } - - .stat { - text-align: center; - } - - .guitar-card { - padding: 1rem; - } - - .fretboard-grid { - grid-template-rows: repeat(6, 28px); - } - - .string-labels { - height: calc(6 * 28px); - left: -24px; - } - - .string-label { - height: 28px; - font-size: 0.6rem; - } - - .note-marker { - width: 14px; - height: 14px; - font-size: 0.4rem; - } - - .instructors-grid { - grid-template-columns: 1fr; - } - - .footer-grid { - grid-template-columns: 1fr; - text-align: center; - } - - .footer-brand p { - margin: 1rem auto; - } - - .footer-bottom { - flex-direction: column; - gap: 1rem; - text-align: center; - } -} - -@media (max-width: 450px) { - .hero-description { - margin: 1px -16px 2rem; - font-size: 10px; - width: 360px; - } - - .hero h1 { - font-size: 17px; - margin: 0px -29px; - width: 379px; - } - - .btn-primary { - background: var(--accent); - color: white; - padding: 1rem 2rem; - border-radius: 10px; - text-decoration: none; - font-weight: 600; - display: inline-flex; - align-items: center; - gap: 0.5rem; - transition: all 0.2s; - width: 262px; - margin: 0px 21px; - } - - .btn-secondary { - background: transparent; - color: var(--text-primary); - padding: 1rem 2rem; - border-radius: 10px; - text-decoration: none; - font-weight: 600; - border: 1px solid var(--border); - transition: all 0.2s; - width: 262px; - margin: 0px 21px; - } - .guitar-wrapper { - order: 0; - max-width: 500px; - margin: 56px -88px; - } -.slider{ - position: relative; - height: 387px; - width: 328px; - overflow: hidden; - margin: auto; - border: 3px solid orange; - border-radius: 8px; - } margin: 0px -25px; -} \ No newline at end of file diff --git a/users_microservice/src/main/resources/static/js/script.js b/users_microservice/src/main/resources/static/js/script.js new file mode 100644 index 00000000..ff723df5 --- /dev/null +++ b/users_microservice/src/main/resources/static/js/script.js @@ -0,0 +1,40 @@ +// Smooth scrolling with offset +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + e.preventDefault(); + const targetId = this.getAttribute('href').substring(1); + const target = document.getElementById(targetId); + if (target) { + const navHeight = document.querySelector('nav').offsetHeight + 20; + const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight; + window.scrollTo({ + top: targetPosition, + behavior: 'smooth' + }); + } + }); +}); + +// Active nav link on scroll +const sections = document.querySelectorAll('section[id]'); +const navLinks = document.querySelectorAll('.nav-link[href^="#"]'); + +function updateActiveLink() { + let current = ''; + sections.forEach(section => { + const sectionTop = section.offsetTop - 150; + if (pageYOffset >= sectionTop) { + current = section.getAttribute('id'); + } + }); + + navLinks.forEach(link => { + link.classList.remove('active'); + if (link.getAttribute('href') === '#' + current) { + link.classList.add('active'); + } + }); +} + +window.addEventListener('scroll', updateActiveLink); +window.addEventListener('load', updateActiveLink); \ No newline at end of file diff --git a/users_microservice/src/main/resources/static/js/templatemo-606-string-scripts.js b/users_microservice/src/main/resources/static/js/templatemo-606-string-scripts.js deleted file mode 100644 index 50dd9b6f..00000000 --- a/users_microservice/src/main/resources/static/js/templatemo-606-string-scripts.js +++ /dev/null @@ -1,109 +0,0 @@ -// Mobile menu toggle -const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); -const navLinks = document.querySelector('.nav-links'); -const navCta = document.querySelector('.nav-cta'); - -mobileMenuBtn.addEventListener('click', () => { - const isOpen = navLinks.classList.toggle('active'); - navCta.classList.toggle('active', isOpen); - mobileMenuBtn.textContent = isOpen ? '✕' : '☰'; - - // Dynamically position CTA below nav-links - if (isOpen) { - setTimeout(() => { - const navLinksHeight = navLinks.offsetHeight; - navCta.style.top = `calc(100% + ${navLinksHeight}px)`; - }, 10); - } -}); - -// Close mobile menu when clicking a link -navLinks.querySelectorAll('a').forEach(link => { - link.addEventListener('click', () => { - navLinks.classList.remove('active'); - navCta.classList.remove('active'); - mobileMenuBtn.textContent = '☰'; - }); -}); - -// Pricing toggle -const PRICING = { - monthly: { - price: 30, - period: '/mo', - billed: '', - savings: '' - }, - quarterly: { - price: 25.50, - period: '/mo', - billed: 'Billed $76.50 every 3 months', - savings: 'Save 15%' - }, - yearly: { - price: 21, - period: '/mo', - billed: 'Billed $252 per year', - savings: 'Save 30%' - } -}; - -function updatePricing(billing) { - const plan = PRICING[billing]; - - // Update active button - document.querySelectorAll('.billing-option').forEach(btn => { - btn.classList.toggle('active', btn.dataset.billing === billing); - }); - - // Update price display - const priceEl = document.getElementById('proPrice'); - const billedEl = document.getElementById('proBilled'); - const savingsEl = document.getElementById('proSavings'); - - // Animate price change - priceEl.style.opacity = '0'; - priceEl.style.transform = 'translateY(-10px)'; - - setTimeout(() => { - priceEl.textContent = plan.price % 1 === 0 ? plan.price : plan.price.toFixed(2); - billedEl.textContent = plan.billed; - savingsEl.textContent = plan.savings; - - priceEl.style.opacity = '1'; - priceEl.style.transform = 'translateY(0)'; - }, 150); -} - -document.querySelectorAll('.billing-option').forEach(btn => { - btn.addEventListener('click', () => updatePricing(btn.dataset.billing)); -}); - -// Add transition to price element -document.getElementById('proPrice').style.transition = 'all 0.15s ease'; - - -document.addEventListener('DOMContentLoaded', () => { - const slides = document.querySelector('.slides'); - const images = document.querySelectorAll('.slides img'); - const prevBtn = document.querySelector('.prev'); - const nextBtn = document.querySelector('.next'); - - let index = 0; - const total = images.length; - - function showSlide(i) { - index = (i + total) % total; // wrap around - slides.style.transform = `translateX(-${index * 100}%)`; - } - - // Buttons - prevBtn.addEventListener('click', () => showSlide(index - 1)); - nextBtn.addEventListener('click', () => showSlide(index + 1)); - - // Auto-slide every 6 seconds - setInterval(() => showSlide(index + 1), 6000); - - // Initialize - showSlide(0); -}); 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 d80238a1..30495e77 100644 --- a/users_microservice/src/main/resources/templates/home/forgot-password.html +++ b/users_microservice/src/main/resources/templates/home/forgot-password.html @@ -1,41 +1,160 @@ - + - - Forgot Password - + + Alcohol Agent - Forgot Password + + + + + + + + -
-
-
- -

Glow

+ + + -

Forgot Password

-

Enter your email address and we’ll send you reset instructions.

+ +
+
+

Reset Your Password

+

Enter your email to receive a password reset link.

+
+
-
-
- - -
+ +
+
+

Forgot Password

+ +
+ +
- -
- + +
+ Back to Login
+ +
+
-
or
+ +
+

© 2026 Alcohol Agent. All rights reserved.

+
- - Back to Login - - -
-
- + + \ No newline at end of file diff --git a/users_microservice/src/main/resources/templates/home/index.html b/users_microservice/src/main/resources/templates/home/index.html index 8a1913f3..6699a7df 100644 --- a/users_microservice/src/main/resources/templates/home/index.html +++ b/users_microservice/src/main/resources/templates/home/index.html @@ -1,457 +1,212 @@ - + - - - StringMaster | Learn Guitar Online + + + Alcohol Agent + + + - - + - - + + +
+
+
+
+

Alcohol Agent

+

+ Your smart companion for responsible choices, tracking, and awareness.

-
- - GET STARTED → - - - See How It Works - -
-
-
-
50K+
-
Active Students
-
-
-
200+
-
Video Lessons
-
-
-
4.9
-
App Rating
-
+
+ Get Started + Learn More
- -
-
-
- Picture 1 - Picture 2 - Picture 3 - Picture 4 -
- - - - -
+
+ Alcohol Agent mobile app showing BAC tracking and awareness features
-
- - -
-
-
-
Features
-

Everything you need to learn guitar

-

- Our platform combines visual learning with hands-on practice - to accelerate your guitar journey. -

-
-
-
-
- - - - - -
-

Interactive Fretboard

-

Visual chord diagrams that show exactly where to place your fingers. Practice anywhere, anytime.

+
+
+ + +
+
+

Retail Companies Features

+
+
+
+ Retail POS dashboard overview +

Consumption Tracking

+

Log drinks, see patterns, set limits — simple & private.

-
-
- - - - - -
-

HD Video Lessons

-

200+ professionally filmed lessons from beginner basics to advanced techniques.

-
-
-
- - - - - -
-

Progress Tracking

-

Set goals, track your practice time, and watch your skills improve over time.

-
-
-
- - - - - - -
-

Song Library

-

Learn your favorite songs with tabs, chords, and play-along backing tracks.

-
-
-
- - - - - - - -
-

AI Feedback

-

Get real-time feedback on your playing through our audio recognition technology.

+
+
+
+ Inventory and sales management dashboard +

Real-time Awareness

+

BAC estimation, hydration reminders, risk alerts.

-
-
- - - - - - -
-

Community

-

Connect with fellow learners, share progress, and get tips from experienced players.

+
+
+
+ Liquor store sales analytics dashboard +

Goal & Progress

+

Set personal goals, view streaks, celebrate milestones.

-
- - -
-
-
-
Pricing
-

Simple, transparent pricing

-

- Start with a free trial. No credit card required. -

-
-
- - - -
-
-
-
Starter
-
- Free -
-
-
-

Perfect for trying out the basics

-
    -
  • 10 beginner lessons
    • -
  • Interactive fretboard
    • -
  • 5 songs with tabs
    • -
  • Community access
    • -
- Get Started +
+
+ + +
+
+

Alcohol Agent Users Features

+
+
+
+ Drink logging and habit tracking calendar +

Consumption Tracking

+

Log drinks, see patterns, set limits — simple & private.

- +
+
+ Real-time hydration and level tracker UI +

Real-time Awareness

+

BAC estimation, hydration reminders, risk alerts.

-
-
Lifetime
-
- $440 -
-
One-time payment
-
Best value
-

Forever access, no recurring fees

-
    -
  • Everything in Pro
    • -
  • 1-on-1 coaching session
    • -
  • Exclusive masterclasses
    • -
  • Priority support
    • -
  • All future updates
    • -
- Get Lifetime Access +
+
+
+ Goal and progress streaks tracker +

Goal & Progress

+

Set personal goals, view streaks, celebrate milestones.

-
- - -
-
-
-
Instructors
-

Learn from the best

-

- Our instructors have decades of combined experience and a passion for teaching. -

-
-
-
-
- Marcus Chen -
-
Marcus Chen
-
Acoustic Specialist
-

15 years teaching, Berklee graduate

-
-
-
- Sarah Williams -
-
Sarah Williams
-
Fingerstyle Expert
-

YouTube educator, 2M subscribers

+
+
+ + +
+
+

Pricing Plans

+
+
+
+

Free

+
R0
+

Basic tracking & awareness tools

+ Start Free
-
-
- James Rodriguez -
-
James Rodriguez
-
Blues & Rock
-

Session guitarist, 20+ albums

-
-
-
- Emily Park -
-
Emily Park
-
Music Theory
-

PhD in Music, award-winning educator

+
+
+
+

Premium

+
R49/mo
+

Advanced insights • Reports • No ads

+ Try 14 days free
-
- - -
-
-
-
Testimonials
-

What our students say

-
-
-
-
★★★★★
-

"I've tried several apps, but StringMaster's interactive fretboard finally made chord transitions click for me. Went from zero to playing songs in 3 months!"

-
-
- Alex Thompson -
-
-
Alex Thompson
-
Beginner, 4 months
-
-
-
-
-
★★★★★
-

"The AI feedback feature is incredible. It's like having a personal instructor available 24/7. My fingerpicking has improved dramatically."

-
-
- Maria Garcia -
-
-
Maria Garcia
-
Intermediate, 1 year
-
-
-
-
-
★★★★★
-

"Worth every penny. The song library keeps me motivated, and the progress tracking shows exactly how far I've come. Highly recommend!"

-
-
- David Kim +
+
+ + +
+
+

Get in Touch

+

+ Have questions or feedback? We'd love to hear from you. +

+ +
+
+
+
+
+ +
-
-
David Kim
-
Pro subscriber, 8 months
+
+ +
-
-
-
-
- - -
-
-

Ready to start your guitar journey?

-

Join 50,000+ students learning guitar the modern way. Start your free trial today.

- GET STARTED → -
-
- -
-
-
-

Contact Us

-
Have inquires ? Please fill in your inquiries below:
+
+ +
-
- - - - - - - - - - - - - - - - - +
+ +
- -
- - - - - - - - + + + + + + + + \ No newline at end of file diff --git a/users_microservice/src/main/resources/templates/home/login.html b/users_microservice/src/main/resources/templates/home/login.html index 69fdc673..f7b582c7 100644 --- a/users_microservice/src/main/resources/templates/home/login.html +++ b/users_microservice/src/main/resources/templates/home/login.html @@ -1,53 +1,166 @@ - + - - Login - + + Alcohol Agent - Login + + + + + + + + -
-
-
- -

Glow

+ + + -

Log in

-

Welcome back. Please enter your details.

+ +
+
+

Welcome Back

+

Login to continue your journey with Alcohol Agent.

+
+
-
-
- - -
+ +
+
+

Login Form

+ +
+ +
- -
- - -
+
+ +
- -
- + +
+ Forgot Password?
+ +
+
- -
- Forgot password? -
- - -
or
+ +
+

© 2026 Alcohol Agent. All rights reserved.

+
- - -
-
- + + \ No newline at end of file diff --git a/users_microservice/src/main/resources/templates/home/registration.html b/users_microservice/src/main/resources/templates/home/registration.html new file mode 100644 index 00000000..c61f37fd --- /dev/null +++ b/users_microservice/src/main/resources/templates/home/registration.html @@ -0,0 +1,130 @@ + + + + + + Alcohol Agent - Registration + + + + + + + + + +
+
+

Create Your Account

+

Join Alcohol Agent today and start exploring responsibly.

+
+
+ + +
+
+

Registration Form

+
+
+
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/users_microservice/src/main/resources/templates/home/reset.html b/users_microservice/src/main/resources/templates/home/reset.html index 1651ba63..87786f64 100644 --- a/users_microservice/src/main/resources/templates/home/reset.html +++ b/users_microservice/src/main/resources/templates/home/reset.html @@ -1,47 +1,164 @@ - + - - Reset Password - + + Alcohol Agent - Reset Password + + + + + + + + -
-
-
- -

Glow

+ + + -

Reset Password

-

Enter your new password below to complete the reset.

+ +
+
+

Reset Your Password

+

Enter a new password to secure your account.

+
+
-
-
- - -
+ +
+
+

Reset Password

+ +
+ +
- -
- - -
+
+ +
- -
- + +
+ Back to Login
+ +
+
-
or
+ +
+

© 2026 Alcohol Agent. All rights reserved.

+
- - Back to Login - - -
-
- + + \ No newline at end of file diff --git a/users_microservice/src/main/resources/templates/home/sign-up.html b/users_microservice/src/main/resources/templates/home/sign-up.html deleted file mode 100644 index 6e65d0db..00000000 --- a/users_microservice/src/main/resources/templates/home/sign-up.html +++ /dev/null @@ -1,620 +0,0 @@ - - - - - - @Leonard1thecode | Full-Stack Cyber Wizard - - - - - - - - - - - - - - -
-
- - - - - -
-
-

FULL-STACK CYBER WIZARD

-

React • Node • Next.js • Three.js • AWS • MongoDB

-
- SEE MY WORK - LET'S BUILD -
-
-
- - -
-
-

WHO RUNS THE MATRIX?

-
-
-
-
-

- I'm Sizolwakhe Leonard Mthimunye — a relentless full-stack developer who turns caffeine, code, and chaos into high-performance digital experiences. -

-

From pixel-perfect frontends to bulletproof backends and 3D immersive worlds — I build it all.

-
-
-
-
-
-
- - -
-
-

WEAPONS OF CHOICE

-
-

Frontend

React • Next.js • Tailwind • GSAP • Three.js

-

Backend

Node.js • Express • NestJS • Python • Go

-

Database

MongoDB • PostgreSQL • Redis • Firebase

-

DevOps

AWS • Docker • Kubernetes • CI/CD • Vercel

-
-
-
- - -
-
-

PROJECTS THAT BROKE THE INTERNET

-
-
-
-
- Project -
-
-

NEON MARKETPLACE

-

Next.js 14 • Stripe • Three.js • AWS

-
-
-
-
-
-
-
-
- Project -
-
-

CYBER DASHBOARD

-

React • D3.js • Node • Socket.io

-
-
-
-
-
-
-
-
- Project -
-
-

3D NEON PORTFOLIO

-

Three.js • GSAP • Blender • Vercel

-
-
-
-
-
-
-
-
- - -
-
-
-
-
-
-

TRANSMIT YOUR SIGNAL

-

- Ready to break the matrix together? Drop your message — I'll respond in neon speed. -

- -
-
- - -
Enter your name, coder!
-
- -
- - -
Valid email required — no ghost accounts!
-
- -
- - -
Don't leave me hanging — what's the plan?
-
- - -
- - -
-
-
-
-
-
- - - - - -
- - - - - - - - \ No newline at end of file