Finange Frontend!

  • By Finange
  • Last update: Nov 7, 2022
  • Comments: 7

finange-front

Iniciando Codigo de front-end

Cores base da logo

Ref azul : #1B1464

Ref verde: #00EA3D

Cores base do site

Ref Azul: #0575E6

Ref Verde: #00F260

Projeto open source para gerenciamento financeiro através de um bot para o telegram com uma

interface gráfica que funciona simutaniamente em site

Pagina de login

preview

Dashboard Desktop

preview

Dashboard Tablet

preview

Dashboard Mobile

preview

interface gráfica que funciona simultaneamente em site

Github

https://github.com/Finange/finange-front

Comments(7)

  • 1

    Adicionando uma nova pagina de login

    Adições feitas:

    • Nova interface na tela de login. • Espaço para imagens promocionais na versão desktop. • telas responsivas para tablets de até 820px e celulares de até 400px.

    Additions made:

    • New interface on the login page. • Space for promotional images in the desktop version. • responsive screens for tablets up to 820px and mobiles up to 400px.

  • 2

    Utilizando as variáveis do globalStyle.css

    Eu tomei a liberdade para "padronizar" os styles com as variáveis globais, não fiz em todos os arquivos por causa de gradiente, também a falta de mais padrões de cores, por exemplo, "--red" e "--dark_red" e em algumas partes as cores eram bem distintas e poderiam mudar drásticamente a estilização da página.

    Na maioria das alterações continham algum nível de opacidade, eu retirei a opacidade (apenas deixei comentado para facilitar a localização e alteração, caso necessário) e se eu mantivesse o mesmo valor na opacidade que tinha no RGBA ficaria muito escuro, por isso tomei essa decisão.

    Uma observação é que os icones da página de dashboard, todos são brancos e talvez o contraste do icone da carteira (saldo atual) pode causar uma estranheza já que nesse caso o background-image é um gradiente do branco para cinza.

  • 3

    alteraçao do background e add animacao acessar telegram

    Alteração no background da pagina principal, pois o verde estava muito claro ( quente) dificultando a leitura das informações, também adcionei uma animação no botão de "Acessar com o telegram" na página de login.

  • 4

    Mural dos contribuidores

    Seria legal ter um mural na parte institucional, com um mural com as informações basicas (link do github, foto, nome) das pessoas que estão contribuindo no projeto. Isso, para aqueles que quiserem ter claro.

  • 5

    Botão para colocar o site em inglês

    Sabe aqueles sites que, quando você clica no botão "inglês", o site traduz todo pro inglês... Então, aqui a ideia é ter isso no nosso site, afinal, inglês é a lingua mundial da programação.

  • 6

    Função para criar conexão com API

    Aqui a ideia é que o frontend vai consumir a nossa API para pegar os dados dos usuarios que tiverem interagindo no bot, então, precisamos ter uma função que faça essa conexão e manipule uma API, para depois só substituirmos pela nossa API.

  • 7

    Criar pagina institucional

    Criar uma pagina dentro do frontend com intuito de explicar todos os detalhes do nosso projeto, como se fosse uma pagina institucional, literalmente uma, no caso kkk

    Essa pagina deve ter as explicações sobre o nosso projeto, o que é, para que serve, informações dos repositorios, link do grupo no telegram, tem que falar sobre nossas calls no domingo, etc.