From c9fd197792a5cfda09e435847c4bb176f56ccb98 Mon Sep 17 00:00:00 2001 From: shubhankarshankar Date: Thu, 9 Jul 2020 05:44:37 +0530 Subject: [PATCH 01/28] Format Code --- src/App.js | 16 +- src/App.test.js | 8 +- src/Layout.js | 283 ++++--- src/Layout.module.css | 197 +++-- src/components/Card.js | 79 +- src/components/Card.module.css | 234 +++--- src/components/SideHeader.js | 57 +- src/components/SideHeader.module.css | 4 +- src/components/TopHeader.js | 29 +- src/components/TopHeader.module.css | 50 +- src/components/dropdown.js | 34 +- src/components/dropdown.module.css | 153 ++-- src/components/footer.js | 122 +-- src/components/footer.module.css | 254 +++--- src/index.css | 124 +-- src/index.js | 40 +- src/screens/AboutEvent.js | 107 ++- src/screens/AboutEvent.module.css | 710 ++++++++--------- src/screens/AboutEventP.js | 286 ++++--- src/screens/AllEvents.js | 152 ++-- src/screens/AllEvents.module.css | 305 ++++--- src/screens/CreateEvent.js | 129 ++- src/screens/CreateEvent.module.css | 40 +- src/screens/Home.js | 308 ++++--- src/screens/Home.module.css | 1109 +++++++++++++------------- src/screens/Landing.js | 283 ++++--- src/screens/Layout.module.css | 223 +++--- src/screens/Payment.js | 213 ++--- src/screens/Payment.module.css | 800 ++++++++++--------- src/screens/PaymentPageHF.js | 283 ++++--- src/serviceWorker.js | 32 +- src/setupTests.js | 2 +- 32 files changed, 3465 insertions(+), 3201 deletions(-) diff --git a/src/App.js b/src/App.js index ffa8805..cef1aed 100644 --- a/src/App.js +++ b/src/App.js @@ -1,15 +1,13 @@ -import React from 'react'; -import AppLayout from './Layout' -import Home from './screens/Home' -import Payment from './screens/Payment' -import { Route, Link, BrowserRouter as Router } from 'react-router-dom' +import React from "react"; +import AppLayout from "./Layout"; +import Home from "./screens/Home"; +import Payment from "./screens/Payment"; +import { Route, Link, BrowserRouter as Router } from "react-router-dom"; function App() { return ( - } /> - - - + } /> + ); } diff --git a/src/App.test.js b/src/App.test.js index 4db7ebc..352d7b8 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,8 +1,8 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import App from './App'; +import React from "react"; +import { render } from "@testing-library/react"; +import App from "./App"; -test('renders learn react link', () => { +test("renders learn react link", () => { const { getByText } = render(); const linkElement = getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); diff --git a/src/Layout.js b/src/Layout.js index c43fb4f..980880e 100644 --- a/src/Layout.js +++ b/src/Layout.js @@ -1,138 +1,179 @@ -import React, { Component } from 'react'; -import SideHeader from './components/SideHeader' -import Home from './screens/Home' -import { Layout,Menu,Modal } from 'antd'; -import styles from './Layout.module.css' +import React, { Component } from "react"; +import SideHeader from "./components/SideHeader"; +import Home from "./screens/Home"; +import { Layout, Menu, Modal } from "antd"; +import styles from "./Layout.module.css"; -import TopHeader from './components/TopHeader'; -import { Form, Input, Button, Checkbox } from 'antd'; -import { UserOutlined, LockOutlined } from '@ant-design/icons'; -import CFooter from './components/footer' +import TopHeader from "./components/TopHeader"; +import { Form, Input, Button, Checkbox } from "antd"; +import { UserOutlined, LockOutlined } from "@ant-design/icons"; +import CFooter from "./components/footer"; const { Header, Footer, Sider, Content } = Layout; export default class AppLayout extends Component { - constructor(props){ - super(props) - this.state={login:false,collapsed:true} + constructor(props) { + super(props); + this.state = { login: false, collapsed: true }; + } + login = () => { + if (this.state.login) { + this.setState({ login: false }); + } else { + this.setState({ login: true }); } - login=()=>{ - if(this.state.login){ - this.setState({login:false}) - }else{ - this.setState({login:true}) - }} - toggle = () => { - this.setState({ - collapsed: !this.state.collapsed, - }); - }; + }; + toggle = () => { + this.setState({ + collapsed: !this.state.collapsed, + }); + }; render() { return ( - -
-
- - - - - - + +
+
+ + +
- - - } onClick={this.toggle} style={{backgroundColor:'#121212'}} > - nav 1 - - -
- - {this.props.screen} - -
-
-
-

Sep 26

-

Sesame Street Live! MAke Your Magic

-

Grand Chapiteau

-
$45
-
-
-
-

Sign In

-
- - } placeholder="Username" /> - - - } - type="password" - placeholder="Password" - /> - - - - REMEMBER ME - + + + } + onClick={this.toggle} + style={{ backgroundColor: "#121212" }} + > + nav 1 + + + + +
+ + {this.props.screen} + +
+
+
+

Sep 26

+

+ Sesame Street Live! MAke Your Magic +

+

Grand Chapiteau

+
$45
+
+
+
+

Sign In

+ + + + } + placeholder="Username" + /> + + + + } + type="password" + placeholder="Password" + /> + + + + + REMEMBER ME + + - - Forgot password - - + + Forgot password + + - - - Or Register now - - -
-
- - - - + + + Or Register now + + +
+ + + + - ); } diff --git a/src/Layout.module.css b/src/Layout.module.css index 984cc7c..ab437a4 100644 --- a/src/Layout.module.css +++ b/src/Layout.module.css @@ -1,110 +1,109 @@ -.logo{ - width: 4em; - height: 3.2em; - top:10px; - left: -3em; - position: relative; - background-image: url('./components/new.png'); - background-size: cover; - background-repeat: no-repeat; - } - .eventname{ - font-size: medium; - color: white; - } - .place{ - color:white; - } - .date{ - font-size: small; - color: white; - } - .textontop{ - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - } - .lableoflogin{ - color:white; +.logo { + width: 4em; + height: 3.2em; + top: 10px; + left: -3em; + position: relative; + background-image: url("./components/new.png"); + background-size: cover; + background-repeat: no-repeat; +} +.eventname { + font-size: medium; + color: white; +} +.place { + color: white; +} +.date { + font-size: small; + color: white; +} +.textontop { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.lableoflogin { + color: white; + font-size: xx-large; - font-size: xx-large; - - font-weight: bold; - } -.login{ - background-color: transparent; - display: flex; - height: 85vh; -z-index: 11000; - width: 100%; -background-color: transparent; - border-radius: 25px; - flex-direction: row; + font-weight: bold; } -.loginformforgot{ - font-size: 15px; - color: #AA0020; - font-weight: bolder; +.login { + background-color: transparent; + display: flex; + height: 85vh; + z-index: 11000; + width: 100%; + background-color: transparent; + border-radius: 25px; + flex-direction: row; } -.loginformreg{ - font-size: 12px; - color: #AA0020; - font-weight: bolder; +.loginformforgot { + font-size: 15px; + color: #aa0020; + font-weight: bolder; } -.loginbutton{ - color: white; - background-color: #AA0020; - border-width: 0px; - border-radius: 5px; - width: 40%; - height: 50px; - font-size: medium; +.loginformreg { + font-size: 12px; + color: #aa0020; + font-weight: bolder; } -.image{display: flex; -width: 50%; -color: white; -height: 100%; -justify-content: center; -align-items: center; -background-size: cover; -background: url('./components/b1.jpg'); +.loginbutton { + color: white; + background-color: #aa0020; + border-width: 0px; + border-radius: 5px; + width: 40%; + height: 50px; + font-size: medium; } -.loginholder{ - display: flex; - width: 50%; - flex:1; - color: white; - flex-direction: column; +.image { + display: flex; + width: 50%; + color: white; + height: 100%; justify-content: center; - align-items: center; - background-color: #121212; + align-items: center; + background-size: cover; + background: url("./components/b1.jpg"); } -.loginregbtn{ - position: relative; - right: 0px; - color: grey; - font-size: medium; - font-weight: bolder; - font-family: mont; - background-color: #121212; -border-width: 0px; - +.loginholder { + display: flex; + width: 50%; + flex: 1; + color: white; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #121212; } -.createevent{ - display: flex; - color: white; - font-size: small; - font-weight: bolder; - font-family: mont; - background-color: #121212; - border-width: 0px; - align-self: flex-start; - width: 160px; - height: 99%; - background-color: #AA0020;margin-right: 10px; - justify-content: center; - align-items: center; - +.loginregbtn { + position: relative; + right: 0px; + color: grey; + font-size: medium; + font-weight: bolder; + font-family: mont; + background-color: #121212; + border-width: 0px; +} +.createevent { + display: flex; + color: white; + font-size: small; + font-weight: bolder; + font-family: mont; + background-color: #121212; + border-width: 0px; + align-self: flex-start; + width: 160px; + height: 99%; + background-color: #aa0020; + margin-right: 10px; + justify-content: center; + align-items: center; } diff --git a/src/components/Card.js b/src/components/Card.js index fee071d..8d47839 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -1,37 +1,60 @@ -import React, { Component } from 'react'; -import styles from './Card.module.css' -import back from './b1.jpg'; -import {Link} from 'react-router-dom' -import { ArrowRightOutlined} from '@ant-design/icons'; +import React, { Component } from "react"; +import styles from "./Card.module.css"; +import back from "./b1.jpg"; +import { Link } from "react-router-dom"; +import { ArrowRightOutlined } from "@ant-design/icons"; export default class Card extends Component { - constructor(props){ - super(props) - this.state={hover:false} - } - h=()=>{ - - this.setState({hover:true}) - - } - h_=()=>{ - this.setState({hover:false}) + constructor(props) { + super(props); + this.state = { hover: false }; } + h = () => { + this.setState({ hover: true }); + }; + h_ = () => { + this.setState({ hover: false }); + }; render() { - return ( - -
- - +
+ + + - - - - - - + + {" "} + +
- ); } } diff --git a/src/components/Card.module.css b/src/components/Card.module.css index 69e4671..3d5a7ff 100644 --- a/src/components/Card.module.css +++ b/src/components/Card.module.css @@ -1,144 +1,132 @@ -.cardholder{ - display: flex; - flex-direction: column; - width: 100%; -height: 30rem; -margin-left: 1em; - justify-content: center; - align-items: center; - border-radius: 10px; - position: relative; - overflow: hidden; - background-image: url('./b1.jpg'); - background-color: blue; - filter: grayscale(80%); +.cardholder { + display: flex; + flex-direction: column; + width: 100%; + height: 30rem; + margin-left: 1em; + justify-content: center; + align-items: center; + border-radius: 10px; + position: relative; + overflow: hidden; + background-image: url("./b1.jpg"); + background-color: blue; + filter: grayscale(80%); background-size: cover; position: relative; - background-repeat: no-repeat; - transition: all 0.5s; + background-repeat: no-repeat; + transition: all 0.5s; } -@media (min-width:600px){ - .cardholder{ - width: 90%; - } +@media (min-width: 600px) { + .cardholder { + width: 90%; + } } -.exp{ - color: white; - - position: absolute; +.exp { + color: white; - margin: 0 auto; - bottom: 0px; - text-align: center; + position: absolute; - font-size: medium; - font-family: mont; + margin: 0 auto; + bottom: 0px; + text-align: center; + + font-size: medium; + font-family: mont; } -.imgholder{ - - +.imgholder { } -.buttonndstuff{ - width: 50%; - display: flex; - flex-direction: row; - +.buttonndstuff { + width: 50%; + display: flex; + flex-direction: row; } -.img{ - - - - - +.img { } -.cardholder:hover{ - background-position-x:-10px; +.cardholder:hover { + background-position-x: -10px; - filter: grayscale(20%); + filter: grayscale(20%); } -.eventp{ - color: white; - - position: absolute; +.eventp { + color: white; + + position: absolute; - margin: 0 auto; - left: 5%; - top: 60%; /* Adjust this value to move the positioned div up and down */ - text-align: center; + margin: 0 auto; + left: 5%; + top: 60%; /* Adjust this value to move the positioned div up and down */ + text-align: center; - font-size: medium; - font-family: mont; - + font-size: medium; + font-family: mont; } -.eventn{ - color: white; - position: absolute; - - margin: 0 auto; - left: 5%; - top: 70%; /* Adjust this value to move the positioned div up and down */ - text-align: center; - - font-size: 30px; - font-family: mont; - +.eventn { + color: white; + position: absolute; + + margin: 0 auto; + left: 5%; + top: 70%; /* Adjust this value to move the positioned div up and down */ + text-align: center; + + font-size: 30px; + font-family: mont; } -.eventl{ - color: white; - position: absolute; - transition: all 1s; - margin: 0 auto; - border-width: 0px; - left: 5%; - top: 85%; /* Adjust this value to move the positioned div up and down */ - text-align: center; -background-color: transparent; - font-size: medium; - font-family: mont; - - +.eventl { + color: white; + position: absolute; + transition: all 1s; + margin: 0 auto; + border-width: 0px; + left: 5%; + top: 85%; /* Adjust this value to move the positioned div up and down */ + text-align: center; + background-color: transparent; + font-size: medium; + font-family: mont; } -.eventll{ - display:none; - transition: all 1s; - +.eventll { + display: none; + transition: all 1s; } @font-face { - font-family: mont; - src: url('./fonts/Montserrat-Regular.ttf'); - } -.booknow{ - color: white; - position: absolute; - transition: all 1s; - margin: 0 auto; - margin-bottom: 1%; - border-width: 0px; - left: 5%; - top: 85%; /* Adjust this value to move the positioned div up and down */ - text-align: center; -background-color: transparent; - font-size: medium; - font-family: mont; -}.booknowl{ - transition: all 1s; - display: none; - color: white; - position: absolute; - transition: all 1s; - margin: 0 auto; - border-width: 0px; - left: 5%; - top: 85%; /* Adjust this value to move the positioned div up and down */ - text-align: center; -background-color: transparent; - font-size: medium; - font-family: mont; + font-family: mont; + src: url("./fonts/Montserrat-Regular.ttf"); +} +.booknow { + color: white; + position: absolute; + transition: all 1s; + margin: 0 auto; + margin-bottom: 1%; + border-width: 0px; + left: 5%; + top: 85%; /* Adjust this value to move the positioned div up and down */ + text-align: center; + background-color: transparent; + font-size: medium; + font-family: mont; +} +.booknowl { + transition: all 1s; + display: none; + color: white; + position: absolute; + transition: all 1s; + margin: 0 auto; + border-width: 0px; + left: 5%; + top: 85%; /* Adjust this value to move the positioned div up and down */ + text-align: center; + background-color: transparent; + font-size: medium; + font-family: mont; } @media screen and (max-width: 800px) { - .cardholder{ - width: 100% !important; - margin-bottom: 5% !important; - margin: 0px; - } -} \ No newline at end of file + .cardholder { + width: 100% !important; + margin-bottom: 5% !important; + margin: 0px; + } +} diff --git a/src/components/SideHeader.js b/src/components/SideHeader.js index b8a7011..c618ee4 100644 --- a/src/components/SideHeader.js +++ b/src/components/SideHeader.js @@ -1,37 +1,44 @@ -import React, { Component } from 'react'; +import React, { Component } from "react"; -import styles from './SideHeader.module.css' -import { Menu} from 'antd'; +import styles from "./SideHeader.module.css"; +import { Menu } from "antd"; + +import { VideoCameraOutlined, UploadOutlined } from "@ant-design/icons"; -import { - - VideoCameraOutlined, - UploadOutlined, - } from '@ant-design/icons'; - - export default class SideHeader extends Component { - constructor(props){ - super(props) - this.state={collapsed:true} -} -toggle = () => { + constructor(props) { + super(props); + this.state = { collapsed: true }; + } + toggle = () => { this.setState({ collapsed: !this.state.collapsed, }); }; - + render() { return ( - - - } style={{backgroundColor:'#121212'}}> - nav 2 - - } style={{backgroundColor:'#121212'}}> - nav 3 - - + + } + style={{ backgroundColor: "#121212" }} + > + nav 2 + + } + style={{ backgroundColor: "#121212" }} + > + nav 3 + + ); } } diff --git a/src/components/SideHeader.module.css b/src/components/SideHeader.module.css index 4d1f1b8..3593087 100644 --- a/src/components/SideHeader.module.css +++ b/src/components/SideHeader.module.css @@ -1,4 +1,2 @@ - @media screen and (max-width: 800px) { - -} \ No newline at end of file +} diff --git a/src/components/TopHeader.js b/src/components/TopHeader.js index 16f4c40..2f43c4c 100644 --- a/src/components/TopHeader.js +++ b/src/components/TopHeader.js @@ -1,23 +1,18 @@ -import React, { Component } from 'react'; -import styles from './TopHeader.module.css' -import { Avatar } from 'antd'; -import {Button} from 'antd' +import React, { Component } from "react"; +import styles from "./TopHeader.module.css"; +import { Avatar } from "antd"; +import { Button } from "antd"; export default class TopHeader extends Component { render() { return ( <> -
- -
- - - - -
- - - -
- ); +
+
+ + +
+
+ + ); } } diff --git a/src/components/TopHeader.module.css b/src/components/TopHeader.module.css index 87374fe..30ec890 100644 --- a/src/components/TopHeader.module.css +++ b/src/components/TopHeader.module.css @@ -1,34 +1,24 @@ - -.branding{ - -background-color: pink; -display: flex; - -flex-direction:column; - - +.branding { + background-color: pink; + display: flex; + flex-direction: column; } -.l1{ - color: white; - font-size: small; - position: absolute; - top:-9px; - font-weight: bolder; - - left: 4.2%; - - +.l1 { + color: white; + font-size: small; + position: absolute; + top: -9px; + font-weight: bolder; + left: 4.2%; } -.topheader{ - width: 100%; - display: flex; - +.topheader { + width: 100%; + display: flex; } -.l2{ - color:white; - position: absolute; - top: 6px; - left: 4.2%; - - font-size: 10px; +.l2 { + color: white; + position: absolute; + top: 6px; + left: 4.2%; + font-size: 10px; } diff --git a/src/components/dropdown.js b/src/components/dropdown.js index 42c3c0f..b305068 100644 --- a/src/components/dropdown.js +++ b/src/components/dropdown.js @@ -1,7 +1,11 @@ -import React from 'react'; -import styles from './dropdown.module.css' -import { useState } from 'react' -import { UserOutlined, DownOutlined, ArrowRightOutlined } from '@ant-design/icons'; +import React from "react"; +import styles from "./dropdown.module.css"; +import { useState } from "react"; +import { + UserOutlined, + DownOutlined, + ArrowRightOutlined, +} from "@ant-design/icons"; function NavItem(props) { const [open, setOpen] = useState(false); @@ -10,21 +14,23 @@ function NavItem(props) { ); } function DropdownMenu() { - const [activeMenu, setActiveMenu] = useState('main'); + const [activeMenu, setActiveMenu] = useState("main"); function DropdownItem(props) { return ( - props.goToMenu && setActiveMenu(props.goToMenu)}> - + props.goToMenu && setActiveMenu(props.goToMenu)} + > {props.children} - ); } @@ -37,15 +43,13 @@ function DropdownMenu() { Bar Bar
- ) + ); } function Drop() { return ( - - - + - ) + ); } -export default Drop; \ No newline at end of file +export default Drop; diff --git a/src/components/dropdown.module.css b/src/components/dropdown.module.css index cfaf7ab..b711362 100644 --- a/src/components/dropdown.module.css +++ b/src/components/dropdown.module.css @@ -1,80 +1,77 @@ :root { - --bg: #242526; - --bg-accent: #484a4d; - --text-color: #dadce1; - --nav-size: 60px; - --border: 1px solid #474a4d; - --border-radius: 8px; - --speed: 500ms; - } - - .navitem { - - display: flex; - align-items: center; - justify-content: center; - } - - /* Icon Button */ - .iconbutton { - - } - - .iconbutton:hover { - filter: brightness(1.2); - } - - .iconbutton svg { - fill: var(--text-color); - width: 20px; - height: 20px; - } + --bg: #242526; + --bg-accent: #484a4d; + --text-color: #dadce1; + --nav-size: 60px; + --border: 1px solid #474a4d; + --border-radius: 8px; + --speed: 500ms; +} + +.navitem { + display: flex; + align-items: center; + justify-content: center; +} + +/* Icon Button */ +.iconbutton { +} + +.iconbutton:hover { + filter: brightness(1.2); +} + +.iconbutton svg { + fill: var(--text-color); + width: 20px; + height: 20px; +} .dropdown { - position: absolute; - top: 50px; - width: 200px; - transform: translateX(-5%); - background-color: var(--bg); - border: var(--border); - border-radius: var(--border-radius); - padding: 0.5rem; - overflow: hidden; - transition: height var(--speed) ease; - } - - .menu { - width: 100%; - } - - .menuitem { - height: 35px; - font-size: small; - display: flex; - align-items: center; - border-radius: var(--border-radius); - transition: background var(--speed); - padding: 0.5rem; - color: white; - } - - .menuitem .iconbutton { - margin-right: 0.5rem; - } - - - .menuitem .iconbutton:hover { - filter: none; - } - - .menuitem:hover { - color: white; - background-color: #CA0C2A; - } - - .iconright { - margin-left: auto; - } - .title{ -color: white; -padding: 0px; - } \ No newline at end of file + position: absolute; + top: 50px; + width: 200px; + transform: translateX(-5%); + background-color: var(--bg); + border: var(--border); + border-radius: var(--border-radius); + padding: 0.5rem; + overflow: hidden; + transition: height var(--speed) ease; +} + +.menu { + width: 100%; +} + +.menuitem { + height: 35px; + font-size: small; + display: flex; + align-items: center; + border-radius: var(--border-radius); + transition: background var(--speed); + padding: 0.5rem; + color: white; +} + +.menuitem .iconbutton { + margin-right: 0.5rem; +} + +.menuitem .iconbutton:hover { + filter: none; +} + +.menuitem:hover { + color: white; + background-color: #ca0c2a; +} + +.iconright { + margin-left: auto; +} +.title { + color: white; + padding: 0px; +} diff --git a/src/components/footer.js b/src/components/footer.js index 6263821..75acf57 100644 --- a/src/components/footer.js +++ b/src/components/footer.js @@ -1,59 +1,71 @@ -import React, { Component } from 'react'; -import styles from './footer.module.css' +import React, { Component } from "react"; +import styles from "./footer.module.css"; class CFooter extends Component { - render() { - return ( -
-
-

YOU ARE YOU

-

Are you who are ? Come join us at Gamersback.Click here to check career points

-
- -
-
- f g t y -
-
-
NEWSLETTER
-
-
-
-
+ render() { + return ( +
+
+

YOU ARE YOU

+

+ Are you who are ? Come join us at Gamersback.Click here to check + career points +

+
+ +
+
f g t y
+
+
NEWSLETTER
+
+ + +
+
+
+
+ ); + } } -export default CFooter; \ No newline at end of file +export default CFooter; diff --git a/src/components/footer.module.css b/src/components/footer.module.css index 1760e47..bef29d8 100644 --- a/src/components/footer.module.css +++ b/src/components/footer.module.css @@ -1,144 +1,140 @@ -.main{ -width: 100%;display: flex; -flex-direction: column; -background-color: black; -text-align: center; -justify-content: center; -align-items: center; -padding: 5%; -flex-direction: column; - +.main { + width: 100%; + display: flex; + flex-direction: column; + background-color: black; + text-align: center; + justify-content: center; + align-items: center; + padding: 5%; + flex-direction: column; } -.taglineholder{ -display: flex; -flex-direction: column; -width: 1000%; - -justify-content: center; -align-items: center; -padding-bottom: 5%; -border-top-width: 0px; -border-bottom-width:1px; -border-style: solid; -border-color: white; -margin-top: 5%; -} -h1{ - - font-family: mont; -} -.tagline1{ - color: rgb(211, 25, 25); - font-weight: bolder; - font-size: xx-large; -} -.tagline2{ - color: white; - font-weight: bolder; -} -.linksholder{ - width: 100%; - - display: flex; - justify-content: center; - align-items: center; - flex-direction: row; - margin-bottom: 20px; -} -.socialmediandnle{ - height: 200px; - display: flex; - flex-direction: row; - width: 100%; - margin-top: 5%; +.taglineholder { + display: flex; + flex-direction: column; + width: 1000%; -}.newsletter{ -text-align: left; -display: flex; -justify-content:left; -align-items:left; - margin-left: 15%; - flex-direction: column; - + justify-content: center; + align-items: center; + padding-bottom: 5%; + border-top-width: 0px; + border-bottom-width: 1px; + border-style: solid; + border-color: white; + margin-top: 5%; } -.socaillinks{ -display: flex; -width: 50%; -border-bottom: 1px; -border-color: grey; - +h1 { + font-family: mont; +} +.tagline1 { + color: rgb(211, 25, 25); + font-weight: bolder; + font-size: xx-large; +} +.tagline2 { + color: white; + font-weight: bolder; +} +.linksholder { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: row; + margin-bottom: 20px; } -.nbutton{ - border-width:0px; - background-color: #24262B; - color: white; - -width: 40%; - height: 51px; - border-top-right-radius: 5px; - border-bottom-right-radius:5px; +.socialmediandnle { + height: 200px; + display: flex; + flex-direction: row; + width: 100%; + margin-top: 5%; } -.nbutton:hover{ - background-color:#111111; +.newsletter { + text-align: left; + display: flex; + justify-content: left; + align-items: left; + margin-left: 15%; + flex-direction: column; } +.socaillinks { + display: flex; + width: 50%; + border-bottom: 1px; + border-color: grey; +} +.nbutton { + border-width: 0px; + background-color: #24262b; + color: white; -.ninput{ - text-align: center; - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; - height:51px ; - width: 80%; - -padding: 11px 15px 12px; -border-color: grey; -border-width: 0.7px; -} -.section{ - display: flex; - flex-direction: column; - margin: 5%; - text-align: left; + width: 40%; + height: 51px; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; } +.nbutton:hover { + background-color: #111111; +} + +.ninput { + text-align: center; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + height: 51px; + width: 80%; -.item11{ - font-family: mont; - font-size: 21.6px; - margin: 0px 0px 24px; - color: white; + padding: 11px 15px 12px; + border-color: grey; + border-width: 0.7px; +} +.section { + display: flex; + flex-direction: column; + margin: 5%; + text-align: left; +} + +.item11 { + font-family: mont; + font-size: 21.6px; + margin: 0px 0px 24px; + color: white; } @font-face { - font-family: mont; - src: url('./fonts/Montserrat-Regular.ttf'); - } -a{ - font-size: 16px; - font-family: mont; - color:white; - padding: 10px; -} -.inputbuttonholders{ - display: flex; -width: 150%; -justify-content:left; + font-family: mont; + src: url("./fonts/Montserrat-Regular.ttf"); +} +a { + font-size: 16px; + font-family: mont; + color: white; + padding: 10px; +} +.inputbuttonholders { + display: flex; + width: 150%; + justify-content: left; - flex-direction: row; + flex-direction: row; } @media screen and (max-width: 800px) { - .main{ - width: 100%; - } - .taglineholder{ - width: 100%; - padding-left: 5%; - border-color: black; - } - .linksholder{ - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; - } - .newsletter{ - display: none; - } -} \ No newline at end of file + .main { + width: 100%; + } + .taglineholder { + width: 100%; + padding-left: 5%; + border-color: black; + } + .linksholder { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + } + .newsletter { + display: none; + } +} diff --git a/src/index.css b/src/index.css index ab21105..d0847fa 100644 --- a/src/index.css +++ b/src/index.css @@ -1,102 +1,112 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } -select:active, select:hover { - outline: none +select:active, +select:hover { + outline: none; } -.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector { +.ant-select-single.ant-select-lg:not(.ant-select-customize-input) + .ant-select-selector { padding: 0 11px; border-radius: 2px; background-color: #121212; } -.ant-select-arrow{ +.ant-select-arrow { color: white; } @font-face { font-family: mont; - src: url('./components/fonts/Montserrat-Regular.ttf'); + src: url("./components/fonts/Montserrat-Regular.ttf"); } -label{ +label { font-family: mont; } body::-webkit-scrollbar { width: 0.8em; - background-color: #282828; + background-color: #282828; } - ul{ +ul { padding-inline-start: 0px !important; - } -a{ - padding: 0px; +} +a { + padding: 0px; } body::-webkit-scrollbar-thumb { - background-color: #CA0C2A; + background-color: #ca0c2a; border-radius: 10px; } -.ant-picker:hover, .ant-picker-focused { - /* border-color: #40a9ff; */ - border-right-width: 1px !important; -} -@media screen and (max-width: 800px){ -.ant-layout-sider-children,.ant-layout-sider ,.ant-layout-sider-dark,.ant-layout-sider-collapsed{ - display: none !important; -}.ant-select,.ant-select-lg,.ant-select-single,.ant-select-show-arrow{ -width: 40vh !important; -} -.ant-btn ,.ant-btn-primary,.ant-btn-dangerous{ -margin: 0em !important; -border-color: #CA0C2A; -width: 100% !important; -height: 5vh !important; -} -.navitem{ - width: 100% !important; - -} -.dropdown_title__EZMhT,.Home_whatholder__3QrKV{ - width: 100% !important; - font-size: x-small !important; -} -.ant-picker-input{ - font-size: x-small !important; +.ant-picker:hover, +.ant-picker-focused { + /* border-color: #40a9ff; */ + border-right-width: 1px !important; +} +@media screen and (max-width: 800px) { + .ant-layout-sider-children, + .ant-layout-sider, + .ant-layout-sider-dark, + .ant-layout-sider-collapsed { + display: none !important; + } + .ant-select, + .ant-select-lg, + .ant-select-single, + .ant-select-show-arrow { + width: 40vh !important; + } + .ant-btn, + .ant-btn-primary, + .ant-btn-dangerous { + margin: 0em !important; + border-color: #ca0c2a; + width: 100% !important; + height: 5vh !important; + } + .navitem { + width: 100% !important; + } + .dropdown_title__EZMhT, + .Home_whatholder__3QrKV { + width: 100% !important; + font-size: x-small !important; + } + .ant-picker-input { + font-size: x-small !important; + } + .ant-picker { + border-width: 0px !important; + background-color: #121212 !important; + color: black; + padding-right: 0em !important; + padding-left: 0em !important; + } } -.ant-picker{ +.ant-picker { border-width: 0px !important; background-color: #121212 !important; color: black; - padding-right: 0em !important; - padding-left: 0em !important; - -} -} -.ant-picker{ - border-width: 0px !important; - background-color: #121212 !important; - color: black; } -.ant-tabs-nav-list{ +.ant-tabs-nav-list { border-width: 0px !important; } -.ant-tabs-tab-active{ - color: #CA0C2A !important; +.ant-tabs-tab-active { + color: #ca0c2a !important; } .ant-tabs-tab { color: white !important; border-width: 0px !important; } -.ant-picker-input -{ +.ant-picker-input { background-color: #111111 !important; } .ant-carousel .slick-list { @@ -106,4 +116,4 @@ height: 5vh !important; padding: 0; overflow: hidden; width: 110% !important; -} \ No newline at end of file +} diff --git a/src/index.js b/src/index.js index 5eb8c32..4a340b2 100644 --- a/src/index.js +++ b/src/index.js @@ -1,35 +1,31 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import CreateEvent from './screens/CreateEvent' -import { BrowserRouter as Router, Route } from 'react-router-dom' -import * as serviceWorker from './serviceWorker'; -import 'antd/dist/antd.css' -import Landing from './screens/Landing' -import AppLayout from './Layout' -import AllEventsP from './screens/AllEventsP' -import PaymentP from './screens/PaymentPageHF' +import React from "react"; +import ReactDOM from "react-dom"; +import "./index.css"; +import App from "./App"; +import CreateEvent from "./screens/CreateEvent"; +import { BrowserRouter as Router, Route } from "react-router-dom"; +import * as serviceWorker from "./serviceWorker"; +import "antd/dist/antd.css"; +import Landing from "./screens/Landing"; +import AppLayout from "./Layout"; +import AllEventsP from "./screens/AllEventsP"; +import PaymentP from "./screens/PaymentPageHF"; -import AboutEventP from './screens/AboutEventP' +import AboutEventP from "./screens/AboutEventP"; const routing = (
- + - - + +
-) - -ReactDOM.render( -routing -, - document.getElementById('root') ); +ReactDOM.render(routing, document.getElementById("root")); + // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA diff --git a/src/screens/AboutEvent.js b/src/screens/AboutEvent.js index 2e4b90b..c14c0de 100644 --- a/src/screens/AboutEvent.js +++ b/src/screens/AboutEvent.js @@ -82,8 +82,7 @@ class AboutEvent extends Component {
-

Browse categorys -

+

Browse categorys

{/*
*/} @@ -122,11 +121,8 @@ class AboutEvent extends Component {
- -
-

VIBRA MAHOU FEST

@@ -143,72 +139,111 @@ class AboutEvent extends Component {

-
{/*
*/} - +
-
+

Image Gallery

Events Images

-
-
-
+
+
+
+
-
+
-
- -
-
-
-
+
+
+
+
+
-
+
-
- -
-
-
-
+
+
- -
+
+
+
+
-
- -
-
-
-
+
+
+
+
+
-
+
- -
); diff --git a/src/screens/AboutEvent.module.css b/src/screens/AboutEvent.module.css index 4af7f95..b0cc6e1 100644 --- a/src/screens/AboutEvent.module.css +++ b/src/screens/AboutEvent.module.css @@ -1,376 +1,358 @@ -.main{ - - width: 100%; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - padding: 10%; - background: url('./assets/r6.jpg'); - background-repeat: no-repeat; - background-size: contain; - background-color: black; -} -.rowofc{ - display: flex; - flex-wrap: wrap; - width: 120%; -} -.titleofc{ - color:white; - font-size: 25px; -} -.dcardsg{ - background-color: #CA0C2A; - height: 28vh; - width: 18.5%; - margin-left: 2vh; - margin-top: 2.5vh; - text-align: center; - justify-content: center; - display: flex; - flex-direction: column; - align-items: center; - - -} -.dcards{ -background-color: #CA0C2A; -height: 25vh; -width: 15%; -border-radius: 10px; -display: flex; -margin-left: 1%; -margin-right: 1%; +.main { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 10%; + background: url("./assets/r6.jpg"); + background-repeat: no-repeat; + background-size: contain; + background-color: black; +} +.rowofc { + display: flex; + flex-wrap: wrap; + width: 120%; +} +.titleofc { + color: white; + font-size: 25px; +} +.dcardsg { + background-color: #ca0c2a; + height: 28vh; + width: 18.5%; + margin-left: 2vh; + margin-top: 2.5vh; + text-align: center; + justify-content: center; + display: flex; + flex-direction: column; + align-items: center; +} +.dcards { + background-color: #ca0c2a; + height: 25vh; + width: 15%; + border-radius: 10px; + display: flex; + margin-left: 1%; + margin-right: 1%; } /* Rahuls dummy CSS starts here */ -.imggalleryh1{ +.imggalleryh1 { width: 130%; margin-left: 1%; -background-color: #121212; + background-color: #121212; height: 65vh; } -.imggalleryh1_{ - width: 100%; - margin-left: 5%; +.imggalleryh1_ { + width: 100%; + margin-left: 5%; /*background-color: #121212;*/ - height: 40vh; - } -.parentDiv{ - width: 100%; - margin-top: 5%; - justify-content: space-around; - display: flex; - -} -.parentDiv_{ - width: 100%; - margin-top: 5%; - margin-left: 15%; - justify-content: space-around; - display: flex; - -} -.test{ - color: white; - width:20%; - justify-content: center; - text-align: center - -} -.leftBox{ - width: 30%; - display: block; - border: 1px solid white; - height: 100%; - + height: 40vh; +} +.parentDiv { + width: 100%; + margin-top: 5%; + justify-content: space-around; + display: flex; +} +.parentDiv_ { + width: 100%; + margin-top: 5%; + margin-left: 15%; + justify-content: space-around; + display: flex; +} +.test { + color: white; + width: 20%; + justify-content: center; + text-align: center; +} +.leftBox { + width: 30%; + display: block; + border: 1px solid white; + height: 100%; } /* ends here */ - -.booknowf{ - position: fixed; - bottom: 20px; - right: 20px; - color: white; - width: 10rem; - height: 4rem; - z-index: 100; - font-size: large; - border-width: 0px; - border-radius: 5px; - background-color: #CA0C2A; - -} -.textonc{ - color: white; -} -.side_{ - font-size: 28px; - color: white; -} -.title{ - width: 2rem; - height: 30vh; - justify-content: center; - align-items: center; - margin-top: 1%; - justify-content: center; - align-items: center; - - display: flex; - flex-direction: column; -} -.imggalleryh{ - width: 100%; - - margin-left: 5%; - - border-radius: 5px; -} -.gimg{ - background: url('https://source.unsplash.com/daily'); - height: 15rem; - width: 15rem; - background-size: cover; border-radius: 5px; - -} -.icons{ - color: white; - -} -.imrow1{ - display: flex; - - background-color: #121212; - - padding: 2%; border-radius: 5px; - width: 100%; -} - -.date{ - color: white; - font-size: 28px; - margin: 0px; -} -.button{ - color: #CA0C2A; -} -.time{ - color: white; - font-size: 20px -} -.eventname{ - color: white; - font-size: 48px; - font-weight: bolder; - width: 60%; - margin-bottom: 15%; - margin-top: 15%; - text-align: center; -} -.eventnametop,.eventnametop_{ - color: white; - font-size: 28px; - position: absolute; - left: 125px; -top: 10px; -} -.eventnametop_{ - top:50px; - font-size: 22px; -} -.logoc{ - padding:1%; - display: flex; - border-color: grey; - border-width: 1px; - border-style: solid; - border-radius: 5px; -} -.elogo{ - background-image: url('../components/new.png'); - width: 80px; - height: 80px; - - background-size: contain; -} -.omodal{ - background-color: #CA0C2A; - border-width: 0px; - color: white; - border-radius: 5px; - font-size: small; - padding: 1%; - width: 10rem; - height: 4rem; - font-family: mont; - -} -.contact{ - background-color: white; - width: 10rem; - height: 4rem; - border-radius: 10px; - justify-content: center; - align-items: center; - display: flex; - padding: 5%; -} -.rowp1{ - flex-direction: row; - display: flex; - width: 100%; -position: relative; - - margin-bottom: 2%; - justify-content: space-between; -} -.rowp2{ - padding-left: 1%; - padding-right: 1%; - display: flex; - flex-direction: row; - justify-content: space-between; -} -.titleofcard{ - width: 25%; - margin-right: 2%; - height: 6rem; - margin-top: 1%; - margin-bottom: 1%; - border-radius: 5px; - justify-content: center; - color: white; - font-size:large; - align-items: center; - display: flex; - - background-color: #CA0C2A; -} -.detailbox{ -border-radius: 5px; -display: flex; -width: 100%; -padding-top: 3%; -padding-left: 3%; -padding-right: 3%; -padding-bottom: 3%; -margin-left: 5%; -flex-direction: column; -background-color: #121212; -} -.row1,.row2,.row3{ - padding: 5%; - display: flex; - - flex-direction: column; - -} -.row1{ -display: flex; -flex-direction: column; -justify-content: space-between; -} -.row2{ - -} -.book{ -background-color: #CA0C2A; -color: white; -border-radius: 5px; -width: 10rem; -font-size: large; -margin-top: 10px; -height: 4rem; -border-width: 0px; -} - -.content{ - margin-top: 5%; - display: flex; - width: 100%; - padding: 1%; - margin-left: 5%; - flex-direction: column; -} -.sep{ - width: 4px; -} -.desc{ - color: white; - text-align: left; -} -.date{ - background-color: #121212 !important; - border-width: 0px !important; - color: white !important; -} - - - -.corholder{ - - width: 120%; - justify-content: center; - -margin-left: -10%; - -} -.corsel{ - width: 100%; - margin-left: 5%; - flex-direction: row; - - - -flex-wrap: wrap;} -.eventname_{ - color: #CA0C2A; - font-weight: bolder; - font-size: x-large; -} -.cardin{ - font-size: x-large; - color: white; -} -.cardsholder{ - display: flex; - flex-direction: row; - width: 90%; - margin-bottom: 5%; -margin-left: 7%; - -} -.crow1{ - - display: flex; - flex-direction: row; - width: 100%; -justify-content: space-between; -display: flex; - -} -.card{ - width: 20%; +.booknowf { + position: fixed; + bottom: 20px; + right: 20px; + color: white; + width: 10rem; + height: 4rem; + z-index: 100; + font-size: large; + border-width: 0px; + border-radius: 5px; + background-color: #ca0c2a; +} +.textonc { + color: white; +} +.side_ { + font-size: 28px; + color: white; +} +.title { + width: 2rem; + height: 30vh; + justify-content: center; + align-items: center; + margin-top: 1%; + justify-content: center; + align-items: center; + + display: flex; + flex-direction: column; +} +.imggalleryh { + width: 100%; + + margin-left: 5%; + + border-radius: 5px; +} +.gimg { + background: url("https://source.unsplash.com/daily"); + height: 15rem; + width: 15rem; + background-size: cover; + border-radius: 5px; +} +.icons { + color: white; +} +.imrow1 { + display: flex; + + background-color: #121212; + + padding: 2%; + border-radius: 5px; + width: 100%; +} + +.date { + color: white; + font-size: 28px; + margin: 0px; +} +.button { + color: #ca0c2a; +} +.time { + color: white; + font-size: 20px; +} +.eventname { + color: white; + font-size: 48px; + font-weight: bolder; + width: 60%; + margin-bottom: 15%; + margin-top: 15%; + text-align: center; +} +.eventnametop, +.eventnametop_ { + color: white; + font-size: 28px; + position: absolute; + left: 125px; + top: 10px; +} +.eventnametop_ { + top: 50px; + font-size: 22px; +} +.logoc { + padding: 1%; + display: flex; + border-color: grey; + border-width: 1px; + border-style: solid; + border-radius: 5px; +} +.elogo { + background-image: url("../components/new.png"); + width: 80px; + height: 80px; + + background-size: contain; +} +.omodal { + background-color: #ca0c2a; + border-width: 0px; + color: white; + border-radius: 5px; + font-size: small; + padding: 1%; + width: 10rem; + height: 4rem; + font-family: mont; +} +.contact { + background-color: white; + width: 10rem; + height: 4rem; border-radius: 10px; - height: 10em; - color: white; - justify-content: center; -display: flex; -align-items: center; - background-color: #CA0C2A; -} -.titleofg{ - color: white; - font-size: x-large; - + justify-content: center; + align-items: center; + display: flex; + padding: 5%; +} +.rowp1 { + flex-direction: row; + display: flex; + width: 100%; + position: relative; + + margin-bottom: 2%; + justify-content: space-between; +} +.rowp2 { + padding-left: 1%; + padding-right: 1%; + display: flex; + flex-direction: row; + justify-content: space-between; +} +.titleofcard { + width: 25%; + margin-right: 2%; + height: 6rem; + margin-top: 1%; + margin-bottom: 1%; + border-radius: 5px; + justify-content: center; + color: white; + font-size: large; + align-items: center; + display: flex; + + background-color: #ca0c2a; +} +.detailbox { + border-radius: 5px; + display: flex; + width: 100%; + padding-top: 3%; + padding-left: 3%; + padding-right: 3%; + padding-bottom: 3%; + margin-left: 5%; + flex-direction: column; + background-color: #121212; +} +.row1, +.row2, +.row3 { + padding: 5%; + display: flex; + + flex-direction: column; +} +.row1 { + display: flex; + flex-direction: column; + justify-content: space-between; +} +.row2 { +} +.book { + background-color: #ca0c2a; + color: white; + border-radius: 5px; + width: 10rem; + font-size: large; + margin-top: 10px; + height: 4rem; + border-width: 0px; +} + +.content { + margin-top: 5%; + display: flex; + width: 100%; + padding: 1%; + margin-left: 5%; + flex-direction: column; +} +.sep { + width: 4px; +} +.desc { + color: white; + text-align: left; +} +.date { + background-color: #121212 !important; + border-width: 0px !important; + color: white !important; +} + +.corholder { + width: 120%; + justify-content: center; + + margin-left: -10%; +} +.corsel { + width: 100%; + margin-left: 5%; + flex-direction: row; + + flex-wrap: wrap; +} +.eventname_ { + color: #ca0c2a; + font-weight: bolder; + font-size: x-large; +} +.cardin { + font-size: x-large; + color: white; +} +.cardsholder { + display: flex; + flex-direction: row; + width: 90%; + margin-bottom: 5%; + margin-left: 7%; +} +.crow1 { + display: flex; + flex-direction: row; + width: 100%; + justify-content: space-between; + display: flex; +} +.card { + width: 20%; + border-radius: 10px; + height: 10em; + color: white; + justify-content: center; + display: flex; + align-items: center; + background-color: #ca0c2a; +} +.titleofg { + color: white; + font-size: x-large; +} +.rowofg { + display: flex; + flex-wrap: wrap; + overflow-x: hidden; + width: 100%; + padding-left: 5%; + padding-right: 10%; } -.rowofg{ -display: flex; -flex-wrap: wrap; -overflow-x: hidden; -width: 100%; -padding-left: 5%; -padding-right: 10%; -} \ No newline at end of file diff --git a/src/screens/AboutEventP.js b/src/screens/AboutEventP.js index c8cee1d..7b83f1e 100644 --- a/src/screens/AboutEventP.js +++ b/src/screens/AboutEventP.js @@ -1,138 +1,180 @@ -import React, { Component } from 'react'; -import SideHeader from '../components/SideHeader' -import AboutEvent from './AboutEvent' -import { Layout,Menu,Modal } from 'antd'; -import styles from './Layout.module.css' -import {Link} from 'react-router-dom' -import TopHeader from '../components/TopHeader'; -import { Form, Input, Button, Checkbox } from 'antd'; -import { UserOutlined, LockOutlined } from '@ant-design/icons'; -import CFooter from '../components/footer' +import React, { Component } from "react"; +import SideHeader from "../components/SideHeader"; +import AboutEvent from "./AboutEvent"; +import { Layout, Menu, Modal } from "antd"; +import styles from "./Layout.module.css"; +import { Link } from "react-router-dom"; +import TopHeader from "../components/TopHeader"; +import { Form, Input, Button, Checkbox } from "antd"; +import { UserOutlined, LockOutlined } from "@ant-design/icons"; +import CFooter from "../components/footer"; const { Header, Footer, Sider, Content } = Layout; export default class PaymentP extends Component { - constructor(props){ - super(props) - this.state={login:false,collapsed:true} + constructor(props) { + super(props); + this.state = { login: false, collapsed: true }; + } + login = () => { + if (this.state.login) { + this.setState({ login: false }); + } else { + this.setState({ login: true }); } - login=()=>{ - if(this.state.login){ - this.setState({login:false}) - }else{ - this.setState({login:true}) - }} - toggle = () => { - this.setState({ - collapsed: !this.state.collapsed, - }); - }; + }; + toggle = () => { + this.setState({ + collapsed: !this.state.collapsed, + }); + }; render() { return ( - -
-
- - - - - - + +
+
+ + + {" "} + + +
- - - } onClick={this.toggle} style={{backgroundColor:'#121212'}} > - nav 1 - - -
- - - -
-
-
-

Sep 26

-

Sesame Street Live! MAke Your Magic

-

Grand Chapiteau

-
$45
-
-
-
-

Sign In

-
- - } placeholder="Username" /> - - - } - type="password" - placeholder="Password" - /> - - - - REMEMBER ME - + + + } + onClick={this.toggle} + style={{ backgroundColor: "#121212" }} + > + nav 1 + + + + +
+ + + +
+
+
+

Sep 26

+

+ Sesame Street Live! MAke Your Magic +

+

Grand Chapiteau

+
$45
+
+
+
+

Sign In

+ + + + } + placeholder="Username" + /> + + + + } + type="password" + placeholder="Password" + /> + + + + + REMEMBER ME + + - - Forgot password - - + + Forgot password + + - - - Or Register now - - -
-
- - - - + + + Or Register now + + +
+ + + + - ); } diff --git a/src/screens/AllEvents.js b/src/screens/AllEvents.js index 8cadd22..4650fac 100644 --- a/src/screens/AllEvents.js +++ b/src/screens/AllEvents.js @@ -1,92 +1,94 @@ -import React, { Component } from 'react'; -import Card from '../components/Card' -import styles from './AllEvents.module.css' -import { Carousel } from 'antd'; -import Drop from '../components/dropdown' -import {FilterOutlined } from '@ant-design/icons' -import {Button,Dropdown,Menu} from 'antd' +import React, { Component } from "react"; +import Card from "../components/Card"; +import styles from "./AllEvents.module.css"; +import { Carousel } from "antd"; +import Drop from "../components/dropdown"; +import { FilterOutlined } from "@ant-design/icons"; +import { Button, Dropdown, Menu } from "antd"; class AllEvents extends Component { - - render() { - return ( -
-
- -
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-

WHAT

- -
-
-

WHEN

- + render() { + return ( +
+
+ +
+
-
-

WHERE

- +
+
-
-

KEYWORD

- - - +
+
- +
+ +
+
+
+

WHAT

+ +
+
+

WHEN

+ +
+
+

WHERE

+ +
+
+

KEYWORD

+ +
+
+ +
-
-

Simple Layout

-
- - - -
-
- -
-
- - - +
+

Simple Layout

+
+ + + +
+
+
+
+ - -
-
- + - + +
+
+ + - -
-
- - - - -
+ +
+
+ + + + +
+
- -
- ); - } + ); + } } export default AllEvents; diff --git a/src/screens/AllEvents.module.css b/src/screens/AllEvents.module.css index 636d677..5d5da64 100644 --- a/src/screens/AllEvents.module.css +++ b/src/screens/AllEvents.module.css @@ -1,167 +1,160 @@ -.main{ - display: flex; - width: 100%; - padding-top: 10%; - padding-left: 7%; - flex-direction: column; - padding-right: 5%; - background-color: black; -} -.pagenav{ - background-color: #282828; - padding: 1.4%; - border-radius: 5px; - margin-left: 1%; - align-self: start; - margin-top: 5%; - display: flex; - flex-direction: row; -} -.bnav{ - color: white; - border-radius: 5px; - border-width: 0px; - font-size: large; - width: 3rem; - margin-right: 2%; - height: 3rem; - background-color: #111111; -} -.inputk{ - background-color: #121212; - border-width: 0px; - border-radius: 5px; -} -.whatholder_{ - color: white; - position: relative; - width: 20%; - justify-content: center; - align-items: left; - - font-size: smaller; - text-align: left; +.main { + display: flex; + width: 100%; + padding-top: 10%; + padding-left: 7%; + flex-direction: column; + padding-right: 5%; + background-color: black; } -.caurosel{ -padding: 2%; - -margin-top: -5%; - border-radius: 10px; - width: 104%; -} -.titlenfilter{ - display: flex; - width: 100%; - flex-direction: row; - align-items: center; - justify-content: space-between; -} -.cimg{ - height:18em; - width: 100%; - border-radius: 10px; - background: url('./assets/cypher.png'); - background-size: cover; - background-repeat: no-repeat; -} -.dropdown{ - background-color: #121212; - color: white; - border-width: 0px; - +.pagenav { + background-color: #282828; + padding: 1.4%; + border-radius: 5px; + margin-left: 1%; + align-self: start; + margin-top: 5%; + display: flex; + flex-direction: row; } -.dropbtn{ - text-align: left; - padding: 0px; - background-color:#121212; - color:white; - border-width:0px; - - } -.whatholder{ - color: white; - position: relative; - width: 20%; - justify-content: center; - align-items: left; +.bnav { + color: white; + border-radius: 5px; + border-width: 0px; + font-size: large; + width: 3rem; + margin-right: 2%; + height: 3rem; + background-color: #111111; +} +.inputk { + background-color: #121212; + border-width: 0px; + border-radius: 5px; +} +.whatholder_ { + color: white; + position: relative; + width: 20%; + justify-content: center; + align-items: left; - font-size: smaller; - text-align: left; - } -.searchind{ - width: auto; - margin:0px; - padding:0px; - margin-left: 0px; - color: white; -} -.searchbox{ - margin-bottom: 5%; - background-color: #121212; - width: 100%; - height: 130px; - border-width: 0.5px; -border-style: solid; - border-color: #4b4a4a; - flex-direction: row; - border-radius: 10px; - align-self: start; - margin-left: 2%; - display: flex; - position: relative; - align-items: center; - justify-content: center; - } - .fbuttons{ - flex-direction: row; - display: flex; - height: 100%; -margin-bottom: 1% + font-size: smaller; + text-align: left; +} +.caurosel { + padding: 2%; + margin-top: -5%; + border-radius: 10px; + width: 104%; +} +.titlenfilter { + display: flex; + width: 100%; + flex-direction: row; + align-items: center; + justify-content: space-between; +} +.cimg { + height: 18em; + width: 100%; + border-radius: 10px; + background: url("./assets/cypher.png"); + background-size: cover; + background-repeat: no-repeat; +} +.dropdown { + background-color: #121212; + color: white; + border-width: 0px; +} +.dropbtn { + text-align: left; + padding: 0px; + background-color: #121212; + color: white; + border-width: 0px; +} +.whatholder { + color: white; + position: relative; + width: 20%; + justify-content: center; + align-items: left; - } - .fbutton_{ - background-color: #0000; - border-width: 0px; - color: white; + font-size: smaller; + text-align: left; +} +.searchind { + width: auto; + margin: 0px; + padding: 0px; + margin-left: 0px; + color: white; +} +.searchbox { + margin-bottom: 5%; + background-color: #121212; + width: 100%; + height: 130px; + border-width: 0.5px; + border-style: solid; + border-color: #4b4a4a; + flex-direction: row; + border-radius: 10px; + align-self: start; + margin-left: 2%; + display: flex; + position: relative; + align-items: center; + justify-content: center; +} +.fbuttons { + flex-direction: row; + display: flex; + height: 100%; + margin-bottom: 1%; +} +.fbutton_ { + background-color: #0000; + border-width: 0px; + color: white; font-family: mont; font-family: mont; font-size: small; - display: flex; - justify-content: center; - align-items: center; - - } - .fbutton{ - background-color: #0000; - border-width: 0px; - color: white; - font-family: mont; - font-size: small; - border-left-width: 1px; - border-left-color: white; - display: flex; - } -.title{ - - color: #ffffff; - font-size: 40px; - padding-left: 2%; + display: flex; + justify-content: center; + align-items: center; } -.entertainmentholder{ - -flex-direction: column; - display: flex; +.fbutton { + background-color: #0000; + border-width: 0px; + color: white; + font-family: mont; + font-size: small; + border-left-width: 1px; + border-left-color: white; + display: flex; +} +.title { + color: #ffffff; + font-size: 40px; + padding-left: 2%; +} +.entertainmentholder { + flex-direction: column; + display: flex; width: 100%; margin-top: 2%; - justify-content: center; - align-items: center; - text-align: center; - font-family: mont; -} -.row1{ - width: 100%; - margin-top: 1%; - display: flex; - flex-direction: row; - } + justify-content: center; + align-items: center; + text-align: center; + font-family: mont; +} +.row1 { + width: 100%; + margin-top: 1%; + display: flex; + flex-direction: row; +} diff --git a/src/screens/CreateEvent.js b/src/screens/CreateEvent.js index 712f46b..6a038d7 100644 --- a/src/screens/CreateEvent.js +++ b/src/screens/CreateEvent.js @@ -1,73 +1,72 @@ -import React, { Component } from 'react'; -import styles from './CreateEvent.module.css' +import React, { Component } from "react"; +import styles from "./CreateEvent.module.css"; -import { Tabs, Radio } from 'antd'; +import { Tabs, Radio } from "antd"; const { TabPane } = Tabs; class CreateEvent extends Component { - constructor(props) { - super(props); - this.state = { - mode: 'top', - }; - } - - handleModeChange = e => { - const mode = e.target.value; - this.setState({ mode }); - }; - render() - {const { mode } = this.state; - return ( -
-
- - - -
+ constructor(props) { + super(props); + this.state = { + mode: "top", + }; + } + + handleModeChange = e => { + const mode = e.target.value; + this.setState({ mode }); + }; + render() { + const { mode } = this.state; + return ( +
+
+ + +

General

-
- - -
-

About

-
- - -
-

Rules & Regulations

-
- - -
-

Player Mode

-
- - -
-

Entry Fee & Prize

-
- - -
-

Schedule / Structure

-
- - -
-

Additional Features

-
- - -
-

Select Menu

-
- - +
+ + +
+

About

+
+ + +
+

Rules & Regulations

+
+ + +
+

Player Mode

+
+ + +
+

Entry Fee & Prize

+
+ + +
+

Schedule / Structure

+
+ + +
+

Additional Features

+
+ + +
+

Select Menu

+
+ + +
-
- ); - } + ); + } } -export default CreateEvent; \ No newline at end of file +export default CreateEvent; diff --git a/src/screens/CreateEvent.module.css b/src/screens/CreateEvent.module.css index 64ea38a..7a00227 100644 --- a/src/screens/CreateEvent.module.css +++ b/src/screens/CreateEvent.module.css @@ -1,22 +1,22 @@ -.main{ - width: 100%; - height: 100vh; - background-color: black; - display: flex; - justify-content: center; - align-items: center; +.main { + width: 100%; + height: 100vh; + background-color: black; + display: flex; + justify-content: center; + align-items: center; } -.tabsc{ - width: 150vh; - height: 80vh; - background-color: #282828; - border-radius: 15px; - justify-content: center; - - display: flex; +.tabsc { + width: 150vh; + height: 80vh; + background-color: #282828; + border-radius: 15px; + justify-content: center; + + display: flex; +} +.title { + color: white; + position: relative; + top: 1%; } -.title{ - color: white; - position: relative; - top:1% -} \ No newline at end of file diff --git a/src/screens/Home.js b/src/screens/Home.js index 0326557..7e7b62d 100644 --- a/src/screens/Home.js +++ b/src/screens/Home.js @@ -1,83 +1,105 @@ -import React, { Component } from 'react'; -import styles from './Home.module.css' -import { Carousel } from 'antd'; -import { Menu, Button } from 'antd'; -import Drop from '../components/dropdown' -import { Col, Row } from 'antd'; -import { Avatar } from 'antd'; -import { Link } from 'react-router-dom' -import { UserOutlined, DownOutlined, ArrowRightOutlined } from '@ant-design/icons'; -import Card from '../components/Card' -import { Rate } from 'antd'; -import {DatePicker} from 'antd' -import Typewriter from 'typewriter-effect'; +import React, { Component } from "react"; +import styles from "./Home.module.css"; +import { Carousel } from "antd"; +import { Menu, Button } from "antd"; +import Drop from "../components/dropdown"; +import { Col, Row } from "antd"; +import { Avatar } from "antd"; +import { Link } from "react-router-dom"; +import { + UserOutlined, + DownOutlined, + ArrowRightOutlined, +} from "@ant-design/icons"; +import Card from "../components/Card"; +import { Rate } from "antd"; +import { DatePicker } from "antd"; +import Typewriter from "typewriter-effect"; export default class Home extends Component { - constructor(props) { - super(props) - this.state = { sellbutton: 0, selldata: 'After the event was created you can add tickets. An event can have multiple ticket types. You can add the amount of tickets available and the date your audience can start buying them and a date when the sale ends.' } - } - datac = (e) => { - if (e.target.value === '0') { this.setState({ selldata: 'rurwgbuewbgouqebgouqebgloqeboigbqigqwg igbqoewgubqwuobgoqeubgoquwbgouqwbgoqwubgoqwubgouwqboguqbwogubqw gwqghoqwughouqw gqwuog uohgqwuo gwuqg h qoghwuog hqwuog hwuogh wqough wuoghwo ughwuoghwoughuwghwoughwuoghwoghow' }) } - if (e.target.value === '1') { this.setState({ selldata: 'srhrsehwehwehwehwrahvravadhv aerhvarhvarhvarch adrcharscharhcaerch hrech ehr erherhehresrhv e ends.' }) } - if (e.target.value === '2') { this.setState({ selldata: 'After the event was created you can add tickets. An event can have multiple ticket types. You can add the amount of tickets available and the date your audience can start buying them and a date when the sale ends.' }) } - + super(props); + this.state = { + sellbutton: 0, + selldata: + "After the event was created you can add tickets. An event can have multiple ticket types. You can add the amount of tickets available and the date your audience can start buying them and a date when the sale ends.", + }; } + datac = e => { + if (e.target.value === "0") { + this.setState({ + selldata: + "rurwgbuewbgouqebgouqebgloqeboigbqigqwg igbqoewgubqwuobgoqeubgoquwbgouqwbgoqwubgoqwubgouwqboguqbwogubqw gwqghoqwughouqw gqwuog uohgqwuo gwuqg h qoghwuog hqwuog hwuogh wqough wuoghwo ughwuoghwoughuwghwoughwuoghwoghow", + }); + } + if (e.target.value === "1") { + this.setState({ + selldata: + "srhrsehwehwehwehwrahvravadhv aerhvarhvarhvarch adrcharscharhcaerch hrech ehr erherhehresrhv e ends.", + }); + } + if (e.target.value === "2") { + this.setState({ + selldata: + "After the event was created you can add tickets. An event can have multiple ticket types. You can add the amount of tickets available and the date your audience can start buying them and a date when the sale ends.", + }); + } + }; render() { return ( <> - - - -
-

ALL FUN START HERE

- -

Discover

+

Discover

+
+ +

around you.

-

WHAT

- - - +

WHAT

+

WHEN

- +

WHERE

- - - +
- -

DISCOVER THE FUN!

+

+ DISCOVER THE FUN! +

-

Upcoming Events

- +

+ Upcoming Events +

+ + {" "} + +
- + - +
@@ -86,26 +108,24 @@ export default class Home extends Component { - -
- +
-

ALL THE FUN STARTS HERE

-

Entertainment Guides

+

+ Entertainment Guides +

-
@@ -113,151 +133,219 @@ export default class Home extends Component { -
-
- - +
-
-

HOW TO

-

Sell Your Tickets

+

+ Sell Your Tickets +

-

{this.state.selldata}

+

+ {this.state.selldata} +

-
+
+
- - - - - + + +

LATEST NEWS

-

From the Blog

+

+ From the Blog +

-
-

The Greatest Super Bowl Games of All Time

-

Eam tum adesse, cum dolor omnis absit; Et quidem iure fortasse, sed tamen non gravissimum est testimonium multitudinis.

+

+ The Greatest Super Bowl Games of All Time +

+

+ Eam tum adesse, cum dolor omnis absit; Et quidem iure + fortasse, sed tamen non gravissimum est testimonium + multitudinis. +

-

TESTNOMIALS

-

Hear From Our Organizers

+

+ Hear From Our{" "} + Organizers +

-
+
-

Awesom dude

-

loremipsum oienfioenonewiognoeigwegewgewgewg ewg wegewg we

+

Awesom dude

+

+ loremipsum oienfioenonewiognoeigwegewgewgewg ewg wegewg + we +

- } style={{ marginTop: '6%' }} /> + } + style={{ marginTop: "6%" }} + />
-

Aryan Singh

-

26/04/2020

+

Aryan Singh

+

26/04/2020

-

Awesom dude

-

loremipsum oienfioenonewiognoeigwegewgewgewg ewg wegewg we

+

+ Awesom dude +

+

+ loremipsum oienfioenonewiognoeigwegewgewgewg ewg wegewg + we +

- } style={{ marginTop: '6%' }} /> + } + style={{ marginTop: "6%" }} + />
-

