Burak Kaan Köse
4a94dfb10c
Add hero illustrations using XAML-native vector graphics (shield+lock for login, person+plus badge for registration). Improve visual design with gradient backgrounds, icon badges on benefit cards, and refined spacing/corner radii. Add Enter key handling so pressing Enter in an input field moves focus to the next field, and pressing Enter on the last field triggers the primary action (login/register). https://claude.ai/code/session_011B1M6UVeo4yUX3zNHBxQ2P Co-authored-by: Claude <noreply@anthropic.com>
280 lines
12 KiB
XML
280 lines
12 KiB
XML
<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}"
|
|
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>
|
|
</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="" />
|
|
<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="" />
|
|
<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>
|
|
|
|
<!-- 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>
|
|
|
|
<ProgressRing
|
|
x:Name="BusyRing"
|
|
Width="20"
|
|
Height="20"
|
|
HorizontalAlignment="Left"
|
|
IsActive="False"
|
|
Visibility="Collapsed" />
|
|
|
|
<TextBlock
|
|
x:Name="ErrorTextBlock"
|
|
Foreground="{ThemeResource SystemFillColorCriticalBrush}"
|
|
TextWrapping="WrapWholeWords"
|
|
Visibility="Collapsed" />
|
|
</StackPanel>
|
|
</ScrollViewer>
|
|
</ContentDialog>
|