csharpc-sharpdotnetxamlavaloniauicross-platformcross-platform-xamlavaloniaguimulti-platformuser-interfacedotnetcore
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
255 lines
10 KiB
255 lines
10 KiB
<UserControl xmlns="https://github.com/avaloniaui"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
x:Class="ControlCatalog.Pages.EcoTrackerHomeView">
|
|
|
|
<ScrollViewer VerticalScrollBarVisibility="Auto">
|
|
<StackPanel Spacing="0">
|
|
|
|
<!-- Hero Card wrapped in a clickable Button -->
|
|
<Button Padding="0"
|
|
Background="Transparent"
|
|
BorderThickness="0"
|
|
HorizontalAlignment="Stretch"
|
|
HorizontalContentAlignment="Stretch"
|
|
Margin="16,20,16,0"
|
|
Click="OnHeroClick">
|
|
<Border CornerRadius="16" ClipToBounds="True">
|
|
<Panel>
|
|
|
|
<!-- Gradient background -->
|
|
<Border>
|
|
<Border.Background>
|
|
<LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
|
|
<GradientStop Color="#2E7D32" Offset="0"/>
|
|
<GradientStop Color="#1B5E20" Offset="1"/>
|
|
</LinearGradientBrush>
|
|
</Border.Background>
|
|
</Border>
|
|
|
|
<!-- Decorative circle top-right -->
|
|
<Border Width="140" Height="140"
|
|
CornerRadius="70"
|
|
Background="#14FFFFFF"
|
|
HorizontalAlignment="Right"
|
|
VerticalAlignment="Top"
|
|
Margin="0,-40,-40,0"/>
|
|
|
|
<!-- Content grid -->
|
|
<Grid ColumnDefinitions="*,Auto" Margin="20">
|
|
|
|
<!-- Left: stats + text -->
|
|
<StackPanel Spacing="4" VerticalAlignment="Center">
|
|
<TextBlock Text="TREES SAVED"
|
|
FontSize="10" FontWeight="Bold"
|
|
Foreground="#A5D6A7"/>
|
|
<StackPanel Orientation="Horizontal" Spacing="4">
|
|
<TextBlock Text="15"
|
|
FontSize="48" FontWeight="Black"
|
|
Foreground="White"/>
|
|
<StackPanel VerticalAlignment="Bottom" Margin="0,0,0,10">
|
|
<TextBlock Text="/20"
|
|
FontSize="16" FontWeight="Medium"
|
|
Foreground="#A5D6A7"/>
|
|
</StackPanel>
|
|
</StackPanel>
|
|
<TextBlock Text="Keep going! 5 more to reach your goal"
|
|
FontSize="12" Foreground="#A5D6A7"/>
|
|
</StackPanel>
|
|
|
|
<!-- Right: ring with leaf icon -->
|
|
<Panel Width="72" Height="72"
|
|
Grid.Column="1"
|
|
VerticalAlignment="Center">
|
|
<Border Width="72" Height="72"
|
|
CornerRadius="36"
|
|
BorderBrush="#3CA5D6A7"
|
|
BorderThickness="5"/>
|
|
<PathIcon Width="32" Height="32"
|
|
Data="M12 3C9 6 6 9 6 13C6 17.4 8.7 21 12 22C15.3 21 18 17.4 18 13C18 9 15 6 12 3Z"
|
|
Foreground="#4CAF50"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center"/>
|
|
</Panel>
|
|
|
|
</Grid>
|
|
</Panel>
|
|
</Border>
|
|
</Button>
|
|
|
|
<!-- Weekly Impact section -->
|
|
<StackPanel Margin="16,20,16,0" Spacing="10">
|
|
<TextBlock Text="WEEKLY IMPACT"
|
|
FontSize="11" FontWeight="Bold"
|
|
Foreground="#90A4AE"
|
|
LetterSpacing="1.5"/>
|
|
|
|
<StackPanel Orientation="Horizontal" Spacing="10">
|
|
|
|
<!-- Water Saved card -->
|
|
<Border CornerRadius="12" Background="White"
|
|
Padding="14,12" HorizontalAlignment="Stretch">
|
|
<Grid ColumnDefinitions="Auto,*">
|
|
<Border Width="40" Height="40" CornerRadius="10"
|
|
Background="#192196F3"
|
|
VerticalAlignment="Center">
|
|
<PathIcon Width="20" Height="20"
|
|
Data="M12,20A6,6 0 0,1 6,14C6,10 12,3.25 12,3.25C12,3.25 18,10 18,14A6,6 0 0,1 12,20Z"
|
|
Foreground="#2196F3"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center"/>
|
|
</Border>
|
|
<StackPanel Grid.Column="1" Margin="10,0,0,0"
|
|
VerticalAlignment="Center" Spacing="2">
|
|
<TextBlock Text="Water Saved"
|
|
FontSize="11" FontWeight="Medium"
|
|
Foreground="#90A4AE"/>
|
|
<TextBlock Text="120 L"
|
|
FontSize="18" FontWeight="Bold"
|
|
Foreground="#2196F3"/>
|
|
</StackPanel>
|
|
</Grid>
|
|
</Border>
|
|
|
|
<!-- Carbon Reduced card -->
|
|
<Border CornerRadius="12" Background="White"
|
|
Padding="14,12" HorizontalAlignment="Stretch">
|
|
<Grid ColumnDefinitions="Auto,*">
|
|
<Border Width="40" Height="40" CornerRadius="10"
|
|
Background="#194CAF50"
|
|
VerticalAlignment="Center">
|
|
<PathIcon Width="20" Height="20"
|
|
Data="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z"
|
|
Foreground="#4CAF50"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center"/>
|
|
</Border>
|
|
<StackPanel Grid.Column="1" Margin="10,0,0,0"
|
|
VerticalAlignment="Center" Spacing="2">
|
|
<TextBlock Text="Carbon Reduced"
|
|
FontSize="11" FontWeight="Medium"
|
|
Foreground="#90A4AE"/>
|
|
<TextBlock Text="15 kg"
|
|
FontSize="18" FontWeight="Bold"
|
|
Foreground="#4CAF50"/>
|
|
</StackPanel>
|
|
</Grid>
|
|
</Border>
|
|
|
|
</StackPanel>
|
|
</StackPanel>
|
|
|
|
<!-- Daily Tasks section -->
|
|
<StackPanel Margin="16,20,16,16" Spacing="10">
|
|
|
|
<Grid ColumnDefinitions="*,Auto">
|
|
<TextBlock Text="DAILY TASKS"
|
|
FontSize="11" FontWeight="Bold"
|
|
Foreground="#90A4AE"/>
|
|
<TextBlock Grid.Column="1"
|
|
Text="3 of 5 completed"
|
|
FontSize="11"
|
|
Foreground="#4CAF50"/>
|
|
</Grid>
|
|
|
|
<!-- Task 1: completed -->
|
|
<Border CornerRadius="10" Background="White" Padding="12,10">
|
|
<Grid ColumnDefinitions="Auto,*">
|
|
<Border Width="24" Height="24" CornerRadius="6"
|
|
Background="#4CAF50"
|
|
VerticalAlignment="Center">
|
|
<PathIcon Width="14" Height="14"
|
|
Data="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
|
|
Foreground="White"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center"/>
|
|
</Border>
|
|
<TextBlock Grid.Column="1"
|
|
Text="Use reusable water bottle"
|
|
FontSize="14"
|
|
Foreground="#90A4AE"
|
|
Margin="10,0,0,0"
|
|
VerticalAlignment="Center"
|
|
TextDecorations="Strikethrough"/>
|
|
</Grid>
|
|
</Border>
|
|
|
|
<!-- Task 2: completed -->
|
|
<Border CornerRadius="10" Background="White" Padding="12,10">
|
|
<Grid ColumnDefinitions="Auto,*">
|
|
<Border Width="24" Height="24" CornerRadius="6"
|
|
Background="#4CAF50"
|
|
VerticalAlignment="Center">
|
|
<PathIcon Width="14" Height="14"
|
|
Data="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
|
|
Foreground="White"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center"/>
|
|
</Border>
|
|
<TextBlock Grid.Column="1"
|
|
Text="Walk or bike to work"
|
|
FontSize="14"
|
|
Foreground="#90A4AE"
|
|
Margin="10,0,0,0"
|
|
VerticalAlignment="Center"
|
|
TextDecorations="Strikethrough"/>
|
|
</Grid>
|
|
</Border>
|
|
|
|
<!-- Task 3: completed -->
|
|
<Border CornerRadius="10" Background="White" Padding="12,10">
|
|
<Grid ColumnDefinitions="Auto,*">
|
|
<Border Width="24" Height="24" CornerRadius="6"
|
|
Background="#4CAF50"
|
|
VerticalAlignment="Center">
|
|
<PathIcon Width="14" Height="14"
|
|
Data="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
|
|
Foreground="White"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center"/>
|
|
</Border>
|
|
<TextBlock Grid.Column="1"
|
|
Text="Meatless meal"
|
|
FontSize="14"
|
|
Foreground="#90A4AE"
|
|
Margin="10,0,0,0"
|
|
VerticalAlignment="Center"
|
|
TextDecorations="Strikethrough"/>
|
|
</Grid>
|
|
</Border>
|
|
|
|
<!-- Task 4: not completed -->
|
|
<Border CornerRadius="10" Background="White" Padding="12,10">
|
|
<Grid ColumnDefinitions="Auto,*">
|
|
<Border Width="24" Height="24" CornerRadius="6"
|
|
Background="#E0E0E0"
|
|
VerticalAlignment="Center"/>
|
|
<TextBlock Grid.Column="1"
|
|
Text="30-min shorter shower"
|
|
FontSize="14"
|
|
Foreground="#1A2E1C"
|
|
Margin="10,0,0,0"
|
|
VerticalAlignment="Center"/>
|
|
</Grid>
|
|
</Border>
|
|
|
|
<!-- Task 5: not completed -->
|
|
<Border CornerRadius="10" Background="White" Padding="12,10">
|
|
<Grid ColumnDefinitions="Auto,*">
|
|
<Border Width="24" Height="24" CornerRadius="6"
|
|
Background="#E0E0E0"
|
|
VerticalAlignment="Center"/>
|
|
<TextBlock Grid.Column="1"
|
|
Text="Sort recycling"
|
|
FontSize="14"
|
|
Foreground="#1A2E1C"
|
|
Margin="10,0,0,0"
|
|
VerticalAlignment="Center"/>
|
|
</Grid>
|
|
</Border>
|
|
|
|
</StackPanel>
|
|
|
|
</StackPanel>
|
|
</ScrollViewer>
|
|
|
|
</UserControl>
|
|
|