added first half of the login page

pull/11/head
Maxime BATISTA 2 years ago
parent 57c94622be
commit e7249163b1

@ -5,7 +5,7 @@
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ShoopNCook"
xmlns:views="clr-namespace:ShoopNCook.Views"
Shell.FlyoutBehavior="Disabled">
Shell.NavBarIsVisible="False">
<TabBar>
<ShellContent
@ -15,7 +15,7 @@
<ShellContent
Title="Test Page"
ContentTemplate="{DataTemplate local:MainPage}"
Route="MainPage" />
ContentTemplate="{DataTemplate views:LoginPage}"
Route="LoginPage" />
</TabBar>
</Shell>

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M140.109 912.674q-30.746 0-54.025-23.447-23.28-23.447-23.28-53.857V316.63q0-30.509 23.28-54.026 23.279-23.517 54.025-23.517h679.782q30.845 0 54.194 23.517 23.35 23.517 23.35 54.026v518.74q0 30.41-23.35 53.857-23.349 23.447-54.194 23.447H140.109ZM480 609.304 140.109 387.065V835.37h679.782V387.065L480 609.304Zm0-73.152L818.696 316.63H142.304L480 536.152ZM137.304 387.065V316.63v518.74H140.109h-2.805V387.065Z"/></svg>

After

Width:  |  Height:  |  Size: 512 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M220.63 997.043q-32.19 0-54.747-22.556-22.557-22.557-22.557-54.748v-432.5q0-32.624 22.557-55.084 22.557-22.459 54.747-22.459h56.805v-90.739q0-85.228 59.245-144.636 59.246-59.408 143.234-59.408 83.989 0 143.32 59.408 59.331 59.408 59.331 144.636v90.739h56.805q32.289 0 54.916 22.459 22.627 22.46 22.627 55.084v432.5q0 32.191-22.627 54.748-22.627 22.556-54.916 22.556H220.63Zm0-77.304h518.74v-432.5H220.63v432.5Zm259.618-133.522q34.035 0 57.817-23.514 23.783-23.514 23.783-56.534 0-32.082-24.031-57.984-24.03-25.902-58.065-25.902t-57.817 25.947q-23.783 25.947-23.783 58.48 0 32.631 24.031 56.069 24.03 23.438 58.065 23.438ZM354.739 409.696h250.522v-90.684q0-53.389-36.478-89.972-36.478-36.583-88.727-36.583-52.248 0-88.782 36.583-36.535 36.583-36.535 89.972v90.684ZM220.63 919.739v-432.5 432.5Z"/></svg>

After

Width:  |  Height:  |  Size: 896 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M637.326 640.261 579.826 582q23.043-65.348-25.837-106.946-48.88-41.597-101.424-20.315l-56.826-56.065q17-10.283 39.468-15.685 22.467-5.402 45.181-5.402 74.159 0 126.092 51.933 51.933 51.933 51.933 126.092 0 22.475-5.402 45.423-5.402 22.949-15.685 39.226Zm135.065 135.304-49.956-50.956q47.804-35.761 83.608-79.941 35.805-44.179 53.522-89.084-51.478-110.867-151.652-175.986-100.175-65.12-218.37-65.12-41.545 0-85.512 7.761-43.966 7.761-66.444 18.283l-57.674-59.435q35.522-15.522 92.811-28.402 57.29-12.881 112.276-12.881 137.438 0 254.697 74.359 117.26 74.359 181.499 202.272 3.361 8.511 5.441 18.777 2.08 10.266 2.08 20.917 0 10.651-1.5 21.163t-6.26 18.034q-27 55.239-64.761 100.326-37.761 45.086-83.805 79.913Zm18.739 207.37L647.426 843.478q-34.752 14-78.643 21.359-43.89 7.359-88.783 7.359-140.531 0-258.885-74.359-118.354-74.359-182.072-203.511-4.76-8.522-6.26-18.034-1.5-9.512-1.5-20.163t2.38-21.792q2.38-11.141 5.38-18.902 20.24-41.478 50.837-81.576 30.598-40.098 71.598-77.816L61.435 255q-10.761-9.522-10.761-24.218t10.76-25.825q9.523-9.761 24.903-9.761 15.38 0 26.141 9.761l728.935 728.934q9.761 10.761 9.022 24.642-.739 13.88-9.116 23.371-10.439 11.792-25.553 11.792t-24.636-10.761ZM213.674 408.761q-35.239 28.717-67.38 69.359-32.142 40.641-46.62 77.88 51.647 111.862 154.682 176.692 103.035 64.83 233.644 64.83 28.761 0 57.38-3.62 28.62-3.619 42.816-10.859l-56.87-57.63q-9.761 3.761-23.732 6.38-13.972 2.62-27.594 2.62-73.505 0-125.959-51.454Q301.587 631.505 301.587 556q0-13.447 2.38-26.506 2.381-13.059 6.142-24.82l-96.435-95.913Zm317.717 133.043Zm-130.195 64.718Z"/></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M480.217 729.521q72.392 0 122.848-50.673 50.456-50.674 50.456-123.065 0-72.392-50.673-122.848-50.674-50.456-123.065-50.456-72.392 0-122.848 50.673-50.456 50.674-50.456 123.065 0 72.392 50.673 122.848 50.674 50.456 123.065 50.456Zm-.437-70.13q-42.588 0-72.879-30.512-30.292-30.511-30.292-73.099 0-42.588 30.512-72.879 30.511-30.292 73.099-30.292 42.588 0 72.879 30.512 30.292 30.511 30.292 73.099 0 42.588-30.512 72.879-30.511 30.292-73.099 30.292Zm.22 214.435q-142.305 0-259.283-77.261-116.978-77.261-181.833-204.599-4.467-6.828-6.523-16.354-2.057-9.525-2.057-19.346t2.057-19.701q2.056-9.88 6.523-18.097 64.843-125.604 181.827-202.949Q337.695 238.174 480 238.174t259.289 77.345q116.984 77.345 181.827 202.949 4.467 8.217 6.523 17.742 2.057 9.525 2.057 19.347 0 9.821-2.057 19.701-2.056 9.88-6.523 16.708-64.855 127.338-181.833 204.599T480 873.826ZM480 556Zm-.118 240.87q122.199 0 222.789-65.277Q803.261 666.317 857.043 556q-53.782-110.317-154.254-175.593-100.471-65.277-222.671-65.277-122.199 0-223.289 65.277Q155.739 445.683 101.957 556q53.782 110.317 154.754 175.593 100.971 65.277 223.171 65.277Z"/></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -41,4 +41,11 @@
<Color x:Key="Blue200Accent">#72ACF1</Color>
<Color x:Key="Blue300Accent">#A7CBF6</Color>
<Color x:Key="BackgroundPrimary">#f0e7e7</Color>
<Color x:Key="TextColorPrimary">Black</Color>
<Color x:Key="TextColorSecondary">#6d6d6d</Color>
<Color x:Key="ActionButton">#ff8988</Color>
</ResourceDictionary>

