Screens:
Screen_Main:
Properties:
BackgroundImage: |-
="data:image/svg+xml;utf8, "&EncodeUrl("<svg width='100%' height='100%' id='svg' viewBox='0 0 1440 690' xmlns='http://www.w3.org/2000/svg' class='transition duration-300 ease-in-out delay-150'><style>
.path-0{
animation:pathAnim-0 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-0{
0%{
d: path('M 0,700 L 0,175 C 48.87323943661973,193.04328409481278 97.74647887323945,211.08656818962555 174,213 C 250.25352112676055,214.91343181037445 353.88732394366195,200.69701133631057 440,207 C 526.112676056338,213.30298866368943 594.7042253521128,240.12538646513224 642,280 C 689.2957746478872,319.87461353486776 715.2957746478871,372.8014428031604 789,392 C 862.7042253521129,411.1985571968396 984.1126760563382,396.668842322226 1058,439 C 1131.8873239436618,481.331157677774 1158.2535211267605,580.5231879079354 1214,621 C 1269.7464788732395,661.4768120920646 1354.8732394366198,643.2384060460323 1440,625 L 1440,700 L 0,700 Z');
}
25%{
d: path('M 0,700 L 0,175 C 44.9110271384404,202.4874613534868 89.8220542768808,229.9749227069736 168,261 C 246.1779457231192,292.0250772930264 357.6228100309172,326.5877705255926 441,331 C 524.3771899690828,335.4122294744074 579.6867055994503,309.6739951906561 642,307 C 704.3132944005497,304.3260048093439 773.6303675712815,324.7162487117829 839,373 C 904.3696324287185,421.2837512882171 965.7918241154241,497.4610099622123 1040,547 C 1114.208175884576,596.5389900377877 1201.2023359670218,619.4397114393679 1270,628 C 1338.7976640329782,636.5602885606321 1389.398832016489,630.7801442803161 1440,625 L 1440,700 L 0,700 Z');
}
50%{
d: path('M 0,700 L 0,175 C 87.7677773960838,123.13053933356235 175.5355547921676,71.2610786671247 230,91 C 284.4644452078324,110.7389213328753 305.62555822741336,202.08622466506353 372,233 C 438.37444177258664,263.9137753349365 549.9622122981792,234.3940226726212 630,258 C 710.0377877018208,281.6059773273788 758.5255925798695,358.337684644452 827,390 C 895.4744074201305,421.662315355548 983.9354173823426,408.25523874957065 1051,428 C 1118.0645826176574,447.74476125042935 1163.7327378907592,500.6413603572655 1225,539 C 1286.2672621092408,577.3586396427345 1363.1336310546203,601.1793198213672 1440,625 L 1440,700 L 0,700 Z');
}
75%{
d: path('M 0,700 L 0,175 C 62.89247681209204,171.65956715905187 125.78495362418408,168.31913431810375 184,189 C 242.21504637581592,209.68086568189625 295.7526623153557,254.38302988663685 381,288 C 466.2473376846443,321.61697011336315 583.2043971143936,344.14874613534874 651,355 C 718.7956028856064,365.85125386465126 737.4297492270697,365.02198557196846 786,403 C 834.5702507729303,440.97801442803154 913.0766059773275,517.7633115767776 999,559 C 1084.9233940226725,600.2366884232224 1178.2638268636206,605.9247681209206 1253,611 C 1327.7361731363794,616.0752318790794 1383.8680865681897,620.5376159395397 1440,625 L 1440,700 L 0,700 Z');
}
100%{
d: path('M 0,700 L 0,175 C 48.87323943661973,193.04328409481278 97.74647887323945,211.08656818962555 174,213 C 250.25352112676055,214.91343181037445 353.88732394366195,200.69701133631057 440,207 C 526.112676056338,213.30298866368943 594.7042253521128,240.12538646513224 642,280 C 689.2957746478872,319.87461353486776 715.2957746478871,372.8014428031604 789,392 C 862.7042253521129,411.1985571968396 984.1126760563382,396.668842322226 1058,439 C 1131.8873239436618,481.331157677774 1158.2535211267605,580.5231879079354 1214,621 C 1269.7464788732395,661.4768120920646 1354.8732394366198,643.2384060460323 1440,625 L 1440,700 L 0,700 Z');
}
}</style><defs><linearGradient id='gradient' x1='0%' y1='50%' x2='100%' y2='50%'><stop offset='5%' stop-color='#ff1b6b'></stop><stop offset='95%' stop-color='#45caff'></stop></linearGradient></defs><path d='M 0,700 L 0,175 C 48.87323943661973,193.04328409481278 97.74647887323945,211.08656818962555 174,213 C 250.25352112676055,214.91343181037445 353.88732394366195,200.69701133631057 440,207 C 526.112676056338,213.30298866368943 594.7042253521128,240.12538646513224 642,280 C 689.2957746478872,319.87461353486776 715.2957746478871,372.8014428031604 789,392 C 862.7042253521129,411.1985571968396 984.1126760563382,396.668842322226 1058,439 C 1131.8873239436618,481.331157677774 1158.2535211267605,580.5231879079354 1214,621 C 1269.7464788732395,661.4768120920646 1354.8732394366198,643.2384060460323 1440,625 L 1440,700 L 0,700 Z' stroke='none' stroke-width='0' fill='url(#gradient)' fill-opacity='0.53' class='transition-all duration-300 ease-in-out delay-150 path-0'></path><style>
.path-1{
animation:pathAnim-1 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-1{
0%{
d: path('M 0,700 L 0,408 C 50.91034008931638,408.0762624527654 101.82068017863276,408.15252490553075 180,436 C 258.17931982136724,463.84747509446925 363.6276193747853,519.4661628306424 432,555 C 500.3723806252147,590.5338371693576 531.6688423222259,605.9828237718997 604,642 C 676.3311576777741,678.0171762281003 789.6970113363107,734.6025420817589 856,718 C 922.3029886636893,701.3974579182411 941.5431123325316,611.6070079010649 1005,627 C 1068.4568876674684,642.3929920989351 1176.1305393335624,762.9694263139814 1256,819 C 1335.8694606664376,875.0305736860186 1387.9347303332188,866.5152868430093 1440,858 L 1440,700 L 0,700 Z');
}
25%{
d: path('M 0,700 L 0,408 C 49.648230848505676,413.45585709378224 99.29646169701135,418.9117141875644 180,449 C 260.70353830298865,479.0882858124356 372.4623840604602,533.8090003435245 449,535 C 525.5376159395398,536.1909996564755 566.8540020611475,483.85228443833745 624,481 C 681.1459979388525,478.14771556166255 754.12160769495,524.7818619031259 827,585 C 899.87839230505,645.2181380968741 972.6595671590519,719.0202679491584 1049,753 C 1125.340432840948,786.9797320508416 1205.2401236688422,781.1370663002405 1271,792 C 1336.7598763311578,802.8629336997595 1388.379938165579,830.4314668498798 1440,858 L 1440,700 L 0,700 Z');
}
50%{
d: path('M 0,700 L 0,408 C 91.93610443146684,390.6781174854002 183.8722088629337,373.3562349708004 240,366 C 296.1277911370663,358.6437650291996 316.44726897973203,361.2531776021985 383,402 C 449.55273102026797,442.7468223978015 562.3387152181381,521.6310546204053 634,573 C 705.6612847818619,624.3689453795947 736.1978701477154,648.22260391618 798,679 C 859.8021298522846,709.77739608382 952.8698041909997,747.4785297148746 1026,758 C 1099.1301958090003,768.5214702851254 1152.3229130882858,751.8632772243216 1218,764 C 1283.6770869117142,776.1367227756784 1361.8385434558572,817.0683613878392 1440,858 L 1440,700 L 0,700 Z');
}
75%{
d: path('M 0,700 L 0,408 C 61.04362761937479,390.52971487461355 122.08725523874958,373.0594297492271 188,381 C 253.91274476125042,388.9405702507729 324.69460666437647,422.2919958777053 401,466 C 477.30539333562353,509.7080041222947 559.1343181037445,563.7725867399517 628,602 C 696.8656818962555,640.2274132600483 752.7681209206457,662.6176571624871 823,694 C 893.2318790793543,725.3823428375129 977.7931982136722,765.7567846100995 1056,787 C 1134.2068017863278,808.2432153899005 1206.059086224665,810.3552043971144 1269,819 C 1331.940913775335,827.6447956028856 1385.9704568876675,842.8223978014428 1440,858 L 1440,700 L 0,700 Z');
}
100%{
d: path('M 0,700 L 0,408 C 50.91034008931638,408.0762624527654 101.82068017863276,408.15252490553075 180,436 C 258.17931982136724,463.84747509446925 363.6276193747853,519.4661628306424 432,555 C 500.3723806252147,590.5338371693576 531.6688423222259,605.9828237718997 604,642 C 676.3311576777741,678.0171762281003 789.6970113363107,734.6025420817589 856,718 C 922.3029886636893,701.3974579182411 941.5431123325316,611.6070079010649 1005,627 C 1068.4568876674684,642.3929920989351 1176.1305393335624,762.9694263139814 1256,819 C 1335.8694606664376,875.0305736860186 1387.9347303332188,866.5152868430093 1440,858 L 1440,700 L 0,700 Z');
}
}</style><defs><linearGradient id='gradient' x1='0%' y1='50%' x2='100%' y2='50%'><stop offset='5%' stop-color='#F78DA7'></stop><stop offset='95%' stop-color='#8ED1FC'></stop></linearGradient></defs><path d='M 0,700 L 0,408 C 50.91034008931638,408.0762624527654 101.82068017863276,408.15252490553075 180,436 C 258.17931982136724,463.84747509446925 363.6276193747853,519.4661628306424 432,555 C 500.3723806252147,590.5338371693576 531.6688423222259,605.9828237718997 604,642 C 676.3311576777741,678.0171762281003 789.6970113363107,734.6025420817589 856,718 C 922.3029886636893,701.3974579182411 941.5431123325316,611.6070079010649 1005,627 C 1068.4568876674684,642.3929920989351 1176.1305393335624,762.9694263139814 1256,819 C 1335.8694606664376,875.0305736860186 1387.9347303332188,866.5152868430093 1440,858 L 1440,700 L 0,700 Z' stroke='none' stroke-width='0' fill='url(#gradient)' fill-opacity='1' class='transition-all duration-300 ease-in-out delay-150 path-1'></path></svg>")
Fill: =RGBA(0, 0, 0, 1)
ImagePosition: =ImagePosition.Fill
Children:
- ctr_Screen:
Control: GroupContainer@1.3.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
Height: =App.Height
LayoutDirection: =LayoutDirection.Vertical
LayoutJustifyContent: =LayoutJustifyContent.Center
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Width: =App.Width
Children:
- ctr_Main:
Control: GroupContainer@1.3.0
Variant: ManualLayout
Properties:
AlignInContainer: =AlignInContainer.Center
DropShadow: =DropShadow.None
FillPortions: =0
Height: =450
Width: =600
Children:
- hmtl_Glassmorphism:
Control: HtmlViewer@2.1.0
Properties:
Font: =Font.'Open Sans'
Height: =Parent.Height
HtmlText: |-
="
<div
style='
width: " & Parent.Width - 10 & "px;
height: " & Parent.Height - 15 & "px;
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 2px solid rgba(255, 255, 255, 0.4);'></div>
"
Width: =Parent.Width
- ctr_MainPane:
Control: GroupContainer@1.3.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
Height: =Parent.Height
LayoutDirection: =LayoutDirection.Vertical
LayoutGap: =8
PaddingBottom: =32
PaddingLeft: =32
PaddingRight: =32
PaddingTop: =32
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Width: =Parent.Width
Children:
- txt_Header:
Control: Text@0.0.50
Properties:
AlignInContainer: =AlignInContainer.Stretch
FontColor: =RGBA(255, 255, 255, 1)
Height: =80
Size: =32
Text: ="Your Details"
VerticalAlign: =VerticalAlign.Top
Weight: ='TextCanvas.Weight'.Semibold
- lbl_Name:
Control: Text@0.0.50
Properties:
AlignInContainer: =AlignInContainer.Stretch
FontColor: =RGBA(255, 255, 255, 1)
Size: =22
Text: ="Name"
Weight: ='TextCanvas.Weight'.Semibold
- txt_Name:
Control: TextInput@0.0.53
Properties:
AlignInContainer: =AlignInContainer.Stretch
Height: =40
- lbl_JobTitle:
Control: Text@0.0.50
Properties:
AlignInContainer: =AlignInContainer.Stretch
FontColor: =RGBA(255, 255, 255, 1)
Size: =22
Text: ="Job Title"
Weight: ='TextCanvas.Weight'.Semibold
- txt_JobTitle:
Control: TextInput@0.0.53
Properties:
AlignInContainer: =AlignInContainer.Stretch
Height: =40
- lbl_Email:
Control: Text@0.0.50
Properties:
AlignInContainer: =AlignInContainer.Stretch
FontColor: =RGBA(255, 255, 255, 1)
Size: =22
Text: ="Contact Email"
Weight: ='TextCanvas.Weight'.Semibold
- txt_Email:
Control: TextInput@0.0.53
Properties:
AlignInContainer: =AlignInContainer.Stretch
Height: =40
ComponentDefinitions:
Component_Navigation:
DefinitionType: CanvasComponent
Description: Reusable Navigation Component
AccessAppScope: true
CustomProperties:
LinksCollection:
PropertyKind: Input
DisplayName: Links Collection
Description: A Collection of Link Items to be displayed in the navigation
DataType: Table
Default: |-
=[
{
Type: "Navigation",
Icon: "Home",
Title: "Navigation",
useNavigate: true,
navigateScreen: screen_Component,
LaunchURL: Blank()
},
{
Type: "Header",
Icon: Blank(),
Title: "Header",
useNavigate: false,
navigateScreen: Blank(),
LaunchURL: Blank()
},
{
Type: "Url",
Icon: "Open",
Title: "Url Link",
useNavigate: false,
navigateScreen: Blank(),
LaunchURL: "http://www.novalogix.co.uk"
}
]
LogoImageDark:
PropertyKind: Input
DisplayName: Logo Image (Dark)
Description: The custom image logo to be displayed in Dark Mode
DataType: Image
Default: ='cute-kitty-animated-gif-2'
LogoImageLight:
PropertyKind: Input
DisplayName: Logo Image (Light)
Description: The custom image logo to be displayed in Light Mode
DataType: Image
Default: ='cute-kitty-animated-gif-2'
Properties:
Height: =App.Height
Width: =If(var_NavMinMax, 250, 66)
Children:
- ctr_sideNav_cpt:
Control: GroupContainer@1.3.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
Fill: =If(var_DarkMode, RGBA(20,20,20,1), RGBA(255,255,255,1))
Height: =Parent.Height
LayoutDirection: =LayoutDirection.Vertical
LayoutGap: =16
PaddingBottom: =16
PaddingTop: =16
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Width: =If(var_NavMinMax, 250, 66)
Children:
- ctr_logoHeader_cpt:
Control: GroupContainer@1.3.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
FillPortions: =0
Height: =If(var_NavMinMax, 60, 105)
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =If(var_NavMinMax, 8, 16)
LayoutJustifyContent: =LayoutJustifyContent.Center
LayoutMinWidth: =10
LayoutWrap: =true
PaddingBottom: =8
PaddingLeft: =If(var_NavMinMax, 16, 8)
PaddingRight: =If(var_NavMinMax, 16, 8)
PaddingTop: =8
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Children:
- img_navLogo_cpt:
Control: Image@2.2.3
Properties:
Fill: =
Height: =50
Image: ='cute-kitty-animated-gif-2'
LayoutMinWidth: =10
PaddingBottom: =2
PaddingLeft: =2
PaddingTop: =2
Width: =Self.Height
- txt_navCompany_cpt:
Control: Text@0.0.50
Properties:
FillPortions: =1
FontColor: =App.Theme.Colors.Primary
Size: =20
Text: ="Catlogix"
Visible: =var_NavMinMax
Weight: ='TextCanvas.Weight'.Bold
- btn_navMinMax_cpt:
Control: Button@0.0.44
Properties:
Appearance: ='ButtonCanvas.Appearance'.Outline
BorderColor: =Color.DimGrey
FontColor: =App.Theme.Colors.Primary
FontSize: =22
Height: =30
Icon: =If(var_NavMinMax, "ChevronLeft", "ChevronRight")
IconStyle: ='ButtonCanvas.IconStyle'.Filled
Layout: ='ButtonCanvas.Layout'.IconOnly
OnSelect: =Set(var_NavMinMax, !var_NavMinMax);
Width: =Self.Height
- rct_divider_cpt:
Control: Rectangle@2.3.0
Properties:
AlignInContainer: =AlignInContainer.Center
Height: =1
Width: =If(var_NavMinMax, Parent.Width, Parent.Width - 16)
- glry_navItems_cpt:
Control: Gallery@2.15.0
Variant: BrowseLayout_Vertical_TwoTextOneImageVariant_ver5.0
Properties:
Items: =Component_Navigation.LinksCollection
LayoutMinWidth: =10
TemplateSize: =50
Children:
- ctr_glry_main_cpt:
Control: GroupContainer@1.3.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
Height: =Parent.TemplateHeight
LayoutAlignItems: =LayoutAlignItems.Stretch
LayoutDirection: =LayoutDirection.Horizontal
PaddingBottom: =4
PaddingLeft: =If(var_NavMinMax, 16, 8)
PaddingRight: =8
PaddingTop: =4
Width: =Parent.TemplateWidth
Children:
- ctr_glry_navigation_cpt:
Control: GroupContainer@1.3.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
Fill: =If(var_NavigationSelected = ThisItem.Title, If(var_DarkMode, RGBA(255,255,255,0.07), ColorFade(App.Theme.Colors.Primary, 90%)), RGBA(0,0,0,0))
Height: =10
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =8
LayoutJustifyContent: =If(var_NavMinMax, LayoutJustifyContent.Start, LayoutJustifyContent.Center)
LayoutMinHeight: =10
LayoutMinWidth: =10
RadiusBottomLeft: =8
RadiusBottomRight: =8
RadiusTopLeft: =8
RadiusTopRight: =8
Visible: =ThisItem.Type = "Navigation" || ThisItem.Type = "Url"
Children:
- shp_navSlither_cpt:
Control: Rectangle@2.3.0
Properties:
AlignInContainer: =AlignInContainer.Stretch
Fill: =If(var_NavigationSelected = ThisItem.Title, App.Theme.Colors.Primary, RGBA(0,0,0,0))
LayoutMinHeight: =10
Visible: =var_NavMinMax
Width: =6
- btn_navigationIcon_cpt:
Control: Button@0.0.44
Properties:
Appearance: ='ButtonCanvas.Appearance'.Transparent
FontColor: =If(var_NavigationSelected = ThisItem.Title, App.Theme.Colors.Primary, If(var_DarkMode, RGBA(180,180,180,1), ColorValue("#121212")))
FontSize: =28
Icon: =ThisItem.Icon
IconStyle: =If(var_NavigationSelected = ThisItem.Title, 'ButtonCanvas.IconStyle'.Filled, 'ButtonCanvas.IconStyle'.Outline)
Layout: ='ButtonCanvas.Layout'.IconOnly
OnSelect: =Select(btn_navigationText_cpt)
Width: =Self.Height
- btn_navigationText_cpt:
Control: Button@0.0.44
Properties:
Align: =Align.Left
Appearance: ='ButtonCanvas.Appearance'.Transparent
FillPortions: =1
FontColor: =If(var_NavigationSelected = ThisItem.Title, App.Theme.Colors.Primary, If(var_DarkMode, RGBA(180,180,180,1), ColorValue("#121212")))
FontSize: =14
FontWeight: =FontWeight.Normal
LayoutMinWidth: =10
OnSelect: |
=Set(
var_NavigationSelected,
ThisItem.Title
);
Switch(
ThisItem.Type,
"Navigation",
If(
ThisItem.useNavigate,
Navigate(
ThisItem.navigateScreen,
Transition.None
)
),
"Url",
Launch(ThisItem.LaunchURL)
);
PaddingBottom: =0
PaddingLeft: =4
PaddingTop: =0
Text: =ThisItem.Title
Visible: =var_NavMinMax
- ctr_glry_header_cpt:
Control: GroupContainer@1.3.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
Fill: =RGBA(0,0,0,0)
Height: =10
LayoutAlignItems: =LayoutAlignItems.Stretch
LayoutDirection: =LayoutDirection.Horizontal
LayoutMinHeight: =10
LayoutMinWidth: =10
RadiusBottomLeft: =8
RadiusBottomRight: =8
RadiusTopLeft: =8
RadiusTopRight: =8
Visible: =ThisItem.Type = "Header"
Children:
- txt_headertext_cpt:
Control: Text@0.0.50
Properties:
AlignInContainer: =AlignInContainer.Stretch
FillPortions: =1
FontColor: =If(var_NavigationSelected = ThisItem.Title, App.Theme.Colors.Primary, If(var_DarkMode, RGBA(180,180,180,1), ColorValue("#121212")))
Size: =16
Text: =ThisItem.Title
Visible: =var_NavMinMax
Weight: ='TextCanvas.Weight'.Semibold
- rct_headerDivder_cpt:
Control: Rectangle@2.3.0
Properties:
AlignInContainer: =AlignInContainer.Center
FillPortions: =1
Height: =1
LayoutMinWidth: =10
Visible: =!var_NavMinMax
Width: =Parent.Width - 8
- tgl_darkMode_cpt:
Control: Toggle@1.1.5
Properties:
AlignInContainer: =AlignInContainer.Center
Checked: =var_DarkMode
FontColor: =If(var_DarkMode, RGBA(180,180,180,1), ColorValue("#121212"))
Height: =49
Label: =If(var_NavMinMax, "Dark Mode", "")
OnCheck: =Set(var_DarkMode, true)
OnUncheck: =Set(var_DarkMode, false)
Width: =184
X: =1152
Y: =24
GetHexColor(InputColor:Color):Text = Mid(
Text(JSON(InputColor)),
2,
Len(Text(JSON(InputColor))) - 2
);