diff --git a/components/HeroBanner.js b/components/HeroBanner.js index af3084c..aa8a26a 100644 --- a/components/HeroBanner.js +++ b/components/HeroBanner.js @@ -15,7 +15,7 @@ const HeroBanner = () => {
- +
diff --git a/components/coc.js b/components/coc.js index fe7a31a..c8604d2 100644 --- a/components/coc.js +++ b/components/coc.js @@ -3,7 +3,14 @@ import ReactMarkdown from "react-markdown"; export default function CoC({ markdownContent }) { return ( <> -

Code of Conduct

+

+ Code of Conduct +

{markdownContent} ); diff --git a/components/faqs.js b/components/faqs.js index 43d2c6f..c6f6f8f 100644 --- a/components/faqs.js +++ b/components/faqs.js @@ -1,12 +1,17 @@ import ReactMarkdown from "react-markdown"; -export default function Faqs({markdownContent}) { +export default function Faqs({ markdownContent }) { return ( <> -

Frequently Asked Questions

- - {markdownContent} - +

+ Frequently Asked Questions +

+ {markdownContent} ); } diff --git a/components/header.js b/components/header.js index 61e79e9..34fd94a 100644 --- a/components/header.js +++ b/components/header.js @@ -64,8 +64,8 @@ const navBarItems = [ name: "Python Express", href: "https://pythonexpress.org/", openInNewTab: true, - } -] + }, +]; export default function Header() { const [activeNavBarItem, setActiveNavBarItem] = useState(); @@ -79,7 +79,9 @@ export default function Header() { const sectionElement = document.getElementById(item.id); if (sectionElement) { const rect = sectionElement.getBoundingClientRect(); - const isVisible = (rect.top - elementOffsetTop <= 0) && (rect.bottom - elementOffsetTop > 0); + const isVisible = + rect.top - elementOffsetTop <= 0 && + rect.bottom - elementOffsetTop > 0; if (isVisible) { setActiveNavBarItem(i); // Stop checking once we find the visible element @@ -91,17 +93,16 @@ export default function Header() { useEffect(() => { handleScroll(); - window.addEventListener('scroll', handleScroll); + window.addEventListener("scroll", handleScroll); return () => { - window.removeEventListener('scroll', handleScroll); + window.removeEventListener("scroll", handleScroll); }; }, [navBarScrollTrigger]); - const navBarClickHandler = () => { - setNavBarToggle((prv) => (!prv)); - setNavBarScrollTrigger((prv) => (!prv)); - } + setNavBarToggle((prv) => !prv); + setNavBarScrollTrigger((prv) => !prv); + }; return (
@@ -131,10 +132,16 @@ export default function Header() { aria-label="Toggle navigation" onClick={navBarClickHandler} > - + {/* schema */} ( - { - position: index+1, - name: item.name, - item: item.openInNewTab ? item.href : `https://in.pycon.org${item.href}`, - } - )) - } + itemListElements={navBarItems.map((item, index) => ({ + position: index + 1, + name: item.name, + item: item.openInNewTab + ? item.href + : `https://in.pycon.org${item.href}`, + }))} />
); diff --git a/components/quiz.js b/components/quiz.js new file mode 100644 index 0000000..25388b7 --- /dev/null +++ b/components/quiz.js @@ -0,0 +1,90 @@ +import React, { useState, useEffect } from "react"; +import Button from 'react-bootstrap/Button'; +import Modal from 'react-bootstrap/Modal'; + +const Quiz = () => { + const [answer, setAnswer] = useState(""); + const [questions, setQuestions] = useState([]); + const [answersQ, setAnswersQ] = useState([]); + const [currentQuestion, setCurrentQuestion] = useState(0); + const [openModal, setOpenModal] = useState(false); + const discountCode = "PYCON2023"; + + useEffect(() => { + setQuestions([ + "Password", + "What is the name of the conference? \nA. pycon2023 \n B. pycon2022 \n C. pycon2021 \n D. pycon2020", + ]); + + setAnswersQ([ + "PYCON2023", + 'A', + ]); + }, []); + + useEffect(() => { + if (answer.toUpperCase() === answersQ[currentQuestion]) { + setAnswer(""); + setCurrentQuestion(currentQuestion + 1); + if (currentQuestion === questions.length - 1) { + setOpenModal(true); + } + } + }, [answer]); + + const handleAnswerChange = (event) => { + setAnswer(event.target.value); + }; + + const handleClose = () => {setOpenModal(false); window.location.href = "/2023";} + const copyToClipboard = async () => { + if ('clipboard' in navigator) { + return await navigator.clipboard.writeText(discountCode); + } else { + return document.execCommand('copy', true, discountCode); + } + } + + return ( + <> +
+
+ {currentQuestion !== 0 && ( +

+ Answer These Questions for a Special Prize! +

+ )} +
+ + +
+ + + + Congratulations! + + Woohoo, you completed the quiz! Here is a pycon ticket discount code just for you!
{discountCode} + + + + + +
+
+ + ); +}; + +export default Quiz; diff --git a/components/travel.js b/components/travel.js new file mode 100644 index 0000000..1ec1959 --- /dev/null +++ b/components/travel.js @@ -0,0 +1,17 @@ +import ReactMarkdown from "react-markdown"; + +export default function Travel({ markdownContent }) { + return ( + <> +

+ Getting to PyCon India 2023 +

+ {markdownContent} + + ); +} diff --git a/data/travel.md b/data/travel.md new file mode 100644 index 0000000..4563e3d --- /dev/null +++ b/data/travel.md @@ -0,0 +1,38 @@ +# Travel Information for PyCon India 2023 in Hyderabad + +Welcome to PyCon India 2023 in Hyderabad! Below you'll find detailed travel information on how to reach the conference venue. + +## Getting to Hyderabad + +### By Plane - Rajiv Gandhi International Airport + +If you're arriving by air, the Rajiv Gandhi International Airport serves as your gateway to Hyderabad. Various Indian airlines operate flights to this airport, including Air India, Air India Express, Indian Airlines, Indigo Airlines, Trujet, and SpiceJet. + +### By Train - Secunderabad or Hyderabad + +For those opting for train travel, Indian Railways offer services to Hyderabad from different parts of India. Major railway stations include Secunderabad, Hyderabad, Kachiguda, and Begumpet. Hyderabad Deccan Station, also known as Nampally Station, is a significant hub for trains to South and North India via Secunderabad. + +### By Car + +Hyderabad is well-connected to other major cities by road. Routes like the Bangalore-Hyderabad corridor have been upgraded to four-lane divided highways, providing a convenient option for road travelers. + +### By Bus + +Hyderabad's extensive bus network, including state government and private buses, connects the city to various parts of Telangana, South India, and Western India. Major bus stations include JBS (Jubilee Bus Station) in Secunderabad and MGBS (Imliban), which holds the distinction of being one of the largest bus stations in the world. + +For more comprehensive travel information and options, please refer to the [Hyderabad Wiki Page](https://wikitravel.org/en/Hyderabad#Get_in). + +## Getting to the Conference Venue - JNTU-H, Kukatpally + +The conference will be held at JNTU-H, Kukatpally. Here are the different ways to reach the venue: + +### Via Hyderabad Metro + +JNTU-H, Kukatpally is best accessible via the Hyderabad Metro Red line. You can get down at either the "KPHB Colony" or "JNTU College" stop and then walk towards JNTU-H, Kukatpally. + +- **From the Blue Line:** If you're arriving via the Blue line, you can easily switch to the Red line (towards Miyapur) at Ameerpet station. +- **From the Green Line:** If you're coming via the Green line, you can switch to the Red line (towards M.G. Bus Station) at the M.G. Bus Station stop. + +For a list of stations on the Hyderabad Metro Red line, you can refer to [Wikipedia](https://en.wikipedia.org/wiki/Red_Line_(Hyderabad_Metro)). + +We're excited to welcome you to PyCon India 2023 and hope you have a fantastic experience in Hyderabad! If you have any further inquiries or need assistance, feel free to contact us at [contact@in.pycon.org](mailto:contact@in.pycon.org). diff --git a/pages/suprise.tsx b/pages/suprise.tsx new file mode 100644 index 0000000..22e3232 --- /dev/null +++ b/pages/suprise.tsx @@ -0,0 +1,9 @@ +import Quiz from "../components/quiz"; + +type componentProps = { + isMobile: boolean; +}; + +export default function CyberQuiz() { + return ; +} diff --git a/pages/travel.tsx b/pages/travel.tsx new file mode 100644 index 0000000..273a1bc --- /dev/null +++ b/pages/travel.tsx @@ -0,0 +1,31 @@ +import fs from "fs"; +import path from "path"; +import Travel from "../components/travel"; +import MiscLayout from "../components/miscLayout"; + +interface TravelPageProps { + markdownContent: string; +} + +export default function TravelPage({ markdownContent }: TravelPageProps) { + return ( + + + + ); +} + +export async function getStaticProps() { + const filePath = path.join(process.cwd(), "data", "travel.md"); + let markdownContent = fs.readFileSync(filePath, "utf8"); + + markdownContent = markdownContent.replace(/^---[\s\S]*?---/g, ""); + + return { + props: { + markdownContent, + }, + }; +} + + diff --git a/public/images/logos/python-256.png b/public/images/logos/python-256.png new file mode 100644 index 0000000..186b0b5 Binary files /dev/null and b/public/images/logos/python-256.png differ diff --git a/styles/css/style.css b/styles/css/style.css index cf0a992..c36400c 100644 --- a/styles/css/style.css +++ b/styles/css/style.css @@ -239,8 +239,89 @@ button a { cursor: pointer; position: relative; } + +/* Cyper Page CSS */ +.cyber-container { + background-color: black; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.cyber-card { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; + border-radius: 10px; +} + +.cyber-form-group { + width: 100%; + margin-bottom: 10px; + display: flex; + align-items: center; /* Align items on the same line */ + flex-direction: column; +} + +.cyber-label { + color: #20C20E; + font-size: 24px; + margin: 2rem; +} + +.cyber-heading { + position: fixed; + top: 0; + left: 0; + right: 0; + text-align: center; + color: #20C20E; + font-size: 2rem; + margin: 0; + padding: 1rem; + background-color: black; +} + + +.cyber-label2 { + color: #20C20E; + font-size: 24px; + margin-right: 10px; +} + +.cyber-form-control { + flex: 1; /* Expand input to take remaining space */ + border: 2px solid #20C20E; + background-color: black; + color: white; + padding: 10px; + border-radius: 5px; + outline: none; +} + +.cyber-btn-primary { + background-color: #20C20E; + border: none; + padding: 10px 20px; + border-radius: 5px; + color: white; + cursor: pointer; + outline: none; +} + +@media (max-width: 768px) { + .cyber-form-group { + flex-direction: column; /* Change to column layout for mobile */ + } + .cyber-label { + margin: 0.2rem; + margin-bottom: 1rem; + } +} -.green-btn { + .green-btn { color: white; background-color: #1f928d; }