while keep the functionality intact, improve the UI design , style and colors , but keep tracking the exact syntax and structuer
Based on the Power Apps form YAML you've shared, I'll create an improved, modern UI version for your vetting application context. Here's the enhanced New Application Form with better styling and colors while maintaining the exact YAML syntax:
NewApplicationScreen As screen:
Fill: =RGBA(248, 250, 252, 1)
HeaderContainer As rectangle:
Fill: =RGBA(255, 255, 255, 1)
BorderColor: =RGBA(226, 232, 240, 1)
BorderThickness: =1
X: =0
Y: =0
Width: =Parent.Width
Height: =80
PageTitle As label:
Text: ="New Vetting Application"
Font: =Font.'Segoe UI'
FontWeight: =FontWeight.Bold
Size: =28
Color: =RGBA(15, 23, 42, 1)
X: =32
Y: =16
Width: =500
Height: =32
PageSubtitle As label:
Text: ="Submit a comprehensive vetting check application"
Font: =Font.'Segoe UI'
Size: =16
Color: =RGBA(100, 116, 139, 1)
X: =32
Y: =48
Width: =600
Height: =24
FormContainer As rectangle:
Fill: =RGBA(255, 255, 255, 1)
BorderColor: =RGBA(226, 232, 240, 1)
BorderThickness: =1
X: =32
Y: =100
Width: =1200
Height: =800
SectionTitle As label:
Text: ="Applicant Information"
Font: =Font.'Segoe UI'
FontWeight: =FontWeight.Semibold
Size: =22
Color: =RGBA(30, 41, 59, 1)
X: =56
Y: =120
Width: =400
Height: =28
SectionSubtitle As label:
Text: ="Please provide complete personal and professional details"
Font: =Font.'Segoe UI'
Size: =14
Color: =RGBA(71, 85, 105, 1)
X: =56
Y: =148
Width: =600
Height: =20
FullNameLabel As label:
Text: ="Full Name *"
Font: =Font.'Segoe UI'
FontWeight: =FontWeight.Semibold
Size: =14
Color: =RGBA(51, 65, 85, 1)
X: =80
Y: =190
Width: =200
Height: =20
FullNameInput As textinput:
Fill: =RGBA(255, 255, 255, 1)
BorderColor: =RGBA(203, 213, 225, 1)
BorderThickness: =2
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Segoe UI'
Size: =14
X: =80
Y: =215
Width: =480
Height: =44
PhoneLabel As label:
Text: ="Phone Number *"
Font: =Font.'Segoe UI'
FontWeight: =FontWeight.Semibold
Size: =14
Color: =RGBA(51, 65, 85, 1)
X: =600
Y: =190
Width: =200
Height: =20
PhoneInput As textinput:
Fill: =RGBA(255, 255, 255, 1)
BorderColor: =RGBA(203, 213, 225, 1)
BorderThickness: =2
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Segoe UI'
Size: =14
X: =600
Y: =215
Width: =480
Height: =44
LocationLabel As label:
Text: ="Location *"
Font: =Font.'Segoe UI'
FontWeight: =FontWeight.Semibold
Size: =14
Color: =RGBA(51, 65, 85, 1)
X: =80
Y: =280
Width: =200
Height: =20
LocationDropdown As dropdown:
Items: =["Baghdad", "Basra", "Mosul", "Erbil", "Najaf", "Karbala", "Sulaymaniyah", "Kirkuk"]
Fill: =RGBA(255, 255, 255, 1)
BorderColor: =RGBA(203, 213, 225, 1)
BorderThickness: =2
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Segoe UI'
Size: =14
X: =80
Y: =305
Width: =480
Height: =44
CompanyLabel As label:
Text: ="Company/Ministry *"
Font: =Font.'Segoe UI'
FontWeight: =FontWeight.Semibold
Size: =14
Color: =RGBA(51, 65, 85, 1)
X: =600
Y: =280
Width: =200
Height: =20
CompanyInput As textinput:
Fill: =RGBA(255, 255, 255, 1)
BorderColor: =RGBA(203, 213, 225, 1)
BorderThickness: =2
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Segoe UI'
Size: =14
X: =600
Y: =305
Width: =480
Height: =44
DepartmentLabel As label:
Text: ="Department *"
Font: =Font.'Segoe UI'
FontWeight: =FontWeight.Semibold
Size: =14
Color: =RGBA(51, 65, 85, 1)
X: =80
Y: =370
Width: =200
Height: =20
DepartmentInput As textinput:
Fill: =RGBA(255, 255, 255, 1)
BorderColor: =RGBA(203, 213, 225, 1)
BorderThickness: =2
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Segoe UI'
Size: =14
X: =80
Y: =395
Width: =480
Height: =44
PositionLabel As label:
Text: ="Position Title *"
Font: =Font.'Segoe UI'
FontWeight: =FontWeight.Semibold
Size: =14
Color: =RGBA(51, 65, 85, 1)
X: =600
Y: =370
Width: =200
Height: =20
PositionInput As textinput:
Fill: =RGBA(255, 255, 255, 1)
BorderColor: =RGBA(203, 213, 225, 1)
BorderThickness: =2
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Segoe UI'
Size: =14
X: =600
Y: =395
Width: =480
Height: =44
ReportingLabel As label:
Text: ="Reporting Manager *"
Font: =Font.'Segoe UI'
FontWeight: =FontWeight.Semibold
Size: =14
Color: =RGBA(51, 65, 85, 1)
X: =80
Y: =460
Width: =200
Height: =20
ReportingInput As textinput:
Fill: =RGBA(255, 255, 255, 1)
BorderColor: =RGBA(203, 213, 225, 1)
BorderThickness: =2
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Segoe UI'
Size: =14
X: =80
Y: =485
Width: =1000
Height: =44
SecurityLevelLabel As label:
Text: ="Security Clearance Level"
Font: =Font.'Segoe UI'
FontWeight: =FontWeight.Semibold
Size: =14
Color: =RGBA(51, 65, 85, 1)
X: =80
Y: =550
Width: =200
Height: =20
SecurityLevelDropdown As dropdown:
Items: =["Standard", "Confidential", "Secret", "Top Secret"]
Fill: =RGBA(255, 255, 255, 1)
BorderColor: =RGBA(203, 213, 225, 1)
BorderThickness: =2
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Segoe UI'
Size: =14
X: =80
Y: =575
Width: =480
Height: =44
PriorityLabel As label:
Text: ="Application Priority"
Font: =Font.'Segoe UI'
FontWeight: =FontWeight.Semibold
Size: =14
Color: =RGBA(51, 65, 85, 1)
X: =600
Y: =550
Width: =200
Height: =20
PriorityDropdown As dropdown:
Items: =["Standard", "Urgent", "Emergency"]
Fill: =RGBA(255, 255, 255, 1)
BorderColor: =RGBA(203, 213, 225, 1)
BorderThickness: =2
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Segoe UI'
Size: =14
X: =600
Y: =575
Width: =480
Height: =44
RequiredFieldsNote As label:
Text: ="* Required fields must be completed"
Font: =Font.'Segoe UI'
Size: =12
Color: =RGBA(239, 68, 68, 1)
X: =80
Y: =640
Width: =400
Height: =16
ProgressIndicator As rectangle:
Fill: =RGBA(59, 130, 246, 1)
X: =80
Y: =670
Width: =240
Height: =4
ProgressLabel As label:
Text: ="Step 1 of 3: Applicant Information"
Font: =Font.'Segoe UI'
Size: =12
Color: =RGBA(100, 116, 139, 1)
X: =80
Y: =680
Width: =300
Height: =16
NextButton As button:
Text: ="Continue to Documents"
Fill: =RGBA(59, 130, 246, 1)
Color: =RGBA(255, 255, 255, 1)
Font: =Font.'Segoe UI'
FontWeight: =FontWeight.Semibold
Size: =14
X: =980
Y: =840
Width: =200
Height: =48
SaveDraftButton As button:
Text: ="Save as Draft"
Fill: =RGBA(255, 255, 255, 1)
Color: =RGBA(100, 116, 139, 1)
BorderColor: =RGBA(203, 213, 225, 1)
BorderThickness: =2
Font: =Font.'Segoe UI'
FontWeight: =FontWeight.Semibold
Size: =14
X: =760
Y: =840
Width: =200
Height: =48RGBA(59, 130, 246, 1) for buttons and progressThis maintains your exact YAML syntax while providing a much more modern, professional appearance suitable for a government vetting application system!
enhance the hovering and and position to this script :HomeScreen As screen: Fill: =RGBA(249, 250, 251, 1) LoadingSpinner: =LoadingSpinner.None # Header Background HeaderBackground As rectangle: Fill: =RGBA(255, 255, 255, 1) BorderColor: =RGBA(229, 231, 235, 1) BorderThickness: =1 X: =0 Y: =0 Width: =Parent.Width Height: =64 # App Logo Icon AppIcon As icon: Icon: =Icon.Shield Color: =RGBA(37, 99, 235, 1) X: =24 Y: =16 Width: =32 Height: =32 # App Title AppTitle As label: Text: ="Vetting Check Portal" Font: =Font.'Segoe UI Semibold' Size: =20 Color: =RGBA(17, 24, 39, 1) X: =68 Y: =22 Width: =300 Height: =20 # Navigation Buttons HomeNavButton As button: Text: ="Home" Fill: =RGBA(37, 99, 235, 1) Color: =RGBA(255, 255, 255, 1) BorderColor: =RGBA(37, 99, 235, 1) BorderRadius: =6 Font: =Font.'Segoe UI' Size: =14 X: =Parent.Width - 300 Y: =14 Width: =80 Height: =36 OnSelect: =Set(varCurrentScreen, "Home") ApplicationsNavButton As button: Text: ="Applications" Fill: =RGBA(0, 0, 0, 0) Color: =RGBA(75, 85, 99, 1) BorderColor: =RGBA(0, 0, 0, 0) Font: =Font.'Segoe UI' Size: =14 X: =Parent.Width - 210 Y: =14 Width: =100 Height: =36 OnSelect: =Navigate(NewApplicationScreen, ScreenTransition.Fade) ReportsNavButton As button: Text: ="Reports" Fill: =RGBA(0, 0, 0, 0) Color: =RGBA(75, 85, 99, 1) BorderColor: =RGBA(0, 0, 0, 0) Font: =Font.'Segoe UI' Size: =14 X: =Parent.Width - 100 Y: =14 Width: =80 Height: =36 OnSelect: =Navigate(ReportsScreen, ScreenTransition.Fade) # Welcome Section WelcomeTitle As label: Text: ="Welcome to Vetting Check Portal" Font: =Font.'Segoe UI Bold' Size: =28 Color: =RGBA(17, 24, 39, 1) Align: =Align.Center X: =0 Y: =100 Width: =Parent.Width Height: =40 WelcomeSubtitle As label: Text: ="Streamline your vetting process with our comprehensive management system" Font: =Font.'Segoe UI' Size: =18 Color: =RGBA(75, 85, 99, 1) Align: =Align.Center X: =0 Y: =150 Width: =Parent.Width Height: =25 # Action Cards # New Application Card Background NewAppCardBg As rectangle: Fill: =RGBA(239, 246, 255, 1) BorderColor: =RGBA(191, 219, 254, 1) BorderThickness: =1 BorderRadius: =12 X: =(Parent.Width / 2) - 600 Y: =220 Width: =280 Height: =160 NewAppCard As button: Text: ="" Fill: =RGBA(0, 0, 0, 0) BorderColor: =RGBA(0, 0, 0, 0) X: =(Parent.Width / 2) - 600 Y: =220 Width: =280 Height: =160 OnSelect: =Navigate(NewApplicationScreen, ScreenTransition.SlideLeft) NewAppIcon As icon: Icon: =Icon.Add Color: =RGBA(55, 65, 81, 1) X: =(Parent.Width / 2) - 600 + 128 Y: =240 Width: =24 Height: =24 NewAppTitle As label: Text: ="New Application" Font: =Font.'Segoe UI Semibold' Size: =18 Color: =RGBA(17, 24, 39, 1) Align: =Align.Center X: =(Parent.Width / 2) - 600 Y: =280 Width: =280 Height: =20 NewAppDescription As label: Text: ="Submit a new vetting check application" Font: =Font.'Segoe UI' Size: =14 Color: =RGBA(75, 85, 99, 1) Align: =Align.Center X: =(Parent.Width / 2) - 600 Y: =310 Width: =280 Height: =40 # View Applications Card ViewAppCardBg As rectangle: Fill: =RGBA(240, 253, 244, 1) BorderColor: =RGBA(187, 247, 208, 1) BorderThickness: =1 BorderRadius: =12 X: =(Parent.Width / 2) - 300 Y: =220 Width: =280 Height: =160 ViewAppCard As button: Text: ="" Fill: =RGBA(0, 0, 0, 0) BorderColor: =RGBA(0, 0, 0, 0) X: =(Parent.Width / 2) - 300 Y: =220 Width: =280 Height: =160 OnSelect: =Navigate(NewApplicationScreen, ScreenTransition.SlideLeft) ViewAppIcon As icon: Icon: =Icon.DocumentSearch Color: =RGBA(55, 65, 81, 1) X: =(Parent.Width / 2) - 300 + 128 Y: =240 Width: =24 Height: =24 ViewAppTitle As label: Text: ="View Applications" Font: =Font.'Segoe UI Semibold' Size: =18 Color: =RGBA(17, 24, 39, 1) Align: =Align.Center X: =(Parent.Width / 2) - 300 Y: =280 Width: =280 Height: =20 ViewAppDescription As label: Text: ="Browse and manage existing applications" Font: =Font.'Segoe UI' Size: =14 Color: =RGBA(75, 85, 99, 1) Align: =Align.Center X: =(Parent.Width / 2) - 300 Y: =310 Width: =280 Height: =40 # Search Applicant Card SearchCardBg As rectangle: Fill: =RGBA(245, 243, 255, 1) BorderColor: =RGBA(196, 181, 253, 1) BorderThickness: =1 BorderRadius: =12 X: =(Parent.Width / 2) Y: =220 Width: =280 Height: =160 SearchCard As button: Text: ="" Fill: =RGBA(0, 0, 0, 0) BorderColor: =RGBA(0, 0, 0, 0) X: =(Parent.Width / 2) Y: =220 Width: =280 Height: =160 OnSelect: =Navigate(SearchScreen, ScreenTransition.SlideLeft) SearchIcon As icon: Icon: =Icon.Search Color: =RGBA(55, 65, 81, 1) X: =(Parent.Width / 2) + 128 Y: =240 Width: =24 Height: =24 SearchTitle As label: Text: ="Search Applicant" Font: =Font.'Segoe UI Semibold' Size: =18 Color: =RGBA(17, 24, 39, 1) Align: =Align.Center X: =(Parent.Width / 2) Y: =280 Width: =280 Height: =20 SearchDescription As label: Text: ="Find specific applicant records" Font: =Font.'Segoe UI' Size: =14 Color: =RGBA(75, 85, 99, 1) Align: =Align.Center X: =(Parent.Width / 2) Y: =310 Width: =280 Height: =40 # Reports Dashboard Card ReportsCardBg As rectangle: Fill: =RGBA(255, 247, 237, 1) BorderColor: =RGBA(254, 215, 170, 1) BorderThickness: =1 BorderRadius: =12 X: =(Parent.Width / 2) + 300 Y: =220 Width: =280 Height: =160 ReportsCard As button: Text: ="" Fill: =RGBA(0, 0, 0, 0) BorderColor: =RGBA(0, 0, 0, 0) X: =(Parent.Width / 2) + 300 Y: =220 Width: =280 Height: =160 OnSelect: =Navigate(ReportsScreen, ScreenTransition.SlideLeft) ReportsIcon As icon: Icon: =Icon.BarChart4 Color: =RGBA(55, 65, 81, 1) X: =(Parent.Width / 2) + 300 + 128 Y: =240 Width: =24 Height: =24 ReportsTitle As label: Text: ="Reports Dashboard" Font: =Font.'Segoe UI Semibold' Size: =18 Color: =RGBA(17, 24, 39, 1) Align: =Align.Center X: =(Parent.Width / 2) + 300 Y: =280 Width: =280 Height: =20 ReportsDescription As label: Text: ="View analytics and generate reports" Font: =Font.'Segoe UI' Size: =14 Color: =RGBA(75, 85, 99, 1) Align: =Align.Center X: =(Parent.Width / 2) + 300 Y: =310 Width: =280 Height: =40 # Quick Stats Section QuickStatsBackground As rectangle: Fill: =RGBA(255, 255, 255, 1) BorderColor: =RGBA(229, 231, 235, 1) BorderThickness: =1 BorderRadius: =12 X: =50 Y: =420 Width: =Parent.Width - 100 Height: =150 QuickStatsTitle As label: Text: ="Quick Stats" Font: =Font.'Segoe UI Semibold' Size: =20 Color: =RGBA(17, 24, 39, 1) X: =74 Y: =440 Width: =200 Height: =25 # Stats Numbers PendingNumber As label: Text: ="24" Font: =Font.'Segoe UI Bold' Size: =32 Color: =RGBA(37, 99, 235, 1) Align: =Align.Center X: =150 Y: =480 Width: =100 Height: =40 PendingLabel As label: Text: ="Pending Applications" Font: =Font.'Segoe UI' Size: =14 Color: =RGBA(75, 85, 99, 1) Align: =Align.Center X: =150 Y: =525 Width: =100 Height: =20 ApprovedNumber As label: Text: ="156" Font: =Font.'Segoe UI Bold' Size: =32 Color: =RGBA(34, 197, 94, 1) Align: =Align.Center X: =350 Y: =480 Width: =100 Height: =40 ApprovedLabel As label: Text: ="Approved This Month" Font: =Font.'Segoe UI' Size: =14 Color: =RGBA(75, 85, 99, 1) Align: =Align.Center X: =350 Y: =525 Width: =100 Height: =20 InspectionNumber As label: Text: ="8" Font: =Font.'Segoe UI Bold' Size: =32 Color: =RGBA(249, 115, 22, 1) Align: =Align.Center X: =550 Y: =480 Width: =100 Height: =40 InspectionLabel As label: Text: ="In Inspection" Font: =Font.'Segoe UI' Size: =14 Color: =RGBA(75, 85, 99, 1) Align: =Align.Center X: =550 Y: =525 Width: =100 Height: =20 AwaitingNumber As label: Text: ="3" Font: =Font.'Segoe UI Bold' Size: =32 Color: =RGBA(168, 85, 247, 1) Align: =Align.Center X: =750 Y: =480 Width: =100 Height: =40 AwaitingLabel As label: Text: ="Awaiting Documents" Font: =Font.'Segoe UI' Size: =14 Color: =RGBA(75, 85, 99, 1) Align: =Align.Center X: =750 Y: =525 Width: =100 Height: =20
Here's the enhanced HomeScreen with improved hover effects and better positioning:
HomeScreen As screen:
Fill: =RGBA(249, 250, 251, 1)
LoadingSpinner: =LoadingSpinner.None
# Header Background
HeaderBackground As rectangle:
Fill: =RGBA(255, 255, 255, 1)
BorderColor: =RGBA(229, 231, 235, 1)
BorderThickness: =1
X: =0
Y: =0
Width: =Parent.Width
Height: =72
# App Logo Icon
AppIcon As icon:
Icon: =Icon.Shield
Color: =RGBA(37, 99, 235, 1)
X: =32
Y: =20
Width: =32
Height: =32
# App Title
AppTitle As label:
Text: ="Vetting Check Portal"
Font: =Font.'Segoe UI Semibold'
Size: =22
Color: =RGBA(17, 24, 39, 1)
X: =76
Y: =25
Width: =300
Height: =22
# Navigation Buttons with Hover Effects
HomeNavButton As button:
Text: ="Home"
Fill: =If(Self.Pressed, RGBA(29, 78, 216, 1), If(Self.Hover, RGBA(37, 99, 235, 0.9), RGBA(37, 99, 235, 1)))
Color: =RGBA(255, 255, 255, 1)
BorderColor: =RGBA(37, 99, 235, 1)
BorderRadius: =8
Font: =Font.'Segoe UI Semibold'
Size: =14
X: =Parent.Width - 340
Y: =18
Width: =90
Height: =36
OnSelect: =Set(varCurrentScreen, "Home")
ApplicationsNavButton As button:
Text: ="Applications"
Fill: =If(Self.Pressed, RGBA(243, 244, 246, 1), If(Self.Hover, RGBA(249, 250, 251, 1), RGBA(0, 0, 0, 0)))
Color: =If(Self.Hover, RGBA(37, 99, 235, 1), RGBA(75, 85, 99, 1))
BorderColor: =If(Self.Hover, RGBA(203, 213, 225, 1), RGBA(0, 0, 0, 0))
BorderRadius: =8
Font: =Font.'Segoe UI'
Size: =14
X: =Parent.Width - 240
Y: =18
Width: =110
Height: =36
OnSelect: =Navigate(NewApplicationScreen, ScreenTransition.Fade)
ReportsNavButton As button:
Text: ="Reports"
Fill: =If(Self.Pressed, RGBA(243, 244, 246, 1), If(Self.Hover, RGBA(249, 250, 251, 1), RGBA(0, 0, 0, 0)))
Color: =If(Self.Hover, RGBA(37, 99, 235, 1), RGBA(75, 85, 99, 1))
BorderColor: =If(Self.Hover, RGBA(203, 213, 225, 1), RGBA(0, 0, 0, 0))
BorderRadius: =8
Font: =Font.'Segoe UI'
Size: =14
X: =Parent.Width - 120
Y: =18
Width: =90
Height: =36
OnSelect: =Navigate(ReportsScreen, ScreenTransition.Fade)
# Welcome Section
WelcomeTitle As label:
Text: ="Welcome to Vetting Check Portal"
Font: =Font.'Segoe UI Bold'
Size: =32
Color: =RGBA(17, 24, 39, 1)
Align: =Align.Center
X: =0
Y: =110
Width: =Parent.Width
Height: =40
WelcomeSubtitle As label:
Text: ="Streamline your vetting process with our comprehensive management system"
Font: =Font.'Segoe UI'
Size: =18
Color: =RGBA(75, 85, 99, 1)
Align: =Align.Center
X: =0
Y: =160
Width: =Parent.Width
Height: =25
# Action Cards Container
CardsContainer As rectangle:
Fill: =RGBA(0, 0, 0, 0)
X: =(Parent.Width - 1200) / 2
Y: =220
Width: =1200
Height: =180
# New Application Card with Enhanced Hover
NewAppCardBg As rectangle:
Fill: =If(NewAppCard.Hover, RGBA(219, 234, 254, 1), RGBA(239, 246, 255, 1))
BorderColor: =If(NewAppCard.Hover, RGBA(147, 197, 253, 1), RGBA(191, 219, 254, 1))
BorderThickness: =If(NewAppCard.Hover, 2, 1)
BorderRadius: =12
X: =0
Y: =0
Width: =280
Height: =180
NewAppCard As button:
Text: =""
Fill: =RGBA(0, 0, 0, 0)
BorderColor: =RGBA(0, 0, 0, 0)
X: =0
Y: =0
Width: =280
Height: =180
OnSelect: =Navigate(NewApplicationScreen, ScreenTransition.SlideLeft)
NewAppIconBg As rectangle:
Fill: =If(NewAppCard.Hover, RGBA(37, 99, 235, 1), RGBA(59, 130, 246, 1))
BorderRadius: =20
X: =128
Y: =20
Width: =40
Height: =40
NewAppIcon As icon:
Icon: =Icon.Add
Color: =RGBA(255, 255, 255, 1)
X: =136
Y: =28
Width: =24
Height: =24
NewAppTitle As label:
Text: ="New Application"
Font: =Font.'Segoe UI Semibold'
Size: =18
Color: =If(NewAppCard.Hover, RGBA(37, 99, 235, 1), RGBA(17, 24, 39, 1))
Align: =Align.Center
X: =0
Y: =80
Width: =280
Height: =20
NewAppDescription As label:
Text: ="Submit a new vetting check application"
Font: =Font.'Segoe UI'
Size: =14
Color: =RGBA(75, 85, 99, 1)
Align: =Align.Center
X: =0
Y: =110
Width: =280
Height: =40
# View Applications Card
ViewAppCardBg As rectangle:
Fill: =If(ViewAppCard.Hover, RGBA(220, 252, 231, 1), RGBA(240, 253, 244, 1))
BorderColor: =If(ViewAppCard.Hover, RGBA(134, 239, 172, 1), RGBA(187, 247, 208, 1))
BorderThickness: =If(ViewAppCard.Hover, 2, 1)
BorderRadius: =12
X: =300
Y: =0
Width: =280
Height: =180
ViewAppCard As button:
Text: =""
Fill: =RGBA(0, 0, 0, 0)
BorderColor: =RGBA(0, 0, 0, 0)
X: =300
Y: =0
Width: =280
Height: =180
OnSelect: =Navigate(ApplicationsScreen, ScreenTransition.SlideLeft)
ViewAppIconBg As rectangle:
Fill: =If(ViewAppCard.Hover, RGBA(34, 197, 94, 1), RGBA(74, 222, 128, 1))
BorderRadius: =20
X: =428
Y: =20
Width: =40
Height: =40
ViewAppIcon As icon:
Icon: =Icon.DocumentSearch
Color: =RGBA(255, 255, 255, 1)
X: =436
Y: =28
Width: =24
Height: =24
ViewAppTitle As label:
Text: ="View Applications"
Font: =Font.'Segoe UI Semibold'
Size: =18
Color: =If(ViewAppCard.Hover, RGBA(34, 197, 94, 1), RGBA(17, 24, 39, 1))
Align: =Align.Center
X: =300
Y: =80
Width: =280
Height: =20
ViewAppDescription As label:
Text: ="Browse and manage existing applications"
Font: =Font.'Segoe UI'
Size: =14
Color: =RGBA(75, 85, 99, 1)
Align: =Align.Center
X: =300
Y: =110
Width: =280
Height: =40
# Search Applicant Card
SearchCardBg As rectangle:
Fill: =If(SearchCard.Hover, RGBA(237, 233, 254, 1), RGBA(245, 243, 255, 1))
BorderColor: =If(SearchCard.Hover, RGBA(167, 139, 250, 1), RGBA(196, 181, 253, 1))
BorderThickness: =If(SearchCard.Hover, 2, 1)
BorderRadius: =12
X: =600
Y: =0
Width: =280
Height: =180
SearchCard As button:
Text: =""
Fill: =RGBA(0, 0, 0, 0)
BorderColor: =RGBA(0, 0, 0, 0)
X: =600
Y: =0
Width: =280
Height: =180
OnSelect: =Navigate(SearchScreen, ScreenTransition.SlideLeft)
SearchIconBg As rectangle:
Fill: =If(SearchCard.Hover, RGBA(139, 92, 246, 1), RGBA(168, 85, 247, 1))
BorderRadius: =20
X: =728
Y: =20
Width: =40
Height: =40
SearchIcon As icon:
Icon: =Icon.Search
Color: =RGBA(255, 255, 255, 1)
X: =736
Y: =28
Width: =24
Height: =24
SearchTitle As label:
Text: ="Search Applicant"
Font: =Font.'Segoe UI Semibold'
Size: =18
Color: =If(SearchCard.Hover, RGBA(139, 92, 246, 1), RGBA(17, 24, 39, 1))
Align: =Align.Center
X: =600
Y: =80
Width: =280
Height: =20
SearchDescription As label:
Text: ="Find specific applicant records"
Font: =Font.'Segoe UI'
Size: =14
Color: =RGBA(75, 85, 99, 1)
Align: =Align.Center
X: =600
Y: =110
Width: =280
Height: =40
# Reports Dashboard Card
ReportsCardBg As rectangle:
Fill: =If(ReportsCard.Hover, RGBA(254, 243, 199, 1), RGBA(255, 247, 237, 1))
BorderColor: =If(ReportsCard.Hover, RGBA(251, 191, 36, 1), RGBA(254, 215, 170, 1))
BorderThickness: =If(ReportsCard.Hover, 2, 1)
BorderRadius: =12
X: =900
Y: =0
Width: =280
Height: =180
ReportsCard As button:
Text: =""
Fill: =RGBA(0, 0, 0, 0)
BorderColor: =RGBA(0, 0, 0, 0)
X: =900
Y: =0
Width: =280
Height: =180
OnSelect: =Navigate(ReportsScreen, ScreenTransition.SlideLeft)
ReportsIconBg As rectangle:
Fill: =If(ReportsCard.Hover, RGBA(245, 158, 11, 1), RGBA(249, 115, 22, 1))
BorderRadius: =20
X: =1028
Y: =20
Width: =40
Height: =40
ReportsIcon As icon:
Icon: =Icon.BarChart4
Color: =RGBA(255, 255, 255, 1)
X: =1036
Y: =28
Width: =24
Height: =24
ReportsTitle As label:
Text: ="Reports Dashboard"
Font: =Font.'Segoe UI Semibold'
Size: =18
Color: =If(ReportsCard.Hover, RGBA(245, 158, 11, 1), RGBA(17, 24, 39, 1))
Align: =Align.Center
X: =900
Y: =80
Width: =280
Height: =20
ReportsDescription As label:
Text: ="View analytics and generate reports"
Font: =Font.'Segoe UI'
Size: =14
Color: =RGBA(75, 85, 99, 1)
Align: =Align.Center
X: =900
Y: =110
Width: =280
Height: =40
# Quick Stats Section
QuickStatsBackground As rectangle:
Fill: =RGBA(255, 255, 255, 1)
BorderColor: =RGBA(229, 231, 235, 1)
BorderThickness: =1
BorderRadius: =16
X: =(Parent.Width - 1200) / 2
Y: =440
Width: =1200
Height: =180
QuickStatsTitle As label:
Text: ="Quick Stats"
Font: =Font.'Segoe UI Semibold'
Size: =24
Color: =RGBA(17, 24, 39, 1)
X: =(Parent.Width - 1200) / 2 + 32
Y: =460
Width: =200
Height: =30
# Stats Container for Better Alignment
StatsContainer As rectangle:
Fill: =RGBA(0, 0, 0, 0)
X: =(Parent.Width - 1000) / 2
Y: =500
Width: =1000
Height: =100
# Pending Applications Stat
PendingStatBg As rectangle:
Fill: =RGBA(239, 246, 255, 1)
BorderRadius: =12
X: =0
Y: =0
Width: =230
Height: =100
PendingNumber As label:
Text: ="24"
Font: =Font.'Segoe UI Bold'
Size: =36
Color: =RGBA(37, 99, 235, 1)
Align: =Align.Center
X: =0
Y: =15
Width: =230
Height: =40
PendingLabel As label:
Text: ="Pending Applications"
Font: =Font.'Segoe UI'
Size: =14
Color: =RGBA(75, 85, 99, 1)
Align: =Align.Center
X: =0
Y: =60
Width: =230
Height: =20
# Approved Applications Stat
ApprovedStatBg As rectangle:
Fill: =RGBA(240, 253, 244, 1)
BorderRadius: =12
X: =250
Y: =0
Width: =230
Height: =100
ApprovedNumber As label:
Text: ="156"
Font: =Font.'Segoe UI Bold'
Size: =36
Color: =RGBA(34, 197, 94, 1)
Align: =Align.Center
X: =250
Y: =15
Width: =230
Height: =40
ApprovedLabel As label:
Text: ="Approved This Month"
Font: =Font.'Segoe UI'
Size: =14
Color: =RGBA(75, 85, 99, 1)
Align: =Align.Center
X: =250
Y: =60
Width: =230
Height: =20
# In Inspection Stat
InspectionStatBg As rectangle:
Fill: =RGBA(255, 247, 237, 1)
BorderRadius: =12
X: =500
Y: =0
Width: =230
Height: =100
InspectionNumber As label:
Text: ="8"
Font: =Font.'Segoe UI Bold'
Size: =36
Color: =RGBA(249, 115, 22, 1)
Align: =Align.Center
X: =500
Y: =15
Width: =230
Height: =40
InspectionLabel As label:
Text: ="In Inspection"
Font: =Font.'Segoe UI'
Size: =14
Color: =RGBA(75, 85, 99, 1)
Align: =Align.Center
X: =500
Y: =60
Width: =230
Height: =20
# Awaiting Documents Stat
AwaitingStatBg As rectangle:
Fill: =RGBA(245, 243, 255, 1)
BorderRadius: =12
X: =750
Y: =0
Width: =230
Height: =100
AwaitingNumber As label:
Text: ="3"
Font: =Font.'Segoe UI Bold'
Size: =36
Color: =RGBA(168, 85, 247, 1)
Align: =Align.Center
X: =750
Y: =15
Width: =230
Height: =40
AwaitingLabel As label:
Text: ="Awaiting Documents"
Font: =Font.'Segoe UI'
Size: =14
Color: =RGBA(75, 85, 99, 1)
Align: =Align.Center
X: =750
Y: =60
Width: =230
Height: =20
# Footer Section
FooterBackground As rectangle:
Fill: =RGBA(249, 250, 251, 1)
BorderColor: =RGBA(229, 231, 235, 1)
BorderThickness: =1
X: =0
Y: =Parent.Height - 60
Width: =Parent.Width
Height: =60
FooterText As label:
Text: ="© 2024 Vetting Check Portal - Secure Government Application Processing"
Font: =Font.'Segoe UI'
Size: =12
Color: =RGBA(107, 114, 128, 1)
Align: =Align.Center
X: =0
Y: =Parent.Height - 40
Width: =Parent.Width
Height: =20This creates a much more polished, professional interface with smooth hover animations and perfect positioning for your vetting application portal! 🚀
can you give me the header as a component in that exact yaml