finished frontend
Joshua Hsueh
0
backend/master
Normal file
BIN
frontend/public/images/createpost.jpg
Normal file
|
After Width: | Height: | Size: 25 KiB |
BIN
frontend/public/images/events.jpg
Normal file
|
After Width: | Height: | Size: 51 KiB |
|
Before Width: | Height: | Size: 111 KiB After Width: | Height: | Size: 106 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 60 KiB |
BIN
frontend/public/images/politalk.ico
Normal file
|
After Width: | Height: | Size: 58 KiB |
BIN
frontend/public/images/politalk.png
Normal file
|
After Width: | Height: | Size: 58 KiB |
BIN
frontend/public/images/post.jpg
Normal file
|
After Width: | Height: | Size: 80 KiB |
BIN
frontend/public/images/posts.jpg
Normal file
|
After Width: | Height: | Size: 53 KiB |
|
|
@ -8,6 +8,7 @@
|
|||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="shortcut icon" href="images/logo.ico" />
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
|
|||
|
||||
const Events = (props) => {
|
||||
const [state, setState] = useState({
|
||||
user: { username: "" },
|
||||
user: { username: "HyperionLegion" },
|
||||
events: [
|
||||
{
|
||||
id: 1,
|
||||
|
|
|
|||
|
|
@ -15,11 +15,13 @@ const Main = (props) => {
|
|||
>
|
||||
<div className="container">
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<h1 className="text-primary text-center bg-white rounded-lg shadow-lg p-3 mb-5">
|
||||
PoliTalk
|
||||
</h1>
|
||||
<div class="text-center">
|
||||
<img
|
||||
class="text-center img-fluid"
|
||||
src="images/logo.png"
|
||||
width="350px"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
|
|
@ -32,7 +34,7 @@ const Main = (props) => {
|
|||
<div className="container">
|
||||
<h1 className="d-flex justify-content-center m-2 p-2">About Us</h1>
|
||||
<p className="d-flex justify-content-center m-2 p-2">
|
||||
PoliTalk is a politics exchange platform, aiming to create a
|
||||
ThinkOpenly is a politics exchange platform, aiming to create a
|
||||
professional and efficient connection between underrepresented
|
||||
minority groups and politics. Community members can post questions
|
||||
or concerns and other members can +1 the post. Professional
|
||||
|
|
@ -54,15 +56,27 @@ const Main = (props) => {
|
|||
|
||||
<div className="row exp-grids py-3 d-inline-flex justify-content-center">
|
||||
<div className="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
|
||||
<img src="images/browse.png" alt=" " className="img-fluid" />
|
||||
<img src="images/posts.jpg" alt=" " className="img-fluid" />
|
||||
<div className="exp wthree">
|
||||
<h5>Browse Stocks</h5>
|
||||
<h5>Browse Posts</h5>
|
||||
<div className="clearfix"></div>
|
||||
<p>
|
||||
Easily browse through stocks and see their past. Change the
|
||||
scale of the graph to your pleasing. Then if you wish to
|
||||
hold a position, specify the amount of money you wish to
|
||||
donate and submit.
|
||||
Easily browse through NLP generated recommended posts in
|
||||
your feed. These posts match your previous interests and
|
||||
recent trending political and social subjects.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
|
||||
<img src="images/events.jpg" alt=" " className="img-fluid" />
|
||||
<div className="exp wthree">
|
||||
<h5>Browse Events</h5>
|
||||
<div className="clearfix"></div>
|
||||
|
||||
<p>
|
||||
Browse local community political events that match your
|
||||
political interests in order to best advocate your concerns
|
||||
and have your voice heard.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -70,22 +84,20 @@ const Main = (props) => {
|
|||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<img src="images/logo.png" alt=" " className="img-fluid" />
|
||||
<img src="images/post.jpg" alt=" " className="img-fluid" />
|
||||
<div className="exp wthree">
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<h5>Charities</h5>
|
||||
<h5>Discussion Thread</h5>
|
||||
<div className="clearfix"></div>
|
||||
|
||||
<p>
|
||||
Help out your favorite charities while learning and
|
||||
practicing trading. The charities will receive the initial
|
||||
buy price. Then, you can set a percentage of the profits
|
||||
that also goes to charity. In this era, instead of a simple
|
||||
donation, you can use our trading platform to trade for your
|
||||
charities.
|
||||
View someone's post and leave a like or comment to further
|
||||
discuss the thread or show your support. Each like or
|
||||
comment will make your feed give more posts or events that
|
||||
are similar.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -93,21 +105,24 @@ const Main = (props) => {
|
|||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<img src="images/portfolio.png" alt=" " className="img-fluid" />
|
||||
<img
|
||||
src="images/createpost.jpg"
|
||||
alt=" "
|
||||
className="img-fluid"
|
||||
/>
|
||||
<div className="exp wthree">
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<h5>Portfolio</h5>
|
||||
<h5>Create Posts</h5>
|
||||
<div className="clearfix"></div>
|
||||
|
||||
<p>
|
||||
Easily manage your portfolio with Reinvest. Here you can see
|
||||
all the positions you currently hold as well as the initial
|
||||
buy price and quantity. You can sell the stock by clicking
|
||||
Sell for the desired stock. You can also see the current
|
||||
earnings for yourself and the charity.
|
||||
Create your own post anonymously for free and easily. Your
|
||||
post will be seen by many others as well as politicians that
|
||||
can possibly advocate and recognize your interests for your
|
||||
given enough support.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,15 +2,36 @@ import React, { useState, useEffect } from "react";
|
|||
|
||||
const Posts = (props) => {
|
||||
const [state, setState] = useState({
|
||||
user: { username: "" },
|
||||
user: { username: "HyperionLegion" },
|
||||
posts: [
|
||||
{
|
||||
id: 1,
|
||||
upvotes: 2,
|
||||
text: "Action for Climate Change",
|
||||
comments: 0,
|
||||
comments: 6,
|
||||
topics: ["climate change", "air pollution"],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
upvotes: 19,
|
||||
text: "Cancel Culture",
|
||||
comments: 14,
|
||||
topics: ["cancel", "celebrities"],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
upvotes: 152,
|
||||
text: "Stimulus Checks",
|
||||
comments: 40,
|
||||
topics: ["stimulus checks"],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
upvotes: 24,
|
||||
text: "Asian Hate Crimes",
|
||||
comments: 14,
|
||||
topics: ["hate", "Asian"],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
|
|
|
|||
BIN
website/images/createpost.jpg
Normal file
|
After Width: | Height: | Size: 25 KiB |
BIN
website/images/events.jpg
Normal file
|
After Width: | Height: | Size: 51 KiB |
|
Before Width: | Height: | Size: 111 KiB After Width: | Height: | Size: 106 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 60 KiB |
BIN
website/images/politalk.ico
Normal file
|
After Width: | Height: | Size: 58 KiB |
BIN
website/images/post.jpg
Normal file
|
After Width: | Height: | Size: 80 KiB |
BIN
website/images/posts.jpg
Normal file
|
After Width: | Height: | Size: 53 KiB |
|
|
@ -3,7 +3,8 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>PoliTalk</title>
|
||||
<title>ThinkOpenly</title>
|
||||
<link rel="shortcut icon" href="images/logo.ico" />
|
||||
<link rel="stylesheet" href="css/index.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
|
|
@ -16,7 +17,7 @@
|
|||
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top">
|
||||
<a href="#reinvest"
|
||||
><h1 class="navbar-brand" width="100px" href="#reinvest">
|
||||
PoliTalk
|
||||
ThinkOpenly
|
||||
</h1></a
|
||||
>
|
||||
<button
|
||||
|
|
@ -70,13 +71,14 @@
|
|||
>
|
||||
<div class="container">
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<h1
|
||||
class="text-primary text-center bg-white rounded-lg shadow-lg p-3 mb-5"
|
||||
>
|
||||
PoliTalk
|
||||
</h1>
|
||||
<div class="text-center">
|
||||
<img
|
||||
class="text-center img-fluid"
|
||||
src="images/logo.png"
|
||||
width="350px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
|
|
@ -89,7 +91,7 @@
|
|||
<div class="container">
|
||||
<h1 class="d-flex justify-content-center m-2 p-2">About Us</h1>
|
||||
<p class="d-flex justify-content-center m-2 p-2">
|
||||
PoliTalk is a politics exchange platform, aiming to create a
|
||||
ThinkOpenly is a politics exchange platform, aiming to create a
|
||||
professional and efficient connection between underrepresented
|
||||
minority groups and politics. Community members can post questions or
|
||||
concerns and other members can +1 the post. Professional legislators
|
||||
|
|
@ -108,15 +110,27 @@
|
|||
|
||||
<div class="row exp-grids py-3 d-inline-flex justify-content-center">
|
||||
<div class="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
|
||||
<img src="images/browse.png" alt=" " class="img-fluid" />
|
||||
<img src="images/posts.jpg" alt=" " class="img-fluid" />
|
||||
<div class="exp wthree">
|
||||
<h5>Browse Stocks</h5>
|
||||
<h5>Browse Posts</h5>
|
||||
<div class="clearfix"></div>
|
||||
<p>
|
||||
Easily browse through stocks and see their past. Change the
|
||||
scale of the graph to your pleasing. Then if you wish to hold
|
||||
a position, specify the amount of money you wish to donate and
|
||||
submit.
|
||||
Easily browse through NLP generated recommended posts in your
|
||||
feed. These posts match your previous interests and recent
|
||||
trending political and social subjects.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
|
||||
<img src="images/events.jpg" alt=" " class="img-fluid" />
|
||||
<div class="exp wthree">
|
||||
<h5>Browse Events</h5>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<p>
|
||||
Browse local community political events that match your
|
||||
political interests in order to best advocate your concerns
|
||||
and have your voice heard.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -124,21 +138,20 @@
|
|||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<img src="images/logo.png" alt=" " class="img-fluid" />
|
||||
<img src="images/post.jpg" alt=" " class="img-fluid" />
|
||||
<div class="exp wthree">
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<h5>Charities</h5>
|
||||
<h5>Discussion Thread</h5>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<p>
|
||||
Help out your favorite charities while learning and practicing
|
||||
trading. The charities will receive the initial buy price.
|
||||
Then, you can set a percentage of the profits that also goes
|
||||
to charity. In this era, instead of a simple donation, you can
|
||||
use our trading platform to trade for your charities.
|
||||
View someone's post and leave a like or comment to further
|
||||
discuss the thread or show your support. Each like or comment
|
||||
will make your feed give more posts or events that are
|
||||
similar.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -146,21 +159,20 @@
|
|||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<img src="images/portfolio.png" alt=" " class="img-fluid" />
|
||||
<img src="images/createpost.jpg" alt=" " class="img-fluid" />
|
||||
<div class="exp wthree">
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<h5>Portfolio</h5>
|
||||
<h5>Create Posts</h5>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<p>
|
||||
Easily manage your portfolio with Reinvest. Here you can see
|
||||
all the positions you currently hold as well as the initial
|
||||
buy price and quantity. You can sell the stock by clicking
|
||||
Sell for the desired stock. You can also see the current
|
||||
earnings for yourself and the charity.
|
||||
Create your own post anonymously for free and easily. Your
|
||||
post will be seen by many others as well as politicians that
|
||||
can possibly advocate and recognize your interests for your
|
||||
given enough support.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||