Feat/fest/quest 3 5

src/components/fest/PopupFest.astro

@@ -1,47 +1,54 @@
 ---
-import HorizonlineFest from "@/components/common/HorizonlineFest.astro";
 import ButtonFest from "@/components/common/ButtonFest.astro";
-
-
+import HorizonlineFest from "@/components/common/HorizonlineFest.astro";
 ---
 
 <div class="relative">
   <div
     id="popup"
-    class="fixed inset-0 w-full max-w-[440px] mx-auto flex items-center justify-center transition-opacity duration-300 opacity-0 pointer-events-none z-50"
+    class="pointer-events-none fixed inset-0 z-50 mx-auto flex w-full max-w-[440px] items-center justify-center opacity-0 transition-opacity duration-300"
   >
-    <div class="bg-[url('/fest/BG-Fest.png')] bg-no-repeat w-full h-screen text-center flex flex-col gap-5 py-15">
+    <div
+      class="flex h-screen w-full flex-col gap-5 bg-[url('/fest/BG-Fest.png')] bg-no-repeat py-15 text-center"
+    >
       <div class="relative w-full px-2 whitespace-nowrap">
         <!-- Shadow layer -->
-        <h1 class="absolute font-zen-dots font-normal text-[clamp(3rem,13vw,3.75rem)] leading-[140%] tracking-normal select-none inset-0 text-[#72CED7] blur-sm px-2">
+        <h1
+          class="font-zen-dots absolute inset-0 px-2 text-[clamp(3rem,13vw,3.75rem)] leading-[140%] font-normal tracking-normal text-[#72CED7] blur-sm select-none"
+        >
           CU FEST
         </h1>
 
         <!-- Gradient text layer -->
-        <h1 class="relative font-zen-dots font-normal text-[clamp(3rem,13vw,3.75rem)] leading-[140%] tracking-normal select-none text-transparent bg-gradient-to-b from-[#F94FC6] to-[#E0BBE4] bg-clip-text">
+        <h1
+          class="font-zen-dots relative bg-gradient-to-b from-[#F94FC6] to-[#E0BBE4] bg-clip-text text-[clamp(3rem,13vw,3.75rem)] leading-[140%] font-normal tracking-normal text-transparent select-none"
+        >
           CU FEST
         </h1>
       </div>
       <HorizonlineFest variant="yellow" />
