Skip to content

Commit

Permalink
schedule
Browse files Browse the repository at this point in the history
  • Loading branch information
@nkurelli
nkurelli committed Jan 27, 2024
1 parent dcf7ff9 commit 05d8a6a
Show file tree
Hide file tree
Showing 5 changed files with 281 additions and 21 deletions.
Binary file modified public/.DS_Store
View file
Binary file not shown.
Binary file modified src/.DS_Store
View file
Binary file not shown.
160 changes: 140 additions & 20 deletions src/components/EventDetails.js
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,148 @@
import "../styles/Register.css";
import "../styles/Schedule.css";
import ReactDOMServer from "react-dom/server";
import rover from "../rover.png";
const fridaySchedule = () => {
return (
<div>
<div class="schedule-event main-event2">
<div class="col">
<p>5:00 - 6:00 PM</p>
</div>
<div class="col">
<p>Check-in</p>
<p class="details">Rashid Auditorium</p>
<p class="details">Check in with organizers and find team members</p>
</div>
</div>
<div class="schedule-event main-event2">
<div class="col">
<p>6:00 - 6:30 PM</p>
</div>
<div class="col">
<p>Opening Ceremony</p>
<p class="details">Rashid Auditorium</p>
<p class="details">Join us for the opening ceremony of AWAP 2024!</p>
</div>
</div>
<div class="schedule-event foods">
<div class="col">
<p>7:00 - 8:00 PM</p>
</div>
<div class="col">
<p>Dinner</p>
<p class="details">Reddy Conference Room</p>
<p class="details">Enjoy some delicious food to kickstart your coding!</p>
</div>
</div>
<div class="schedule-event foods">
<div class="col">
<p>12:00 - 1:00 AM</p>
</div>
<div class="col">
<p>Midnight Snack</p>
<p class="details">Gates 3 Atrium</p>
<p class="details">Insomnia Cookies</p>
</div>
</div>
</div>
);
};

const saturdaySchedule = () => {
return (
<div>
<div class="schedule-event foods">
<div class="col">
<p>8:00 - 10:00 AM</p>
</div>
<div class="col">
<p>Breakfast</p>
<p class="details">Reddy Conference Room</p>
<p class="details">Get breakfast after a long night of coding!</p>
</div>
</div>
<div class="schedule-event foods">
<div class="col">
<p>12:00 - 1:00 PM</p>
</div>
<div class="col">
<p class="details">Reddy Conference Room</p>
<p>Lunch</p>
<p class="details">Stop by for some fuel before your last few submissions!</p>
</div>
</div>
<div class="schedule-event main-event2">
<div class="col">
<p>2:00 PM</p>
</div>
<div class="col">
<p>Coding Stops</p>
</div>
</div>
<div class="schedule-event main-event2">
<div class="col">
<p>5:00 PM</p>
</div>
<div class="col">
<p>Closing Ceremony</p>
<p class="details">Rashid Auditorium</p>
<p class="details">See how your bot plays against other players!</p>
</div>
</div>
</div>
);
};

function showFriday() {
document.getElementById("friday").style.border = "3px solid white";
document.getElementById("saturday").style.border = "0px solid white";
document.getElementById("schedule").innerHTML =
ReactDOMServer.renderToStaticMarkup(fridaySchedule());
}

function showSaturday() {
document.getElementById("friday").style.border = "0px solid white";
document.getElementById("saturday").style.border = "3px solid white";
document.getElementById("schedule").innerHTML =
ReactDOMServer.renderToStaticMarkup(saturdaySchedule());
}

