Lots of front end animations and some other stuff

src/main/java/com/basecamp/HyprLink/security/SecurityConfig.java

@@ -20,12 +20,18 @@ 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/**", "/templates").permitAll()
+
+                // 3. Everything else requires a login (This MUST be the last rule!)
+                .anyRequest().authenticated()
+        )
                 .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

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;
@@ -492,4 +633,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;
 }

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%;
 }