# 🧾 Receipt Designer - โปรแกรมออกแบบใบเสร็จรับเงิน

โปรแกรมออกแบบใบเสร็จรับเงินออนไลน์ที่ทันสมัย รองรับการแก้ไขแบบ WYSIWYG และการส่งออกเป็น PDF

## ✨ ฟีเจอร์หลัก

- 🎨 **ออกแบบแบบ WYSIWYG** - แก้ไขใบเสร็จแบบเห็นผลทันที
- 📄 **เทมเพลตหลากหลาย** - เลือกเทมเพลตที่เหมาะสมกับธุรกิจ
- 🖼️ **เพิ่มโลโก้** - อัปโหลดโลโก้บริษัทได้ง่ายดาย
- 🎯 **การจัดการข้อมูล** - บันทึกข้อมูลบริษัทและลูกค้าอัตโนมัติ
- 🖨️ **พิมพ์และส่งออก** - พิมพ์ใบเสร็จหรือส่งออกเป็น PDF
- 📱 **รองรับมือถือ** - ใช้งานได้บนทุกอุปกรณ์
- 🔍 **ซูมเข้า-ออก** - ดูรายละเอียดอย่างชัดเจน
- ↩️ **Undo/Redo** - ย้อนกลับและทำซ้ำการแก้ไข

## 🚀 การใช้งาน

### 1. เปิดใช้งาน
เปิดไฟล์ `index.html` ในเว็บเบราว์เซอร์

### 2. เลือกเทมเพลต
- คลิกเลือกเทมเพลตที่ต้องการจากแถบด้านข้าง
- แต่ละเทมเพลตมีสไตล์และเลย์เอาต์ที่แตกต่างกัน

### 3. แก้ไขข้อมูล
- คลิกปุ่ม "แก้ไข" เพื่อเข้าสู่โหมดแก้ไข
- คลิกที่ข้อความที่ต้องการแก้ไข
- ใช้แถบเครื่องมือในการจัดรูปแบบ

### 4. เพิ่มโลโก้
- คลิกปุ่ม "เพิ่มโลโก้"
- อัปโหลดไฟล์รูภาพ
- ปรับขนาดและตำแหน่งตามต้องการ

### 5. พิมพ์หรือส่งออก
- คลิกปุ่ม "พิมพ์" สำหรับการพิมพ์
- คลิกปุ่ม "Export PDF" เพื่อส่งออกเป็นไฟล์ PDF

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

- **HTML5** - โครงสร้างหน้าเว็บ
- **CSS3** - การจัดรูปแบบและภาพเคลื่อนไหว
- **JavaScript (ES6+)** - ฟังก์ชันการทำงานหลัก
- **Font Awesome** - ไอคอน
- **Google Fonts** - ฟอนต์ไทย (Sarabun, Prompt, Kanit)

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

```
receipt-designer/
├── index.html          # หน้าหลักของแอปพลิเคชัน
├── script.js           # JavaScript หลักสำหรับฟังก์ชันการทำงาน
├── styles.css          # CSS สำหรับการจัดรูปแบบ
└── README.md           # เอกสารประกอบ
```

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

### การแก้ไขแบบ WYSIWYG
- แก้ไขข้อความโดยตรงบนใบเสร็จ
- เปลี่ยนฟอนต์, ขนาด, สี ได้แบบเรียลไทม์
- จัดตำแหน่งข้อความ (ซ้าย, กลาง, ขวา)

### ระบบเทมเพลต
- เทมเพลตคลาสสิก
- เทมเพลตโมเดิร์น
- เทมเพลตมินิมอล
- เทมเพลตโปรเฟสชันนัล

### การจัดการข้อมูล
- บันทึกข้อมูลบริษัทใน LocalStorage
- ข้อมูลลูกค้าและรายการสินค้า
- คำนวณภาษีมูลค่าเพิ่มอัตโนมัติ

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

### ความต้องการของระบบ
- เว็บเบราว์เซอร์ที่รองรับ HTML5, CSS3, และ JavaScript ES6+
- การเชื่อมต่ออินเทอร์เน็ต (สำหรับ CDN fonts และ icons)

### การรันในเครื่อง
1. ดาวน์โหลดหรือ clone โปรเจ็ค
2. เปิดไฟล์ `index.html` ในเว็บเบราว์เซอร์
3. ไม่จำเป็นต้องติดตั้ง dependencies เพิ่มเติม

### การพัฒนา
- โปรเจ็คนี้เป็น vanilla JavaScript ไม่ต้องใช้ build tools
- แก้ไขไฟล์ได้โดยตรงและรีเฟรชเบราว์เซอร์

## 📱 การรองรับอุปกรณ์

- ✅ Desktop (Chrome, Firefox, Safari, Edge)
- ✅ Tablet (iPad, Android)
- ✅ Mobile (iOS Safari, Chrome Mobile)
- ✅ Responsive Design

## 🤝 การมีส่วนร่วม

หากต้องการมีส่วนร่วมในการพัฒนา:

1. Fork โปรเจ็ค
2. สร้าง feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit การเปลี่ยนแปลง (`git commit -m 'Add some AmazingFeature'`)
4. Push ไปยัง branch (`git push origin feature/AmazingFeature`)
5. เปิด Pull Request

## 📝 License

โปรเจ็คนี้เป็น open source และใช้ภายใต้ [MIT License](LICENSE)

## 👨‍💻 ผู้พัฒนา

**Goragod Wiriya**
- GitHub: [@goragodwiriya](https://github.com/goragodwiriya)
- เว็บไซต์: [https://www.goragod.com](https://www.goragod.com)

## 🙏 ขอบคุณ

- [Font Awesome](https://fontawesome.com/) สำหรับไอคอน
- [Google Fonts](https://fonts.google.com/) สำหรับฟอนต์ไทย
- ชุมชน open source ทั้งหมดที่ให้การสนับสนุน

---

⭐ หากโปรเจ็คนี้มีประโยชน์ อย่าลืมกด Star ให้ด้วยนะครับ!