Skip to content

Commit

Permalink
Página Login - Desenvolvimento
Browse files Browse the repository at this point in the history
  • Loading branch information
@luizpaulo165
luizpaulo165 committed Jun 9, 2020
1 parent 48c563b commit d6dac1e
Show file tree
Hide file tree
Showing 15 changed files with 495 additions and 18 deletions.
1 change: 1 addition & 0 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ gulp.task('watch', () => {
gulp.task('connect', () => {
connect.server({
root: 'public',
host: '192.168.0.5',
port: 3000,
livereload: true,
fallback: 'public/index.html'
Expand Down
Binary file removed public/images/auth/banner_mobile.jpg
View file
Binary file not shown.
Binary file added public/images/auth/banner_mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions public/images/icons/facebook.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions public/images/icons/see_open.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="theme-color" content="#FF761A" />
<meta name="msapplication-navbutton-color" content="#FF761A">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="icon" sizes="128x128" href="/favicon.png">
<link rel="icon" type="image/png" href="/favicon.png">
<title>ProteinNow</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,700&display=swap" media="none" onload="if(media!='all')media='all'">
Expand Down
94 changes: 94 additions & 0 deletions src/app/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,97 @@ ul {
a {
text-decoration: none;
}


.back-page{
width:32px;
height:32px;
display:flex;
align-items: center;
justify-content: center;
border-radius:100px;

img{
height:20px;
position: relative;
left:-2px;
}
}

.btn{
font-style: normal;
font-weight: 600;
font-size: 16px;
text-align: center;
color: #fff;
background:#000;
height:53px;
display:flex;
justify-content: center;
align-items: center;
border:2px solid #000;
padding:0 30px;
border-radius:15px;
cursor: pointer;
transition:0.2s all;

&:hover{
background:rgba(0,0,0,0.8);
transition:0.4s all;
}

img{
width: 11px;
margin-right: 10px;
}

&.orange{
background:#FF7C1D;
border-color:#FF7C1D;
color:#fff;

&:hover{
background:rgba(255, 124, 29, 0.8);
transition:0.4s all;
}
}
&.blue{
background:#1F2EB7;
border-color:#1F2EB7;
color:#fff;

&:hover{
background:rgba(31, 46, 183, 0.8);
transition:0.4s all;
}
}

&.outline{
background:transparent;
color:#000;

&:hover{
background:rgba(0,0,0,0.1);
transition:0.4s all;
}

&.orange{
border-color:#FF7C1D;
color:#FF7C1D;

&:hover{
background:rgba(255, 124, 29, 0.1);
transition:0.4s all;
}
}
&.blue{
border-color:#1F2EB7;
color:#1F2EB7;

&:hover{
background:rgba(31, 46, 183, 0.1);
transition:0.4s all;
}
}
}
}
2 changes: 1 addition & 1 deletion src/app/components/col/col.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ $breakpoint: (
// xs: 575,575
xs: 0,
sm: 690,
md: 768,
md: 840,
lg: 992,
xl: 1200
);
Expand Down
5 changes: 4 additions & 1 deletion src/app/components/layouts/auth/auth.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@ <h1>
<div banner-auth>
<slot name="banner">
<div content-banner-auth>
<h3>Receba se quando quiser em qualquer lugar</h3>
<router-link to="/" class="back-page white">
<img src="../images/icons/arrow_left_white.svg" alt="Voltar para a Homepage">
</router-link>
<h3>Receba onde quiser em qualquer lugar</h3>
<h4>Entre na sua conta e aproveite as melhores ofertas</h4>
</div>
</slot>
Expand Down
92 changes: 83 additions & 9 deletions src/app/components/layouts/auth/auth.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
flex-direction:row;

@include mq('md'){
flex-direction: row;
flex-direction: column;
}
@include mq('sm'){
flex-direction: column;
Expand All @@ -26,7 +26,7 @@

&[web]{
@include mq('md'){
width:50vw;
display:none;
}
@include mq('sm'){
display:none;
Expand All @@ -37,17 +37,25 @@
}

&[mobile]{
display:none!important;
display:none;

@include mq('md'){
width:100vw;
display:flex;
flex-direction:column;
padding:30px;
}
@include mq('sm'){
width:100vw;
display:flex;
flex-direction:column;
padding:30px;
}
@include mq('xs'){
width:100vw;
display:flex;
flex-direction:column;
padding:30px 10px;
}
}

Expand All @@ -57,36 +65,58 @@

[content]{
max-width:446px;
min-height:530px;
// max-height:530px;
margin:0 auto;
overflow:hidden;
}
}
[banner-auth]{
background-image:url('../images/auth/banner.jpg');
background-position:top left;
background-repeat: no-repeat;
background-size:cover;
background-color:#C4C4C4;
width:55vw;
display:flex;
align-items: center;
justify-content: flex-start;
padding:60px;
position: relative;
box-sizing: border-box;

@include mq('md'){
width:50vw;
background-image:url('../images/auth/banner_mobile.png');
background-position:top right;
width:100vw;
min-height:320px;
align-items: flex-end;
padding:30px;
}
@include mq('sm'){
background-image:url('../images/auth/banner_mobile.jpg');
background-image:url('../images/auth/banner_mobile.png');
background-position:top right;
width:100vw;
height:338px;
min-height:320px;
align-items: flex-end;
padding:30px;
}
@include mq('xs'){
background-image:url('../images/auth/banner_mobile.jpg');
background-image:url('../images/auth/banner_mobile.png');
background-position:top right;
width:100vw;
height:338px;
min-height:320px;
align-items: flex-end;
padding:30px;
}

[content-banner-auth]{
@include mq('xs'){
height: 100%;
display:flex;
justify-content: space-between;
align-items: flex-start;
flex-direction: column;
}
}

h3{
Expand All @@ -95,12 +125,56 @@
line-height: 55px;
color: #FFFFFF;
margin-bottom:20px;

@include mq('md'){
font-size:37px;
line-height:45px;
}
@include mq('sm'){
font-size:36px;
line-height:42px;
width:75%;
}
@include mq('xs'){
font-size:36px;
line-height:42px;
width:75%;
}
}
h4{
font-size: 25px;
line-height: 30px;
color: #FFFFFF;
width:70%;

@include mq('md'){
font-size:37px;
line-height:45px;
}
@include mq('sm'){
display:none;
}
@include mq('xs'){
display:none;
}
}

.back-page{
display:none;
position:relative;
margin-bottom:50px;
top:0;
left:2px;

@include mq('md'){
display:block;
}
@include mq('sm'){
display:block;
}
@include mq('xs'){
display:block;
}
}
}
}
64 changes: 62 additions & 2 deletions src/app/pages/auth/auth.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,65 @@
<layout-auth>
<div slot="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, officiis illum. Eaque voluptatum ratione ea, aperiam reiciendis quos. Asperiores dignissimos pariatur vitae perferendis aliquam, facere itaque quis non adipisci? Vero.
<div login-page slot="content">
<div index-login v-if="$route.name == 'login'">
<div wrap-login-buttons>
<h4>Como você deseja entrar?</h4>
<router-link to="/entrar" class="btn outline black">Entrar com minha conta</router-link>
<button class="btn outline blue">
<img src="../images/icons/facebook.svg" alt="Facebook">
Entrar com facebook
</button>
</div>
<div wrap-create-buttons>
<h4>Ainda não tem conta?</h4>
<h5>Crie agora, é bem rápido :D</h5>
<router-link to="/criar-conta" class="btn outline orange">Criar minha conta</router-link>
</div>
</div>
<div index-create page-black v-if="$route.name == 'enter'">
<div header>
<router-link to="/login" class="back-page white">
<img src="../images/icons/arrow_left_white.svg" alt="Voltar para Login">
</router-link>
<h4>Olá!</h4>
<p>Preencha com os dados da sua conta para continuar</p>
</div>
<div form>
<div class="form-group">
<label for="email">Email</label>
<div class="input-group">
<input type="text" name="email" id="email-login">
</div>
</div>
<div class="form-group">
<label for="password">Senha</label>
<div class="input-group">
<input type="password" name="password" id="password-login">
<i><img src="../images/icons/see.svg"></i>
</div>
</div>
<div class="form-group">
<button>
<i><img src="../images/icons/locker.svg"></i> esqueceu a senha?
</button>
</div>
</div>
<div footer>
<button class="btn orange">Continuar</button>
</div>
</div>
<div index-create page-black v-if="$route.name == 'create'">
<div header>
<router-link to="/login" class="back-page white">
<img src="../images/icons/arrow_left_white.svg" alt="Voltar para Login">
</router-link>
<h4>Complete com os seus dados</h4>
</div>
<div form>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate, consectetur. Commodi sed delectus eveniet, magnam cum possimus ea dolorum optio reprehenderit, fuga quae a perspiciatis accusamus voluptas error odit corporis in. Eius, nesciunt? Cupiditate repellat quis vel perferendis dicta, molestias, porro quisquam, est quos laudantium aliquam minima reprehenderit in nisi pariatur nemo dolore possimus atque voluptates expedita iste? Quasi est temporibus obcaecati vero voluptatibus voluptas, illo modi hic laboriosam voluptates ducimus consectetur maiores sequi accusamus soluta tempore nemo fugit nostrum harum exercitationem neque sint magnam! Hic officiis distinctio consequuntur aliquam nobis, vel nesciunt suscipit tenetur in, nulla impedit et. Quidem accusamus fugiat iure libero vitae illum provident expedita distinctio rerum, nesciunt perferendis voluptates fugit facilis perspiciatis et a! Corporis neque delectus in vero dolorem iusto, est modi, ab laboriosam distinctio qui adipisci quod at assumenda cupiditate nostrum perferendis itaque, inventore repellendus obcaecati fugit. Ad, rem incidunt amet asperiores iusto pariatur id dicta voluptate minus, facilis aspernatur illum optio molestiae commodi nemo unde reprehenderit quo aliquid temporibus ipsum placeat. Dignissimos expedita aliquam iure officiis rerum ullam placeat velit eum vero id dolorem itaque voluptatum nemo incidunt ea suscipit deserunt in earum consectetur, iusto labore esse, odit magnam? Amet voluptates nam sint.
</div>
<div footer>
<button class="btn orange">Continuar</button>
</div>
</div>
</div>
</layout-auth>
Loading

0 comments on commit d6dac1e

Please sign in to comment.