the ring doesn't work properly

script.js

@@ -91,21 +91,29 @@ rippleButtons.forEach(button => {
     }, 800);
   });
 });
-
 // Activity Ring Progress
 const ringInput = document.getElementById('ringInput');
 const ringProgress = document.getElementById('ringProgress');
 const ringPercent = document.getElementById('ringPercent');
 
-if (ringInput && ringProgress) {
+if (ringInput && ringProgress && ringPercent) {
   const updateRing = (value) => {
     const num = Math.max(0, Math.min(100, parseInt(value) || 0));
     ringProgress.style.setProperty('--progress', num);
     ringPercent.textContent = `${num}%`;
+    
+    // Add visual feedback
+    if (num > 0) {
+      ringProgress.style.boxShadow = '0 0 20px rgba(148, 163, 184, 0.3)';
+    } else {
+      ringProgress.style.boxShadow = 'none';
+    }
   };
 
   ringInput.addEventListener('input', (e) => {
-    const value = e.target.value;
+    const value = e.target.value.replace(/[^\d]/g, ''); // Remove non-digits
+    ringInput.value = value; // Update input with cleaned value
+    
     if (value === '' || /^\d+$/.test(value)) {
       updateRing(value);
     }
@@ -118,8 +126,10 @@ if (ringInput && ringProgress) {
       updateRing(ringInput.value);
     }
   });
-}
 
+  // Initialize ring on load
+  updateRing('0');
+}
 // Ring Reset Button
 const ringReset = document.getElementById('ringReset');
 if (ringReset && ringInput) {

style.css

@@ -52,11 +52,10 @@ body {
 .tilt-card:hover::after {
   opacity: 1;
 }
-
 /* Activity ring */
 .ring-progress {
   --progress: 0;
-  background: conic-gradient(slate 0 calc(var(--progress) * 1%), #e2e8f0 0);
+  background: conic-gradient(slate 0 calc(var(--progress) * 3.6deg), #e2e8f0 0);
   transition: background .25s ease;
 }
 .ring-progress::before {
@@ -68,7 +67,6 @@ body {
   filter: blur(6px);
   z-index: -1;
 }
-
 /* Animated form labels */
 .animated-label {
   position: absolute;