mirror of
https://github.com/Rushilwiz/polimatch.git
synced 2025-04-03 19:00:17 -04:00
initialized basic ui and routing elements
This commit is contained in:
parent
115e9077d4
commit
c346b30ab6
23
.gitignore
vendored
23
.gitignore
vendored
|
|
@ -102,3 +102,26 @@ dist
|
|||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
|
|
|||
68
README.md
68
README.md
|
|
@ -1,2 +1,70 @@
|
|||
# polimatch
|
||||
|
||||
Matchmakers for politicans.
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `yarn start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
|
||||
|
||||
The page will reload if you make edits.\
|
||||
You will also see any lint errors in the console.
|
||||
|
||||
### `yarn test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `yarn build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `yarn eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
|
||||
|
||||
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
|
||||
|
||||
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
|
||||
### Code Splitting
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||
|
||||
### Making a Progressive Web App
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||
|
||||
### Advanced Configuration
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||
|
||||
### Deployment
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||
|
||||
### `yarn build` fails to minify
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||
|
|
|
|||
45
package.json
Normal file
45
package.json
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
{
|
||||
"name": "polimatch",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^5.11.4",
|
||||
"@testing-library/react": "^11.1.0",
|
||||
"@testing-library/user-event": "^12.1.10",
|
||||
"bootstrap-icons": "^1.2.2",
|
||||
"node-sass": "4.12",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "4.0.1",
|
||||
"react-transition-group": "^4.4.1",
|
||||
"web-vitals": "^0.2.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint-config-react-app": "^6.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
71
public/favicon.svg
Normal file
71
public/favicon.svg
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
id="svg22"
|
||||
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
|
||||
<metadata
|
||||
id="metadata28">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs26" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1017"
|
||||
id="namedview24"
|
||||
showgrid="false"
|
||||
inkscape:zoom="37.565048"
|
||||
inkscape:cx="6.6404973"
|
||||
inkscape:cy="9.5921016"
|
||||
inkscape:window-x="1912"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg22" />
|
||||
<rect
|
||||
style="fill:#535d6c;fill-opacity:1;stroke-width:3.18426"
|
||||
id="rect861"
|
||||
width="16"
|
||||
height="16"
|
||||
x="0"
|
||||
y="0" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="m 8.0000004,3.0451152 c 3.5547796,-3.6541025 12.4425306,2.7401764 0,10.9623078 -12.4425315,-8.2213304 -3.5547801,-14.6164103 0,-10.9623078 z"
|
||||
id="path20"
|
||||
style="stroke-width:0.800987;fill:#ff0000" />
|
||||
<path
|
||||
style="fill:#535d6c;fill-opacity:1;stroke-width:0.0266205"
|
||||
d="M 0.01245659,14.789557 C 0.01470299,14.131941 0.01540218,10.539151 0.01401035,6.805579 0.01261852,3.072007 0.01276917,0.01556775 0.01434514,0.01349171 0.02599181,-0.00185056 15.953558,0.02093277 15.968794,0.0363135 c 0.01728,0.01743971 0.02967,10.6645555 0.01687,14.5003655 l -0.0048,1.453063 -3.919907,-7.98e-4 c -2.1559489,-4.38e-4 -5.7497504,-0.0015 -7.9862255,-0.0023 l -4.06631827,-0.0015 z M 8.4044549,13.752855 C 8.6027501,13.618118 9.017442,13.320565 9.3259925,13.091628 11.427691,11.532213 12.914815,9.9433432 13.706557,8.4113558 14.197536,7.4613333 14.406801,6.6963274 14.411225,5.8353104 14.416986,4.7142513 14.026906,3.8003365 13.210926,3.0231448 12.869146,2.6976107 12.285561,2.3537851 11.799922,2.1918344 10.506295,1.7604372 9.1361394,2.0104069 8.1904912,2.8503348 L 7.9961298,3.0229673 7.8379419,2.8751207 C 7.4043693,2.4698925 6.7885065,2.1668825 6.1437135,2.0415451 5.7722997,1.9693482 5.1583288,1.9712583 4.7666596,2.0458292 3.3664773,2.3124135 2.2554059,3.2371404 1.7967863,4.5176071 1.6504431,4.9261975 1.5924367,5.2878023 1.5908435,5.8014303 1.58831,6.6182027 1.7511748,7.2877602 2.1636373,8.1562564 2.8987898,9.7042206 4.311931,11.287573 6.3588829,12.856816 c 0.6834614,0.523957 1.6117835,1.168864 1.6575165,1.151478 0.015135,-0.0058 0.1897604,-0.120701 0.3880555,-0.255439 z"
|
||||
id="path863" />
|
||||
<path
|
||||
style="fill:#007fff;fill-opacity:1;stroke-width:0.0266205"
|
||||
d="M 0.01234948,14.829488 C 0.01453697,14.193834 0.01514591,10.601043 0.01370269,6.8455087 0.01225947,3.0899743 0.0124584,0.01555114 0.01414475,0.01345712 0.02644291,-0.00181402 15.9535,0.02087436 15.968667,0.03618462 c 0.01068,0.01077691 0.01936,1.73495068 0.01929,3.83149738 -6.7e-5,2.0965467 -1.7e-4,5.6816885 -2.29e-4,7.966982 l -1.07e-4,4.155079 -3.923305,-7.98e-4 c -2.1578186,-4.39e-4 -5.7531494,-0.0015 -7.9896245,-0.0023 l -4.06631827,-0.0015 z M 8.3353103,13.797105 C 11.784802,11.465824 13.89399,8.965698 14.333788,6.6868101 14.439309,6.1400377 14.43207,5.4139112 14.316203,4.9229515 14.144225,4.1942283 13.809319,3.6089895 13.262028,3.0808102 11.84746,1.7156398 9.5801838,1.6123586 8.1946774,2.8499774 L 7.999176,3.0246114 7.8351818,2.874332 C 7.3969372,2.4727371 6.8317512,2.1908566 6.1886057,2.0531194 5.8401484,1.9784931 5.209086,1.9680097 4.8526555,2.030926 3.986173,2.1838756 3.2498325,2.5596172 2.6645635,3.1474704 1.378262,4.4394516 1.2327775,6.3735306 2.2714895,8.373018 c 0.9317245,1.79354 2.7008234,3.579132 5.3324477,5.382161 0.2105841,0.14428 0.3878799,0.26235 0.3939911,0.262379 0.00611,2.9e-5 0.1579329,-0.09917 0.337382,-0.220453 z"
|
||||
id="path865" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
18
public/index.html
Normal file
18
public/index.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="Matchmaking for politicians." />
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="alternate icon" href="/favicon.ico" />
|
||||
<title>Polimatch</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
8
public/manifest.json
Normal file
8
public/manifest.json
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"short_name": "Polimatch",
|
||||
"name": "Polimatch",
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
3
public/robots.txt
Normal file
3
public/robots.txt
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
23
src/App.js
Normal file
23
src/App.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import React from "react";
|
||||
import { TransitionGroup, CSSTransition } from "react-transition-group";
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
Switch,
|
||||
Route,
|
||||
useLocation,
|
||||
} from "react-router-dom";
|
||||
import About from "./components/About";
|
||||
import Main from "./components/Main";
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<Router>
|
||||
<Switch>
|
||||
<Route component={Main} path="/" exact />
|
||||
<Route component={About} path="/about" />
|
||||
</Switch>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
14
src/components/About.js
Normal file
14
src/components/About.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import "./assets/About.scss";
|
||||
|
||||
const About = (props) => {
|
||||
return (
|
||||
<>
|
||||
<h1>About page.</h1>
|
||||
<Link to="/">Back</Link>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
28
src/components/Landing.js
Normal file
28
src/components/Landing.js
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import "./assets/Landing.scss";
|
||||
|
||||
const Landing = (props) => {
|
||||
return (
|
||||
<div className="landing">
|
||||
<div className="landing-section">
|
||||
<h1>
|
||||
Poli<i className="bi bi-heart-fill"></i>Match
|
||||
</h1>
|
||||
<p>Bringing you one step closer to your representatives.</p>
|
||||
<button
|
||||
onClick={() => {
|
||||
props.setShowTutorial(true);
|
||||
}}
|
||||
>
|
||||
Let's get started.
|
||||
</button>
|
||||
<Link to="/about">
|
||||
<button>About Polimatch</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Landing;
|
||||
27
src/components/Main.js
Normal file
27
src/components/Main.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import React, { useState } from "react";
|
||||
import "./assets/Main.scss";
|
||||
import Tutorial from "./Tutorial";
|
||||
import Landing from "./Landing";
|
||||
import Poll from "./Poll";
|
||||
|
||||
const Main = (props) => {
|
||||
const [showTutorial, setShowTutorial] = useState(true);
|
||||
const [finishTutorial, setFinishTutorial] = useState(true);
|
||||
|
||||
return (
|
||||
<div className="main">
|
||||
{finishTutorial ? (
|
||||
<Poll />
|
||||
) : showTutorial ? (
|
||||
<Tutorial
|
||||
setShowTutorial={setShowTutorial}
|
||||
setFinishTutorial={setFinishTutorial}
|
||||
/>
|
||||
) : (
|
||||
<Landing setShowTutorial={setShowTutorial} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Main;
|
||||
67
src/components/Poll.js
Normal file
67
src/components/Poll.js
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
import React, { useState } from "react";
|
||||
import "./assets/Poll.scss";
|
||||
|
||||
const CARDS = [
|
||||
"Do you believe that fully automatic rifles should be banned?",
|
||||
"Do you believe that abortion should be legal?",
|
||||
"Do you believe that donald trump is a cool guy?",
|
||||
"Do you believe that gay marriage should be legal?",
|
||||
"Do you believe that congress should pass the $2000 COVID19 resolution?",
|
||||
];
|
||||
|
||||
const Poll = (props) => {
|
||||
const [cardStack, setCardStack] = useState();
|
||||
const [currentWeight, setCurrentWeight] = useState(0);
|
||||
|
||||
return (
|
||||
<div className="poll">
|
||||
<div className="container">
|
||||
<div className="card-wrapper">
|
||||
<div className="card card-top-left">
|
||||
<div className="card-inner">
|
||||
<h1 className="card-title">{CARDS[0]}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="slider-container">
|
||||
<input
|
||||
type="range"
|
||||
className="slider"
|
||||
id="weight"
|
||||
name="weight"
|
||||
min="-5"
|
||||
max="5"
|
||||
value={currentWeight}
|
||||
onChange={(e) => {
|
||||
setCurrentWeight(e.target.value);
|
||||
}}
|
||||
/>
|
||||
<h1 className="labels">
|
||||
<span className="left-label">Left Label</span>
|
||||
<span className="right-label">Right Label</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div className="slider-container">
|
||||
<input
|
||||
type="range"
|
||||
className="slider"
|
||||
id="weight"
|
||||
name="weight"
|
||||
min="-5"
|
||||
max="5"
|
||||
value={currentWeight}
|
||||
onChange={(e) => {
|
||||
setCurrentWeight(e.target.value);
|
||||
}}
|
||||
/>
|
||||
<h2 className="labels">
|
||||
<span className="left-label">Left Label</span>
|
||||
<span className="right-label">Right Label</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Poll;
|
||||
103
src/components/Tutorial.js
Normal file
103
src/components/Tutorial.js
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import "./assets/Tutorial.scss";
|
||||
|
||||
const Tutorial = (props) => {
|
||||
const slideElements = [
|
||||
<div>
|
||||
<h1>Welcome to Polimatch!</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates
|
||||
aliquam, eveniet assumenda cum vitae laborum delectus magnam quo
|
||||
architecto qui quibusdam excepturi laudantium! Dignissimos debitis sunt
|
||||
accusantium voluptate recusandae obcaecati? Lorem ipsum dolor, sit amet
|
||||
consectetur adipisicing elit. Laborum neque placeat, cum nobis fuga
|
||||
expedita aut rem iste voluptates? Explicabo delectus aliquam officiis
|
||||
laboriosam aperiam praesentium magnam hic aut quod?
|
||||
</p>
|
||||
</div>,
|
||||
<div>
|
||||
<h1>Slide 2!</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates
|
||||
aliquam, eveniet assumenda cum vitae laborum delectus magnam quo
|
||||
architecto qui quibusdam excepturi laudantium! Dignissimos debitis sunt
|
||||
accusantium voluptate recusandae obcaecati? Lorem ipsum dolor, sit amet
|
||||
consectetur adipisicing elit. Laborum neque placeat, cum nobis fuga
|
||||
expedita aut rem iste voluptates? Explicabo delectus aliquam officiis
|
||||
laboriosam aperiam praesentium magnam hic aut quod?
|
||||
</p>
|
||||
</div>,
|
||||
<div>
|
||||
<h1>Slide 3!</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates
|
||||
aliquam, eveniet assumenda cum vitae laborum delectus magnam quo
|
||||
architecto qui quibusdam excepturi laudantium! Dignissimos debitis sunt
|
||||
accusantium voluptate recusandae obcaecati? Lorem ipsum dolor, sit amet
|
||||
consectetur adipisicing elit. Laborum neque placeat, cum nobis fuga
|
||||
expedita aut rem iste voluptates? Explicabo delectus aliquam officiis
|
||||
laboriosam aperiam praesentium magnam hic aut quod?
|
||||
</p>
|
||||
</div>,
|
||||
<div>
|
||||
<h1>Slide 4!</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates
|
||||
aliquam, eveniet assumenda cum vitae laborum delectus magnam quo
|
||||
architecto qui quibusdam excepturi laudantium! Dignissimos debitis sunt
|
||||
accusantium voluptate recusandae obcaecati? Lorem ipsum dolor, sit amet
|
||||
consectetur adipisicing elit. Laborum neque placeat, cum nobis fuga
|
||||
expedita aut rem iste voluptates? Explicabo delectus aliquam officiis
|
||||
laboriosam aperiam praesentium magnam hic aut quod?
|
||||
</p>
|
||||
</div>,
|
||||
];
|
||||
|
||||
const [slides, setSlides] = useState(slideElements);
|
||||
|
||||
const nextSlide = () => {
|
||||
setSlides(slides.slice(1));
|
||||
};
|
||||
|
||||
const backSlide = () => {
|
||||
setSlides(slideElements.slice(slideElements.length - (slides.length + 1)));
|
||||
};
|
||||
|
||||
const skipSlides = () => {
|
||||
setSlides([]);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (slides.length === 0) {
|
||||
props.setShowTutorial(false);
|
||||
props.setFinishTutorial(true);
|
||||
}
|
||||
}, [slides]);
|
||||
|
||||
return (
|
||||
<div className="tutorial">
|
||||
<button
|
||||
onClick={() => {
|
||||
props.setShowTutorial(false);
|
||||
props.setFinishTutorial(false);
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<div className="slide">
|
||||
{slides[0]}
|
||||
<button className="next-slide" onClick={nextSlide}>
|
||||
next
|
||||
</button>
|
||||
<button className="back-slide" onClick={backSlide}>
|
||||
back
|
||||
</button>
|
||||
<button className="skip-slide" onClick={skipSlides}>
|
||||
skip
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tutorial;
|
||||
9
src/components/assets/About.scss
Normal file
9
src/components/assets/About.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
164
src/components/assets/Landing.scss
Normal file
164
src/components/assets/Landing.scss
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
$mobile: 768px;
|
||||
$tablet: 1024px;
|
||||
|
||||
@mixin mobile {
|
||||
@media (max-width: $mobile) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tablet {
|
||||
@media (min-width: $mobile) and (max-width: $tablet) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin desktop {
|
||||
@media (min-width: $tablet) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
.landing {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
animation: rainbow-bg 30s infinite;
|
||||
}
|
||||
|
||||
.landing-section {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
|
||||
h1 {
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 20px;
|
||||
text-transform: uppercase;
|
||||
color: rgb(255, 255, 255);
|
||||
animation: rainbow 30s infinite;
|
||||
}
|
||||
|
||||
.bi {
|
||||
color: red;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
h1 {
|
||||
font-size: 20vw;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.about {
|
||||
background: black;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
100%,
|
||||
0% {
|
||||
color: rgb(255, 0, 0);
|
||||
}
|
||||
8% {
|
||||
color: rgb(255, 127, 0);
|
||||
}
|
||||
16% {
|
||||
color: rgb(255, 255, 0);
|
||||
}
|
||||
25% {
|
||||
color: rgb(127, 255, 0);
|
||||
}
|
||||
33% {
|
||||
color: rgb(0, 255, 0);
|
||||
}
|
||||
41% {
|
||||
color: rgb(0, 255, 127);
|
||||
}
|
||||
50% {
|
||||
color: rgb(0, 255, 255);
|
||||
}
|
||||
58% {
|
||||
color: rgb(0, 127, 255);
|
||||
}
|
||||
66% {
|
||||
color: rgb(0, 0, 255);
|
||||
}
|
||||
75% {
|
||||
color: rgb(127, 0, 255);
|
||||
}
|
||||
83% {
|
||||
color: rgb(255, 0, 255);
|
||||
}
|
||||
91% {
|
||||
color: rgb(255, 0, 127);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rainbow-bg {
|
||||
100%,
|
||||
0% {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
8% {
|
||||
background-color: rgb(255, 127, 0);
|
||||
}
|
||||
16% {
|
||||
background-color: rgb(255, 255, 0);
|
||||
}
|
||||
25% {
|
||||
background-color: rgb(127, 255, 0);
|
||||
}
|
||||
33% {
|
||||
background-color: rgb(0, 255, 0);
|
||||
}
|
||||
41% {
|
||||
background-color: rgb(0, 255, 127);
|
||||
}
|
||||
50% {
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
58% {
|
||||
background-color: rgb(0, 127, 255);
|
||||
}
|
||||
66% {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
75% {
|
||||
background-color: rgb(127, 0, 255);
|
||||
}
|
||||
83% {
|
||||
background-color: rgb(255, 0, 255);
|
||||
}
|
||||
91% {
|
||||
background-color: rgb(255, 0, 127);
|
||||
}
|
||||
}
|
||||
60
src/components/assets/Main.scss
Normal file
60
src/components/assets/Main.scss
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
$mobile: 768px;
|
||||
$tablet: 1024px;
|
||||
|
||||
@mixin mobile {
|
||||
@media (max-width: $mobile) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tablet {
|
||||
@media (min-width: $mobile) and (max-width: $tablet) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin desktop {
|
||||
@media (min-width: $tablet) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0 16px;
|
||||
margin: 10px;
|
||||
min-width: 64px;
|
||||
height: 36px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 36px;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
|
||||
0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: black;
|
||||
}
|
||||
120
src/components/assets/Poll.scss
Normal file
120
src/components/assets/Poll.scss
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
.poll {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #12c2e9;
|
||||
background: -webkit-linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
|
||||
background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
|
||||
color: white;
|
||||
transition: all 0.25s;
|
||||
animation: fade-in 0.75s;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 60vw;
|
||||
height: 90vh;
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
max-width: 18vw;
|
||||
margin: 60px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card::before,
|
||||
.card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card::before,
|
||||
.card::after,
|
||||
.card .card-inner {
|
||||
background-color: white;
|
||||
border: 2px solid #e2d9d5;
|
||||
border-radius: 5px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.card::before,
|
||||
.card-inner {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.card-inner {
|
||||
position: relative;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.card-top-left::before {
|
||||
transform: translate(-8px, -8px);
|
||||
}
|
||||
|
||||
.card-top-left::after {
|
||||
transform: translate(-16px, -16px);
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.slider {
|
||||
-webkit-appearance: none;
|
||||
height: 20px;
|
||||
margin-left: 5%;
|
||||
width: 90%;
|
||||
border-radius: 10px;
|
||||
background: #12c2e9;
|
||||
background: -webkit-linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
|
||||
background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
|
||||
outline: none;
|
||||
opacity: 0.7;
|
||||
-webkit-transition: 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #4caf50;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #4caf50;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.labels {
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.right-label {
|
||||
float: right;
|
||||
}
|
||||
51
src/components/assets/Tutorial.scss
Normal file
51
src/components/assets/Tutorial.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
.tutorial {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
color: white;
|
||||
animation: show-tutorial 0.75s;
|
||||
|
||||
.next-slide {
|
||||
color: white;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.skip-slide {
|
||||
margin: 10px;
|
||||
color: white;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.skip-slide {
|
||||
margin: 10px;
|
||||
color: white;
|
||||
background: grey;
|
||||
}
|
||||
}
|
||||
|
||||
.slide {
|
||||
width: 25vw;
|
||||
height: 50vh;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 50px;
|
||||
background: white;
|
||||
color: black;
|
||||
|
||||
p {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-tutorial {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
7
src/index.js
Normal file
7
src/index.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import "bootstrap-icons/font/bootstrap-icons.css";
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import "./index.scss";
|
||||
import App from "./App";
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById("root"));
|
||||
6
src/index.scss
Normal file
6
src/index.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Gill Sans", Calibri, sans-serif;
|
||||
}
|
||||
1
src/logo.svg
Normal file
1
src/logo.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
Loading…
Reference in New Issue
Block a user