gif

app.py

@@ -5,6 +5,60 @@ import glob
 import os
 import random
 
+def sidebar_toc():
+    toc_html = """
+    <style>
+    .toc-container {
+        padding: 10px;
+        background-color: #1f1f1f;
+        border-radius: 8px;
+        margin: 10px 0;
+    }
+    .toc-title {
+        color: #ffffff;
+        font-size: 18px;
+        font-weight: bold;
+        margin-bottom: 10px;
+    }
+    .toc-list {
+        list-style: none;
+        padding: 0;
+    }
+    .toc-item {
+        margin: 8px 0;
+    }
+    .toc-item a {
+        text-decoration: none;
+        color: #cccccc;
+        font-size: 14px;
+        transition: color 0.2s ease, padding-left 0.2s ease;
+    }
+    .toc-item a:hover {
+        color: #ffffff;
+        padding-left: 5px;
+    }
+    </style>
+    <div class="toc-container">
+        <div class="toc-title">Table of Contents</div>
+        <ul class="toc-list">
+            <li class="toc-item"><a href="#welcome" onclick="scrollToSection('welcome')">Welcome</a></li>
+            <li class="toc-item"><a href="#motivation" onclick="scrollToSection('motivation')">Motivation</a></li>
+            <li class="toc-item"><a href="#the-challenges" onclick="scrollToSection('the-challenges')">Challenges</a></li>
+            <li class="toc-item"><a href="#datasets" onclick="scrollToSection('datasets')">Datasets</a></li>
+            <li class="toc-item"><a href="#scoring" onclick="scrollToSection('scoring')">Scoring</a></li>
+            <li class="toc-item"><a href="#rules" onclick="scrollToSection('rules')">Rules</a></li>
+            <li class="toc-item"><a href="#faqs" onclick="scrollToSection('faqs')">FAQs</a></li>
+            <li class="toc-item"><a href="#data--research-requests" onclick="scrollToSection('data--research-requests')">Data Requests</a></li>
+            <li class="toc-item"><a href="#additional-resources" onclick="scrollToSection('additional-resources')">Resources</a></li>
+        </ul>
+    </div>
+    <script>
+    function scrollToSection(sectionId) {
+        document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
+    }
+    </script>
+    """
+    st.sidebar.markdown(toc_html, unsafe_allow_html=True)
 
 def resources_section():
     st.markdown("## Additional Resources")
@@ -146,7 +200,7 @@ def scoring_section():
 
 def main():
     st.set_page_config(page_title="1X World Model Challenge")
-    
+    sidebar_toc()
     st.title("1X World Model Challenge")
     st.markdown("## Welcome")
     st.write(