Favorite button basic implementation added

ProjectSourceCode/src/init_data/create.sql

@@ -4,7 +4,7 @@ CREATE TABLE users (
     Password CHAR(60) NOT NULL
 );
 
-CREATE TABLE FavoriteTeam (
+CREATE TABLE FavoriteTeams (
     UserID INT REFERENCES users(UserID) ON DELETE CASCADE ON UPDATE CASCADE,
     TeamID INT,
     TeamName VARCHAR(50),

ProjectSourceCode/src/resources/css/generated-pages/club-pages/club-page-styling.css

@@ -2,3 +2,12 @@
 {
     margin-right: 20px;
 }
+
+#club-favorite-button
+{
+    width: 35px;
+    transform: skewX(20deg);
+    margin-right: 25px;
+    filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.3));
+    filter: outline(2px solid red);
+}

ProjectSourceCode/src/resources/css/generated-pages/generated-pages-styling.css

@@ -85,7 +85,7 @@
     {
         transform: skewX(20deg); /* Skew the banner to create a triangular side */
         height: 20px;
-        margin-right: 200px;
+        margin-right: 130px;
     }
 
 /*

ProjectSourceCode/src/resources/js/club-page/favorite-button.js

@@ -0,0 +1,8 @@
+document.addEventListener("DOMContentLoaded", function() {
+    var favoriteButton = document.getElementById("club-favorite-button");
+    if (favoriteButton) {
+        favoriteButton.addEventListener("click", function() {
+            favoriteButton.src = "/img/club-page/favorited.png";
+        });
+    }
+});

ProjectSourceCode/src/views/pages/clubs-page.hbs

@@ -5,6 +5,7 @@
         <img id="generated-page-header-logo" src="{{club.crest}}" alt="{{club.name}} Logo">
         <h1 id="generated-page-header-title">{{club.name}}</h1>
         <img id="generated-page-header-flag" src="{{club.area.club_flag}}" alt="{{club.name}} Flag">
+        <img id="club-favorite-button" src="/img/club-page/unfavorited.png" alt="Favorite Button">
     </div>
 
     <div id="club-page-contents-container" class="page-content-container">

ProjectSourceCode/src/views/partials/footer.hbs

@@ -17,5 +17,7 @@
         <script src="/js/league-page/change-goal-difference-color.js"></script>
         <script src="/routes/club-pages/redirect-to-club-url.js"></script>
 
+        <!-- Club Pages Scripts -->
+        <script src="/js/club-page/favorite-button.js"></script>
 
     </footer>