@ -48,6 +48,13 @@
<MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
</ItemGroup>
<ItemGroup>
<None Remove="Resources\Images\email_icon.svg" />
<None Remove="Resources\Images\password_icon.svg" />
<None Remove="Resources\Images\visibility_off.svg" />
<None Remove="Resources\Images\visibility_on.svg" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="7.0.0" />
</ItemGroup>

@ -0,0 +1,94 @@
<?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="ShoopNCook.Views.LoginPage"
Title="LoginPage"
BackgroundColor="{StaticResource BackgroundPrimary}">
<VerticalStackLayout
Margin="20, 75, 20, 20">
<Label
Text="Welcome Back!"
FontSize="32"
TextColor="{StaticResource TextColorPrimary}"
FontAttributes="Bold"
VerticalOptions="Start"
HorizontalOptions="Start" />
<Label
Text="Fill in your credentials or continue with social media"
FontSize="20"
TextColor="{StaticResource TextColorSecondary}"
VerticalOptions="Start"
HorizontalOptions="Start" />
<Border
StrokeThickness="1"
Stroke="{StaticResource BackgroundPrimary}"
StrokeShape="RoundRectangle 12"
Margin="0,30,0,20"
>
<Grid
Padding="5"
BackgroundColor="White"
ColumnDefinitions="Auto,Auto,*"
>
<Image
Grid.Column="1"
Source="email_icon.svg">
</Image>
<Entry
Grid.Column="2"
Placeholder="Mail address"
TextColor="Black"></Entry>
</Grid>
</Border>
<Border
StrokeThickness="1"
Stroke="{StaticResource BackgroundPrimary}"
StrokeShape="RoundRectangle 12"
>
<Grid
Padding="5"
BackgroundColor="White"
ColumnDefinitions="Auto,Auto,*,Auto">
<Image
Grid.Column="1"
Source="password_icon.svg">
</Image>
<Entry
Grid.Column="2"
Placeholder="Mail address"
TextColor="Black"></Entry>
<ImageButton
Grid.Column="3"
Source="visibility_off.svg"
HeightRequest="30">
</ImageButton>
</Grid>
</Border>
<Label
TextColor="{StaticResource TextColorSecondary}"
HorizontalOptions="End">
Forgot Password ?
</Label>
<Border
Margin="0, 30, 0, 0"
Stroke="{StaticResource BackgroundPrimary}"
StrokeShape="RoundRectangle 12">
<Label
HeightRequest="50"
BackgroundColor="{StaticResource ActionButton}"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center">
LOG IN</Label>
</Border>
</VerticalStackLayout>
</ContentPage>

@ -0,0 +1,9 @@
namespace ShoopNCook.Views;
public partial class LoginPage : ContentPage
{
public LoginPage()
{
InitializeComponent();
}
}
Loading…
Cancel
Save