refactor: refactor adventure col and add achievements component

app.py

@@ -58,21 +58,25 @@ with gr.Blocks(theme=seafoam, css=get_content("css/style.css")) as demo:
             )
 
         with gr.Column(scale=1):
-            description = gr.Markdown("# 冒險階段", elem_id="adventure_description")
-            progress_bar_html = (
-                "<div style='max-width:100%; max-height:360px; overflow:auto'>"
-                + get_content("htmls/progress_bar.html")
+            with gr.Column(elem_id="adventure_container"):
+                adventure_description = gr.Markdown("# 冒險階段", elem_id="adventure_description")
+                adverture = gr.Slider(
+                    value=0,
+                    show_label=False,
+                    interactive=False,
+                    elem_id="adventure_slider",
+                    info="",
+                )
+            achievements_description = gr.Markdown(
+                "# 達成成就", elem_id="achievements_description"
             )
-            progress_bar = gr.HTML(
-                progress_bar_html,
-            )
-
-            stage_desc_html = (
-                "<div style='max-width:100%; max-height:360px; overflow:auto'>"
-                + get_content("htmls/stage_desc.html")
-            )
-            stage_desc = gr.HTML(
-                stage_desc_html,
+            achievements = gr.HighlightedText(
+                value=[],
+                elem_classes="achievements",
+                color_map={
+                    "完成": "green",
+                    "未完成": "red",
+                },
             )
 
     with gr.Row():