From f0f8002c0cf0530ab3294c4c94949234d71f1a84 Mon Sep 17 00:00:00 2001
From: carlotacb <carkbra@gmail.com>
Date: Sat, 6 Apr 2024 23:05:41 +0200
Subject: [PATCH 1/9] schedule is now with a toggle button and also created the
 temporal schedule

---
 .../Live.vue => components/LiveView.vue}      | 106 +++----
 src/components/PanelContainer.vue             |   2 +-
 src/components/ScheduleView.vue               | 222 ++++++++++++++
 src/config.ts                                 |   2 +-
 src/data/schedule.ts                          | 223 +++++++++++++-
 src/router/index.ts                           |   2 +-
 src/variables.scss                            |   3 +
 src/views/FullScreen.vue                      |   2 +-
 src/views/Home.vue                            |   1 -
 src/views/Schedule.vue                        | 285 ++++++------------
 10 files changed, 579 insertions(+), 269 deletions(-)
 rename src/{views/Live.vue => components/LiveView.vue} (75%)
 create mode 100644 src/components/ScheduleView.vue

diff --git a/src/views/Live.vue b/src/components/LiveView.vue
similarity index 75%
rename from src/views/Live.vue
rename to src/components/LiveView.vue
index 43491364..a62ad04d 100644
--- a/src/views/Live.vue
+++ b/src/components/LiveView.vue
@@ -116,51 +116,53 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => {
 </script>
 
 <template>
-  <div id="live" class="container-live">
-    <div
-      class="events-fancy"
-      :class="{ 'events-fancy--fullscreen': fullscreen }"
-    >
-      <ul>
-        <template v-for="event in events">
-          <li
-            v-if="event.type === 'title'"
-            :key="`${event.title}-${event.startTmsp}`"
-          >
-            <h1>{{ event.title }}</h1>
-          </li>
-          <li
-            v-else-if="event.type === 'item'"
-            :key="`${event.startTmsp}`"
-            :class="{ happening: event.isHappening }"
-          >
-            <ArrowNarrowRightIcon
-              v-if="event.isHappening"
-              class="event__arrow"
-            />
-            <div
-              v-for="hourEvent in event.hourEvents"
-              :key="hourEvent.id"
-              class="event"
-              :class="{ subscribed: hourEvent.isSubscribed }"
-              :data-event-id="hourEvent.id"
-              @click="notificationsStore.toggleSubscription(hourEvent.id)"
+  <div>
+    <div class="container-live">
+      <div
+        class="events-fancy"
+        :class="{ 'events-fancy--fullscreen': fullscreen }"
+      >
+        <ul>
+          <template v-for="event in events">
+            <li
+              v-if="event.type === 'title'"
+              :key="`${event.title}-${event.startTmsp}`"
             >
-              <div class="event__hour">
-                <div>{{ hourEvent.startHour }}</div>
-                <div class="event__end-hour">{{ hourEvent.endHour }}</div>
-              </div>
-              <div class="title">
-                {{ hourEvent.title }}
-                <VolumeOffIcon
-                  v-if="!hourEvent.isSubscribed"
-                  class="event__subscribed-icon"
-                />
+              <h1>{{ event.title }}</h1>
+            </li>
+            <li
+              v-else-if="event.type === 'item'"
+              :key="`${event.startTmsp}`"
+              :class="{ happening: event.isHappening }"
+            >
+              <ArrowNarrowRightIcon
+                v-if="event.isHappening"
+                class="event__arrow"
+              />
+              <div
+                v-for="hourEvent in event.hourEvents"
+                :key="hourEvent.id"
+                class="event"
+                :class="{ subscribed: hourEvent.isSubscribed }"
+                :data-event-id="hourEvent.id"
+                @click="notificationsStore.toggleSubscription(hourEvent.id)"
+              >
+                <div class="event__hour">
+                  <div>{{ hourEvent.startHour }}</div>
+                  <div class="event__end-hour">{{ hourEvent.endHour }}</div>
+                </div>
+                <div class="title">
+                  {{ hourEvent.title }}
+                  <VolumeOffIcon
+                    v-if="!hourEvent.isSubscribed"
+                    class="event__subscribed-icon"
+                  />
+                </div>
               </div>
-            </div>
-          </li>
-        </template>
-      </ul>
+            </li>
+          </template>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
@@ -185,6 +187,7 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => {
     height: 2.5rem;
     margin-top: -0.25em;
     margin-right: 0.5em;
+    color: $secondary-color;
   }
 
   &__subscribed-icon {
@@ -230,18 +233,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 +240,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 {
@@ -293,7 +281,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..d04e7c78 100644
--- a/src/components/PanelContainer.vue
+++ b/src/components/PanelContainer.vue
@@ -17,7 +17,7 @@ defineProps<Props>()
   max-width: 1300px;
   flex-wrap: wrap;
   justify-content: center;
-  padding: 150px 16px 50px;
+  padding: 140px 60px 50px;
   margin: 0 auto;
 
   @media (max-width: 720px) {
diff --git a/src/components/ScheduleView.vue b/src/components/ScheduleView.vue
new file mode 100644
index 00000000..d5b31345
--- /dev/null
+++ b/src/components/ScheduleView.vue
@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import { useScheduleStore } from '@/stores/schedule'
+import { useTimeStore } from '@/stores/time'
+import { computed } from 'vue'
+import { formatDate } from '@/services/dates'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { LinkIcon, LocationMarkerIcon } from '@heroicons/vue/solid'
+import { RouterLink } from 'vue-router'
+import VueMarkdownIt from 'vue3-markdown-it'
+
+const scheduleStore = useScheduleStore()
+const timeStore = useTimeStore()
+
+const hasHackathonFinished = computed<boolean>(
+  () => scheduleStore.schedule.days.at(-1)?.end.isBefore(timeStore.now) ?? true
+)
+</script>
+
+<template>
+  <div>
+    <div
+      v-for="day in scheduleStore.schedule.days"
+      :key="day.start.unix()"
+      class="table-container"
+    >
+      <h1>
+        {{
+          formatDate('weekday', day.start) + ' ' + formatDate('date', day.start)
+        }}
+      </h1>
+      <div class="table-scroll">
+        <table>
+          <thead>
+            <tr>
+              <th>Location</th>
+              <th>Start</th>
+              <th>End</th>
+              <th>Title</th>
+              <th class="hide-when-small">Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="event in day.events"
+              :key="event.id"
+              :class="{
+                happened:
+                  !hasHackathonFinished && event.end.isBefore(timeStore.now),
+              }"
+            >
+              <td>
+                <RouterLink
+                  v-if="event.physicalLocation"
+                  class="link"
+                  :to="{
+                    name: 'map',
+                    params: { mapId: event.physicalLocation.mapId },
+                  }"
+                >
+                  <LocationMarkerIcon class="link__icon" />
+                  <span class="link__text">
+                    {{ event.physicalLocation.text }}
+                  </span>
+                </RouterLink>
+                <a
+                  v-if="event.onlineLocation"
+                  :href="event.onlineLocation.url"
+                  rel="noopener noreferrer"
+                  class="link"
+                >
+                  <FontAwesomeIcon
+                    v-if="event.onlineLocation.icon === 'slack'"
+                    class="link__icon"
+                    :icon="['fab', 'slack']"
+                  />
+                  <FontAwesomeIcon
+                    v-else-if="event.onlineLocation.icon === 'twitch'"
+                    class="link__icon"
+                    :icon="['fab', 'twitch']"
+                  />
+                  <FontAwesomeIcon
+                    v-else-if="event.onlineLocation.icon === 'youtube'"
+                    class="link__icon"
+                    :icon="['fab', 'youtube']"
+                  />
+                  <LinkIcon v-else class="link__icon" />
+                  <span class="link__text">
+                    {{ event.onlineLocation.text }}
+                  </span>
+                </a>
+              </td>
+              <td>{{ formatDate('time', event.start) }}</td>
+              <td>
+                <template v-if="event.start !== event.end">{{
+                  formatDate('time', event.end)
+                }}</template>
+              </td>
+              <td class="when-small">{{ event.title }}</td>
+              <td class="hide-when-small">
+                <VueMarkdownIt :source="event.description" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use 'sass:color';
+@use '@/variables' as *;
+.table-container {
+  flex: 1 1 0;
+  margin-top: 30px;
+  margin-bottom: 30px;
+  border-radius: 0 0 $border-radius $border-radius;
+
+  h1 {
+    padding: 15px;
+    margin: 0;
+    background-color: $primary-color;
+    border-radius: $border-radius $border-radius 0 0;
+    color: #fff;
+    text-align: center;
+  }
+
+  .table-scroll {
+    overflow: auto;
+  }
+
+  table {
+    width: 100%;
+    background-color: $contrast-color;
+    border-collapse: collapse;
+    border-radius: 0 0 $border-radius $border-radius;
+    color: $text-color;
+  }
+
+  thead {
+    background-color: $primary-color;
+    color: $primary-color-light;
+  }
+
+  th {
+    padding: 10px 20px;
+    text-align: left;
+
+    &:first-child {
+      border-left: 0;
+    }
+
+    &:last-child {
+      border-right: 0;
+      text-align: left;
+    }
+  }
+
+  td {
+    padding: 10px 20px;
+    text-align: left;
+
+    &:last-child {
+      min-width: 200px;
+      border-right: 0;
+    }
+
+    &:first-child {
+      border-left: 0;
+    }
+  }
+
+  a {
+    color: $links-color;
+    transition: all 0.2s ease-in-out;
+
+    &:hover {
+      color: $links-color-hover;
+    }
+  }
+
+  tr:first-child th {
+    border-top: 0;
+  }
+
+  tr:last-child td {
+    border-bottom: 0;
+  }
+}
+
+.happened {
+  opacity: 0.5;
+}
+
+.when-small {
+  width: 20%;
+}
+
+@media (max-width: 720px) {
+  .when-small {
+    width: 60%;
+  }
+
+  .hide-when-small {
+    display: none !important;
+  }
+}
+
+.link {
+  display: block;
+
+  &:not(:last-child) {
+    margin-bottom: 0.75rem;
+  }
+
+  &__icon {
+    height: 20px;
+    margin-right: 0.25rem;
+    vertical-align: -4px;
+  }
+}
+</style>
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..527d3e9f 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 starts',
+      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: '03/05/2024 15:30',
+      end: '03/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/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..40c8513b 100644
--- a/src/views/FullScreen.vue
+++ b/src/views/FullScreen.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Countdown from '@/components/Countdown.vue'
-import Live from '@/views/Live.vue'
+import Live from '@/components/LiveView.vue'
 import { onBeforeUnmount, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index ab92fd2b..b149e3f2 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import IconLabel from '@/components/IconLabel.vue'
-import { DevpostIcon } from '@/components/icons'
 import Panel from '@/components/Panel.vue'
 import { formatDate } from '@/services/dates'
 import { useScheduleStore } from '@/stores/schedule'
diff --git a/src/views/Schedule.vue b/src/views/Schedule.vue
index 759138be..4dfaac08 100644
--- a/src/views/Schedule.vue
+++ b/src/views/Schedule.vue
@@ -1,112 +1,60 @@
 <script setup lang="ts">
 import PanelContainer from '@/components/PanelContainer.vue'
-import { formatDate } from '@/services/dates'
-import { useScheduleStore } from '@/stores/schedule'
-import { useTimeStore } from '@/stores/time'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { LinkIcon, LocationMarkerIcon } from '@heroicons/vue/solid'
 import { computed } from 'vue'
-import { RouterLink } from 'vue-router'
-import VueMarkdownIt from 'vue3-markdown-it'
-
-const scheduleStore = useScheduleStore()
-const timeStore = useTimeStore()
+import { RouterLink, useRoute } from 'vue-router'
+import ScheduleView from '@/components/ScheduleView.vue'
+import LiveView from '@/components/LiveView.vue'
+
+const route = useRoute()
+
+const currentSchedule = computed<'live' | 'basic'>(() => {
+  if (
+    route.params?.scheduleId !== 'live' &&
+    route.params?.scheduleId !== 'basic'
+  ) {
+    return 'basic'
+  }
 
-const hasHackathonFinished = computed<boolean>(
-  () => scheduleStore.schedule.days.at(-1)?.end.isBefore(timeStore.now) ?? true
-)
+  return route.params.scheduleId
+})
 </script>
 
 <template>
   <PanelContainer id="schedule" class="schedule">
-    <div>
-      <div
-        v-for="day in scheduleStore.schedule.days"
-        :key="day.start.unix()"
-        class="table-container"
-      >
-        <h1>
-          {{
-            formatDate('weekday', day.start) +
-            ' ' +
-            formatDate('date', day.start)
-          }}
-        </h1>
-        <div class="table-scroll">
-          <table>
-            <thead>
-              <tr>
-                <th>Location</th>
-                <th>Start</th>
-                <th>End</th>
-                <th>Title</th>
-                <th class="hide-when-small">Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="event in day.events"
-                :key="event.id"
-                :class="{
-                  happened:
-                    !hasHackathonFinished && event.end.isBefore(timeStore.now),
-                }"
-              >
-                <td>
-                  <RouterLink
-                    v-if="event.physicalLocation"
-                    class="link"
-                    :to="{
-                      name: 'map',
-                      params: { mapId: event.physicalLocation.mapId },
-                    }"
-                  >
-                    <LocationMarkerIcon class="link__icon" />
-                    <span class="link__text">
-                      {{ event.physicalLocation.text }}
-                    </span>
-                  </RouterLink>
-                  <a
-                    v-if="event.onlineLocation"
-                    :href="event.onlineLocation.url"
-                    rel="noopener noreferrer"
-                    class="link"
-                  >
-                    <FontAwesomeIcon
-                      v-if="event.onlineLocation.icon === 'slack'"
-                      class="link__icon"
-                      :icon="['fab', 'slack']"
-                    />
-                    <FontAwesomeIcon
-                      v-else-if="event.onlineLocation.icon === 'twitch'"
-                      class="link__icon"
-                      :icon="['fab', 'twitch']"
-                    />
-                    <FontAwesomeIcon
-                      v-else-if="event.onlineLocation.icon === 'youtube'"
-                      class="link__icon"
-                      :icon="['fab', 'youtube']"
-                    />
-                    <LinkIcon v-else class="link__icon" />
-                    <span class="link__text">
-                      {{ event.onlineLocation.text }}
-                    </span>
-                  </a>
-                </td>
-                <td>{{ formatDate('time', event.start) }}</td>
-                <td>
-                  <template v-if="event.start !== event.end">{{
-                    formatDate('time', event.end)
-                  }}</template>
-                </td>
-                <td class="when-small">{{ event.title }}</td>
-                <td class="hide-when-small">
-                  <VueMarkdownIt :source="event.description" />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+    <div class="explore">
+      <p class="explore__title">Select your favourite view</p>
+      <div class="explore__list">
+        <RouterLink
+          :to="{
+            name: 'schedule',
+            params: { scheduleId: 'basic' },
+          }"
+          class="button"
+          :class="{ 'button--disabled': currentSchedule === 'basic' }"
+          >Basic view</RouterLink
+        >
+        <RouterLink
+          :to="{
+            name: 'schedule',
+            params: { scheduleId: 'live' },
+          }"
+          class="button"
+          :class="{ 'button--disabled': currentSchedule === 'live' }"
+          >Live view</RouterLink
+        >
+      </div>
+      <p class="note">
+        ** The schedule is in construction times can change and also activities
+        will appear as they are confirmed.
+      </p>
+    </div>
+    <div class="scrollable">
+      <div v-if="currentSchedule === 'basic'">
+        <ScheduleView />
+      </div>
+
+      <div v-if="currentSchedule === 'live'">
+        <LiveView />
       </div>
     </div>
   </PanelContainer>
