Update index.html

index.html

@@ -62,7 +62,26 @@
       }
     }
 
-    /* Additional styling */
+    @keyframes idlePulse {
+      0% {
+        transform: scale(1);
+        background-color: #282c34;
+      }
+      50% {
+        transform: scale(1.02);
+        background-color: #3b4048;
+      }
+      100% {
+        transform: scale(1);
+        background-color: #282c34;
+      }
+    }
+
+    /* Idle state styling */
+    .idle {
+      animation: idlePulse 3s infinite ease-in-out;
+    }
+
     .highlight {
       font-weight: bold;
       color: #61dafb;
@@ -110,5 +129,21 @@
     <h2>📬 Contact</h2>
     <p>For inquiries or collaboration, feel free to reach out to us through <a href="https://github.com/kindahex" target="_blank">GitHub</a>, or <a href="https://huggingface.co/spaces/kindahex/README/discussions" target="_blank">Hugging Face discussions</a>.</p>
   </div>
+
+  <script>
+    let idleTimer;
+    
+    function resetTimer() {
+      clearTimeout(idleTimer);
+      document.body.classList.remove('idle');
+      idleTimer = setTimeout(() => {
+        document.body.classList.add('idle');
+      }, 10000); // 10 seconds of idle time
+    }
+
+    window.onload = resetTimer;
+    window.onmousemove = resetTimer;
+    window.onkeydown = resetTimer;
+  </script>
 </body>
 </html>