Index.html

<!DOCTYPE html>
<html>
<head>
    <base target="_top">
    <title>Formulário de Requisição</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8" lang="pt-BR">
    <meta name="description" content="Formulário para enviar requisições de serviços. Preencha seus dados e envie sua solicitação.">
    <meta name="keywords" content="formulário, requisição, serviços, contato, email">
    <meta name="author" content="Gustavo Calastro">
    <link rel="icon" type="image/jpeg" href="https://github.com/VenomGu/HelpVolt-App/blob/master/Imagens/helpvolt-Logo.jpg?raw=true">

    <style>
        body {
            font-family: 'Roboto', sans-serif;
            font-weight: bold;
            margin: 0;
            padding: 0;
            background-color: #f8f8f8;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .container {
            width: 98vw;
            flex-grow: 1;
            margin: 2vh auto; 
            padding: 5vh 7vw; 
            border: none;
            border-radius: 0;
            box-shadow: none;
            background-color: #fff;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            max-width: none;
        }
        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 4vh; 
            font-size: xx-large; 
        }
        label {
            display: block;
            margin-bottom: 3vh; 
            font-weight: bold;
            color: #333;
            font-size: xx-large; 
        }
        input[type="text"],
        input[type="email"],
        textarea {
            width: 100%;
            padding: 5vh; 
            margin-bottom: 5vh; 
            border: 1px solid #ccc;
            border-radius: 8px;
            box-sizing: border-box;
            font-size: xx-large; 
            font-family: 'Roboto', sans-serif;
            font-weight: bold;
        }
        textarea {
            resize: vertical;
            min-height: 30vh; 
        }
        button {
            background-color: #B7212E;
            color: white;
            padding: 5vh 7vw; 
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: xx-large; 
            width: 100%;
            box-sizing: border-box;
            transition: background-color 0.3s ease;
            margin-top: 4vh; 
        }
        button:hover {
            background-color: #b93641;
        }
        .message {
            margin-top: 5vh;
            padding: 4vh;
            border-radius: 8px;
            text-align: center;
            font-size: xx-large; 
        }
        .success {
            background-color: #d4edda;
            color: #155724;
            border-color: #c3e6cb;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border-color: #f5c6cb;
        }
        footer {
            display: flex;
            text-align: center;
            align-items: center;
            margin-top: auto;
            padding: 4vh;
            background-color: #004854;
            border-top: 1px solid #ddd;
            color: white;
            font-size: xx-large; 
            border-radius: 0;
            flex-direction: row;
            box-sizing: border-box;
            flex-shrink: 0;
            justify-content: space-evenly;
        }
        #footer-dev{
            background-color: #005C6D;
            padding: 3.5vh 3vw;
            color: white;
            font-size: medium; 
            border-radius: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            text-align: center;
            box-sizing: border-box;
            flex-shrink: 0;
        }
        #title-logo {
            margin: 0;
            font-size: xx-large; 
        }
        #header{
            text-align: center;
            padding: 4vh 0;
            background-color: #B7212E;
            color: white;
            border-radius: 0;
            margin-bottom: 4vh; 
            box-sizing: border-box;
            flex-shrink: 0;
        }
        #header-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: row;
            gap: 4vw; 
        }
        #header-logo img {
            max-width: 100%;
            height: auto;
        }
        #helpvolt-logo {
            width: 120px; 
            height: auto;
            margin: 0;
            border-radius: 8px;
        }
        #under-title p {
            margin: 2.5vh 0; 
        }
        #under-title p:first-of-type {
            font-size: xx-large; 
            font-weight: bold;
        }
        #under-title p:last-of-type {
            font-size: xx-large; 
        }
        #links-icons {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #AAAAAA;
            width: 6vh;
            height: 6vh;
            border-radius: 10%;
        }
        #links-icons:hover {
            background-color: #c9c7c7fd;
        }
        #path-icons {
            width: 3vh; 
            height: 3vh;
            fill: white;
        }
        #social-media {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 4vw; 
            margin-top: 4vh; 
            flex-wrap: wrap;
        }
        #links {
            gap: 8px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        #svg-icon {
            width: 3vh; 
            height: 3vh;
            border-radius: 10%;
        }
        #endereco {
            font-size: small; 
            text-align: center;
            margin: 0vh 2vw; 
            line-height: 2.2em;
        }
        #cps-logos {

            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
        }
        #cps-logos img {
            max-width: 100%; 
            height: auto;
            margin: 1.5vh 0;
        }
        #footer-dev p, #footer-dev a {
            margin: 1.5vh 0;
            text-align: center;
            font-size: medium;
            color: white;
        }
        #selo {
            margin-top: 4vh; 
        }
        #selo img {
            width: 30vh; 
            height: auto;
        }

    </style>
