Wino-Mail/Wino.Mail.WinUI/Dialogs/WinoAccountRegistrationDialog.xaml

<ContentDialog
    x:Class="Wino.Dialogs.WinoAccountRegistrationDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:domain="using:Wino.Core.Domain"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="{x:Bind domain:Translator.WinoAccount_RegisterDialog_Title}"
    FullSizeDesired="True"
    PrimaryButtonClick="RegisterClicked"
    PrimaryButtonStyle="{ThemeResource AccentButtonStyle}"
    PrimaryButtonText="{x:Bind domain:Translator.WinoAccount_RegisterDialog_PrimaryButton}"
    SecondaryButtonText="{x:Bind domain:Translator.Buttons_Cancel}"
    Style="{StaticResource WinoDialogStyle}"
    mc:Ignorable="d">

    <ContentDialog.Resources>
        <x:Double x:Key="ContentDialogMinWidth">560</x:Double>
        <x:Double x:Key="ContentDialogMaxWidth">560</x:Double>
        <x:Double x:Key="ContentDialogMaxHeight">900</x:Double>
    </ContentDialog.Resources>

    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <StackPanel Spacing="20">

            <!--  Hero illustration area  -->
            <Border Height="140" CornerRadius="12">
                <Border.Background>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                        <GradientStop Offset="0" Color="#1A818CF8" />
                        <GradientStop Offset="0.5" Color="#20A78BFA" />
                        <GradientStop Offset="1" Color="#1AE879F9" />
                    </LinearGradientBrush>
                </Border.Background>
                <Canvas>
                    <!--  Background decorative circles  -->
                    <Ellipse
                        Canvas.Left="370"
                        Canvas.Top="-10"
                        Width="90"
                        Height="90"
                        Opacity="0.12">
                        <Ellipse.Fill>
                            <RadialGradientBrush>
                                <GradientStop Offset="0" Color="#A78BFA" />
                                <GradientStop Offset="1" Color="Transparent" />
                            </RadialGradientBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                    <Ellipse
                        Canvas.Left="30"
                        Canvas.Top="90"
                        Width="70"
                        Height="70"
                        Opacity="0.1">
                        <Ellipse.Fill>
                            <RadialGradientBrush>
                                <GradientStop Offset="0" Color="#38BDF8" />
                                <GradientStop Offset="1" Color="Transparent" />
                            </RadialGradientBrush>
                        </Ellipse.Fill>
                    </Ellipse>

                    <!--  Person/account illustration  -->
                    <Canvas Canvas.Left="200" Canvas.Top="12">
                        <!--  Circular badge background  -->
                        <Ellipse
                            Canvas.Left="8"
                            Canvas.Top="8"
                            Width="80"
                            Height="80"
                            Opacity="0.9">
                            <Ellipse.Fill>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                    <GradientStop Offset="0" Color="#818CF8" />
                                    <GradientStop Offset="1" Color="#6366F1" />
                                </LinearGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <!--  Inner circle  -->
                        <Ellipse
                            Canvas.Left="14"
                            Canvas.Top="14"
                            Width="68"
                            Height="68"
                            Opacity="0.35">
                            <Ellipse.Fill>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Offset="0" Color="#C7D2FE" />
                                    <GradientStop Offset="1" Color="#A5B4FC" />
                                </LinearGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <!--  Person head  -->
                        <Ellipse
                            Canvas.Left="34"
                            Canvas.Top="24"
                            Width="28"
                            Height="28"
                            Fill="White" />
                        <!--  Person body  -->
                        <Path Data="M28 68 A20 16 0 0 1 68 68" Fill="White" />

                        <!--  Plus badge  -->
                        <Ellipse
                            Canvas.Left="62"
                            Canvas.Top="62"
                            Width="28"
                            Height="28">
                            <Ellipse.Fill>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                    <GradientStop Offset="0" Color="#4ADE80" />
                                    <GradientStop Offset="1" Color="#16A34A" />
                                </LinearGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <!--  Plus sign  -->
                        <Rectangle
                            Canvas.Left="73"
                            Canvas.Top="70"
                            Width="4"
                            Height="16"
                            Fill="White"
                            RadiusX="2"
                            RadiusY="2" />
                        <Rectangle
                            Canvas.Left="69"
                            Canvas.Top="74"
                            Width="12"
                            Height="4"
                            Fill="White"
                            RadiusX="2"
                            RadiusY="2" />
                    </Canvas>

                    <!--  Decorative sparkles  -->
                    <Ellipse
                        Canvas.Left="140"
                        Canvas.Top="35"
                        Width="6"
                        Height="6"
                        Fill="#A78BFA"
                        Opacity="0.5" />
                    <Ellipse
                        Canvas.Left="350"
                        Canvas.Top="55"
                        Width="5"
                        Height="5"
                        Fill="#38BDF8"
                        Opacity="0.6" />
                    <Ellipse
                        Canvas.Left="120"
                        Canvas.Top="95"
                        Width="4"
                        Height="4"
                        Fill="#6EE7B7"
                        Opacity="0.4" />
                    <Ellipse
                        Canvas.Left="380"
                        Canvas.Top="105"
                        Width="4"
                        Height="4"
                        Fill="#F472B6"
                        Opacity="0.5" />
                </Canvas>
            </Border>

            <!--  Benefits section  -->
            <StackPanel Spacing="8">
                <TextBlock
                    Margin="0,0,0,4"
                    Style="{StaticResource BodyStrongTextBlockStyle}"
                    Text="{x:Bind domain:Translator.WinoAccount_RegisterDialog_BenefitsTitle}" />

                <Border
                    Padding="14"
                    Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
                    CornerRadius="12">
                    <Grid ColumnSpacing="12">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Border
                            Width="36"
                            Height="36"
                            Background="{ThemeResource AccentFillColorDefaultBrush}"
                            CornerRadius="8"
                            Opacity="0.15" />
                        <FontIcon
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            FontSize="16"
                            Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
                            Glyph="&#xE8D7;" />
                        <StackPanel Grid.Column="1" Spacing="2">
                            <TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="{x:Bind domain:Translator.WinoAccount_RegisterDialog_BenefitSyncTitle}" />
                            <TextBlock
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                Style="{StaticResource CaptionTextBlockStyle}"
                                Text="{x:Bind domain:Translator.WinoAccount_RegisterDialog_BenefitSyncDescription}"
                                TextWrapping="WrapWholeWords" />
                        </StackPanel>
                    </Grid>
                </Border>

                <Border
                    Padding="14"
                    Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
                    CornerRadius="12">
                    <Grid ColumnSpacing="12">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Border
                            Width="36"
                            Height="36"
                            Background="{ThemeResource AccentFillColorDefaultBrush}"
                            CornerRadius="8"
                            Opacity="0.15" />
                        <FontIcon
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            FontSize="16"
                            Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
                            Glyph="&#xEA18;" />
                        <StackPanel Grid.Column="1" Spacing="2">
                            <TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="{x:Bind domain:Translator.WinoAccount_RegisterDialog_BenefitAiTitle}" />
                            <TextBlock
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                Style="{StaticResource CaptionTextBlockStyle}"
                                Text="{x:Bind domain:Translator.WinoAccount_RegisterDialog_BenefitAiDescription}"
                                TextWrapping="WrapWholeWords" />
                        </StackPanel>
                    </Grid>
                </Border>
            </StackPanel>

            <TextBlock
                x:Name="ErrorTextBlock"
                Foreground="{ThemeResource SystemFillColorCriticalBrush}"
                TextWrapping="WrapWholeWords"
                Visibility="Collapsed" />

            <!--  Input fields  -->
            <StackPanel Spacing="12">
                <TextBox
                    x:Name="EmailTextBox"
                    Header="{x:Bind domain:Translator.WinoAccount_EmailLabel}"
                    KeyDown="EmailTextBox_KeyDown"
                    PlaceholderText="{x:Bind domain:Translator.WinoAccount_EmailPlaceholder}"
                    TextChanging="InputChanged" />

                <PasswordBox
                    x:Name="PasswordBox"
                    Header="{x:Bind domain:Translator.WinoAccount_PasswordLabel}"
                    KeyDown="PasswordBox_KeyDown"
                    PasswordChanged="InputChanged" />

                <PasswordBox
                    x:Name="ConfirmPasswordBox"
                    Header="{x:Bind domain:Translator.WinoAccount_ConfirmPasswordLabel}"
                    KeyDown="ConfirmPasswordBox_KeyDown"
                    PasswordChanged="InputChanged" />
            </StackPanel>

            <Border
                Padding="14"
                Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
                CornerRadius="12">
                <StackPanel Spacing="10">
                    <TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="{x:Bind domain:Translator.WinoAccount_RegisterDialog_PrivacyTitle}" />
                    <TextBlock
                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                        Style="{StaticResource CaptionTextBlockStyle}"
                        Text="{x:Bind domain:Translator.WinoAccount_RegisterDialog_PrivacyDescription}"
                        TextWrapping="WrapWholeWords" />
                    <HyperlinkButton
                        HorizontalAlignment="Left"
                        Click="PrivacyPolicyLink_Click"
                        Content="{x:Bind domain:Translator.WinoAccount_RegisterDialog_PrivacyLinkText}" />
                    <CheckBox
                        x:Name="PrivacyPolicyCheckBox"
                        Checked="InputChanged"
                        Content="{x:Bind domain:Translator.WinoAccount_RegisterDialog_PrivacyCheckbox}"
                        Unchecked="InputChanged" />
                </StackPanel>
            </Border>

            <ProgressRing
                x:Name="BusyRing"
                Width="20"
                Height="20"
                HorizontalAlignment="Left"
                IsActive="False"
                Visibility="Collapsed" />
        </StackPanel>
    </ScrollViewer>
</ContentDialog>