Updated registration screen added

ProjectSourceCode/src/resources/css/navigation-bar/registration.css

@@ -0,0 +1,22 @@
+#register-container {
+    display: none;
+}
+
+#register-page {
+    width: 600px;
+    height: fit-content;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 5;
+    background: linear-gradient(to bottom, white, rgb(245, 245, 245), rgb(227, 227, 227));
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+    border: 1px solid gray;
+    border-radius: 8px;
+}

ProjectSourceCode/src/resources/js/navigation-bar/user/login.js

@@ -6,5 +6,12 @@ $(document).ready(function() {
     $('#login-container').toggle();
   });
 
+  $('#register-page-login-button').click(function() {
+    event.preventDefault(); // Prevent the default action of following the link
+
+    $('#register-container').hide();
+    $('#login-container').toggle();
+  });
+  
   
 });

ProjectSourceCode/src/resources/js/navigation-bar/user/register.js

@@ -0,0 +1,12 @@
+$(document).ready(function () {
+  
+    // Listen for click event on the register button
+    $('#register-button').click(function (event) {
+      event.preventDefault(); // Prevent the default action of following the link
+  
+      $('#login-container').hide();
+      // Show the register container
+      $('#register-container').show();
+    });
+  });
+  

ProjectSourceCode/src/resources/js/registration/league-and-team-select.js

@@ -1,41 +0,0 @@
-
-document.addEventListener("DOMContentLoaded", function() {
-
-
-    const league_select = document.getElementById('league_dropdown');
-    const team_select = document.getElementById('team_dropdown');
-  
-    league_select.addEventListener('change', updateTeamSelect);
-  
-    function updateTeamSelect() {
-      var selectedLeague = league_select.value;
-      var teamSelect = team_select;
-      
-      // Clear existing options
-      teamSelect.innerHTML = "";
-      
-      // Add options based on the selected value from the first select element
-      if (selectedLeague === "La Liga") {
-        // Add options for La Liga
-        addOption(teamSelect, "Option 1 for LL", "option1A");
-        addOption(teamSelect, "Option 2 for LL", "option2A");
-      } else if (selectedLeague === "Serie A") {
-        // Add options for Serie A
-        addOption(teamSelect, "Team 1 in Serie A", "option1B");
-        addOption(teamSelect, "Team 2 in Serie A", "option2B");
-      } else {
-        // Add options for Bundesliga
-        addOption(teamSelect, "Option 1 for Bun", "option1C");
-        addOption(teamSelect, "Option 2 for Bun", "option2C");
-      }
-    }
-  
-    function addOption(selectElement, text, value) {
-      var option = document.createElement("option");
-      option.text = text;
-      option.value = value;
-      selectElement.add(option);
-    }
-  });
-  
-  

ProjectSourceCode/src/views/partials/footer.hbs

@@ -9,6 +9,7 @@
         <!-- Navigation Bar Scripts -->
         <script src="/js/navigation-bar/navigation-bar-follow.js"></script>
         <script src="/js/navigation-bar/user/login.js"></script>
+        <script src="/js/navigation-bar/user/register.js"></script>
 
         <!-- Homepage Scripts -->
         <script src="/routes/league-pages/redirect-to-league-url.js"></script>

ProjectSourceCode/src/views/partials/head.hbs

@@ -15,6 +15,7 @@
   <!-- Navigation Bar Stylesheets -->
   <link rel="stylesheet" type="text/css" href="/css/navigation-bar/navigation-bar.css">
   <link rel="stylesheet" type="text/css" href="/css/navigation-bar/login.css">
+  <link rel="stylesheet" type="text/css" href="/css/navigation-bar/registration.css">
 
     <!-- Scoreboard Header Stylesheets -->
     <link rel="stylesheet" type="text/css" href="/css/navigation-bar/scoreboard-header/scoreboard.css">

ProjectSourceCode/src/views/partials/navigation-bar/login.hbs

@@ -24,6 +24,6 @@
 
         </form>
 
-        <p class="mt-3">Don't have an account? <a href="/register">Register</a></p>
+        <p class="mt-3">Don't have an account? <a id="register-button" href="/home">Register</a></p>
       </div>
     </div>

ProjectSourceCode/src/views/partials/navigation-bar/nav.hbs

@@ -74,3 +74,7 @@
   {{> navigation-bar/login}}
 </div>
 {{/if}}
+
+<div class="container" id="register-container">
+  {{> navigation-bar/register}}
+</div>

ProjectSourceCode/src/views/partials/navigation-bar/register.hbs

@@ -1,4 +1,4 @@
-<div class="register-page">
+<div class="register-page" id="register-page">
   <div class="form-container">
 
     <h1 class="mt-5 mb-4">Register</h1>
@@ -22,7 +22,7 @@
     </form>
     <!--- END OF FORM --->
 
-    <p class="mt-3">Already have an account? <a href="/login">Login</a></p>
+    <p class="mt-3">Already have an account? <a id="register-page-login-button" href="/login">Login</a></p>
 
   </div>
 </div>