Aryan Singh

-

26/04/2020

+

Aryan Singh

+

26/04/2020

-

Awesom dude

-

loremipsum oienfioenonewiognoeigwegewgewgewg ewg wegewg we

+

Awesom dude

+

+ loremipsum oienfioenonewiognoeigwegewgewgewg ewg wegewg + we +

- } style={{ marginTop: '6%' }} /> + } + style={{ marginTop: "6%" }} + />
-

Aryan Singh

-

26/04/2020

+

Aryan Singh

+

26/04/2020

-
-
+
-

Awesom dude

-

loremipsum oienfioenonewiognoeigwegewgewgewg ewg wegewg we

+

Awesom dude

+

+ loremipsum oienfioenonewiognoeigwegewgewgewg ewg wegewg + we +

- } style={{ marginTop: '6%' }} /> + } + style={{ marginTop: "6%" }} + />
-

Aryan Singh

-

26/04/2020

+

Aryan Singh

+

26/04/2020

-

Awesom dude

-

loremipsum oienfioenonewiognoeigwegewgewgewg ewg wegewg we

+

Awesom dude

+

+ loremipsum oienfioenonewiognoeigwegewgewgewg ewg wegewg + we +

- } style={{ marginTop: '6%' }} /> + } + style={{ marginTop: "6%" }} + />
-

