# Coffee House - ร้านกาแฟออนไลน์

โปรเจกต์นี้เป็น Frontend Landing Page สำหรับร้านกาแฟออนไลน์ที่สามารถสั่งผ่านเว็บแอป ทั้งรับที่ร้านและจัดส่ง พร้อมระบบชำระเงินผ่าน QR Code

## 🤖 Prompt สำหรับสร้างโปรเจกต์

```
frontend landingpage ร้านกาแฟ online ที่สามารถสั่งผ่านเว็บแอป ที่ร้าน หรือ จัดส่ง ได้ ชำระเงินผ่าน qr ได้ ควรมีคุณสมบัติอะไรบ้าง
เทคโนโลยี html css vanila javascript

ต้องการ:
- เมนูสินค้าพร้อมรูปภาพ ตัวเลือกการปรุง
- ระบบตะกร้าสินค้า
- เลือกรับที่ร้าน/จัดส่ง
- ชำระเงินผ่าน QR Code
- รูปภาพออนไลน์
- รายการสินค้าแยกเป็น JSON
- แผนที่ร้าน
- Responsive Design
```

## คุณสมบัติหลัก

### 🏠 หน้าแรก (Hero Section)
- แสดงข้อมูลร้านและสินค้าเด่น
- Call-to-Action ที่ชัดเจน
- ดีไซน์ที่ตอบสนองทุกอุปกรณ์

### 📱 เลือกประเภทการสั่ง
- **รับที่ร้าน (Pickup)** - ไม่มีค่าจัดส่ง
- **จัดส่ง (Delivery)** - ค่าจัดส่ง 30 บาท

### 🍵 ระบบเมนู
- **หมวดหมู่สินค้า**: กาแฟ, ชา, สมูทตี้, ของหวาน
- **ตัวเลือกการปรุง**: ขนาด, ความหวาน, ความเข้มข้น
- **รูปภาพและรายละเอียดสินค้า**
- **ราคาที่ปรับตามขนาด**

### 🛒 ระบบตะกร้าสินค้า
- เพิ่ม/ลบสินค้า
- ปรับจำนวนสินค้า
- คำนวนราคารวมอัตโนมัติ
- บันทึกข้อมูลใน Local Storage

### 💳 ระบบสั่งซื้อและชำระเงิน
- กรอกข้อมูลลูกค้า (ชื่อ, เบอร์โทร)
- ที่อยู่จัดส่ง (สำหรับ Delivery)
- หมายเหตุพิเศษ
- **ชำระเงินผ่าน QR Code**
- ยืนยันการสั่งซื้อ

### 📋 ข้อมูลร้าน
- เกี่ยวกับร้าน
- ที่อยู่และข้อมูลติดต่อ
- เวลาเปิด-ปิด
- Social Media Links

## เทคโนโลยีที่ใช้

- **HTML5** - โครงสร้างเว็บไซต์
- **CSS3** - การออกแบบและ Responsive Design
- **Vanilla JavaScript** - ฟังก์ชันการทำงานและ Interactive Elements
- **Font Awesome** - ไอคอน
- **Google Fonts** - ฟอนต์ Kanit สำหรับภาษาไทย

## โครงสร้างไฟล์

```
coffee/
├── index.html          # หน้าเว็บหลัก
├── css/
│   └── style.css      # CSS สำหรับการออกแบบ
├── js/
│   ├── menu-data.js   # ตัวจัดการข้อมูลเมนู (โหลดจาก JSON)
│   ├── cart.js        # ระบบตะกร้าสินค้า
│   └── main.js        # ฟังก์ชันหลักของเว็บไซต์
├── data/
│   └── menu.json      # ข้อมูลเมนูและสินค้า (JSON)
└── images/            # โฟลเดอร์สำหรับรูปภาพ (เก็บรูปเพิ่มเติม)
```

## การปรับปรุงล่าสุด

### 🖼️ **รูปภาพจริงจาก Unsplash**
- แทนที่ emoji ด้วยรูปภาพคุณภาพสูงจาก Unsplash
- รูปภาพ responsive และโหลดเร็ว
- มี fallback image เมื่อโหลดไม่สำเร็จ
- Hero image และ About section ใช้รูปภาพจริง

### 📄 **แยกข้อมูลเป็น JSON**
- ย้ายข้อมูลเมนูจาก JavaScript ไปเป็นไฟล์ `data/menu.json`
- โหลดข้อมูลแบบ asynchronous
- ง่ายต่อการแก้ไขและจัดการข้อมูล
- รองรับการโหลดข้อมูลจาก API ในอนาคต

### 🎨 **การปรับปรุง UI**
- รูปภาพในเมนูมี hover effect
- การแสดงผลรูปภาพในตะกร้าสินค้า
- Loading animation ขณะโหลดข้อมูล
- Error handling สำหรับรูปภาพที่โหลดไม่สำเร็จ

### 🗺️ **แผนที่และข้อมูลร้าน**
- Google Maps Embed แสดงตำแหน่งร้าน
- ข้อมูลที่อยู่และการเดินทาง
- เวลาเปิด-ปิด และข้อมูลติดต่อ
- Social Media Links

## วิธีการใช้งาน

