-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Criação do formuulário para cadastro de horas
- Loading branch information
1 parent
2178acf
commit b87409c
Showing
1 changed file
with
247 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,247 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="pt-br" data-bs-theme="auto"> | ||
|
|
||
| <head> | ||
| <title>Cadastro de Horas do Voluntariado no Festival do Japão</title> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta name="description" content="Formulário para informe de interesse e disponibilidade de horas para voluntariado do Festival do Japão."> | ||
| <meta name="keywords" content="Festival do Japão, Voluntários, Horários"> | ||
|
|
||
| <link rel="shortcut icon" href="./img/image.png" type="image/x-icon"> | ||
| <link rel="icon" href="./img/image.png" type="image/x-icon"> | ||
|
|
||
| <script src="./main.js"></script> | ||
| <script src="./color-modes.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="container py-3 px-3 mx-auto"> | ||
| <header id="header" | ||
| class="d-flex justify-content-between align-items-md-center pb-3 mb-5 border-bottom border-danger border-5"> | ||
| <h1 class="h4"> | ||
| <a href="./horas.html" class="d-flex align-items-center link-body-emphasis text-decoration-none"> | ||
| <span>Festival do Japão</span> | ||
| </a> | ||
| </h1> | ||
|
|
||
| <!-- Theme chooser --> | ||
| <div> | ||
| <button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center opacity-50" id="bd-theme" | ||
| type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)"> | ||
| <svg class="bi my-1 theme-icon-active" width="1em" height="1em"> | ||
| <use href="#circle-half"></use> | ||
| </svg> | ||
| <span class="visually-hidden" id="bd-theme-text"></span> | ||
| </button> | ||
| <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text"> | ||
| <li> | ||
| <button type="button" class="dropdown-item d-flex align-items-center" | ||
| data-bs-theme-value="light" aria-pressed="false"> | ||
| <svg class="bi me-2 opacity-50" width="1em" height="1em"> | ||
| <use href="#sun-fill"></use> | ||
| </svg> | ||
| Claro | ||
| <svg class="bi ms-auto d-none" width="1em" height="1em"> | ||
| <use href="#check2"></use> | ||
| </svg> | ||
| </button> | ||
| </li> | ||
| <li> | ||
| <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" | ||
| aria-pressed="false"> | ||
| <svg class="bi me-2 opacity-50" width="1em" height="1em"> | ||
| <use href="#moon-stars-fill"></use> | ||
| </svg> | ||
| Escuro | ||
| <svg class="bi ms-auto d-none" width="1em" height="1em"> | ||
| <use href="#check2"></use> | ||
| </svg> | ||
| </button> | ||
| </li> | ||
| <li> | ||
| <button type="button" class="dropdown-item d-flex align-items-center active" | ||
| data-bs-theme-value="auto" aria-pressed="true"> | ||
| <svg class="bi me-2 opacity-50" width="1em" height="1em"> | ||
| <use href="#circle-half"></use> | ||
| </svg> | ||
| Auto | ||
| <svg class="bi ms-auto d-none" width="1em" height="1em"> | ||
| <use href="#check2"></use> | ||
| </svg> | ||
| </button> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </header> | ||
|
|
||
| <!-- Conteúdo do site --> | ||
| <div id="main" class="align-items-md-center pb-3 mb-5"> | ||
| <!-- Home --> | ||
| <main class="align-items-md-center pb-3 mb-5"> | ||
| <section id="titulo" class="text-center mb-5"> | ||
| <h1>Cadastro de Horas no Voluntariado</h1> | ||
| <p class="fs-4">Ficha de Disponibilidade do Voluntário para a 25ª edição do Festival do Japão</p> | ||
| </section> | ||
|
|
||
| <!-- Form de cadastro de voluntário --> | ||
| <section id="cadastro_voluntario"> | ||
| <div class="modal-body row align-items-center"> | ||
| <div class="col"></div> | ||
| <form class="row col-md-10 col-sm-12 g-3" id="formCadastroDeVoluntario"> | ||
| <!-- Dados pessoais --> | ||
| <div class="row mb-4 col-12"> | ||
| <section class="mb-4"> | ||
| <p class="fs-5"> | ||
| <strong class="mb-3">Confirmação do Voluntário</strong> | ||
| <hr class="mt-1 mb-4 border-bottom border-danger "> | ||
| </p> | ||
|
|
||
| <div class="row mb-2"> | ||
| <div class="col-md-8 mt-1"> | ||
| <label for="nomeCompletoDoVoluntario" class="form-label">Nome completo</label> | ||
| <input type="text" class="form-control" id="nomeCompletoDoVoluntario"> | ||
| </div> | ||
| <div class="col-md-4 mt-1"> | ||
| <label for="cpfDoVoluntario" class="form-label">CPF</label> | ||
| <input type="text" class="form-control" id="cpfDoVoluntario" size="14" | ||
| placeholder="000.000.000-00"> | ||
| </div> | ||
| </div> | ||
| <div class="row mb-2"> | ||
| <div class="col-md-8 mt-1"> | ||
| <label for="emailDoVoluntario" class="form-label">E-mail</label> | ||
| <input type="email" class="form-control" id="emailDoVoluntario"> | ||
| </div> | ||
| <div class="col-md-4 mt-1 mb-1"> | ||
| <label for="telefoneDoVoluntario" class="form-label">Telefone</label> | ||
| <input type="phone" class="form-control" id="telefoneDoVoluntario" size="14" | ||
| placeholder="+55 (00) 00000-0000"> | ||
| </div> | ||
| </div> | ||
| <div class="row mb-2"> | ||
| <div class="col-md-4 mt-1"> | ||
| <label for="sexoDoVoluntario" class="form-label">Sexo</label> | ||
| <div> | ||
| <div class="form-check form-check-inline"> | ||
| <input class="form-check-input" type="radio" name="sexoDoVoluntario" | ||
| id="sexoFeminino" value="F"> | ||
| <label class="form-check-label" for="sexoFeminino">Feminino</label> | ||
| </div> | ||
| <div class="form-check form-check-inline"> | ||
| <input class="form-check-input" type="radio" name="sexoDoVoluntario" | ||
| id="sexoMasculino" value="M"> | ||
| <label class="form-check-label" | ||
| for="sexoMasculino">Masculino</label> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="mb-4 mt-4"> | ||
| <p class="fs-5"> | ||
| <strong class="mb-3">Sexta-Feira</strong> | ||
| <hr class="mt-1 mb-4 border-bottom border-danger"> | ||
| </p> | ||
|
|
||
| <div class="row mb-2"> | ||
| <div class="col-md-8 mt-1"> | ||
| <label for="enderecoDoVoluntario" class="form-label"> | ||
| Endereco completo | ||
| <small class="opacity-75">(nome da rua, número, bloco, apto)</small> | ||
| </label> | ||
| <input type="text" class="form-control" id="enderecoDoVoluntario"> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="mb-4 mt-4"> | ||
| <p class="fs-5"> | ||
| <strong class="mb-3">Sábado</strong> | ||
| <hr class="mt-1 mb-4 border-bottom border-danger"> | ||
| </p> | ||
|
|
||
| <div class="row mb-2"> | ||
|
|
||
| </div> | ||
| </section> | ||
|
|
||
| <section class="mb-4 mt-4"> | ||
| <p class="fs-5"> | ||
| <strong class="mb-3">Domingo</strong> | ||
| <hr class="mt-1 mb-4 border-bottom border-danger"> | ||
| </p> | ||
|
|
||
| <div class="row mb-2"> | ||
|
|
||
| </div> | ||
| </section> | ||
|
|
||
| <section class="mb-4 mt-4"> | ||
| <p> | ||
| <strong class="fs-5 mb-3">Preferências</strong><br> | ||
| <hr class="mt-1 mb-4 border-bottom border-danger "> | ||
| </p> | ||
|
|
||
| <div class="row mb-2"> | ||
| <div class="col-md-6 mt-1"> | ||
| <label for="nomeContatoEmergenciaDoVoluntario" | ||
| class="form-label">Nome</label> | ||
| <input type="name" class="form-control" | ||
| id="nomeContatoEmergenciaDoVoluntario"> | ||
| </div> | ||
| <div class="col-md-6 my-1"> | ||
| <label for="telefoneContatoEmergenciaDoVoluntario" | ||
| class="form-label">Telefone</label> | ||
| <input type="phone" class="form-control" | ||
| id="telefoneContatoEmergenciaDoVoluntario" size="14" | ||
| placeholder="+55 (00) 00000-0000"> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </div> | ||
|
|
||
| <div class="d-grid gap-2 col-6 mx-auto"> | ||
| <button class="btn btn-danger" type="submit" id="enviaFichaDeDisponibilidade">Enviar Ficha de Disponibilidade</button> | ||
| </div> | ||
| </form> | ||
| <div class="col-1"></div> | ||
| </div> | ||
| </section> | ||
| </main> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Rodapé da página --> | ||
| <footer id="footer" class="container navbar-fixed-bottom"> | ||
| <hr class="mt-5 mb-4 border-bottom border-danger"> | ||
|
|
||
| <p class="text-muted"> | ||
| © <spam id="anoCriacaoProjeto"></spam> FJ Tech • Festival do Japão | ||
| </p> | ||
| </footer> | ||
|
|
||
| <!-- SVGs utilizados no theme chooser --> | ||
| <svg xmlns="http://www.w3.org/2000/svg" class="d-none"> | ||
| <symbol id="check2" viewBox="0 0 16 16" fill="currentColor"> | ||
| <path | ||
| d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" /> | ||
| </symbol> | ||
| <symbol id="circle-half" viewBox="0 0 16 16" fill="currentColor"> | ||
| <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" /> | ||
| </symbol> | ||
| <symbol id="moon-stars-fill" viewBox="0 0 16 16" fill="currentColor"> | ||
| <path | ||
| d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" /> | ||
| <path | ||
| d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z" /> | ||
| </symbol> | ||
| <symbol id="sun-fill" viewBox="0 0 16 16" fill="currentColor"> | ||
| <path | ||
| d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" /> | ||
| </symbol> | ||
| </svg> | ||
| </body> | ||
|
|
||
| </html> |