/Compass_Project-4

Keepalive Project

Primary LanguageCSS

Logo compass

šŸ§­ Keepalive

Tela de login

Projeto desenvolvido durante a Sprint 4. O projeto consiste em uma plataforma para colaboradores da Compass consigam acessar com seguranƧa e usufruir das funcionalidades disponƭveis.

Status GitHub last commit

ā­ Ć­ndice

Funcionalidades

  • AutenticaĆ§Ć£o de usuĆ”rio
  • Captura e exibiĆ§Ć£o de hora e data
  • Temporizador de tempo logado para encerramento ou permanĆŖncia da sessĆ£o
  • Armazenamento de informaƧƵes no LocalStorage (Chave da sessĆ£o)
  • BotĆ£o de encaminhamento para blog da Compass
  • BotĆ£o de logout da sessĆ£o

Funcionalidades Ć  implementar

  • Captura e exibiĆ§Ć£o da cidade atual de quem acessa
  • Captura e exibiĆ§Ć£o da temperatura atual de quem acessa

Screenshots

  • Tela login

Tela de login. Ao lado esquerdo da tela temos campos para inserĆ§Ć£o de login e senha, e um texto instruindo ao usuĆ”rio a logar. Ao lado direito da tela temos a imagem de um notebook semi aberto e acima da imagem do notebook temos o logo da Compass.uol

  • Tela erro login

Tela de login com detalhes em amarelo para alertar erro do login. Ao lado esquerdo da tela temos campos para inserĆ§Ć£o de login e senha com bordas em amarelo e abaixo dos campos um texto de erro de autenticaĆ§Ć£o tambĆ©m em amarelo

  • Tela Home

Tela home. Fundo branco, acima temos um cabeƧalho da pĆ”gina contendo a logo Compass.uol, a direita temos a exibiĆ§Ć£o das horas, logo abaixo o dia da semana com data completa, e no canto superior direito temos o nome da cidade, estado e a temperatura em graus. No corpo da pĆ”gina temos o Ć­cone bola que representa a Uol e mais a direita frases em inglĆŖs contendo a missĆ£o da empresa e abaixo a traduĆ§Ć£o em pt-br. No rodapĆ© da pĆ”gina temos um texto informativo, um temporizador de tempo logado, um botĆ£o com um texto de 'continue navegando' e outro botĆ£o com o texto 'logout'

DocumentaĆ§Ć£o de cores

Cores Hexadecimal Cor correspondente
Black #000000 #000000
White #ffffff #ffffff
Ice #E0E0E0 #E0E0E0
Gray #222222 #222222
Strong red #C12D18 #C12D18
Tomato red #C13216 #C13216
Golden yellow #E9B425 #E9B425
Mustard yellow #E29933 #E29933
Bluish gray #26292C #26292C
Shy black #00000026 #00000026

šŸ‘Øā€šŸ’» Skills aplicadas e desenvolvidas

JavaScript HTML5 SASS CSS3 Git

šŸ’¼ Ferramentas utilizadas

Visual Studio Code GitHub Figma Trello

Autor

Avatar do Jeferson Tavares no GitHub