WIREFRAMES.md

Wireframes

Top Bar

• Purpose: Navigate between different sections of the app.
• Components:
  • Application logo
  • Navigation links (Home, Profile, etc.)
  • Sign-in/Sign-out button

Front Page

• Purpose: Provide a welcome message and general introduction.
• Components:
  • Welcome text
  • Brief description of the app
  • Navigation options to other sections

Participant Management Form

• Purpose: Add and edit participants for initiative tracking.
• Components:
  • Input fields for participant name, DEX modifier, and HP
  • Buttons for adding, editing, or removing participants

Initiative Tracking Page

• Purpose: Display and manage the initiative order.
• Components:
  • Sorted list of participants by initiative score
  • Highlight active participant
  • "Next Turn" button
  • Editable HP fields with color-coded statuses (green, yellow, red)

Profile Management Page

• Purpose: Manage user profile settings.
• Components:
  • Input fields for username and password
  • Save button
  • Optional profile picture upload