Update Project.html

Author: Bacon_Space

Project.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>TheBaconSpace's Profile</title>
     <!-- Include Bootstrap 5.3.0 CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://bootswatch.com/5/quartz/bootstrap.min.css" rel="stylesheet">
     <!-- Include Font Awesome 6.4.2 CSS -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
     <!-- Custom CSS for styling -->
@@ -16,7 +16,7 @@
             background-color: #f5f5f5;
             margin: 0;
             padding: 0;
-            text-align: center;
+            text-align: -webkit-center;
         }
 
         header {
@@ -50,26 +50,6 @@
             text-align: center;
             padding: 10px 0;
         }
-
-        /* Adjusted styling for the repository cards */
-        .card {
-            width: 18rem;
-            height: 25rem;
-            margin: 15px;
-            display: inline-block;
-            vertical-align: top;
-        }
-
-        .card-header {
-            background-color: #007bff;
-            color: #fff;
-            font-weight: bold;
-        }
-
-        .card-footer {
-            background-color: #f8f9fa;
-            color: #6c757d;
-        }
     </style>
 </head>
 
@@ -87,7 +67,7 @@ <h1>TheBaconSpace</h1>
         <h1>TheBaconSpace's Repositories</h1>
 
         <!-- Placeholder for the list of repositories -->
-        <div id="repo-cards">
+        <div id="repo-cards" class="row">
             <!-- Repository cards will be dynamically added here using JavaScript -->
         </div>
     </div>
@@ -100,6 +80,31 @@ <h1>TheBaconSpace's Repositories</h1>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
     <!-- JavaScript to fetch and display GitHub repositories -->
     <script>
+        // Function to generate a random color excluding unreadable colors and white
+        function getRandomColor() {
+            const letters = '0123456789ABCDEF';
+            let color = '#';
+            do {
+                color = '#';
+                for (let i = 0; i < 6; i++) {
+                    color += letters[Math.floor(Math.random() * 16)];
+                }
+            } while (isUnreadableColor(color) || color === '#FFFFFF'); // Exclude unreadable and white colors
+            return color;
+        }
+
+        // Function to check if a color is unreadable
+        function isUnreadableColor(hexColor) {
+            // Check if the color is too bright (light text on light background) or too dark (dark text on dark background)
+            const rgb = parseInt(hexColor.substring(1), 16);
+            const r = (rgb >> 16) & 0xff;
+            const g = (rgb >> 8) & 0xff;
+            const b = (rgb >> 0) & 0xff;
+
+            const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+            return brightness > 200 || brightness < 50; // Modify these thresholds as needed
+        }
+
         // Function to fetch social links from the specified JSON file
         function fetchAndRenderSocialLinks() {
             fetch("https://thebaconspace.github.io/links.json")
@@ -129,14 +134,88 @@ <h1>TheBaconSpace's Repositories</h1>
                 });
         }
 
-        // Your existing JavaScript code here
+        // Function to fetch repositories from GitHub API and render cards
+        function fetchAndRenderRepositories() {
+            fetch('https://api.github.com/users/TheBaconSpace/repos')
+                .then(response => response.json())
+                .then(repos => {
+                    // Select the container for repository cards
+                    const repoCards = document.getElementById('repo-cards');
+
+                    // Clear existing repository cards
+                    repoCards.innerHTML = '';
+
+                    // Iterate through the repositories and create cards
+                    repos.forEach(repo => {
+                        // Create card element
+                        const card = document.createElement('div');
+                        card.classList.add('card', 'mb-3', 'col-md-6');
+
+                        // Include card header template
+                        card.innerHTML = `
+                          <h3 class="card-header">${repo.name}</h3>
+                          <div class="card-body">
+                            <h5 class="card-title">${repo.description || `Plugin For Fivem Server Called TheBaconSpace`}</h5>
+                            <h6 class="card-subtitle text-muted"></h6>
+                            <ul class="list-group">
+                              <li class="list-group-item d-flex justify-content-between align-items-center">
+                                Stars
+                                <span class="badge bg-primary rounded-pill">${repo.stargazers_count}</span>
+                              </li>
+                              <li class="list-group-item d-flex justify-content-between align-items-center">
+                                Watchers
+                                <span class="badge bg-primary rounded-pill">${repo.watchers_count}</span>
+                              </li>
+                              <li class="list-group-item d-flex justify-content-between align-items-center">
+                                Forks
+                                <span class="badge bg-primary rounded-pill">${repo.forks_count}</span>
+                              </li>
+                            </ul>
+                          </div>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200"
+                            aria-label="${repo.name}" focusable="false" role="img" preserveAspectRatio="xMidYMid slice"
+                            viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
+                            <rect width="100%" height="100%" fill="${getRandomColor()}"></rect>
+                            <text x="50%" y="50%" fill="#dee2e6" dy=".3em">${repo.name}</text>
+                          </svg>
+                          <ul class="list-group list-group-flush">
+                            <li class="list-group-item">${repo.description || `Plugin For Fivem Server Called TheBaconSpace`}</li>
+                          </ul>
+                          <div class="card-body">
+                            <a href="${repo.html_url}" class="card-link">Link</a>
+                          </div>
+                          <div class="card-footer text-muted" id="repo-created-at-${repo.id}"></div>
+                        `;
+
+                        // Format and set the created_at timestamp using Moment.js
+                        const createdTimestamp = moment(repo.created_at).fromNow();
+                        const createdAtElement = card.querySelector(`#repo-created-at-${repo.id}`);
+                        createdAtElement.textContent = `Created ${createdTimestamp}`;
+
+                        // Append the card to the container
+                        repoCards.appendChild(card);
+                    });
+                })
+                .catch(error => console.error('Error fetching repositories:', error));
+        }
 
-        // Fetch and render repositories initially
-        fetchAndRenderRepositories();
+        // Function to update the current year in the specified timezone
+        function updateCurrentYear() {
+            const currentYearElement = document.getElementById('current-year');
+            const timezone = 'America/Toronto'; // Specify your desired timezone here
+            const currentYear = new Date().toLocaleString('en-US', { timeZone: timezone, year: 'numeric' });
+            currentYearElement.textContent = `${currentYear}`;
+        }
 
         // Fetch and render social links initially
         fetchAndRenderSocialLinks();
 
+        // Fetch and render repositories initially
+        fetchAndRenderRepositories();
+
+        // Automatically refresh social links every 3 minutes (180,000 milliseconds)
+        setInterval(fetchAndRenderSocialLinks, 3 * 60 * 1000); // 3 minutes in milliseconds
+
         // Update the current year
         updateCurrentYear();
     </script>