From c7bbf685bec91457761d88443c1fb07ef2e4dad9 Mon Sep 17 00:00:00 2001
From: caparcom <caleb_combs@yahoo.com>
Date: Sun, 30 Jan 2022 21:56:34 -0600
Subject: [PATCH] added transitions to the pages. I think it's a bit much but
 i'll see what you guys think

---
 .idea/inspectionProfiles/Project_Default.xml  |  3 +-
 .../giftlist/controllers/UserController.java  | 11 ++++--
 .../main/resources/static/css/transitions.css | 15 ++++++++
 .../src/main/resources/static/transition.js   | 26 ++++++++++++++
 .../main/resources/templates/add_member.html  | 30 ++++++++++++++++
 .../src/main/resources/templates/additem.html | 31 ++++++++++++++++
 .../main/resources/templates/createlist.html  | 30 ++++++++++++++++
 .../main/resources/templates/createparty.html | 31 ++++++++++++++++
 .../main/resources/templates/fragments.html   |  7 +++-
 .../resources/templates/item_details.html     | 31 ++++++++++++++++
 .../resources/templates/list_details.html     | 30 ++++++++++++++++
 .../main/resources/templates/list_items.html  | 32 +++++++++++++++++
 .../src/main/resources/templates/login.html   | 30 ++++++++++++++++
 .../src/main/resources/templates/members.html | 30 ++++++++++++++++
 .../resources/templates/party_details.html    | 31 ++++++++++++++++
 .../main/resources/templates/party_list.html  | 32 +++++++++++++++++
 .../main/resources/templates/register.html    | 34 ++++++++++++++++++
 .../src/main/resources/templates/user.html    | 30 +++++++++++++++-
 .../resources/templates/user_details.html     | 30 ++++++++++++++++
 .../templates/view_userwishlist.html          | 35 +++++++++++++++++++
 .../templates/view_userwishlist_items.html    | 33 +++++++++++++++++
 .../main/resources/templates/wishlists.html   | 34 ++++++++++++++++++
 22 files changed, 591 insertions(+), 5 deletions(-)
 create mode 100644 liftoff_giftlist/src/main/resources/static/css/transitions.css
 create mode 100644 liftoff_giftlist/src/main/resources/static/transition.js

diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index c9468f1..3203767 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -4,12 +4,13 @@
     <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>
-          <list size="5">
+          <list size="6">
             <item index="0" class="java.lang.String" itemvalue="th:field" />
             <item index="1" class="java.lang.String" itemvalue="th:errors" />
             <item index="2" class="java.lang.String" itemvalue="th:for" />
             <item index="3" class="java.lang.String" itemvalue="th:replace" />
             <item index="4" class="java.lang.String" itemvalue="th:if" />
+            <item index="5" class="java.lang.String" itemvalue="window.onload" />
           </list>
         </value>
       </option>
diff --git a/liftoff_giftlist/src/main/java/org/launchcode/giftlist/controllers/UserController.java b/liftoff_giftlist/src/main/java/org/launchcode/giftlist/controllers/UserController.java
index 98622e2..8292ff4 100644
--- a/liftoff_giftlist/src/main/java/org/launchcode/giftlist/controllers/UserController.java
+++ b/liftoff_giftlist/src/main/java/org/launchcode/giftlist/controllers/UserController.java
@@ -61,7 +61,7 @@ public String displayUserPage(Model model, @PathVariable String username, HttpSe
     return "user";
   }
 
