diff --git a/src/App.vue b/src/App.vue index 40963549..04c0a55f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -58,7 +58,7 @@ body { background-color: $bg-color; background-image: url('@/assets/img/stars.jpeg'); background-position: center / 640px; - background-repeat: repeat; + background-repeat: no-repeat; cursor: url('assets/img/rocket.png'), auto; font-family: Montserrat, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif; diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index 965f64a0..3809b9ee 100644 --- a/src/components/AppHeader.vue +++ b/src/components/AppHeader.vue @@ -59,6 +59,9 @@ const isActive = (page: string): boolean => {

Live

+
+ Full screen +
@@ -80,8 +83,8 @@ const isActive = (page: string): boolean => { Home -
  • - + { border-radius: 100%; } } + +@media (max-width: 720px) { + .countdown { + &--fullscreen { + top: 40px; + left: 59vw; + width: 33.333vw; + height: 33.333vw; + } + + &--fullscreen &__time { + font-size: 6vw; + } + } + + .countdown__bg { + top: auto; + right: auto; + bottom: auto; + left: auto; + } +} diff --git a/src/views/Live.vue b/src/components/LiveView.vue similarity index 74% rename from src/views/Live.vue rename to src/components/LiveView.vue index 43491364..d678a69b 100644 --- a/src/views/Live.vue +++ b/src/components/LiveView.vue @@ -82,13 +82,18 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => { eventIndex < day.events.length ) { const event = day.events[eventIndex] + let haveEnd = true + if (event.start === event.end) { + haveEnd = false + } + hourEvents.push({ type: 'event', id: event.id, startTmsp: i, endTmsp, startHour: formatDate('time', event.start), - endHour: formatDate('time', event.end), + endHour: haveEnd ? formatDate('time', event.end) : '', title: event.title, isSubscribed: notificationsStore.subscriptions.includes(event.id), }) @@ -116,51 +121,53 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => { @@ -175,7 +182,7 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => { } .event { - margin: 5px 0; + margin: 16px 0; cursor: url('../assets/img/rocket-fire.png'), auto; user-select: none; @@ -185,6 +192,7 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => { height: 2.5rem; margin-top: -0.25em; margin-right: 0.5em; + color: $secondary-color; } &__subscribed-icon { @@ -200,6 +208,7 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => { margin-right: 10px; font-size: 15px; font-weight: bold; + gap: 8px; text-align: right; &__end-hour { @@ -230,18 +239,6 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => { -webkit-overflow-scrolling: touch; text-align: left; - &::before { - position: fixed; - z-index: 10; - top: 39px; - right: 0; - left: 0; - height: 100px; - background-image: linear-gradient($bg-color, transparent); - content: ''; - pointer-events: none; - } - ul { min-height: 200px; max-height: 100%; @@ -249,13 +246,10 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => { padding-top: 25px; padding-right: 25px; padding-left: 25px; - margin-top: 175px; margin-right: 75px; margin-left: 75px; - background-color: #ffffff75; border-radius: 25px; list-style: none; - overflow-y: none; } li { @@ -272,6 +266,8 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => { > div { display: flex; + align-items: center; + gap: 16px; } } @@ -293,7 +289,7 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => { width: 100%; height: 100%; max-height: 100%; - margin-left: 40%; + margin-left: 48%; } li { diff --git a/src/components/PanelContainer.vue b/src/components/PanelContainer.vue index ab3ce055..93f29f71 100644 --- a/src/components/PanelContainer.vue +++ b/src/components/PanelContainer.vue @@ -17,11 +17,11 @@ defineProps() max-width: 1300px; flex-wrap: wrap; justify-content: center; - padding: 150px 16px 50px; + padding: 140px 60px 50px; margin: 0 auto; @media (max-width: 720px) { - padding-top: 60px; + padding: 80px 20px 40px; } .no-margin { diff --git a/src/components/ScheduleView.vue b/src/components/ScheduleView.vue new file mode 100644 index 00000000..07dd27a7 --- /dev/null +++ b/src/components/ScheduleView.vue @@ -0,0 +1,223 @@ + + + + + diff --git a/src/config.ts b/src/config.ts index 637c82f0..ebff96dc 100644 --- a/src/config.ts +++ b/src/config.ts @@ -8,7 +8,7 @@ interface Config { } const config: Config = { - // fakeStartTime: '29/4/2022 21:59:55', + //fakeStartTime: '29/4/2022 21:59:55', disabled: false, hideChallengesAndPrizes: true, hideMission: true, diff --git a/src/data/schedule.ts b/src/data/schedule.ts index 2fe7a6b0..d17ceef9 100644 --- a/src/data/schedule.ts +++ b/src/data/schedule.ts @@ -37,13 +37,228 @@ export const schedule: RawSchedule = { { id: 'checkin', physicalLocation: { - text: 'A5-A6 Underground corridor', - mapId: 'indoors', + text: 'Check-in zone (A5/A6)', + mapId: 'campus', }, - title: 'Hacker Registration', + title: '๐Ÿ“ Check in', start: '03/05/2024 16:00', end: '03/05/2024 18:45', - description: /* markdown */ ` Register to the hackathon and get your swag! Make sure to have ready your **ID and your QR ticket**`, + description: /* markdown */ ` Register to the hackathon and get your swag! Make sure to have ready your **ID and your QR ticket** to be fast!`, + }, + { + id: 'baggage-drop', + physicalLocation: { + text: 'InfoDesk', + mapId: 'indoors', + }, + title: '๐Ÿ›„ Baggage registration', + start: '03/05/2024 16:00', + description: /* markdown */ `Bring your luggage or the stuff you don't need to be with you and we will store them securely. You can pick them up at any time during the event.`, + }, + { + id: 'opening', + physicalLocation: { + text: 'Vertex', + mapId: 'campus', + }, + onlineLocation: { + text: 'YouTube', + url: 'https://www.youtube.com/c/HackersUPC', + icon: 'youtube', + }, + title: '๐Ÿ—ฃ๏ธ Opening ceremony', + start: '03/05/2024 19:00', + end: '03/05/2024 20:30', + description: /* markdown */ `Do you want to know everything what will happen during the weekend? Come to the Vertex, if there is no place in the Auditorium, we have an overflow room but you can also watch it online! Don't miss it!`, + }, + { + id: 'dinner1', + physicalLocation: { + text: 'Meals zone', + mapId: 'indoors', + }, + title: '๐Ÿฅช Dinner', + start: '03/05/2024 20:30', + end: '03/05/2024 22:30', + description: /* markdown */ `Are you hungry? We have prepared a delicious dinner for you!`, + }, + { + id: 'hacking-starts', + title: '๐Ÿš€ Hacking starts', + start: '03/05/2024 21:00', + description: /* markdown */ `The countdown starts now! You have 36 hours to develop whatever you want!`, + }, + { + id: 'team-building', + physicalLocation: { + text: 'A4002', + mapId: 'indoors', + }, + title: '๐Ÿซ‚ Team building', + start: '03/05/2024 21:30', + end: '03/05/2024 22:30', + description: /* markdown */ `Are you looking for a team or for teammates? Join us on the Team Building activity to find someone to work with`, + }, + { + id: 'midnight-snack1', + physicalLocation: { + text: 'Meals zone', + mapId: 'indoors', + }, + title: '๐Ÿง‡ Midnight snack', + start: '04/05/2024 01:30', + end: '04/05/2024 02:30', + description: /* markdown */ `Take a break and enjoy the power of the *waffles* at night time!!`, + }, + { + id: 'the-game', + title: '๐Ÿง‘๐Ÿฝโ€๐Ÿ’ป THE GAME', + start: '04/05/2024 03:14', + description: /* markdown */ `Enjoy, the game is easy!`, + }, + { + id: 'breakfast1', + physicalLocation: { + text: 'Meals zone', + mapId: 'indoors', + }, + title: '๐Ÿฅ Breakfast', + start: '04/05/2024 09:00', + end: '04/05/2024 10:30', + description: /* markdown */ `Rise and shine!! Breakfast is ready for you!`, + }, + { + id: 'shower1', + physicalLocation: { + text: 'Gym', + mapId: 'campus', + }, + title: '๐Ÿšฟ Shower time', + start: '04/05/2024 09:30', + end: '04/05/2024 11:30', + description: /* markdown */ `Hard night of coding? Take a shower and feel fresh and continue with a good work!`, + }, + { + id: 'lunch1', + physicalLocation: { + text: 'Meals zone', + mapId: 'indoors', + }, + title: '๐Ÿฅ˜ Lunch', + start: '04/05/2024 13:00', + end: '04/05/2024 14:30', + description: /* markdown */ `Recharge your batteries with a delicious lunch!`, + }, + { + id: 'shower2', + physicalLocation: { + text: 'Gym', + mapId: 'campus', + }, + title: '๐Ÿšฟ Shower time', + start: '04/05/2024 17:00', + end: '04/05/2024 19:00', + description: /* markdown */ `Hard day of coding? Take a shower and feel fresh and continue with a good work!`, + }, + { + id: 'dinner2', + physicalLocation: { + text: 'Gym', + mapId: 'campus', + }, + title: '๐Ÿ• Dinner', + start: '04/05/2024 20:00', + end: '04/05/2024 21:30', + description: /* markdown */ `Hard day? It's normal after 24 hours coding... you deserve a really good dinner!`, + }, + { + id: 'midnight-snack2', + physicalLocation: { + text: 'Meals zone', + mapId: 'indoors', + }, + title: '๐Ÿฅฃ Midnight snack', + start: '05/05/2024 00:30', + end: '04/05/2024 02:00', + description: /* markdown */ `Come one! Last night! Last sprint! Recharge your batteries with a energetic midnight snack!`, + }, + { + id: 'the-game-ends', + title: '๐Ÿง‘๐Ÿฝโ€๐Ÿ’ป THE GAME ENDS', + start: '05/05/2024 03:14', + description: /* markdown */ `ohh... The game just finished. But your skills leveled up!`, + }, + { + id: 'hacking-ends', + title: '๐Ÿ˜ฎโ€๐Ÿ’จ Hacking ends', + start: '05/05/2024 09:00', + description: /* markdown */ `Remember to submit a valid project, on time, on Devpost to be eligible for prizes ๐Ÿ† or travel reimbursement ๐Ÿ›ซ`, + }, + { + id: 'breakfast2', + physicalLocation: { + text: 'Meals zone', + mapId: 'indoors', + }, + title: '๐Ÿฅ Breakfast', + start: '05/05/2024 09:00', + end: '05/05/2024 10:30', + description: /* markdown */ `Rise and shine!! The last breakfast is ready for you before demoing your project!`, + }, + { + id: 'shower3', + physicalLocation: { + text: 'Gym', + mapId: 'campus', + }, + title: '๐Ÿšฟ Shower time', + start: '05/05/2024 09:00', + end: '05/05/2024 11:00', + description: /* markdown */ `Coding time it's over! Take a shower and feel fresh to do a great demo!`, + }, + { + id: 'demo-fair', + physicalLocation: { + text: 'A3 & A4 buildings', + mapId: 'judging', + }, + title: '๐Ÿง‘๐Ÿฝโ€โš–๏ธ Demo time', + start: '05/05/2024 10:15', + end: '05/05/2024 13:15', + description: /* markdown */ `Show our judges what you have been working on! Follow the instructions on slack to know where to go!`, + }, + { + id: 'lunch2', + physicalLocation: { + text: 'Meals zone', + mapId: 'indoors', + }, + title: '๐Ÿ” Lunch', + start: '05/05/2024 13:45', + end: '05/05/2024 14:45', + description: /* markdown */ `All is done!! Enjoy the last lunch of the event before going to the closing ceremony!`, + }, + { + id: 'closing', + physicalLocation: { + text: 'Vertex', + mapId: 'campus', + }, + onlineLocation: { + text: 'YouTube', + url: 'https://www.youtube.com/c/HackersUPC', + icon: 'youtube', + }, + title: '๐Ÿ—ฃ๏ธ Closing ceremony', + start: '05/05/2024 15:30', + end: '05/05/2024 17:30', + description: /* markdown */ `Want to know how the event went? Just join us on YouTube & Vรจrtex auditorium for the closing ceremony, where weโ€™ll wrap up HackUPC 2023 and the winners will be announced! ๐Ÿฅ‡๐Ÿฅˆ๐Ÿฅ‰`, + }, + { + id: 'goodbye', + title: '๐Ÿ‘‹๐Ÿผ See you soon!', + start: '05/05/2024 17:30', + description: /* markdown */ `Hope you had a great time at HackUPC! We hope to see you soon in future editions! ๐Ÿš€`, }, ], } diff --git a/src/router/index.ts b/src/router/index.ts index e427b529..85e03441 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -39,7 +39,7 @@ const routes: RouteRecordRaw[] = [ { path: '/live', name: 'live', - component: () => import('@/views/Live.vue'), + component: () => import('@/components/LiveView.vue'), }, { path: '/fullscreen', diff --git a/src/services/dates/index.ts b/src/services/dates/index.ts index e96e6234..2094d660 100644 --- a/src/services/dates/index.ts +++ b/src/services/dates/index.ts @@ -38,8 +38,6 @@ export type DateFormatsTypes = { } export function formatDate(format: DateFormat, date: Dayjs): string { - console.log(format, date, dateFormats[format]) - console.log(date.local().format(dateFormats[format])) return date.local().format(dateFormats[format]) } diff --git a/src/variables.scss b/src/variables.scss index 286cad47..ed5877a4 100644 --- a/src/variables.scss +++ b/src/variables.scss @@ -7,6 +7,9 @@ $text-color-dark: #232F34; $contrast-color: #232F34; $text-soft-color: #686868; $primary-color: #7F27A2; +$primary-color-light: #E3C3FF; +$links-color: #FF8886; +$links-color-hover: #FC5C5A; $secondary-color: #E23532; $secondary-light-color-intensity: 100; $secondary-light-color: color.adjust($secondary-color, $red: $secondary-light-color-intensity, $green: $secondary-light-color-intensity, $blue: $secondary-light-color-intensity); diff --git a/src/views/FullScreen.vue b/src/views/FullScreen.vue index 0c2fb996..30cb9a9d 100644 --- a/src/views/FullScreen.vue +++ b/src/views/FullScreen.vue @@ -1,6 +1,6 @@