Aryan Singh

-

26/04/2020

+

Aryan Singh

+

26/04/2020

-

Awesom dude

-

loremipsum oienfioenonewiognoeigwegewgewgewg ewg wegewg we

+

Awesom dude

+

+ loremipsum oienfioenonewiognoeigwegewgewgewg ewg wegewg + we +

- } style={{ marginTop: '6%' }} /> + } + style={{ marginTop: "6%" }} + />
-

Aryan Singh

-

26/04/2020

+

Aryan Singh

+

26/04/2020

-
- ); } diff --git a/src/screens/Home.module.css b/src/screens/Home.module.css index afe30d4..da297a7 100644 --- a/src/screens/Home.module.css +++ b/src/screens/Home.module.css @@ -1,635 +1,600 @@ - -.main{ - padding-top:7%; +.main { + padding-top: 7%; padding-left: 8%; padding-right: 6%; -flex-direction: column; - display: flex; - background-color: black; -background-image: url('./assets/r6.jpg'); -background-size:contain; -background-repeat: no-repeat; - + flex-direction: column; + display: flex; + background-color: black; + background-image: url("./assets/r6.jpg"); + background-size: contain; + background-repeat: no-repeat; width: 100%; - justify-content: center; - align-items: center; -} -.dropbtn{ -text-align: left; -padding: 0px; - background-color:#121212; - color:white; - border-width:0px; - -} -.emptyspace{ - - height: 10%; -} -.btitleholder{ - display: flex; - flex-direction: row; - align-self: start; - margin-bottom: -5%; -} -.animationtext{ - color:#CA0C2A; - font-size: 57.5px; - font-weight: 700; - - - margin-left:10px; -} -.title{ - align-self: start; - - font-size: 15px; - font-weight: 600; - - color: white; -} -.btitle{ - align-self: start; - display: inline-flex; - font-size: 57.5px; - font-weight: 700; - - color: white; - -} -.searchbox{ - margin-bottom: 5em; - background-color: #121212; - width: 80%; - height: 130px; - flex-direction: row; - border-radius: 10px; - align-self: start; -border-width: 0.5px; -border-style: solid; - border-color: #4b4a4a; - display: flex; - position: relative; - align-items: center; - justify-content: center; -} -.whatholder{ -color: white; - position: relative; - width: 25%; - justify-content: center; - align-items: left; - - font-size: smaller; - text-align: left; + justify-content: center; + align-items: center; +} +.dropbtn { + text-align: left; + padding: 0px; + background-color: #121212; + color: white; + border-width: 0px; +} +.emptyspace { + height: 10%; +} +.btitleholder { + display: flex; + flex-direction: row; + align-self: start; + margin-bottom: -5%; +} +.animationtext { + color: #ca0c2a; + font-size: 57.5px; + font-weight: 700; + margin-left: 10px; +} +.title { + align-self: start; + font-size: 15px; + font-weight: 600; + color: white; +} +.btitle { + align-self: start; + display: inline-flex; + font-size: 57.5px; + font-weight: 700; + color: white; +} +.searchbox { + margin-bottom: 5em; + background-color: #121212; + width: 80%; + height: 130px; + flex-direction: row; + border-radius: 10px; + align-self: start; + border-width: 0.5px; + border-style: solid; + border-color: #4b4a4a; + display: flex; + position: relative; + align-items: center; + justify-content: center; +} +.whatholder { + color: white; + position: relative; + width: 25%; + justify-content: center; + align-items: left; + font-size: smaller; + text-align: left; } -.dropdown{ - background-color: #121212; - color: white; - border-width: 0px; - +.dropdown { + background-color: #121212; + color: white; + border-width: 0px; } -.dropitm{ - margin: 40px; - - background: rgba(0, 0, 0, 0.3); - color: #fff; - text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); -} -.dropdownitem:hover{ - - outline-color: #AA0020; - color: red; -} -.upcoming{ - color: white; - font-weight: 700; -font-size:35px; -align-self: start; - line-height: 35px; -} -.upcomingholder{ - align-self: center; +.dropitm { + margin: 40px; + background: rgba(0, 0, 0, 0.3); + color: #fff; + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); +} +.dropdownitem:hover { + outline-color: #aa0020; + color: red; +} +.upcoming { + color: white; + font-weight: 700; + font-size: 35px; + align-self: start; + line-height: 35px; +} +.upcomingholder { + align-self: center; margin-top: 5em; -width: 100%; - display: flex; - flex-direction: column; - - - justify-content: center; - align-items: center; - text-align: center; - font-family: mont; - -} -.Home_searchind__2uZZ2{ - margin-bottom:10px; -} -.searchind{ - width: auto; - margin:0px; - padding:0px; - margin-left: 0px; - color: white; -} -.textandimg{ - display: flex; - width: 100%; - flex-direction: row; - -} -.cardholder{ - display: flex; - margin-top: 2%; - width: 100%; - flex-direction: column; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + font-family: mont; +} +.Home_searchind__2uZZ2 { + margin-bottom: 10px; +} +.searchind { + width: auto; + margin: 0px; + padding: 0px; + margin-left: 0px; + color: white; +} +.textandimg { + display: flex; + width: 100%; + flex-direction: row; } -.divider{ - width: 30px; -} -.sideimageofsell{ -background-image: url('./assets/d.jpg'); -height: 80vh; -position: relative; -top: 5%; -right: 5%; -width: 50%; -z-index: 1; -background-size: cover; -} -.row1{ - width: 100%; - margin-top: 1%; - display: flex; - flex-direction: row; +.cardholder { + display: flex; + margin-top: 2%; + width: 100%; + flex-direction: column; +} +.divider { + width: 30px; +} +.sideimageofsell { + background-image: url("./assets/d.jpg"); + height: 80vh; + position: relative; + top: 5%; + right: 5%; + width: 50%; + z-index: 1; + background-size: cover; +} +.row1 { + width: 100%; + margin-top: 1%; + display: flex; + flex-direction: row; } -.button{ - width: 5em; +.button { + width: 5em; } -.entertainmentholder{ - margin-top: 7%; -flex-direction: column; - display: flex; +.entertainmentholder { + margin-top: 7%; + flex-direction: column; + display: flex; width: 100%; - justify-content: center; - align-items: center; - text-align: center; - font-family: mont; + justify-content: center; + align-items: center; + text-align: center; + font-family: mont; } -.entertainmenl1{ - color: white; +.entertainmenl1 { + color: white; } -.entertainmenl2{ - color: white; - font-size: xx-large; - font-weight: bolder; +.entertainmenl2 { + color: white; + font-size: xx-large; + font-weight: bolder; } @font-face { - font-family: mont; - src: url('../components/fonts/Montserrat-Regular.ttf'); - } - .dealofthedayholder{ - display: flex; - transition: all ease 0.5s; - align-items: center; - - font-family: mont; - margin-top: 10%; - background: url('./assets/c.jpg'); - background-repeat: no-repeat; - background-size: cover; - width:100%; - height: 25em; - border-radius: 10px; - - justify-content: center; - } - .dealofthedayholder:hover{ - box-shadow: 5px 5px 20px grey; - -} - .buttonndstuff{ - display: flex; - margin-top: 15%; - width: 90%; - justify-content: center; - align-items: flex-start; - flex-direction: column; - } - .dealtitle1{ - color: white; - font-weight: bolder; - font-size: 50px; - font-family: mont; - - } - .dealtitle2{ - color: white; - - font-size: 1em; - position: relative; - top: -1rem; - font-family: mont; -} -.grabdealnowbtn{ - background-color: #AA0020; - border-radius: 10px; - color: white; - width: 30%; - height: 3.5em; - border-width: 0px; + font-family: mont; + src: url("../components/fonts/Montserrat-Regular.ttf"); } -.off{ - color: white; - width: 50%; - flex: 0.5; +.dealofthedayholder { + display: flex; + transition: all ease 0.5s; + align-items: center; + font-family: mont; + margin-top: 10%; + background: url("./assets/c.jpg"); + background-repeat: no-repeat; + background-size: cover; + width: 100%; + height: 25em; + border-radius: 10px; + justify-content: center; +} +.dealofthedayholder:hover { + box-shadow: 5px 5px 20px grey; +} +.buttonndstuff { + display: flex; + margin-top: 15%; + width: 90%; + justify-content: center; + align-items: flex-start; + flex-direction: column; +} +.dealtitle1 { + color: white; + font-weight: bolder; + font-size: 50px; + font-family: mont; +} +.dealtitle2 { + color: white; - font-size: 10em; -font-weight: bolder; -height:12rem; -margin-top: 1rem; -margin-right: 10rem; -justify-content: flex-end; -display: flex; -} -.sellticketholderl{ - margin-top: 4%; -color: grey; + font-size: 1em; + position: relative; + top: -1rem; + font-family: mont; +} +.grabdealnowbtn { + background-color: #aa0020; + border-radius: 10px; + color: white; + width: 30%; + height: 3.5em; + border-width: 0px; +} +.off { + color: white; + width: 50%; + flex: 0.5; -} -.sellticketholder2{ - color: white; - - - font-size: xx-large; -} -.sellticketholder{ - display: flex; -padding: 10%; - width:120%; - margin-top: 5%; - margin-bottom: 10%; -flex-direction: column; + font-size: 10em; + font-weight: bolder; + height: 12rem; + margin-top: 1rem; + margin-right: 10rem; + justify-content: flex-end; + display: flex; +} +.sellticketholderl { + margin-top: 4%; + color: grey; +} +.sellticketholder2 { + color: white; + + font-size: xx-large; +} +.sellticketholder { + display: flex; + padding: 10%; + width: 120%; + margin-top: 5%; + margin-bottom: 10%; + flex-direction: column; transition: all ease 0.5s; - background-color: #0a0a0a; - align-self: center; - - -} -.lableholder{ - display: flex; - justify-self: flex-start; - align-self: flex-start; - - flex-direction: column; + background-color: #0a0a0a; + align-self: center; } -.textcontainer{ - background-color: honeydew; - width: 60%; - height: 25em; - text-align: left; - display: flex; - align-items: center; -padding:5%; -z-index: 150; -overflow: hidden; - justify-content: center; - margin-top: 8%; - transition: all ease 0.5s; -} -p{ - transition: all ease 1s; - font-family: mont; -} -.sellticketlongtext{ - align-self: center; -justify-self: center; -font-size: x-large; -transition: all ease 1.5s; -font-size: large; -overflow: hidden; -width: 100%; -word-wrap:break-word; -} -.allthebuttons{ - align-self: flex-start; - justify-self: end; -flex-direction: row; - z-index: 1; - width: 100%; - margin-top: 5%; - - +.lableholder { + display: flex; + justify-self: flex-start; + align-self: flex-start; + + flex-direction: column; +} +.textcontainer { + background-color: honeydew; + width: 60%; + height: 25em; + text-align: left; + display: flex; + align-items: center; + padding: 5%; + z-index: 150; + overflow: hidden; + justify-content: center; + margin-top: 8%; + transition: all ease 0.5s; } -.viewallbtn{ - border-radius: 5px; - background-color: #CA0C2A; - border-width: 0px; - color: white; - width: 10rem; - font-size: small; - height: 3rem; - justify-self: center; - margin-top: -15%; +p { + transition: all ease 1s; + font-family: mont; } -.titleholder{ - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; +.sellticketlongtext { + align-self: center; + justify-self: center; + font-size: x-large; + transition: all ease 1.5s; + font-size: large; + overflow: hidden; + width: 100%; + word-wrap: break-word; } -.sellticketbutton{ - border-width: 0px; -width: 13em; -height: 6em; -position: relative; -top: -120px; -font-size:small; -align-self: center; -background-color: #0a0a0a; -color: white; -font-family: mont; -border-width: 0px; -border-bottom-width: 2px; -font-family: mont; -border-color: transparent; -transition: all ease-out 0.5s; - -} -.sellticketbutton:hover{ - border-width: 0px; - border-bottom-width: 2px; -font-family: mont; - border-color: #CA0C2A; -} -.getstartedbtn{ - border-radius: 5px; - background-color:#CA0C2A ; - color: white; - width: 10em; - height: 3.5em; +.allthebuttons { + align-self: flex-start; + justify-self: end; + flex-direction: row; + z-index: 1; + width: 100%; + margin-top: 5%; +} +.viewallbtn { + border-radius: 5px; + background-color: #ca0c2a; + border-width: 0px; + color: white; + width: 10rem; + font-size: small; + height: 3rem; + justify-self: center; + margin-top: -15%; +} +.titleholder { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} +.sellticketbutton { + border-width: 0px; + width: 13em; + height: 6em; + position: relative; + top: -120px; + font-size: small; + align-self: center; + background-color: #0a0a0a; + color: white; + font-family: mont; + border-width: 0px; + border-bottom-width: 2px; + font-family: mont; + border-color: transparent; + transition: all ease-out 0.5s; +} +.sellticketbutton:hover { + border-width: 0px; + border-bottom-width: 2px; + font-family: mont; + border-color: #ca0c2a; +} +.getstartedbtn { + border-radius: 5px; + background-color: #ca0c2a; + color: white; + width: 10em; + height: 3.5em; align-self: center; - border-width: 0px; - margin-top: 5%; - margin-bottom: 5%; - transition: all ease 0.5s; + border-width: 0px; + margin-top: 5%; + margin-bottom: 5%; + transition: all ease 0.5s; } -.getstartedbtn:hover{ - transform: translateY(-5px) +.getstartedbtn:hover { + transform: translateY(-5px); } -.blogsectionholder{ +.blogsectionholder { + display: flex; + width: 100%; + position: relative; - display: flex; - width: 100%; - position: relative; + flex-direction: column; -flex-direction: column; - + align-self: center; - align-self: center; - - align-items: center; + align-items: center; } -.cardhoderblog{ - margin-top: 2.5%; - align-items: center; - justify-content: center; - display: flex; - flex-direction: row; - - position: relative; +.cardhoderblog { + margin-top: 2.5%; + align-items: center; + justify-content: center; + display: flex; + flex-direction: row; + + position: relative; } @media screen and (max-width: 400px) { - .cardholderblog{ - flex-direction: column; - display: flex; - margin-top: 2.5%; + .cardholderblog { + flex-direction: column; + display: flex; + margin-top: 2.5%; align-items: center; justify-content: center; display: flex; position: relative; - } + } } -.card1blog{ - width: 50%; - height: 35em; -background-color: #121212; - +.card1blog { + width: 50%; + height: 35em; + background-color: #121212; + padding: 3%; + margin-right: 3%; + display: flex; + border-radius: 10px; + flex-direction: column; + justify-content: center; + align-items: flex-start; +} +.card2blog { + background-color: violet; + width: 50%; + background-image: url("../components/b1.jpg"); + background-size: cover; + border-radius: 10px; + height: 35em; + margin-right: 2%; +} +.blogbtn1 { + background-color: #ca0c2a; + width: 10em; + border-width: 0px; + border-radius: 5px; + color: white; + height: 2em; + font-size: small; + margin-bottom: 5%; +} +.blogcardt1 { + font-weight: 500; + color: white; + font-size: 30px; + font-family: mont; +} +.blogcardt2 { + font-weight: lighter; + color: white; + font-size: 18px; + font-family: mont; + line-height: 28px; +} +.readmorebtn { + border: 1px solid #c5c5c5; + background-color: black; + width: 10em; + height: 3em; + border-width: 0px; + border-radius: 5px; + color: white; + font-size: medium; + position: relative; + margin-top: 9%; + transition: all 0.5s ease; +} +.readmorebtn:hover { + transform: translateY(-5px); +} +.testnomialsholder { + display: flex; + width: 100%; + position: relative; -padding:3%; -margin-right: 3%; -display: flex; -border-radius: 10px; -flex-direction: column; -justify-content: center; -align-items: flex-start; -} -.card2blog{ - background-color: violet; - width: 50%; - background-image: url('../components/b1.jpg'); - background-size: cover; - border-radius: 10px; - height: 35em; - margin-right: 2%; -} -.blogbtn1{ - background-color: #CA0C2A; - width: 10em; - border-width: 0px; - border-radius: 5px; - color: white; - height: 2em; - font-size: small; - margin-bottom: 5%; -} -.blogcardt1{ - font-weight: 500; - color: white; - font-size: 30px; - font-family: mont; -} -.blogcardt2{ - font-weight: lighter; - color: white; - font-size: 18px; - font-family: mont; - line-height: 28px; -} -.readmorebtn{ - border: 1px solid #c5c5c5; - background-color: black; - width: 10em; - height: 3em; - border-width: 0px; - border-radius: 5px; - color: white; - font-size: medium; - position: relative; - margin-top: 9%; - transition: all .5s ease -} -.readmorebtn:hover{ + margin-bottom: 5%; -transform: translateY(-5px); -} -.testnomialsholder{ - display: flex; - width: 100%; - position: relative; + flex-direction: column; -margin-bottom: 5%; + align-self: center; + justify-content: center; -flex-direction: column; - - - align-self: center; - justify-content: center; - - margin-top: 5%; -} -.testnomialcardholder{ - display: flex; - flex-direction: row; - width: 20em; - height: 20em; - border-radius: 10px; + margin-top: 5%; +} +.testnomialcardholder { + display: flex; + flex-direction: row; + width: 20em; + height: 20em; + border-radius: 10px; +} +.dropdown { + background-color: black; + width: 15em; +} +.testnomialcards { + width: 32%; + border-radius: 10px; + display: flex; + flex-direction: column; + margin: 0.5%; -} -.dropdown{ - background-color: black; - width: 15em; -} -.testnomialcards{ - width: 32%; - border-radius: 10px; - display: flex; - flex-direction: column; - margin: 0.5%; - - height: 17em; -justify-content: center; -align-items: left; -padding-left: 1%; -text-align: left; - background-color: #121212; -} -.searchs{ - background-color: #CA0C2A; - border: none; - color: white; - width: 35vh; - height: 10vh; + height: 17em; + justify-content: center; + align-items: left; + padding-left: 1%; + text-align: left; + background-color: #121212; +} +.searchs { + background-color: #ca0c2a; + border: none; + color: white; + width: 35vh; + height: 10vh; margin-right: 5%; - margin-top: 5%; + margin-top: 5%; } -.row1test{ -display: flex; -width: 100%; -flex-direction: row; +.row1test { + display: flex; + width: 100%; + flex-direction: row; } -.imgstarandname{ -display: flex; -margin-top: 2.5%; -flex-direction: row; +.imgstarandname { + display: flex; + margin-top: 2.5%; + flex-direction: row; } -.nametimestar{ - font-family: mont; - color: white; - margin-left: 5%; +.nametimestar { + font-family: mont; + color: white; + margin-left: 5%; } -.alltestcardholder{ - margin-top:5%; +.alltestcardholder { + margin-top: 5%; } @media screen and (max-width: 800px) { - - .main{ - padding-left: 20px; - padding-right: 20px; - padding-top: 100px; - background-image: url('./assets/r6.jpg'); -background-size:cover; -background-repeat: no-repeat; - - } - .btitle,.animationtext,.entertainmenl2,.entertainmenl2{ - font-size: xx-large; - - }.upcoming,.entertainmenl2{ - font-size: medium; - } - .grabdealnowbtn{ - width: 60%; - justify-self: flex-end; - } - .searchs{ - background-color: #CA0C2A; - border: none; - color: white; - width: 40vh; - height: 7vh; - border-radius: 10px; - margin-top: 5%; - } - .cardholder{ - padding: 0px; - } - .searchbox{ - width: 100%; - padding: 0px; - flex-direction: column; -padding:10%; -height: 35vh; - justify-content:center; - align-items: flex-start; - } - .dropdown{ - font-size: x-large - } - .row1{ - flex-direction: column; - } - .sideimageofsell{ - display: none; - } - .textcontainer{ - width: 100%; - } - .allthebuttons{ - flex-wrap: wrap; - position: relative; - bottom: 0px; - margin-top: 40%; - margin-bottom: 0px !important; - padding-bottom: 0px !important; - padding: 0px; - } -.cardhoderblog{ + .main { + padding-left: 20px; + padding-right: 20px; + padding-top: 100px; + background-image: url("./assets/r6.jpg"); + background-size: cover; + background-repeat: no-repeat; + } + .btitle, + .animationtext, + .entertainmenl2, + .entertainmenl2 { + font-size: xx-large; + } + .upcoming, + .entertainmenl2 { + font-size: medium; + } + .grabdealnowbtn { + width: 60%; + justify-self: flex-end; + } + .searchs { + background-color: #ca0c2a; + border: none; + color: white; + width: 40vh; + height: 7vh; + border-radius: 10px; + margin-top: 5%; + } + .cardholder { + padding: 0px; + } + .searchbox { + width: 100%; + padding: 0px; flex-direction: column; + padding: 10%; + height: 35vh; + justify-content: center; + align-items: flex-start; + } + .dropdown { + font-size: x-large; + } + .row1 { + flex-direction: column; + } + .sideimageofsell { + display: none; + } + .textcontainer { width: 100%; -} -.card1blog,.card2blog{ + } + .allthebuttons { + flex-wrap: wrap; + position: relative; + bottom: 0px; + margin-top: 40%; + margin-bottom: 0px !important; + padding-bottom: 0px !important; + padding: 0px; + } + .cardhoderblog { + flex-direction: column; + width: 100%; + } + .card1blog, + .card2blog { width: 100%; margin: 0px !important; margin-bottom: 5% !important; -} -.row1test{ + } + .row1test { flex-direction: column; -} -.testnomialcards{ + } + .testnomialcards { width: 90%; padding: 3%; + } + .viewallbtn { + width: 100%; + font-size: x-small; + } } - .viewallbtn{ - width: 100%; - font-size: x-small; - } - - -} \ No newline at end of file diff --git a/src/screens/Landing.js b/src/screens/Landing.js index e220bb6..98e2c71 100644 --- a/src/screens/Landing.js +++ b/src/screens/Landing.js @@ -1,138 +1,179 @@ -import React, { Component } from 'react'; -import SideHeader from '../components/SideHeader' -import Home from './Home' -import { Layout,Menu,Modal } from 'antd'; -import styles from './Layout.module.css' +import React, { Component } from "react"; +import SideHeader from "../components/SideHeader"; +import Home from "./Home"; +import { Layout, Menu, Modal } from "antd"; +import styles from "./Layout.module.css"; -import TopHeader from '../components/TopHeader'; -import { Form, Input, Button, Checkbox } from 'antd'; -import { UserOutlined, LockOutlined } from '@ant-design/icons'; -import CFooter from '../components/footer' +import TopHeader from "../components/TopHeader"; +import { Form, Input, Button, Checkbox } from "antd"; +import { UserOutlined, LockOutlined } from "@ant-design/icons"; +import CFooter from "../components/footer"; const { Header, Footer, Sider, Content } = Layout; export default class Landing extends Component { - constructor(props){ - super(props) - this.state={login:false,collapsed:true} + constructor(props) { + super(props); + this.state = { login: false, collapsed: true }; + } + login = () => { + if (this.state.login) { + this.setState({ login: false }); + } else { + this.setState({ login: true }); } - login=()=>{ - if(this.state.login){ - this.setState({login:false}) - }else{ - this.setState({login:true}) - }} - toggle = () => { - this.setState({ - collapsed: !this.state.collapsed, - }); - }; + }; + toggle = () => { + this.setState({ + collapsed: !this.state.collapsed, + }); + }; render() { return ( - -
-
- - - - - - + +
+
+ + +
- - - } onClick={this.toggle} style={{backgroundColor:'#121212'}} > - nav 1 - - -
- - - -
-
-
-

Sep 26

-

Sesame Street Live! MAke Your Magic

-

Grand Chapiteau

-
$45
-
-
-
-

Sign In

-
- - } placeholder="Username" /> - - - } - type="password" - placeholder="Password" - /> - - - - REMEMBER ME - + + + } + onClick={this.toggle} + style={{ backgroundColor: "#121212" }} + > + nav 1 + + + + +
+ + + +
+
+
+

