templates/new_user.html

{% extends 'base.html' %}

{% block conteudo %}

<style>
    .container {
    
    margin-top: 100px;
    max-width: 100vh;
}

.form-row{
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction:row;
    border-radius: 10px;
    margin: 4px;
   
    
}

.form-row label {
    margin-right: 250px;

}


.form-group{
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 20px;
}

.labelClass {
    padding-bottom:6px;;
}

textarea {
    width: 100%;
    resize: none;
    padding: 10px;
    box-sizing: border-box;
    
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
  }
  
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
  
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
</style>



<div class="container">
    
    <form method="post" action="/new_user">
        <div class="form-group">
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label class="labelClass" for="inputEmail4">Nome</label>
                    <input type="text" name="nome" class="form-control" id="inputEmail4" required>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group col-md-6">
                    <label class="labelClass" for="inputEmail4">Sobrenome</label>
                    <input type="text" name="sobrenome" class="form-control" id="inputEmail4" placeholder=required>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group col-md-6">
                    <label class="labelClass" for="inputEmail4">Email</label>
                    <input type="text" name="email" class="form-control" id="inputEmail4" placeholder=required>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group col-md-6">
                    <label class="labelClass" for="inputEmail4">Username</label>
                    <input type="text" name="username" class="form-control" id="inputEmail4" placeholder=required>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label class="labelClass" for="inputEmail4">Senha</label>
                    <input type="text" name="senha" class="form-control" id="inputEmail4"required>
                </div>
            </div>


            <div class="form-row">
                <div class="form-group col-md-6">
                    <label class="labelClass" for="inputEmail4">Status</label>
                    <input type="text" name="status" class="form-control" id="inputEmail4"required>
                </div>
            </div>


            <div class="form-row">
                <div class="form-group col-md-6">
                    <label class="labelClass" for="inputEmail4">Tipo de usuário</label>
                    <select class="form-select" name="role" aria-label="Default select example">
                        <option selected>Selecione uma opção</option>
                        <option value="Usuário padrão">Usuário padrão</option>
                        <option value="Administrador">Admin</option>
                    </select>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group col-md-6"></div>
                    <button type="submit" id="submitBtn">
                </div>
            </div>

            <div id="myModal" class="modal">
                <div class="modal-content">
                  <span class="close">&times;</span>
                  <p>Sucesso!</p>
                </div>
              </div>
            </div>
            








        </div>         
    </form>  
</div>




{% endblock %}