galaxy-class-schedule

Galaxy Class Schedule

เว็บตารางคลาสออกกำลังกาย Galaxy — แยกเป็นไฟล์อิสระต่อสาขา ไม่มี dependency ไม่ต้อง build แต่ละสาขาเป็นหน้าเดียวจบในตัวเอง ไม่มีลิงก์เชื่อมข้ามสาขา โดยตั้งใจ

โครงสร้าง

robots.txt             กันทุก path ไม่ให้ search engine เก็บไปแสดงผล
BRANCH-LINKS.md         ลิงก์ประจำสาขาสำหรับทีมงาน (ใช้ก๊อปส่งลูกค้า อ่านก่อนส่งทุกครั้ง)
bangna/index.html       เว็บสาขาบางนา
assets/
  bg/galaxy.jpg          พื้นหลังส่วนหัว ใช้ร่วมกันทุกสาขา
  images/
    cycling/             รูปคลาสของ Cycling Studio
    studio1/              รูปคลาสของ Studio 1
    pilates/              รูปคลาสของ Pilates Studio
    _library/             รูปคลาสสำรอง ยังไม่ได้ใช้
  README.md              กฎการตั้งชื่อไฟล์รูป

ทำไมแยกไฟล์ต่อสาขา

ลิงก์ที่ส่งให้ลูกค้าต้องเปิดแล้วเห็นแค่สาขาของตัวเอง ไม่มีทางกดหลงไปสาขาอื่น รายละเอียดวิธีป้องกันความสับสน (path, noindex, สีเน้นต่อสาขา, ป้ายกำกับ) อยู่ใน BRANCH-LINKS.md

มีอะไรในแต่ละหน้า

• 3 สตูดิโอ: Cycling / Studio 1 / Pilates สลับด้วยแท็บ
• ปรับตามความกว้างจอ 3 ระดับ ไม่มีการเลื่อนแนวนอน
  • ≥1040px ตารางสัปดาห์พร้อมรูป
  • 640–1039px ตารางสัปดาห์แบบชิป (ตัดรูปออก)
  • <640px อะเจนดารายวัน เลือกวันได้
• สถานะอยู่ใน URL เช่น ?studio=pilates&day=Sat ส่งลิงก์ตรงไปหน้าที่ต้องการได้
• ตารางเป็น <table> จริง อ่านด้วย screen reader ได้ รองรับคีย์บอร์ดและ prefers-reduced-motion
• ป้าย “📍 สาขา…” ใต้โลโก้ และ <title> บอกชื่อสาขาเสมอ กันเปิดผิดหน้าแล้วไม่รู้ตัว

แก้ตารางคลาสของสาขาหนึ่ง

เปิด <สาขา>/index.html หาบล็อก const STUDIOS = { แล้วแก้ในนั้น รูปแบบหนึ่งคาบคือ c('ชื่อคลาส','ชื่อครู') เพิ่มเวลาพิเศษเป็นตัวที่สาม และระบุชื่อไฟล์รูปเองเป็นตัวที่สี่

['19.30','20.20',{ Mon:c('BODY PUMP','BENZ'), Wed:c('YOGA','NAM','20.00 – 20.50') }]

แก้เดือน / สาขา

ในไฟล์ <สาขา>/index.html:

• เดือน: const MONTH = 'September 2026';
• สาขา: const BRANCH = { key:'bangna', name:'สาขาบางนา', nameEn:'Bangna' }; แล้วแก้ <title> กับแท็ก og: ใน <head> ให้ตรงกัน

เพิ่มสาขาใหม่

ทำตามขั้นตอนใน BRANCH-LINKS.md

เพิ่มรูปคลาส

วางไฟล์ในโฟลเดอร์สตูดิโอ ตั้งชื่อตามชื่อคลาสตัวพิมพ์เล็ก แทนช่องว่างด้วย - เช่น BODY PUMP → assets/images/studio1/body-pump.jpg รายละเอียดทั้งหมดอยู่ใน assets/README.md

รันแบบ local server

จำเป็นเฉพาะตอนอยากทดสอบให้เหมือนของจริง (เปิดไฟล์ตรง ๆ ก็ใช้ได้)

npx serve .