# ราชินีในรัชกาลที่ ๙ เว็บไซต์สวยงามสำหรับน้อมรำลึกในพระมหากรุณาธิคุณของสมเด็จพระนางเจ้าสิริกิติ์ ## สรุปโปรเจ็ค โปรเจ็คนี้เป็นหน้า Landing Page ขนาดเล็ก (static) ใช้ HTML/CSS ในการแสดงผล โดยมีจุดเด่นเป็นภาพพระราชินีที่ถูกจัดให้เป็นวงกลมพร้อมเอฟเฟกต์ (glow, golden ring, hover effects) และภาพพื้นหลังแบบโมโนโครม พร้อมเอฟเฟกต์เล็กๆ เช่น particle sparkle, gradient overlay และการเคลื่อนไหวเล็กน้อยของเนื้อหา ## คุณสมบัติเด่น - รูปภาพหลักเป็นวงกลม พร้อม glow และแหวนสีทองที่หมุนรอบ - เอฟเฟกต์พื้นหลัง (sparkles) เพิ่มความละมุนและยกบรรยากาศ - หัวข้อหลัก (H1) ใช้ gradient สีทองและ animation - ปุ่มเข้าสู่เว็บไซต์มี shimmer/hover effect - รองรับ responsive เบื้องต้นสำหรับมือถือและแท็บเล็ต - ไม่มี dependency ภายนอก (static HTML/CSS) ## โครงสร้างไฟล์ - `index.html` — หน้าเริ่มต้นของเว็บไซต์ - `style.css` — ไฟล์สไตล์หลัก (ปรับปรุงให้มีเอฟเฟกต์และ responsive) - `images/` — โฟลเดอร์เก็บรูปภาพ (เช่น `queen_sirikit.webp`, `bg_monochrome.jpg`) ## วิธีดูตัวอย่าง (Preview) วิธีที่ง่ายที่สุดคือเปิด `index.html` ในเบราว์เซอร์โดยตรง (ดับเบิลคลิกหรือเลือก Open File) แต่บางฟีเจอร์ (เช่นการโหลดฟอนต์ผ่านเว็บ) อาจทำงานได้ดีกว่าเมื่อเสิร์ฟผ่าน HTTP server เล็กๆ ตัวอย่างการรัน HTTP server แบบง่าย (Python 3): ```bash cd /mnt/Server/htdocs/intro python3 -m http.server 8000 # จากนั้นเปิด: http://localhost:8000 ``` หรือถ้าใช้ Node.js / serve (ต้องติดตั้ง `serve`): ```bash npx serve . ``` ## ปรับแต่ง (Customization) - เปลี่ยนรูป: แทนที่ไฟล์ใน `images/` (เช่น `queen_sirikit.webp`) แล้วตรวจสอบ `index.html` ให้ชี้ไปยังไฟล์ใหม่ - ปรับขนาด/เอฟเฟกต์: แก้ไข `style.css` โดยตรง (คลาสสำคัญ: `.emblem img`, `.emblem::before`, `body::before`, `h1`, `button.enter`) - เปลี่ยนพื้นหลัง: แก้ `background` ใน `.intro` (ไฟล์ `bg_monochrome.jpg` หรือ URL ใหม่) - ฟอนต์: ปัจจุบันใช้ Google Font `Sarabun` ใน `` ของ `index.html` — หากต้องการเปลี่ยน ให้แก้ `` ไปยังฟอนต์ที่ต้องการ ## ข้อมูลเพิ่มเติม / แหล่งที่มา - ฟอนต์: Google Fonts — Sarabun - รูปภาพ: โปรดตรวจสอบสิทธิ์การใช้งานของรูปภาพที่อยู่ใน `images/` ก่อนเผยแพร่สาธารณะ ## ผู้พัฒนา - Goragod Wiriya