| | 4 | 1 | | <UserControl xmlns="https://github.com/avaloniaui" |
| | | 2 | | xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
| | | 3 | | xmlns:vm="using:LOCKnet.App.ViewModels" |
| | | 4 | | xmlns:d="http://schemas.microsoft.com/expression/blend/2008" |
| | | 5 | | xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" |
| | | 6 | | mc:Ignorable="d" d:DesignWidth="900" d:DesignHeight="600" |
| | | 7 | | x:Class="LOCKnet.App.Views.TutorialView" |
| | | 8 | | x:DataType="vm:TutorialViewModel" |
| | 2 | 9 | | Background="{StaticResource BrushBg}"> |
| | | 10 | | |
| | | 11 | | <Design.DataContext> |
| | | 12 | | <vm:TutorialViewModel/> |
| | | 13 | | </Design.DataContext> |
| | | 14 | | |
| | 4 | 15 | | <Grid RowDefinitions="*,Auto,*"> |
| | 8 | 16 | | <Border Grid.Row="1" |
| | | 17 | | Width="580" |
| | 2 | 18 | | HorizontalAlignment="Center" |
| | 2 | 19 | | Background="{StaticResource BrushSurface}" |
| | 2 | 20 | | CornerRadius="{StaticResource RadiusLg}" |
| | | 21 | | Padding="44,40" |
| | 2 | 22 | | Margin="0,24"> |
| | 6 | 23 | | <StackPanel Spacing="28"> |
| | | 24 | | |
| | | 25 | | <!-- Logo + App name --> |
| | 8 | 26 | | <StackPanel Orientation="Horizontal" |
| | | 27 | | HorizontalAlignment="Center" |
| | 2 | 28 | | Spacing="10"> |
| | 8 | 29 | | <Image Source="/Assets/favicon-32x32.png" |
| | 2 | 30 | | Width="32" Height="32" |
| | | 31 | | VerticalAlignment="Center"/> |
| | 8 | 32 | | <TextBlock Text="LOCKnet · Hilfe" |
| | | 33 | | FontSize="20" |
| | 2 | 34 | | FontWeight="Bold" |
| | 2 | 35 | | Foreground="{StaticResource BrushTextPrimary}" |
| | | 36 | | VerticalAlignment="Center"/> |
| | | 37 | | </StackPanel> |
| | | 38 | | |
| | | 39 | | <!-- Step indicator --> |
| | 8 | 40 | | <TextBlock Text="{Binding CurrentStepData.StepLabel}" |
| | | 41 | | FontSize="12" |
| | 2 | 42 | | Foreground="{StaticResource BrushAccent}" |
| | | 43 | | HorizontalAlignment="Center" |
| | 2 | 44 | | FontWeight="SemiBold"/> |
| | | 45 | | |
| | | 46 | | <!-- Step card --> |
| | 6 | 47 | | <Border Background="{StaticResource BrushInput}" |
| | 2 | 48 | | CornerRadius="{StaticResource RadiusMd}" |
| | | 49 | | Padding="28,24"> |
| | 6 | 50 | | <StackPanel Spacing="14"> |
| | 8 | 51 | | <TextBlock Text="{Binding CurrentStepData.Title}" |
| | | 52 | | FontSize="18" |
| | 2 | 53 | | FontWeight="Bold" |
| | 2 | 54 | | Foreground="{StaticResource BrushTextPrimary}" |
| | | 55 | | TextWrapping="Wrap"/> |
| | 8 | 56 | | <TextBlock Text="{Binding CurrentStepData.Content}" |
| | | 57 | | FontSize="14" |
| | 2 | 58 | | Foreground="{StaticResource BrushTextSecondary}" |
| | | 59 | | TextWrapping="Wrap" |
| | 2 | 60 | | LineHeight="22"/> |
| | | 61 | | </StackPanel> |
| | | 62 | | </Border> |
| | | 63 | | |
| | | 64 | | <!-- Navigation --> |
| | 6 | 65 | | <Grid ColumnDefinitions="Auto,*,Auto"> |
| | 8 | 66 | | <Button Grid.Column="0" |
| | 2 | 67 | | Content="← Zurück" |
| | | 68 | | Classes="secondary" |
| | 2 | 69 | | Command="{Binding BackCommand}" |
| | | 70 | | Padding="18,10" |
| | 2 | 71 | | IsVisible="{Binding CanGoBack}"/> |
| | | 72 | | |
| | | 73 | | <!-- Dots (Static for now, dynamic bindings would require a converter or multiple sets) --> |
| | | 74 | | <!-- Since I cannot add converters, I'll rely on the ViewModel if it has dot properties, but it does |
| | | 75 | | <!-- The original file had HARDCODED Ellipses inside ItemsControl.Items. --> |
| | | 76 | | <!-- I must replicate that but with the new styles. --> |
| | | 77 | | <!-- Wait, if they are hardcoded, they won't update. The original file has 5 ellipses with hardcoded |
| | | 78 | | <!-- "Step indicator dots: active dot is 10x10 BrushAccent; inactive dots are 8x8 BrushBorder" --> |
| | | 79 | | <!-- If I cannot change the ViewModel to bind this, and I cannot add a converter, how do I make them |
| | | 80 | | <!-- The original code just had 5 ellipses: 1 accent, 4 dark. This implies the tutorial might be sta |
| | | 81 | | <!-- I will keep them as placeholders but styled as requested, assuming the user will fix the bindin |
| | | 82 | | <!-- Actually, looking at the original file: --> |
| | | 83 | | <!-- <Ellipse Width="8" Height="8" Fill="#6c63ff" Margin="3,0"/> --> |
| | | 84 | | <!-- <Ellipse Width="8" Height="8" Fill="#3d4070" Margin="3,0"/> ... --> |
| | | 85 | | <!-- It seems the original was just a static mockup of the dots. I will replicate that static mockup |
| | | 86 | | |
| | 10 | 87 | | <StackPanel Grid.Column="1" |
| | | 88 | | Orientation="Horizontal" |
| | 2 | 89 | | HorizontalAlignment="Center" |
| | | 90 | | VerticalAlignment="Center" |
| | 2 | 91 | | Spacing="6"> |
| | 8 | 92 | | <Ellipse Width="10" Height="10" Fill="{StaticResource BrushAccent}"/> |
| | 8 | 93 | | <Ellipse Width="8" Height="8" Fill="{StaticResource BrushBorder}"/> |
| | 8 | 94 | | <Ellipse Width="8" Height="8" Fill="{StaticResource BrushBorder}"/> |
| | 8 | 95 | | <Ellipse Width="8" Height="8" Fill="{StaticResource BrushBorder}"/> |
| | 8 | 96 | | <Ellipse Width="8" Height="8" Fill="{StaticResource BrushBorder}"/> |
| | | 97 | | </StackPanel> |
| | | 98 | | |
| | 8 | 99 | | <Button Grid.Column="2" |
| | 2 | 100 | | Content="Weiter →" |
| | | 101 | | Classes="primary" |
| | 2 | 102 | | Command="{Binding ForwardCommand}" |
| | | 103 | | Padding="18,10" |
| | 2 | 104 | | IsVisible="{Binding CanGoForward}"/> |
| | | 105 | | |
| | 8 | 106 | | <Button Grid.Column="2" |
| | 2 | 107 | | Content="Fertig" |
| | 2 | 108 | | Command="{Binding CloseCommand}" |
| | 2 | 109 | | Background="{StaticResource BrushSuccess}" |
| | 2 | 110 | | Foreground="{StaticResource BrushBg}" |
| | | 111 | | FontWeight="Bold" |
| | 2 | 112 | | CornerRadius="{StaticResource RadiusMd}" |
| | | 113 | | Padding="18,10" |
| | 2 | 114 | | IsVisible="{Binding IsLastStep}"/> |
| | | 115 | | </Grid> |
| | | 116 | | |
| | | 117 | | </StackPanel> |
| | | 118 | | </Border> |
| | | 119 | | </Grid> |
| | | 120 | | |
| | | 121 | | </UserControl> |