</head>
<body>

    <header id="header">
        <div id="header-logo">
            <img src="https://fateccampinas.edu.br/site/wp-content/uploads/2024/03/logoFatec125.png" alt="Logo Fatec">
            <img id="helpvolt-logo" src="https://github.com/VenomGu/HelpVolt-App/blob/master/Imagens/helpvolt-Logo.jpg?raw=true" alt="HelpVolt-Logo">
        </div>
        <div id="under-title">
            <p>Formulário de Requisição de Serviços</p>
            <p >Preencha os campos abaixo para enviar sua requisição.</p>
        </div>
    </header>

    <div class="container">
        <div id="responseMessage" class="message" style="display:none;"></div>

        <form id="requisicaoForm">
            <label for="emailRequerente">Seu E-mail:</label>
            <input type="email" id="emailRequerente" name="emailRequerente" placeholder="ex: nome.email@seuemail.com" required>

            <label for="localRequisicao">Local de reparo:</label>
            <input type="text" id="localRequisicao" name="localRequisicao" placeholder="Setor/Ambiente com irregularidade" required>

            <label for="descricao">Descreva a falha técnica detalhadamente:</label>
            <textarea id="descricao" name="descricao" rows="5" placeholder="Ex: Tomada solta na parede, com risco de choque" required></textarea>

            <button type="submit">Enviar Requisição</button>
        </form>
    </div>

    <footer id="footer">
        <div id="cps-logos">
            <img src="https://fateccampinas.edu.br/site/wp-content/uploads/2024/03/cps_151.png" alt="CPS-logo">
            <img src="https://fateccampinas.edu.br/site/wp-content/uploads/2024/03/logo-governo-do-estado-sp.png" alt="sub-CPS-logo">
        </div>
        <p id="endereco">
            <strong>Endereço: <br/></strong>
            Av. Cônego Antonio Rocatto, 593<br/>
            Jardim Santa Mônica<br/>
            CEP 13.082-015<br/>
            Campinas – SP<br/>
            <strong>Telefone:<br/> </strong>(19) 3216-6474<br/>
            <strong>E-mail:<br/></strong>f276acad@cps.sp.gov.br
        </p>
        <div id="social-media">
            <div id="links">
                <p id="links-icons">
                    <a href="https://www.facebook.com/fateccps/?locale=pt_BR" target="_blank">
                        <svg id="svg-icon" class="e-font-icon-svg e-fab-facebook-f" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg">
                            <path id="path-icons" d="M279.14 288l14.22-92.66h-88.91V144c0-25.19 12.34-49.56 52.44-49.56h40.59V6.26S272.43 0 240.29 0C148.77 0 96 54.2 96 153.69v42.35H7v92.66h89V512h110.91V288z"/>
                        </svg>
                    </a>
                </p>
                <p id="links-icons">
                    <a href="https://www.instagram.com/fateccampinas/" target="_blank">
                        <svg id="svg-icon" class="e-font-icon-svg e-fab-instagram" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                            <path id="path-icons" d="M224.1 141c-63.6 0-115.1 51.5-115.1 115.1S160.5 371.2 224.1 371.2s115.1-51.5 115.1-115.1S287.7 141 224.1 141zm0 190c-41.2 0-75-33.8-75-75s33.8-75 75-75 75 33.8 75 75-33.8 75-75 75zm146.4-194c0 14.9-12.1 27-27 27s-27-12.1-27-27c0-14.9 12.1-27 27-27s27 12.1 27 27zM398.6 32H49.4C22.1 32 .2 54 .2 81v350c0 26.3 21.9 49 49.2 49h349c26.3 0 49-22.7 49-49V81c0-26.3-22.7-49-49-49zM224.1 384c-88.4 0-160-71.6-160-160S135.76464,64,224,64s160,71,160,160S312,384,224,384z"/>
                        </svg>
                    </a>
                </p>

                <p id="links-icons">
                    <a href="https://br.linkedin.com/school/fatec-campinas---faculdade-de-tecnologia-de-campinas/" target="_blank">
                        <svg id="svg-icon" class="e-font-icon-svg e-fab-linkedin" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                            <path id="path-icons" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>
                        </svg>
                    </a>
                </p>
                <p id="links-icons">
                    <a href="https://www.youtube.com/channel/UCDbVwWuKNcvh5TPPF0lA2oQ" target="_blank">
                        <svg id="svg-icon" class="e-font-icon-svg e-fab-youtube" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
                            <path id="path-icons" d="M549.655 124.083c-6.25-23.438-24.688-41.875-48.125-48.125C458.75 64 288 64 288 64S117.25 64 74.469 75.958c-23.438 6.25-41.875 24.688-48.125 48.125C16 166.875 16 256 16 256s0 89.125 10.344 131.917c6.25 23.438 24.688 41.875 48.125 48.125C117.25 448 288 448 288 448s170.75 0 213.531-11.958c23.438-6.25 41.875-24.688 48.125-48.125C560 345.125 560 256 560 256s0-89.125-10.345-131.917zM232 352V160l144 96-144 96z"/>
                        </svg>
                    </a>
                </p>
                <p id="links-icons">
                    <a href="http://www.fatec.sp.gov.br/view/Default.aspx" target="_blank">
                        <svg id="svg-icon" class="e-font-icon-svg e-fab-windows" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                            <path id="path-icons" d="M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z"/>
                        </svg>
                    </a>
                </p>

            </div>
        </div>

        <div id="selo">
            <img style="width: 150px; height: auto;" src="https://fateccampinas.edu.br/site/wp-content/uploads/elementor/thumbs/selo-1-qkquqtpxfon7qth8mw4payz2rojxsaro8nncj31q6o.png" alt="selo">
        </div>

    </footer>
    <div id="footer-dev">
      <p>Desenvolvido por:</p>
      <a href="https://venomgu.github.io/meu-curriculo/index.html" target="_blank"><i>Gustavo Calastro</i></a>
      <p>Todos os direitos reservados © 2025</p>
  </div>
    <script>
        document.getElementById('requisicaoForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const emailRequerente = document.getElementById('emailRequerente').value;
            const localRequisicao = document.getElementById('localRequisicao').value;
            const descricao = document.getElementById('descricao').value;

            const responseMessage = document.getElementById('responseMessage');
            responseMessage.style.display = 'none';
            responseMessage.className = 'message';

            google.script.run
                .withSuccessHandler(function(result) {
                    responseMessage.style.display = 'block';
                    if (result.success) {
                        responseMessage.classList.add('success');
                        responseMessage.textContent = result.message;
                        document.getElementById('requisicaoForm').reset();

                    } else {
                        responseMessage.classList.add('error');
                        responseMessage.textContent = 'Erro: ' + result.message;
                    }
                })
                .withFailureHandler(function(error) {
                    responseMessage.style.display = 'block';
                    responseMessage.classList.add('error');
                    responseMessage.textContent = 'Erro ao enviar requisição: ' + error.message;
                })
                .processarRequisicaoWeb(emailRequerente, localRequisicao, descricao);
        });
    </script>
</body>
</html>