pages/how_to_play.py

import gradio as gr

from support.game_settings import EXAMPLE_GAME_RULES_HTML, EXAMPLE_GAME_BOARD_HTML


with gr.Blocks(fill_width=True) as demo:
    # Rules section with HTML
    with gr.Row(elem_id="row_description", equal_height=True):
        with gr.Column():
            gr.HTML(EXAMPLE_GAME_BOARD_HTML, elem_id="game_board_description")
            gr.Image(
                "assets/example.png",
                label="Game Board (Boss's View)",
                show_label=True,
                height=450,
                elem_id="example_game_board_img",
            ),
            gr.Image(
                "assets/no-color-board.png",
                label="“Captains' and Players' View",
                show_label=True,
                height=450,
                elem_id="example_game_board_img",
            )
        with gr.Column():
            gr.HTML(EXAMPLE_GAME_RULES_HTML, elem_id="rules_content")

if __name__ == "__main__":
    demo.launch()