diff --git a/package.json b/package.json index 5c08322..1760352 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,10 @@ "version": "0.1.0", "private": true, "dependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@mui/icons-material": "^5.0.5", + "@mui/material": "^5.0.6", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", diff --git a/src/App.js b/src/App.js index 10f0054..88377e3 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,22 @@ -import './App.css'; -import Leaderboard from './components/leaderboard'; +import './App.css' +import Leaderboard from './components/leaderboard' import 'bootstrap/dist/css/bootstrap.min.css' +import Landing from './components/Landing' +import Questions from './components/Questions' +import LoginPage from './components/LoginPage' +import CTFhero from './components/CTFhero' +import CTFQuestions from './components/CTFQuestions' function App() { return ( -
- +
+ {/* */} + {/* */} + {/* */} + {/* */} + +
- ); + ) } -export default App; +export default App diff --git a/src/Assets/flag.png b/src/Assets/flag.png new file mode 100644 index 0000000..e8f98d9 Binary files /dev/null and b/src/Assets/flag.png differ diff --git a/src/Assets/rectangle.png b/src/Assets/rectangle.png new file mode 100644 index 0000000..d62ac73 Binary files /dev/null and b/src/Assets/rectangle.png differ diff --git a/src/components/Button.css b/src/components/Button.css new file mode 100644 index 0000000..82eed48 --- /dev/null +++ b/src/components/Button.css @@ -0,0 +1,19 @@ +.button { + font-family: Russo One; + font-style: normal; + font-weight: normal; + font-size: 24px; + line-height: 29px; + margin-right: 40px; + position: absolute; + width: 179px; + height: 62px; + left: 1100px; + top: 44px; +} +.button-title { + background-color: white; + border: none; + padding: 17px 54px 17px 54px; + border-radius: 40px; +} diff --git a/src/components/Button.js b/src/components/Button.js new file mode 100644 index 0000000..5852592 --- /dev/null +++ b/src/components/Button.js @@ -0,0 +1,12 @@ +import React from 'react' +import './Button.css' + +function Button({ title }) { + return ( +
+ +
+ ) +} + +export default Button diff --git a/src/components/CTFQuestions.css b/src/components/CTFQuestions.css new file mode 100644 index 0000000..62f922c --- /dev/null +++ b/src/components/CTFQuestions.css @@ -0,0 +1,37 @@ +.questionBox { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} + +.tag { + background-color: white; + border: none; + padding: 7px 10px 7px 10px; + border-radius: 40px; + font-family: Russo One; + font-style: normal; + font-weight: normal; + font-size: 18px; +} + +.QuestionPage { + margin-top: 400px; + align-items: center; + display: flex; + justify-content: center; + color: white; + font-family: Russo One; +} + +.questionBox { + display: flex; + flex-direction: column; +} + +.questionBox textarea { + border: 2rem; + border-radius: 10px; + color: white; +} diff --git a/src/components/CTFQuestions.js b/src/components/CTFQuestions.js new file mode 100644 index 0000000..d83180b --- /dev/null +++ b/src/components/CTFQuestions.js @@ -0,0 +1,24 @@ +import React from 'react' +import CTFhero from './CTFhero' +import './CTFQuestions.css' +import { Data } from './Data' + +function CTFQuestions() { + return ( +
+ +
+ <> +

What are common hydrogen powered vehicles?

+ +
+
+ +
+ +
+
+ ) +} + +export default CTFQuestions diff --git a/src/components/CTFhero.css b/src/components/CTFhero.css new file mode 100644 index 0000000..125b3b2 --- /dev/null +++ b/src/components/CTFhero.css @@ -0,0 +1,29 @@ +.ctf-text { + color: white; + font-family: Russo One; + font-style: normal; + font-weight: normal; +} + +.ctf-text h1 { + position: absolute; + width: 187px; + height: 121px; + left: 626px; + top: 214px; + font-size: 100px; + line-height: 120px; + background: none; + text-decoration: underline; +} + +.ctf-text h3 { + position: absolute; + width: 299px; + height: 48px; + left: 570px; + top: 335px; + font-size: 40px; + line-height: 48px; + background: none; +} diff --git a/src/components/CTFhero.js b/src/components/CTFhero.js new file mode 100644 index 0000000..ddb2f6a --- /dev/null +++ b/src/components/CTFhero.js @@ -0,0 +1,17 @@ +import React from 'react' +import Button from './Button' +import './CTFhero.css' + +function CTFhero() { + return ( +
+
+ ) +} + +export default CTFhero diff --git a/src/components/Data.js b/src/components/Data.js new file mode 100644 index 0000000..185e21f --- /dev/null +++ b/src/components/Data.js @@ -0,0 +1,23 @@ +export const Data = [ + { + Field: 'Science', + Question: 'What is theory of relativity?', + }, + + { + Field: 'Technology', + Question: 'What are common hydrogen powered vehicles?', + Question: + 'Is TESLA really helping save humanity by cutting down emmisions?', + }, + + { + Field: 'Architecture', + Question: 'What is theory of relativity?', + }, + + { + Field: 'Art', + Question: 'What is theory of relativity?', + }, +] diff --git a/src/components/Dropdown.css b/src/components/Dropdown.css new file mode 100644 index 0000000..644b0c7 --- /dev/null +++ b/src/components/Dropdown.css @@ -0,0 +1,33 @@ +.question h2 { + color: #082032; + font-family: Russo One; +} + +.dropdown { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; +} + +.wrap { + margin-top: 25px; + background-color: white; + color: black; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + text-align: center; + cursor: pointer; + padding: 1.5rem; + border-radius: 10px; +} +.dropdown { + background: white; + font-family: Russo One; + color: white; + text-decoration: none; + border-radius: 10px; +} diff --git a/src/components/Dropdown.js b/src/components/Dropdown.js new file mode 100644 index 0000000..022c685 --- /dev/null +++ b/src/components/Dropdown.js @@ -0,0 +1,55 @@ +import React, { useState } from 'react' +import { Data } from './Data' +import './Dropdown.css' +import AddIcon from '@mui/icons-material/Add' +import ClearIcon from '@mui/icons-material/Clear' +import CheckIcon from '@mui/icons-material/Check' +import { InboxRounded } from '@mui/icons-material' + +const Dropdown = () => { + const [clicked, setClicked] = useState(false) + const toggle = (index) => { + if (clicked === index) { + return setClicked(null) + } + + setClicked(index) + } + + return ( +
+
+ {Data.map((item, index) => { + return ( + <> +
+

toggle(index)} key={index}> + {item.Field} +

+ + {clicked === index ? ( + + ) : ( + + )} + +
+ {clicked === index ? ( +
+
+

{item.Question}

+
+ ) : null} + + ) + })} +
+
+ ) +} + +export default Dropdown diff --git a/src/components/Landing.css b/src/components/Landing.css new file mode 100644 index 0000000..353b22c --- /dev/null +++ b/src/components/Landing.css @@ -0,0 +1,108 @@ +@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Andika&display=swap'); +* { + background-color: #082032; +} + +.landing { + margin-top: 40px; +} +.header { + display: flex; + justify-content: space-between; + align-items: center; + margin-left: 40px; +} + +.leaderboard { + /* position: absolute; */ + width: 175px; + height: 29px; + margin-left: 40px; + top: 47px; + display: flex; + object-fit: fill; + font-family: Russo One; + font-style: normal; + font-weight: normal; + font-size: 24px; + line-height: 29px; + color: white; + cursor: pointer; +} + +.leaderboard h2:hover { + font-size: 33px; + color: gray; +} + +.ctf-text { + color: white; + font-family: Russo One; + font-style: normal; + font-weight: normal; +} + +.ctf-text h1 { + position: absolute; + width: 187px; + height: 121px; + left: 626px; + top: 214px; + font-size: 100px; + line-height: 120px; + background: none; +} + +.ctf-text h3 { + position: absolute; + width: 299px; + height: 48px; + left: 570px; + top: 335px; + font-size: 40px; + line-height: 48px; + background: none; +} +.flag { + padding-top: 250px; + top: 400px; + align-items: center; +} + +.rectangle { + margin-top: -122px; +} + +.about-us { + color: white; + margin: 40px 115px 110px 130px; +} + +.about-us h2 { + border-bottom: 3px solid white; + text-align: left; + font-family: Russo One; + font-size: 24px; + line-height: 29px; + display: flex; +} + +.about-us h4 { + font-family: Andika; + font-style: normal; + font-weight: normal; + font-size: 24px; + line-height: 39px; + padding-top: 20px; +} + +.register { + background-color: white; + border: none; + padding: 16px 96px 16px 96px; + border-radius: 40px; + font-family: Russo One; + margin-top: 20px; + font-size: 24px; +} diff --git a/src/components/Landing.js b/src/components/Landing.js new file mode 100644 index 0000000..6031050 --- /dev/null +++ b/src/components/Landing.js @@ -0,0 +1,52 @@ +import React from 'react' +import './Landing.css' +import flag from '../Assets/flag.png' +import rectangle from '../Assets/rectangle.png' +import Button from './Button' +import LoginPage from './LoginPage' +import RegisterPage from './RegisterPage' + +function Landing() { + return ( +
+
+
+

