Update app.py

app.py

@@ -145,15 +145,39 @@ def track_progress():
     st.subheader("Track Your Progress")
     st.write("Here's your detailed progress data:")
     st.markdown(f"""
-    <div class="progress-container">
-        <p><strong>Behavioral Questions Solved:</strong> {progress_data['questions_solved']['Behavioral']}</p>
-        <p><strong>Technical Questions Solved:</strong> {progress_data['questions_solved']['Technical']}</p>
-        <p><strong>Situational Questions Solved:</strong> {progress_data['questions_solved']['Situational']}</p>
-        <p><strong>Case Study Questions Solved:</strong> {progress_data['questions_solved']['Case Study']}</p>
-        <p><strong>Problem Solving Questions Solved:</strong> {progress_data['questions_solved']['Problem Solving']}</p>
-        <p><strong>Mock Interviews Taken:</strong> {progress_data['mock_interviews_taken']}</p>
-        <p><strong>Feedback Provided:</strong> {progress_data['feedback_provided']}</p>
-        <p><strong>Tips Retrieved:</strong> {progress_data['tips_retrieved']}</p>
+    <div class="progress-container" style="display: flex; flex-direction: column; align-items: center;">
+        <div style="display: flex; align-items: center;">
+            <i class="fa fa-question-circle" style="font-size: 24px; color: #4CAF50; margin-right: 10px;"></i>
+            <p><strong>Behavioral Questions Solved:</strong> {progress_data['questions_solved']['Behavioral']}</p>
+        </div>
+        <div style="display: flex; align-items: center;">
+            <i class="fa fa-code" style="font-size: 24px; color: #2196F3; margin-right: 10px;"></i>
+            <p><strong>Technical Questions Solved:</strong> {progress_data['questions_solved']['Technical']}</p>
+        </div>
+        <div style="display: flex; align-items: center;">
+            <i class="fa fa-sitemap" style="font-size: 24px; color: #FF5722; margin-right: 10px;"></i>
+            <p><strong>Situational Questions Solved:</strong> {progress_data['questions_solved']['Situational']}</p>
+        </div>
+        <div style="display: flex; align-items: center;">
+            <i class="fa fa-briefcase" style="font-size: 24px; color: #9C27B0; margin-right: 10px;"></i>
+            <p><strong>Case Study Questions Solved:</strong> {progress_data['questions_solved']['Case Study']}</p>
+        </div>
+        <div style="display: flex; align-items: center;">
+            <i class="fa fa-lightbulb-o" style="font-size: 24px; color: #FFC107; margin-right: 10px;"></i>
+            <p><strong>Problem Solving Questions Solved:</strong> {progress_data['questions_solved']['Problem Solving']}</p>
+        </div>
+        <div style="display: flex; align-items: center;">
+            <i class="fa fa-video-camera" style="font-size: 24px; color: #4CAF50; margin-right: 10px;"></i>
+            <p><strong>Mock Interviews Taken:</strong> {progress_data['mock_interviews_taken']}</p>
+        </div>
+        <div style="display: flex; align-items: center;">
+            <i class="fa fa-comment-dots" style="font-size: 24px; color: #2196F3; margin-right: 10px;"></i>
+            <p><strong>Feedback Provided:</strong> {progress_data['feedback_provided']}</p>
+        </div>
+        <div style="display: flex; align-items: center;">
+            <i class="fa fa-lightbulb" style="font-size: 24px; color: #FF5722; margin-right: 10px;"></i>
+            <p><strong>Tips Retrieved:</strong> {progress_data['tips_retrieved']}</p>
+        </div>
     </div>
     """, unsafe_allow_html=True)