-  @GetMapping("user_details1")
+  @GetMapping("user_details")
   public String displayUpdateUserDetailsForm (Model model, HttpSession session) {
     Integer currentUserId = (Integer) session.getAttribute("user");
     User user = userRepository.findById(currentUserId).get();
@@ -69,7 +69,7 @@ public String displayUpdateUserDetailsForm (Model model, HttpSession session) {
     return "user_details";
   }
 
-  @PostMapping("user_details1")
+  @PostMapping("user_details")
   public String processUpdateUserDetailsForm (@ModelAttribute @Valid UpdateUserDetailsDTO updateUserDetailsDTO,
                                            HttpSession session, Model model) {
     Integer currentUserId = (Integer) session.getAttribute("user");
@@ -83,6 +83,13 @@ public String processUpdateUserDetailsForm (@ModelAttribute @Valid UpdateUserDet
     model.addAttribute("lastName", user.getLastName());
     model.addAttribute("username", user.getUsername());
     model.addAttribute("email", user.getEmail());
+    //    Find all wishlists owned by this user
+    List<WishList> wishLists = user.getWishLists();
+    model.addAttribute("wishlists", wishLists);
+
+//    Find all groups this user belongs to
+    List<Party> groups = user.getJoinedParties();
+    model.addAttribute("groups", groups);
     return "user";
 
   }
diff --git a/liftoff_giftlist/src/main/resources/static/css/transitions.css b/liftoff_giftlist/src/main/resources/static/css/transitions.css
new file mode 100644
index 0000000..8bd51f1
--- /dev/null
+++ b/liftoff_giftlist/src/main/resources/static/css/transitions.css
@@ -0,0 +1,15 @@
+.transition-1{
+    position: fixed;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    bottom: 0;
+    z-index: 101;
+    background-color: black;
+    pointer-events: none;
+    transition: 0.5s ease-out;
+}
+
+.transition-1.is-active{
+    left: 0px;
+}
\ No newline at end of file
diff --git a/liftoff_giftlist/src/main/resources/static/transition.js b/liftoff_giftlist/src/main/resources/static/transition.js
new file mode 100644
index 0000000..dd03233
--- /dev/null
+++ b/liftoff_giftlist/src/main/resources/static/transition.js
@@ -0,0 +1,26 @@
+window.onload = () => {
+    const transition_el = document.querySelector('.transition');
+    const links = document.querySelectorAll('a');
+
+    setTimeout(() => {
+    transition_el.classList.remove('is-active');
+    }, 500);
+
+    for (let i = 0; i < links.length; i++){
+        let link = links[i];
+
+        link.addEventListener('click', e => {
+            e.preventDefault();
+            let target = e.target.href;
+
+            transition_el.classList.add('is-active');
+
+            setTimeout(() => {
+                window.location.href = target;
+                }, 500);
+
+        })
+
+    }
+
+};
\ No newline at end of file
diff --git a/liftoff_giftlist/src/main/resources/templates/add_member.html b/liftoff_giftlist/src/main/resources/templates/add_member.html
index 281f4bc..3cc502c 100644
--- a/liftoff_giftlist/src/main/resources/templates/add_member.html
+++ b/liftoff_giftlist/src/main/resources/templates/add_member.html
@@ -4,6 +4,8 @@
 <body>
 <nav th:replace="fragments :: nav-header"></nav>
 
+<div th:replace="fragments :: transition"></div>
+
 <div class="container p-3 my-3">
     <div class="row justify-content-center align-items-center">
         <h3 class="py-3 my-2 text-center" th:text="${'Add member to group: ' + party.getName()}"></h3>
@@ -26,5 +28,33 @@ <h3 class="py-3 my-2 text-center" th:text="${'Add member to group: ' + party.get
 </div>
 
 <script th:replace="fragments :: js"></script>
+<script>
+window.onload = () => {
+    const transition_el = document.querySelector('.transition');
+    const links = document.querySelectorAll('a');
+
+    setTimeout(() => {
+    transition_el.classList.remove('is-active');
+    }, 500);
+
+    for (let i = 0; i < links.length; i++){
+        let link = links[i];
+
+        link.addEventListener('click', e => {
+            e.preventDefault();
+            let target = e.target.href;
+
+            transition_el.classList.add('is-active');
+
+            setTimeout(() => {
+                window.location.href = target;
+                }, 500);
+
+        })
+
+    }
+
+};
+</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/liftoff_giftlist/src/main/resources/templates/additem.html b/liftoff_giftlist/src/main/resources/templates/additem.html
index 707f00f..7536b94 100644
--- a/liftoff_giftlist/src/main/resources/templates/additem.html
+++ b/liftoff_giftlist/src/main/resources/templates/additem.html
@@ -4,6 +4,9 @@
 <body>
 <nav th:replace="fragments :: nav-header"></nav>
 
+
+<div th:replace="fragments :: transition"></div>
+
 <div class="container p-3 my-3">
         <div class="row justify-content-center align-items-center">
     <h2 class="py-3 my-2 text-center" th:text="${'Add item to list: ' + wishList.getName()}"></h2>
@@ -34,5 +37,33 @@ <h2 class="py-3 my-2 text-center" th:text="${'Add item to list: ' + wishList.get
 </div>
 
 <script th:replace="fragments :: js"></script>
+<script>
+window.onload = () => {
+    const transition_el = document.querySelector('.transition');
+    const links = document.querySelectorAll('a');
+
+    setTimeout(() => {
+    transition_el.classList.remove('is-active');
+    }, 500);
+
+    for (let i = 0; i < links.length; i++){
+        let link = links[i];
+
+        link.addEventListener('click', e => {
+            e.preventDefault();
+            let target = e.target.href;
+
+            transition_el.classList.add('is-active');
+
+            setTimeout(() => {
+                window.location.href = target;
+                }, 500);
+
+        })
+
+    }
+
+};
+</script>
 </body>
 </html>
diff --git a/liftoff_giftlist/src/main/resources/templates/createlist.html b/liftoff_giftlist/src/main/resources/templates/createlist.html
index 802e4ed..868aaab 100644
--- a/liftoff_giftlist/src/main/resources/templates/createlist.html
+++ b/liftoff_giftlist/src/main/resources/templates/createlist.html
@@ -4,6 +4,8 @@
 <body>
 <nav th:replace="fragments :: nav-header"></nav>
 
+<div th:replace="fragments :: transition"></div>
+
 <div class="container p-3 my-3">
   <div class="row justify-content-center align-items-center">
     <h2 class="py-3 my-2 text-center">Create New Wish List</h2>
@@ -37,5 +39,33 @@ <h2 class="py-3 my-2 text-center">Create New Wish List</h2>
 </div>
 
 <script th:replace="fragments :: js"></script>
+<script>
+window.onload = () => {
+    const transition_el = document.querySelector('.transition');
+    const links = document.querySelectorAll('a');
+
+    setTimeout(() => {
+    transition_el.classList.remove('is-active');
+    }, 500);
+
+    for (let i = 0; i < links.length; i++){
+        let link = links[i];
+
+        link.addEventListener('click', e => {
+            e.preventDefault();
+            let target = e.target.href;
+
+            transition_el.classList.add('is-active');
+
+            setTimeout(() => {
+                window.location.href = target;
+                }, 500);
+
+        })
+
+    }
+
+};
+</script>
 </body>
 </html>
diff --git a/liftoff_giftlist/src/main/resources/templates/createparty.html b/liftoff_giftlist/src/main/resources/templates/createparty.html
index 1d377da..f792673 100644
--- a/liftoff_giftlist/src/main/resources/templates/createparty.html
+++ b/liftoff_giftlist/src/main/resources/templates/createparty.html
@@ -4,6 +4,9 @@
 <body>
 <nav th:replace="fragments :: nav-header"></nav>
 
+
+<div th:replace="fragments :: transition"></div>
+
 <div class="container p-3 my-3">
     <div class="row justify-content-center align-items-center">
         <h2 class="py-3 my-2 text-center">Create Group</h2>
@@ -37,5 +40,33 @@ <h2 class="py-3 my-2 text-center">Create Group</h2>
 </div>
 
 <script th:replace="fragments :: js"></script>
+<script>
+window.onload = () => {
+    const transition_el = document.querySelector('.transition');
+    const links = document.querySelectorAll('a');
+
+    setTimeout(() => {
+    transition_el.classList.remove('is-active');
+    }, 500);
+
+    for (let i = 0; i < links.length; i++){
+        let link = links[i];
+
+        link.addEventListener('click', e => {
+            e.preventDefault();
+            let target = e.target.href;
+
+            transition_el.classList.add('is-active');
+
+            setTimeout(() => {
+                window.location.href = target;
+                }, 500);
+
+        })
+
+    }
+
+};
+</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/liftoff_giftlist/src/main/resources/templates/fragments.html b/liftoff_giftlist/src/main/resources/templates/fragments.html
index 2ddc8c3..b208a77 100644
--- a/liftoff_giftlist/src/main/resources/templates/fragments.html
+++ b/liftoff_giftlist/src/main/resources/templates/fragments.html
@@ -12,8 +12,12 @@
       crossorigin="anonymous"
     />
     <link rel="stylesheet"  th:href="@{/css/styles.css}" />
+    <link rel="stylesheet" th:href="@{/css/transitions.css}" />
           <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 
+  <div th:fragment="transition" class="transition transition-1 is-active"></div>
+
+
   <body>
     <header th:fragment="nav-header">
       <nav class="navbar navbar-expand-md navbar-light">
@@ -48,7 +52,7 @@
                 <a href="/party_list" class="nav-link fw-bold">My Groups</a>
               </li>
               <li class="nav-item">
-                <a href="/user_details1" class="nav-link fw-bold">Account</a>
+                <a href="/user_details" class="nav-link fw-bold">Account</a>
               </li>
               <li class="nav-item">
                 <a href="/logout" class="ms-2 btn btn-secondary">Logout</a>
@@ -59,6 +63,7 @@
       </nav>
     </header>
 
+    <script th:fragment="transitions" src="transition.js"></script>
     <script
       th:fragment="js"
       src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
diff --git a/liftoff_giftlist/src/main/resources/templates/item_details.html b/liftoff_giftlist/src/main/resources/templates/item_details.html
index 76cbf9d..fe4b824 100644
--- a/liftoff_giftlist/src/main/resources/templates/item_details.html
+++ b/liftoff_giftlist/src/main/resources/templates/item_details.html
@@ -4,6 +4,9 @@
 <body>
 <nav th:replace="fragments :: nav-header"></nav>
 
+
+<div th:replace="fragments :: transition"></div>
+
 <div class="container p-3 my-3">
     <div class="row justify-content-center align-items-center">
         <h2 class="py-3 my-2 text-center">Edit Item Details</h2>
@@ -37,5 +40,33 @@ <h2 class="py-3 my-2 text-center">Edit Item Details</h2>
 </div>
 
 <script th:replace="fragments :: js"></script>
+<script>
+window.onload = () => {
+    const transition_el = document.querySelector('.transition');
+    const links = document.querySelectorAll('a');
+
+    setTimeout(() => {
+    transition_el.classList.remove('is-active');
+    }, 500);
+
+    for (let i = 0; i < links.length; i++){
+        let link = links[i];
+
+        link.addEventListener('click', e => {
+            e.preventDefault();
+            let target = e.target.href;
+
+            transition_el.classList.add('is-active');
+
+            setTimeout(() => {
+                window.location.href = target;
+                }, 500);
+
+        })
+
+    }
+
+};
+</script>
 </body>
 </html>
diff --git a/liftoff_giftlist/src/main/resources/templates/list_details.html b/liftoff_giftlist/src/main/resources/templates/list_details.html
index 0fd614e..d62adfb 100644
--- a/liftoff_giftlist/src/main/resources/templates/list_details.html
+++ b/liftoff_giftlist/src/main/resources/templates/list_details.html
@@ -4,6 +4,8 @@
 <body>
 <nav th:replace="fragments :: nav-header"></nav>
 
+<div th:replace="fragments :: transition"></div>
+
 <div class="container p-3 my-3">
     <div class="row justify-content-center align-items-center">
         <h2 class="py-3 my-2 text-center">Edit Wish List Details</h2>
@@ -37,5 +39,33 @@ <h2 class="py-3 my-2 text-center">Edit Wish List Details</h2>
 </div>
 
 <script th:replace="fragments :: js"></script>
+<script>
+window.onload = () => {
+    const transition_el = document.querySelector('.transition');
+    const links = document.querySelectorAll('a');
+
+    setTimeout(() => {
+    transition_el.classList.remove('is-active');
+    }, 500);
+
+    for (let i = 0; i < links.length; i++){
+        let link = links[i];
+
+        link.addEventListener('click', e => {
+            e.preventDefault();
+            let target = e.target.href;
+
+            transition_el.classList.add('is-active');
+
+            setTimeout(() => {
+                window.location.href = target;
+                }, 500);
+
+        })
+
+    }
+
+};
+</script>
 </body>
 </html>
diff --git a/liftoff_giftlist/src/main/resources/templates/list_items.html b/liftoff_giftlist/src/main/resources/templates/list_items.html
index 9000f95..b86fa0f 100644
--- a/liftoff_giftlist/src/main/resources/templates/list_items.html
+++ b/liftoff_giftlist/src/main/resources/templates/list_items.html
@@ -3,6 +3,9 @@
 <head th:replace="fragments :: head">        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
 <nav th:replace="fragments :: nav-header"></nav>
+
+<div th:replace="fragments :: transition"></div>
+
 <div class="row justify-content-center my-4">
     <h2 class="text-center" th:text="${wishList.getName()}">Items</h2>
 </div>
@@ -42,5 +45,34 @@ <h2 class="text-center" th:text="${wishList.getName()}">Items</h2>
         </div>
     </form>
 </div>
+<script th:replace="fragments :: js"></script>
+<script>
+window.onload = () => {
+    const transition_el = document.querySelector('.transition');
+    const links = document.querySelectorAll('a');
+
+    setTimeout(() => {
+    transition_el.classList.remove('is-active');
+    }, 500);
+
+    for (let i = 0; i < links.length; i++){
+        let link = links[i];
+
+        link.addEventListener('click', e => {
+            e.preventDefault();
+            let target = e.target.href;
+
+            transition_el.classList.add('is-active');
+
+            setTimeout(() => {
+                window.location.href = target;
+                }, 500);
+
+        })
+
+    }
+
+};
+</script>
 </body>
 </html>
diff --git a/liftoff_giftlist/src/main/resources/templates/login.html b/liftoff_giftlist/src/main/resources/templates/login.html
index 0df959d..04864a0 100644
--- a/liftoff_giftlist/src/main/resources/templates/login.html
+++ b/liftoff_giftlist/src/main/resources/templates/login.html
@@ -3,6 +3,8 @@
 <head th:replace="fragments :: head">        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
 
+<div th:replace="fragments :: transition"></div>
+
 <!-- Navbar content -->
 <nav class="navbar navbar-expand-md navbar-light">
     <div class="container-xxl">
@@ -97,6 +99,34 @@ <h2 class="py-3 my-2 text-center">Log Into Your Account</h2>
     </div>
 </div>
 <script th:replace="fragments :: js"></script>
+<script>
+window.onload = () => {
+    const transition_el = document.querySelector('.transition');
+    const links = document.querySelectorAll('a');
+
+    setTimeout(() => {
+    transition_el.classList.remove('is-active');
+    }, 500);
+
+    for (let i = 0; i < links.length; i++){
+        let link = links[i];
+
+        link.addEventListener('click', e => {
+            e.preventDefault();
+            let target = e.target.href;
+
+            transition_el.classList.add('is-active');
+
+            setTimeout(() => {
+                window.location.href = target;
+                }, 500);
+
+        })
+
+    }
+
+};
+</script>
 
 </body>
 </html>
diff --git a/liftoff_giftlist/src/main/resources/templates/members.html b/liftoff_giftlist/src/main/resources/templates/members.html
index 722e5ed..99bfaf1 100644
--- a/liftoff_giftlist/src/main/resources/templates/members.html
+++ b/liftoff_giftlist/src/main/resources/templates/members.html
@@ -4,6 +4,8 @@
 <body>
 <nav th:replace="fragments :: nav-header"></nav>
 
+<div th:replace="fragments :: transition"></div>
+
 <div class="row justify-content-center my-4">
     <h1 class="text-center" th:text="${'Members of ' + party.getName()}"></h1>
 </div>
@@ -74,5 +76,33 @@ <h1 class="text-center" th:text="${'Members of ' + party.getName()}"></h1>
 
 
 <script th:replace="fragments :: js"></script>
+<script>
+window.onload = () => {
+    const transition_el = document.querySelector('.transition');
+    const links = document.querySelectorAll('a');
+
+    setTimeout(() => {
+    transition_el.classList.remove('is-active');
+    }, 500);
+
+    for (let i = 0; i < links.length; i++){
+        let link = links[i];
+
+        link.addEventListener('click', e => {
+            e.preventDefault();
+            let target = e.target.href;
+
+            transition_el.classList.add('is-active');
+
+            setTimeout(() => {
+                window.location.href = target;
+                }, 500);
+
+        })
+
+    }
+
+};
+</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/liftoff_giftlist/src/main/resources/templates/party_details.html b/liftoff_giftlist/src/main/resources/templates/party_details.html
index 9f0b393..88aef06 100644
--- a/liftoff_giftlist/src/main/resources/templates/party_details.html
+++ b/liftoff_giftlist/src/main/resources/templates/party_details.html
@@ -4,6 +4,9 @@
 <body>
 <nav th:replace="fragments :: nav-header"></nav>
 
+
+<div th:replace="fragments :: transition"></div>
+
 <div class="container p-3 my-3">
     <div class="row justify-content-center align-items-center">
         <h2 class="py-3 my-2 text-center">Edit Group Details</h2>
@@ -37,5 +40,33 @@ <h2 class="py-3 my-2 text-center">Edit Group Details</h2>
 </div>
 
 <script th:replace="fragments :: js"></script>
+<script>
+window.onload = () => {
+    const transition_el = document.querySelector('.transition');
+    const links = document.querySelectorAll('a');
+
+    setTimeout(() => {
+    transition_el.classList.remove('is-active');
+    }, 500);
+
+    for (let i = 0; i < links.length; i++){
+        let link = links[i];
+
+        link.addEventListener('click', e => {
+            e.preventDefault();
+            let target = e.target.href;
+
+            transition_el.classList.add('is-active');
+
+            setTimeout(() => {
+                window.location.href = target;
+                }, 500);
+
+        })
+
+    }
+
+};
+</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/liftoff_giftlist/src/main/resources/templates/party_list.html b/liftoff_giftlist/src/main/resources/templates/party_list.html
index 3dd1609..7b87b5c 100644
--- a/liftoff_giftlist/src/main/resources/templates/party_list.html
+++ b/liftoff_giftlist/src/main/resources/templates/party_list.html
@@ -3,6 +3,9 @@
 <head th:replace="fragments :: head">        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
 <nav th:replace="fragments :: nav-header"></nav>
+
+<div th:replace="fragments :: transition"></div>
+
 <div class="row justify-content-center my-4">
     <h2 class="text-center">Owned Groups</h2>
 </div>
@@ -72,5 +75,34 @@ <h2 class="text-center">All Groups</h2>
             </table>
         </div>
 </div>
+<script th:replace="fragments :: js"></script>
+<script>
+window.onload = () => {
+    const transition_el = document.querySelector('.transition');
+    const links = document.querySelectorAll('a');
+
+    setTimeout(() => {
+    transition_el.classList.remove('is-active');
+    }, 500);
+
+    for (let i = 0; i < links.length; i++){
+        let link = links[i];
+
+        link.addEventListener('click', e => {
+            e.preventDefault();
+            let target = e.target.href;
+
+            transition_el.classList.add('is-active');
+
+            setTimeout(() => {
+                window.location.href = target;
+                }, 500);
+
+        })
+
+    }
+
+};
+</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/liftoff_giftlist/src/main/resources/templates/register.html b/liftoff_giftlist/src/main/resources/templates/register.html
index f4cf97c..6acbd8d 100644
--- a/liftoff_giftlist/src/main/resources/templates/register.html
+++ b/liftoff_giftlist/src/main/resources/templates/register.html
@@ -3,6 +3,10 @@
 <head th:replace="fragments :: head">        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 
 <body>
+
+
+<div th:replace="fragments :: transition"></div>
+
 <nav class="navbar navbar-expand-md navbar-light">
   <div class="container-xxl">
     <a href="/index" class="navbar-brand">
@@ -145,6 +149,36 @@ <h2 class="py-3 my-2 text-center">Create New Account</h2>
   </div>
 </div>
 <script th:replace="fragments :: js"></script>
+<script>
+
+window.onload = () => {
+    const transition_el = document.querySelector('.transition');
+    const links = document.querySelectorAll('a');
+
+    setTimeout(() => {
+    transition_el.classList.remove('is-active');
+    }, 500);
+
+    for (let i = 0; i < links.length; i++){
+        let link = links[i];
+
+        link.addEventListener('click', e => {
+            e.preventDefault();
+            let target = e.target.href;
+
+            transition_el.classList.add('is-active');
+
+            setTimeout(() => {
+                window.location.href = target;
+                }, 500);
+
+        })
+
+    }
+
+};
+
+</script>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/liftoff_giftlist/src/main/resources/templates/user.html b/liftoff_giftlist/src/main/resources/templates/user.html
index 40a7718..3de437b 100644
--- a/liftoff_giftlist/src/main/resources/templates/user.html
+++ b/liftoff_giftlist/src/main/resources/templates/user.html
@@ -3,7 +3,7 @@
 <head th:replace="fragments :: head">        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
 <nav th:replace="fragments :: nav-header"></nav>
-
+<div th:replace="fragments :: transition"></div>
 <h2 class="text-center mt-5 mb-5">
   Welcome, <span th:text="${username}">dear user!</span>.
 </h2>
@@ -39,5 +39,33 @@ <h4 class="py-3 text-center">User Details</h4>
 </div>
 
 <script th:replace="fragments :: js"></script>
+<script>
+window.onload = () => {
+    const transition_el = document.querySelector('.transition');
+    const links = document.querySelectorAll('a');
+
+    setTimeout(() => {
+    transition_el.classList.remove('is-active');
+    }, 500);
+
+    for (let i = 0; i < links.length; i++){
+        let link = links[i];
+
+        link.addEventListener('click', e => {
+            e.preventDefault();
+            let target = e.target.href;
+
+            transition_el.classList.add('is-active');
+
+            setTimeout(() => {
+                window.location.href = target;
+                }, 500);
+
+        })
+
+    }
+
+};
+</script>
 </body>
 </html>
diff --git a/liftoff_giftlist/src/main/resources/templates/user_details.html b/liftoff_giftlist/src/main/resources/templates/user_details.html
index 233200c..462c33b 100644
--- a/liftoff_giftlist/src/main/resources/templates/user_details.html
+++ b/liftoff_giftlist/src/main/resources/templates/user_details.html
@@ -3,6 +3,9 @@
 <head th:replace="fragments :: head">        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
 <nav th:replace="fragments :: nav-header"></nav>
+
+<div th:replace="fragments :: transition"></div>
+
 <div class="container p-3 my-3">
     <div class="row justify-content-center align-items-center">
         <h2 class="py-3 my-2 text-center">Edit Account Details</h2>
@@ -50,8 +53,35 @@ <h2 class="py-3 my-2 text-center">Edit Account Details</h2>
             </div>
         </div>
 </div>
+<script th:replace="fragments :: js"></script>
+<script>
+window.onload = () => {
+    const transition_el = document.querySelector('.transition');
+    const links = document.querySelectorAll('a');
+
+    setTimeout(() => {
+    transition_el.classList.remove('is-active');
+    }, 500);
+
+    for (let i = 0; i < links.length; i++){
+        let link = links[i];
+
+        link.addEventListener('click', e => {
+            e.preventDefault();
+            let target = e.target.href;
+
+            transition_el.classList.add('is-active');
+
+            setTimeout(() => {
+                window.location.href = target;
+                }, 500);
+
+        })
 
+    }
 
+};
+</script>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/liftoff_giftlist/src/main/resources/templates/view_userwishlist.html b/liftoff_giftlist/src/main/resources/templates/view_userwishlist.html
index f00a852..f4a932c 100644
--- a/liftoff_giftlist/src/main/resources/templates/view_userwishlist.html
+++ b/liftoff_giftlist/src/main/resources/templates/view_userwishlist.html
@@ -3,6 +3,9 @@
 <head th:replace="fragments :: head">        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
 <nav th:replace="fragments :: nav-header"></nav>
+
+<div th:replace="fragments :: transition"></div>
+
 <div class="row justify-content-center my-4">
     <h2 class="text-center" th:text="${'Wishlists for ' + member.getFirstName()}"></h2>
 </div>
@@ -31,8 +34,40 @@ <h2 class="text-center" th:text="${'Wishlists for ' + member.getFirstName()}"></
                 </tr>
                 </tfoot>
         </table>
+        </div>
 </div>
 
 <script th:replace="fragments :: js"></script>
+<script>
+
+window.onload = () => {
+    const transition_el = document.querySelector('.transition');
+    const links = document.querySelectorAll('a');
+
+    setTimeout(() => {
+    transition_el.classList.remove('is-active');
+    }, 500);
+
+    for (let i = 0; i < links.length; i++){
+        let link = links[i];
+
+        link.addEventListener('click', e => {
+            e.preventDefault();
+            let target = e.target.href;
+
+            transition_el.classList.add('is-active');
+
+            setTimeout(() => {
+                window.location.href = target;
+                }, 500);
+
+        })
+
+    }
+
+};
+
+</script>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/liftoff_giftlist/src/main/resources/templates/view_userwishlist_items.html b/liftoff_giftlist/src/main/resources/templates/view_userwishlist_items.html
index 40a7672..011090a 100644
--- a/liftoff_giftlist/src/main/resources/templates/view_userwishlist_items.html
+++ b/liftoff_giftlist/src/main/resources/templates/view_userwishlist_items.html
@@ -3,6 +3,9 @@
 <head th:replace="fragments :: head">        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
 <nav th:replace="fragments :: nav-header"></nav>
+
+<div th:replace="fragments :: transition"></div>
+
 <div class="row justify-content-center my-4">
     <h1 class="text-center">Wishlist Items</h1>
 </div>
@@ -47,5 +50,35 @@ <h1 class="text-center">Wishlist Items</h1>
 
 
 <script th:replace="fragments :: js"></script>
+<script>
+
+window.onload = () => {
+    const transition_el = document.querySelector('.transition');
+    const links = document.querySelectorAll('a');
+
+    setTimeout(() => {
+    transition_el.classList.remove('is-active');
+    }, 500);
+
+    for (let i = 0; i < links.length; i++){
+        let link = links[i];
+
+        link.addEventListener('click', e => {
+            e.preventDefault();
+            let target = e.target.href;
+
+            transition_el.classList.add('is-active');
+
+            setTimeout(() => {
+                window.location.href = target;
+                }, 500);
+
+        })
+
+    }
+
+};
+
+</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/liftoff_giftlist/src/main/resources/templates/wishlists.html b/liftoff_giftlist/src/main/resources/templates/wishlists.html
index a9a9c5f..f15056c 100644
--- a/liftoff_giftlist/src/main/resources/templates/wishlists.html
+++ b/liftoff_giftlist/src/main/resources/templates/wishlists.html
@@ -3,6 +3,9 @@
 <head th:replace="fragments :: head">        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
 <nav th:replace="fragments :: nav-header"></nav>
+
+<div th:replace="fragments :: transition"></div>
+
 <div class="row justify-content-center my-4">
     <h1 class="text-center">My Wish Lists</h1>
 </div>
@@ -46,5 +49,36 @@ <h1 class="text-center">My Wish Lists</h1>
 
     </form>
 </div>
+<script th:replace="fragments :: js"></script>
+<script>
+
+window.onload = () => {
+    const transition_el = document.querySelector('.transition');
+    const links = document.querySelectorAll('a');
+
+    setTimeout(() => {
+    transition_el.classList.remove('is-active');
+    }, 500);
+
+    for (let i = 0; i < links.length; i++){
+        let link = links[i];
+
+        link.addEventListener('click', e => {
+            e.preventDefault();
+            let target = e.target.href;
+
+            transition_el.classList.add('is-active');
+
+            setTimeout(() => {
+                window.location.href = target;
+                }, 500);
+
+        })
+
+    }
+
+};
+
+</script>
 </body>
 </html>
\ No newline at end of file