Files
Clario/Clario/Views/LockscreenView.axaml
2026-03-19 04:03:19 +03:00

94 lines
5.9 KiB
XML

<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="1400" d:DesignHeight="800"
x:Class="Clario.Views.LockscreenView">
<Panel>
<Border ZIndex="3" Background="#d11e1e2e" MinWidth="400" MinHeight="200" HorizontalAlignment="Left" VerticalAlignment="Top"
BorderBrush="{DynamicResource AccentBlue}" BorderThickness="2" Margin="4" CornerRadius="{StaticResource RadiusIcon}">
<Grid RowDefinitions="Auto,*" Margin="12" RowSpacing="12">
<TextBox Grid.Row="0" Height="48" Background="#d1181825" VerticalContentAlignment="Center" Watermark="Search..." Padding="20 0" FontSize="18"/>
<StackPanel Grid.Row="1" Spacing="8">
<Button Classes="nav" Classes.active="True" Content="📸 Camera" Margin="0" Foreground="{DynamicResource TextPrimary}"
HorizontalAlignment="Stretch" FontSize="18"
FontWeight="SemiBold" Padding="8 12" />
<Button Classes="nav" Content="🎵 Music" Margin="0" Foreground="{DynamicResource TextPrimary}" HorizontalAlignment="Stretch" FontSize="18"
FontWeight="SemiBold" Padding="8 12" />
<Button Classes="nav" Content="🌐 Browser" Margin="0" Foreground="{DynamicResource TextPrimary}" HorizontalAlignment="Stretch"
FontSize="18" FontWeight="SemiBold" Padding="8 12" />
<Button Classes="nav" Content="🎮 Game" Margin="0" Foreground="{DynamicResource TextPrimary}" HorizontalAlignment="Stretch" FontSize="18"
FontWeight="SemiBold" Padding="8 12" />
<Button Classes="nav" Content="☁️ Weather" Margin="0" Foreground="{DynamicResource TextPrimary}" HorizontalAlignment="Stretch"
FontSize="18" FontWeight="SemiBold" Padding="8 12" />
</StackPanel>
</Grid>
</Border>
<!-- here I have 2 image layers cuz the blur on 2nd one pulls the edges a bit inwards so the 1st one is there to cover that area -->
<Image ZIndex="-1" Source="../Assets/diner-lonely-road.jpg" Stretch="UniformToFill" />
<Image ZIndex="-1" Source="../Assets/diner-lonely-road.jpg" Stretch="UniformToFill">
<Image.Effect>
<BlurEffect Radius="25"></BlurEffect>
</Image.Effect>
</Image>
<!-- 70% tint -->
<Border Background="#1E2330" Opacity="0.7" />
<!-- Clock - Date -->
<StackPanel HorizontalAlignment="Center" Margin="0 40">
<TextBlock Text="23:31" FontSize="132" HorizontalAlignment="Center" FontWeight="Bold" />
<TextBlock Text="Wednesday - 10 March 2026" FontSize="13" FontWeight="SemiBold" HorizontalAlignment="Center" />
</StackPanel>
<!-- Login -->
<Border VerticalAlignment="Bottom" Width="300" Margin=" 0 80">
<StackPanel>
<!-- pfp with border -->
<Border CornerRadius="25" BorderBrush="#1A2240" BorderThickness="2" Height="54" Width="54">
<Image Source="../Assets/eddypfp.png" Height="50">
<Image.Clip>
<RectangleGeometry Rect="0,0,50,50" RadiusX="25" RadiusY="25"></RectangleGeometry>
</Image.Clip>
</Image>
</Border>
<!-- spacer -->
<Border Height="8" />
<!-- Password textbox + confirm button -->
<Grid ColumnDefinitions="*,Auto" ColumnSpacing="8">
<TextBox Grid.Column="0" Watermark="Password" FontSize="13" Height="36" Padding="12,0" VerticalContentAlignment="Center" Opacity="1" />
<Button Grid.Column="1" Height="36" Width="36" CornerRadius="{DynamicResource RadiusControl}" Background="#7B9CFF"
BorderThickness="1" BorderBrush="{DynamicResource BorderAccent}" Padding="6">
<Svg Path="../Assets/Icons/chevron-right.svg" Css="path { stroke: #0D0F14; }"></Svg>
</Button>
</Grid>
</StackPanel>
</Border>
<!-- Media -->
<Border Width="300" Height="50" Background="#13161E" CornerRadius="{DynamicResource RadiusControl}" VerticalAlignment="Bottom"
Margin="0 20">
<Grid ColumnDefinitions="Auto,*,Auto" Margin="10 0" ColumnSpacing="10">
<Svg Grid.Column="0" Path="../Assets/Icons/audio-lines.svg" Height="25" />
<Grid RowDefinitions="*,Auto" Grid.Column="1" VerticalAlignment="Center">
<TextBlock Grid.Row="0" Text="I just might - Bruno Mars" VerticalAlignment="Center" FontSize="13" />
<Grid Grid.Row="1" ColumnDefinitions="Auto,*,Auto" VerticalAlignment="Bottom" ColumnSpacing="4">
<!-- current time -->
<TextBlock Grid.Column="0" Text="0:52" FontSize="10" Foreground="#7A8090" />
<ProgressBar Grid.Column="1" Maximum="100" Minimum="0" Value="25" Height="3" VerticalAlignment="Center" MinWidth="0" />
<!-- total time -->
<TextBlock Grid.Column="2" Text="3:32" FontSize="10" Foreground="#7A8090" />
</Grid>
</Grid>
<!-- play/pause button -->
<Button Grid.Column="2" Height="30" Width="30" Classes="nav" Padding="6">
<Svg Path="../Assets/Icons/pause.svg" Css="path, rect { stroke: #7A8090; }" />
</Button>
</Grid>
</Border>
</Panel>
</UserControl>