Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

✨ add login page

Browse Source
This commit is contained in:
Alex Santos 2022-05-05 11:40:27 -03:00
parent 9ab5863dc2
commit 9d288dbaa4
6 changed files with 142 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/_document.tsx
View File

@ -35,7 +35,7 @@ export default class MyDocument extends Document {
<Html> <Html>
<Head> <Head>
<link rel="preconnect" href="https://fonts.googleapis.com"/> <link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet"></link> <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet"></link>
</Head> </Head>
<body> <body>

30
pages/index.tsx
View File

@ -1,13 +1,31 @@
import React from 'react' import React from 'react'
import Image from 'next/image';
import { LoginView} from '../styles/layouts/Login/LoginView';
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
export default function Home() { export default function Home() {
return ( return (
<main> <LoginView>
<h1>Index.js</h1> <Image src='/assets/marca1.svg' width={600} height={700}/>
</main>
<section className="container">
<h1>Bem-Vindo</h1>
<h2>Estratégias Inteligentes em <br/> Gestão de Energia</h2>
<input type="text" placeholder='Login'/>
<input type="text" placeholder='Senha'/>
<span>Esqueceu a senha ?</span>
<button>ENTRAR</button>
<fieldset>
<legend>Ou</legend>
</fieldset>
<p>+55(41) 3012-5900
<br /> www.energiasmart.com.br</p>
</section>
</LoginView>
) )
} }

3
public/assets/Vector4.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="380" height="1" viewBox="0 0 380 1" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.272217 0.564575L379.052 0.564556" stroke="#E1E1E1" stroke-width="0.7"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 187 B

9
public/assets/marca1.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 859 KiB

0
styles/layouts/Dashboard/DashboardView.ts Normal file
View File

105
styles/layouts/Login/LoginView.ts Normal file
View File

@ -0,0 +1,105 @@
import styled from 'styled-components';
export const LoginView = styled.main`
display: flex;
align-items: center;
justify-content: center;
margin-left: 10rem;
.container{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #F9F9F9;
height: 34rem;
width: 49rem;
margin-left: 10rem;
margin-top:4rem;
color: #092C4C;
text-align: center;
border-radius: 4px;
}
h1{
margin-bottom:5px;
color: #092C4C;
}
h2{
font-weight: 5;
font-size: 21px;
margin-bottom: 3rem;
color: #092C4C;
}
input{
width: 30rem;
height: 15rem;
border-radius: 5px;
margin-bottom: 10px;
border-style: none;
border: solid #D0D0D0 1px;
}
button{
width: 30rem;
height: 18rem;
background-image: linear-gradient(to right, #254F7F 10%, #888888 100%);
color: white;
font-size: 15px;
border-radius: 5px;
border: 0;
margin-top: 2.5rem;
}
input::placeholder {
color: #ABB3BB;
font-size: 12px;
}
span{
margin-left: 23rem;
font-size: 12px;
color: #254F7F;
}
p{
color:#8B8B8B;
font-size: 12px;
margin-bottom: 22px;
}
fieldset {
border-top: 0.7px solid #E1E1E1;
border-bottom: none;
border-left: none;
border-right: none;
display: block;
text-align: center;
width: 30rem;
}
fieldset legend {
padding: 19px 56px;
color: #ABB3BB;
font-size: 14px;
}
img{
/* background-color: black; */
display: none;
}
@media (max-width: 1150px) {
img{visibility:hidden }
}
`;