Carousel.js 20.48 KiB
/*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 } from 'react';
import ReactDOM from 'react-dom';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
import styled from 'styled-components';
import Grid from '@material-ui/core/Grid';
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
/*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";
import Like from "../img/termos/Like.svg";
import Unlike from "../img/termos/Unlike.svg";
import Line from "../img/termos/Line.svg";
import Entenda from "../img/termos/Entenda.svg";
import V from "../img/termos/V.svg";
import OrthogonalLineUp from "../img/termos/OrthogonalLineUp.png"
import OrthogonalLineDown from "../img/termos/OrthogonalLineDown.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;
}
.container{
position: absolute;
height: auto;
width: auto;
margin: 70px 180px 90px;
}
.tmpl1{
background-color: #00BCD4;
height: inherit;
width: inherit;
display: flex;
align-items: center;
.box-text{
position: relative;
float: left;
padding-right: 10px;
padding-left: 10px;
p {
margin: 0 0 10px;
}
}
.box-image{
position: relative;
float: right;
}
}
.tmpl2{
height: inherit;
width: inherit;
display: flex;
align-items: center;
background-color: #673AB7;
.title{
padding-bottom: 50px;
}
.images{
position: absolute;
display: table-row;
}
.arrow{
display: table-row;
position: absolute;
margin-left: 55px;
margin-top: -15px;
width: 282px;
}
.circle{
display: table-row;
position: absolute;
margin-top: -100px;
margin-left: 795px; width: 191px;
}
h2 {
margin-top: 20px;
margin-bottom: 10px;
font-weight: 500;
}
.box-text{
p{
font-size: 18px;
line-height: 25px;
}
position: relative;
}
}
.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;
}
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;
}
}
}
}
.tmpl4{
height: inherit;
width: inherit;
display: flex;
align-items: center;
background-color: #FF7F00;
h2{
padding-bottom: 20px;
}
p{
font-size: 20px;
line-height: 25px;
vertical-align: middle;
}
.box-images{
height: inherit;
display: table-row;
padding-top: 50px;
}
img{
display: table-cell;
vertical-align: middle;
top: 40px;
}
}
.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;
}
h2{
display: table-cell;
text-align: center;
vertical-align: middle; }
}
.box-text {
margin-top: 20px;
p{
font-size: 17px;
font-weight: 15px;
}
}
}
.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;
margin-top: 0px;
}
.licences{
padding: 35px 150px 50px 35px;
margin-top: 50pz;
background-image: url(${Entenda});
background-repeat: no-repeat;
background-size: cover;
p::before{
content: url(${V});
}
p{
padding-left: 20px;
font-family: "Kalam", regular;
font-size: 24px;
white-space: nowrap;
}
.row{
padding-bottom: 5px;
}
}
}
.box-text-2{
background-image: url(${OrthogonalLineUp}),url(${OrthogonalLineDown});
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;
}
.row {
margin-right: -15px;
margin-left: -15px;
p {
padding-left: 15px;
}
}
}
}
.tmpl7{
height: inherit;
width: inherit;
display: flex;
align-items: center;
background-color: #E81F4F;
.title{
h2{
font-family: Roboto;
font-size: 44px;
}
}
.box-text{
margin-top: 20px;
p{
line-height: 20px;
font-family: "Roboto";
font-size: 18px;
}
}
.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 CarouselStyled = styled(Carousel)`
.carousel.carousel-slider {
height: 500px !important;
}
.carousel .slider-wrapper.axis-horizontal {
height: 500px !important;
}
.carousel .control-dots {
position: absolute !important; padding-bottom: 20px;
}
.carousel .control-arrow:before, .carousel.carousel-slider .control-arrow:before {
margin: 0 5px;
display: inline-block;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
content: ' ';
}
.carousel .control-arrow {
background: transparent !important;
}
.m4d-icons {
size: 50px
}
`
class TermsCarousel extends Component {
render() {
return (
<CarouselStyled
showThumbs= {false}
showStatus= {false}
transitionTime={1000}
width={"1366px"}
>
<div >
<Slide>
<div className="tmpl1">
<div className="container">
<Grid container spacing={0}>
<Grid item xs={6} >
<div className="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 style={{display:"flex",justifyContent:"center"}} item xs={6}>
<div className="box-image">
<img src={Handshake} alt="handshake"/>
</div>
</Grid>
</Grid>
</div>
</div>
</Slide>
</div>
<div>
<Slide>
<div className="tmpl2">
<div className="container">
<div className="title">
<h2>O que é a Plataforma Integrada MEC RED e como ela está organizada?</h2>
<div className="images">
<div className="arrow">
<img src={Arrow_O} alt="Arrow_O"/>
</div>
<div className="circle">
<img src={Arrow_O_1} alt="Arrow_O_1"/>
</div>
</div>
</div>
<Grid container>
<Grid className="box-text" item xs={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>
</Grid>
<Grid className="box-text" item xs={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>
</Grid>
</Grid>
</div>
</div>
</Slide>
</div>
<div>
<Slide>
<div className="tmpl3">
<div className="container">
<Grid className="title" container spacing={1}>
<Grid item xs={12}>
<h3>Os recursos educacionais disponibilizados<br/> podem ser de dois tipos:</h3>
</Grid>
</Grid>
<Grid className="box-text1" container spacing={1}>
<Grid className="text" item xs={8}>
<div className="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 className="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 className="box-text2" item xs={4}>
<div className="content">
<img src={Arrow_down} alt="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 className="content">
<img className="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>
</Slide>
</div>
<div>
<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 style={{width:"150px",height:"150px"}} src={Pessoa} alt="Pessoa" /> </Grid>
<Grid item xs={2} style={{alignSelf:"center"}}> <img style={{width:"150px",height:"150px"}} src={Email} alt="Email" /> </Grid>
<Grid item xs={2} style={{alignSelf:"center"}}> <img style={{width:"150px",height:"150px"}} src={Seguranca} alt="Seguranca" /> </Grid>
</Grid>
</div>
</div>
</Slide>
</div>
<div>
<Slide>
<div class="tmpl5">
<div class="container">
<Grid container justify="space-evenly" spacing={12}>
<Grid style={{paddingRight: "40px"}} item xs={6}> <div class="title">
<img src={Like} alt= "Like"/>
<h2>O que publicar?</h2>
</div>
<img src={Line} alt="Line"/>
<div class="box-text">
<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>
</div>
</Grid>
<Grid item xs={6}>
<div class= "title">
<img src={Unlike} alt="Unlike"/>
<h2>O que não publicar?</h2>
</div>
<img src={Line} alt="Line"/>
<div class="box-text">
<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>
</Grid>
</Grid>
</div>
</div>
</Slide>
</div>
<div>
<Slide>
<div className="tmpl6">
<div className="container">
<Grid container>
<Grid className="box-text-1" item xs={7}>
<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>
<div className="licences">
<Grid className="row" container>
<Grid item xs={6}>
<p>CC-BY</p>
</Grid>
<Grid item xs={6}>
<p>CC-BY-SA</p>
</Grid>
</Grid>
<Grid className="row" container>
<Grid item xs={6}>
<p>CC-BY-NC</p>
</Grid>
<Grid item xs={6}>
<p>CC-BY-NC-SA</p>
</Grid>
</Grid>
</div>
</Grid>
<Grid className="box-text-2" item xs={5}>
<Grid className="row" container>
<Grid item xs={2}>
<p className="licenses_type">CC-BY</p>
</Grid>
<Grid item xs={10}>
<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>
</Grid>
</Grid>
<Grid className="row" container>
<Grid item xs={2}>
<p className="licenses_type">NC</p>
</Grid>
<Grid item xs={10}>
<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>
</Grid>
</Grid>
<Grid className="row" container>
<Grid item xs={2}> <p className="licenses_type">SA</p>
</Grid>
<Grid item xs={10}>
<p> quer dizer que as novas criações devem ser licenciadas sob termos idênticos aos do trabalho original</p>
</Grid>
</Grid>
</Grid>
</Grid>
</div>
</div>
</Slide>
</div>
<div>
<Slide>
<div class="tmpl7">
<div class="container">
<Grid container>
<Grid className="title" item xs={4}>
<h2>Respeitamos<br/> a sua privacidade</h2>
</Grid>
<Grid className="box-text" item xs={8}>
<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>
</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 <a style={{color: "#fff"}} href="contato">formulário de contato</a>.</p>
</div>
</div>
</div>
</Slide>
</div>
</CarouselStyled>
)
}
}
export default TermsCarousel;