Leaderboard

+
+
+
+
+ +
+

CTF

+

Catch The Flag

+
+ +
+ flag + rectangle +
+ +
+

About Us

+

+ Ut consequat semper viverra nam libero justo laoreet. Vel orci porta + non pulvinar neque laoreet. Id consectetur purus ut faucibus pulvinar + elementum. Tempus imperdiet nulla malesuada pellentesque elit eget + gravida cum. Sit amet massa vitae tortor condimentum. Nisl purus in + mollis nunc sed id. Ac placerat vestibulum lectus mauris ultrices. + Nulla facilisi cras fermentum odio eu feugiat. Feugiat scelerisque + varius morbi enim nunc. Molestie nunc non blandit massa enim nec dui + nunc mattis. Non tellus orci ac auctor augue mauris augue neque. Duis + ultricies lacus sed turpis. Lectus quam id leo in vitae. +

+ +
+ {/* */} + {/* */} +
+ ) +} + +export default Landing diff --git a/src/components/LoginPage.css b/src/components/LoginPage.css new file mode 100644 index 0000000..d67f7b5 --- /dev/null +++ b/src/components/LoginPage.css @@ -0,0 +1,83 @@ +.ctf-text { + color: white; + font-family: Russo One; + font-style: normal; + font-weight: normal; +} + +.ctf-text h1 { + position: absolute; + width: 187px; + height: 121px; + left: 626px; + top: 214px; + font-size: 100px; + line-height: 120px; + background: none; + text-decoration: underline; +} + +.ctf-text h3 { + position: absolute; + width: 299px; + height: 48px; + left: 570px; + top: 335px; + font-size: 40px; + line-height: 48px; + background: none; +} +.login-form { + display: flex; + flex-direction: column; + position: absolute; + padding: 40px; + width: 600px; + top: 60%; + left: 50%; + width: 666px; + height: 300px; + left: 387px; + top: 386px; + + background: #ffffff; + border-radius: 20px; + text-align: center; +} + +.login-form h1 { + font-family: Russo One; + text-decoration: underline; + text-underline-offset: 6 px; +} + +.login-form h1 { + background: none; +} + +.input { + background: #082032; + border: 0; + border-radius: 20px; + padding: 12px 30px; + color: white; +} + +.submit { + background: none; + border: 0; + font-family: Russo One; +} +.submit:hover { + text-decoration: underline; +} + +.box-container { + background: none; + padding: 10px; +} + +.input::placeholder { + color: white; + font-family: Russo One; +} diff --git a/src/components/LoginPage.js b/src/components/LoginPage.js new file mode 100644 index 0000000..bcf7b4c --- /dev/null +++ b/src/components/LoginPage.js @@ -0,0 +1,54 @@ +import React, { useState } from 'react' +import './LoginPage.css' +import Button from './Button' +import CTFhero from './CTFhero' + +function LoginPage() { + const [email, SetEmail] = useState('') + const [password, SetPassword] = useState('') + const [newentry, SetNewentry] = useState([]) + + const submitForm = () => {} + return ( +
+ +
+
+

Login

+ + + + +
+
+
+ ) +} + +export default LoginPage diff --git a/src/components/Questions.css b/src/components/Questions.css new file mode 100644 index 0000000..92e9ea6 --- /dev/null +++ b/src/components/Questions.css @@ -0,0 +1,63 @@ +.ctf-text { + color: white; + font-family: Russo One; + font-style: normal; + font-weight: normal; +} + +.ctf-text h1 { + position: absolute; + width: 187px; + height: 121px; + left: 626px; + top: 214px; + font-size: 100px; + line-height: 120px; + background: none; + text-decoration: underline; +} + +.ctf-text h3 { + position: absolute; + width: 299px; + height: 48px; + left: 570px; + top: 335px; + font-size: 40px; + line-height: 48px; + background: none; +} + +.line { + height: 2px; + border-width: 0; + color: gray; + background-color: gray; +} + +.question h2 { + color: #082032; + font-family: Russo One; +} + +.dropdown { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; +} + +.wrap { + margin-top: 25px; + background-color: white; + color: black; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + text-align: center; + cursor: pointer; + padding: 1.5rem; + border-radius: 10px; +} diff --git a/src/components/Questions.js b/src/components/Questions.js new file mode 100644 index 0000000..d2ea96f --- /dev/null +++ b/src/components/Questions.js @@ -0,0 +1,27 @@ +import React, { useState } from 'react' +import Button from './Button' +import './Questions.css' +import { Data } from './Data' + +import Dropdown from './Dropdown' + +function Questions() { + return ( +
+
+ ) +} + +export default Questions diff --git a/src/components/RegisterPage.css b/src/components/RegisterPage.css new file mode 100644 index 0000000..c6b4e25 --- /dev/null +++ b/src/components/RegisterPage.css @@ -0,0 +1,82 @@ +.ctf-text { + color: white; + font-family: Russo One; + font-style: normal; + font-weight: normal; +} + +.ctf-text h1 { + position: absolute; + width: 187px; + height: 121px; + left: 626px; + top: 214px; + font-size: 100px; + line-height: 120px; + background: none; + text-decoration: underline; +} + +.ctf-text h3 { + position: absolute; + width: 299px; + height: 48px; + left: 570px; + top: 335px; + font-size: 40px; + line-height: 48px; + background: none; +} +.login-form { + display: flex; + flex-direction: column; + position: absolute; + padding: 40px; + width: 600px; + top: 60%; + left: 50%; + width: 666px; + height: 350px; + left: 387px; + top: 386px; + + background: #ffffff; + border-radius: 20px; + text-align: center; +} + +.login-form h1 { + font-family: Russo One; + text-decoration: underline; + text-underline-offset: 6 px; +} + +.login-form h1 { + background: none; +} + +.input { + background: #082032; + border: 0; + border-radius: 20px; + padding: 12px 30px; +} + +.submit { + background: none; + border: 0; + font-family: Russo One; +} +.submit:hover { + text-decoration: underline; +} + +.box-container { + background: none; + padding: 10px; +} + +.input::placeholder { + color: white; + font-family: Russo One; +} diff --git a/src/components/RegisterPage.js b/src/components/RegisterPage.js new file mode 100644 index 0000000..80f5e36 --- /dev/null +++ b/src/components/RegisterPage.js @@ -0,0 +1,65 @@ +import React, { useState } from 'react' +import './RegisterPage.css' +import Button from './Button' +import CTFhero from './CTFhero' + +function RegisterPage() { + const [email, SetEmail] = useState('') + const [username, SetUsername] = useState('') + const [password, SetPassword] = useState('') + const [newentry, SetNewentry] = useState([]) + + return ( +
+ +
+
+

Register

+ + + + + + + +
+
+
+ ) +} + +export default RegisterPage diff --git a/src/components/leaderboard.css b/src/components/leaderboard.css index 7219391..0e5037b 100644 --- a/src/components/leaderboard.css +++ b/src/components/leaderboard.css @@ -1,51 +1,50 @@ -html{ - background-color: #082032; - +@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap'); +html { + background-color: #082032; } -.table{ - font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; - font-weight: 600; - background-color: white; - border-color: #082032 !important; - color: #082032 !important; - border-radius: 30px; - margin-bottom: 80px; +.table { + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-weight: 600; + background-color: white; + border-color: #082032 !important; + color: #082032 !important; + border-radius: 30px; + margin-bottom: 80px; } -thead{ - height: 50px ; - font-size: 20px; - font-weight: 600; +thead { + height: 50px; + font-size: 20px; + font-weight: 600; } -.tableContainer{ - position: absolute; - width: 80%; - left: 130px; - top: 366px; - +.tableContainer { + position: absolute; + width: 80%; + left: 130px; + top: 366px; } -.ctfHeader{ - position: absolute; - width: 187px; - height: 121px; - left: 40%; - top: 145px; - font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; - font-size: 100px; - line-height: 120px; - color: #FFFFFF; +.ctfHeader { + position: absolute; + width: 187px; + height: 121px; + left: 40%; + top: 145px; + font-family: Russo One; + font-size: 100px; + line-height: 120px; + color: #ffffff; } -.leaderboardHeader{ - position: absolute; - width: 261px; - height: 48px; - left: 38%; - top: 266px; - font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; - font-style: normal; - font-weight: normal; - font-size: 40px; - line-height: 48px; +.leaderboardHeader { + position: absolute; + width: 261px; + height: 48px; + left: 38%; + top: 266px; + font-family: Russo One; + font-style: normal; + font-weight: normal; + font-size: 40px; + line-height: 48px; - color: #FFFFFF; -} \ No newline at end of file + color: #ffffff; +} diff --git a/src/components/leaderboard.jsx b/src/components/leaderboard.jsx index af81a47..ede0a59 100644 --- a/src/components/leaderboard.jsx +++ b/src/components/leaderboard.jsx @@ -1,4 +1,5 @@ import React from 'react' +import Button from './Button' import "./leaderboard.css" export default function Leaderboard(){ // data from ranking API @@ -56,7 +57,9 @@ export default function Leaderboard(){ } return ( +
+