-      <div class="grow overflow-y-auto p-4 flex flex-col gap-5 px-8
-        [&::-webkit-scrollbar]:w-2
-        [&::-webkit-scrollbar-track]:bg-transparent
-        [&::-webkit-scrollbar-thumb]:bg-transparent
-        [&::-webkit-scrollbar-thumb]:border
-      [&::-webkit-scrollbar-thumb]:border-white
-        [&::-webkit-scrollbar-thumb]:shadow-[0_0_10px_#CB438B]
-        [&::-webkit-scrollbar-thumb]:rounded-full
-
-      ">
+      <div
+        class="flex grow flex-col gap-5 overflow-y-auto p-4 px-8 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border [&::-webkit-scrollbar-thumb]:border-white [&::-webkit-scrollbar-thumb]:bg-transparent [&::-webkit-scrollbar-thumb]:shadow-[0_0_10px_#CB438B] [&::-webkit-scrollbar-track]:bg-transparent"
+      >
         <div class="text-[#F09810] text-shadow-[0_0_10px_#6F84B8]">
-          <p class="text-[clamp(1.25rem,40vw,1.75rem)] font-family-orbitron font-bold">Mysterious thing, Time</p>
-          <p class="text-[clamp(1rem,8vw,1.25rem)] font-sans font-bold">สิ่งที่น่าพิศวงที่สุด คือ เวลา</p>
+          <p
+            class="font-family-orbitron text-[clamp(1.25rem,40vw,1.75rem)] font-bold"
+          >
+            Mysterious thing, Time
+          </p>
+          <p class="font-sans text-[clamp(1rem,8vw,1.25rem)] font-bold">
+            สิ่งที่น่าพิศวงที่สุด คือ เวลา
+          </p>
         </div>
         <p class="font-sans">
           อดีต สร้างปัจจุบัน เติมเต็มอนาคต กับ “นิสิตจุฬาฯ”
           เราพร้อมจริงๆเเล้วหรือยัง?
         </p>
-        <p class="text-[clamp(1rem,8vw,2.25rem)] font-semibold text-shadow-[0_0_10px_#72CED7]">19 กรกฎาคม 2568</p>
+        <p
+          class="text-[clamp(1rem,8vw,2.25rem)] font-semibold text-shadow-[0_0_10px_#72CED7]"
+        >
+          19 กรกฎาคม 2568
+        </p>
         <div>
           <p>เหล่านักท่องเวลามือใหม่ ในนามนิสิตจุฬาฯ</p>
           <p>ได้ทะยานขึ้นสู่ห้วงนภา ไปกับสายการบิน</p>
@@ -57,7 +64,7 @@ import ButtonFest from "@/components/common/ButtonFest.astro";
           <p>จนเกิดเป็นพายุสุริยะ สร้างช่องว่างระหว่างกาลเวลา</p>
           <p>นำพาให้นิสิตที่อยู่บนเครื่องบินอันตรธานสู่</p>
           <p>ดินแดนต่าง ๆ เพื่อสำรวจความเป็นไป</p>
-          <p>และไขข้อเท็จจริงที่ซ่อนอยู่ในมิติเวลา </p>
+          <p>และไขข้อเท็จจริงที่ซ่อนอยู่ในมิติเวลา</p>
         </div>
 
         <div>
@@ -68,42 +75,46 @@ import ButtonFest from "@/components/common/ButtonFest.astro";
         </div>
 
         <div>
-          <p class="text-[clamp(1rem,8vw,2.25rem)] font-semibold text-shadow-[0_0_10px_#F09810] font-family-orbitron">"The Time Quest"</p>
+          <p
+            class="font-family-orbitron text-[clamp(1rem,8vw,2.25rem)] font-semibold text-shadow-[0_0_10px_#F09810]"
+          >
+            "The Time Quest"
+          </p>
         </div>
       </div>
       <HorizonlineFest variant="yellow" />
-      <div id="closePopup" class="w-fit mx-auto">
-        <ButtonFest color="pink" size="big" >ไปกันต่อ!</ButtonFest>
+      <div id="closePopup" class="mx-auto w-fit">
+        <ButtonFest color="pink" size="big">ไปกันต่อ!</ButtonFest>
       </div>
     </div>
   </div>
 </div>
 
 <!-- Script -->
 <script type="module">
-  const popup = document.getElementById('popup');
-  const openBtn = document.getElementById('openPopup');
-  const closeBtn = document.getElementById('closePopup');
+  const popup = document.getElementById("popup");
+  const openBtn = document.getElementById("openPopup");
+  const closeBtn = document.getElementById("closePopup");
 
   const showPopup = () => {
-    popup.classList.remove('opacity-0', 'pointer-events-none');
-    popup.classList.add('opacity-100', 'pointer-events-auto');
+    popup.classList.remove("opacity-0", "pointer-events-none");
+    popup.classList.add("opacity-100", "pointer-events-auto");
     document.body.classList.add("overflow-hidden");
   };
 
   const hidePopup = () => {
-    popup.classList.add('opacity-0', 'pointer-events-none');
-    popup.classList.remove('opacity-100', 'pointer-events-auto');
+    popup.classList.add("opacity-0", "pointer-events-none");
+    popup.classList.remove("opacity-100", "pointer-events-auto");
     document.body.classList.remove("overflow-hidden");
   };
 
   // Show on first visit
-  if (!localStorage.getItem('hasVisited')) {
+  if (!localStorage.getItem("hasVisited")) {
     showPopup();
-    localStorage.setItem('hasVisited', 'true');
+    localStorage.setItem("hasVisited", "true");
   }
 
   // Manual trigger
-  openBtn?.addEventListener('click', showPopup);
-  closeBtn?.addEventListener('click', hidePopup);
+  openBtn?.addEventListener("click", showPopup);
+  closeBtn?.addEventListener("click", hidePopup);
 </script>

src/pages/fest/ButtonProp/index.astro

@@ -0,0 +1,52 @@
+---
+import ButtonFest from "@/components/common/ButtonFest.astro";
+
+const questItems = [
+  {
+    description: "เดินเดินจุ๊บๆ",
+    questLabel: "Quest 3.1",
+    href: "/fest/quest-3-1"
+  },
+  {
+    description: "เดินสามย่าน สายกินสายมู",
+    questLabel: "Quest 3.2",
+    href: "/fest/quest-3-2"
+  },
+  {
+    description: "Birdwalk",
+    questLabel: "Quest 3.3",
+    href: "/fest/quest-3-3"
+  },
+  {
+    description: "Trashvenger",
+    questLabel: "Quest 3.4",
+    href: "/fest/quest-3-4"
+  },
+  {
+    description: "Plantwalk",
+    questLabel: "Quest 3.5",
+    href: "/fest/quest-3-5"
+  },
+];
+---
+<div class="mb-[20px] w-[315px] mx-auto"> {/* Added mx-auto and p-4 for centering within the overall page layout */}
+  <p class="text-[24px] font-bold my-[20px] text-white font-ibm-plex-sans-thai">รายละเอียด Quest ย่อย</p>
+
+  <div class="flex flex-col gap-4 mx-[10px] ">
+    {questItems.map(item => (
+      <div class="flex items-center justify-between">
+        <p class="text-white text-lg mr-4 max-w-[100px] overflow-hidden flex-none">
+          {item.description}
+        </p>
+
+        {/* Explicitly set size="small" to use the predefined width */}
+        <ButtonFest href={item.href} size="small" class="w-32">
+          <p class="whitespace-nowrap">
+            {item.questLabel}
+          </p>
+        </ButtonFest>
+      </div>
+    ))}
+  </div>
+
+</div>

src/pages/fest/index.astro

@@ -1,75 +1,126 @@
 ---
 import ButtonFest from "@/components/common/ButtonFest.astro";
 import HorizonlineFest from "@/components/common/HorizonlineFest.astro";
+import PopupFest from "@/components/fest/PopupFest.astro";
 import Layout from "@/layouts/fest/FestWithNavbar.astro";
-import PopupFest from "@/components/fest/PopupFest.astro"
 ---
 
 <Layout>
-  <PopupFest/>
-  <div class="flex flex-col px-4 py-2 gap-2 text-center my-5">
+  <PopupFest />
+  <div class="my-5 flex flex-col gap-2 px-4 py-2 text-center">
     <div class="relative w-full">
       <!-- Shadow layer -->
-      <h1 class="absolute font-zen-dots font-normal text-[clamp(3rem,13vw,3.75rem)] leading-[140%] tracking-normal select-none inset-0 text-[#72CED7] blur-sm">
+      <h1
+        class="font-zen-dots absolute inset-0 text-[clamp(3rem,13vw,3.75rem)] leading-[140%] font-normal tracking-normal text-[#72CED7] blur-sm select-none"
+      >
         CU FEST
       </h1>
 
       <!-- Gradient text layer -->
-      <h1 class="relative font-zen-dots font-normal text-[clamp(3rem,13vw,3.75rem)] leading-[140%] tracking-normal select-none text-transparent bg-gradient-to-b from-[#F94FC6] to-[#E0BBE4] bg-clip-text">
+      <h1
+        class="font-zen-dots relative bg-gradient-to-b from-[#F94FC6] to-[#E0BBE4] bg-clip-text text-[clamp(3rem,13vw,3.75rem)] leading-[140%] font-normal tracking-normal text-transparent select-none"
+      >
         CU FEST
       </h1>
-    </div>  
+    </div>
     <HorizonlineFest variant="yellow" />
-    <div class="flex flex-col px-4 gap-5">
+    <div class="flex flex-col gap-5 px-4">
       <div class="font-sans">
         <h2 class="text-2xl font-semibold">CU Festival หรือ CU FEST</h2>
         <p class="text-xl font-normal">คือ เทศกาลที่ให้นิสิตใหม่ได้มาทำ</p>
         <p class="text-xl font-normal">กิจกรรมให้รู้จักมหาลัยมากยิ่งขึ้น</p>
       </div>
       <div class="font-sans">
         <p class="text-2xl font-semibold">โดยจะจัดงานในวันที่</p>
-        <p class="text-[clamp(1rem,8vw,2.25rem)] font-semibold text-shadow-[0_0_10px_#72CED7]">19 กรกฎาคม 2568</p>
+        <p
+          class="text-[clamp(1rem,8vw,2.25rem)] font-semibold text-shadow-[0_0_10px_#72CED7]"
+        >
+          19 กรกฎาคม 2568
+        </p>
       </div>
-      <p class="text-left text-2xl font-semibold">
-        มีกิจกรรมได้แก่
-      </p>
-      <div class="flex flex-col pl-2 pr-4 gap-8">
-        <div class="text-shadow-[0_0_4px_#F09810] flex flex-col gap-2 items-center">
-          <h3 class="text-left text-lg font-bold font-family-orbitron">Quest 1 : Chula Stamp Journey : จุฬา แสตมป์ เจอนี่!</h3>
-          <ButtonFest color="white" size="big" href="/fest/quest-1">ลุยเควส 1</ButtonFest>
+      <p class="text-left text-2xl font-semibold">มีกิจกรรมได้แก่</p>
+      <div class="flex flex-col gap-8 pr-4 pl-2">
+        <div
+          class="flex flex-col items-center gap-2 text-shadow-[0_0_4px_#F09810]"
+        >
+          <h3 class="font-family-orbitron text-left text-lg font-bold">
+            Quest 1 : Chula Stamp Journey : จุฬา แสตมป์ เจอนี่!
+          </h3>
+          <ButtonFest color="white" size="big" href="/fest/quest-1"
+            >ลุยเควส 1</ButtonFest
+          >
         </div>
-        <div class="text-shadow-[0_0_4px_#F94FC6] flex flex-col gap-2 items-center">
-          <h3 class="w-full text-left text-lg font-bold font-family-orbitron">Quest 2 : Chula QR Quest</h3>
-          <ButtonFest color="white" size="big" href="/fest/quest-2">ลุยเควส 2</ButtonFest>
+        <div
+          class="flex flex-col items-center gap-2 text-shadow-[0_0_4px_#F94FC6]"
+        >
+          <h3 class="font-family-orbitron w-full text-left text-lg font-bold">
+            Quest 2 : Chula QR Quest
+          </h3>
+          <ButtonFest color="white" size="big" href="/fest/quest-2"
+            >ลุยเควส 2</ButtonFest
+          >
         </div>
-        <div class="text-shadow-[0_0_4px_#72CED7] flex flex-col gap-2 items-center">
-          <h3 class="text-left text-lg font-bold font-family-orbitron">Quest 3: Dimensions Unfold : Field Trips</h3>
-          <div class="text-left font-family-orbitron font-bold pl-2">
+        <div
+          class="flex flex-col items-center gap-2 text-shadow-[0_0_4px_#72CED7]"
+        >
+          <h3 class="font-family-orbitron text-left text-lg font-bold">
+            Quest 3: Dimensions Unfold : Field Trips
+          </h3>
+          <div class="font-family-orbitron pl-2 text-left font-bold">
             <p>Quest 3.1 เดินเดินจุฬาฯ</p>
             <p>Quest 3.2 เดินสามย่าน สายกินสายมู</p>
             <p>Quest 3.3 Birdwalk</p>
             <p>Quest 3.4 Trashvenger</p>
             <p>Quest 3.5 Plantwalk</p>
           </div>
-          <ButtonFest color="white" size="big" href="/fest/quest-3-1">ลุยเควส 3</ButtonFest>
+          <ButtonFest color="white" size="big" href="/fest/quest-3-1"
+            >ลุยเควส 3</ButtonFest
+          >
         </div>
-        <div class="text-shadow-[0_0_4px_#F94FC6] flex flex-col gap-2 items-center">
-          <h3 class="text-left text-lg font-bold font-family-orbitron">Quest 4 : On the way to nowhere 109 Theatre</h3>
-          <ButtonFest color="white" size="big" href="/fest/quest-4">ลุยเควส 4</ButtonFest>
+        <div
+          class="flex flex-col items-center gap-2 text-shadow-[0_0_4px_#F94FC6]"
+        >
+          <h3 class="font-family-orbitron text-left text-lg font-bold">
+            Quest 4 : On the way to nowhere 109 Theatre
+          </h3>
+          <ButtonFest color="white" size="big" href="/fest/quest-4"
+            >ลุยเควส 4</ButtonFest
+          >
         </div>
-        <div class="text-shadow-[0_0_4px_#F09810] flex flex-col gap-2 items-center">
-          <h3 class="text-left text-lg font-bold font-family-orbitron">Quest 5 : งานปฐมนิเทศ X Freshmen Festival 2025 : <span class="whitespace-nowrap">ส่งเพื่อนไปก้าวใหม่</span></h3>
-          <ButtonFest color="white" size="big" href="/fest/quest-5">ลุยเควส 5</ButtonFest>
+        <div
+          class="flex flex-col items-center gap-2 text-shadow-[0_0_4px_#F09810]"
+        >
+          <h3 class="font-family-orbitron text-left text-lg font-bold">
+            Quest 5 : งานปฐมนิเทศ X Freshmen Festival 2025 : <span
+              class="whitespace-nowrap">ส่งเพื่อนไปก้าวใหม่</span>
+          </h3>
+          <ButtonFest color="white" size="big" href="/fest/quest-5"
+            >ลุยเควส 5</ButtonFest
+          >
         </div>
       </div>
     </div>
     <HorizonlineFest variant="yellow" />
-    <div class="grid grid-cols-2 w-fit mx-auto gap-x-2 gap-y-2">
-      <ButtonFest color="white" size="small" class="whitespace-nowrap w-36" href="https://lin.ee/xpZkNQf">สะสมแต้ม</ButtonFest>
-      <ButtonFest color="white" size="small" class="whitespace-nowrap w-36" href="/fest/reward">รับรางวัล</ButtonFest>
-      <ButtonFest color="white" size="small" class="w-36" href="firstdate/maps">แผนที่</ButtonFest>
+    <div class="mx-auto grid w-fit grid-cols-2 gap-x-2 gap-y-2">
+      <ButtonFest
+        color="white"
+        size="small"
+        class="w-36 whitespace-nowrap"
+        href="https://lin.ee/xpZkNQf">สะสมแต้ม</ButtonFest
+      >
+      <ButtonFest
+        color="white"
+        size="small"
+        class="w-36 whitespace-nowrap"
+        href="/fest/reward">รับรางวัล</ButtonFest
+      >
+      <ButtonFest color="white" size="small" class="w-36" href="firstdate/maps"
+        >แผนที่</ButtonFest
+      >
       <div id="openPopup" class="w-fit">
-        <ButtonFest color="white" size="small" class="w-36">เนื้อเรื่อง</ButtonFest>
+        <ButtonFest color="white" size="small" class="w-36"
+          >เนื้อเรื่อง</ButtonFest
+        >
       </div>
     </div>
   </div>