From 3a4883c5aeb24a4360510dc831f2a333f13250eb Mon Sep 17 00:00:00 2001 From: JT Date: Thu, 19 Mar 2026 09:45:27 -0500 Subject: [PATCH 1/8] Green checkmark animation for logging un Needs a red x for when the user fails logging in --- src/main/resources/static/css/login.css | 56 ++++++++++++++++++++ src/main/resources/templates/auth/login.html | 38 ++++++++++++- 2 files changed, 93 insertions(+), 1 deletion(-) diff --git a/src/main/resources/static/css/login.css b/src/main/resources/static/css/login.css index c1bb931..d3fc47c 100644 --- a/src/main/resources/static/css/login.css +++ b/src/main/resources/static/css/login.css @@ -329,4 +329,60 @@ footer { .template-option .card { width: 100%; } +} + +/* Darkens the background and centers the box */ +#login-overlay { + position: fixed; + top: 0; left: 0; width: 100%; height: 100%; + background: rgba(0, 0, 0, 0.6); /* Semi-transparent black */ + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; /* Ensures it stays on top of everything else */ +} + +/* A helper class to hide elements */ +.hidden { + display: none !important; +} + +/* The white box behind the animation */ +.overlay-content { + background: white; + padding: 50px; + border-radius: 12px; + box-shadow: 0 4px 20px rgba(0,0,0,0.3); + text-align: center; +} + +/* The green spinning wheel */ +.spinner { + width: 60px; + height: 60px; + border: 6px solid #f3f3f3; /* Light grey track */ + border-top: 6px solid #28a745; /* Green spinning part */ + border-radius: 50%; + animation: spin 1s linear infinite; + margin: 0 auto; +} + +/* The spin animation */ +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* The checkmark */ +.checkmark { + font-size: 60px; + color: #28a745; /* Green */ + font-weight: bold; + animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; +} + +/* The bouncy pop-in animation for the checkmark */ +@keyframes popIn { + 0% { transform: scale(0); opacity: 0; } + 100% { transform: scale(1); opacity: 1; } } \ No newline at end of file diff --git a/src/main/resources/templates/auth/login.html b/src/main/resources/templates/auth/login.html index 6069002..b239a3f 100644 --- a/src/main/resources/templates/auth/login.html +++ b/src/main/resources/templates/auth/login.html @@ -58,5 +58,41 @@

Welcome Back