@@ -118,119 +66,54 @@ const hasHackathonFinished = computed<boolean>(
 
 .schedule {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
+  position: relative;
 
   div {
     max-width: 100%;
   }
 }
 
-.table-container {
-  flex: 1 1 0;
-  margin-top: 30px;
-  margin-bottom: 30px;
-  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
-  color: $secondary-color;
-
-  h1 {
-    padding: 10px;
-    margin: 0;
-    background-color: $primary-color;
-    border-radius: $border-radius $border-radius 0 0;
-    color: #fff;
-    text-align: center;
-
-    // border-bottom: 1px solid #fff3;
-  }
-
-  .table-scroll {
-    overflow: auto;
-  }
-
-  table {
-    width: 100%;
-    background-color: $contrast-color;
-    border-collapse: collapse;
-    border-radius: 0 0 $border-radius $border-radius;
-    color: $text-color;
-  }
-
-  thead {
-    background-color: $primary-color;
-    color: $contrast-color;
-  }
-
-  th {
-    padding: 10px;
-    text-align: left;
-
-    &:first-child {
-      border-left: 0;
-    }
-
-    &:last-child {
-      border-right: 0;
-    }
-  }
-
-  td {
-    padding: 10px;
-    border: thin solid #ececec;
-    text-align: left;
-
-    &:last-child {
-      min-width: 200px;
-      border-right: 0;
-    }
-
-    &:first-child {
-      border-left: 0;
-      text-align: center;
-    }
-  }
-
-  a {
-    color: $secondary-color;
-  }
-
-  tr:first-child th {
-    border-top: 0;
-  }
-
-  tr:last-child td {
-    border-bottom: 0;
-  }
+.scrollable {
+  flex-grow: 1;
+  overflow-y: auto;
 }
 
-.happened {
-  opacity: 0.5;
-}
-
-.when-small {
-  width: 20%;
-}
-
-@media (max-width: 720px) {
-  .when-small {
-    width: 60%;
-  }
+.explore {
+  text-align: center;
+  margin-top: 20px;
 
-  .hide-when-small {
-    display: none !important;
+  &__title {
+    margin: 0 0 20px;
+    text-align: center;
+    color: $primary-color-light;
+    font-weight: bold;
+    font-size: 20px;
   }
 }
 
-.link {
-  display: block;
-
-  &:not(:last-child) {
-    margin-bottom: 0.75rem;
-  }
+.note {
+  margin: 15px 0 15px;
+  color: $primary-color-light;
+  font-size: 18px;
+  text-align: center;
+}
 
-  &__icon {
-    height: 20px;
-    margin-right: 0.25rem;
-    vertical-align: -4px;
+.button {
+  display: inline-block;
+  padding: 8px 24px;
+  margin: 0 0.2em 16px;
+  background: $primary-color;
+  border-radius: 3px;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
+  color: $text-color;
+  cursor: url('../assets/img/rocket-fire.png'), auto;
+  font-weight: bold;
+
+  &--disabled {
+    filter: grayscale(0.5);
+    opacity: 0.4;
+    pointer-events: none;
   }
 }
 </style>

From 107e198aed2283ab2813bcc2d47aeafb542067cd Mon Sep 17 00:00:00 2001
From: carlotacb <carkbra@gmail.com>
Date: Sat, 6 Apr 2024 23:06:06 +0200
Subject: [PATCH 2/9] schedule is now with a toggle button and also created the
 temporal schedule

---
 src/components/ScheduleView.vue |  1 +
 src/views/Schedule.vue          | 10 +++++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/ScheduleView.vue b/src/components/ScheduleView.vue
index d5b31345..07dd27a7 100644
--- a/src/components/ScheduleView.vue
+++ b/src/components/ScheduleView.vue
@@ -110,6 +110,7 @@ const hasHackathonFinished = computed<boolean>(
 <style scoped lang="scss">
 @use 'sass:color';
 @use '@/variables' as *;
+
 .table-container {
   flex: 1 1 0;
   margin-top: 30px;
diff --git a/src/views/Schedule.vue b/src/views/Schedule.vue
index 4dfaac08..20c45ee1 100644
--- a/src/views/Schedule.vue
+++ b/src/views/Schedule.vue
@@ -65,9 +65,9 @@ const currentSchedule = computed<'live' | 'basic'>(() => {
 @use '@/variables' as *;
 
 .schedule {
+  position: relative;
   display: flex;
   flex-direction: column;
-  position: relative;
 
   div {
     max-width: 100%;
@@ -80,20 +80,20 @@ const currentSchedule = computed<'live' | 'basic'>(() => {
 }
 
 .explore {
-  text-align: center;
   margin-top: 20px;
+  text-align: center;
 
   &__title {
     margin: 0 0 20px;
-    text-align: center;
     color: $primary-color-light;
-    font-weight: bold;
     font-size: 20px;
+    font-weight: bold;
+    text-align: center;
   }
 }
 
 .note {
-  margin: 15px 0 15px;
+  margin: 15px 0;
   color: $primary-color-light;
   font-size: 18px;
   text-align: center;

From eb96a7f798e398acc30112849c41f280ecdc6e0d Mon Sep 17 00:00:00 2001
From: carlotacb <carkbra@gmail.com>
Date: Sat, 6 Apr 2024 23:30:08 +0200
Subject: [PATCH 3/9] fix live in mobile and desktop

---
 src/components/Countdown.vue | 22 ++++++++++++++++++++++
 src/components/LiveView.vue  | 12 ++++++++++--
 src/services/dates/index.ts  |  2 --
 src/views/FullScreen.vue     |  6 ++++++
 4 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/components/Countdown.vue b/src/components/Countdown.vue
index fb906cba..8fe083ea 100644
--- a/src/components/Countdown.vue
+++ b/src/components/Countdown.vue
@@ -161,4 +161,26 @@ const handleClick = (): void => {
     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;
+  }
+}
 </style>
diff --git a/src/components/LiveView.vue b/src/components/LiveView.vue
index a62ad04d..598d5c26 100644
--- a/src/components/LiveView.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),
         })
@@ -177,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;
 
@@ -198,6 +203,7 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => {
   &__hour {
     display: flex;
     width: 54px;
+    gap: 8px;
     flex-direction: column;
     margin-top: 3px;
     margin-right: 10px;
@@ -260,6 +266,8 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => {
 
     > div {
       display: flex;
+      align-items: center;
+      gap: 16px;
     }
   }
 
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/views/FullScreen.vue b/src/views/FullScreen.vue
index 40c8513b..30cb9a9d 100644
--- a/src/views/FullScreen.vue
+++ b/src/views/FullScreen.vue
@@ -32,4 +32,10 @@ const exitFullscreen = () => {
   align-items: center;
   justify-content: center;
 }
+
+@media (max-width: 720px) {
+  .fullscreen {
+    flex-direction: column;
+  }
+}
 </style>

From 86aa89e39f4b9a17eaa812a75dc51267083e1743 Mon Sep 17 00:00:00 2001
From: carlotacb <carkbra@gmail.com>
Date: Sat, 6 Apr 2024 23:30:32 +0200
Subject: [PATCH 4/9] fix live in mobile and desktop

---
 src/components/LiveView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LiveView.vue b/src/components/LiveView.vue
index 598d5c26..d678a69b 100644
--- a/src/components/LiveView.vue
+++ b/src/components/LiveView.vue
@@ -203,12 +203,12 @@ const events = computed<(TimelineEventItem | TimelineEventTitle)[]>(() => {
   &__hour {
     display: flex;
     width: 54px;
-    gap: 8px;
     flex-direction: column;
     margin-top: 3px;
     margin-right: 10px;
     font-size: 15px;
     font-weight: bold;
+    gap: 8px;
     text-align: right;
 
     &__end-hour {

From ea3a47daa407569b6dc281a8b2872d99d6a00dd3 Mon Sep 17 00:00:00 2001
From: carlotacb <carkbra@gmail.com>
Date: Sat, 6 Apr 2024 23:42:45 +0200
Subject: [PATCH 5/9] schedule is now corrected

---
 src/components/AppHeader.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 965f64a0..2f52bf9c 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -80,8 +80,8 @@ const isActive = (page: string): boolean => {
             Home</RouterLink
           >
         </li>
-        <li :class="{ selected: isActive('/live') }">
-          <RouterLink to="/live" @click="closeAsideMenu"
+        <li :class="{ selected: isActive('/schedule') }">
+          <RouterLink to="/schedule" @click="closeAsideMenu"
             ><FontAwesomeIcon
               icon="calendar-days"
               size="sm"

From 9859afd60d7f44ed5354e89c9895493abb9abdb5 Mon Sep 17 00:00:00 2001
From: carlotacb <carkbra@gmail.com>
Date: Sat, 6 Apr 2024 23:44:22 +0200
Subject: [PATCH 6/9] background should not repeat

---
 src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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;

From f3433062f8ff30269f5e53c0f9097d64f9f25897 Mon Sep 17 00:00:00 2001
From: carlotacb <carkbra@gmail.com>
Date: Sat, 6 Apr 2024 23:54:37 +0200
Subject: [PATCH 7/9] header with full screen and panels in mobile are bigger

---
 src/components/AppHeader.vue      | 18 ++++++++++++++++++
 src/components/PanelContainer.vue |  2 +-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 2f52bf9c..7c708b2c 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -59,6 +59,9 @@ const isActive = (page: string): boolean => {
       <div class="title-container">
         <h1 id="title">Live</h1>
       </div>
+      <div class="countdown-text" @click="goToFullscreen">
+        <span>Full screen</span>
+      </div>
     </div>
   </header>
   <!--Aside menu for small screens-->
@@ -408,6 +411,21 @@ $fade-time: 300ms;
   }
 }
 
+.countdown-text {
+  margin-right: 10px;
+  position: absolute;
+  right: 5px;
+  top: 0;
+  display: flex;
+  width: 50px;
+  height: 100%;
+  align-items: center;
+  color: #fff;
+  cursor: url('../assets/img/rocket-fire.png'), auto;
+  font-size: 15px;
+  text-align: center;
+}
+
 .open-aside-btn {
   position: absolute;
   display: flex;
diff --git a/src/components/PanelContainer.vue b/src/components/PanelContainer.vue
index d04e7c78..93f29f71 100644
--- a/src/components/PanelContainer.vue
+++ b/src/components/PanelContainer.vue
@@ -21,7 +21,7 @@ defineProps<Props>()
   margin: 0 auto;
 
   @media (max-width: 720px) {
-    padding-top: 60px;
+    padding: 80px 20px 40px;
   }
 
   .no-margin {

From 89f65abf464c0ff6f99688b35bf2cc36769739a9 Mon Sep 17 00:00:00 2001
From: carlotacb <carkbra@gmail.com>
Date: Sat, 6 Apr 2024 23:56:08 +0200
Subject: [PATCH 8/9] header with full screen and panels in mobile are bigger

---
 src/components/AppHeader.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 7c708b2c..3809b9ee 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -412,14 +412,14 @@ $fade-time: 300ms;
 }
 
 .countdown-text {
-  margin-right: 10px;
   position: absolute;
-  right: 5px;
   top: 0;
+  right: 5px;
   display: flex;
   width: 50px;
   height: 100%;
   align-items: center;
+  margin-right: 10px;
   color: #fff;
   cursor: url('../assets/img/rocket-fire.png'), auto;
   font-size: 15px;

From 0e1b5ff4d2c48860e321221a4aa912b7782d66f6 Mon Sep 17 00:00:00 2001
From: carlotacb <carkbra@gmail.com>
Date: Sun, 7 Apr 2024 00:08:51 +0200
Subject: [PATCH 9/9] feedback

---
 src/data/schedule.ts   |  6 +++---
 src/views/Schedule.vue | 14 +++++++-------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/data/schedule.ts b/src/data/schedule.ts
index 527d3e9f..d17ceef9 100644
--- a/src/data/schedule.ts
+++ b/src/data/schedule.ts
@@ -190,7 +190,7 @@ export const schedule: RawSchedule = {
     },
     {
       id: 'hacking-ends',
-      title: '😮‍💨 Hacking starts',
+      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 🛫`,
     },
@@ -250,8 +250,8 @@ export const schedule: RawSchedule = {
         icon: 'youtube',
       },
       title: '🗣️ Closing ceremony',
-      start: '03/05/2024 15:30',
-      end: '03/05/2024 17:30',
+      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! 🥇🥈🥉`,
     },
     {
diff --git a/src/views/Schedule.vue b/src/views/Schedule.vue
index 20c45ee1..5af3cda5 100644
--- a/src/views/Schedule.vue
+++ b/src/views/Schedule.vue
@@ -7,12 +7,12 @@ import LiveView from '@/components/LiveView.vue'
 
 const route = useRoute()
 
-const currentSchedule = computed<'live' | 'basic'>(() => {
+const currentSchedule = computed<'live' | 'detailed'>(() => {
   if (
     route.params?.scheduleId !== 'live' &&
-    route.params?.scheduleId !== 'basic'
+    route.params?.scheduleId !== 'detailed'
   ) {
-    return 'basic'
+    return 'detailed'
   }
 
   return route.params.scheduleId
@@ -27,11 +27,11 @@ const currentSchedule = computed<'live' | 'basic'>(() => {
         <RouterLink
           :to="{
             name: 'schedule',
-            params: { scheduleId: 'basic' },
+            params: { scheduleId: 'detailed' },
           }"
           class="button"
-          :class="{ 'button--disabled': currentSchedule === 'basic' }"
-          >Basic view</RouterLink
+          :class="{ 'button--disabled': currentSchedule === 'detailed' }"
+          >Detailed view</RouterLink
         >
         <RouterLink
           :to="{
@@ -49,7 +49,7 @@ const currentSchedule = computed<'live' | 'basic'>(() => {
       </p>
     </div>
     <div class="scrollable">
-      <div v-if="currentSchedule === 'basic'">
+      <div v-if="currentSchedule === 'detailed'">
         <ScheduleView />
       </div>