🎮 HYPE-MACRO Store - Premium Gaming Mouse Website

เว็บไซต์สำหรับแสดงและจำหน่ายผลิตภัณฑ์ HYPE-MACRO Premium Gaming Mouse ที่ใช้เทคโนโลยีล้ำสมัย Omron 20M Switch, Polling Rate 8K และวัสดุพรีเมียมคุณภาพสูง

🌟 คุณสมบัติเด่น

🖱️ Premium Gaming Mouse Features

• 🔧 Omron Switch 20M - สวิตช์คุณภาพสูงที่ทนทานถึง 20 ล้านครั้งการกด
• ⚡ Polling Rate 8K - อัตราการอัปเดตตำแหน่ง 8,000 Hz ที่รวดเร็วที่สุดในตลาด
• 💎 Premium Materials - ผลิตจากพลาสติก ABS คุณภาพสูงเคลือบสีขาวเนื้อด้าน
• 🎯 Professional Gaming - ออกแบบมาเพื่อเกมเมอร์ทุกระดับ

🎨 Modern Web Design

• 🌓 Dark/Light Mode - รองรับโหมดมืดและสว่างพร้อมการปรับตามระบบอัตโนมัติ
• 📱 Fully Responsive - ใช้งานได้ลื่นไหลในทุกอุปกรณ์และขนาดหน้าจอ
• ✨ Smooth Animations - แอนิเมชั่นที่ลื่นไหลและสวยงาม
• 🎬 Video Background - พื้นหลังวิดีโอแบบสุ่มเพื่อประสบการณ์ที่น่าประทับใจ
• 🎪 Interactive Carousel - คาร์รูเซลแสดงสินค้าพร้อมการควบคุมอัตโนมัติและด้วยตนเอง

🚀 Advanced Features

• 🔄 Auto-rotating Hero Section - หน้าแรกที่เปลี่ยนเนื้อหาอัตโนมัติ
• 🎦 Expert Review Videos - วิดีโอรีวิวจากผู้เชี่ยวชาญ
• 📧 Newsletter Subscription - ฟอร์มรับข่าวสารและโปรโมชั่น
• 🌐 Social Media Integration - เชื่อมต่อโซเชียลมีเดียทุกแพลตฟอร์ม

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

• HTML5 - โครงสร้างหน้าเว็บที่ทันสมัย
• CSS3 - การจัดแต่งและแอนิเมชั่นขั้นสูง
• Tailwind CSS - เฟรมเวิร์ค CSS สำหรับการพัฒนาที่รวดเร็ว
• JavaScript (ES6+) - ฟังก์ชันการทำงานและการโต้ตอบที่ทันสมัย
• Font Awesome & RemixIcon - ไอคอนสวยงามและครบครัน
• Google Fonts - ฟอนต์ IBM Plex Sans Thai สำหรับการอ่านที่ชัดเจน

📁 โครงสร้างโปรเจ็กต์

Hype-Macro_Store/
├── index.html              # หน้าเว็บหลัก
├── style.css              # ไฟล์ CSS สำหรับจัดแต่งเว็บไซต์
├── script.js              # ไฟล์ JavaScript สำหรับฟังก์ชันการทำงาน
├── tailwind.config.js     # การตั้งค่า Tailwind CSS
└── README.md              # เอกสารนี้

🛠️ การติดตั้งและใช้งาน

⚡ Quick Start

1. ดาวน์โหลดหรือ Clone โปรเจ็กต์

   git clone https://github.com/xenodeve/Hype-Macro_Store.git
   cd Hype-Macro_Store

2. เปิดไฟล์ index.html ด้วยเว็บเบราว์เซอร์

   • คลิกขวาที่ไฟล์ → Open with → Browser
   • หรือเปิดเบราว์เซอร์แล้วลากไฟล์เข้าไป

3. เริ่มใช้งานได้ทันที!

   • ไม่จำเป็นต้องติดตั้งแพ็กเกจเพิ่มเติม
   • ใช้ CDN สำหรับไลบรารีทั้งหมด

📋 ความต้องการระบบ

• เว็บเบราว์เซอร์ที่ทันสมัย: Chrome 70+, Firefox 65+, Safari 12+, Edge 79+
• การเชื่อมต่ออินเทอร์เน็ต: สำหรับโหลดฟอนต์และไอคอนจาก CDN

🎯 หน้าและฟีเจอร์หลัก

🏠 หน้าแรก (Hero Section)

• พื้นหลังวิดีโอแบบสุ่ม
• ปุ่ม CTA สำหรับการนำทาง
• แอนิเมชั่นการโหลดที่สวยงาม

⭐ ส่วนคุณสมบัติ (Features)

แสดงจุดเด่นของผลิตภัณฑ์:

• Omron Switch 20M - ความทนทานระดับมืออาชีพ
• Premium Materials - วัสดุคุณภาพสูง
• Polling Rate 8K - ประสิทธิภาพสูงสุด

