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
Dashboard Desktop
Dashboard Tablet
Dashboard Mobile
interface gráfica que funciona simultaneamente em site
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.
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.
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.
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.
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.
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.
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.