diff --git a/src/events/mlh-build-day/components/countdown.js b/src/events/mlh-build-day/components/countdown.js new file mode 100644 index 0000000..9e7a9e9 --- /dev/null +++ b/src/events/mlh-build-day/components/countdown.js @@ -0,0 +1,67 @@ +import React, { Component } from 'react'; + +class Countdown extends Component { + constructor(props) { + super(props); + this.state = { + days: 0, + hours: 0, + minutes: 0, + seconds: 0, + }; + } + + componentWillMount() { + this.getTimeUntil(this.props.deadline); + } + + componentDidMount() { + setInterval(() => this.getTimeUntil(this.props.deadline), 1000); + } + + leading(num) { + return num < 10 ? '0' + num : num; + } + + getTimeUntil(deadline) { + const time = Date.parse(deadline) - Date.parse(new Date()); + if(time < 0) { + this.setState({ days: 0, hours: 0, minutes: 0, seconds: 0 }); + + } else { + const seconds = Math.floor((time/1000)%60); + const minutes = Math.floor((time/1000/60)%60); + const hours = Math.floor((time/(1000*60*60))%24); + const days = Math.floor(time/(1000*60*60*24)); + + this.setState({ days, hours, minutes, seconds }); + } + + } + + render() { + return( +
+
+
+ {this.leading(this.state.days)} + Days +
+
+ {this.leading(this.state.hours)} + Hours +
+
+ {this.leading(this.state.minutes)} + Minutes +
+
+ {this.leading(this.state.seconds)} + Seconds +
+
+
+ ); + } +} +export default Countdown; \ No newline at end of file diff --git a/src/events/mlh-build-day/components/footer.js b/src/events/mlh-build-day/components/footer.js new file mode 100644 index 0000000..d1b9acd --- /dev/null +++ b/src/events/mlh-build-day/components/footer.js @@ -0,0 +1,23 @@ +import React from "react" +import Github from '../images/github.png' +import MLH from "../images/mlh-logo-white.png" + +const Footer = () => { + return( + + ) +} + +export default Footer \ No newline at end of file diff --git a/src/events/mlh-build-day/components/header.js b/src/events/mlh-build-day/components/header.js new file mode 100644 index 0000000..7af28b3 --- /dev/null +++ b/src/events/mlh-build-day/components/header.js @@ -0,0 +1,102 @@ +import React from "react" +import amFOSSLogo from "../../../images/amfoss_logo.png" +import amritaLogo from "../../../images/amrita_logo.png" +import LocalHackDay from "../images/localhackday.svg" +import Particles from "react-particles-js" + +const Header = () => { + return ( + <> +
+ +
+
+ + amFOSS Logo + +
+
+ + Amrita Logo + +
+
+
+
+
+ +
+
+
+
+

Amritapuri

+

December 15th 2019

+
+ +
+
+
+
+
+
+
+ + ) +} + +export default Header; \ No newline at end of file diff --git a/src/events/mlh-build-day/components/registration.js b/src/events/mlh-build-day/components/registration.js new file mode 100644 index 0000000..118b157 --- /dev/null +++ b/src/events/mlh-build-day/components/registration.js @@ -0,0 +1,178 @@ +import React, { useState } from "react" +import dataFetch from "../../../utils/dataFetch" + +const Registration = () => { + const [name, setName] = useState(""); + const [email, setEmail] = useState("") + const [phone, setPhone] = useState("") + const [gender, setGender] = useState("") + const [roll , setRoll] = useState("") + const [errorText, setErrorText] = useState("") + const [successText, setSuccessText] = useState("") + const [loading, setLoading] = useState(false) + + const query=` + mutation submitApplication($name: String!, $email: String!, $phone: String!, $formData: JSONString!){ + submitApplication( + name: $name, + email: $email, + phone: $phone, + // formID: id, + formData: $formData + ) + { + id + } +} +`; + + const submitForm = async variables => + dataFetch({ query, variables }); + + const register = () => { + const emailRegex = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; + const phoneRegex = /^\d{10}$/; + const rollRegex = /^AM[.]EN[.]U4(CSE|AIE|ECE|EAC|ELC|EEE|ME)[1][6-9][\d][\d][\d]$/; + if (name === '' || roll === '' || phone === '' || email === '' || gender === '') { + setLoading(false) + setErrorText("Please Fill All the Fields") + } else if (emailRegex.test(email) === false) { + setLoading(false) + setErrorText( "Enter Proper Email") + } else if (phoneRegex.test(phone) === false) { + setLoading(false) + setErrorText( "Enter Proper Phone No") + } else if (rollRegex.test(roll.toUpperCase()) === false) { + setErrorText("Enter Amrita Roll Number in proper format - AM.EN.U4XXX00000") + setLoading(false) + } else { + const json = { 'gender': gender, "rollNo": roll } + const variables = { name, email, phone, formData: JSON.stringify(json) } + submitForm(variables).then(r=>{ + if (Object.prototype.hasOwnProperty.call(r, "errors")) { + setErrorText(r.errors[0].message) + } else { + setSuccessText(r.data.id) + setErrorText("") + } + }) + } + } + return ( +
+
+
+
+ { !loading ? + ( +
+

+ Register Now

+

+ Sign up for the meet-up for free by filling up the form below, + and make sure you do that fast as we have limited seats to fit you + all in! Also, don't forget to bring in your friends as well :) +

+

* Meetup only open for students of Amritapuri Campus

+
{ + this.setState({loading: true}); + register(); + e.preventDefault(); + }}> +
+
+
+ setName(e.target.value)} + /> +
+
+
+
+ setRoll(e.target.value)} + /> +
+
+
+
+ setEmail(e.target.value)} + /> +
+
+
+
+ setPhone(e.target.value)} + /> +
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+ { + errorText !== '' ? +
+ {errorText} +
: null + } +
+
+ +
+
+
+ +
) : successText !== '' ? (
+ Thank You! You have successfully signed up for the event. + We will get back to soon, meanwhile dont forget to bring your friends as well! +
) : +
Submitting. Please Wait
+ } +
+
+
+ ) +} + +export default Registration \ No newline at end of file diff --git a/src/events/mlh-build-day/components/rsvpForm.js b/src/events/mlh-build-day/components/rsvpForm.js new file mode 100644 index 0000000..27c23c2 --- /dev/null +++ b/src/events/mlh-build-day/components/rsvpForm.js @@ -0,0 +1,110 @@ +import React from 'react'; +import dataFetch from "../../../utils/dataFetch"; + +const query = ` +mutation($formID: Int!, $hash: String!,$phone: String!, $response: Boolean!) +{ + submitRSVP(formID:$formID, hash: $hash, phone: $phone, response: $response) + { + status + } +} +` + +class RSVPForm extends React.Component { + constructor(props) { + super(props) + this.state = { + phone: '', + response: true, + loading: false, + successText: '', + errorText: '' + } + } + submit = async() => + { + const variables = { + 'formID': 2, + 'hash': this.props.hash, + 'phone': this.state.phone, + 'response': this.state.response + }; + const response = await dataFetch({ query, variables }); + if (Object.prototype.hasOwnProperty.call(response, 'errors')) { + this.setState({ loading: false, errorText: response.errors[0].message}); + } else { + this.setState({ + successText: response.data.submitRSVP.status, + errorText: '' + }) + } + } + + render() { + return( +
+
+

RSVP for MLH Local Build Day 2019, Amritapuri

+

+ Thank you so much for showing interest in Local Build Day, + organized by amFOSS, in association with MLH. +

+
+ If you are facing any technical issues, or if your friend didn't recieve + a confirmation email yet, please ping +91 8139056887 on Telegram/WhatsApp. + We are sorry for any inconvenience caused. +
+ {!this.state.loading ? +
{ + this.setState({ loading: true }); + this.submit(); + }} + className="form-group"> +
+
+ + +
+
+ + this.setState({ phone: e.currentTarget.value })} + /> +
+
+ +
+
+
: this.state.successText !== '' ? +
Thank you! Please inform your friends too about submitting their RSVP.
+ :
Submitting. Please Wait
+ } + { + this.state.errorText !== '' ? +
+ {this.state.errorText} +
: null + } +
+
+ ) + } +} + +export default RSVPForm; \ No newline at end of file diff --git a/src/events/mlh-build-day/components/schedule.js b/src/events/mlh-build-day/components/schedule.js new file mode 100644 index 0000000..3fd6040 --- /dev/null +++ b/src/events/mlh-build-day/components/schedule.js @@ -0,0 +1,82 @@ +import React from "react" + +const Schedule = () => { + return ( +
+

Event Schedule

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TimeEvent
08:00AMArrival and Check-in
09:00AMPresentation about MLH!
9:15AMWorkshop on "Add an FAQ Bot to Your Webpage with Microsoft Azure"
10:45AMClearing any doubts
11:00AMIntroduction to Hackathon,Problem Statements released
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TimeEvent
11:15AMHack Begins.
12:00PMLunch
3:00PMA fun activity
8:30PMHack Ends!
8:30PMFinal Pitching session.
9:30PMAwards and closing ceremony
+
+
+
+ ) +} + +export default Schedule \ No newline at end of file diff --git a/src/events/mlh-build-day/images/github.png b/src/events/mlh-build-day/images/github.png new file mode 100644 index 0000000..c6f113a Binary files /dev/null and b/src/events/mlh-build-day/images/github.png differ diff --git a/src/events/mlh-build-day/images/localhackday.svg b/src/events/mlh-build-day/images/localhackday.svg new file mode 100644 index 0000000..234aefc --- /dev/null +++ b/src/events/mlh-build-day/images/localhackday.svg @@ -0,0 +1 @@ +lhdHosted by \ No newline at end of file diff --git a/src/events/mlh-build-day/images/mlh-logo-white.png b/src/events/mlh-build-day/images/mlh-logo-white.png new file mode 100644 index 0000000..f15e505 Binary files /dev/null and b/src/events/mlh-build-day/images/mlh-logo-white.png differ diff --git a/src/events/mlh-build-day/index.js b/src/events/mlh-build-day/index.js new file mode 100644 index 0000000..7d98478 --- /dev/null +++ b/src/events/mlh-build-day/index.js @@ -0,0 +1,41 @@ +import React, { useEffect, useState } from "react" +import SEO from "../../components/seo" +import './styles/style.sass'; +import Header from "./components/header" +import Footer from "./components/footer" +import Registration from "./components/registration" +import Schedule from "./components/schedule" +import Countdown from "../mlh-build-day/components/countdown" +import RSVPForm from "../mlh-build-day/components/rsvpForm" + +const MLHBuild = () => { + const [hash, setHash] = useState(''); + const [queryLoaded, setQueryLoaded] = useState(false); + + useEffect(() => { + if(!queryLoaded) + { + const query = window.location.search.substring(1); + const queryHash = query.split("=") + setHash(queryHash[1]) + setQueryLoaded(true) + } + }) + + return ( +
+ + {hash === undefined ? ( + <> +
+ + + +
+ ) +} + +export default MLHBuild \ No newline at end of file diff --git a/src/events/mlh-build-day/styles/style.sass b/src/events/mlh-build-day/styles/style.sass new file mode 100644 index 0000000..11a3dc0 --- /dev/null +++ b/src/events/mlh-build-day/styles/style.sass @@ -0,0 +1,109 @@ +@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css") +@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css") +@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:700&display=swap') +@import url('https://fonts.googleapis.com/css?family=Poppins:400&display=swap') +@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css') + +#mlhbuild-landing + #counter + background-color: black + + #header-area + background: black!important + min-height: 100vh + padding: 2vh 0 + .mlh-Logo + max-width: 100vmin + padding-top: 15vh + width: 100% + .amFOSSLogo, .amritaLogo + max-width: 10rem + min-width: 15vw + width: 100% + margin: 0 + .header-title + height: 100% + h1 + color: yellow + text-transform: uppercase + font-size: calc(1.5rem + 2.5vmax) + line-height: 110% + margin: 0 + + h3 + color: white + font-size: calc(1.2rem + 1.5vmax) + + #topbar + background: white + padding: 1rem + border-bottom: 1px solid rgba(0,0,0,0.4) + img + width: 100% + margin: 0 + + #menu + text-align: right + a + font-weight: 600 + font-size: 1rem + padding: 1rem + + a:hover + text-decoration: none + + + #footer + background: black!important + padding: 1rem + position: relative + bottom: 0 + width: 100% + + #footer-menu + text-align: right + a + font-weight: 400 + padding: 0.5rem + + a:hover + text-decoration: none + + + .mlh-section + padding: 1rem + + h3 + font-size: calc(1rem + 1.5vw) + + + #registration-form + background: white + + span + color: black!important + + input + color: black!important + border: 2px solid black + + select + color: black!important + border: 2px solid black + + .button + background-color: black + padding: 1rem 1.5rem + font-weight: 900 + color: #f2aa4cff + text-align: center + vertical-align: middle + border: none + + + #schedule + background: white + color: black + + hr + background-color: #eeeeee \ No newline at end of file diff --git a/src/pages/mlh/build.js b/src/pages/mlh/build.js new file mode 100644 index 0000000..5558c49 --- /dev/null +++ b/src/pages/mlh/build.js @@ -0,0 +1,6 @@ +import React from "react" +import MLHBuild from "../../events/mlh-build-day" + +export default () => ( + +) \ No newline at end of file