banil-la

const countries = [
  { name: "Afghanistan", dial_code: "+93", code: "AF", flag: "🇦🇫" },
  { name: "Åland Islands", dial_code: "+358", code: "AX", flag: "🇦🇽" },
  { name: "Albania", dial_code: "+355", code: "AL", flag: "🇦🇱" },
  { name: "Algeria", dial_code: "+213", code: "DZ", flag: "🇩🇿" },
  {
    name: "American Samoa",
    flag: "🇺🇸",
    dial_code: "+1684",
    code: "AS"

banil-la

<App>
	<Text ux:Name="Text" Value="Press" Alignment="Center" Color="#fff"/>
	<Rectangle ux:Name="Rectangle" Width="100" Height="100" Color="#275AFE" Alignment="Center">
		<WhilePressed>
			<Rotate Degrees="135" Duration="0.5" Easing="QuadraticIn" EasingBack="QuadraticOut"/>
			<Change Rectangle.CornerRadius="30" Duration="0.25"/>
			<Change Rectangle.Color="#FD6061" Duration="0.25"/>
			<Change Text.Value="Release"/>
		</WhilePressed>
	</Rectangle>

banil-la

<App>
	<StateGroup ux:Name="LiveCallGroup">
		<State ux:Name="RestoreLiveCall">
			<!-- Tab Area -->
			<Move Target="LiveCallTabArea" Y="0" RelativeTo="ParentSize" Duration="0.2"/>
			<Change LiveCallTabArea.Opacity="0.5" Duration="0.3"/>

			<!-- LiveCall Area -->
			<Change LiveCallArea.Opacity="0.5" Duration="0.3"/>
			<Move Target="LiveCallArea" Y="0.7" RelativeTo="ParentSize" Duration="0.2"/>

banil-la

<Page ux:Class="Profile">
  <Router ux:Dependency="router" />
  <Panel Background="Black" Height="5%" Y="0">
    <Text Value="Profile Page" Color="White" Alignment="CenterLeft" Margin="10, 0"/>
  </Panel>
  <Grid Rows="1*, 1*" Y="5%" Height="95%">
    <Text Value="To Index" Alignment="Center" Tapped="{gotoIndex}"/>
    <Text Value="To Splash" Alignment="Center" Tapped="{gotoSplash}"/>
  </Grid>
</Page>

banil-la

<Page ux:Class="Index">
  <Router ux:Dependency="router" />
  <Panel Background="Black" Height="5%" Y="0">
    <Text Value="Index Page" Color="White" Alignment="CenterLeft" Margin="10, 0"/>
  </Panel>
  <Grid Rows="1*, 1*" Y="5%" Height="95%">
    <Text Value="To Splash" Alignment="Center" Tapped="{gotoSplash}"/>
    <Text Value="To Profile" Alignment="Center" Tapped="{gotoProfile}"/>
  </Grid>
</Page>

banil-la

<App>
	<!-- Set Router -->
	<Router ux:Name="router" />

	<!-- Set Router Function -->
	<JavaScript>
		module.exports = {
			gotoSplash: function() {
				router.goto("Splash");
			},

banil-la

<App Background="#333">
	<DockPanel>
		<PageControl ux:Name="pages">
			<Page ux:Name="page1" Background="#eee">
				<EnteringAnimation>
					<Move X="1" RelativeTo="ParentSize" Duration="0.5"/>
				</EnteringAnimation>
			</Page>
			<Page ux:Name="page2" Background="#666">
				<EnteringAnimation>