🎬 ส่วนรีวิว (Reviews)

• วิดีโอรีวิวจากผู้เชี่ยวชาญ
• คาร์รูเซลที่เลื่อนอัตโนมัติ
• ปุ่มควบคุมสำหรับผู้ใช้

🛍️ ส่วนสินค้า (Products)

แสดงสินค้า 4 รุ่นพิเศษ:

• Dark Project x VXE R1 Pro Max (LIMITED)
• VXE R1 Pro Max
• VXE R1 Pro
• Red Square x VXE R1 SE+ (LIMITED)

📞 ส่วนติดต่อ (Contact)

• ลิงก์โซเชียลมีเดียครบครัน
• ฟอร์มสมัครรับข่าวสาร
• ข้อมูลการติดต่อ

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

สามารถปรับแต่งเว็บไซต์ได้โดยการแก้ไขไฟล์ต่างๆ:

🎭 การจัดแต่งเพิ่มเติม

/* style.css */
:root {
  --primary-color: #your-color;
  --secondary-color: #your-color;
  --accent-color: #your-color;
}

⚙️ การเพิ่มฟังก์ชันการทำงาน

// script.js
// เพิ่มฟังก์ชันใหม่ๆ ที่นี่

🌈 การตั้งค่า Tailwind CSS

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      // เพิ่มการกำหนดค่าใหม่
    }
  }
}

🔧 คุณสมบัติเทคนิค

🌓 Dark/Light Mode System

• ตรวจจับการตั้งค่าระบบอัตโนมัติ
• สามารถสลับได้ด้วยตนเอง
• จดจำการตั้งค่าของผู้ใช้

📱 Responsive Design

/* Mobile First Approach */
.container {
  /* Mobile styles */
}

@media (min-width: 768px) {
  /* Tablet styles */
}

@media (min-width: 1024px) {
  /* Desktop styles */
}

✨ Animation System

• CSS3 Transitions และ Transforms
• การใช้ will-change สำหรับ performance
• Intersection Observer สำหรับ scroll animations

🚀 Performance Optimization

• Lazy Loading สำหรับรูปภาพและวิดีโอ
• CDN สำหรับไลบรารีภายนอก
• Minified CSS/JS สำหรับ production
• Optimized Images รูปแบบ WebP และ compression

🌐 การ Deploy

Vercel (แนะนำ)

# เชื่อมต่อ GitHub repository
# เลือก build command: ไม่จำเป็น (Static Site)
# เลือก output directory: ./
# Deploy!

Netlify

# Drag & Drop หรือเชื่อมต่อ Git
# Build settings: ไม่จำเป็น
# Publish directory: ./

GitHub Pages

1. ไปที่ Settings → Pages
2. เลือก Source: Deploy from a branch
3. เลือก Branch: main
4. Save

🔍 Browser Support

Browser	Version	Glass Effects	Animations
Chrome	70+	✅	✅
Firefox	65+	✅	✅
Safari	12+	✅	✅
Edge	79+	✅	✅

🐛 การแก้ไขปัญหา

ปัญหาที่พบบ่อย

• ฟอนต์ไม่แสดง: ตรวจสอบการเชื่อมต่ออินเทอร์เน็ตสำหรับ Google Fonts
• แอนิเมชั่นกระตุก: ลองใช้ transform3d() แทน transform
• วิดีโอไม่เล่น: ตรวจสอบ browser autoplay policies
• โหมดมืด/สว่างไม่ทำงาน: ตรวจสอบ localStorage support

Debug Commands

# ตรวจสอบ console errors
F12 → Console

# ตรวจสอบ network requests  
F12 → Network

# ตรวจสอบ responsive design
F12 → Device Toolbar (Ctrl+Shift+M)

🏆 Features Showcase

🎮 Gaming-Focused Design

• เหมาะสำหรับ target audience ที่เป็นเกมเมอร์
• สีสันและธีมที่สะท้อนความเป็น gaming
• UX ที่เน้นความเร็วและประสิทธิภาพ

💫 Modern Web Standards

• Semantic HTML5
• CSS Grid และ Flexbox
• ES6+ JavaScript
• Progressive Enhancement

🔐 Security & Privacy

• ไม่มีการเก็บข้อมูลส่วนบุคคล
• External resources จาก trusted CDNs เท่านั้น
• HTTPS ready

📈 Future Enhancements

• 📊 Analytics Dashboard - สถิติการเข้าชม
• 🌍 Multi-language - รองรับหลายภาษา

👨‍💻 ผู้พัฒนา

โปรเจ็กต์นี้พัฒนาโดยนักพัฒนาเว็บไซต์ที่มีความสนใจในเทคโนโลยี Gaming และ Modern Web Development

• Dev: Xeno
• Student ID: s0330250
• Repository: Hype-Macro_Store

📜 License

© 2025 HYPE-RX. สงวนลิขสิทธิ์ทุกประการ

---

🚀 Happy Coding! 🎮