feat(about): Contributors list

index.html

@@ -4741,6 +4741,12 @@
                             <a href="https://prigoana.com/" style="text-decoration: underline">Edideaur</a> &
                             <a href="https://samidy.com" style="text-decoration: underline">Samidy</a>
                         </p>
+                        <br>
+                        <h3 style="text-align: center;">Contributors List:</h3>
+                        <br>
+                        <div class="about-contributors">
+
+                        </div>
                         <div class="about-footer">
                             <p class="version">Version 2.5.0</p>
                             <p class="version" id="about-commit-info"></p>

js/app.js

@@ -127,6 +127,28 @@ async function loadDownloadsModule() {
     return downloadsModule;
 }
 
+async function fetchcontributors() {
+    const response = await fetch('https://api.samidy.com/api/contributors');
+    const data1 = await response.json();
+
+    const data = data1.filter(user => user.type !== 'Bot');
+
+    const con = document.querySelector(".about-contributors");
+
+    data.forEach(user => {
+        const userDIV = document.createElement("div");
+        userDIV.innerHTML = `
+        <a href="${user.html_url}" target="_blank">
+        <img src="${user.avatar_url}" alt="${user.login}" width="50" style="border-radius: 50%;">
+        <span>${user.login}</span>
+        <span class="contrib">Contributions: ${user.contributions}</span>
+        </a>
+        `;
+        con.appendChild(userDIV);
+    });
+}
+
+
 async function loadMetadataModule() {
     if (!metadataModule) {
         metadataModule = await import('./metadata.js');
@@ -471,6 +493,9 @@ document.addEventListener('DOMContentLoaded', async () => {
     // Initialize tracker
     initTracker();
 
+    // Initialize Contributor List
+    fetchcontributors();
+
     const castBtn = document.getElementById('cast-btn');
     initializeCasting(audioPlayer, castBtn);
 

styles.css

@@ -9201,3 +9201,35 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
 .member-item:hover {
     transform: scale(1.02);
 }
+
+
+/* FUCK FLEX FUCK CSS FUCKKKKK*/
+.about-contributors {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.about-contributors div {
+    width: calc(20% - 8px);
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    padding: 30px;
+    text-align: center;
+    overflow: hidden;
+}
+
+.about-contributors img {
+    display: block;
+    margin: 0 auto 8px;
+}
+
+.about-contributors span {
+    color: var(--muted-foreground);
+    text-align: center;
+}
+
+
+.contrib {
+    font-size: 10px;
+}