Skip to content

[Feature] [Fest] Home / Popup / Reward #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Parent: 💥
merged 8 commits into from
Jul 16, 2025
Merged

[Feature] [Fest] Home / Popup / Reward #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0ca68b0
feat: fest home and reward
weerawitweem Jul 14, 2025
93347ff
fix: align 4 button at the end
weerawitweem Jul 14, 2025
79b89d6
feat: add popup and text scaling
weerawitweem Jul 14, 2025
f2f5159
feat: add LineOA link and style button
weerawitweem Jul 15, 2025
6b179af
Merge branch 'dev' into feat/fest/home
weerawitweem Jul 15, 2025
5cdf08a
Merge branch 'dev' into feat/fest/home
MasterIceZ Jul 16, 2025
bc0ccc0
Merge branch 'dev' into feat/fest/home
Taihenc Jul 16, 2025
68706d4
Merge branch 'dev' into feat/fest/home
Taihenc Jul 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/fest/fest-reward.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
109 changes: 109 additions & 0 deletions src/components/fest/PopupFest.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
---
import HorizonlineFest from "@/components/common/HorizonlineFest.astro";
import ButtonFest from "@/components/common/ButtonFest.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"
>
<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="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">
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">
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="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>
</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>
<div>
<p>เหล่านักท่องเวลามือใหม่ ในนามนิสิตจุฬาฯ</p>
<p>ได้ทะยานขึ้นสู่ห้วงนภา ไปกับสายการบิน</p>
<p>Chulalongkorn เที่ยวบินที่ CU109</p>
<p>และได้พบกับจุดเริ่มต้นของการเดินทางครั้งใหม่</p>
</div>

<div>
<p>ในขณะที่ทุกอย่างกำลังเป็นไปอย่างราบรื่น</p>
<p>ทันใดนั้น มิติเวลาได้บิดงอ พับทบบรรจบกัน</p>
<p>ท้องฟ้าเกิดวิปริต ดวงอาทิตย์ได้ปลดปล่อย</p>
<p>กระแสอนุภาคที่มีพลังงานสูงอย่างรุนแรง</p>
<p>จนเกิดเป็นพายุสุริยะ สร้างช่องว่างระหว่างกาลเวลา</p>
<p>นำพาให้นิสิตที่อยู่บนเครื่องบินอันตรธานสู่</p>
<p>ดินแดนต่าง ๆ เพื่อสำรวจความเป็นไป</p>
<p>และไขข้อเท็จจริงที่ซ่อนอยู่ในมิติเวลา </p>
</div>

<div>
<p>หากจะฝ่าพายุสุริยะนี้ไปให้ได้ นิสิตจุฬาฯ</p>
<p>บนเที่ยวบินนี้ต้องจับมือผ่านอุปสรรคไปด้วยกัน</p>
<p>ได้เวลาเเล้วที่มิติแห่งห้วงเวลาจะต้อนรับ</p>
<p>นักท่องเวลามือใหม่ เที่ยวบินที่ CU109 ทุกคน เข้าสู่</p>
</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>
</div>
</div>
<HorizonlineFest variant="yellow" />
<div id="closePopup" class="w-fit mx-auto">
<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 showPopup = () => {
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');
document.body.classList.remove("overflow-hidden");
};

// Show on first visit
if (!localStorage.getItem('hasVisited')) {
showPopup();
localStorage.setItem('hasVisited', 'true');
}

// Manual trigger
openBtn?.addEventListener('click', showPopup);
closeBtn?.addEventListener('click', hidePopup);
</script>
72 changes: 66 additions & 6 deletions src/pages/fest/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,75 @@
import ButtonFest from "@/components/common/ButtonFest.astro";
import HorizonlineFest from "@/components/common/HorizonlineFest.astro";
import Layout from "@/layouts/fest/FestWithNavbar.astro";
import PopupFest from "@/components/fest/PopupFest.astro"
---

<Layout>
<div class="px-4">
<ButtonFest color="white" size="big">White Button Large</ButtonFest>
<ButtonFest color="white" size="small">Small</ButtonFest>
<ButtonFest color="pink" size="big">Pink Button Large</ButtonFest>
<ButtonFest color="blue" size="big">Blue Button Large</ButtonFest>
<HorizonlineFest variant="blue" />
<PopupFest/>
<div class="flex flex-col px-4 py-2 gap-2 text-center my-5">
<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">
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">
CU FEST
</h1>
</div>
<HorizonlineFest variant="yellow" />
<div class="flex flex-col px-4 gap-5">
<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>
</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>
</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>
<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">
<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>
</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>
<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>
</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 id="openPopup" class="w-fit">
<ButtonFest color="white" size="small" class="w-36">เนื้อเรื่อง</ButtonFest>
</div>
</div>
</div>
</Layout>
51 changes: 51 additions & 0 deletions src/pages/fest/reward.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
---
import ButtonFest from "@/components/common/ButtonFest.astro";
import HorizonlineFest from "@/components/common/HorizonlineFest.astro";
import Layout from "@/layouts/fest/FestWithNavbar.astro";
import { Home } from "@lucide/astro";
---

<Layout>
<div class="flex flex-col px-4 py-2 gap-2 items-center text-center my-5">
<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">
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">
CU FEST
</h1>
</div>
<HorizonlineFest variant="blue" />
<div class="text-left font-sans px-4 flex flex-col gap-5">
<p class="text-xl font-semibold text-center">เงื่อนไขรับรางวัล</p>
<div>
<p class="text-lg font-medium">Chula Stamp Journey: จุฬา แสตมป์ เจอนี่ !</p>
<ul class="list-disc list-inside text-lg font-normal px-4">
<li>
สะสมแสตมป์ครบ 10 ดวง <span class="whitespace-nowrap pl-7">จะได้รับของรางวัลสุดพิเศษ</span>
</li>
</ul>
</div>
<div>
<p class="text-lg font-medium">Chula QR Quest: กิจกรรมชุมชน แต้ม LINE OA</p>
<ul class="list-disc list-inside text-lg font-normal px-4">
<li>สะสม 5 แต้ม จะได้รับ Bronze Set</li>
<li>สะสม 10 แต้ม จะได้รับ Silver Set</li>
<li>สะสม 15 แต้ม จะได้รับ Gold Set</li>
</ul>
</div>
</div>
<p class="text-xl font-semibold mt-8">วัน เวลา และสถานที่รับของรางวัล</p>
<img src="/fest/fest-reward.png" alt="Reward Collection" class="my-5">
<ButtonFest color="blue" size="big" class="whitespace-nowrap" href="https://lin.ee/xpZkNQf">สะสมแต้มใน LineOA</ButtonFest>
<ButtonFest color="white" size="big" class="whitespace-nowrap my-5" href="/fest">
<div class="flex gap-4 items-center">
<Home size={20} />
กลับหน้าหลัก
</div>
</ButtonFest>
</div>
</Layout>
Loading