+ + - \ No newline at end of file + + From 6a4410394ec4c88bff1208f8941a14055332a0bb Mon Sep 17 00:00:00 2001 From: JT Date: Thu, 19 Mar 2026 09:57:15 -0500 Subject: [PATCH 2/8] Login redirect to dashboard, added copy link to dashboard --- .../HyprLink/security/SecurityConfig.java | 2 +- src/main/resources/static/css/dashboard.css | 61 +++++++++++++++++++ src/main/resources/templates/dashboard.html | 50 ++++++++++++++- 3 files changed, 109 insertions(+), 4 deletions(-) diff --git a/src/main/java/com/basecamp/HyprLink/security/SecurityConfig.java b/src/main/java/com/basecamp/HyprLink/security/SecurityConfig.java index 2df1fd5..03c008f 100644 --- a/src/main/java/com/basecamp/HyprLink/security/SecurityConfig.java +++ b/src/main/java/com/basecamp/HyprLink/security/SecurityConfig.java @@ -25,7 +25,7 @@ public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Excepti ) .formLogin(form -> form .loginPage("/login") // Custom login page - .defaultSuccessUrl("/profile", true) // Where to go after successful login + .defaultSuccessUrl("/dashboard", true) // Where to go after successful login .permitAll() ) .logout(logout -> logout diff --git a/src/main/resources/static/css/dashboard.css b/src/main/resources/static/css/dashboard.css index 5c69d43..b9155bc 100644 --- a/src/main/resources/static/css/dashboard.css +++ b/src/main/resources/static/css/dashboard.css @@ -492,4 +492,65 @@ form { .live-preview { display: none; } +} + +/* Container for the share box */ +.share-box-container { + background-color: #f8f9fa; + border: 1px solid #e9ecef; + border-radius: 10px; + padding: 20px; + margin-bottom: 30px; + text-align: center; + box-shadow: 0 2px 5px rgba(0,0,0,0.05); +} + +.share-box-container h3 { + margin-top: 0; + margin-bottom: 5px; + font-size: 1.2rem; + color: #333; +} + +.share-box-container p { + color: #6c757d; + font-size: 0.9rem; + margin-bottom: 15px; +} + +/* Layout for the input and button to sit side-by-side */ +.share-input-group { + display: flex; + max-width: 500px; + margin: 0 auto; + border: 2px solid #ddd; + border-radius: 6px; + overflow: hidden; /* Keeps the child elements neatly inside the rounded corners */ +} + +/* The read-only URL box */ +.share-input-group input { + flex-grow: 1; + padding: 10px 15px; + border: none; + background-color: #fff; + color: #495057; + font-family: monospace; /* Gives it a technical "link" feel */ + font-size: 1rem; + outline: none; +} + +/* The copy button */ +.share-input-group button { + background-color: #007bff; + color: white; + border: none; + padding: 10px 20px; + font-weight: bold; + cursor: pointer; + transition: background-color 0.2s ease; +} + +.share-input-group button:hover { + background-color: #0056b3; } \ No newline at end of file diff --git a/src/main/resources/templates/dashboard.html b/src/main/resources/templates/dashboard.html index a90f4dd..79257e9 100644 --- a/src/main/resources/templates/dashboard.html +++ b/src/main/resources/templates/dashboard.html @@ -10,9 +10,6 @@
HyperLink
- - -
Templates
@@ -28,6 +25,15 @@ +

Your Dashboard

Profile updated successfully! @@ -372,5 +378,43 @@

Your Name

updatePreviewDesignStyles(); }); + \ No newline at end of file From 734e0e79b0c660564baf3197e8ed617b3f53fbb2 Mon Sep 17 00:00:00 2001 From: JT Date: Thu, 19 Mar 2026 10:27:37 -0500 Subject: [PATCH 3/8] Added animations to landing page --- src/main/resources/static/css/landing.css | 74 ++++++++++++++++++++--- src/main/resources/templates/index.html | 2 +- 2 files changed, 68 insertions(+), 8 deletions(-) diff --git a/src/main/resources/static/css/landing.css b/src/main/resources/static/css/landing.css index f46a2ab..576c768 100644 --- a/src/main/resources/static/css/landing.css +++ b/src/main/resources/static/css/landing.css @@ -215,11 +215,21 @@ body { .hero h2 { margin: 0; font-size: 4.5rem; - background: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 50%, #06b6d4 100%); + font-weight: 700; + background: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 33%, #06b6d4 66%, #3b82f6 100%); + background-size: 300% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; - font-weight: 700; + + /* We comma-separate the animations to run both at once! */ + animation: text-gradient-flow 6s linear infinite, glow-pulse 3s ease-in-out infinite alternate; +} + +/* The pulsing glow keyframes */ +@keyframes glow-pulse { + 0% { filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.2)); } + 100% { filter: drop-shadow(0 0 25px rgba(14, 165, 233, 0.7)); } } .hero p { @@ -254,12 +264,16 @@ body { } @keyframes node-float { - 0%, - 100% { - transform: translateY(0px); + 0%, 100% { + transform: translate(0px, 0px); } - 50% { - transform: translateY(-6px); + 33% { + /* Drifts up and to the right */ + transform: translate(15px, -20px); + } + 66% { + /* Drifts down and to the left */ + transform: translate(-10px, 15px); } } @@ -866,4 +880,50 @@ footer { .template-option .card { width: 100%; } +} + +/* Cascade pop-in for the example profile links */ +.profile-links .profile-link { + opacity: 0; /* Start invisible */ + transform: scale(0.8); + animation: popInBounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; +} + +/* Stagger the delays so they appear sequentially */ +.profile-links .profile-link:nth-child(1) { animation-delay: 0.6s; } +.profile-links .profile-link:nth-child(2) { animation-delay: 0.75s; } +.profile-links .profile-link:nth-child(3) { animation-delay: 0.9s; } +.profile-links .profile-link:nth-child(4) { animation-delay: 1.05s; } +.profile-links .profile-link:nth-child(5) { animation-delay: 1.2s; } + +/* The bouncy pop-in keyframe */ +@keyframes popInBounce { + 0% { opacity: 0; transform: scale(0.8) translateY(10px); } + 100% { opacity: 1; transform: scale(1) translateY(0); } +} + +.profile-skeleton { + /* Create a distinct light-blue stripe in the middle of the gradient */ + background: linear-gradient(90deg, #f0f9ff 25%, #bae6fd 50%, #f0f9ff 75%); + background-size: 200% 100%; /* Make the background wider than the element */ + border-radius: 6px; + width: 100%; + /* Animate the background position indefinitely */ + animation: skeleton-shimmer 2s linear infinite; +} + +@keyframes skeleton-shimmer { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} + +/* Add a smooth transition to the logo icon */ +.nav-left svg { + transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +/* When the user hovers over the logo link, tilt and grow the icon! */ +.nav-left a:hover svg { + transform: rotate(-10deg) scale(1.1); + color: #3b82f6 !important; /* Forces the icon to turn bright blue */ } \ No newline at end of file diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index 6c4b1c9..66db23b 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -62,7 +62,7 @@

Your Personal

-

Hyperlink Page

+

HyperLink

Bring all your links, content, and profiles together into one simple page you can share anywhere.

From 0ac7c26b710e748c834a6a5ae45b67b23f508815 Mon Sep 17 00:00:00 2001 From: JT Date: Thu, 19 Mar 2026 11:34:50 -0500 Subject: [PATCH 4/8] Nav styles on landing page need to make this global somehow to share across all pages --- src/main/resources/static/css/landing.css | 100 +++++++++++++++++++++- src/main/resources/templates/index.html | 11 +-- 2 files changed, 100 insertions(+), 11 deletions(-) diff --git a/src/main/resources/static/css/landing.css b/src/main/resources/static/css/landing.css index 576c768..58cccbb 100644 --- a/src/main/resources/static/css/landing.css +++ b/src/main/resources/static/css/landing.css @@ -10,17 +10,34 @@ body { /* NAVBAR STYLING */ +/* Update your existing .nav class */ .nav { align-items: center; display: grid; grid-template-columns: 1fr auto 1fr; padding: 1rem 1rem; - border-bottom: 1px solid #e0e0e0; - background: linear-gradient(90deg, #fafbfc 0%, #f5f7fa 50%, #fafbfc 100%); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); width: 100%; left: 0; margin: 0; + + /* 1. Make it sticky at the top */ + position: fixed; + top: 0; + z-index: 1000; + + /* 2. The Frosted Glass Effect */ + background: rgba(250, 251, 252, 0.75); /* Semi-transparent white */ + backdrop-filter: blur(12px); /* Blurs whatever is behind the nav */ + -webkit-backdrop-filter: blur(12px); /* Safari support */ + + /* 3. A subtle border to define the edge */ + border-bottom: 1px solid rgba(224, 224, 224, 0.5); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05); +} + +/* Add this right below the .nav block to prevent your hero text from hiding under the fixed nav! */ +body { + padding-top: 80px; } .nav a { @@ -114,6 +131,28 @@ body { cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2); + + /* NEW: Setup for the shimmer */ + position: relative; + overflow: hidden; +} + +/* Create the diagonal white beam */ +#sign-up-btn::after { + content: ''; + position: absolute; + top: 0; + left: -100%; /* Start completely off the left edge */ + width: 50%; + height: 100%; + background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%); + transform: skewX(-25deg); + animation: shimmer-beam 5s infinite; /* Runs endlessly */ +} + +@keyframes shimmer-beam { + 0%, 70% { left: -100%; } /* Wait off-screen for a few seconds */ + 100% { left: 200%; } /* Zoom across the button! */ } #sign-up-btn:hover { @@ -926,4 +965,59 @@ footer { .nav-left a:hover svg { transform: rotate(-10deg) scale(1.1); color: #3b82f6 !important; /* Forces the icon to turn bright blue */ +} + +/* Setup the relative positioning for normal links (excluding the logo and sign-up button) */ +.nav-center a, .nav-right a:not(#sign-up-btn) { + position: relative; + text-decoration: none; +} + +/* Create the invisible underline */ +.nav-center a::after, .nav-right a:not(#sign-up-btn)::after { + content: ''; + position: absolute; + width: 0; /* Starts at 0 width */ + height: 2px; + bottom: -4px; + left: 0; + background: linear-gradient(90deg, #3b82f6, #0ea5e9); + transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); /* Smooth swoop */ +} + +/* Expand the line when hovered! */ +.nav-center a:hover::after, .nav-right a:not(#sign-up-btn)::hover::after { + width: 100%; +} + +/* ========================================= + SIGNED-IN NAV STYLING + ========================================= */ + +/* Ensure the form wrapper doesn't mess up our flexbox alignment */ +.logout-form { + margin: 0; + padding: 0; + display: flex; +} + +/* Sleek Ghost Button for Logout */ +#logout-btn { + background: transparent; + color: #ef4444; /* Soft, modern red */ + border: 1px solid #ef4444; + padding: 0.4rem 1rem; + border-radius: 0.5rem; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; +} + +/* Fills in red and floats up on hover */ +#logout-btn:hover { + background: #ef4444; + color: white; + box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); + transform: translateY(-2px); } \ No newline at end of file diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index 66db23b..3bdebe9 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -20,12 +20,7 @@
Templates -
- - -
+ Profile Dashboard
@@ -34,8 +29,8 @@ Sign Up
-
- + +
From 6d854938cdc33c3c0b8dd0a93d33ee0ccde2590c Mon Sep 17 00:00:00 2001 From: JT Date: Thu, 19 Mar 2026 11:57:48 -0500 Subject: [PATCH 5/8] Added nav bar styles to other pages. --- src/main/resources/static/css/dashboard.css | 159 +++++++++++++++++- src/main/resources/static/css/login.css | 102 +++++++++-- src/main/resources/static/css/register.css | 102 +++++++++-- src/main/resources/static/css/templates.css | 79 ++++++++- src/main/resources/templates/auth/login.html | 13 +- .../resources/templates/auth/register.html | 13 +- src/main/resources/templates/dashboard.html | 19 ++- src/main/resources/templates/profile.html | 25 --- src/main/resources/templates/templates.html | 13 +- 9 files changed, 438 insertions(+), 87 deletions(-) diff --git a/src/main/resources/static/css/dashboard.css b/src/main/resources/static/css/dashboard.css index b9155bc..0a4161c 100644 --- a/src/main/resources/static/css/dashboard.css +++ b/src/main/resources/static/css/dashboard.css @@ -5,7 +5,7 @@ body { font-family: "Segoe UI", Arial, sans-serif; margin: 0; - padding: 32px 360px 32px 32px; + padding: 110px 360px 32px 32px; color: #1f2b4d; background: #f7faff; max-width: 1200px; @@ -19,10 +19,23 @@ body { display: grid; grid-template-columns: 1fr auto 1fr; padding: 1rem 1rem; - border-bottom: 1px solid #e0e0e0; - background: linear-gradient(90deg, #fafbfc 0%, #f5f7fa 50%, #fafbfc 100%); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); - align-self: stretch; + width: 100%; + left: 0; + margin: 0; + + /* 1. Make it sticky at the top */ + position: fixed; + top: 0; + z-index: 1000; + + /* 2. The Frosted Glass Effect */ + background: rgba(250, 251, 252, 0.75); /* Semi-transparent white */ + backdrop-filter: blur(12px); /* Blurs whatever is behind the nav */ + -webkit-backdrop-filter: blur(12px); /* Safari support */ + + /* 3. A subtle border to define the edge */ + border-bottom: 1px solid rgba(224, 224, 224, 0.5); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05); } .nav a { @@ -38,7 +51,7 @@ body { .nav #link-garden { font-weight: bold; - font-size: 1.1rem; + font-size: 1.2rem; color: #1a1a2e; } @@ -47,7 +60,6 @@ body { align-items: center; } - .nav-left a { display: inline-flex; align-items: center; @@ -58,15 +70,44 @@ body { width: 30px; height: 30px; display: block; + transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +.nav-left a:hover svg { + transform: rotate(-10deg) scale(1.1); + color: #3b82f6 !important; } .nav-center { justify-content: center; justify-self: center; + gap: 1rem; + align-items: center; } -.nav-center a { - font-size: 1rem; +.nav-center a, .nav-center button { + font-size: 1.2rem; + position: relative; + text-decoration: none; +} + +.nav-center a::after { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: -4px; + left: 0; + background: linear-gradient(90deg, #3b82f6, #0ea5e9); + transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); +} + +.nav-center a:hover::after { + width: 100%; +} + +.nav button:hover { + color: #3b82f6; } .nav-left { @@ -84,6 +125,60 @@ body { display: inline-flex; align-items: center; line-height: 1; + font-size: 1.2rem; + position: relative; + text-decoration: none; +} + +.nav-right a:not(#sign-up-btn)::after { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: -4px; + left: 0; + background: linear-gradient(90deg, #3b82f6, #0ea5e9); + transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); +} + +.nav-right a:not(#sign-up-btn):hover::after { + width: 100%; +} + +.nav-center button, .nav-right button { + border: none; + background: none; + padding: 0 0 3px 0; +} + +.nav-center button:hover, .nav-right button:hover { + color: #3b82f6; + cursor: pointer; +} + +.logout-form { + margin: 0; + padding: 0; + display: flex; +} + +#logout-btn { + background: transparent; + color: #ef4444; + border: 1px solid #ef4444; + padding: 0.4rem 1rem; + border-radius: 0.5rem; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; +} + +#logout-btn:hover { + background: #ef4444; + color: white; + box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); + transform: translateY(-2px); } .nav-right button { @@ -105,6 +200,25 @@ body { cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2); + position: relative; + overflow: hidden; +} + +#sign-up-btn::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 50%; + height: 100%; + background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%); + transform: skewX(-25deg); + animation: shimmer-beam 5s infinite; +} + +@keyframes shimmer-beam { + 0%, 70% { left: -100%; } + 100% { left: 200%; } } #sign-up-btn:hover { @@ -113,6 +227,33 @@ body { } +/* Logout form styling */ +.logout-form { + margin: 0; + padding: 0; + display: flex; +} + +#logout-btn { + background: transparent; + color: #ef4444; + border: 1px solid #ef4444; + padding: 0.4rem 1rem; + border-radius: 0.5rem; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; +} + +#logout-btn:hover { + background: #ef4444; + color: white; + box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); + transform: translateY(-2px); +} + + h2 { margin: 0 0 12px; font-size: 2rem; diff --git a/src/main/resources/static/css/login.css b/src/main/resources/static/css/login.css index d3fc47c..6fbf088 100644 --- a/src/main/resources/static/css/login.css +++ b/src/main/resources/static/css/login.css @@ -2,7 +2,7 @@ body { font-family: Arial, sans-serif; margin: 0; - padding: 0; + padding-top: 80px; display: flex; flex-direction: column; min-height: 100vh; @@ -15,9 +15,23 @@ body { display: grid; grid-template-columns: 1fr auto 1fr; padding: 1rem 1rem; - border-bottom: 1px solid #e0e0e0; - background: linear-gradient(90deg, #fafbfc 0%, #f5f7fa 50%, #fafbfc 100%); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); + width: 100%; + left: 0; + margin: 0; + + /* 1. Make it sticky at the top */ + position: fixed; + top: 0; + z-index: 1000; + + /* 2. The Frosted Glass Effect */ + background: rgba(250, 251, 252, 0.75); /* Semi-transparent white */ + backdrop-filter: blur(12px); /* Blurs whatever is behind the nav */ + -webkit-backdrop-filter: blur(12px); /* Safari support */ + + /* 3. A subtle border to define the edge */ + border-bottom: 1px solid rgba(224, 224, 224, 0.5); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05); } .nav a { @@ -42,7 +56,6 @@ body { align-items: center; } - .nav-left a { display: inline-flex; align-items: center; @@ -53,15 +66,44 @@ body { width: 30px; height: 30px; display: block; + transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +.nav-left a:hover svg { + transform: rotate(-10deg) scale(1.1); + color: #3b82f6 !important; } .nav-center { justify-content: center; justify-self: center; + gap: 1rem; + align-items: center; } -.nav-center a { +.nav-center a, .nav-center button { font-size: 1.2rem; + position: relative; + text-decoration: none; +} + +.nav-center a::after { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: -4px; + left: 0; + background: linear-gradient(90deg, #3b82f6, #0ea5e9); + transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); +} + +.nav-center a:hover::after { + width: 100%; +} + +.nav button:hover { + color: #3b82f6; } .nav-left { @@ -80,18 +122,32 @@ body { align-items: center; line-height: 1; font-size: 1.2rem; + position: relative; + text-decoration: none; } -.nav-right #logout-link:hover { - text-decoration: underline; +.nav-right a:not(#sign-up-btn)::after { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: -4px; + left: 0; + background: linear-gradient(90deg, #3b82f6, #0ea5e9); + transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } -.nav-right button { +.nav-right a:not(#sign-up-btn):hover::after { + width: 100%; +} + +.nav-center button, .nav-right button { border: none; background: none; padding: 0 0 3px 0; } -.nav-right button:hover { + +.nav-center button:hover, .nav-right button:hover { color: #3b82f6; cursor: pointer; } @@ -105,6 +161,25 @@ body { cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2); + position: relative; + overflow: hidden; +} + +#sign-up-btn::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 50%; + height: 100%; + background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%); + transform: skewX(-25deg); + animation: shimmer-beam 5s infinite; +} + +@keyframes shimmer-beam { + 0%, 70% { left: -100%; } + 100% { left: 200%; } } #sign-up-btn:hover { @@ -114,6 +189,12 @@ body { /*Login CSS*/ +.auth-page { + display: flex; + flex-direction: column; + flex: 1; +} + .login-section { display: flex; padding: 2rem 1rem 8rem 1rem; @@ -121,6 +202,7 @@ body { align-items: center; text-align: center; margin-top: 4rem; + flex: 1; } diff --git a/src/main/resources/static/css/register.css b/src/main/resources/static/css/register.css index f1a2dcd..b0ec498 100644 --- a/src/main/resources/static/css/register.css +++ b/src/main/resources/static/css/register.css @@ -2,7 +2,7 @@ body { font-family: Arial, sans-serif; margin: 0; - padding: 0; + padding-top: 80px; display: flex; flex-direction: column; min-height: 100vh; @@ -27,9 +27,23 @@ footer { display: grid; grid-template-columns: 1fr auto 1fr; padding: 1rem 1rem; - border-bottom: 1px solid #e0e0e0; - background: linear-gradient(90deg, #fafbfc 0%, #f5f7fa 50%, #fafbfc 100%); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); + width: 100%; + left: 0; + margin: 0; + + /* 1. Make it sticky at the top */ + position: fixed; + top: 0; + z-index: 1000; + + /* 2. The Frosted Glass Effect */ + background: rgba(250, 251, 252, 0.75); /* Semi-transparent white */ + backdrop-filter: blur(12px); /* Blurs whatever is behind the nav */ + -webkit-backdrop-filter: blur(12px); /* Safari support */ + + /* 3. A subtle border to define the edge */ + border-bottom: 1px solid rgba(224, 224, 224, 0.5); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05); } .nav a { @@ -54,7 +68,6 @@ footer { align-items: center; } - .nav-left a { display: inline-flex; align-items: center; @@ -65,15 +78,44 @@ footer { width: 30px; height: 30px; display: block; + transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +.nav-left a:hover svg { + transform: rotate(-10deg) scale(1.1); + color: #3b82f6 !important; } .nav-center { justify-content: center; justify-self: center; + gap: 1rem; + align-items: center; } -.nav-center a { +.nav-center a, .nav-center button { font-size: 1.2rem; + position: relative; + text-decoration: none; +} + +.nav-center a::after { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: -4px; + left: 0; + background: linear-gradient(90deg, #3b82f6, #0ea5e9); + transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); +} + +.nav-center a:hover::after { + width: 100%; +} + +.nav button:hover { + color: #3b82f6; } .nav-left { @@ -92,18 +134,32 @@ footer { align-items: center; line-height: 1; font-size: 1.2rem; + position: relative; + text-decoration: none; } -.nav-right #logout-link:hover { - text-decoration: underline; +.nav-right a:not(#sign-up-btn)::after { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: -4px; + left: 0; + background: linear-gradient(90deg, #3b82f6, #0ea5e9); + transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } -.nav-right button { +.nav-right a:not(#sign-up-btn):hover::after { + width: 100%; +} + +.nav-center button, .nav-right button { border: none; background: none; padding: 0 0 3px 0; } -.nav-right button:hover { + +.nav-center button:hover, .nav-right button:hover { color: #3b82f6; cursor: pointer; } @@ -117,6 +173,25 @@ footer { cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2); + position: relative; + overflow: hidden; +} + +#sign-up-btn::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 50%; + height: 100%; + background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%); + transform: skewX(-25deg); + animation: shimmer-beam 5s infinite; +} + +@keyframes shimmer-beam { + 0%, 70% { left: -100%; } + 100% { left: 200%; } } #sign-up-btn:hover { @@ -139,6 +214,12 @@ footer { } /* SIGN UP PAGE */ +.auth-page { + display: flex; + flex-direction: column; + flex: 1; +} + .signup-section { display: flex; padding: 2rem 1rem 8rem 1rem; @@ -146,6 +227,7 @@ footer { align-items: center; text-align: center; margin-top: 4rem; + flex: 1; } diff --git a/src/main/resources/static/css/templates.css b/src/main/resources/static/css/templates.css index 7d859e1..3ff1a10 100644 --- a/src/main/resources/static/css/templates.css +++ b/src/main/resources/static/css/templates.css @@ -1,7 +1,7 @@ body { font-family: Arial, sans-serif; margin: 0; - padding: 0; + padding-top: 80px; display: flex; flex-direction: column; min-height: 100vh; @@ -15,12 +15,23 @@ body { display: grid; grid-template-columns: 1fr auto 1fr; padding: 1rem 1rem; - border-bottom: 1px solid #e0e0e0; - background: linear-gradient(90deg, #fafbfc 0%, #f5f7fa 50%, #fafbfc 100%); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); width: 100%; left: 0; margin: 0; + + /* 1. Make it sticky at the top */ + position: fixed; + top: 0; + z-index: 1000; + + /* 2. The Frosted Glass Effect */ + background: rgba(250, 251, 252, 0.75); /* Semi-transparent white */ + backdrop-filter: blur(12px); /* Blurs whatever is behind the nav */ + -webkit-backdrop-filter: blur(12px); /* Safari support */ + + /* 3. A subtle border to define the edge */ + border-bottom: 1px solid rgba(224, 224, 224, 0.5); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05); } .nav a { @@ -45,7 +56,6 @@ body { align-items: center; } - .nav-left a { display: inline-flex; align-items: center; @@ -56,6 +66,12 @@ body { width: 30px; height: 30px; display: block; + transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +.nav-left a:hover svg { + transform: rotate(-10deg) scale(1.1); + color: #3b82f6 !important; } .nav-center { @@ -67,6 +83,23 @@ body { .nav-center a, .nav-center button { font-size: 1.2rem; + position: relative; + text-decoration: none; +} + +.nav-center a::after { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: -4px; + left: 0; + background: linear-gradient(90deg, #3b82f6, #0ea5e9); + transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); +} + +.nav-center a:hover::after { + width: 100%; } .nav button:hover { @@ -89,10 +122,23 @@ body { align-items: center; line-height: 1; font-size: 1.2rem; + position: relative; + text-decoration: none; +} + +.nav-right a:not(#sign-up-btn)::after { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: -4px; + left: 0; + background: linear-gradient(90deg, #3b82f6, #0ea5e9); + transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } -.nav-right #logout-link:hover { - text-decoration: underline; +.nav-right a:not(#sign-up-btn):hover::after { + width: 100%; } .nav-center button, .nav-right button { @@ -114,6 +160,25 @@ body { cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2); + position: relative; + overflow: hidden; +} + +#sign-up-btn::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 50%; + height: 100%; + background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%); + transform: skewX(-25deg); + animation: shimmer-beam 5s infinite; +} + +@keyframes shimmer-beam { + 0%, 70% { left: -100%; } + 100% { left: 200%; } } #sign-up-btn:hover { diff --git a/src/main/resources/templates/auth/login.html b/src/main/resources/templates/auth/login.html index b239a3f..591dd6f 100644 --- a/src/main/resources/templates/auth/login.html +++ b/src/main/resources/templates/auth/login.html @@ -9,13 +9,18 @@ diff --git a/src/main/resources/templates/auth/register.html b/src/main/resources/templates/auth/register.html index 6e21117..d741901 100644 --- a/src/main/resources/templates/auth/register.html +++ b/src/main/resources/templates/auth/register.html @@ -9,14 +9,19 @@
diff --git a/src/main/resources/templates/dashboard.html b/src/main/resources/templates/dashboard.html index 79257e9..8bbadd1 100644 --- a/src/main/resources/templates/dashboard.html +++ b/src/main/resources/templates/dashboard.html @@ -8,20 +8,21 @@ diff --git a/src/main/resources/templates/profile.html b/src/main/resources/templates/profile.html index a9a5b44..5317a7f 100644 --- a/src/main/resources/templates/profile.html +++ b/src/main/resources/templates/profile.html @@ -9,32 +9,7 @@ -
- + HyperLink
@@ -21,12 +21,7 @@
Templates -
- - -
+ Profile Dashboard
@@ -35,8 +30,8 @@ Sign Up
-
- + +
From 1f9546d9647f87d7b31789786f041171e1fa3e57 Mon Sep 17 00:00:00 2001 From: JT Date: Thu, 19 Mar 2026 12:17:58 -0500 Subject: [PATCH 6/8] profile page styles --- .../HyprLink/security/SecurityConfig.java | 12 +++- src/main/resources/static/css/default.css | 72 +++++++++++++++++-- src/main/resources/templates/profile.html | 54 +++++++------- 3 files changed, 104 insertions(+), 34 deletions(-) diff --git a/src/main/java/com/basecamp/HyprLink/security/SecurityConfig.java b/src/main/java/com/basecamp/HyprLink/security/SecurityConfig.java index 03c008f..f310ac0 100644 --- a/src/main/java/com/basecamp/HyprLink/security/SecurityConfig.java +++ b/src/main/java/com/basecamp/HyprLink/security/SecurityConfig.java @@ -20,9 +20,15 @@ public PasswordEncoder passwordEncoder() { public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception { http .authorizeHttpRequests(auth -> auth - .requestMatchers("/register/**", "/login", "/css/**", "/profile/**", "/", "/templates", "/images/**").permitAll() // Public pages - .anyRequest().authenticated() // Everything else requires login - ) + // 1. Allow public access to home, login, assets, AND the error page! + .requestMatchers("/", "/login", "/register", "/register/check", "/css/**", "/images/**", "/error").permitAll() + + // 2. Allow public access to all profile pages + .requestMatchers("/profile/**").permitAll() + + // 3. Everything else requires a login (This MUST be the last rule!) + .anyRequest().authenticated() + ) .formLogin(form -> form .loginPage("/login") // Custom login page .defaultSuccessUrl("/dashboard", true) // Where to go after successful login diff --git a/src/main/resources/static/css/default.css b/src/main/resources/static/css/default.css index 6d5584d..b4e0612 100644 --- a/src/main/resources/static/css/default.css +++ b/src/main/resources/static/css/default.css @@ -100,10 +100,16 @@ body { .profile-container { max-width: 450px; width: 100%; - text-align: center; - margin-top: 50px; - border-radius: 16px; - padding: 22px 18px; + margin-top: 60px; + padding: 40px 30px; + border-radius: 24px; + + /* The Frosted Glass Effect */ + background: rgba(255, 255, 255, 0.45); /* Semi-transparent white */ + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.4); + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); } .profile-container.card-style-default { @@ -209,4 +215,62 @@ body { border-color: #007bff; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.05); +} + +/* ========================================= + PROFILE ANIMATIONS & HOVERS + ========================================= */ + +/* The classes we added in HTML */ +.animate-pop-in { + opacity: 0; + animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; +} + +.animate-fade-up { + opacity: 0; + animation: fadeUp 0.6s ease-out forwards; +} + +.delay-1 { animation-delay: 0.1s; } +.delay-2 { animation-delay: 0.2s; } +.delay-3 { animation-delay: 0.3s; } + +.animate-slide-in { + opacity: 0; + transform: translateX(-30px); /* Starts off to the left */ + animation: slideInRight 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; +} + +/* The Keyframes */ +@keyframes popIn { + 0% { transform: scale(0.5); opacity: 0; } + 100% { transform: scale(1); opacity: 1; } +} +@keyframes fadeUp { + 0% { transform: translateY(20px); opacity: 0; } + 100% { transform: translateY(0); opacity: 1; } +} +@keyframes slideInRight { + 0% { transform: translateX(-30px); opacity: 0; } + 100% { transform: translateX(0); opacity: 1; } +} + +/* Add a shiny "sheen" passing over the links when hovered! */ +.link-button { + position: relative; + overflow: hidden; +} + +.link-button::after { + content: ''; + position: absolute; + top: 0; left: -100%; + width: 100%; height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); + transition: left 0.5s ease; +} + +.link-button:hover::after { + left: 100%; } \ No newline at end of file diff --git a/src/main/resources/templates/profile.html b/src/main/resources/templates/profile.html index 5317a7f..877f930 100644 --- a/src/main/resources/templates/profile.html +++ b/src/main/resources/templates/profile.html @@ -3,39 +3,39 @@ - - + Link Garden Profile - - -
- -
- Profile Picture - -

Default Name

- -

- Age • Pronouns -

- -

Default bio text goes here.

- - -
+ th:style="${bgUrl != null ? 'background: url(' + bgUrl + ') center/cover no-repeat fixed;' : ''}"> + +
+ + Profile Picture + +

Default Name

+ +

+ Age • Pronouns +

+ +

Default bio text goes here.

+ +
+ \ No newline at end of file From a8ebaa7467cc5f313f220f9c723495fa6b2a420d Mon Sep 17 00:00:00 2001 From: JT Date: Thu, 19 Mar 2026 12:24:05 -0500 Subject: [PATCH 7/8] Changed page titles, allowed access to template page when not signed in --- .../java/com/basecamp/HyprLink/security/SecurityConfig.java | 2 +- src/main/resources/templates/auth/login.html | 2 +- src/main/resources/templates/auth/register.html | 2 +- src/main/resources/templates/dashboard.html | 2 +- src/main/resources/templates/index.html | 2 +- src/main/resources/templates/profile.html | 2 +- src/main/resources/templates/templates.html | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/main/java/com/basecamp/HyprLink/security/SecurityConfig.java b/src/main/java/com/basecamp/HyprLink/security/SecurityConfig.java index f310ac0..7bbfac5 100644 --- a/src/main/java/com/basecamp/HyprLink/security/SecurityConfig.java +++ b/src/main/java/com/basecamp/HyprLink/security/SecurityConfig.java @@ -24,7 +24,7 @@ public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Excepti .requestMatchers("/", "/login", "/register", "/register/check", "/css/**", "/images/**", "/error").permitAll() // 2. Allow public access to all profile pages - .requestMatchers("/profile/**").permitAll() + .requestMatchers("/profile/**", "/templates").permitAll() // 3. Everything else requires a login (This MUST be the last rule!) .anyRequest().authenticated() diff --git a/src/main/resources/templates/auth/login.html b/src/main/resources/templates/auth/login.html index 591dd6f..767008d 100644 --- a/src/main/resources/templates/auth/login.html +++ b/src/main/resources/templates/auth/login.html @@ -2,7 +2,7 @@ - Login | HyperLink + HyperLink | Login diff --git a/src/main/resources/templates/auth/register.html b/src/main/resources/templates/auth/register.html index d741901..c43f414 100644 --- a/src/main/resources/templates/auth/register.html +++ b/src/main/resources/templates/auth/register.html @@ -2,7 +2,7 @@ - Sign Up | HyperLink + HyperLink | Register diff --git a/src/main/resources/templates/dashboard.html b/src/main/resources/templates/dashboard.html index 8bbadd1..762958f 100644 --- a/src/main/resources/templates/dashboard.html +++ b/src/main/resources/templates/dashboard.html @@ -2,7 +2,7 @@ - Dashboard | Link Garden + HyperLink | Dashboard diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index 3bdebe9..78db2f0 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -3,7 +3,7 @@ - Landing page + HyperLink diff --git a/src/main/resources/templates/profile.html b/src/main/resources/templates/profile.html index 877f930..a31c37c 100644 --- a/src/main/resources/templates/profile.html +++ b/src/main/resources/templates/profile.html @@ -4,7 +4,7 @@ - Link Garden Profile + HyperLink Profile - Template Previews + HyperLink | Templates From 84c8a86821ea887d0827b8d416128d68aa194d72 Mon Sep 17 00:00:00 2001 From: JT Date: Thu, 19 Mar 2026 12:39:17 -0500 Subject: [PATCH 8/8] Login and register animations --- src/main/resources/static/css/login.css | 55 +++++++++++--- src/main/resources/static/css/register.css | 44 ++++++++++- src/main/resources/templates/auth/login.html | 67 ++++++++++++++--- .../resources/templates/auth/register.html | 74 +++++++++++++++++++ 4 files changed, 217 insertions(+), 23 deletions(-) diff --git a/src/main/resources/static/css/login.css b/src/main/resources/static/css/login.css index 6fbf088..4dba971 100644 --- a/src/main/resources/static/css/login.css +++ b/src/main/resources/static/css/login.css @@ -455,16 +455,51 @@ footer { 100% { transform: rotate(360deg); } } -/* The checkmark */ -.checkmark { - font-size: 60px; - color: #28a745; /* Green */ - font-weight: bold; - animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; +/* ========================================= + SVG ANIMATIONS (Checkmark & Cross) + ========================================= */ + +.animated-svg { + width: 70px; + height: 70px; + display: block; + margin: 0 auto; +} + +/* Base styles for the outer circles */ +.svg-circle { + stroke-dasharray: 166; + stroke-dashoffset: 166; + stroke-width: 4; + stroke-miterlimit: 10; + fill: none; + /* Draws the circle first */ + animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; +} + +/* Color definitions */ +.check-svg { stroke: #28a745; } +.cross-svg { stroke: #dc3545; } + +/* Base styles for the inner paths (the check and the X) */ +.svg-check, .svg-cross { + stroke-width: 4; + stroke-linecap: round; + stroke-miterlimit: 10; + transform-origin: 50% 50%; + stroke-dasharray: 48; + stroke-dashoffset: 48; + /* Waits 0.6s for the circle to finish, then draws the inner shape! */ + animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards; +} + +/* The X has a longer path, so we adjust its dasharray */ +.svg-cross { + stroke-dasharray: 90; + stroke-dashoffset: 90; } -/* The bouncy pop-in animation for the checkmark */ -@keyframes popIn { - 0% { transform: scale(0); opacity: 0; } - 100% { transform: scale(1); opacity: 1; } +/* The master keyframe that pushes the lines forward to draw them */ +@keyframes stroke { + 100% { stroke-dashoffset: 0; } } \ No newline at end of file diff --git a/src/main/resources/static/css/register.css b/src/main/resources/static/css/register.css index b0ec498..c7769e5 100644 --- a/src/main/resources/static/css/register.css +++ b/src/main/resources/static/css/register.css @@ -456,4 +456,46 @@ footer { .template-option .card { width: 100%; } -} \ No newline at end of file +} + +/* ========================================= + OVERLAY & SVG ANIMATIONS + ========================================= */ + +#login-overlay { + position: fixed; top: 0; left: 0; width: 100%; height: 100%; + background: rgba(0, 0, 0, 0.6); + display: flex; justify-content: center; align-items: center; + z-index: 1000; +} + +.hidden { display: none !important; } + +.overlay-content { + background: white; padding: 50px; border-radius: 12px; + box-shadow: 0 4px 20px rgba(0,0,0,0.3); text-align: center; +} + +.spinner { + width: 60px; height: 60px; margin: 0 auto; + border: 6px solid #f3f3f3; border-top: 6px solid #28a745; + border-radius: 50%; animation: spin 1s linear infinite; +} + +@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } + +/* SVG Drawing Styles */ +.animated-svg { width: 70px; height: 70px; display: block; margin: 0 auto; } +.svg-circle { + stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 4; stroke-miterlimit: 10; fill: none; + animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; +} +.check-svg { stroke: #28a745; } +.cross-svg { stroke: #dc3545; } +.svg-check, .svg-cross { + stroke-width: 4; stroke-linecap: round; stroke-miterlimit: 10; transform-origin: 50% 50%; + stroke-dasharray: 48; stroke-dashoffset: 48; + animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards; +} +.svg-cross { stroke-dasharray: 90; stroke-dashoffset: 90; } +@keyframes stroke { 100% { stroke-dashoffset: 0; } } \ No newline at end of file diff --git a/src/main/resources/templates/auth/login.html b/src/main/resources/templates/auth/login.html index 767008d..de5b248 100644 --- a/src/main/resources/templates/auth/login.html +++ b/src/main/resources/templates/auth/login.html @@ -66,36 +66,79 @@

Welcome Back

diff --git a/src/main/resources/templates/auth/register.html b/src/main/resources/templates/auth/register.html index c43f414..6d5ebb6 100644 --- a/src/main/resources/templates/auth/register.html +++ b/src/main/resources/templates/auth/register.html @@ -102,8 +102,82 @@

Link 1

+ + +