แจก Prompt สร้างเว็บเซอร์ไพร์สแฟน ด้วย AI ฟรี

ต้องการสร้างเว็บแอปพลิเคชันแบบหน้าเดียว (Single-page) ในธีม "วันครบรอบ/ความทรงจำ" ที่มีความโรแมนติกและสามารถโต้ตอบกับผู้ใช้ได้ (Interactive)
โดยให้มีธีมเป็นสีชมพู มีความมินิมอล มีอนิเมชั่นเป็นรูปหัวใจลอยไปมา แบบน่ารักๆ

นี่คือรายละเอียดความต้องการและโครงสร้างของโปรเจกต์:

1. เทคโนโลยีและโครงสร้างระบบ (Tech Stack & Architecture)
   โครงสร้างหลัก (Framework): React 19 + Vite

การตกแต่ง (Styling): ใช้ Plain CSS (หรือ Tailwind ก็ได้หากคุณถนัด แต่ขอให้ปรับแต่งได้ง่าย) ดีไซน์ต้องมีความน่ารักมินิมอล เน้นการเล่นผ่าน browser ก่อนและใน Ipad
ไลบรารี (Libraries): ใช้ canvas-confetti สำหรับเอฟเฟกต์พลุกระดาษเฉลิมฉลอง

2. ฟีเจอร์หลักและองค์ประกอบรวม (Core Features & Global Elements)
   หน้าจอโหลดดิ่ง (Global Loader): หน้าจอโหลดดิ่งที่ดูสวยงาม ซึ่งจะโหลดรูปภาพ วิดีโอ และเสียงพื้นหลังเตรียมไว้ก่อนที่จะแสดงผลตัวแอป

เอฟเฟกต์ละอองลอย (Floating Particles): เอฟเฟกต์ละอองล่องลอยเบาๆเป็นรูปหัวใจ 3 size อย่างต่อเนื่องเป็นพื้นหลังในทุกหน้าจอในส่วนของพื้นหลัง เพื่อให้ความรู้สึกมหัศจรรย์และโรแมนติก
เอฟเฟกต์สลับหน้า (Slide Transitions): แอนิเมชันจางเข้าและจางออก (Fade-in / Fade-out) อย่างนุ่มนวล (ใช้เวลาประมาณ 0.7 ถึง 1 วินาที) เมื่อเลื่อนเปลี่ยนหน้าหรือสลับไปยังส่วนต่างๆ

3. ลำดับการทำงานของแอปและสไลด์หน้าต่างๆ (Application Flow & Slides)
   แอปพลิเคชันควรถูกจัดโครงสร้างเป็นลำดับของ "สไลด์" โดยให้ผู้ใช้กดปุ่ม "ถัดไป" (Next) เพื่อเลื่อนดูทีละหน้า

สไลด์ 0 - หน้าล็อกอิน (Login Screen): หน้าต่างล็อกอินแบบเข้ารหัสหัวคือ "Enter our password" โดยต้องกรอกรหัสผ่านคล้ายๆ OTP/PIN 6 หลัก ซึ่งคือ วันเดือนปี ให้ input เป็นกล่องสี่เหลี่ยมใส่ และปุ่ม กด login ให้เป็นอิโมชั่นกุญแจ (default ไว้เป็น 000000)

สไลด์ 1 - บทนำ (Intro): หน้าจอบนสุด ใช้รูป(.. ใส่ลิ้งค์รูป ..) และข้างล่างรูปใส่ข้อความ "Halo babe, welcome to our world!!"

สไลด์ 2 - บทนำ2 (Intro): หน้าจอบนสุด ใช้รูปใน (.. ใส่ลิ้งค์รูป ..) และข้างล่างรูปใส่ข้อความ "Are you ready for a special thing?"

สไลด์ 3 - ความทรงจำ (Memories/Timeline): เลย์เอาต์ไทม์ไลน์แบบแนวตั้งโดยยกตัวอย่างไว้สัก 3 timeline สลับซ้ายขวา (เจอกันครั้งแรก, เที่ยว, ขอเป็นแฟน) และมีปุ่ม next โดยมี modal ขึ้นมาให้เป็นลูกเล่นว่าพร้อมจะสร้างความทรงจำต่อไหม ให้มีไปกับไม่ไป และปุ่มไม่ไป
ให้หนีเม้าส์โดยไม่สามารถกดหรือเม้าส์จะชี้ที่ปุ่มไม่ได้เลย (บังคับใช้ box-sizing: border-box)

สไลด์ 4 - ความซาบซึ้งใจ (Appreciation): หัวของ Card เขียน "Thank you for this year, babe" และทำเป็นแกลเลอรี่รูปแบบแกลเลอรี่ หรือ Grid 6x3 (.. ใส่ลิ้งค์รูป ..) ที่แสดงรูปภาพโปรดที่ถ่ายร่วมกัน ส่วนข้อความแทนคำขอบคุณจากใจจริง
"Thank you, for every thing in this year. You made me special" ทำปุ่ม next

สไลด์ 5 - วันครบรอบ (Anniversary): หัวของ Card "Happy Anniversary my love" และใช้รูป (.. ใส่ลิ้งค์รูป ..) สไลด์เฉลิมฉลองพร้อมเอฟเฟกต์พลุกระดาษ (ใช้ canvas-confetti) พร้อมข้อความล่างรูป "I love you"
และมีปุ่ม เขียนว่า "Let's go for out Dinner"

สไลด์ 6 - คำเชิญทานมื้อค่ำ (Dinner Invitation): สไลด์สุดท้ายที่โต้ตอบได้ เป็นการเชิญชวนไปทานมื้อค่ำมื้อพิเศษ อาจมีลูกเล่นน่ารักๆ กับปุ่ม "ตกลง/ปฏิเสธ" (Yes/No) โดยที่ปุ่ม "ปฏิเสธ" (No) จะขยับหนีเมื่อพยายามกด และหากกดแล้ว ให้โชว์รูปสถานที่
(.. ใส่ลิ้งค์รูป ..)

4. กฎการออกแบบและการแสดงผล (Design & Responsive Rules)
   ความสวยงาม (Aesthetics): ดูมินิมอล น่ารักแบ๊วๆ การไล่สีที่นุ่มนวล ในสไลด์ที่ 0-5 แต่ 6 อยากให้ดูพรีเมียม, ทันสมัย และการจัดวางตัวอักษรที่หรูหรา ทั้งหมดให้ใช้ UI สไตล์ Glassmorphism (พื้นหลังกึ่งโปร่งใส)

เลย์เอาต์สำหรับมือถือ (Mobile Layout): ให้ความสำคัญเป็นพิเศษกับระยะขอบ (Padding) บนมือถือ หลีกเลี่ยงไม่ให้เกิดการเลื่อนหน้าจอแนวนอน (Horizontal scrolling) และตรวจสอบให้แน่ใจว่าไม่มีองค์ประกอบใดซ้อนทับกันบนหน้าจอความกว้าง 393px

ตัวอักษร (Typography): ใช้ฟอนต์ที่ดูทันสมัย เช่น 'Inter' หรือ 'Prompt'

โปรดสร้างโครงสร้างโปรเจกต์แบบสมบูรณ์ รวมถึงไฟล์ App.jsx ที่จัดการสถานะ (State) ของสไลด์, ไฟล์ CSS สำหรับแอนิเมชันและเลย์เอาต์แบบ Responsive รวมถึงโค้ดสำหรับคอมโพเนนต์สไลด์แต่ละหน้า โดยเริ่มต้นสร้างจากไฟล์ App.jsx และไฟล์ CSS หลักเป็นอันดับแรก