rules

app.py

@@ -64,6 +64,7 @@ def scoring_section():
         "respective Hugging Face submission servers. Below is a preview of the overall leaderboard format:"
     )
 
+    # Sample data
     data = {
         "Rank": [1, 2, 3],
         "Team Name": ["Team Alpha", "Team Beta", "Team Gamma"],
@@ -75,37 +76,44 @@ def scoring_section():
     
     leaderboard_df = pd.DataFrame(data)
 
-    # Define custom CSS for a cleaner table
+    # Custom CSS for a dark theme table
     table_css = """
     <style>
-    table {
+    .dark-table {
       border-collapse: collapse;
-      margin: 10px 0;
-      font-size: 1em;
       width: 100%;
+      font-size: 1em;
+      margin: 10px 0;
+      color: #dddddd; /* Light text for dark background */
     }
-    th, td {
-      border: 1px solid #ddd;
+    .dark-table th {
+      background-color: #333333; /* Dark header background */
+      color: #ffffff;           /* White text for contrast */
       padding: 8px;
       text-align: center;
+      font-weight: bold;
     }
-    th {
-      background-color: #4C4C4C;
-      color: #ffffff;
+    .dark-table td {
+      border: 1px solid #444444; 
+      padding: 8px;
+      text-align: center;
     }
-    tr:nth-child(even) {
-      background-color: #f9f9f9;
+    .dark-table tr:nth-child(even) {
+      background-color: #2b2b2b; /* Slightly lighter row for contrast */
     }
-    tr:nth-child(odd) {
-      background-color: #ffffff;
+    .dark-table tr:nth-child(odd) {
+      background-color: #1f1f1f; 
     }
     </style>
     """
 
-    # Convert the DataFrame to HTML without showing the index
-    styled_html = leaderboard_df.to_html(index=False)
-    
-    # Combine the CSS with the HTML table
+    # Convert DataFrame to HTML with a custom CSS class
+    styled_html = leaderboard_df.to_html(
+        index=False,
+        classes="dark-table"  # Use the .dark-table CSS
+    )
+
+    # Render the CSS + table
     st.markdown(table_css + styled_html, unsafe_allow_html=True)