Desenvolver Html, Css e Javascript de projeto!

Overview
It is a CRM that has usability as its main feature, so it is imperative that the html and css are perfectly reproduced. Some subscreens are marked with a red square. Total of 17 main screens and 19 variations.


Technology
- Responsive
- css 3
- html 5
- javascript

forms
- on / off, checkbok, radio button stylized with css
- do not use select input. On filters and selections, use javascript, to show new content and screens as well as in the corrector image (07 - desk - filtro-data.jpg)
- Use datapicker for date selection

About the project
- CSS avatars (with initials)
- Tablet follows is similar to mobile, showing only the same things
- Do not use images anywhere in the project, only SVG (Logo and icons)
- Lines at the background of the header please disregard eg: "01 - desk - home-pa"
- Filters on mobile always 100% width as (06 - desk - filtro-data)
- In some cases on mobile, the option appears to click on the down arrow to see more according to the file (admin 02 - mob - pedidos)
- Set Mouse Over, PlaceHolder, of Header Items as (nav)
- Set Menu Mouse Over (Linke in layout "Meus Dados, Meus Pedidos, Configurações" etc ...) Always with blue rounded corners as layout
- Set Mouse Over where there are gray icons to blue icons eg Whatsapp, phone, message icons
- The other links (Texts in blue with the exception of the header in the yellow part) receive underline as mouse over.
- Pay attention to the active state in the filter buttons


Screens in "Final.zip"
- Login (00 - desk - login.fw)

- home first access (01 - desk - home-pa)
- - - - home alerts (01 1 - desk - alertas)
- - - - home search (01 2 - desk - busca)
- - - - home menu (01 3 - desk - menu)

- home (02 - desk - home)

- Contacts - Make js and css the option to open and close a contact, as well as the 4th contact (05 - desk - contatos)
- - - - negative option (05 2 - desk - contatos)
- - - - data filter (06 - desk - filtro-data)
- - - - custom date filter (07 - desk - filtro-personalizado)
- - - - status filter (08 - desk - filtro-status)
- - - - other filters (09 - desk - filtro-outros)
- - - - mass action (10 - desk - acao-em-massa) desktop only

- add contact (03 - desk - adicionar-contato) desktop only

- internal contact (11 - desk - contatos-interna)
- - - - edit filter activities (12 - filtro)
- - - - edit basic data (13 - desk - editar-dados-basicos) desktop only
- - - - edit company data (14 - desk - dados-da-empresa) desktop only
- - - - edit location (15 - desk - localizacao) desktop only
- - - - edit social networks (16 - desk - redes-sociais) desktop only
- - - - edit source (17 - desk - origem) desktop only
- - - - edit task (18 - desk - editar-tarefa) desktop only
- - - - edit task data picker (19 - desk - editar-tarefa-data-picker) desktop only
- - - - edit comment (20 - desk - editar-comentario) desktop only
- - - - contact added (05 - desk - adicionar-contato) desktop only

- my data (21 - desk - meus-dados-com-gestor)

- my orders (22 - desk - meus-pedidos)

- settings (23 - desk - configuracao-sem-gestor) desktop only

- users (24 - desk - usuarios)

- internal user (25 - desk - usuario-interna)

- add user (desk - 19 - adicionar-usuarios) desktop only

- admin home (admin 01 - desk - home)

- orders (admin 02 - desk - pedidos)

- contacts queue (admin 03 - desk - fila-de-contatos)

- campaigns (admin 04 - desk - campanhas)

- settings (admin 05 - configuracoes) desktop only


------------------------------


visão geral
se trata de um crm que tem como principal característica a usabilidade, por esse motivo é imperativo que o html e css sejam perfeitamente reproduzidos. Algumas subtelas estão marcadas com um quadrado vermelho para ver onde é a modificação. Total de 17 telas principais e 19 variações.



Tecnologia
- Responsivo
- css 3
- html 5
- javascript