Sep 26

+

+ Sesame Street Live! MAke Your Magic +

+

Grand Chapiteau

+
$45
+
+
+
+

Sign In

+ + + + } + placeholder="Username" + /> + + + + } + type="password" + placeholder="Password" + /> + + + + + REMEMBER ME + + - - Forgot password - - + + Forgot password + + - - - Or Register now - - -
-
- - - - + + + Or Register now + + +
+
+ + + - ); } diff --git a/src/screens/Layout.module.css b/src/screens/Layout.module.css index abcf19e..3d2ff3c 100644 --- a/src/screens/Layout.module.css +++ b/src/screens/Layout.module.css @@ -1,124 +1,123 @@ -.logo{ - width: 4em; - height: 3.2em; - top:10px; - left: -3em; - position: relative; - background-image: url('../components/new.png'); - background-size: cover; - background-repeat: no-repeat; - } - .eventname{ - font-size: medium; - color: white; - } - .place{ - color:white; - } - .date{ - font-size: small; - color: white; - } - .textontop{ - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - } - .lableoflogin{ - color:white; +.logo { + width: 4em; + height: 3.2em; + top: 10px; + left: -3em; + position: relative; + background-image: url("../components/new.png"); + background-size: cover; + background-repeat: no-repeat; +} +.eventname { + font-size: medium; + color: white; +} +.place { + color: white; +} +.date { + font-size: small; + color: white; +} +.textontop { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.lableoflogin { + color: white; + font-size: xx-large; - font-size: xx-large; - - font-weight: bold; - } -.login{ - background-color: transparent; - display: flex; - height: 85vh; -z-index: 11000; - width: 100%; -background-color: transparent; - border-radius: 25px; - flex-direction: row; + font-weight: bold; } -.loginformforgot{ - font-size: 15px; - color: #AA0020; - font-weight: bolder; +.login { + background-color: transparent; + display: flex; + height: 85vh; + z-index: 11000; + width: 100%; + background-color: transparent; + border-radius: 25px; + flex-direction: row; } -.loginformreg{ - font-size: 12px; - color: #AA0020; - font-weight: bolder; +.loginformforgot { + font-size: 15px; + color: #aa0020; + font-weight: bolder; } -.loginbutton{ - color: white; - background-color: #AA0020; - border-width: 0px; - border-radius: 5px; - width: 40%; - height: 50px; - font-size: medium; +.loginformreg { + font-size: 12px; + color: #aa0020; + font-weight: bolder; } -.image{display: flex; -width: 50%; -color: white; -height: 100%; -justify-content: center; -align-items: center; -background-size: cover; -background: url('../components/b1.jpg'); +.loginbutton { + color: white; + background-color: #aa0020; + border-width: 0px; + border-radius: 5px; + width: 40%; + height: 50px; + font-size: medium; } -.loginholder{ - display: flex; - width: 50%; - flex:1; - color: white; - flex-direction: column; +.image { + display: flex; + width: 50%; + color: white; + height: 100%; justify-content: center; - align-items: center; - background-color: #121212; + align-items: center; + background-size: cover; + background: url("../components/b1.jpg"); } -.loginregbtn{ - position: relative; - right: 0px; - color: grey; - font-size: medium; - font-weight: bolder; - font-family: mont; - background-color: #121212; -border-width: 0px; - +.loginholder { + display: flex; + width: 50%; + flex: 1; + color: white; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #121212; } -.createevent{ - display: flex; - color: white; - font-size: small; - font-weight: bolder; - font-family: mont; - background-color: #121212; - border-width: 0px; - align-self: flex-start; - width: 160px; - height: 99%; - background-color: #AA0020;margin-right: 10px; - justify-content: center; - align-items: center; - +.loginregbtn { + position: relative; + right: 0px; + color: grey; + font-size: medium; + font-weight: bolder; + font-family: mont; + background-color: #121212; + border-width: 0px; +} +.createevent { + display: flex; + color: white; + font-size: small; + font-weight: bolder; + font-family: mont; + background-color: #121212; + border-width: 0px; + align-self: flex-start; + width: 160px; + height: 99%; + background-color: #aa0020; + margin-right: 10px; + justify-content: center; + align-items: center; } @media screen and (max-width: 800px) { - .logo{ - display: none; - } - .createevent{ - display: none; - - }.loginregbtn{ - display: none; - - }.textontop{ - font-size: x-small; - } - } \ No newline at end of file + .logo { + display: none; + } + .createevent { + display: none; + } + .loginregbtn { + display: none; + } + .textontop { + font-size: x-small; + } +} diff --git a/src/screens/Payment.js b/src/screens/Payment.js index 7cf04ea..df27c77 100644 --- a/src/screens/Payment.js +++ b/src/screens/Payment.js @@ -1,104 +1,125 @@ -import React, { Component } from 'react'; -import styles from './Payment.module.css' -import {Select,Row,Col,Input} from 'antd' -import { CalendarOutlined,SecurityScanOutlined } from '@ant-design/icons'; -const {Option}=Select +import React, { Component } from "react"; +import styles from "./Payment.module.css"; +import { Select, Row, Col, Input } from "antd"; +import { CalendarOutlined, SecurityScanOutlined } from "@ant-design/icons"; +const { Option } = Select; class Payment extends Component { - constructor(props){ - super(props) - this.state={quantity:1,subtotal:70} + constructor(props) { + super(props); + this.state = { quantity: 1, subtotal: 70 }; + } + _quantityp = () => { + this.setState({ quantity: this.state.quantity + 1 }); + }; + _quantitym = () => { + if (this.state.quantity === 1) { + return; } - _quantityp=()=>{ - this.setState({quantity:this.state.quantity+1}) - } - _quantitym=()=>{ - if(this.state.quantity===1){ - return - } - this.setState({quantity:this.state.quantity-1}) - } - render() { - return ( -
- -

Complete Your Purchase

-
-
-
-

Vibra Mahou Fest

-

location Gyanpur

-
-
- + this.setState({ quantity: this.state.quantity - 1 }); + }; + render() { + return ( +
+

Complete Your Purchase

+
+
+
+

Vibra Mahou Fest

+

+ location Gyanpur{" "} +

+
+
+ +
+
+ + - + + + + + + +
+
+
+

Subtotal

+

$79

+
-
- - - - + -
-
-
-

Subtotal

-

$79

-
-
-
-
+
+
-

Payment Details

+

Payment Details

-
- - -
-
-
- - -
-
-
- - -
- -
-
-

Payment Method

-
-
-
-
-
-
-
- -
-
-
-
-

Your Information is Safe

-
-

- We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information to any third party. Nor will we send you unsolicited email. -

-
-
-
-
-

Secure Checkout

-
-

- All information is encrypted and transmitted without risk using a Secure Sockets Layer protocol. You can trust us! -

-
-
+
+ +
- ); - } +
+
+ + +
+
+
+ + +
+
+
+

Payment Method

+
+
+
+
+
+
+
+ +
+
+
+
+
+

Your Information is Safe

+
+

+ We respect your privacy and do not tolerate spam and will never + sell, rent, lease or give away your information to any third + party. Nor will we send you unsolicited email. +

+
+
+
+
+

Secure Checkout

+
+

+ All information is encrypted and transmitted without risk using a + Secure Sockets Layer protocol. You can trust us! +

+
+
+
+ ); + } } -export default Payment; \ No newline at end of file +export default Payment; diff --git a/src/screens/Payment.module.css b/src/screens/Payment.module.css index 8db770a..95ea597 100644 --- a/src/screens/Payment.module.css +++ b/src/screens/Payment.module.css @@ -1,414 +1,416 @@ -h1{ - color: white; +h1 { + color: white; } -.row2{ - width: 100%; - text-align: right; - - padding-right: 2%; - padding-left: 2%; - padding-top: 3%; -} -.row1form{ -display: flex; -flex-direction: column; -width: 80%; -justify-content: center; -align-items: center; -padding-left: 5%; -padding-right: 5%; -padding-top: 5%; -padding-bottom: 0px; -} -.email{ -display: flex; -flex-direction: column; -width: 50%; -align-self: center; -} -.placenlocation{ - margin-left: 10px; -} -.paymenttitile{ - font-size:xx-large; -color: white; -width: 100%; -display: flex; -margin-bottom: 1%; -align-self: start; -} -.cardsholder{ - width: 100%; - display: flex; - flex-direction: row; -}.paypal,.cc,.payfast{ - width: 30%; - color: white; - border-radius: 5px; - height: 4rem; - padding: 5%; - background-color: #282828; - border-width: 2px; - border-style: solid; - border-color: #282828; - transition: all ease 0.5s; -} -.placeorder{ - border-radius: 5px; - background-color: #AA0020; - color: white; - height: 4rem; - width: 40%; - border-width: 0px; - font-size: larger; +.row2 { + width: 100%; + text-align: right; - transition: all ease 0.5s; -} -.placeorder:hover{ - background-color: #de2358; -} -.row4{ - display: flex; - flex-direction: column; - width: 80%; - justify-content: flex-end; - align-items: flex-end; - padding-top: 5%; - padding-left: 5%; - padding-right: 5%; - - padding-bottom: 0px; -} -.iconntitle{ - align-self: flex-start; - justify-self: start; -} -.x{ - color: white; - font-size: x-large; -}.longtext{ - color: white; - margin-bottom: 5%; -} -.row5,.row6{ - display: flex; - flex-direction: column; - width: 60%; - align-items: center; - justify-content: center; - border-radius: 1px; - border-width: 1px; - border-color: #fff; - border-style: solid; - margin-top: 6%; - padding-left: 1%; - padding-right: 1%; - -} -.paypal:hover,.cc:hover,.payfast:hover{ - border-width: 2px; - border-style: solid; - border-color: #AA0020; -} -.paypal{ - background-image: url('./assets/paypal.png'); - background-position: center; - background-size:100px 100px; - background-repeat: no-repeat; -} -.cc{ - margin-left: 5%; - margin-right: 5%; - background-image: url('./assets/creditcard.png'); - background-position: center; - background-size:50px 45px; - background-repeat: no-repeat; -} -.payfast{ - background-image: url('./assets/payfast.png'); - background-position: center; - background-size:120px 45px; - background-repeat: no-repeat; -} -.row2form,.row3form{ - display: flex; - flex-direction: row; - width: 80%; - justify-content: center; - align-items: center; - padding-top: 20px; - padding-left: 5%; - padding-right: 5%; - padding-bottom: 0px; - } -.row3form{ - flex-direction: column; - margin-top: 0.5%; -} -.frstname{ -font-size:large; -color: white; -display: flex; -margin-bottom: 1%; -align-self: start; -}.phno{ - margin-bottom: 1%; - font-size:large; - color: white; - display: flex; - margin-left: 10%; - align-self: start; - } + padding-right: 2%; + padding-left: 2%; + padding-top: 3%; +} +.row1form { + display: flex; + flex-direction: column; + width: 80%; + justify-content: center; + align-items: center; + padding-left: 5%; + padding-right: 5%; + padding-top: 5%; + padding-bottom: 0px; +} +.email { + display: flex; + flex-direction: column; + width: 50%; + align-self: center; +} +.placenlocation { + margin-left: 10px; +} +.paymenttitile { + font-size: xx-large; + color: white; + width: 100%; + display: flex; + margin-bottom: 1%; + align-self: start; +} +.cardsholder { + width: 100%; + display: flex; + flex-direction: row; +} +.paypal, +.cc, +.payfast { + width: 30%; + color: white; + border-radius: 5px; + height: 4rem; + padding: 5%; + background-color: #282828; + border-width: 2px; + border-style: solid; + border-color: #282828; + transition: all ease 0.5s; +} +.placeorder { + border-radius: 5px; + background-color: #aa0020; + color: white; + height: 4rem; + width: 40%; + border-width: 0px; + font-size: larger; -.frstnameinpe,.frstnameinpp{ - width: 90%; - border-radius: 5px; - border-color: grey; - border-width: 1px; - height: 3rem; -padding-left:2.5%; -font-size: large; - - -} -.frstnameinpp{ - margin-left: 10%; -} -.paymentbox{ - width: 80%; - margin-top: 5%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 1%; - border-width: 1px; - border-color: #4b4a4a; - border-style: solid; - background-color: #121212; - padding-bottom: 5%; - border-radius: 5px; -} -.frstnameinp{ - width: 100%; - border-radius: 5px; - border-color: grey; - border-width: 1px; - height: 3rem; -padding-left:2.5%; -font-size: large; - margin-top: 1%; - -} -.paymentdetails{ - width: 100%; - background-color: black; - padding-right: 2.5%; - padding-left: 2.5%; - justify-content: center; - align-items: center; - display: flex; - flex-direction: column; -} -.titleofp{ - font-size: 35px; - font-weight: bolder; - color: white; - align-self: start; -} -.main{ - - background: url('./assets/r6.jpg'); - display: flex; - background-color: black; - background-repeat: no-repeat; - flex-direction: column; - background-size: contain; - width: 100%; - padding-top: 5%; - padding-left: 3.9%; -justify-content: center; -align-items: center; + transition: all ease 0.5s; +} +.placeorder:hover { + background-color: #de2358; +} +.row4 { + display: flex; + flex-direction: column; + width: 80%; + justify-content: flex-end; + align-items: flex-end; + padding-top: 5%; + padding-left: 5%; + padding-right: 5%; -} -.dropdown{ - -} -.event{ - - color: white; - font-size: 28px; - font-weight: 400 ; - line-height: 1 !important; - - margin-bottom: .5rem!important; -} -.title{ - color: white; - font-size: 48px; - font-weight: bolder; - margin-top: 6rem!important; margin-bottom: 6rem!important; -} -.plus{ - cursor: pointer; - display: inline-block; - vertical-align: top; - width: 30px; - height: 30px; - text-align: center; - border-radius: 4px; - line-height: 28px; - font-size: 25px; - padding: 0 7px; - -webkit-transition: all 0.2s ease !important; - -moz-transition: all 0.2s ease !important; - -ms-transition: all 0.2s ease !important; - -o-transition: all 0.2s ease !important; - transition: all 0.2s ease !important; - color: #fff !important; - background-color: #AA0020; + padding-bottom: 0px; +} +.iconntitle { + align-self: flex-start; + justify-self: start; +} +.x { + color: white; + font-size: x-large; +} +.longtext { + color: white; + margin-bottom: 5%; +} +.row5, +.row6 { + display: flex; + flex-direction: column; + width: 60%; + align-items: center; + justify-content: center; + border-radius: 1px; + border-width: 1px; + border-color: #fff; + border-style: solid; + margin-top: 6%; + padding-left: 1%; + padding-right: 1%; +} +.paypal:hover, +.cc:hover, +.payfast:hover { + border-width: 2px; + border-style: solid; + border-color: #aa0020; +} +.paypal { + background-image: url("./assets/paypal.png"); + background-position: center; + background-size: 100px 100px; + background-repeat: no-repeat; +} +.cc { + margin-left: 5%; + margin-right: 5%; + background-image: url("./assets/creditcard.png"); + background-position: center; + background-size: 50px 45px; + background-repeat: no-repeat; +} +.payfast { + background-image: url("./assets/payfast.png"); + background-position: center; + background-size: 120px 45px; + background-repeat: no-repeat; +} +.row2form, +.row3form { + display: flex; + flex-direction: row; + width: 80%; + justify-content: center; + align-items: center; + padding-top: 20px; + padding-left: 5%; + padding-right: 5%; + padding-bottom: 0px; +} +.row3form { + flex-direction: column; + margin-top: 0.5%; +} +.frstname { + font-size: large; + color: white; + display: flex; + margin-bottom: 1%; + align-self: start; +} +.phno { + margin-bottom: 1%; + font-size: large; + color: white; + display: flex; + margin-left: 10%; + align-self: start; } -.minus{ - cursor: pointer; - display: inline-block; - vertical-align: top; - width: 30px; - height: 30px; - text-align: center; - border-radius: 4px; - line-height: 28px; - font-size: 28px; - padding: 0 7px; - -webkit-transition: all 0.2s ease !important; - -moz-transition: all 0.2s ease !important; - -ms-transition: all 0.2s ease !important; - -o-transition: all 0.2s ease !important; - transition: all 0.2s ease !important; - color: #fff !important; - background-color: #AA0020; -} -.paymentcontainer{ - background-color: #121212; - color: white; - display: flex; - flex-direction: column; - width: 90%; - margin-top: 10%; - padding-left: 5%; - margin-left: 0.5%; - padding-top: 5%; - padding-right: 5%; - padding-bottom: 3%; - border-radius: 5px; - justify-content: center; - align-items: center; -} -.xicon{ - width: 50px; - height: 50px; - color: #fff; +.frstnameinpe, +.frstnameinpp { + width: 90%; + border-radius: 5px; + border-color: grey; + border-width: 1px; + height: 3rem; + padding-left: 2.5%; + font-size: large; +} +.frstnameinpp { + margin-left: 10%; +} +.paymentbox { + width: 80%; + margin-top: 5%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 1%; + border-width: 1px; + border-color: #4b4a4a; + border-style: solid; + background-color: #121212; + padding-bottom: 5%; + border-radius: 5px; } -.quantityinput{ +.frstnameinp { + width: 100%; + border-radius: 5px; + border-color: grey; + border-width: 1px; + height: 3rem; + padding-left: 2.5%; + font-size: large; + margin-top: 1%; +} +.paymentdetails { + width: 100%; + background-color: black; + padding-right: 2.5%; + padding-left: 2.5%; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; +} +.titleofp { + font-size: 35px; + font-weight: bolder; + color: white; + align-self: start; +} +.main { + background: url("./assets/r6.jpg"); + display: flex; + background-color: black; + background-repeat: no-repeat; + flex-direction: column; + background-size: contain; + width: 100%; + padding-top: 5%; + padding-left: 3.9%; + justify-content: center; + align-items: center; +} +.dropdown { +} +.event { + color: white; + font-size: 28px; + font-weight: 400; + line-height: 1 !important; - align-items : center; - justify-content:end; - border-radius: 5px; - margin-top: 5px; -} -.subtotal{ -font-size: x-large; - color: grey; -} -.price{ - color: white; - font-size: xx-large; + margin-bottom: 0.5rem !important; +} +.title { + color: white; + font-size: 48px; + font-weight: bolder; + margin-top: 6rem !important; + margin-bottom: 6rem !important; +} +.plus { + cursor: pointer; + display: inline-block; + vertical-align: top; + width: 30px; + height: 30px; + text-align: center; + border-radius: 4px; + line-height: 28px; + font-size: 25px; + padding: 0 7px; + -webkit-transition: all 0.2s ease !important; + -moz-transition: all 0.2s ease !important; + -ms-transition: all 0.2s ease !important; + -o-transition: all 0.2s ease !important; + transition: all 0.2s ease !important; + color: #fff !important; + background-color: #aa0020; } -.placenlocation{ - color: white; - font-size: large; -} -.row1{ - display: flex; - flex-direction: row; - color: white; -width: 100%; -padding-bottom: 3%; -border-top: 0px; -justify-content: space-between; -align-items: center; -border-right: 0px; -border-left: 0px; -border-style: solid; -border-bottom-color: #4b4a4a; -border-bottom-width: 0.2px; +.minus { + cursor: pointer; + display: inline-block; + vertical-align: top; + width: 30px; + height: 30px; + text-align: center; + border-radius: 4px; + line-height: 28px; + font-size: 28px; + padding: 0 7px; + -webkit-transition: all 0.2s ease !important; + -moz-transition: all 0.2s ease !important; + -ms-transition: all 0.2s ease !important; + -o-transition: all 0.2s ease !important; + transition: all 0.2s ease !important; + color: #fff !important; + background-color: #aa0020; +} +.paymentcontainer { + background-color: #121212; + color: white; + display: flex; + flex-direction: column; + width: 90%; + margin-top: 10%; + padding-left: 5%; + margin-left: 0.5%; + padding-top: 5%; + padding-right: 5%; + padding-bottom: 3%; + border-radius: 5px; + justify-content: center; + align-items: center; } -.options{ - background-color: black; +.xicon { + width: 50px; + height: 50px; + color: #fff; } -.input{ - - background-color: #121212; - color: white; - border-width: 1px; - border-color: white; - vertical-align: top; - font-size: 25px; - font-weight: 300; - line-height: 29px; - padding: 5px 5px; - text-align: center; - width: 60px; +.quantityinput { + align-items: center; + justify-content: end; + border-radius: 5px; + margin-top: 5px; +} +.subtotal { + font-size: x-large; + color: grey; +} +.price { + color: white; + font-size: xx-large; +} +.placenlocation { + color: white; + font-size: large; +} +.row1 { + display: flex; + flex-direction: row; + color: white; + width: 100%; + padding-bottom: 3%; + border-top: 0px; + justify-content: space-between; + align-items: center; + border-right: 0px; + border-left: 0px; + border-style: solid; + border-bottom-color: #4b4a4a; + border-bottom-width: 0.2px; +} +.options { + background-color: black; +} +.input { + background-color: #121212; + color: white; + border-width: 1px; + border-color: white; + vertical-align: top; + font-size: 25px; + font-weight: 300; + line-height: 29px; + padding: 5px 5px; + text-align: center; + width: 60px; border-radius: 5px; - margin-left: 15px; - margin-right: 15px; - margin-top: -6px; + margin-left: 15px; + margin-right: 15px; + margin-top: -6px; } @media screen and (max-width: 800px) { - .email{ - width: 100%; - } - .frstnameinpe,.frstnameinpp,.phno{ - width: 100%; - margin: 0px !important; - } - .row2form{ - flex-direction: column; - } - .main{ - padding: 0px !important; - } - .title{ - font-size: xx-large; - margin-bottom: 5%; - } - .row1{ - flex-direction: column; - padding: 5%; - justify-content: center; - } - .event{ - font-size: x-large; - margin-bottom: 4%; - } - .quantityinput{ - margin-top: 10%; - } - .eventname{ - margin-bottom: 10%; - } - .paymentbox{ - flex-direction: column; - width: 90%; - margin-top: 0px; - padding-left: 0px; - margin-left: 0px; - padding-top: 0px; - padding-right: 0px; - padding-bottom: 0px; - } - .paymentdetails{ - padding: 0px !important; - } -} \ No newline at end of file + .email { + width: 100%; + } + .frstnameinpe, + .frstnameinpp, + .phno { + width: 100%; + margin: 0px !important; + } + .row2form { + flex-direction: column; + } + .main { + padding: 0px !important; + } + .title { + font-size: xx-large; + margin-bottom: 5%; + } + .row1 { + flex-direction: column; + padding: 5%; + justify-content: center; + } + .event { + font-size: x-large; + margin-bottom: 4%; + } + .quantityinput { + margin-top: 10%; + } + .eventname { + margin-bottom: 10%; + } + .paymentbox { + flex-direction: column; + width: 90%; + margin-top: 0px; + padding-left: 0px; + margin-left: 0px; + padding-top: 0px; + padding-right: 0px; + padding-bottom: 0px; + } + .paymentdetails { + padding: 0px !important; + } +} diff --git a/src/screens/PaymentPageHF.js b/src/screens/PaymentPageHF.js index 3616bf1..66927b1 100644 --- a/src/screens/PaymentPageHF.js +++ b/src/screens/PaymentPageHF.js @@ -1,138 +1,179 @@ -import React, { Component } from 'react'; -import SideHeader from '../components/SideHeader' -import Payment from './Payment' -import { Layout,Menu,Modal } from 'antd'; -import styles from './Layout.module.css' +import React, { Component } from "react"; +import SideHeader from "../components/SideHeader"; +import Payment from "./Payment"; +import { Layout, Menu, Modal } from "antd"; +import styles from "./Layout.module.css"; -import TopHeader from '../components/TopHeader'; -import { Form, Input, Button, Checkbox } from 'antd'; -import { UserOutlined, LockOutlined } from '@ant-design/icons'; -import CFooter from '../components/footer' +import TopHeader from "../components/TopHeader"; +import { Form, Input, Button, Checkbox } from "antd"; +import { UserOutlined, LockOutlined } from "@ant-design/icons"; +import CFooter from "../components/footer"; const { Header, Footer, Sider, Content } = Layout; export default class PaymentP extends Component { - constructor(props){ - super(props) - this.state={login:false,collapsed:true} + constructor(props) { + super(props); + this.state = { login: false, collapsed: true }; + } + login = () => { + if (this.state.login) { + this.setState({ login: false }); + } else { + this.setState({ login: true }); } - login=()=>{ - if(this.state.login){ - this.setState({login:false}) - }else{ - this.setState({login:true}) - }} - toggle = () => { - this.setState({ - collapsed: !this.state.collapsed, - }); - }; + }; + toggle = () => { + this.setState({ + collapsed: !this.state.collapsed, + }); + }; render() { return ( - -
-
- - - - - - + +
+
+ + +
- - - } onClick={this.toggle} style={{backgroundColor:'#121212'}} > - nav 1 - - -
- - - -
-
-
-

Sep 26

-

Sesame Street Live! MAke Your Magic

-

Grand Chapiteau

-
$45
-
-
-
-

Sign In

-
- - } placeholder="Username" /> - - - } - type="password" - placeholder="Password" - /> - - - - REMEMBER ME - + + + } + onClick={this.toggle} + style={{ backgroundColor: "#121212" }} + > + nav 1 + + + + +
+ + + +
+
+
+

