Realizado

Criação de página Html com Js para site de ingressos

Publicado em 29 de Setembro de 2023 dias na TI e Programação

Sobre este projeto

Aberto

Eu tenho um website para venda de ingressos, ainda está bem no começo, eu realizei toda a programação com Django/Python, no entanto estou enfrentando problemas para criação de uma página específica devido a minha falta de conhecimento avançado em HTML, principalmente JavaScript/jQuery.

Essa página será utilizada para que algum organizador de evento a acesse, consiga colocar suas informações e adicionar todas as informações do evento e eu receba isso no backend.

Quem se interessar, eu passo a página que criei e uma que dá pra utilizar para se ter uma base.

Mas vamos lá, é uma seção de cadastro que atualmente está tudo dentro de uma única página, mas eu gostaria de separar isso, e que no topo ficasse "Passo 1 de 4" por exemplo, com os seguintes passos no total:

1) Informações do local (tenho já integrado o Google para ao preencher o endereço ele complete os dados automaticamente):
a) Nome do local
b) Endereço
c) Complemento
d) Cidade
e) Estado
f) CEP
g) País

2) Informações do evento (Para o Título e conteúdo só precisa criar o design/layout, pois estou utilizando o tiny com o django, que renderiza os dois campos na tela, mas os demais preciso que sejam feitos)
a) título do evento
b) conteúdo (descrição do evento)
c) imagem do evento: aqui a pessoa poderá clicar para realizar o upload e deverá aparecer uma prévia, ao lado direito, deverá ter algumas observações para eu adicionar dimensões recomendadas e etc
d) assunto (aqui vai ser uma caixa onde a pessoa poderá escolher uma opção da lista)
e) categoria (opcional) aqui a pessoa pode ou não adicionar, também é uma caixa de seleção onde a pessoa pode selecionar "espetáculo, competição" entre outros, somente exemplo...
F) Data de início
g) Hora de início
h) Data de término
i) Horário de término

3) Cadastro de ingressos (Aqui é a parte que estou mais sofrendo, já que eu preciso ir salvando todas as informações do ingresso na página e depois enviar para o backend), até consegui fazer funcionar mais ou menos, no entanto a formatação e experiência do usuário está horrível).
Nessa página, na parte inferior deverá ter uma opção "Absorver taxa de serviço", essa opção serve para ao anunciar o ingresso, mostrar como se não houvesse taxa de serviço, no entanto, essa taxa será cobrada do organizador.
Deverá ser apresentados dois botões para a pessoa: "Ingressos pagos" ou "Ingressos gratuitos".

A) Título do ingresso: Exemplo: Pista premium, Pista Normal
b) Quantidade de ingressos: Campo de número
c) Preço ()
d) Checkbox para meia entrada
i) Aqui caso o usuário marque essa opção, deverá abrir um novo campo para seleção da quantidade de ingressos (só olhar no modelo que criei que você irá entender), o campo de Preço deverá ser preenchido automaticamente com a metade do preço do ingresso normal
e) Período das vendas deste ingresso
Aqui o usuário terá duas opções:
i) Por data
ii) Por lote (para o primeiro ingresso cadastrado, essa opção deverá estar desabilitada, após o cadastro do primeiro ingresso, por exemplo:
"Ingresso primeiro lote", o usuário ao cadastrar o segundo ingresso, poderá definir como "Ingresso segundo lote", pois ao acabar o primeiro lote, automaticamente iniciará o segundo
isso é mais para enviar para o backend para o controle futuro)
E então os campos:
i) Data e hora de início e data e hora de término
No caso de escolher "Por lote", o campo data e hora de início deverão dar lugar a uma lista com os ingressos cadastrados para o usuário selecionar.
E) Radiobox com as seguintes opções:
i) Para todo o público
ii) Restrito a convidados
iii) Adicionar manualmente
f) Quantidade permitida por compra
i) Mínimo (campo numérico)
ii) Máximo (campo numérico)
g) Descrição do ingresso: "Ingresso que dará acesso a pista premium, etc"
h) Ativar visibilidade do ingresso
Após a inclusão do ingresso, eu preciso que seja gerada uma tabela para o usuário.

Nessa tabela deverão estar as seguintes informações:

Tipo, Quantidade, Valor, Taxa, Preço final, visibilidade e dois botões um para editar e outro para excluir
Aqui o cliente pode clicar na opção de visibilidade e deixar o ingresso vísivel ou não, caso ele clique no botão de editar (um icone de lápis) ele pula novamente a tela para edição dos detalhes do ingresso
e por fim caso ele clique na lixeira, ele remove o ingresso

4) Sobre o produtor
a) Nome do produtor
b) Descrição do produtor
c) Checkbox onde o usuário seleciona que está de acordo com os termos de uso e acordo com o processamento de dados.

E por fim:
d) Radiobox com as opções "Público" e "Privado" para o caso da pessoa salvar para edição futura.
E) Botões "Publicar evento", "Pré visualizar" e "Salvar rascunho"

Cada um dos passos o usuário pode clicar para retornar ou avançar, ao avançar, ele deverá realizar um post para o backend com as informações cadastradas, a maioria dos campos pode mandar normalmente com o id/name, para os ingressos o ideal é o envio via json.
Eu preciso que essa página seja bem intuitiva, bonita e com cara inovadora para atrair os organizadores, para todo o site estou usando bootstrap 5.2, então caso queira utilizar alguma coisa fora o seu design...
Caso tenha qualquer dúvida antes de fechar o projeto, me avise! Eu preciso de tudo funcionando perfeitamente e um código bem comentado para eu depois conseguir realizar alterações caso necessário.
Pelo texto ser grande, pode ser que eu comi bola em algum ponto, conto com a sua experiência para me ajudar com o frontend como um todo levando todos os pontos em consideração.

Categoria TI e Programação
Subcategoria Web Design
Qual é o alcance do projeto? Alteração média
Isso é um projeto ou uma posição de trabalho? Um projeto
Tenho, atualmente Eu tenho uma ideia geral
Disponibilidade requerida Conforme necessário
Necesidad específica Outro
Outro webdesign Criação de página HTML com JavaScript/jQuery, se possuir experiência com Django, melhor.

Prazo de Entrega: Não estabelecido

Habilidades necessárias

Outro projetos publicados por R. E.