Code Sketch

cleari()
setBackground(black)

// 1. Header Title
val title = Picture.text("=== My Kojo Instagram ===", 20).withPenColor(cyan)
title.draw()
title.setPosition(0, 220)

// 2. Mockup: Username and Password Fields
val idBox = Picture.text("[ ID: Unowk_Official ]", 14).withPenColor(white)
idBox.draw()
idBox.setPosition(-150, 160)

val passBox = Picture.text("[ Password: ******** ]", 14).withPenColor(white)
passBox.draw()
passBox.setPosition(-150, 130)

val status = Picture.text(">>> Login Successful! Loading Profile...", 12).withPenColor(green)
status.draw()
status.setPosition(-150, 90)

// 3. Drawing the Profile Circle (Avatar)
val profileCircle = Picture.circle(45).withPenColor(magenta).withFillColor(darkGray)
profileCircle.draw()
profileCircle.setPosition(0, 10)

val profileName = Picture.text("Unowk", 14).withPenColor(yellow)
profileName.draw()
profileName.setPosition(-20, -50)

// 4. Interactive Caption / Note Box appearing beside the circle
val noteBox = Picture.rectangle(180, 90).withPenColor(white).withFillColor(black)
noteBox.draw()
noteBox.setPosition(130, -10)

val noteTitle = Picture.text("Caption:", 12).withPenColor(yellow)
noteTitle.draw()
noteTitle.setPosition(50, 20)

val noteLine1 = Picture.text("Hello World!", 11).withPenColor(white)
noteLine1.draw()
noteLine1.setPosition(50, 0)

val noteLine2 = Picture.text("Coding in Scala is awesome.", 11).withPenColor(white)
noteLine2.draw()
noteLine2.setPosition(50, -20)