const EventDetails = () => {
return (
<div className="register">
<div className="register-content">
<div className="section-header">Event Details</div>
<p className="register-update">
{/* We're still finalizing the details for AWAP 2024; stay tuned for
updates! */}
</p>
<div className="register-box">
<p className="register-description">
Start: January 27, 5 PM @ Rashid Auditorium<br></br>
End: January 28, 5 PM @ Rashid Auditorium<br></br>
</p>
<iframe src="https://discord.com/widget?id=1099870874594705539&theme=dark" width="300" height="400" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
</div>
<section>
<div className="line">
<hr />
<div className="schedule-page">
<div className="schedule-content">
<div className="schedule-header"></div>
<div className="section-header">Schedule</div>
<div class="legend">
<div class="legend-event">
<div class="legend-box foods"></div>
<p class="legend-label">Food</p>
</div>
<img className="rover" src={rover} alt="" />
</section>
<div class="legend-event">
<div class="legend-box main-event2"></div>
<p class="legend-label">Main Event</p>
</div>
<div class="legend-event">
<div class="legend-box workshop"></div>
<p class="legend-label">Workshop</p>
</div>
</div>
<div class="schedule-days">
<button class="year-button" id="friday" onClick={showFriday}>
<span class="schedule-header-word">FRIDAY 9/15</span>
</button>
<button
class="year-button"
id="saturday"
onClick={showSaturday}
>
<span class="schedule-header-word">SATURDAY 9/16</span>
</button>
</div>
<div class="schedule" id="schedule">
{fridaySchedule()}
</div>
<div className="container-after"></div>
</div>
</div>
);
Expand Down
3 changes: 2 additions & 1 deletion src/styles/About.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,9 @@
}

.about .about-content p {
color: var(--background-color);
color: rgb(171, 94, 78);
line-height: 200%;
font-weight: bold;
}

.about-description {
Expand Down
139 changes: 139 additions & 0 deletions src/styles/Schedule.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
.schedule-page {
color: white;
margin-bottom: 60px;
}
.schedule-page * {
overflow-x: visible !important;
position: relative;
z-index: 3;
}
.schedule-page .schedule-content {
height: 100%;
color: white;
}
.schedule-page .schedule-header {
height: 5vh;
}
.schedule-page .schedule-title {
font-family: 'Rubik', sans-serif;
/* font-family: "Roboto Mono", monospace; */
font-weight: 600;
font-size: 5em;
color: whitesmoke;
padding-bottom: 15px;
}
.year-button {
padding: 15px 18px;
border-radius: 10px;
/* font-family: var(--font-3); */
font-size: 100%;
font-weight: 600;
background: var(--secondary-color);
cursor: pointer;
color: white;
text-align: center;
margin: 15px;
border: none;
}

.legend {
display: flex;
flex-direction: row;
max-width: 600px;
justify-content: space-evenly;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.legend-event {
display: flex;
flex-direction: row;
align-items: center;
width: auto;
margin-top: 10px;
margin-left: 4px;
}
.legend-box {
width: 2rem;
height: 2rem;
border-radius: 8px;
}
.legend-label {
font-weight: 700;
font-size: 1.2rem;
margin-left: 10px;
}

.main-event2 {
background-color: #3f5577;
}
.workshop {
background-color: #0e0c51;
}
.foods {
background-color: #0d2a4c;
}

.schedule-day-button {
padding: 15px;
border-radius: 10px;
font-size: 1.75rem;
font-weight: 900;
background: #ca6b12;
cursor: pointer;
color: white;
border: 0px solid white;
text-align: center;
margin: 20px;
}
#friday {
border: 3px solid white;
}

.schedule {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin: 10px;
}
.schedule-event {
border-radius: 15px;
margin: 10px;
padding: 10px;
font-weight: 700;
min-height: 60px;
width: 700px;
display: flex;
align-items: center;
}
.schedule-event .col p {
margin: 0px 8px;
}
.schedule-event .details {
color: blanchedalmond;
}
.schedule-event .col {
flex-basis: 40%;
}
.schedule-event .col:last-child {
flex-basis: 60%;
border-left: 3px solid white;
}

@media only screen and (max-width: 460px) {
.schedule-page .schedule-title {
font-size: 4.5em;
}
.legend {
margin: auto !important;
}
.legend-event p {
font-size: 1em;
}
.schedule-event {
width: 70vw;
display: flex;
align-items: center;
}
}

0 comments on commit 05d8a6a

Please sign in to comment.