diff --git a/src/App.js b/src/App.js
index 96fcaca9a3e0c03ec95e1414350360d6a649f3ea..2219481cb009ea944b82a9b5972ef83100e351e8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -24,7 +24,7 @@ import EcFooter from './Components/EcFooter';
import GNUAGPLfooter from './Components/AGPLFooter';
import UserPage from './Pages/UserPage';
import UserTerms from './Pages/UserTerms';
-
+import Contact from './Pages/Contact';
import Teste from './Pages/Teste';
import ResourcePage from './Pages/ResourcePage';
@@ -78,7 +78,7 @@ export default function App(){
<Route path="/permission" component={PublicationPermissionsPage}/>
{/*<Route path="termos-de-uso#publicacoes-de-usuario" component={}*/}
-
+ <Route path="/contato" component={Contact}/>
<Route path="/termos" component={UserTerms}/>
<Route path="/teste" component={Teste}/>
diff --git a/src/Components/Carousel.js b/src/Components/Carousel.js
index 27c394f4ce6a8deb60f90fdc37cd594560659c7a..3e8e9029c2ffba6e2c068378b7f3c73f8277e030 100644
--- a/src/Components/Carousel.js
+++ b/src/Components/Carousel.js
@@ -426,7 +426,13 @@ const CarouselStyled = styled(Carousel)`
display: inline-block;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
- content: '';
+ content: ' ';
+ }
+ .carousel .control-arrow {
+ background: transparent !important;
+ }
+ .m4d-icons {
+ size: 50px
}
@@ -648,7 +654,7 @@ class TermsCarousel extends Component {
</Grid>
</Grid>
<div class="rodape col-md-12">
- <p>Dúvidas? Leia a Ãntegra dos <span ng-click="hide()">Termos de Uso</span> ou fale conosco por meio do <span ui-sref="contato">formulário de contato</span>.</p>
+ <p>Dúvidas? Leia a Ãntegra dos <span ng-click="hide()">Termos de Uso</span> ou fale conosco por meio do <a style={{color: "#fff"}} href="contato">formulário de contato</a>.</p>
</div>
</div>
</div>
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index 2a5a600c3df0615fc212f9de9870c4e2bed65bf9..60b74706cbad2b228901e0c14c63f8b491f8d5c3 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -21,11 +21,6 @@ import {makeStyles} from '@material-ui/styles';
import styled from 'styled-components'
import TextField from '@material-ui/core/TextField';
-const FormContainerStyled = styled.form`
- display: flex;
- flex-wrap : wrap;
- padding : 2px;
-`
const StyledTextField = styled(TextField)`
max-width: 100%;
@@ -56,7 +51,7 @@ export default function FormInput(props) {
const classes = useStyles();
return (
- <FormContainerStyled noValidate autoComplete="off">
+
<StyledTextField
id="standard-basic"
@@ -67,10 +62,14 @@ export default function FormInput(props) {
type = {props.inputType}
value = {props.value}
onChange = {props.handleChange}
+ helperText = {props.help}
+ rows = {props.rows}
+ error = {props.error}
+ rowsMax = {props.rowsMax}
InputProps={{className: classes.input}}
style={{width:"100%"}}
+ multiline = {props.multi}
/>
- </FormContainerStyled>
);
}
diff --git a/src/Pages/Contact.js b/src/Pages/Contact.js
new file mode 100644
index 0000000000000000000000000000000000000000..0c0fccd5547989e84f10ee4d4cbe4877cf5f81c4
--- /dev/null
+++ b/src/Pages/Contact.js
@@ -0,0 +1,401 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import Banner1 from '../img/banner-sobre.jpg';
+import { TextField } from '@material-ui/core';
+import FormInput from "../Components/FormInput.js"
+import axios from 'axios'
+import {apiUrl} from '../env';
+
+
+const Seção1 = styled.div `
+ width: 100%;
+ background-image: url(${Banner1});
+ background-size: cover;
+ background-position: bottom center;
+ height: 250px;
+ color:#fff;
+ line-height: 1.1;
+ text-align: center;
+ padding-top: 120px;
+
+ h2 {
+ font-family: Pompiere,cursive;
+ font-size: 52px;
+ color:#fff;
+ margin: 0;
+ padding-left: 0;
+ padding-right: 0;
+ font-weight: 500;
+ }
+
+ h3 {
+ margin-top: 20px;
+ margin-bottom: 10px;
+ font-family: Roboto,sans-serif;
+ font-size: 30px;
+ font-weight: lighter;
+
+ }
+`
+
+const Seção2 = styled.div `
+ height: 708px;
+ background-color: #f4f4f4;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`
+const Button = styled.button`
+
+ background-color: #00acc1;
+ color:#fff;
+ font-family: Roboto,sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ height: 36px;
+ border-radius: 3px;
+ padding-left: 16px;
+ padding-right: 16px;
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+ outline: none;
+ position: relative;
+ cursor: pointer;
+ min-height: 36px;
+ min-width: 88px;
+ line-height: 36px;
+ vertical-align: middle;
+ align-items: center;
+ text-align: center;
+ border-radius: 3px;
+ box-sizing: border-box;
+ user-select: none;
+ border: 0;
+ padding: 0 6px;
+ padding-right: 6px;
+ padding-left: 6px;
+ margin: 6px 8px;
+
+ white-space: nowrap;
+ text-transform: uppercase;
+ font-weight: 500;
+ font-size: 14px;
+ font-style: inherit;
+ font-variant: inherit;
+ font-family: inherit;
+ text-decoration: none;
+ overflow: hidden;
+ transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
+
+
+`
+
+const Formulário = styled.div `
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 40px;
+ height: 560px;
+ width: 480px;
+ color: #666;
+
+ form .inputBlock {
+ margin-block: 22px;
+
+ }
+
+ form .inputBlock label {
+ font-size: 14px;
+ font-weight: bold;
+ display: block;
+
+ }
+
+ form .inputBlock input {
+ width: 100%;
+ height: 32px;
+ font-size: 14px;
+ border: 0;
+ border-bottom: 1px solid #eee;
+
+ }
+
+ form .inputBlock.Message input {
+ height: 131px;
+ }
+
+ form buttom[type=submit] {
+ width: 100%;
+ border: 0;
+ margin-top: 30px;
+ background: #7d40e7
+ border-radius: 2px;
+ padding: 15px 20px;
+ font-size: 16px;
+ font-weight: bold;
+ color: #fff;
+ cursor: pointer;
+ transition: background 0.5s;
+
+ }
+
+ form buttom[type=submit]:hover {
+ background: #6931ac
+ }
+
+
+ h2 {
+ font-size: 24px;
+ font-weight: lighter;
+ margin-bottom: 50px;
+ margin-top: 20px;
+ text-align: center;
+
+ }
+`
+
+
+
+const Seção3 = styled.div `
+ height: 127px;
+ background-color: #f4f4f4;
+ color:#666;
+ line-height: 1.42857143;
+ font-size:18px;
+ text-align: center;
+ padding-top: 70px;
+
+
+ p {
+ margin: 0 0 10px 0;
+ }
+
+
+`
+
+function validateNome (nome) {
+ let flag = false
+ if(nome.length === 0) {
+ flag = true
+ }
+
+ return flag
+}
+
+
+function validateMensagem (mensagem) {
+ let flag = false
+ if(mensagem.length === 0) {
+ flag = true
+ }
+
+ return flag
+}
+
+function validateEmail (email) {
+ let flag = false
+ if (email.split("").filter(x => x === "@").length !== 1) {
+ flag = true
+ }
+ return flag
+}
+
+
+
+function Contact (props) {
+
+ const [nome, handleNome] = useState(
+ {
+ dict : {
+ key:false,
+ value:""
+ }
+ })
+ const [email, handleEmail] = useState(
+ {
+ dict : {
+ key:false,
+ value:""
+ }
+ })
+ const [mensagem, handleMensagem] = useState(
+ {
+ dict : {
+ key: false,
+ value:""
+ }
+ })
+
+
+ const preencheNome = (e) => {
+ const aux2 = e.target.value
+ const flag = validateNome(aux2)
+ handleNome({...nome, dict : {
+ key : flag,
+ value : e.target.value
+ }})
+ console.log(nome)
+ }
+
+ const preencheEmail = (e) => {
+ const aux = e.target.value
+ const flag = validateEmail(aux)
+ handleEmail({...email, dict : {
+ key : flag,
+ value : e.target.value
+ }})
+ console.log(email)
+ }
+
+ const preencheMensagem = (e) => {
+ const msg = e.target.value
+ console.log(msg)
+ let flag = validateMensagem(msg)
+ handleMensagem({...mensagem, dict : {
+ key : flag,
+ value : msg
+ }})
+ console.log(mensagem)
+ }
+
+ const limpaTudo = () => {
+
+ handleNome({
+ dict : {
+ key: false,
+ value:""
+ }}
+ );
+
+ handleEmail({
+ dict : {
+ key: false,
+ value:""
+ }}
+ )
+
+ handleMensagem({
+ dict : {
+ key: false,
+ value:""
+ }}
+ )
+
+ }
+
+
+
+ const onSubmit = (e) => {
+ //on submit we should prevent the page from refreshing
+ e.preventDefault(); //though this is arguable
+ console.log(!(nome.dict.key && email.dict.key && mensagem.dict.key ))
+ // Se não houver erro em nunhum dos campos E nenhum dos campos for vazio: a página faz o contato com o backend e os campos ficam em branco no formulário
+ if (!(nome.dict.key && email.dict.key && mensagem.dict.key ) && ((nome.dict.value.length > 0) && (email.dict.value.length > 0) && (mensagem.dict.value.length > 0))) {
+
+ axios.post(`${apiUrl}/contacts`,
+ {
+ contact : {
+ name: nome.dict.value,
+ email: email.dict.value,
+ message: mensagem.dict.value
+ }
+
+ }
+ ).then()
+
+
+
+ limpaTudo();
+
+ }
+
+
+
+ }
+
+
+
+ return(
+ <>
+ <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap" rel="stylesheet"/>
+ <Seção1>
+ <h2>CONTATO</h2>
+ <h3>Quer enviar uma mensagem?</h3>
+ </Seção1>
+
+ <Seção2>
+
+ <Formulário noValidate autoComplete="off">
+ <h2>Entre em contato para enviar dúvidas,<br/>sugestões ou crÃticas</h2>
+ <form onSubmit={e => onSubmit(e)}>
+ <FormInput
+ inputType={"text"}
+ name={"nome"}
+ value={nome.dict.value}
+ placeholder={"Nome *"}
+ error = {nome.dict.key}
+ help = {nome.dict.key ? "insira seu nome para o contato " : ""}
+ handleChange={e => preencheNome(e)}
+ />
+ <br/>
+ <FormInput
+ inputType={"text"}
+ name={"email"}
+ value={email.dict.value}
+ placeholder={"E-mail *"}
+ error = {email.dict.key}
+ help = {email.dict.key ? "Formato de e-mail incorreto ou vazio, tente : usuario@provedor.com" : ""}
+ handleChange={e => preencheEmail(e)}
+ />
+ <br/>
+ <br/>
+ <FormInput
+ inputType={"text"}
+ name={"mensagem"}
+ value={mensagem.dict.value}
+ placeholder={"Mensagem *"}
+ multi = {true}
+ rows = "5"
+ rowsMax = "6"
+ error = {mensagem.dict.key}
+ help = {mensagem.dict.key ? "Faltou escrever sua mensagem de sugestão, crÃtica ou dúvida." : "Escreva sua mensagem no campo acima."}
+ handleChange={e => preencheMensagem(e)}
+ />
+ <br/>
+ <br/>
+ <div style={{display: "flex", justifyContent: "center"}}>
+ <Button onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button>
+ </div>
+ </form>
+
+ </Formulário>
+ </Seção2>
+
+ <Seção3>
+
+ <span>MEC - Ministério da Educação </span>
+ <p>Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP: 70.047-900 - BrasÃlia/DF. Telefone: 0800 616161</p>
+
+ </Seção3>
+ </>
+ );
+
+}
+
+export default Contact;
diff --git a/src/Pages/Teste.js b/src/Pages/Teste.js
index 38f6b4023ae3c9d8978f40b06474c06cc0a4215d..2c5612b96f063f07d426df0b005cd64a94423073 100644
--- a/src/Pages/Teste.js
+++ b/src/Pages/Teste.js
@@ -16,661 +16,339 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, {Component} from 'react';
+import React, { Component, useState, useEffect } from 'react';
import styled from 'styled-components';
-import Grid from '@material-ui/core/Grid';
-/*Importação de imagens para o componente*/
-import Handshake from "../img/termos/handshake.svg"
-import Pessoa from "../img/termos/Pessoa.svg"
-import Email from "../img/termos/Email.svg"
-import Seguranca from "../img/termos/Seguranca.svg"
-import Aberto from "../img/termos/Aberto.png";
-import Fechado from "../img/termos/Fechado.png";
-import Arrow_down from "../img/termos/Arrow_down.svg";
-import Arrow_double from "../img/termos/Arrow_double.svg";
-import Arrow_O from "../img/termos/Arrow_O que é a plataforma.png";
-import Arrow_O_1 from "../img/termos/Arrow_O que é a plataforma-1.png";
-
-
-const Slide = styled.div`
-
-position: absolute;
-height: 500px;
-width: 1366px;
-
-h2{
- font-family: "Pompiere", regular;
- font-size: 44px;
- line-height: 120%;
- color: #FFFFFF;
-}
-
-h3{
- font-family: "Roboto", regular;
- font-size: 27px;
- line-height: 120%;
- color: #FFFFFF;
-}
-
-p{
- font-family: "Roboto", regular;
- font-size: 20px;
- line-height: 120%;
- color: #FFFFFF;
- text-align: left;
-}
+import Banner1 from '../img/banner-sobre.jpg';
+import { TextField } from '@material-ui/core';
+import FormInput from "../Components/FormInput.js"
+import axios from 'axios'
+import {apiUrl} from '../env';
+
+
+const Seção1 = styled.div `
+ width: 100%;
+ background-image: url(${Banner1});
+ background-size: cover;
+ background-position: bottom center;
+ height: 250px;
+ color:#fff;
+ line-height: 1.1;
+ text-align: center;
+ padding-top: 120px;
+
+ h2 {
+ font-family: Pompiere,cursive;
+ font-size: 52px;
+ color:#fff;
+ margin: 0;
+ padding-left: 0;
+ padding-right: 0;
+ font-weight: 500;
+ }
-.container{
- position: absolute;
- height: auto;
- width: auto;
- margin: 70px 180px 90px;
-}
+ h3 {
+ margin-top: 20px;
+ margin-bottom: 10px;
+ font-family: Roboto,sans-serif;
+ font-size: 30px;
+ font-weight: lighter;
+ }
+`
-.tmpl1{
- background-color: #00BCD4;
- height: inherit;
- width: inherit;
+const Seção2 = styled.div `
+ height: 708px;
+ background-color: #f4f4f4;
display: flex;
+ justify-content: center;
align-items: center;
+`
+const Button = styled.button`
- .box-text{
- position: relative;
- float: left;
- padding-right: 10px;
- padding-left: 10px;
- }
+`
- .box-image{
- position: relative;
- float: right;
- }
-}
+const Formulário = styled.div `
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 40px;
+ height: 520px;
+ width: 420px;
+ color: #666;
-.tmpl2{
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
- background-color: #673AB7;
+ form .inputBlock {
+ margin-block: 22px;
- .title{
- padding-bottom: 50px;
}
- .images{
- position: relative;
- display: table-row;
- }
+ form .inputBlock label {
+ font-size: 14px;
+ font-weight: bold;
+ display: block;
- .arrow{
- display: table-row;
- position: absolute;
- margin-left: 15px;
- margin-top: -15px;
}
- .circle{
- display: table-row;
- position: absolute;
- margin-top: -100px;
- margin-left: 755px;
- }
-
- .box-text{
- p{
- font-size: 18px;
- line-height: 25px;
- }
-
- position: relative;
+ form .inputBlock input {
+ width: 100%;
+ height: 32px;
+ font-size: 14px;
+ border: 0;
+ border-bottom: 1px solid #eee;
}
-
-}
-
-.tmpl3{
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
- background-color: #E81F4F;
-
- .title{
- position: relative;
- padding-left: 10px;
- h3{
- line-height: 40px;
- }
+ form .inputBlock.Message input {
+ height: 131px;
}
- .box-text1{
- .text{
- padding-top: 20px;
- }
-
- .content{
- display: table-row;
-
- p{
- display: table-cell;
- font-size: 18px;
- line-height: 25px;
- vertical-align: middle;
- }
-
- img{
- position: relative;
- left: 0;
- margin-right: 20px;
- display: table-cell;
- vertical-align: middle;
- margin: 10px 20px 10px -10px;
- }
- }
+ form buttom[type=submit] {
+ width: 100%;
+ border: 0;
+ margin-top: 30px;
+ background: #7d40e7
+ border-radius: 2px;
+ padding: 15px 20px;
+ font-size: 16px;
+ font-weight: bold;
+ color: #fff;
+ cursor: pointer;
+ transition: background 0.5s;
}
- .box-text2{
- top: -50px;
- .content{
- p{
- padding-bottom: 20px;
- }
+ form buttom[type=submit]:hover {
+ background: #6931ac
+ }
- img{
- margin-left: -65px;
- margin-top: 25px;
- }
-
- .twoArrow{
- margin-top: -5px;
- }
- }
+ h2 {
+ font-size: 24px;
+ font-weight: lighter;
+ margin-bottom: 50px;
+ margin-top: 20px;
+ text-align: center;
}
+`
-}
-
-.tmpl4{
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
- background-color: #FF7F00;
+const Seção3 = styled.div `
+ height: 127px;
+ background-color: #f4f4f4;
+ color:#666;
+ line-height: 1.42857143;
+ font-size:18px;
+ text-align: center;
+ padding-top: 70px;
- h2{
- padding-bottom: 20px;
- }
- p{
- font-size: 20px;
- line-height: 25px;
- vertical-align: middle;
+ p {
+ margin: 0 0 10px 0;
}
- .box-images{
- height: inherit;
- display: table-row;
- padding-top: 50px;
- }
- img{
- display: table-cell;
- vertical-align: middle;
- top: 40px;
- }
+`
+function validateNome (nome) {
+ let flag = false
+ if(nome.length === 0) {
+ flag = true
+ }
+ return flag
}
-.tmpl5{
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
- background-color: #1AB9DE;
-
- .title{
- display: table-row;
- align-items: center;
- img{
- display: table-cell;
- margin-right: 30px;
+function validateMensagem (mensagem) {
+ let flag = false
+ if(mensagem.length === 0) {
+ flag = true
}
- h2{
- display: table-cell;
- text-align: center;
- vertical-align: middle;
- }
- }
+ return flag
+}
- .box-text {
- margin-top: 20px;
- p{
- font-size: 17px;
- font-weight: 15px;
- }
+function validateEmail (email) {
+ let flag = false
+ if (email.split("").filter(x => x === "@").length !== 1) {
+ flag = true
}
-
+ return flag
}
-.tmpl6{
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
- background-color: #673AB7;
-
- .box-text-1{
- h3{
- margin-bottom: 20px;
- font-size: 27px;
- }
- p{
- margin-bottom: 20px;
- font-size: 18px;
- }
- .licences{
- padding: 35px 150px 50px 35px;
- margin-top: 50pz;
- background-image: url("../../img/termos/Entenda.svg");
- background-repeat: no-repeat;
- background-size: cover;
- p::before{
- content: url(../../img/termos/V.svg);
- }
- p{
- padding-left: 20px;
- font-family: "Kalam", regular;
- font-size: 24px;
- white-space: nowrap;
- }
- .row{
- padding-bottom: 5px;
- }
- }
+function Contact (props) {
+
+ const [nome, handleNome] = useState(
+ {
+ dict : {
+ key:false,
+ value:""
+ }
+ })
+ const [email, handleEmail] = useState(
+ {
+ dict : {
+ key:false,
+ value:""
+ }
+ })
+ const [mensagem, handleMensagem] = useState(
+ {
+ dict : {
+ key: false,
+ value:""
+ }
+ })
+
+
+ const preencheNome = (e) => {
+ const aux2 = e.target.value
+ const flag = validateNome(aux2)
+ handleNome({...nome, dict : {
+ key : flag,
+ value : e.target.value
+ }})
+ console.log(nome)
}
-
- .box-text-2{
- background-image: url("../../img/termos/OrthogonalLineUp.png"),url("../../img/termos/OrthogonalLineDown.png");
- background-repeat: no-repeat;
- background-position: left top, right bottom;
- padding-top: 30px;
- padding-left: 50px;
- p{
- font-size: 15px;
- padding-bottom: 15px;
- }
-
- .licenses_type{
- margin-left: -20px;
- font-size: 22px;
- font-weight: bold;
- text-align: right;
- white-space: nowrap;
- }
+ const preencheEmail = (e) => {
+ const aux = e.target.value
+ const flag = validateEmail(aux)
+ handleEmail({...email, dict : {
+ key : flag,
+ value : e.target.value
+ }})
+ console.log(email)
}
-}
-
-.tmpl7{
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
- background-color: #E81F4F;
-
- .title{
- h2{
- font-family: Roboto;
- font-size: 44px;
- }
+ const preencheMensagem = (e) => {
+ const msg = e.target.value
+ console.log(msg)
+ let flag = validateMensagem(msg)
+ handleMensagem({...mensagem, dict : {
+ key : flag,
+ value : msg
+ }})
+ console.log(mensagem)
}
- .box-text{
- margin-top: 20px;
- p{
- line-height: 20px;
- font-family: "Roboto";
- font-size: 18px;
- }
- }
+ const limpaTudo = () => {
+
+ handleNome({
+ dict : {
+ key: false,
+ value:""
+ }}
+ );
+
+ handleEmail({
+ dict : {
+ key: false,
+ value:""
+ }}
+ )
+
+ handleMensagem({
+ dict : {
+ key: false,
+ value:""
+ }}
+ )
- .rodape{
- margin-top: 40px;
- p{
- line-height: 20px;
- font-family: "Pompiere", regular;
- font-size: 28px;
- text-align: center;
- }
- span{
- text-decoration: underline;
- font-family: "Pompiere", regular;
- line-height: 20px;
- font-size: 28px;
- cursor: pointer;
- }
}
-}
-`
+ const onSubmit = (e) => {
+ //on submit we should prevent the page from refreshing
+ e.preventDefault(); //though this is arguable
+ console.log(!(nome.dict.key && email.dict.key && mensagem.dict.key ))
+ if (!(nome.dict.key && email.dict.key && mensagem.dict.key )) {
+ axios.post(`${apiUrl}/contacts`,
+ {
+ contact : {
+ name: nome.dict.value,
+ email: email.dict.value,
+ message: mensagem.dict.value
+ }
-const Slide1 = styled.div`
-
- background:#00BCD4;
- height:500px;
- width:1366px;
-
-`
-
-
-
-const Slide3 = styled.div`
-
- background:#e81f4f;
- height:500px;
- width:1366px;
-
-
- .tmpl3{
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
- background-color: #E81F4F;
-
- .title{
- position: relative;
- padding-left: 10px;
- h3{
- line-height: 40px;
- }
- }
-
- .box-text1{
- .text{
- padding-top: 20px;
- }
-
- .content{
- display: table-row;
-
- p{
- display: table-cell;
- font-size: 18px;
- line-height: 25px;
- vertical-align: middle;
}
+ ).then()
- img{
- position: relative;
- left: 0;
- margin-right: 20px;
- display: table-cell;
- vertical-align: middle;
- margin: 10px 20px 10px -10px;
- }
- }
-
- }
-
- .box-text2{
- top: -50px;
- .content{
- p{
- padding-bottom: 20px;
- }
-
- img{
- margin-left: -65px;
- margin-top: 25px;
- }
-
- .twoArrow{
- margin-top: -5px;
- }
- }
- }
- }
-`
-
-
-const Slide4 = styled.div`
-
-
- background:#ff7f00;
- height:500px;
- width:1366px;
- position: absolute;
- height: 500px;
- width: 1366px;
+
+ limpaTudo();
- .container{
- position: absolute;
- height: auto;
- width: auto;
- margin: 70px 180px 90px;
- }
- .tmpl4{
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
- background-color: #FF7F00;
-
- h2{
- padding-bottom: 20px;
- font-family: Pompiere,regular;
- font-size: 44px;
- line-height: 120%;
- color:#fff;
- margin-top: 20px;
- margin-bottom: 10px
}
- p{
- font-size: 20px;
- line-height: 25px;
- vertical-align: middle;
- font-size: 20px;
- font-family: Roboto,regular;
- color:#fff;
- margin: 0 0 10px;
- text-align: left;
- line-height: 25px;
- padding-right: 10px;
- }
- .box-images{
- height: inherit;
- display: table-row;
- padding-top: 50px;
- }
-
- img{
- display: table-cell;
- vertical-align: middle;
- top: 40px;
- }
+ }
- }
-
-`
-
-
-
-
-class Teste extends Component {
- render() {
- return (
- <div>
- <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet"/>
-
- <Slide>
- <div class="tmpl1">
- <div class="container">
- <Grid container spacing={0}>
- <Grid item xs={6} >
- <div class="box-text">
- <p>A Plataforma Integrada MEC RED é parte do Compromisso 6 do 3º Plano de Ação da Parceria para Governo Aberto (OGP-Brasil), que tem por objetivo “incorporar na polÃtica educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileiraâ€.</p>
- </div>
- </Grid>
- <Grid item xs={6}>
- <div class="box-image">
- <img src={Handshake} alt="handshake"/>
- </div>
- </Grid>
- </Grid>
- </div>
- </div>
- </Slide>
-
- <Slide>
- <div class="tmpl2">
- <div class="container">
- <div class="title">
- <h2>O que é a Plataforma Integrada MEC RED e como ela está organizada?</h2>
- <div class="images">
- <div class="arrow">
- <img src={Arrow_O} alt="Arrow_O"/>
- </div>
- <div class="circle">
- <img src={Arrow_O_1} alt="Arrow_O_1"/>
- </div>
- </div>
- </div>
- <div class="box-text col-md-6">
- <p>Uma plataforma interativa, colaborativa e criada em software livre, que disponibiliza conteúdos do acervo do MEC e indica conteúdos de parceiros com o objetivo de formar uma rede ativa de educadores interessados em usar, criar e compartilhar recursos educacionais digitais.</p>
- </div>
- <div class="box-text col-md-6">
- <p><strong>Repositório</strong> de recursos educacionais digitais que permite aos usuários cadastrados a publicação de seus materiais e <strong>Referatório</strong> que aponta links para conteúdos em sites externos.</p>
- </div>
- </div>
- </div>
- </Slide>
-
- <Slide3>
- <div class="tmpl3">
- <div class="container">
- <div class="title">
- <h3>As recursos educacionais disponibilizados<br/> podem ser de dois tipos:</h3>
- </div>
- <Grid container spacing={5}>
-
-
- <Grid class="text" item md={8}>
- <div class="content">
- <img src={Aberto} alt="Aberto "/>
- <p><strong>Abertos</strong>: recursos sem nenhuma restrição de acesso e<br/> com flexibilidade quanto ao uso ou reuso.</p>
- </div>
- <div class="content">
- <img src={Fechado} alt="Fechado"/>
- <p><strong>Fechados</strong>: recursos com alguma restrição de acesso, uso<br/> ou reuso, como aqueles que, para acesso, há demanda de<br/> cadastro ou que têm licenças restritivas.</p>
- </div>
- </Grid>
-
-
-
- <Grid item md={4}>
- <div class="content">
- <img src={Arrow_down}/>
- <p>Como repositório, a Plataforma hospeda somente Recursos Educacionais Abertos (REA). Todo conteúdo inserido por usuários deve ser aberto.</p>
- </div>
- <div class="content">
- <img class="twoArrow" src={Arrow_double}/>
- <p>Como referatório, a Plataforma aponta links para parceiros, e<br/> esses recursos podem ser abertos ou fechados.</p>
- </div>
- </Grid>
-
-
- </Grid>
- </div>
- </div>
- </Slide3>
-
- <Slide>
- <div class="tmpl4">
- <div class="container">
- <Grid container spacing={5}>
- <Grid item xs={6}>
- <h2>Como se cadastrar?</h2>
- <div>
- <p>Para criar uma conta, o usuário deverá clicar no botão “Cadastre-se†na página inicial da Plataforma e fazer um cadastro utilizando um endereço de e-mail e criando uma senha.</p>
- </div>
- </Grid>
- <Grid item xs={2} style={{alignSelf:"center"}}> <img src={Pessoa} alt="Pessoa" /> </Grid>
- <Grid item xs={2} style={{alignSelf:"center"}}> <img src={Email} alt="Email" /> </Grid>
- <Grid item xs={2} style={{alignSelf:"center"}}> <img src={Seguranca} alt="Seguranca" /> </Grid>
- </Grid>
- </div>
- </div>
- </Slide>
-
- <div style={{background:"#00BCD4", height:"500px", width:"1366px"}}>
- <h2>O que publicar?</h2>
-
- <p>Conteúdos de cunho educacional e pertinentes ao assunto no qual estão inseridos, de autoria do usuário, de autoria coletiva (com consentimento dos demais autores) ou que estejam no domÃnio público. </p>
-
- <h2>O que não publicar?</h2>
-
- <p>Materiais ofensivos, pornográficos, relacionados a atividades ilegais, que invadam a privacidade de terceiros, que violem a legislação de Direito Autoral ou os Direitos Humanos. Propagandas, conteúdos com vÃrus, spam ou comentários abusivos.</p>
- </div>
-
- <div style={{background:"#673ab7", height:"500px", width:"1366px"}}>
- <h3>Direitos do autor e licenças de uso</h3>
-
- <p>Ao inserir um novo material de sua autoria no Repositório, o usuário deverá escolher um dos tipos de licença aberta disponÃveis na Plataforma:</p>
-
- <p>CC-BY</p>
-
- <p>CC-BY-SA</p>
-
- <p>CC-BY-NC</p>
-
- <p>CC-BY-NC-SA</p>
-
- <p>CC-BY</p>
-
- <p> significa que o autor permite que distribuam, remixem, adaptem e criem a partir do seu trabalho, desde que lhe atribuam o devido crédito pela criação original</p>
-
- <p>NC</p>
-
- <p> indica que as criações elaboradas a partir do trabalho do autor podem ser utilizadas somente para fins não comerciais (se não houver esta especificação, o novo recurso poderá ser utilizado para fins comerciais)</p>
-
- <p>SA</p>
-
- <p> quer dizer que as novas criações devem ser licenciadas sob termos idênticos aos do trabalho original</p>
- </div>
- <div style={{background:"#e81f4f", height:"500px", width:"1366px"}}>
- <h2>Respeitamos<br/> a sua privacidade</h2>
- <p>Além de solicitar alguns dados pessoais para o cadastro, a Plataforma coleta, de forma automática, os dados não pessoais relativos à interação dos usuários no sistema. Esses dados nunca serão fornecidos para fins comerciais, assim como nunca serão compartilhados quaisquer dados pessoais que possam identificar o usuário.</p>
- <p>Os dados anônimos poderão ser utilizados para fins de melhoria da plataforma, transparência e para o uso em pesquisas.</p>
+ return(
+ <>
+ <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap" rel="stylesheet"/>
+ <Seção1>
+ <h2>CONTATO</h2>
+ <h3>Quer enviar uma mensagem?</h3>
+ </Seção1>
+
+ <Seção2>
+
+ <Formulário noValidate autoComplete="off">
+ <h2>Entre em contato para enviar dúvidas,<br/>sugestões ou crÃticas</h2>
+ <form onSubmit={e => onSubmit(e)}>
+ <FormInput
+ inputType={"text"}
+ name={"nome"}
+ value={nome.dict.value}
+ placeholder={"Nome *"}
+ error = {nome.dict.key}
+ help = {nome.dict.key ? "insira seu nome para o contato " : ""}
+ handleChange={e => preencheNome(e)}
+ />
+ <FormInput
+ inputType={"text"}
+ name={"email"}
+ value={email.dict.value}
+ placeholder={"E-mail *"}
+ error = {email.dict.key}
+ help = {email.dict.key ? "Formato de e-mail inadequado tente : usuario@provedor.com" : ""}
+ handleChange={e => preencheEmail(e)}
+ />
+ <FormInput
+ inputType={"text"}
+ name={"mensagem"}
+ value={mensagem.dict.value}
+ placeholder={"Mensagem *"}
+ multi = {true}
+ rows = "3"
+ rowsMax = "5"
+ error = {mensagem.dict.key}
+ help = {mensagem.dict.key ? "Faltou escrever sua mensagem de sugestão, crÃtica ou dúvida." : "Escreva sua mensagem no campo acima."}
+ handleChange={e => preencheMensagem(e)}
+ />
+ <Button onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button>
+ </form>
+
+ </Formulário>
+ </Seção2>
+
+ <Seção3>
+
+ <span>MEC - Ministério da Educação </span>
+ <p>Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP: 70.047-900 - BrasÃlia/DF. Telefone: 0800 616161</p>
+
+ </Seção3>
+ </>
+ );
- <p>Dúvidas? Leia a Ãntegra dos <span ng-click="hide()">Termos de Uso</span> ou fale conosco por meio do <span ui-sref="contato">formulário de contato</span>.</p>
- </div>
- </div>
- );
- }
- }
+}
-export default Teste;
+export default Contact;
diff --git a/src/Pages/UserTerms.js b/src/Pages/UserTerms.js
index 411fdd623c1f375c51d1107ec011ccf5f92211d0..9e29e2b2400e9dac71121efa66b3b2cb20007446 100644
--- a/src/Pages/UserTerms.js
+++ b/src/Pages/UserTerms.js
@@ -46,6 +46,7 @@ const center={
width: "100%",
textAlign: "center"
}
+
const container={
paddingInline: "15px",
paddingBlock: "20px",
@@ -54,6 +55,7 @@ const container={
width:"750px"
}
+
const secao2={
height: "100%",
alignItems: "center",
@@ -67,6 +69,7 @@ const AColorido = styled.a`
text-decoration:none;
`
+
const ImagemSeçao2 = styled.div`
font-family: Roboto, sans-serif;
@@ -107,6 +110,7 @@ const ImagemSeçao2 = styled.div`
}
}
`
+
const Secao3 = styled.div`
background-color: #FF7F00;
@media (min-width: 1000px) {
diff --git a/src/img/banner-sobre.jpg b/src/img/banner-sobre.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..fa5d39fcdde21ae4740e41723f6be0322ef9add0
Binary files /dev/null and b/src/img/banner-sobre.jpg differ