gif

app.py

@@ -5,6 +5,56 @@ import glob
 import os
 import random
 
+def display_challenge_card(challenge, points_html):
+    st.markdown(
+        f"""
+        <div style="
+            padding: 12px; 
+            background-color: #1f1f1f; 
+            border: 1px solid #333333; 
+            border-radius: 8px; 
+            margin-bottom: 12px;">
+            <h3 style="margin-left:15px; color: #ffffff;">{challenge}</h3>
+            <ul style="margin-left:20px; color: #cccccc; list-style-type: disc;">
+                {points_html}
+            </ul>
+        </div>
+        """,
+        unsafe_allow_html=True
+    )
+
+# Within your scoring_section() function, replace the column blocks with:
+col1, col2, col3 = st.columns(3)
+
+with col1:
+    display_challenge_card(
+        "Compression",
+        """
+        <li><strong>1st Place:</strong> 10 points</li>
+        <li><strong>2nd Place:</strong> 7 points</li>
+        <li><strong>3rd Place:</strong> 5 points</li>
+        """
+    )
+
+with col2:
+    display_challenge_card(
+        "Sampling",
+        """
+        <li><strong>1st Place:</strong> 10 points</li>
+        <li><strong>2nd Place:</strong> 7 points</li>
+        <li><strong>3rd Place:</strong> 5 points</li>
+        """
+    )
+
+with col3:
+    display_challenge_card(
+        "Evaluation",
+        """
+        <li><strong>1st Place:</strong> 20 points</li>
+        <li><strong>2nd Place:</strong> 14 points</li>
+        <li><strong>3rd Place:</strong> 10 points</li>
+        """
+    )
 
 def resources_section():
     st.markdown("## Additional Resources")
@@ -94,37 +144,8 @@ def scoring_section():
     # Points Breakdown in a table
     st.markdown("### Points Breakdown")
     # Create three columns for a more interesting layout
-    col1, col2, col3 = st.columns(3)
-    
-    with col1:
-        st.markdown('<h3 style="margin-left:15px;">Compression</h3>', unsafe_allow_html=True)
-        st.markdown(
-            """
-            - **1st Place**: 10 points  
-            - **2nd Place**: 7 points  
-            - **3rd Place**: 5 points
-            """
-        )
-        
-    with col2:
-        st.markdown('<h3 style="margin-left:15px;">Sampling</h3>', unsafe_allow_html=True)
-        st.markdown(
-            """
-            - **1st Place**: 10 points  
-            - **2nd Place**: 7 points  
-            - **3rd Place**: 5 points
-            """
-        )
-        
-    with col3:
-        st.markdown('<h3 style="margin-left:15px;">Evaluation</h3>', unsafe_allow_html=True)
-        st.markdown(
-            """
-            - **1st Place**: 20 points  
-            - **2nd Place**: 14 points  
-            - **3rd Place**: 10 points
-            """
-        )
+    display_challenge_card()
+
     # Tie-Breakers in an expander for a cleaner layout
     with st.expander("Tie-Breakers"):
         st.write(