ชุด UX/UI asset สำหรับแดชบอร์ดเซิร์ฟเวอร์ Unturned — โทเคนสี/ตัวอักษร/ระยะ, โลโก้, ไอคอน และธีมที่เอาไปใช้กับ
public/index.html ได้ทันทีโดยไม่ต้องแก้ HTML · ไฟล์ทั้งหมดเป็น SVG/CSS เปิดดูได้ในเบราว์เซอร์
1 · Brand
brand/logo-mark.svg
ใช้ currentColor → กำหนดสีได้เอง
16pxMark ≥ 24px · Horizontal ≥ 160px กว้าง · เว้นขอบรอบโลโก้ ≥ ¼ ความสูงของ mark
Hero / login · avatar · empty state — ห้ามวางทับข้อความหรือข้อมูลระบบ
(ภาพ 6 อารมณ์อยู่ใน brand/mascot-kanomjeen-sheet.png)
2 · สี
แบรนด์ (พาเลตต์ v2 · navy game-admin)
พื้น/ตัวอักษร
สถานะ (ใช้คู่กับข้อความเสมอ ไม่ใช้สีล้วน)
3 · ตัวอักษร
ลำดับฟอนต์: --kj-font-sans = Prompt (โหลดจาก Google Fonts) → Noto Sans Thai → IBM Plex Sans Thai → Sarabun
— ถ้าเน็ตหลุดหรือโหลดเว็บฟอนต์ไม่ได้ จะถอยไปใช้ฟอนต์ไทยในเครื่องอัตโนมัติ
4 · ไอคอน (แทน emoji เดิม)
ใช้คลาส kj-icon--* — สีมาจาก currentColor จึงเปลี่ยนสีตามปุ่ม/สถานะได้ทันที
5 · ปุ่ม
ทุกปุ่มมีสถานะ hover / active (ยุบ 1px) / disabled และวงแหวนโฟกัสสำหรับคีย์บอร์ด — เดิมแดชบอร์ดไม่มีสถานะโฟกัสเลย
6 · องค์ประกอบ
| สถานะ | SteamID64 | ชื่อ |
|---|---|---|
| ออนไลน์ | 76561198149088558 | KaNomBook |
| ออฟ | 76561198831261559 | Owner |
กด Enter เพื่อส่งคำสั่ง
7 · ระยะ/มุม/เงา
8 · หน้าจอจริง (ถ่ายจากแดชบอร์ดที่รันอยู่)
ภาพชุดนี้ถูกถ่ายอัตโนมัติด้วย Chromium headless ผ่านสคริปต์ test/ui-check.mjs — รัน
npm run check:ui:shots เพื่อถ่ายใหม่ทับเมื่อ UI เปลี่ยน
9 · กฎการทำงาน UX (interaction spec)
- สถานะทุกอย่างที่โหลดได้มี 3 สถานะชัดเจน: กำลังโหลด (skeleton/spinner ปุ่ม) · ว่างเปล่า (ข้อความบอกเหตุ) · ผิดพลาด (toast สีแดง + แถบ “ออฟไลน์” ด้านบน)
- ปุ่มที่พังไม่ได้กด "หยุด" / "รีสตาร์ท" / "อัปเดต" / "ออกจากระบบ" ต้องยืนยันก่อนทุกครั้ง — แต่ปุ่มอ่านข้อมูลไม่ต้อง
- Toastมุมขวาล่าง อายุ 3.4 วิ (2.2 วิ สำหรับข้อความสั้น) กดเพื่อปิดได้ · โหมดผิดพลาดเป็น
role=alert - คีย์บอร์ด/ โฟกัสช่องคำสั่ง (หน้าคอนโซล) · Ctrl+S บันทึกไฟล์/config · Esc ปิด modal/drawer · Tab วนอยู่ในกล่องที่เปิด
- โฟกัสเปิด modal → โฟกัสเข้า modal · ปิด → คืนที่ปุ่มเดิม · เปิด drawer → เข้าที่เมนู · เลือกเมนู → โฟกัสไปที่เนื้อหา (ไม่ใช่กลับไปที่ปุ่มเมนู)
- จอเล็ก≤900px เมนูข้างกลายเป็น drawer (เมนูที่ปิดอยู่ตั้ง
inertไม่รับ Tab) · ≤640px ซ่อนข้อความปุ่มเหลือไอคอน · ≤560px KPI 2 คอลัมน์ - จอใหญ่KPI ล็อกไว้ 4 คอลัมน์ ไม่ให้แตกเป็นแถวละ 7 ใบ · กลุ่มตัวเลข 2 ช่องกว้างสุด 620px ไม่ยืดเต็มจอ
- การเคลื่อนไหวเคารพ
prefers-reduced-motion— ปิดอนิเมชัน/transition ทั้งหมด - สีสถานะใช้คู่ “จุดสี + ข้อความ” เสมอ ไม่สื่อด้วยสีเดี่ยว (ตาบอดสีใช้ได้)
10 · เอาไปใช้กับแดชบอร์ด
สถานะ: ใช้อยู่จริงแล้ว ใน public/index.html — ธีม + โลโก้ + ไอคอนถูกผูกที่ path
/assets-kanomjeen/… (mount ใน server.js)
ถ้าย้ายไปเครื่องอื่นหรือเสิร์ฟคนละ path ให้เพิ่มบรรทัดนี้ต่อท้าย <style> เดิม:
ต้องการแค่ไฟล์เดียว: tokens/design-tokens.css · ถ้าจะเปลี่ยนไอคอน emoji เป็น SVG
ให้ใช้ <span class="kj-icon kj-icon--console"></span> แทน แล้วคงโครง HTML เดิมไว้