Sep 26

+

+ Sesame Street Live! MAke Your Magic +

+

Grand Chapiteau

+
$45
+
+
+
+

Sign In

+ + + + } + placeholder="Username" + /> + + + + } + type="password" + placeholder="Password" + /> + + + + + REMEMBER ME + + - - Forgot password - - + + Forgot password + + - - - Or Register now - - -
-
- - - - + + + Or Register now + + +
+
+ + + - ); } diff --git a/src/serviceWorker.js b/src/serviceWorker.js index b04b771..b1f7692 100644 --- a/src/serviceWorker.js +++ b/src/serviceWorker.js @@ -11,9 +11,9 @@ // opt-in, read https://bit.ly/CRA-PWA const isLocalhost = Boolean( - window.location.hostname === 'localhost' || + window.location.hostname === "localhost" || // [::1] is the IPv6 localhost address. - window.location.hostname === '[::1]' || + window.location.hostname === "[::1]" || // 127.0.0.0/8 are considered localhost for IPv4. window.location.hostname.match( /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ @@ -21,7 +21,7 @@ const isLocalhost = Boolean( ); export function register(config) { - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) { // The URL constructor is available in all browsers that support SW. const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); if (publicUrl.origin !== window.location.origin) { @@ -31,7 +31,7 @@ export function register(config) { return; } - window.addEventListener('load', () => { + window.addEventListener("load", () => { const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; if (isLocalhost) { @@ -42,8 +42,8 @@ export function register(config) { // service worker/PWA documentation. navigator.serviceWorker.ready.then(() => { console.log( - 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit https://bit.ly/CRA-PWA' + "This web app is being served cache-first by a service " + + "worker. To learn more, visit https://bit.ly/CRA-PWA" ); }); } else { @@ -64,14 +64,14 @@ function registerValidSW(swUrl, config) { return; } installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { + if (installingWorker.state === "installed") { if (navigator.serviceWorker.controller) { // At this point, the updated precached content has been fetched, // but the previous service worker will still serve the older // content until all client tabs are closed. console.log( - 'New content is available and will be used when all ' + - 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' + "New content is available and will be used when all " + + "tabs for this page are closed. See https://bit.ly/CRA-PWA." ); // Execute callback @@ -82,7 +82,7 @@ function registerValidSW(swUrl, config) { // At this point, everything has been precached. // It's the perfect time to display a // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); + console.log("Content is cached for offline use."); // Execute callback if (config && config.onSuccess) { @@ -94,21 +94,21 @@ function registerValidSW(swUrl, config) { }; }) .catch(error => { - console.error('Error during service worker registration:', error); + console.error("Error during service worker registration:", error); }); } function checkValidServiceWorker(swUrl, config) { // Check if the service worker can be found. If it can't reload the page. fetch(swUrl, { - headers: { 'Service-Worker': 'script' }, + headers: { "Service-Worker": "script" }, }) .then(response => { // Ensure service worker exists, and that we really are getting a JS file. - const contentType = response.headers.get('content-type'); + const contentType = response.headers.get("content-type"); if ( response.status === 404 || - (contentType != null && contentType.indexOf('javascript') === -1) + (contentType != null && contentType.indexOf("javascript") === -1) ) { // No service worker found. Probably a different app. Reload the page. navigator.serviceWorker.ready.then(registration => { @@ -123,13 +123,13 @@ function checkValidServiceWorker(swUrl, config) { }) .catch(() => { console.log( - 'No internet connection found. App is running in offline mode.' + "No internet connection found. App is running in offline mode." ); }); } export function unregister() { - if ('serviceWorker' in navigator) { + if ("serviceWorker" in navigator) { navigator.serviceWorker.ready .then(registration => { registration.unregister(); diff --git a/src/setupTests.js b/src/setupTests.js index 74b1a27..5fdf001 100644 --- a/src/setupTests.js +++ b/src/setupTests.js @@ -2,4 +2,4 @@ // allows you to do things like: // expect(element).toHaveTextContent(/react/i) // learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom/extend-expect'; +import "@testing-library/jest-dom/extend-expect"; From 92509eaf5e92113ccfe481fc083d2f861fa714ca Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 9 Jul 2020 19:25:26 +0530 Subject: [PATCH 02/28] Res fix --- src/components/Card.module.css | 8 +--- src/components/footer.module.css | 1 + src/index.css | 4 +- src/screens/AboutEvent.module.css | 35 +++++++++++++++ src/screens/AllEvents.js | 2 +- src/screens/AllEvents.module.css | 66 ++++++++++++++++++++++++++++ src/screens/CreateEvent.js | 2 +- src/screens/Home.module.css | 24 +++++----- src/screens/Layout.module.css | 2 +- src/screens/Payment.js | 4 +- src/screens/Payment.module.css | 73 ++++++++++++++++++++++++++++++- 11 files changed, 197 insertions(+), 24 deletions(-) diff --git a/src/components/Card.module.css b/src/components/Card.module.css index 69e4671..95c164c 100644 --- a/src/components/Card.module.css +++ b/src/components/Card.module.css @@ -17,11 +17,7 @@ margin-left: 1em; background-repeat: no-repeat; transition: all 0.5s; } -@media (min-width:600px){ - .cardholder{ - width: 90%; - } -} + .exp{ color: white; @@ -135,7 +131,7 @@ background-color: transparent; font-size: medium; font-family: mont; } -@media screen and (max-width: 800px) { +@media screen and (max-width: 1200px) { .cardholder{ width: 100% !important; margin-bottom: 5% !important; diff --git a/src/components/footer.module.css b/src/components/footer.module.css index 1760e47..43cd16b 100644 --- a/src/components/footer.module.css +++ b/src/components/footer.module.css @@ -129,6 +129,7 @@ justify-content:left; width: 100%; } .taglineholder{ + display: none; width: 100%; padding-left: 5%; border-color: black; diff --git a/src/index.css b/src/index.css index ab21105..673547f 100644 --- a/src/index.css +++ b/src/index.css @@ -48,7 +48,7 @@ body::-webkit-scrollbar-thumb { /* border-color: #40a9ff; */ border-right-width: 1px !important; } -@media screen and (max-width: 800px){ +@media screen and (max-width: 1200px){ .ant-layout-sider-children,.ant-layout-sider ,.ant-layout-sider-dark,.ant-layout-sider-collapsed{ display: none !important; }.ant-select,.ant-select-lg,.ant-select-single,.ant-select-show-arrow{ @@ -105,5 +105,5 @@ height: 5vh !important; margin: 0; padding: 0; overflow: hidden; - width: 110% !important; + width: 100% !important; } \ No newline at end of file diff --git a/src/screens/AboutEvent.module.css b/src/screens/AboutEvent.module.css index 4af7f95..97b8e28 100644 --- a/src/screens/AboutEvent.module.css +++ b/src/screens/AboutEvent.module.css @@ -373,4 +373,39 @@ overflow-x: hidden; width: 100%; padding-left: 5%; padding-right: 10%; +} +@media screen and (max-width: 1200px) { + .main{ + margin: 0px !important; + padding: 0px !important; + + } + .eventname{ + font-size:medium; + } + .detailbox{ + width: 80%; + margin-left: 0px !important; + } + .rowp1{ + flex-direction: column; + } + .elogo{ + width: 40% !important; + background-repeat: no-repeat; + } + .logoc{ + flex-direction: column !important; + } + .rowofc{ + flex-direction: column; + } + .dcards{ + width:30%; + height: 10vh; + margin-bottom: 2%; + } + .parentDiv{ + flex-direction: column; + } } \ No newline at end of file diff --git a/src/screens/AllEvents.js b/src/screens/AllEvents.js index 8cadd22..f1d070b 100644 --- a/src/screens/AllEvents.js +++ b/src/screens/AllEvents.js @@ -46,7 +46,7 @@ class AllEvents extends Component {
- +
diff --git a/src/screens/AllEvents.module.css b/src/screens/AllEvents.module.css index 636d677..423dde5 100644 --- a/src/screens/AllEvents.module.css +++ b/src/screens/AllEvents.module.css @@ -165,3 +165,69 @@ flex-direction: column; display: flex; flex-direction: row; } + .searchs{ + background-color: #CA0C2A; + border: none; + color: white; + width: 10rem; + height: 7vh; + border-radius: 10px; + margin-top: 5%; +} + @media screen and (max-width: 1200px) { + .pagenav{ + width: 60%; + margin-left: 2%; + margin-bottom: 10%; + } + .title{ + + font-size: small; + } + .caurosel{ + margin-top: 10%; + margin-bottom: 5%; + } + .titlenfilter{ + margin-top: 5%; + margin-bottom: 5%; + padding-left: 5%; + } + .entertainmentholder{ + flex-direction: column; + } + .row1{ + flex-direction: column; + padding-left: 5%; + } + .main{ + padding-top: 15%; + padding-left: 0%; + flex-direction: column; + padding-right: 5%; + margin-left: 0px ; + margin-right: 0px; + } .searchs{ + background-color: #CA0C2A; + border: none; + color: white; + width: 17rem; + height: 7vh; + border-radius: 10px; + margin-top: 5%; + } + .searchbox{ + width: 100%; + padding: 0px; + flex-direction: column; +padding:10%; +height: 45vh; +margin-bottom: 5%; + justify-content:center; + align-items: flex-start; + } + .cimg{ + padding-left: 2%; + padding-right: 2%; + } + } \ No newline at end of file diff --git a/src/screens/CreateEvent.js b/src/screens/CreateEvent.js index 712f46b..ee53b98 100644 --- a/src/screens/CreateEvent.js +++ b/src/screens/CreateEvent.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import styles from './CreateEvent.module.css' -import { Tabs, Radio } from 'antd'; +import { Tabs } from 'antd'; const { TabPane } = Tabs; class CreateEvent extends Component { diff --git a/src/screens/Home.module.css b/src/screens/Home.module.css index afe30d4..19057b6 100644 --- a/src/screens/Home.module.css +++ b/src/screens/Home.module.css @@ -319,7 +319,7 @@ word-wrap:break-word; flex-direction: row; z-index: 1; width: 100%; - margin-top: 5%; + margin-top: 8%; } @@ -403,7 +403,7 @@ flex-direction: column; position: relative; } -@media screen and (max-width: 400px) { +@media screen and (max-width: 1200px) { .cardholderblog{ flex-direction: column; display: flex; @@ -507,7 +507,7 @@ flex-direction: column; width: 15em; } .testnomialcards{ - width: 32%; + width: 30%; border-radius: 10px; display: flex; flex-direction: column; @@ -524,9 +524,9 @@ text-align: left; background-color: #CA0C2A; border: none; color: white; - width: 35vh; + width: 20vh; height: 10vh; - margin-right: 5%; + margin-right: 5%; margin-top: 5%; } .row1test{ @@ -547,7 +547,7 @@ flex-direction: row; .alltestcardholder{ margin-top:5%; } -@media screen and (max-width: 800px) { +@media screen and (max-width: 1200px) { .main{ padding-left: 20px; @@ -572,7 +572,7 @@ background-repeat: no-repeat; background-color: #CA0C2A; border: none; color: white; - width: 40vh; + width: 17rem; height: 7vh; border-radius: 10px; margin-top: 5%; @@ -585,7 +585,8 @@ background-repeat: no-repeat; padding: 0px; flex-direction: column; padding:10%; -height: 35vh; +height: 40vh; +margin-bottom: 5%; justify-content:center; align-items: flex-start; } @@ -602,14 +603,17 @@ height: 35vh; width: 100%; } .allthebuttons{ - flex-wrap: wrap; + flex-direction: row; position: relative; bottom: 0px; - margin-top: 40%; + margin-top: 50%; margin-bottom: 0px !important; padding-bottom: 0px !important; padding: 0px; } + .sellticketbutton{ + font-size: 8px; + } .cardhoderblog{ flex-direction: column; width: 100%; diff --git a/src/screens/Layout.module.css b/src/screens/Layout.module.css index abcf19e..6ffb3a9 100644 --- a/src/screens/Layout.module.css +++ b/src/screens/Layout.module.css @@ -108,7 +108,7 @@ border-width: 0px; align-items: center; } -@media screen and (max-width: 800px) { +@media screen and (max-width: 1200px) { .logo{ display: none; } diff --git a/src/screens/Payment.js b/src/screens/Payment.js index 7cf04ea..7adee7b 100644 --- a/src/screens/Payment.js +++ b/src/screens/Payment.js @@ -79,7 +79,7 @@ class Payment extends Component {
-
+

Your Information is Safe

@@ -88,7 +88,7 @@ class Payment extends Component {

-
+

Secure Checkout

diff --git a/src/screens/Payment.module.css b/src/screens/Payment.module.css index 8db770a..bacbfb7 100644 --- a/src/screens/Payment.module.css +++ b/src/screens/Payment.module.css @@ -365,7 +365,78 @@ border-bottom-width: 0.2px; margin-right: 15px; margin-top: -6px; } -@media screen and (max-width: 800px) { +@media screen and (max-width: 1000px) { + .main{ + justify-content: center; + align-items: center; + display: flex; + text-align: center; + } + .x{ + font-size: medium; + justify-content: center; + align-self: center; + display: flex; + + justify-self: center; + } + .iconntitle{ + padding-top: 0px; + padding: 1%; + } + .dropdown{ + + } + .row5,.row6{ + width: 80%; + padding: 5%; + text-align: center; + } + + .row6{ + margin-bottom: 30px; + } + .placeorder{ + width: 100%; + margin-bottom: 10%; + } + .paypal,.cc,.payfast{ + width: 100%; + margin: 0px !important; + + } + .cardsholder{ + height: 30vh; + margin-top: 5%; + align-items: center; + display: flex; + justify-content: space-around; + flex-direction: column; + } + .frstname{ + font-size: small; + padding-bottom: 10px !important; + } + .phno{ + font-size: small; + padding-bottom: 10px !important; + } + .paymenttitile{ + font-size: large; + } + .row2form{ + padding-top: 0px !important; + } + .email{ + margin-top: 5% !important; + } + .titleofp{ + font-size: x-large; + margin-top: 5%; + } + .paymentcontainer{ + margin-bottom: 10% !important; + } .email{ width: 100%; } From f85772b22da4e084fabb48ef7880d7f0ad4b5fe8 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 9 Jul 2020 22:22:34 +0530 Subject: [PATCH 03/28] res fix --- src/components/dropdown.js | 6 +- src/components/dropdown.module.css | 1 + src/components/new (2).png | Bin 0 -> 36732 bytes src/screens/AboutEvent.js | 34 ++++++++++- src/screens/AboutEvent.module.css | 90 +++++++++++++++++++++++------ src/screens/AllEvents.js | 20 ++++--- src/screens/AllEvents.module.css | 31 ++++++++-- src/screens/Home.js | 2 +- 8 files changed, 148 insertions(+), 36 deletions(-) create mode 100644 src/components/new (2).png diff --git a/src/components/dropdown.js b/src/components/dropdown.js index 42c3c0f..4a40914 100644 --- a/src/components/dropdown.js +++ b/src/components/dropdown.js @@ -9,7 +9,7 @@ function NavItem(props) { return (

) } -function Drop() { +function Drop(props) { return ( - + diff --git a/src/components/dropdown.module.css b/src/components/dropdown.module.css index cfaf7ab..fb9c6d7 100644 --- a/src/components/dropdown.module.css +++ b/src/components/dropdown.module.css @@ -33,6 +33,7 @@ position: absolute; top: 50px; width: 200px; + z-index: 100; transform: translateX(-5%); background-color: var(--bg); border: var(--border); diff --git a/src/components/new (2).png b/src/components/new (2).png new file mode 100644 index 0000000000000000000000000000000000000000..31f781aae537c0a1e444dc4e4209ff951f40113c GIT binary patch literal 36732 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 literal 0 HcmV?d00001 diff --git a/src/screens/AboutEvent.js b/src/screens/AboutEvent.js index 2e4b90b..e86f2ed 100644 --- a/src/screens/AboutEvent.js +++ b/src/screens/AboutEvent.js @@ -39,8 +39,8 @@ class AboutEvent extends Component { - {" "} +

Sesame Street Live! Make Your Magic @@ -52,16 +52,21 @@ class AboutEvent extends Component {

Vira Mount Fest

bla bla

+
+ +
-

26 September

+

Event start date

7:00 pm

View All Dates

@@ -69,13 +74,35 @@ class AboutEvent extends Component {
-

Grand Chapiteau

+

event end date

+

New York

+
+
+
+ +
+

Location

+

New York

+
+
+
+ +
+

Mode

+

New York

+
+
+
+ +
+

Price

New York

+

Slot left

$45

@@ -84,6 +111,7 @@ class AboutEvent extends Component {

Browse categorys

+ View All
{/*
*/} diff --git a/src/screens/AboutEvent.module.css b/src/screens/AboutEvent.module.css index 97b8e28..b427448 100644 --- a/src/screens/AboutEvent.module.css +++ b/src/screens/AboutEvent.module.css @@ -18,7 +18,8 @@ } .titleofc{ color:white; - font-size: 25px; + font-size: 20px; + justify-content:flex-start; } .dcardsg{ background-color: #CA0C2A; @@ -36,8 +37,8 @@ } .dcards{ background-color: #CA0C2A; -height: 25vh; -width: 15%; +height: 23vh; +width: 13%; border-radius: 10px; display: flex; margin-left: 1%; @@ -109,17 +110,19 @@ background-color: #121212; font-size: 28px; color: white; } +.vbtn{ + color: #CA0C2A; + font-size: small; +} .title{ - width: 2rem; - height: 30vh; - justify-content: center; - align-items: center; - margin-top: 1%; - justify-content: center; + width: 5rem; + justify-content:space-around; align-items: center; + height: 100%; +flex-direction: column; display: flex; - flex-direction: column; + } .imggalleryh{ width: 100%; @@ -158,7 +161,7 @@ background-color: #121212; } .time{ color: white; - font-size: 20px + font-size: 15px } .eventname{ color: white; @@ -200,9 +203,9 @@ top: 10px; border-width: 0px; color: white; border-radius: 5px; - font-size: small; - padding: 1%; - width: 10rem; + font-size: x-small; +margin-left: 10px; + width: 8rem; height: 4rem; font-family: mont; @@ -261,7 +264,7 @@ flex-direction: column; background-color: #121212; } .row1,.row2,.row3{ - padding: 5%; + padding: 1%; display: flex; flex-direction: column; @@ -305,10 +308,21 @@ border-width: 0px; background-color: #121212 !important; border-width: 0px !important; color: white !important; + font-size: large; } - +.booknowb{ + color: white; + width: 7rem; + height: 4rem; + padding-bottom: 4px; + font-size: small; + font-family: mont; + border-width: 0px; + border-radius: 5px; + background-color: #CA0C2A; +} .corholder{ width: 120%; @@ -375,6 +389,12 @@ padding-left: 5%; padding-right: 10%; } @media screen and (max-width: 1200px) { + .eventnametop,.eventnametop_{ + font-size: medium; + } + .rowp2{ + flex-direction: column; + } .main{ margin: 0px !important; padding: 0px !important; @@ -384,7 +404,8 @@ padding-right: 10%; font-size:medium; } .detailbox{ - width: 80%; + width: 90%; + margin-right: 0px; margin-left: 0px !important; } .rowp1{ @@ -394,8 +415,43 @@ padding-right: 10%; width: 40% !important; background-repeat: no-repeat; } + .imggalleryh1{ + flex-direction: column; + flex-wrap: nowrap; + width: 100%; + height: 250vh; + margin-left: 0px; + } + .booknowf{ + width: 6rem; + height: 3rem; + font-size: small; + } + .imggalleryh1_{ + margin-bottom: 5%; + margin-left: 0px; + margin-right: 0px; + } + .rowofg{ + flex-direction: column; + padding-left: 0px; + padding-right: 0px; + } + .dcardsg{ + width: 90% !important; + } .logoc{ flex-direction: column !important; + margin-bottom: 5%; + } + .booknowb{ + width: 8rem; + } + .buttonsofc{ + width: 100%; + margin-bottom: 5%; + justify-content: space-between; + display: flex; } .rowofc{ flex-direction: column; diff --git a/src/screens/AllEvents.js b/src/screens/AllEvents.js index f1d070b..3d9f448 100644 --- a/src/screens/AllEvents.js +++ b/src/screens/AllEvents.js @@ -3,14 +3,16 @@ import Card from '../components/Card' import styles from './AllEvents.module.css' import { Carousel } from 'antd'; import Drop from '../components/dropdown' -import {FilterOutlined } from '@ant-design/icons' -import {Button,Dropdown,Menu} from 'antd' +import {FilterOutlined,LeftOutlined,RightOutlined } from '@ant-design/icons' + class AllEvents extends Component { render() { return (
+
+
@@ -24,20 +26,22 @@ class AllEvents extends Component {
- +
+
+

WHAT

- +

WHEN

- +

WHERE

- +

KEYWORD

@@ -54,7 +58,9 @@ class AllEvents extends Component {

Simple Layout

- + + +
diff --git a/src/screens/AllEvents.module.css b/src/screens/AllEvents.module.css index 423dde5..50baa7d 100644 --- a/src/screens/AllEvents.module.css +++ b/src/screens/AllEvents.module.css @@ -42,12 +42,27 @@ font-size: smaller; text-align: left; } -.caurosel{ +.c{ + display: flex; + flex-direction: column; +width: 100%; padding: 2%; +} +.arrows{ + height: 18rem; + + display: flex; + justify-content: center; + align-items: center; +} +.caurosel{ +margin-bottom: 2%; +flex-direction: row; +display: flex; margin-top: -5%; border-radius: 10px; - width: 104%; + width: 95%; } .titlenfilter{ display: flex; @@ -106,7 +121,7 @@ border-style: solid; flex-direction: row; border-radius: 10px; align-self: start; - margin-left: 2%; + display: flex; position: relative; align-items: center; @@ -175,6 +190,12 @@ flex-direction: column; margin-top: 5%; } @media screen and (max-width: 1200px) { + .caurosel{ + width: 100%; + } + .arrows{ + display: none; + } .pagenav{ width: 60%; margin-left: 2%; @@ -202,7 +223,7 @@ flex-direction: column; } .main{ padding-top: 15%; - padding-left: 0%; + padding-left: 5% !important; flex-direction: column; padding-right: 5%; margin-left: 0px ; @@ -221,7 +242,7 @@ flex-direction: column; padding: 0px; flex-direction: column; padding:10%; -height: 45vh; +height: 50vh; margin-bottom: 5%; justify-content:center; align-items: flex-start; diff --git a/src/screens/Home.js b/src/screens/Home.js index 0326557..446c706 100644 --- a/src/screens/Home.js +++ b/src/screens/Home.js @@ -48,7 +48,7 @@ export default class Home extends Component {

WHAT

- +
From 94165e6f42cd261a38aca8f3913d7f644704fecb Mon Sep 17 00:00:00 2001 From: aryan <44253539+aryan0078@users.noreply.github.com> Date: Thu, 9 Jul 2020 22:30:32 +0530 Subject: [PATCH 04/28] Update README.md Added desc --- README.md | 86 ++++++++++++------------------------------------------- 1 file changed, 18 insertions(+), 68 deletions(-) diff --git a/README.md b/README.md index 9c40dcd..4ed3660 100644 --- a/README.md +++ b/README.md @@ -1,68 +1,18 @@ -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). - -## 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 - -### Analyzing the Bundle Size - -This section has moved here: 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 - -### Advanced Configuration - -This section has moved here: 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 - -### `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 +An Event Booking Website made with react and antd deployed at-http://gamersback.herokuapp.com/ +Routes-: +1.http://gamersback.herokuapp.com/allevents +2.http://gamersback.herokuapp.com/payment +3.http://gamersback.herokuapp.com/aboutevent +4.http://gamersback.herokuapp.com/createent +6.http://gamersback.herokuapp.com/home +!Only antd is used +How to run:- +1.clone +2.npm i +3.npm start +Branches:- +1.master(Currently Deployed) +2.Aryan +3.Shubhankar +4.Production +Push on master in order to deploy changes From 68ae4b9380d86b631ba34742771706f7e76bc8cf Mon Sep 17 00:00:00 2001 From: shubhankarshankar Date: Fri, 10 Jul 2020 10:23:46 +0530 Subject: [PATCH 05/28] Merge Changes --- src/components/Card.module.css | 21 +-- src/components/dropdown.js | 16 +- src/components/dropdown.module.css | 53 +------ src/components/footer.module.css | 22 +-- src/screens/AllEvents.js | 86 ++++------- src/screens/Home.js | 9 +- src/screens/Home.module.css | 229 +++++++++-------------------- src/screens/Layout.module.css | 19 +-- src/screens/Payment.js | 49 ------ src/screens/Payment.module.css | 195 +++++++++--------------- 10 files changed, 177 insertions(+), 522 deletions(-) diff --git a/src/components/Card.module.css b/src/components/Card.module.css index 7b1a621..e99474a 100644 --- a/src/components/Card.module.css +++ b/src/components/Card.module.css @@ -17,7 +17,6 @@ background-repeat: no-repeat; transition: all 0.5s; } -<<<<<<< HEAD @media (min-width: 600px) { .cardholder { width: 90%; @@ -25,13 +24,6 @@ } .exp { color: white; -======= - -.exp{ - color: white; - - position: absolute; ->>>>>>> 94165e6f42cd261a38aca8f3913d7f644704fecb position: absolute; @@ -131,20 +123,11 @@ font-size: medium; font-family: mont; } -<<<<<<< HEAD -@media screen and (max-width: 800px) { + +@media screen and (max-width: 1200px) { .cardholder { width: 100% !important; margin-bottom: 5% !important; margin: 0px; } } -======= -@media screen and (max-width: 1200px) { - .cardholder{ - width: 100% !important; - margin-bottom: 5% !important; - margin: 0px; - } -} ->>>>>>> 94165e6f42cd261a38aca8f3913d7f644704fecb diff --git a/src/components/dropdown.js b/src/components/dropdown.js index 8768e32..3dc2eee 100644 --- a/src/components/dropdown.js +++ b/src/components/dropdown.js @@ -13,13 +13,8 @@ function NavItem(props) { return ( @@ -52,15 +47,8 @@ function DropdownMenu() { } function Drop(props) { return ( -<<<<<<< HEAD - - -======= - - - ->>>>>>> 94165e6f42cd261a38aca8f3913d7f644704fecb + ); } diff --git a/src/components/dropdown.module.css b/src/components/dropdown.module.css index e79dfce..5d24440 100644 --- a/src/components/dropdown.module.css +++ b/src/components/dropdown.module.css @@ -28,10 +28,10 @@ height: 20px; } .dropdown { -<<<<<<< HEAD position: absolute; top: 50px; width: 200px; + z-index: 100; transform: translateX(-5%); background-color: var(--bg); border: var(--border); @@ -76,54 +76,3 @@ color: white; padding: 0px; } -======= - position: absolute; - top: 50px; - width: 200px; - z-index: 100; - transform: translateX(-5%); - background-color: var(--bg); - border: var(--border); - border-radius: var(--border-radius); - padding: 0.5rem; - overflow: hidden; - transition: height var(--speed) ease; - } - - .menu { - width: 100%; - } - - .menuitem { - height: 35px; - font-size: small; - display: flex; - align-items: center; - border-radius: var(--border-radius); - transition: background var(--speed); - padding: 0.5rem; - color: white; - } - - .menuitem .iconbutton { - margin-right: 0.5rem; - } - - - .menuitem .iconbutton:hover { - filter: none; - } - - .menuitem:hover { - color: white; - background-color: #CA0C2A; - } - - .iconright { - margin-left: auto; - } - .title{ -color: white; -padding: 0px; - } ->>>>>>> 94165e6f42cd261a38aca8f3913d7f644704fecb diff --git a/src/components/footer.module.css b/src/components/footer.module.css index 97620a0..f319a29 100644 --- a/src/components/footer.module.css +++ b/src/components/footer.module.css @@ -121,11 +121,11 @@ a { flex-direction: row; } @media screen and (max-width: 800px) { -<<<<<<< HEAD .main { width: 100%; } .taglineholder { + display: none; width: 100%; padding-left: 5%; border-color: black; @@ -139,23 +139,3 @@ a { display: none; } } -======= - .main{ - width: 100%; - } - .taglineholder{ - display: none; - width: 100%; - padding-left: 5%; - border-color: black; - } - .linksholder{ - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; - } - .newsletter{ - display: none; - } -} ->>>>>>> 94165e6f42cd261a38aca8f3913d7f644704fecb diff --git a/src/screens/AllEvents.js b/src/screens/AllEvents.js index 15d3c7c..4650fac 100644 --- a/src/screens/AllEvents.js +++ b/src/screens/AllEvents.js @@ -1,53 +1,27 @@ -import React, { Component } from 'react'; -import Card from '../components/Card' -import styles from './AllEvents.module.css' -import { Carousel } from 'antd'; -import Drop from '../components/dropdown' -import {FilterOutlined,LeftOutlined,RightOutlined } from '@ant-design/icons' - +import React, { Component } from "react"; +import Card from "../components/Card"; +import styles from "./AllEvents.module.css"; +import { Carousel } from "antd"; +import Drop from "../components/dropdown"; +import { FilterOutlined } from "@ant-design/icons"; +import { Button, Dropdown, Menu } from "antd"; class AllEvents extends Component { - - render() { - return ( -
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-

WHAT

- -
-
-

WHEN

- + render() { + return ( +
+
+ +
+
-
-

WHERE

- +
+
- +
@@ -79,22 +53,16 @@ class AllEvents extends Component {
-
-

Simple Layout

-
- - - - - -
-
- -
-
- - - +
+

Simple Layout

+
+ + + +
+
diff --git a/src/screens/Home.js b/src/screens/Home.js index d0ceb81..1a23623 100644 --- a/src/screens/Home.js +++ b/src/screens/Home.js @@ -65,15 +65,8 @@ export default class Home extends Component {

around you.

-<<<<<<< HEAD

WHAT

- -======= -

WHAT

- - - ->>>>>>> 94165e6f42cd261a38aca8f3913d7f644704fecb +

WHEN

diff --git a/src/screens/Home.module.css b/src/screens/Home.module.css index b5b4ec0..3c14f61 100644 --- a/src/screens/Home.module.css +++ b/src/screens/Home.module.css @@ -252,14 +252,6 @@ background-color: #0a0a0a; align-self: center; } -<<<<<<< HEAD -.lableholder { - display: flex; - justify-self: flex-start; - align-self: flex-start; - - flex-direction: column; -} .textcontainer { background-color: honeydew; width: 60%; @@ -273,45 +265,28 @@ justify-content: center; margin-top: 8%; transition: all ease 0.5s; -======= -.textcontainer{ - background-color: honeydew; - width: 60%; - height: 25em; - text-align: left; - display: flex; - align-items: center; -padding:5%; -z-index: 150; -overflow: hidden; - justify-content: center; - margin-top: 8%; - transition: all ease 0.5s; -} -p{ - transition: all ease 1s; - font-family: mont; -} -.sellticketlongtext{ - align-self: center; -justify-self: center; -font-size: x-large; -transition: all ease 1.5s; -font-size: large; -overflow: hidden; -width: 100%; -word-wrap:break-word; -} -.allthebuttons{ - align-self: flex-start; - justify-self: end; -flex-direction: row; - z-index: 1; - width: 100%; - margin-top: 8%; - - ->>>>>>> 94165e6f42cd261a38aca8f3913d7f644704fecb +} +p { + transition: all ease 1s; + font-family: mont; +} +.sellticketlongtext { + align-self: center; + justify-self: center; + font-size: x-large; + transition: all ease 1.5s; + font-size: large; + overflow: hidden; + width: 100%; + word-wrap: break-word; +} +.allthebuttons { + align-self: flex-start; + justify-self: end; + flex-direction: row; + z-index: 1; + width: 100%; + margin-top: 8%; } p { transition: all ease 1s; @@ -412,19 +387,11 @@ p { position: relative; } -<<<<<<< HEAD -@media screen and (max-width: 400px) { +@media screen and (max-width: 1200px) { .cardholderblog { flex-direction: column; display: flex; margin-top: 2.5%; -======= -@media screen and (max-width: 1200px) { - .cardholderblog{ - flex-direction: column; - display: flex; - margin-top: 2.5%; ->>>>>>> 94165e6f42cd261a38aca8f3913d7f644704fecb align-items: center; justify-content: center; display: flex; @@ -524,8 +491,18 @@ p { display: flex; flex-direction: column; margin: 0.5%; +} +.dropdown { + background-color: black; + width: 15em; +} +.testnomialcards { + width: 30%; + border-radius: 10px; + display: flex; + flex-direction: column; + margin: 0.5%; -<<<<<<< HEAD height: 17em; justify-content: center; align-items: left; @@ -537,39 +514,10 @@ p { background-color: #ca0c2a; border: none; color: white; - width: 35vh; + width: 20vh; height: 10vh; margin-right: 5%; margin-top: 5%; -======= -} -.dropdown{ - background-color: black; - width: 15em; -} -.testnomialcards{ - width: 30%; - border-radius: 10px; - display: flex; - flex-direction: column; - margin: 0.5%; - - height: 17em; -justify-content: center; -align-items: left; -padding-left: 1%; -text-align: left; - background-color: #121212; -} -.searchs{ - background-color: #CA0C2A; - border: none; - color: white; - width: 20vh; - height: 10vh; - margin-right: 5%; - margin-top: 5%; ->>>>>>> 94165e6f42cd261a38aca8f3913d7f644704fecb } .row1test { display: flex; @@ -589,8 +537,7 @@ text-align: left; .alltestcardholder { margin-top: 5%; } -<<<<<<< HEAD -@media screen and (max-width: 800px) { +@media screen and (max-width: 1200px) { .main { padding-left: 20px; padding-right: 20px; @@ -617,7 +564,7 @@ text-align: left; background-color: #ca0c2a; border: none; color: white; - width: 40vh; + width: 17rem; height: 7vh; border-radius: 10px; margin-top: 5%; @@ -628,76 +575,38 @@ text-align: left; .searchbox { width: 100%; padding: 0px; -======= -@media screen and (max-width: 1200px) { - - .main{ - padding-left: 20px; - padding-right: 20px; - padding-top: 100px; - background-image: url('./assets/r6.jpg'); -background-size:cover; -background-repeat: no-repeat; - - } - .btitle,.animationtext,.entertainmenl2,.entertainmenl2{ - font-size: xx-large; - - }.upcoming,.entertainmenl2{ - font-size: medium; - } - .grabdealnowbtn{ - width: 60%; - justify-self: flex-end; - } - .searchs{ - background-color: #CA0C2A; - border: none; - color: white; - width: 17rem; - height: 7vh; - border-radius: 10px; - margin-top: 5%; - } - .cardholder{ - padding: 0px; - } - .searchbox{ - width: 100%; - padding: 0px; - flex-direction: column; -padding:10%; -height: 40vh; -margin-bottom: 5%; - justify-content:center; - align-items: flex-start; - } - .dropdown{ - font-size: x-large - } - .row1{ - flex-direction: column; - } - .sideimageofsell{ - display: none; - } - .textcontainer{ - width: 100%; - } - .allthebuttons{ - flex-direction: row; - position: relative; - bottom: 0px; - margin-top: 50%; - margin-bottom: 0px !important; - padding-bottom: 0px !important; - padding: 0px; - } - .sellticketbutton{ - font-size: 8px; - } -.cardhoderblog{ ->>>>>>> 94165e6f42cd261a38aca8f3913d7f644704fecb + flex-direction: column; + padding: 10%; + height: 40vh; + margin-bottom: 5%; + justify-content: center; + align-items: flex-start; + } + .dropdown { + font-size: x-large; + } + .row1 { + flex-direction: column; + } + .sideimageofsell { + display: none; + } + .textcontainer { + width: 100%; + } + .allthebuttons { + flex-direction: row; + position: relative; + bottom: 0px; + margin-top: 50%; + margin-bottom: 0px !important; + padding-bottom: 0px !important; + padding: 0px; + } + .sellticketbutton { + font-size: 8px; + } + .cardhoderblog { flex-direction: column; padding: 10%; height: 35vh; diff --git a/src/screens/Layout.module.css b/src/screens/Layout.module.css index 7727cdd..0214e50 100644 --- a/src/screens/Layout.module.css +++ b/src/screens/Layout.module.css @@ -107,8 +107,7 @@ justify-content: center; align-items: center; } -<<<<<<< HEAD -@media screen and (max-width: 800px) { +@media screen and (max-width: 1200px) { .logo { display: none; } @@ -122,19 +121,3 @@ font-size: x-small; } } -======= -@media screen and (max-width: 1200px) { - .logo{ - display: none; - } - .createevent{ - display: none; - - }.loginregbtn{ - display: none; - - }.textontop{ - font-size: x-small; - } - } ->>>>>>> 94165e6f42cd261a38aca8f3913d7f644704fecb diff --git a/src/screens/Payment.js b/src/screens/Payment.js index 30ce4f9..df27c77 100644 --- a/src/screens/Payment.js +++ b/src/screens/Payment.js @@ -68,58 +68,9 @@ class Payment extends Component {

Payment Details

-<<<<<<< HEAD
-======= -
- - -
-
-
- - -
-
-
- - -
- -
-
-

Payment Method

-
-
-
-
-
-
-
- -
-
-
- -

Your Information is Safe

-
-

- We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information to any third party. Nor will we send you unsolicited email. -

-
-
-
- -

Secure Checkout

-
-

- All information is encrypted and transmitted without risk using a Secure Sockets Layer protocol. You can trust us! -

-
-
->>>>>>> 94165e6f42cd261a38aca8f3913d7f644704fecb
diff --git a/src/screens/Payment.module.css b/src/screens/Payment.module.css index e5c6a7f..66288e9 100644 --- a/src/screens/Payment.module.css +++ b/src/screens/Payment.module.css @@ -365,8 +365,79 @@ h1 { margin-right: 15px; margin-top: -6px; } -<<<<<<< HEAD -@media screen and (max-width: 800px) { +@media screen and (max-width: 1000px) { + .main { + justify-content: center; + align-items: center; + display: flex; + text-align: center; + } + .x { + font-size: medium; + justify-content: center; + align-self: center; + display: flex; + + justify-self: center; + } + .iconntitle { + padding-top: 0px; + padding: 1%; + } + .dropdown { + } + .row5, + .row6 { + width: 80%; + padding: 5%; + text-align: center; + } + + .row6 { + margin-bottom: 30px; + } + .placeorder { + width: 100%; + margin-bottom: 10%; + } + .paypal, + .cc, + .payfast { + width: 100%; + margin: 0px !important; + } + .cardsholder { + height: 30vh; + margin-top: 5%; + align-items: center; + display: flex; + justify-content: space-around; + flex-direction: column; + } + .frstname { + font-size: small; + padding-bottom: 10px !important; + } + .phno { + font-size: small; + padding-bottom: 10px !important; + } + .paymenttitile { + font-size: large; + } + .row2form { + padding-top: 0px !important; + } + .email { + margin-top: 5% !important; + } + .titleofp { + font-size: x-large; + margin-top: 5%; + } + .paymentcontainer { + margin-bottom: 10% !important; + } .email { width: 100%; } @@ -415,123 +486,3 @@ h1 { padding: 0px !important; } } -======= -@media screen and (max-width: 1000px) { - .main{ - justify-content: center; - align-items: center; - display: flex; - text-align: center; - } - .x{ - font-size: medium; - justify-content: center; - align-self: center; - display: flex; - - justify-self: center; - } - .iconntitle{ - padding-top: 0px; - padding: 1%; - } - .dropdown{ - - } - .row5,.row6{ - width: 80%; - padding: 5%; - text-align: center; - } - - .row6{ - margin-bottom: 30px; - } - .placeorder{ - width: 100%; - margin-bottom: 10%; - } - .paypal,.cc,.payfast{ - width: 100%; - margin: 0px !important; - - } - .cardsholder{ - height: 30vh; - margin-top: 5%; - align-items: center; - display: flex; - justify-content: space-around; - flex-direction: column; - } - .frstname{ - font-size: small; - padding-bottom: 10px !important; - } - .phno{ - font-size: small; - padding-bottom: 10px !important; - } - .paymenttitile{ - font-size: large; - } - .row2form{ - padding-top: 0px !important; - } - .email{ - margin-top: 5% !important; - } - .titleofp{ - font-size: x-large; - margin-top: 5%; - } - .paymentcontainer{ - margin-bottom: 10% !important; - } - .email{ - width: 100%; - } - .frstnameinpe,.frstnameinpp,.phno{ - width: 100%; - margin: 0px !important; - } - .row2form{ - flex-direction: column; - } - .main{ - padding: 0px !important; - } - .title{ - font-size: xx-large; - margin-bottom: 5%; - } - .row1{ - flex-direction: column; - padding: 5%; - justify-content: center; - } - .event{ - font-size: x-large; - margin-bottom: 4%; - } - .quantityinput{ - margin-top: 10%; - } - .eventname{ - margin-bottom: 10%; - } - .paymentbox{ - flex-direction: column; - width: 90%; - margin-top: 0px; - padding-left: 0px; - margin-left: 0px; - padding-top: 0px; - padding-right: 0px; - padding-bottom: 0px; - } - .paymentdetails{ - padding: 0px !important; - } -} ->>>>>>> 94165e6f42cd261a38aca8f3913d7f644704fecb From fc9dc7f9590f8911dd76c58c7fb191969c06ff42 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 13 Jul 2020 12:46:13 +0530 Subject: [PATCH 06/28] some changes --- src/components/Card.module.css | 4 +-- src/index.css | 11 +++++++- src/screens/AboutEvent.js | 44 ++++++------------------------- src/screens/AboutEvent.module.css | 17 ++++++++++++ src/screens/AboutEventP.js | 18 ++++++++++--- src/screens/Home.js | 6 ++--- src/screens/Layout.module.css | 18 +++++++++++++ 7 files changed, 73 insertions(+), 45 deletions(-) diff --git a/src/components/Card.module.css b/src/components/Card.module.css index 95c164c..565521d 100644 --- a/src/components/Card.module.css +++ b/src/components/Card.module.css @@ -48,8 +48,8 @@ margin-left: 1em; } .cardholder:hover{ - background-position-x:-10px; - + background-position-x:-6px; +background-color: black ; filter: grayscale(20%); } .eventp{ diff --git a/src/index.css b/src/index.css index 673547f..7940e7d 100644 --- a/src/index.css +++ b/src/index.css @@ -44,6 +44,10 @@ body::-webkit-scrollbar-thumb { background-color: #CA0C2A; border-radius: 10px; } +.ant-drawer-body{ + background-color: #121212; + color: white; +} .ant-picker:hover, .ant-picker-focused { /* border-color: #40a9ff; */ border-right-width: 1px !important; @@ -78,6 +82,11 @@ height: 5vh !important; padding-right: 0em !important; padding-left: 0em !important; +} +.ant-drawer-body{ + background-color: #121212; + color: white; + } } .ant-picker{ @@ -106,4 +115,4 @@ height: 5vh !important; padding: 0; overflow: hidden; width: 100% !important; -} \ No newline at end of file +} diff --git a/src/screens/AboutEvent.js b/src/screens/AboutEvent.js index e86f2ed..e9396a3 100644 --- a/src/screens/AboutEvent.js +++ b/src/screens/AboutEvent.js @@ -113,42 +113,14 @@ class AboutEvent extends Component { View All
-
- {/*
*/} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- + + +
+ Home + News + Contact + About +
diff --git a/src/screens/AboutEvent.module.css b/src/screens/AboutEvent.module.css index b427448..7bf4ddb 100644 --- a/src/screens/AboutEvent.module.css +++ b/src/screens/AboutEvent.module.css @@ -270,6 +270,23 @@ background-color: #121212; flex-direction: column; } +div.scrollmenu { + background-color: #333; + overflow: auto; + white-space: nowrap; + } + + div.scrollmenu a { + display: inline-block; + color: white; + text-align: center; + padding: 14px; + text-decoration: none; + } + + div.scrollmenu a:hover { + background-color: #777; + } .row1{ display: flex; flex-direction: column; diff --git a/src/screens/AboutEventP.js b/src/screens/AboutEventP.js index c8cee1d..1c7293d 100644 --- a/src/screens/AboutEventP.js +++ b/src/screens/AboutEventP.js @@ -6,15 +6,15 @@ import styles from './Layout.module.css' import {Link} from 'react-router-dom' import TopHeader from '../components/TopHeader'; import { Form, Input, Button, Checkbox } from 'antd'; -import { UserOutlined, LockOutlined } from '@ant-design/icons'; +import { UserOutlined, LockOutlined,MenuOutlined } from '@ant-design/icons'; import CFooter from '../components/footer' - +import { Drawer} from 'antd'; const { Header, Footer, Sider, Content } = Layout; export default class PaymentP extends Component { constructor(props){ super(props) - this.state={login:false,collapsed:true} + this.state={login:false,collapsed:true,visible:false} } login=()=>{ if(this.state.login){ @@ -36,6 +36,7 @@ export default class PaymentP extends Component { + @@ -65,6 +66,17 @@ export default class PaymentP extends Component {
+ +

some .......

+

Some contents...

+

Some contents...

+

WHAT

- +
@@ -58,9 +58,9 @@ export default class Home extends Component {

WHERE

- + - +
diff --git a/src/screens/Layout.module.css b/src/screens/Layout.module.css index 6ffb3a9..0980947 100644 --- a/src/screens/Layout.module.css +++ b/src/screens/Layout.module.css @@ -108,6 +108,9 @@ border-width: 0px; align-items: center; } +.drawer{ + display: none; +} @media screen and (max-width: 1200px) { .logo{ display: none; @@ -121,4 +124,19 @@ border-width: 0px; }.textontop{ font-size: x-small; } + .drawer{ + background-color: transparent; + border-width: 1px; + border-color: grey; + height: fit-content; + padding: 10px; + border-radius: 5px; + color: white; + font-size: 30px; + display: flex; + justify-content: center; + align-items: center; +margin-top: 5px; +margin-right: -40px; + } } \ No newline at end of file From 0210e141221114f99d728c573d1d65bdccf5c702 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 13 Jul 2020 13:47:00 +0530 Subject: [PATCH 07/28] Some changes --- src/screens/AboutEvent.js | 7 ++----- src/screens/Landing.js | 18 +++++++++++++++--- src/screens/PaymentPageHF.js | 13 ++++++++++++- 3 files changed, 29 insertions(+), 9 deletions(-) diff --git a/src/screens/AboutEvent.js b/src/screens/AboutEvent.js index e9396a3..0f4b44b 100644 --- a/src/screens/AboutEvent.js +++ b/src/screens/AboutEvent.js @@ -115,11 +115,8 @@ class AboutEvent extends Component {
-
- Home - News - Contact - About +
+
diff --git a/src/screens/Landing.js b/src/screens/Landing.js index e220bb6..daa5e93 100644 --- a/src/screens/Landing.js +++ b/src/screens/Landing.js @@ -5,8 +5,8 @@ import { Layout,Menu,Modal } from 'antd'; import styles from './Layout.module.css' import TopHeader from '../components/TopHeader'; -import { Form, Input, Button, Checkbox } from 'antd'; -import { UserOutlined, LockOutlined } from '@ant-design/icons'; +import { Form, Input, Button, Checkbox,Drawer } from 'antd'; +import { UserOutlined, LockOutlined,MenuOutlined } from '@ant-design/icons'; import CFooter from '../components/footer' const { Header, Footer, Sider, Content } = Layout; @@ -14,7 +14,7 @@ const { Header, Footer, Sider, Content } = Layout; export default class Landing extends Component { constructor(props){ super(props) - this.state={login:false,collapsed:true} + this.state={login:false,collapsed:true,visible:false} } login=()=>{ if(this.state.login){ @@ -33,6 +33,7 @@ export default class Landing extends Component {
+ @@ -65,6 +66,17 @@ export default class Landing extends Component {
+ +

some .......

+

Some contents...

+

Some contents...

+
+ +

some .......

+

Some contents...

+

Some contents...

+ Date: Mon, 20 Jul 2020 06:49:12 +0530 Subject: [PATCH 08/28] Add Player Info --- package.json | 1 + public/index.html | 12 +- src/screens/createEvent/CreateEvent.js | 68 +- .../createEvent/CreateEvent.module.css | 235 ++++++- src/screens/createEvent/CreateEventAbout.js | 629 ++++++++++++------ .../createEvent/CreateEventAdditional.js | 105 +++ .../createEvent/CreateEventBankDetails.js | 105 +++ .../createEvent/CreateEventCustomOptions.js | 0 src/screens/createEvent/CreateEventGeneral.js | 106 ++- src/screens/createEvent/CreateEventNav.js | 95 +++ .../CreateEventOrganiserDetails.js | 124 ++++ .../createEvent/CreateEventPlayerInfo.js | 31 + src/screens/createEvent/CreateEventPrizes.js | 27 + src/screens/createEvent/CreateEventRules.js | 57 ++ src/screens/createEvent/RulesRow.js | 39 ++ src/screens/createEvent/TicketRow.js | 191 ++++++ src/screens/createEvent/aboutTemp.html | 96 +++ 17 files changed, 1644 insertions(+), 277 deletions(-) create mode 100644 src/screens/createEvent/CreateEventAdditional.js create mode 100644 src/screens/createEvent/CreateEventBankDetails.js create mode 100644 src/screens/createEvent/CreateEventCustomOptions.js create mode 100644 src/screens/createEvent/CreateEventNav.js create mode 100644 src/screens/createEvent/CreateEventOrganiserDetails.js create mode 100644 src/screens/createEvent/CreateEventPlayerInfo.js create mode 100644 src/screens/createEvent/CreateEventPrizes.js create mode 100644 src/screens/createEvent/CreateEventRules.js create mode 100644 src/screens/createEvent/RulesRow.js create mode 100644 src/screens/createEvent/TicketRow.js create mode 100644 src/screens/createEvent/aboutTemp.html diff --git a/package.json b/package.json index 0c124cc..673956d 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@testing-library/user-event": "^7.1.2", "antd": "^4.3.3", "bootstrap": "^4.5.0", + "classnames": "^2.2.6", "jquery": "^3.5.1", "popper": "^1.0.1", "popper.js": "^1.16.1", diff --git a/public/index.html b/public/index.html index b038243..01421f0 100644 --- a/public/index.html +++ b/public/index.html @@ -5,18 +5,20 @@ - + - + + Gamersback
+ diff --git a/src/screens/createEvent/CreateEvent.js b/src/screens/createEvent/CreateEvent.js index 23a7167..a808817 100644 --- a/src/screens/createEvent/CreateEvent.js +++ b/src/screens/createEvent/CreateEvent.js @@ -1,57 +1,51 @@ import React from "react"; -import { BrowserRouter, Route, NavLink } from "react-router-dom"; +import { BrowserRouter, Route } from "react-router-dom"; import * as styles from "./CreateEvent.module.css"; +import CreateEventNav from "./CreateEventNav"; import CreateEventGeneral from "./CreateEventGeneral"; import CreateEventAbout from "./CreateEventAbout"; +import CreateEventRules from "./CreateEventRules"; +import CreateEventPrizes from "./CreateEventPrizes"; +import CreateEventOrganiserDetails from "./CreateEventOrganiserDetails"; +import CreateEventBankDetails from "./CreateEventBankDetails"; +import CreateEventPlayerInfo from "./CreateEventPlayerInfo"; +import CreateEventAdditional from "./CreateEventAdditional"; const CreateEvent = () => { return (
+
Let's Create Your Event
{/* NavBar placed on the left side of the page. */} - + {/* Section to display all the content for creating the event */}
+ + + + + +
diff --git a/src/screens/createEvent/CreateEvent.module.css b/src/screens/createEvent/CreateEvent.module.css index cf9a281..a8a7c0d 100644 --- a/src/screens/createEvent/CreateEvent.module.css +++ b/src/screens/createEvent/CreateEvent.module.css @@ -6,14 +6,29 @@ src: url("../../components/fonts/Montserrat-Regular.ttf"); } +.mgB { + margin-bottom: 15%; +} + .createEventWrapper { width: 100%; height: 100vh; - /* background: url("../assets/r6.jpg"); */ background-color: black; background-size: cover; background-position: center; - overflow: hidden; + overflow: auto; +} + +.createEventBanner { + display: flex; + align-items: center; + justify-content: center; + color: white; + font-size: 18px; + text-transform: uppercase; + height: 80px; + background-color: #aa0020; + letter-spacing: 1px; } .createEventWrapper li { @@ -25,11 +40,10 @@ a { padding: 0; margin: 0; text-transform: capitalize; - color: white; } .createEventInnerWrapper { - padding: 5% 10%; + padding: 5% 6%; display: flex; } @@ -38,21 +52,66 @@ a { } .createEventNav .createEventNavList { - height: 500px; + height: 600px; display: flex; flex-direction: column; justify-content: space-evenly; } +.createEventNavList .createEventNavCircle { + width: 20px; + height: 20px; + border-radius: 50%; + margin-right: 3%; + border: 0.1px solid #121212; + background-color: #121212; +} + +.link { + color: white; + display: flex; + align-items: center; +} + +.link:hover { + color: #de2358; + transition: 0.3s; + font-weight: bolder; +} + +.active { + font-size: 25px; + font-weight: bolder; + color: #aa0020; + transition: 0.3s; +} + +.createEventNavList .active .createEventNavCircle { + width: 30px; + height: 30px; + background-color: #aa0020; + transition: 0.3s; +} + .createEventInnerWrapper .createEventInnerComponents { color: white; font-family: mont, sans-serif; width: 80%; + background-color: #121212; + border-radius: 5px; + border: 1px solid #4b4a4a; + padding: 1% 1% 5%; } .createEventInnerComponents .label { - font-size: 20px; + font-size: large; + text-transform: uppercase; +} + +.createEventInnerComponents .labelBg { + font-size: 25px; text-transform: capitalize; + display: flex; } .componentHeader { @@ -60,6 +119,7 @@ a { text-align: center; text-transform: capitalize; font-size: 40px; + font-weight: bolder; } .innerComponent { @@ -70,29 +130,101 @@ a { margin: 0 5%; } -.innerComponent input[type="text"] { +.rowAddDeleteButton { + align-items: center; + justify-content: center; + font-size: 28px; + color: black; +} + +.rowAddDeleteButton button { + width: 10%; + background-color: #aa0020; + border: none; + color: white; + border-radius: 5px; + cursor: pointer; +} + +.rowAddDeleteButton button:focus { + outline: none; +} + +.rowAddDeleteButton button:hover { + background-color: #de2358; +} + +.innerComponent input[type="text"], +.innerComponent input[type="email"] { + color: black; width: 100%; border: 2px solid #282828; - background-color: #131313; - margin: 1.5% 0; + margin: 1.5% 0 3% 0; padding-left: 2%; height: 50px; - border-radius: 30px; + border-radius: 5px; } -.innerComponent input[type="text"]:focus { +.innerComponent input[type="text"], +.innerComponent input[type="email"] :focus { outline: none; } -.innerComponent input[type="submit"] { +.disabled { + pointer-events: none; + opacity: 0.4; + transition: 0.3s; +} + +.innerComponent input[type="number"] { color: black; - text-align: center; - border: none; - cursor: pointer; - width: 120px; + width: 100%; + border: 2px solid #282828; + margin: 1.5% 0 3% 0; + padding-left: 2%; height: 50px; - border-radius: 30px; - font-size: 20px; + border-radius: 5px; + -moz-appearance: textfield; +} + +.innerComponent input[type="Number"]:focus { + outline: none; +} + +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +.innerComponent input[type="date"] { + color: black; + height: 50px; + padding-left: 2%; + width: 100%; +} + +.datePicker { + color: black; + height: 50px; + padding-left: 2%; + width: 100%; +} + +.innerComponent input[type="submit"] { + border-radius: 5px; + background-color: #aa0020; + color: #fff; + height: 4rem; + width: 40%; + border-width: 0; + font-size: larger; + transition: all 0.5s ease; + cursor: pointer; +} + +.innerComponent input[type="submit"]:hover { + background-color: #de2358; } .innerComponent input[type="submit"]:focus { @@ -104,19 +236,64 @@ a { margin-bottom: 1%; } +.innerComponent input[type="checkbox"] { + margin-right: 2%; + margin-bottom: 1%; +} + +.dropDownSelect { + width: 100%; + height: 50px; + border-radius: 5px; + background-color: white; + color: black; + border: 2px solid #282828; + margin: 1.5% 0 0 0; + padding-left: 2%; + display: flex; + align-items: center; + cursor: pointer; +} + +.dropDownMenu { + width: 100%; + border-radius: 5px; + background-color: white; + color: black; + border: 2px solid #282828; + margin: 0 0 1.5% 0; +} + +.dropDownMenuItem { + margin: 1%; + padding: 1%; + cursor: pointer; + border-radius: 5px; +} + +.selectedDropDownMenuItem { + background-color: #aa0020; + color: white; + transition: 0.2s; +} + +.addtionalFeature { + font-size: 18px; +} + .createEventInfoSubmitButton { text-align: center; margin-top: 3%; } .eventDescription { + color: black; width: 100%; border: 2px solid #282828; - background-color: #131313; - margin: 1.5% 0; + margin: 1.5% 0 3% 0; padding: 2% 0 0 2%; height: 50px; - border-radius: 30px; + border-radius: 5px; resize: none; height: 250px; } @@ -125,11 +302,25 @@ a { outline: none; } +.rowNum { + background-color: black; + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + margin-right: 2%; + border-radius: 5px; +} + .eventDates, .ticketInfo, .regInfo, -.playersInfo { +.playersInfo, +.TicketRowWrapper, +.rowAddDeleteButton { display: flex; + margin-bottom: 1%; justify-content: space-between; } diff --git a/src/screens/createEvent/CreateEventAbout.js b/src/screens/createEvent/CreateEventAbout.js index c5b22ca..282516f 100644 --- a/src/screens/createEvent/CreateEventAbout.js +++ b/src/screens/createEvent/CreateEventAbout.js @@ -2,29 +2,457 @@ import React from "react"; import { Link } from "react-router-dom"; import * as styles from "./CreateEvent.module.css"; +import TicketRow from "./TicketRow"; class CreateEventAbout extends React.Component { state = { - gameName: "", - ticketName: "", - entryFee: "", - regStartDate: "", - regEndDate: "", - playerMode: "solo", - nplayers: "", - nsubs: "", - nteams: "", + eventType: ["game", "webinar", "workshop"], + game: { + gNames: {}, + gTicketNames: {}, + gTicketTypeNos: 1, + gTicketDescs: {}, + gTicketPrices: {}, + gTicketQuantity: {}, + gRegStartDates: {}, + gRegEndDates: {}, + }, + webinar: { + wbNames: {}, + wbTicketNames: {}, + wbTicketTypeNos: 1, + wbTicketDescs: {}, + wbTicketPrices: {}, + wbTicketQuantity: {}, + wbRegStartDates: {}, + wbRegEndDates: {}, + }, + workshop: { + wsNames: {}, + wsTicketNames: {}, + wsTicketTypeNos: 1, + wsTicketDescs: {}, + wsTicketPrices: {}, + wsTicketQuantity: {}, + wsRegStartDates: {}, + wsRegEndDates: {}, + }, }; - onRadioChange = event => { + componentDidUpdate(prevProps, prevState) { + if (prevState.game.gTicketTypeNos > this.state.game.gTicketTypeNos) { + this.removeLastObj(prevState.game.gTicketTypeNos, "game"); + } else if ( + prevState.webinar.wbTicketTypeNos > this.state.webinar.wbTicketTypeNos + ) { + this.removeLastObj(prevState.webinar.wbTicketTypeNos, "webinar"); + } + } + + addTicketRow = typeOfEvent => { + if (typeOfEvent === "game") { + this.setState({ + game: { + ...this.state.game, + gTicketTypeNos: this.state.game.gTicketTypeNos + 1, + }, + }); + } else if (typeOfEvent === "webinar") { + this.setState({ + webinar: { + ...this.state.webinar, + wbTicketTypeNos: this.state.webinar.wbTicketTypeNos + 1, + }, + }); + } else { + this.setState({ + workshop: { + ...this.state.workshop, + wsTicketTypeNos: this.state.workshop.wsTicketTypeNos + 1, + }, + }); + } + }; + + removeTicketRow = typeOfEvent => { + if (typeOfEvent === "game") { + this.setState({ + game: { + ...this.state.game, + gTicketTypeNos: this.state.game.gTicketTypeNos - 1, + }, + }); + } else if (typeOfEvent === "webinar") { + this.setState({ + webinar: { + ...this.state.webinar, + wbTicketTypeNos: this.state.webinar.wbTicketTypeNos - 1, + }, + }); + } else { + this.setState({ + workshop: { + ...this.state.workshop, + wsTicketTypeNos: this.state.workshop.wsTicketTypeNos - 1, + }, + }); + } + }; + + //Removing extra objects from state incase + //last row is deleted. + removeLastObj = (index, eventType) => { + if (eventType === "game") { + let ticketName = this.state.game.gTicketNames; + let ticketPrices = this.state.game.gTicketPrices; + let ticketQuantity = this.state.game.gTicketQuantity; + let gameName = this.state.game.gNames; + let ticketDesc = this.state.game.gTicketDescs; + let startRegDate = this.state.game.gRegStartDates; + let endRegDate = this.state.game.gRegEndDates; + + delete ticketName[index]; + delete ticketPrices[index]; + delete ticketQuantity[index]; + delete ticketDesc[index]; + delete gameName[index]; + delete startRegDate[index]; + delete endRegDate[index]; + } else if (eventType === "webinar") { + let ticketName = this.state.webinar.wbTicketNames; + let ticketPrices = this.state.webinar.wbTicketPrices; + let ticketQuantity = this.state.webinar.wbTicketQuantity; + let gameName = this.state.webinar.wbNames; + let ticketDesc = this.state.webinar.wbTicketDescs; + let startRegDate = this.state.webinar.wbRegStartDates; + let endRegDate = this.state.webinar.wbRegEndDates; + + delete ticketName[index]; + delete ticketPrices[index]; + delete ticketQuantity[index]; + delete ticketDesc[index]; + delete gameName[index]; + delete startRegDate[index]; + delete endRegDate[index]; + } else { + let ticketName = this.state.workshop.wsTicketNames; + let ticketPrices = this.state.workshop.wsTicketPrices; + let ticketQuantity = this.state.workshop.wsTicketQuantity; + let gameName = this.state.workshop.wsNames; + let ticketDesc = this.state.workshop.wsTicketDescs; + let startRegDate = this.state.workshop.wsRegStartDates; + let endRegDate = this.state.workshop.wsRegEndDates; + + delete ticketName[index]; + delete ticketPrices[index]; + delete ticketQuantity[index]; + delete ticketDesc[index]; + delete gameName[index]; + delete startRegDate[index]; + delete endRegDate[index]; + } + }; + + //Mapping and storing game ticket data + //to state of main about component + gameMapPropsToState = ( + ticketRowId, + ticketName, + ticketType, + ticketQuantity, + ticketPrice, + gameName, + ticketDesc, + startRegDate, + endRegDate + ) => { + this.setState({ + game: { + ...this.state.game, + gTicketNames: { + ...this.state.game.gTicketNames, + [ticketRowId]: ticketName, + }, + gTicketPrices: { + ...this.state.game.gTicketPrices, + [ticketRowId]: ticketType === "Paid" ? ticketPrice : "0", + }, + gTicketQuantity: { + ...this.state.game.gTicketQuantity, + [ticketRowId]: ticketQuantity, + }, + gNames: { + ...this.state.game.gNames, + [ticketRowId]: gameName, + }, + gTicketDescs: { + ...this.state.game.gTicketDescs, + [ticketRowId]: ticketDesc, + }, + gRegStartDates: { + ...this.state.game.gRegStartDates, + [ticketRowId]: startRegDate, + }, + gRegEndDates: { + ...this.state.game.gRegEndDates, + [ticketRowId]: endRegDate, + }, + }, + }); + console.log(this.state); + }; + + //Mapping and storing webinar ticket data + //to state of main about component + webinarMapPropsToState = ( + ticketRowId, + ticketName, + ticketType, + ticketQuantity, + ticketPrice, + gameName, + ticketDesc, + startRegDate, + endRegDate + ) => { + this.setState({ + webinar: { + ...this.state.webinar, + wbTicketNames: { + ...this.state.webinar.wbTicketNames, + [ticketRowId]: ticketName, + }, + wbTicketPrices: { + ...this.state.webinar.wbTicketPrices, + [ticketRowId]: ticketType === "Paid" ? ticketPrice : "0", + }, + wbTicketQuantity: { + ...this.state.webinar.wbTicketQuantity, + [ticketRowId]: ticketQuantity, + }, + wbNames: { + ...this.state.webinar.wbNames, + [ticketRowId]: gameName, + }, + wbTicketDescs: { + ...this.state.webinar.wbTicketDescs, + [ticketRowId]: ticketDesc, + }, + wbRegStartDates: { + ...this.state.webinar.wbRegStartDates, + [ticketRowId]: startRegDate, + }, + wbRegEndDates: { + ...this.state.webinar.wbRegEndDates, + [ticketRowId]: endRegDate, + }, + }, + }); + console.log(this.state); + }; + + workshopMapPropsToState = ( + ticketRowId, + ticketName, + ticketType, + ticketQuantity, + ticketPrice, + gameName, + ticketDesc, + startRegDate, + endRegDate + ) => { this.setState({ - playerMode: event.target.value, + workshop: { + ...this.state.workshop, + wsTicketNames: { + ...this.state.workshop.wsTicketNames, + [ticketRowId]: ticketName, + }, + wsTicketPrices: { + ...this.state.workshop.wsTicketPrices, + [ticketRowId]: ticketType === "Paid" ? ticketPrice : "0", + }, + wsTicketQuantity: { + ...this.state.workshop.wsTicketQuantity, + [ticketRowId]: ticketQuantity, + }, + wsNames: { + ...this.state.workshop.wsNames, + [ticketRowId]: gameName, + }, + wsTicketDescs: { + ...this.state.workshop.wsTicketDescs, + [ticketRowId]: ticketDesc, + }, + wsRegStartDates: { + ...this.state.workshop.wsRegStartDates, + [ticketRowId]: startRegDate, + }, + wsRegEndDates: { + ...this.state.workshop.wsRegEndDates, + [ticketRowId]: endRegDate, + }, + }, }); + console.log(this.state); + }; + + //Function to display content if + //the chosen event type is "game" + renderGameContent = () => { + const gRows = []; + const gTicketTypeNos = this.state.game.gTicketTypeNos; + + //a loop to determine the number of rows for Tickets Types + for (let i = 1; i <= gTicketTypeNos; i++) { + gRows.push( + + ); + } + + return
{gRows}
; + }; + + //Function to display content if + //the chosen event type is "webinar" + renderWebinarContent = () => { + const wbRows = []; + const wbTicketTypeNos = this.state.webinar.wbTicketTypeNos; + + //a loop to determine the number of rows for Tickets Types + for (let i = 1; i <= wbTicketTypeNos; i++) { + wbRows.push( + + ); + } + + return
{wbRows}
; + }; + + //Function to display content if + //the chosen event type is "workshop" + renderWorkshopContent = () => { + const wsRows = []; + const wsTicketTypeNos = this.state.workshop.wsTicketTypeNos; + + //a loop to determine the number of rows for Tickets Types + for (let i = 1; i <= wsTicketTypeNos; i++) { + wsRows.push( + + ); + } + + return
{wsRows}
; + }; + + renderContent = () => { + return ( +
+ {this.state.eventType.map(item => { + if (item === "game") { + return ( +
+
game events

+ {this.renderGameContent()} +
+ + {this.state.game.gTicketTypeNos > 1 && ( + + )} +
+
+ ); + } else if (item === "webinar") { + return ( +
+
+
Webinar events

+ {this.renderWebinarContent()} +
+ + {this.state.webinar.wbTicketTypeNos > 1 && ( + + )} +
+
+ ); + } else { + return ( +
+
+
+
workshop events

+ {this.renderWorkshopContent()} +
+ + {this.state.workshop.wsTicketTypeNos > 1 && ( + + )} +
+
+
+ ); + } + })} +
+ ); }; render() { return ( -
+
about
- -
- { - this.setState({ - gameName: event.target.value, - }); - }} - value={this.state.eventName} - placeholder="Enter the Name of the Game" - autoComplete="off" - /> -
-
-
- -
- { - this.setState({ - ticketName: event.target.value, - }); - }} - value={this.state.ticketName} - placeholder="Enter the Name of the Ticket" - autoComplete="off" - /> -
- -
- -
- { - this.setState({ - entryFee: event.target.value, - }); - }} - value={this.state.entryFee} - placeholder="Enter the Entry Fee, mention the unit as well" - autoComplete="off" - /> -
-
-
-
-
- -
- { - this.setState({ - regStartDate: event.target.value, - }); - }} - value={this.state.regStartDate} - placeholder="Enter Date in dd-mm-yyy format." - autoComplete="off" - /> -
- -
- -
- { - this.setState({ - regEndDate: event.target.value, - }); - }} - value={this.state.regEndDate} - placeholder="Enter Date in dd-mm-yyy format." - autoComplete="off" - /> -
-
-
- -
- - Solo
- - Multiplayer -
- {this.state.playerMode === "multi-player" && ( -
-
- -
- { - this.setState({ - nplayers: event.target.value, - }); - }} - value={this.state.nplayers} - placeholder="Enter the number of players in a team" - autoComplete="off" - /> -
-
- -
- -
- { - this.setState({ - nsubs: event.target.value, - }); - }} - value={this.state.nsubs} - placeholder="Enter the number of substitutes in a team" - autoComplete="off" - /> -
-
-
- )} - -
- { - this.setState({ - nteams: event.target.value, - }); - }} - value={this.state.nteams} - placeholder="Enter the total number of expected teams/players in the tournament" - autoComplete="off" - /> -
+ {this.renderContent()}
diff --git a/src/screens/createEvent/CreateEventAdditional.js b/src/screens/createEvent/CreateEventAdditional.js new file mode 100644 index 0000000..0ba9658 --- /dev/null +++ b/src/screens/createEvent/CreateEventAdditional.js @@ -0,0 +1,105 @@ +import React, { Component } from "react"; +import * as styles from "./CreateEvent.module.css"; + +import { Link } from "react-router-dom"; + +export default class CreateEventAdditional extends Component { + state = { + structure: false, + stream: false, + leaderBoard: false, + schedule: false, + voting: false, + photos: false, + vids: false, + }; + + render() { + return ( +
+
additional details
+
+ { + event.preventDefault(); + }} + > + +

+ + this.setState({ structure: event.target.checked }) + } + /> + Team Structure +

+ + this.setState({ stream: event.target.checked }) + } + /> + + Stream Event on Gamersback + +

+ + this.setState({ leaderBoard: event.target.checked }) + } + /> + Leader Board +

+ + this.setState({ schedule: event.target.checked }) + } + /> + Event Schedule +

+ + this.setState({ voting: event.target.checked }) + } + /> + Voting +

+ + this.setState({ photos: event.target.checked }) + } + /> + Photos +

+ this.setState({ vids: event.target.checked })} + /> + Videos +

+
+ + + +
+ +
+
+ ); + } +} diff --git a/src/screens/createEvent/CreateEventBankDetails.js b/src/screens/createEvent/CreateEventBankDetails.js new file mode 100644 index 0000000..b99c21a --- /dev/null +++ b/src/screens/createEvent/CreateEventBankDetails.js @@ -0,0 +1,105 @@ +import React, { Component } from "react"; +import { Link } from "react-router-dom"; +import * as styles from "./CreateEvent.module.css"; + +export default class CreateEventBankDetails extends Component { + state = { + accName: "", + IFSCCode: "", + accNo: "", + GSTNo: "", + }; + + render() { + return ( +
+
Bank Details
+
+
{ + event.preventDefault(); + }} + > + +
+ { + this.setState({ + accName: event.target.value, + }); + }} + value={this.state.accName} + placeholder="Enter Account Name" + autoComplete="off" + /> +
+ + +
+ { + this.setState({ + accNo: event.target.value, + }); + }} + value={this.state.accNo} + placeholder="Enter Account Number" + autoComplete="off" + /> +
+ + +
+ { + this.setState({ + IFSCCode: event.target.value, + }); + }} + value={this.state.IFSCCode} + placeholder="Enter IFSC Code" + autoComplete="off" + /> +
+ + +
+ { + this.setState({ + GSTNo: event.target.value, + }); + }} + value={this.state.GSTNo} + placeholder="Enter GST Number" + autoComplete="off" + /> +
+
+
+ + + +
+
+
+
+ ); + } +} diff --git a/src/screens/createEvent/CreateEventCustomOptions.js b/src/screens/createEvent/CreateEventCustomOptions.js new file mode 100644 index 0000000..e69de29 diff --git a/src/screens/createEvent/CreateEventGeneral.js b/src/screens/createEvent/CreateEventGeneral.js index 5490afa..c86d986 100644 --- a/src/screens/createEvent/CreateEventGeneral.js +++ b/src/screens/createEvent/CreateEventGeneral.js @@ -1,8 +1,12 @@ import React from "react"; import { Link } from "react-router-dom"; +import cx from "classnames"; +import { DatePicker } from "antd"; import * as styles from "./CreateEvent.module.css"; +const { RangePicker } = DatePicker; + class CreateEventGeneral extends React.Component { state = { eventName: "", @@ -10,6 +14,66 @@ class CreateEventGeneral extends React.Component { startDate: "", endDate: "", location: "", + types: [], + open: false, + }; + + gameTypeOption = [ + { + id: 1, + option: "Game Tournament", + }, + { + id: 2, + option: "Webinar", + }, + { + id: 3, + option: "Workshop", + }, + ]; + + handleOnClick = item => { + if (!this.state.types.some(current => current.id === item.id)) { + this.setState({ + types: [...this.state.types, item], + }); + } else { + let selectionAfterRemoval = this.state.types; + selectionAfterRemoval = selectionAfterRemoval.filter( + current => current.id !== item.id + ); + this.setState({ + types: [...selectionAfterRemoval], + }); + } + }; + + isItemSelected = item => { + if (this.state.types.some(current => current.id === item.id)) { + return true; + } + return false; + }; + + dropDown = () => { + return ( +
+ {this.gameTypeOption.map(item => ( +
this.handleOnClick(item)} + > + {item.option} +
+ ))} +
+ ); }; render() { @@ -23,7 +87,7 @@ class CreateEventGeneral extends React.Component { }} >
{ this.setState({ - eventName: event.target.value, + eventDesc: event.target.value, }); }} value={this.state.eventDesc} @@ -64,17 +128,7 @@ class CreateEventGeneral extends React.Component { Start Date
- { - this.setState({ - startDate: event.target.value, - }); - }} - value={this.state.startDate} - placeholder="Enter Date in dd-mm-yyy format." - autoComplete="off" - /> +
@@ -82,21 +136,23 @@ class CreateEventGeneral extends React.Component { end Date
- { - this.setState({ - endDate: event.target.value, - }); - }} - value={this.state.endDate} - placeholder="Enter Date in dd-mm-yyy format." - autoComplete="off" - /> +

- + +
{ + this.setState({ open: !this.state.open }); + }} + > + Select the type of event(s) +
+ {this.state.open && this.dropDown()} +
diff --git a/src/screens/createEvent/CreateEventNav.js b/src/screens/createEvent/CreateEventNav.js new file mode 100644 index 0000000..96cadb6 --- /dev/null +++ b/src/screens/createEvent/CreateEventNav.js @@ -0,0 +1,95 @@ +import React from "react"; +import { NavLink } from "react-router-dom"; + +import * as styles from "./CreateEvent.module.css"; + +const CreateEventNav = () => { + return ( + + ); +}; + +export default CreateEventNav; diff --git a/src/screens/createEvent/CreateEventOrganiserDetails.js b/src/screens/createEvent/CreateEventOrganiserDetails.js new file mode 100644 index 0000000..0c9b79d --- /dev/null +++ b/src/screens/createEvent/CreateEventOrganiserDetails.js @@ -0,0 +1,124 @@ +import React, { Component } from "react"; +import { Link } from "react-router-dom"; +import * as styles from "./CreateEvent.module.css"; + +export default class CreateEventOrganiserDetails extends Component { + state = { + name: "", + email: "", + phNo: "", + whNo: "", + website: "", + }; + + render() { + return ( +
+
Organiser Details
+
+
{ + event.preventDefault(); + }} + > + +
+ { + this.setState({ + name: event.target.value, + }); + }} + value={this.state.name} + placeholder="Enter your Name" + autoComplete="off" + /> +
+ + +
+ { + this.setState({ + email: event.target.value, + }); + }} + value={this.state.email} + placeholder="Enter your Email" + autoComplete="off" + /> +
+ + +
+ { + this.setState({ + phNo: event.target.value, + }); + }} + value={this.state.phNo} + placeholder="Enter your Phone Number" + autoComplete="off" + /> +
+ + +
+ { + this.setState({ + whNo: event.target.value, + }); + }} + value={this.state.whNo} + placeholder="Enter your WhatsApp Number" + autoComplete="off" + /> +
+ + +
+ { + this.setState({ + website: event.target.value, + }); + }} + value={this.state.website} + placeholder="Enter your Website" + autoComplete="off" + /> +
+
+
+ + + +
+
+
+
+ ); + } +} diff --git a/src/screens/createEvent/CreateEventPlayerInfo.js b/src/screens/createEvent/CreateEventPlayerInfo.js new file mode 100644 index 0000000..b466d6e --- /dev/null +++ b/src/screens/createEvent/CreateEventPlayerInfo.js @@ -0,0 +1,31 @@ +import React, { Component } from "react"; +import { Link } from "react-router-dom"; + +import * as styles from "./CreateEvent.module.css"; + +export default class CreateEventPlayerInfo extends Component { + render() { + return ( +
+
Player Details
+
+
+ choose all the details you will need from the player +
+
{ + event.preventDefault(); + }} + > +
+
+ + + +
+
+
+
+ ); + } +} diff --git a/src/screens/createEvent/CreateEventPrizes.js b/src/screens/createEvent/CreateEventPrizes.js new file mode 100644 index 0000000..232ec72 --- /dev/null +++ b/src/screens/createEvent/CreateEventPrizes.js @@ -0,0 +1,27 @@ +import React, { Component } from "react"; +import { Link } from "react-router-dom"; +import * as styles from "./CreateEvent.module.css"; + +export default class CreateEventPrizes extends Component { + render() { + return ( +
+
Prizes
+
+
{ + event.preventDefault(); + }} + > +
+
+ + + +
+
+
+
+ ); + } +} diff --git a/src/screens/createEvent/CreateEventRules.js b/src/screens/createEvent/CreateEventRules.js new file mode 100644 index 0000000..5e030af --- /dev/null +++ b/src/screens/createEvent/CreateEventRules.js @@ -0,0 +1,57 @@ +import React, { Component } from "react"; +import { Link } from "react-router-dom"; + +import * as styles from "./CreateEvent.module.css"; +import RulesRow from "./RulesRow"; + +export default class CreateEventRules extends Component { + state = { + ticketNames: [ + { + id: 1, + ticketName: "Ticket1", + }, + { + id: 2, + ticketName: "Ticket2", + }, + { + id: 3, + ticketName: "Ticket3", + }, + ], + rules: {}, + }; + + updateRules = (rule, ticketName) => { + this.setState({ + rules: { ...this.state.rules, [ticketName]: rule }, + }); + console.log(this.state); + }; + + render() { + return ( +
+
rules & regulations
+
+
{ + event.preventDefault(); + }} + > + {this.state.ticketNames.map(item => { + return ; + })} +
+
+ + + +
+ +
+
+ ); + } +} diff --git a/src/screens/createEvent/RulesRow.js b/src/screens/createEvent/RulesRow.js new file mode 100644 index 0000000..546db2c --- /dev/null +++ b/src/screens/createEvent/RulesRow.js @@ -0,0 +1,39 @@ +import React, { useState, useEffect } from "react"; + +import * as styles from "./CreateEvent.module.css"; + +const RulesRow = ({ item, updateRules }) => { + const [rules, setRules] = useState(""); + + useEffect(() => { + updateRules(rules, item.ticketName); + }, [rules, item.ticketName, updateRules]); + + return ( +
+ +
+
+ +
+