Terminado

Desenvolver Html, Css e Javascript de projeto!

Publicado el 09 Marzo, 2020 en Programación y Tecnología

Sobre este proyecto

USD 250 - 500

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

Categoría Programación y Tecnología
Subcategoría Diseño Web
¿Cuál es el alcance del proyecto? Cambio mediano
¿Es un proyecto o una posición? Un proyecto
Actualmente tengo Tengo el diseño
Disponibilidad requerida Según se necesite
Experiencia en este tipo de proyectos Sí (He administrado este tipo de proyectos anteriormente)
Necesidad específica Otro
Otro Diseño Web Desenvolver HTML, CSS e Javascript

Fecha de entrega: 29 Octubre, 2020

Habilidades necesarias

CSS Responsive Web Design HTML5 JavaScript

¿Te gustaría comenzar a trabajar en este proyecto?

Ingresa con tu cuenta de Workana o Regístrate. ¡Potencia tu trabajo freelance!

Otros proyectos publicados por F. C.