PROINVENTIVE

เจ้าของผลงานเล่าไว้แบบนี้

https://peeraponggis.github.io/webproinventive/ # webproinventive เว็บไซต์ PROINVENTIVE — โครงหน้าและภาษาการออกแบบอ้างอิงจาก notion.com รองรับ 2 ภาษา (ไทย / อังกฤษ), มี **Console · Chat with Pi** และบอร์ดงาน **Pi Tasks** --- ## โครงสร้างไฟล์ ``` . ├── index.html หน้าแรก (hero, features, use cases, testimonials, CTA, footer) ├── product.html หน้าผลิตภัณฑ์ ├── demo.html หน้ารวมคลิปเดโมทุกระบบ ├── style.css design system ทั้งเว็บ (tokens, nav, ปุ่ม, การ์ด, footer) ├── app.js sticky header, เมนูมือถือ, คำหมุนใน hero, marquee, reveal-on-scroll ├── i18n.js ระบบ 2 ภาษา + พจนานุกรม TH/EN ของทั้งเว็บ ├── pi-console.js Console · Chat with Pi (logic + adapter สำหรับ CRM/SaaS) ├── pi-console.css สไตล์ของคอนโซล ├── img/ โลโก้ (pilogo.png), favicon, ไอคอน └── pi_tasks/ บอร์ดงานแบบ Kanban ├── index.html ├── tasks.js board logic, drag & drop, โหมดสาธิตสด, adapter ├── tasks-i18n.js คำแปลเฉพาะหน้า Pi Tasks (merge เข้า I18N) └── tasks.css ``` ## รันบนเครื่อง เป็นเว็บ static ล้วน ไม่ต้อง build: ```bash python -m http.server 8123 ``` แล้วเปิด <http://localhost:8123> > ต้องเปิดผ่าน HTTP server ไม่ใช่ `file://` เพราะไฟล์ JS/CSS ถูกโหลดแบบ relative path --- ## ระบบ 2 ภาษา (i18n) ทุกข้อความในหน้าเว็บผูกกับ key ในพจนานุกรมของ [`i18n.js`](i18n.js) ```html <span data-i18n="nav.pricing">ราคา</span> <p data-i18n-html="some.key">รองรับแท็ก HTML</p> <input data-i18n-attr="placeholder:tk.search,

โดย peeraponggis · ดูโพสต์ต้นทาง