ชื่อโปรเจกต์: Binary MLM Tree Viewer Mockupเป้าหมาย: สร้างไฟล์ HTML5 เดี่ยว (.html) ที่ประกอบด้วย HTML, CSS และ JavaScript ทั้งหมด เพื่อจำลองการแสดงผังสายงาน MLM แบบ Binary ที่มีคุณสมบัติการแสดงผลและโต้ตอบขั้นสูง📝 รายละเอียด Prompt1. โครงสร้างไฟล์ (File Structure)ต้องเป็น ไฟล์ HTML5 เดี่ยว (index.html หรือชื่ออื่นตามสะดวก)HTML, CSS, และ JavaScript ทั้งหมดต้องอยู่ในไฟล์เดียวCSS ต้องอยู่ในแท็ก <style> ภายใน <head>.JavaScript ต้องอยู่ในแท็ก <script> ภายใน <body> หรือ <head>.2. เทคโนโลยีที่ใช้ (Technology Stack)HTML5: สำหรับโครงสร้างCSS3: สำหรับการจัดรูปแบบและการแสดงผลผัง (ใช้ Flexbox หรือ Grid/Custom Properties เพื่อความยืดหยุ่น)Vanilla JavaScript (ES6+): สำหรับการจัดการข้อมูล, การสร้าง/อัปเดต DOM, และการโต้ตอบของผู้ใช้ ห้ามใช้ Library/Framework ภายนอก เช่น React, Vue, jQuery, หรือ D3.js.3. ข้อมูลจำลอง (Mock Data)สร้างโครงสร้างข้อมูล JavaScript (เช่น อาร์เรย์ของอ็อบเจกต์ หรืออ็อบเจกต์ที่ใช้ ID/ParentID) เพื่อจำลองสมาชิกอย่างน้อย 15-20 คน โดยมีการเชื่อมโยงแบบ Binary และรวมรายละเอียดดังนี้:FieldDescriptionTypeExampleidรหัสสมาชิกNumber/String1parentIdรหัสสมาชิกที่แนะนำ (null สำหรับ Root)Number/String1 (parent of 3)sideตำแหน่งในผัง: "L" (ซ้าย) หรือ "R" (ขวา)String"L"nameชื่อสมาชิกString"Tony Stark"positionตำแหน่ง/Rank ในบริษัทString"Diamond"avatarUrlURL รูปโปรไฟล์จำลอง (ใช้ Placeholder Image URL)Stringhttps://via.placeholder.com/50scoreLeftคะแนนสะสมทีมซ้ายNumber15,000scoreRightคะแนนสะสมทีมขวาNumber22,500isExpandedสถานะการขยายผังย่อย (ค่าเริ่มต้นเป็น true/false)Booleantruedetailsรายละเอียดอื่นๆ (ใช้แสดงใน Popover/Tooltip)String"Joined: 2024/01/01"4. คุณสมบัติการแสดงผล (Visual Features)Node (กล่องสมาชิก): แต่ละกล่องต้องแสดง:รูปโปรไฟล์ (Avatar)ชื่อ และ ตำแหน่ง (Rank)คะแนนซ้าย/ขวา ที่ชัดเจนLayout: จัดเรียงแบบผัง Binary Tree ที่สวยงามและชัดเจน (ใช้ CSS สำหรับการเชื่อมต่อเส้น)การเชื่อมต่อ: ต้องมีเส้นเชื่อมโยงจาก parentId ไปยังลูกทั้งซ้ายและขวาอย่างชัดเจน.5. คุณสมบัติการโต้ตอบ (Interactive Features)การย่อ/ขยาย/หุบผัง (Expand/Collapse):แต่ละ Node ต้องมีปุ่ม/ไอคอนที่ให้ผู้ใช้ คลิกเพื่อซ่อน (Collapse) หรือ แสดง (Expand) สมาชิกที่อยู่ภายใต้ Node นั้นๆ.การหุบจะซ่อนทั้ง Subtree.การดูรายละเอียดเพิ่มเติม (Tooltip/Popover):เมื่อ Hover หรือคลิก ที่ Node ให้แสดงรายละเอียดเพิ่มเติมจากฟิลด์ details (เช่น Popover ขนาดเล็ก).การเลื่อนดูจำนวนมากๆ (Horizontal Scrolling):ผังต้องสามารถขยายออกทางด้านข้างได้ (กรณีมีสมาชิกจำนวนมาก) และมีแถบ Scrollbar แนวนอน เพื่อให้ดูผังทั้งหมดได้.Zoom (Optional but recommended):หากเป็นไปได้ ให้มีการจำลองการ Zoom-in/Zoom-out โดยการใช้ CSS transform: scale() หรือการจัดการขนาด Font/Node ผ่าน JavaScript.6. ข้อจำกัดที่สำคัญ (Critical Constraints)ห้ามใช้ JS Library ภายนอกห้ามใช้ CSS Frameworks (เช่น Bootstrap, Tailwind)ห้ามมีไฟล์ JS หรือ CSS แยก (ทุกอย่างต้องอยู่ในไฟล์ .html เดียวเท่านั้น)🚀 สิ่งที่ต้องการจากการตอบกลับโค้ด HTML5 ที่ทำงานได้เต็มรูปแบบ (Full working HTML5 file) พร้อมข้อมูลจำลองและฟังก์ชัน JavaScript ข้างต้น เพื่อเป็น Mockup ที่พร้อมใช้งานทันที
verified 
CSNET commited on 