fix: modify index

index.html

@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Resetsix's Github Star 导航</title>
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+  <link rel="icon" type="image/png" href="https://github.githubassets.com/favicons/favicon.png">
   <style>
     .container {
       margin-left: auto;
@@ -104,6 +105,28 @@
     #back-to-top:hover {
       background-color: #2d3748;
     }
+
+    .progress-ring {
+      position: relative;
+      width: 50px;
+      height: 50px;
+    }
+
+    .progress-ring circle {
+      fill: transparent;
+      stroke-width: 4;
+      stroke-linecap: round;
+    }
+
+    .progress-ring__background {
+      stroke: #e0e0e0;
+    }
+
+    .progress-ring__circle {
+      stroke: url(#gradient);
+      stroke-dasharray: 0 100;
+      transition: stroke-dasharray 0.3s;
+    }
   </style>
 </head>
 
@@ -114,9 +137,22 @@ <h1 class="text-2xl font-bold">
     </h1>
     <input id="search" type="text" placeholder="Search repositories..."
       class="p-2 border rounded md:w-1/3 w-full mx-auto">
-    <a href="https://github.com/resetsix" target="_blank" class="ml-4">
-      <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="Github" class="w-8 h-8">
-    </a>
+    <div class="progress-ring" id="github-progress">
+      <svg>
+        <defs>
+          <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color: #f00; stop-opacity: 1;" />
+            <stop offset="100%" style="stop-color: #00f; stop-opacity: 1;" />
+          </linearGradient>
+        </defs>
+        <circle class="progress-ring__background" cx="25" cy="25" r="20"></circle>
+        <circle class="progress-ring__circle" cx="25" cy="25" r="20"></circle>
+      </svg>
+      <a href="https://github.com/resetsix" target="_blank" class="absolute inset-0 flex items-center justify-center">
+        <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="Github"
+          class="w-8 h-8">
+      </a>
+    </div>
   </div>
   <div class="container mx-auto p-4 py-16">
     <div class="block md:flex">
@@ -141,6 +177,7 @@ <h2 class="text-xl font-bold mb-4">语言分类</h2>
       const categoriesContainer = document.getElementById('categories-container');
       const sidebarLinks = document.getElementById('sidebar-links');
       const backToTopButton = document.getElementById('back-to-top');
+      const githubProgress = document.getElementById('github-progress').querySelector('.progress-ring__circle');
 
       fetch('https://gcore.jsdelivr.net/gh/resetsix/starts/data.json')
         .then(response => response.json())
@@ -230,11 +267,24 @@ <h2 class="text-2xl font-bold mb-4">Search Results</h2>
         } else {
           backToTopButton.style.display = 'none';
         }
+        updateProgressRing();
       });
 
       backToTopButton.addEventListener('click', function () {
         window.scrollTo({ top: 0, behavior: 'smooth' });
       });
+
+      function updateProgressRing() {
+        const scrollY = window.scrollY;
+        const documentHeight = document.documentElement.scrollHeight - window.innerHeight;
+        const scrollPercent = (scrollY / documentHeight) * 100;
+        const circle = githubProgress;
+        const radius = circle.r.baseVal.value;
+        const circumference = radius * 2 * Math.PI;
+        const offset = circumference - (scrollPercent / 100) * circumference;
+        circle.style.strokeDasharray = `${circumference} ${circumference}`;
+        circle.style.strokeDashoffset = offset;
+      }
     });
   </script>
 </body>