== Online Demonstration Playground User Interface Design

This section will delve into the detailed user interface designs for the online
demonstration playground, showcasing the visual elements, layout, and
interaction patterns that will guide user's interactions with the system.

#figure(
  rect(image("/diagrams/generated/design/dsn-home.svg", width: 80%)),
  caption: [Home Page]
)

#figure(
  rect(image("/diagrams/generated/design/dsn-popup.svg", width: 80%)),
  caption: [Pop-up when user click on Documentation or Security]
)