formulários
- on/off, checkbok, radio button estilizados com css
- não usar select, filtros e seleções, usar javascript, para mostrar novos conteúdos e telas bem como na imagem corretor (07 - desk - filtro-data.jpg)
- Usar datapicker para seleção de data

Características 
- Avatars (Com letras) em CSS
- Tablet segue ideia de visualização do mobile, mostrando apenas as mesmas coisas
- Não usar imagens em parte alguma do projeto, apenas SVG (Logo e ícones) 
- linhas no fundo do cabeçalho favor desconsiderar ex.: "01 - desk - home-pa"
- Filtros no mobile sempre 100% largura conforme  (06 - desk - filtro-data)
- Em alguns casos no mobile aparece a opção de clicar na seta para baixo para ver mais conforme arquivo ( admin 02 - mob - pedidos )
- Definir Mouse Over, PlaceHolder, dos Itens do cabeçalho conforme (nav) 
- Definir Mouse Over do Menu (Meus Dados, Meus Pedidos, Configurações etc...) Sempre com cantos arredondados em azul conforme layout
- Definir Mouse Over onde estão apenas ícones do cinza para o azul ex.: Whatsapp, phone, message icons
- Os demais links (Textos em azul com exceção do cabeçalho na parte amarela) recebem underline como mouse over.
- Ficar atento para o estado de ativo nos botões de filtro 

Telas  
- Login (00 - desk - login.fw)

- home primeiro acesso (01 - desk - home-pa)
- - - - home alertas (01 1 - desk - alertas)
- - - - home busca (01 2 - desk - busca)
- - - - home menu (01 3 - desk - menu)   

- home (02 - desk - home)

- Contatos - Fazer com JS e CSS a opção de abrir e fechar um contato, bem como o 4º contato (05 - desk - contatos)
- - - -  Opção Negativado (05 2 - desk - contatos)
- - - -  Filtro Data (06 - desk - filtro-data) 
- - - -  Filtro Data Personalizado (07 - desk - filtro-personalizado)   
- - - -  Filtro Status (08 - desk - filtro-status)    
- - - -  Outros Filtros (09 - desk - filtro-outros )
- - - -  Ação em Massa (10 - desk - acao-em-massa )  Somente Desktop

- Adicionar Contato (03 - desk - adicionar-contato) Somente Desktop  

- Contato Interna ( 11 - desk - contatos-interna) 
- - - -  Editar Filtro Atividades (12 - filtro)      
- - - -  Editar Dados Básicos (13 - desk - editar-dados-basicos) Somente Desktop
- - - -  Editar Dados da Empresa (14 - desk - dados-da-empresa) Somente Desktop
- - - -  Editar Localização (15 - desk - localizacao) Somente Desktop   
- - - -  Editar Redes Sociais (16 - desk - redes-sociais) Somente Desktop  
- - - -  Editar Origem (17 - desk - origem) Somente Desktop   
- - - -  Editar Tarefa ( 18 - desk - editar-tarefa) Somente Desktop 
- - - -  Editar Tarefa Data Picker (19 - desk - editar-tarefa-data-picker) Somente Desktop
- - - -  Editar Comentário (20 - desk - editar-comentario) Somente Desktop    
- - - -  Contato Adicionado (05 - desk - contato-adicionado) Somente Desktop

- Meus Dados (21 - desk - meus-dados-com-gestor)

- Meus Pedidos (22 - desk - meus-pedidos)

- Configurações (23 - desk - configuracao-sem-gestor) Somente Desktop

- Usuários (24 - desk - usuarios)

- Usuário Interna  (25 - desk - usuario-interna)  

- Adicionar Usuário (desk - 19 - adicionar-usuarios) Somente Desktop

- Admin Home (admin 01 - desk - home)

- Pedidos (admin 02 - desk - pedidos)

- Fila de Contatos (admin 03 - desk - fila-de-contatos)

- Campanhas (admin 04 - desk - campanha)

- Configurações (admin 05 - configuracoes)Somente Desktop