1. **เปิดเว็บไซต์**: เข้าถึงผ่าน `index.html`
2. **เลือกประเภทการสั่ง**: Pickup หรือ Delivery
3. **เลือกสินค้า**: เลือกจากเมนูและปรับแต่งตามต้องการ
4. **เพิ่มลงตะกร้า**: คลิกปุ่ม "เพิ่มลงตะกร้า"
5. **ตรวจสอบตะกร้า**: คลิกไอคอนตะกร้าเพื่อดูสินค้า
6. **สั่งซื้อ**: กรอกข้อมูลและดำเนินการชำระเงิน
7. **ชำระเงิน**: สแกน QR Code และยืนยันการชำระเงิน

## ฟีเจอร์เด่น

### 🎨 การออกแบบ
- **Responsive Design** - รองรับทุกขนาดหน้าจอ
- **Modern UI/UX** - ดีไซน์สวยงามและใช้งานง่าย
- **Color Scheme** - ใช้โทนสีน้ำตาลที่เหมาะกับธีมกาแฟ
- **Typography** - ฟอนต์ Kanit สำหรับการอ่านที่ชัดเจน

### ⚡ ประสิทธิภาพ
- **Fast Loading** - โหลดเร็วด้วย Vanilla JavaScript
- **Local Storage** - บันทึกข้อมูลตะกร้าแม้ปิดเบราว์เซอร์
- **Smooth Animations** - เอฟเค็ตการเคลื่อนไหวที่นุ่มนวล
- **Error Handling** - จัดการข้อผิดพลาดอย่างเหมาะสม

### 📱 Mobile-First
- **Touch-Friendly** - ออกแบบสำหรับการใช้งานบนมือถือ
- **Hamburger Menu** - เมนูแบบซ่อนสำหรับหน้าจอขนาดเล็ก
- **Optimized Layout** - จัดวางเนื้อหาให้เหมาะกับอุปกรณ์

## การปรับแต่ง

### เปลี่ยนข้อมูลร้าน
แก้ไขไฟล์ `index.html` ในส่วน:
- ชื่อร้าน
- ที่อยู่
- เบอร์โทรศัพท์
- เวลาเปิด-ปิด

### เพิ่มเมนูใหม่
แก้ไขไฟล์ `js/menu-data.js`:
```javascript
// เพิ่มสินค้าใหม่
{
    id: 21,
    name: "ชื่อสินค้า",
    description: "คำอธิบาย",
    price: 60,
    category: "coffee",
    image: "☕",
    options: {
        size: ["S", "M", "L"]
    }
}
```

### ปรับแต่งสี
แก้ไขไฟล์ `css/style.css`:
```css
/* เปลี่ยนสีหลัก */
:root {
    --primary-color: #8B4513;
    --secondary-color: #D2691E;
}
```

## ข้อมูลเมนูตัวอย่าง

### ☕ กาแฟ
- เอสเพรสโซ่ (45฿)
- อเมริกาโน่ (50฿)
- คาปูชิโน่ (65฿)
- ลาเต้ (70฿)
- มอคค่า (75฿)
- แมคคิอาโต้ (80฿)
- ฟราปเป้ (85฿)
- เอสเพรสโซ่โรมาโน่ (55฿)

### 🧋 ชา
- ชาไทย (40฿)
- ชาเขียว (45฿)
- ชานมไข่มุก (55฿)
- ชาอู่หลง (50฿)

### 🥤 สมูทตี้
- สมูทตี้มะม่วง (60฿)
- สมูทตี้สตรอเบอร์รี่ (65฿)
- สมูทตี้กล้วยหอม (55฿)
- สมูทตี้อโวคาโด (70฿)

### 🍰 ของหวาน
- ชีสเค้ก (85฿)
- บราวนี่ (75฿)
- ทิรามิสุ (90฿)
- ครัวซองต์ (45฿)
- มัฟฟิน (40฿)
- คุกกี้ (35฿)
- โดนัท (25฿)
- แพนเค้ก (120฿)

## การพัฒนาต่อยอด

### เชื่อมต่อ Backend
- API สำหรับจัดการคำสั่งซื้อ
- ระบบจัดการสต็อกสินค้า
- ระบบสมาชิก

### ระบบชำระเงิน
- เชื่อมต่อ Payment Gateway จริง
- รองรับบัตรเครดิต/เดบิต
- Mobile Banking

### ระบบจัดการ
- Admin Panel สำหรับจัดการเมนู
- ระบบรายงานยอดขาย
- ระบบติดตามออเดอร์

### PWA Features
- Service Worker สำหรับ Offline Support
- Push Notifications
- Add to Home Screen

## การติดตั้งและรัน

1. วางไฟล์ทั้งหมดในโฟลเดอร์เว็บเซิร์ฟเวอร์
2. เปิดเบราว์เซอร์และเข้า `http://localhost/coffee/`
3. เว็บไซต์พร้อมใช้งาน

## Browser Support

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
- Mobile Safari
- Chrome Mobile

---

**หมายเหตุ**: โปรเจกต์นี้เป็น Frontend Demo สำหรับการนำเสนอ สำหรับการใช้งานจริงควรพัฒนา Backend และระบบความปลอดภัยเพิ่มเติม