diff --git a/src/App.js b/src/App.js index be9f0b0326b75682e389469c411f7fbc0949049f..8cdaf45e67beeef051c59433260c8aa5c16f2de8 100644 --- a/src/App.js +++ b/src/App.js @@ -40,7 +40,7 @@ import { Store } from './Store' import TermsPage from './Pages/TermsPage.js' import PublicationPermissionsPage from './Pages/PublicationPermissionsPage.js' import TabPlataformaMEC from './Pages/TabsHelp/TabPlataformaMEC'; - +import ItemStore from './Pages/ItemStore.js' import EditProfilePage from './Pages/EditProfilePage.js' export default function App(){ @@ -99,6 +99,7 @@ export default function App(){ <Route path="/plataforma-mec" component={TabPlataformaMEC}/> <Route path="/recuperar-senha" component={PasswordRecoveryPage}/> <Route path='/professor' component={PageProfessor}/> + <Route path='/loja' component={ItemStore} /> </Switch> <EcFooter/> <GNUAGPLfooter/> diff --git a/src/Components/ItemCard.js b/src/Components/ItemCard.js new file mode 100644 index 0000000000000000000000000000000000000000..82a6bbc470023d95daa3c6f82bffb88b61aef893 --- /dev/null +++ b/src/Components/ItemCard.js @@ -0,0 +1,77 @@ +/*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, {useState, useContext} from 'react'; +import styled from 'styled-components'; +import Grid from '@material-ui/core/Grid'; +import Card from '@material-ui/core/Card'; +import CardActions from '@material-ui/core/CardActions'; +import CardContent from '@material-ui/core/CardContent'; +import gem from '../img/gamification/gem.svg'; + +const ItemImage = styled.img` + border-radius: 150; + max-width: 100%; +` + +const ItemName = styled.h3` + font-size: 0.8em; + font-weight: lighter; + color: #666666; +` + +const ItemDescription = styled.p` + font-size: 0.5em; + color: #666666; +` + +const actionStyle = (operation) => { + var stl = { + fontSize: '0.5em', + paddingTop: '1em', + marginBottom: 0, + fontWeight: 'bold', + } + stl.color = operation != 'buy' ? '#02a5c3' : '#666666'; + return stl; +} + +const GemImg = styled.img` + height: 23px; + position: relative; + top: 8px; + padding-right: 5px; +` + +export default function ItemCard (props) { + return ( + <Grid item xs={9} sm={2}> + <Card style={{textAlign: 'center'}}> + <CardContent> + <ItemImage src="https://upload.wikimedia.org/wikipedia/en/9/90/The_DuckDuckGo_Duck.png"/> + <ItemName>Avatar um</ItemName> + <ItemDescription>Descrição | Descrição</ItemDescription> + <p style={actionStyle(props.action)}> + {props.action == 'buy' ? <GemImg src={gem}/> : <span/>} + {props.action == 'buy' ? "COMPRAR" : + props.action == 'equip' ? "USAR" : "TIRAR"} + </p> + </CardContent> + </Card> + </Grid> + ) +} diff --git a/src/Components/ItemCarousel.js b/src/Components/ItemCarousel.js new file mode 100644 index 0000000000000000000000000000000000000000..851da0f9b6b62804f42e136a8379bc140e8dd5ad --- /dev/null +++ b/src/Components/ItemCarousel.js @@ -0,0 +1,41 @@ +/*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, {useState, useContext} from 'react'; +import styled from 'styled-components'; +import Grid from '@material-ui/core/Grid'; +import Card from '@material-ui/core/Card'; +import CardActions from '@material-ui/core/CardActions'; +import CardContent from '@material-ui/core/CardContent'; +import ItemCard from './ItemCard.js'; + +export default function ItemCarousel (props) { + return ( + <Grid + item container + direction="row" + justify="center" + alignItems="center" + xs={12} + spacing={3} + > + {[1, 2, 3, 4, 5, 6].map(() => { + return <ItemCard action="buy"/> + })} + </Grid> + ) +} diff --git a/src/Components/StoreGuide.js b/src/Components/StoreGuide.js new file mode 100644 index 0000000000000000000000000000000000000000..03bcf8a2cb6b78f4377c961f224b363fdd0e5901 --- /dev/null +++ b/src/Components/StoreGuide.js @@ -0,0 +1,69 @@ +/*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, {useState, useContext} from 'react'; +import styled from 'styled-components'; +import Grid from '@material-ui/core/Grid'; +import Card from '@material-ui/core/Card'; +import CardContent from '@material-ui/core/CardContent'; +import { Typography } from '@material-ui/core'; + +const StoreTitle = styled.h1` + margin-top: 0; +` + +const StoreTopic = styled.h2` + padding-top: 0.5em; + font-size: 1em; + font-weight: 100; +` + +const StoreBody = styled.p` + font-size: 0.8em; +` +export default function ItemStoreContainer (props) { + return ( + <Grid item xs={10} sm={7}> + <Card> + <CardContent> + <StoreTitle> + Lojinha + </StoreTitle> + <StoreTopic> + O que são "gemas"? + </StoreTopic> + <StoreBody> + Aqui eu explico muito bem o que são "gemas" + </StoreBody> + <StoreTopic> + Regras + </StoreTopic> + <StoreBody> + 1st RULE: You do not talk about FIGHT CLUB. + 2nd RULE: You DO NOT talk about FIGHT CLUB. + 3rd RULE: If someone says "stop" or goes limp, taps out the fight is over. + 4th RULE: Only two guys to a fight. + 5th RULE: One fight at a time. + 6th RULE: No shirts, no shoes. + 7th RULE: Fights will go on as long as they have to. + 8th RULE: If this is your first night at FIGHT CLUB, you HAVE to fight. + </StoreBody> + </CardContent> + </Card> + </Grid> + ) +} diff --git a/src/Components/UserCardGamified.js b/src/Components/UserCardGamified.js new file mode 100644 index 0000000000000000000000000000000000000000..711b9ee433f6a13fcb6f6cbea4c120d8c5793233 --- /dev/null +++ b/src/Components/UserCardGamified.js @@ -0,0 +1,38 @@ +/*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, {useState, useContext} from 'react'; +import styled from 'styled-components'; +import Grid from '@material-ui/core/Grid'; +import Card from '@material-ui/core/Card'; +import CardActions from '@material-ui/core/CardActions'; +import CardContent from '@material-ui/core/CardContent'; + +export default function UserCardGamified (props) { + return ( + <Grid item xs={6} sm={3}> + <Card style={{backgroundColor:'pink'}}> + <CardContent> + Eu serei o card da pessoa + </CardContent> + <CardActions> + Learn more + </CardActions> + </Card> + </Grid> + ) +} diff --git a/src/Pages/ItemStore.js b/src/Pages/ItemStore.js new file mode 100644 index 0000000000000000000000000000000000000000..9ecc408ba4b15e1e44426b909537153f4d57955d --- /dev/null +++ b/src/Pages/ItemStore.js @@ -0,0 +1,60 @@ +/*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, {useState, useContext} from 'react'; +import styled from 'styled-components'; +import Grid from '@material-ui/core/Grid'; +import Card from '@material-ui/core/Card'; +import CardActions from '@material-ui/core/CardActions'; +import CardContent from '@material-ui/core/CardContent'; +import Container from '@material-ui/core/Container'; +import UserCardGamified from '../Components/UserCardGamified.js'; +import StoreGuide from '../Components/StoreGuide.js'; +import ItemCarousel from '../Components/ItemCarousel.js'; + +const StoreSection = styled.h2` + font-weight: 100; +` + +export default function ItemStoreContainer (props) { + return ( + <Container> + <Grid container + direction="row" + justify="space-around" + alignItems="stretch" + style={{ + marginTop: '2em', + marginBottom: '2em', + }} + > + <UserCardGamified/> + <StoreGuide/> + </Grid> + <StoreSection> + Avatares + <ItemCarousel/> + </StoreSection> + <StoreSection> + Itens + </StoreSection> + <StoreSection> + Bordas + </StoreSection> + </Container> + ) +} diff --git a/src/img/gamification/gem.svg b/src/img/gamification/gem.svg new file mode 100644 index 0000000000000000000000000000000000000000..4f083b2c9fc2fa8603aadfd86afbfdddc50458f8 --- /dev/null +++ b/src/img/gamification/gem.svg @@ -0,0 +1,17 @@ +<svg width="203" height="307" viewBox="0 0 203 307" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M51.5765 127.504L2.37646 102.604L51.5765 127.504Z" fill="#CA1818"/> +<path d="M51.7765 127.504L101.076 1.80389L2.37646 102.604L51.7765 127.504Z" fill="#CA1818"/> +<path d="M51.7766 129.304C51.3766 129.304 50.8766 129.204 50.4766 129.004L1.0766 104.104C0.576595 103.804 0.176595 103.404 0.0765953 102.904C-0.0234047 102.404 0.0765953 101.904 0.476595 101.504L99.1766 0.703867C99.8766 0.00386721 101.077 -0.196133 102.077 0.203867C103.077 0.603867 103.577 1.50387 103.277 2.30387L54.0766 128.004C53.8766 128.504 53.3766 129.004 52.6766 129.204C52.3766 129.304 52.0766 129.304 51.7766 129.304ZM5.7766 102.204L50.5766 124.704L95.0766 10.9039L5.7766 102.204Z" fill="white"/> +<path d="M150.277 127.504L199.777 102.604L101.077 1.80389L150.277 127.504Z" fill="#CA1818"/> +<path d="M150.276 129.304C149.976 129.304 149.776 129.304 149.476 129.204C148.776 129.004 148.277 128.604 148.076 128.004L98.8765 2.30387C98.5765 1.50387 99.0765 0.603867 100.077 0.203867C101.077 -0.196133 102.277 0.00386721 102.977 0.703867L201.677 101.504C202.077 101.904 202.176 102.404 202.076 102.904C201.977 103.404 201.576 103.804 201.076 104.104L151.576 129.004C151.176 129.204 150.676 129.304 150.276 129.304ZM107.077 10.8039L151.576 124.704L196.377 102.104L107.077 10.8039Z" fill="white"/> +<path d="M150.276 127.504L101.076 304.304L199.776 102.604L150.276 127.504Z" fill="#CA1818"/> +<path d="M101.076 306.104C100.876 306.104 100.676 306.104 100.376 306.004C99.1763 305.704 98.4763 304.804 98.7763 303.904L147.976 127.104C148.076 126.604 148.476 126.204 148.976 126.004L198.476 101.104C199.276 100.704 200.376 100.704 201.176 101.204C201.976 101.704 202.276 102.504 201.876 103.204L103.176 304.904C102.876 305.604 101.976 306.104 101.076 306.104ZM152.376 128.604L109.876 281.304L195.076 107.104L152.376 128.604Z" fill="white"/> +<path d="M51.7765 127.504L2.37646 102.604L101.076 304.304L51.7765 127.504Z" fill="#CA1818"/> +<path d="M101.076 306.104C100.176 306.104 99.2764 305.704 98.8764 304.904L0.176405 103.204C-0.223595 102.504 0.0764047 101.704 0.876405 101.204C1.6764 100.704 2.7764 100.704 3.5764 101.104L53.0764 126.004C53.5764 126.304 53.9764 126.704 54.0764 127.104L103.376 303.904C103.676 304.804 102.876 305.704 101.776 306.004C101.476 306.104 101.276 306.104 101.076 306.104ZM7.0764 107.104L92.2764 281.304L49.7764 128.604L7.0764 107.104Z" fill="white"/> +<path d="M51.7764 127.504H150.276L101.076 1.80383L51.7764 127.504Z" fill="#CA1818"/> +<path d="M150.276 129.304H51.7764C51.0764 129.304 50.3764 129.004 49.8764 128.604C49.4764 128.204 49.2764 127.604 49.4764 127.004L98.7764 1.30385C99.0764 0.503845 99.9764 0.00384521 101.076 0.00384521C102.176 0.00384521 102.976 0.503845 103.276 1.30385L152.476 127.004C152.676 127.504 152.576 128.104 152.076 128.604C151.676 129.004 150.976 129.304 150.276 129.304ZM54.9764 125.704H147.176L101.076 8.00385L54.9764 125.704Z" fill="white"/> +<path d="M51.8764 127.504L51.7764 127.804H101.076H150.376L150.276 127.504H101.076H51.8764Z" fill="#CA1818"/> +<path d="M150.276 127.504H51.7764L101.076 304.304L150.276 127.504Z" fill="#CA1818"/> +<path d="M101.076 306.104C99.9764 306.104 99.0763 305.504 98.7763 304.704L49.5764 127.904C49.4764 127.404 49.5764 126.804 50.0764 126.404C50.4764 126.004 51.1764 125.704 51.8764 125.704H150.276C150.976 125.704 151.676 125.904 152.076 126.404C152.476 126.804 152.676 127.404 152.576 127.904L103.376 304.704C103.076 305.504 102.176 306.104 101.076 306.104ZM54.6763 129.304L101.076 295.804L147.376 129.304H54.6763Z" fill="white"/> +</svg> +