Merge pull request #51 from Girish-Anadv-07/feature/github_stars

Added github Stars viewing feature

Author: Mmasoud1

index.html

@@ -5,6 +5,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" href="/niivue.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <title>AI powered brain segmentation</title>
 </head>
 
@@ -68,6 +69,17 @@
             <!-- important to use class footer here -->
             <div class="footer" id="memstatus" style="color: green">Memory OK</div>
           </th>
+          <th>
+            <div class="github-star">
+              <div class="star-button">
+                <a href="https://github.com/neuroneural/brainchop" target="_blank" style="text-decoration:none">
+                  <i class="fa-brands fa-github" style="color: #000000;"></i>
+                  <span>Star</span>
+                </a>
+              </div>
+              <div id="star-count">0</div>
+            </div>
+          </th>
         </tr>
       </table>
     </div>

main.js

@@ -303,4 +303,14 @@ async function main() {
   }
 }
 
+async function updateStarCount() {
+  try {
+      const response = await fetch(`https://api.github.com/repos/neuroneural/brainchop`);
+      const data = await response.json();
+      document.getElementById('star-count').textContent = data.stargazers_count;
+  } catch (error) {
+      console.error('Error fetching star count:', error);
+  }
+}
+updateStarCount()
 main()

public/niivue.css

@@ -106,4 +106,40 @@ div {
 }
 
 div.footer { width: 100%; display: block; background: #303030;}
-table.footer { width: 100%;height: 100%; table-layout: fixed;}
+table.footer { width: 100%;height: 100%; table-layout: fixed;}
+
+.github-star {
+  display: inline-flex;
+  align-items: center;
+  background-color: #fff;
+  border: 1px solid #d1d5da;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  color: #24292e;
+  text-decoration: none;
+}
+
+.github-star .star-button {
+  display: flex;
+  align-items: center;
+  background-color: #ffffff;
+  padding: 5px 12px;
+  border-radius: 6px 0 0 6px;
+}
+
+.github-star .star-button span {
+  color: #24292e;
+  padding-bottom: 8px
+}
+
+.github-star #star-count {
+  background-color: #eff3f6;
+  padding: 5px 12px;
+  border-left: 1px solid #d1d5da;
+  border-radius: 0 6px 6px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #24292e;
+}