improve the look of the GUI

Lottery/AppShell.xaml

@@ -8,7 +8,6 @@
     Title="Lottery Number Generator">
 
     <ShellContent
-        Title="Lottery Number Generator"
         ContentTemplate="{DataTemplate local:MainPage}"
         Route="MainPage" />
 

Lottery/Lottery.cs

@@ -33,7 +33,7 @@
 
         public override string Play()
         {
-            return string.Join("\t", [
+            return string.Join("\n", [
                 $"Numbers: {string.Join(", ", Generator.Generate(Limits))}",
                 $"{SpecialIdentifier}: {string.Join(", ", Generator.Generate(SpecialLimits))}",
             ]);

Lottery/MainPage.xaml

@@ -1,17 +1,127 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             x:Class="Lottery.MainPage">
+             x:Class="Lottery.MainPage"
+             BackgroundColor="{AppThemeBinding Light=#F5F5F5, Dark=#1E1E1E}">
 
     <ScrollView>
         <VerticalStackLayout
-            Padding="30,0"
+            Padding="20"
-            Spacing="25">
+            Spacing="30"
-            <Picker x:Name="LotteryPicker" Title="Pick your lottery" SelectedIndexChanged="LotteryPicker_SelectedIndexChanged" />
+            VerticalOptions="Center"
+            MaximumWidthRequest="500">
 
-            <Label x:Name="NumbersLabel" Text="Click Play to Begin" HorizontalOptions="Center" FontSize="Medium"  />
+            <!-- Header -->
+            <Label 
+                Text="🎰 Lottery Generator"
+                FontSize="32"
+                FontAttributes="Bold"
+                HorizontalOptions="Center"
+                TextColor="{AppThemeBinding Light=#2C3E50, Dark=#ECF0F1}"
+                Margin="0,20,0,10"/>
+
+            <!-- Card Container -->
+            <Border 
+                BackgroundColor="{AppThemeBinding Light=White, Dark=#2D2D30}"
+                StrokeThickness="0"
+                Padding="25"
+                Margin="10,0"
+                Shadow="{Shadow Brush={AppThemeBinding Light=#40000000, Dark=#60000000}, Offset='0,4', Radius=8, Opacity=0.3}">
+                <Border.StrokeShape>
+                    <RoundRectangle CornerRadius="16"/>
+                </Border.StrokeShape>
+
+                <VerticalStackLayout Spacing="20">
+                    
+                    <!-- Lottery Picker Section -->
+                    <Label 
+                        Text="Select Lottery"
+                        FontSize="14"
+                        FontAttributes="Bold"
+                        TextColor="{AppThemeBinding Light=#7F8C8D, Dark=#95A5A6}"
+                        Margin="0,0,0,-10"/>
+                    
+                    <Border
+                        BackgroundColor="{AppThemeBinding Light=#F8F9FA, Dark=#3E3E42}"
+                        StrokeThickness="1"
+                        Stroke="{AppThemeBinding Light=#E0E0E0, Dark=#4A4A4F}"
+                        Padding="12,8">
+                        <Border.StrokeShape>
+                            <RoundRectangle CornerRadius="8"/>
+                        </Border.StrokeShape>
+                        <Picker 
+                            x:Name="LotteryPicker" 
+                            Title="Pick your lottery" 
+                            SelectedIndexChanged="LotteryPicker_SelectedIndexChanged"
+                            TextColor="{AppThemeBinding Light=#2C3E50, Dark=#ECF0F1}"
+                            TitleColor="{AppThemeBinding Light=#95A5A6, Dark=#7F8C8D}"
+                            FontSize="16"
+                            BackgroundColor="Transparent"/>
+                    </Border>
+
+                    <!-- Results Section -->
+                    <BoxView 
+                        HeightRequest="1" 
+                        Color="{AppThemeBinding Light=#E0E0E0, Dark=#4A4A4F}"
+                        Margin="0,10"/>
+
+                    <Label 
+                        Text="Your Numbers"
+                        FontSize="14"
+                        FontAttributes="Bold"
+                        TextColor="{AppThemeBinding Light=#7F8C8D, Dark=#95A5A6}"
+                        Margin="0,0,0,-10"/>
+
+                    <Border
+                        BackgroundColor="{AppThemeBinding Light=#E8F5E9, Dark=#1B3A1E}"
+                        StrokeThickness="0"
+                        Padding="20"
+                        MinimumHeightRequest="80">
+                        <Border.StrokeShape>
+                            <RoundRectangle CornerRadius="12"/>
+                        </Border.StrokeShape>
+                        <Label 
+                            x:Name="NumbersLabel" 
+                            Text="Click Play to Begin" 
+                            HorizontalOptions="Center"
+                            VerticalOptions="Center"
+                            FontSize="18"
+                            FontAttributes="Bold"
+                            TextColor="{AppThemeBinding Light=#27AE60, Dark=#52C77A}"
+                            HorizontalTextAlignment="Center"/>
+                    </Border>
+
+                    <!-- Play Button -->
+                    <Button 
+                        x:Name="PlayButton" 
+                        Text="🎲 Play" 
+                        Clicked="PlayButton_Clicked"
+                        BackgroundColor="{AppThemeBinding Light=#3498DB, Dark=#2980B9}"
+                        TextColor="White"
+                        FontSize="18"
+                        FontAttributes="Bold"
+                        HeightRequest="56"
+                        CornerRadius="12"
+                        Margin="0,10,0,0"
+                        Shadow="{Shadow Brush=#40000000, Offset='0,2', Radius=6, Opacity=0.25}">
+                        <Button.Triggers>
+                            <Trigger TargetType="Button" Property="IsPressed" Value="True">
+                                <Setter Property="Scale" Value="0.96"/>
+                            </Trigger>
+                        </Button.Triggers>
+                    </Button>
+
+                </VerticalStackLayout>
+            </Border>
+
+            <!-- Footer -->
+            <Label 
+                Text="Good luck! 🍀"
+                FontSize="12"
+                HorizontalOptions="Center"
+                TextColor="{AppThemeBinding Light=#95A5A6, Dark=#7F8C8D}"
+                Margin="0,10,0,20"/>
 
-            <Button x:Name="PlayButton" Text="Play" Clicked="PlayButton_Clicked"/>
         </VerticalStackLayout>
     </ScrollView>