Update frontend/src/App.js

frontend/src/App.js

@@ -4,12 +4,17 @@ import './styles.css';
 
 const ScoreBar = ({ score }) => {
   const percentage = score <= 1 ? score * 100 : score;
+  const hue = Math.min(percentage * 1.2, 120); // Maps 0-100% to 0-120 (red to green)
+  const backgroundColor = `hsl(${hue}, 80%, 50%)`;
   
   return (
     <div className="score-bar">
       <div 
         className="score-fill"
-        style={{ width: `${percentage}%` }}
+        style={{ 
+          width: `${percentage}%`,
+          backgroundColor
+        }}
       />
       <span className="score-text">{percentage.toFixed(1)}%</span>
     </div>