2026-10-16 22:03:47 +07:00
<!DOCTYPE html>
< html lang = "th" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2026-10-19 02:58:44 +07:00
< title > GaC-Srtool</ title >
2026-10-25 00:45:23 +07:00
< link rel = "stylesheet" href = "css/styles.css?v=2.16" >
2026-10-21 16:30:08 +07:00
< link rel = "stylesheet" href = "css/item-catalog.css?v=2" >
2026-10-16 23:33:26 +07:00
< link rel = "icon" type = "image/png" href = "assets/logo.png" >
2026-10-17 02:35:55 +07:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" ></ script >
2026-10-16 22:03:47 +07:00
</ head >
< body >
<!-- App Header -->
< header class = "app-header" >
< div class = "brand" >
2026-10-16 23:33:26 +07:00
< img src = "assets/logo.png" alt = "GaC Logo" class = "brand-logo-img" >
2026-10-16 22:03:47 +07:00
< div >
2026-10-17 11:56:50 +07:00
< div class = "brand-title" style = "display: flex; align-items: center; gap: 0.5rem;" >
< span > GaC-Srtool</ span >
2026-10-19 02:58:44 +07:00
< span class = "badge-branch" id = "header-branch-badge" style = "display: none;" ></ span >
2026-10-17 11:56:50 +07:00
</ div >
2026-10-17 00:22:03 +07:00
< div class = "brand-subtitle" data-i18n = "appSubtitle" > Star Rail FreeSR & Server Controller</ div >
2026-10-16 22:03:47 +07:00
</ div >
</ div >
< div class = "header-controls" >
2026-10-16 22:37:28 +07:00
<!-- Server Mode Selector -->
2026-10-19 02:58:44 +07:00
< div class = "server-mode-badge" title = "โหมดการเชื่อมต่อเซิร์ฟเวอร์" data-i18n-title = "lblServerModeActive" >
2026-10-16 22:37:28 +07:00
< span > 🌐</ span >
< select id = "server-mode-select" class = "server-mode-select" >
2026-10-17 00:33:33 +07:00
< option value = "gac" selected > GaC-hkrpg-go</ option >
2026-10-24 19:12:10 +07:00
< option value = "firefly" disabled data-i18n = "serverModeFireflyPaused" > FireflyGo (กำลังพัฒนา)</ option >
< option value = "robin" disabled data-i18n = "serverModeRobinPaused" > RobinSR (กำลังพัฒนา)</ option >
2026-10-16 22:37:28 +07:00
</ select >
</ div >
<!-- Language Selector (13 Languages) -->
2026-10-19 02:58:44 +07:00
< select id = "lang-select" class = "form-select btn-sm" style = "width: auto; padding: 0.4rem 0.75rem; background: var(--bg-secondary); cursor: pointer;" title = "Language / ภาษา" data-i18n-title = "languageSelectorTitle" >
2026-10-16 22:16:53 +07:00
</ select >
2026-10-16 22:37:28 +07:00
<!-- Connection Pill -->
2026-10-19 02:58:44 +07:00
< div class = "connection-pill" id = "btn-open-settings" title = "คลิกเพื่อตั้งค่าการเชื่อมต่อ API" data-i18n-title = "apiSettingsTooltip" >
2026-10-16 22:03:47 +07:00
< span class = "status-dot" id = "status-dot" ></ span >
2026-10-16 22:37:28 +07:00
< span id = "connection-status-text" > กำลังตรวจสอบ...</ span >
2026-10-16 22:03:47 +07:00
</ div >
2026-10-16 22:37:28 +07:00
2026-10-19 02:58:44 +07:00
< button class = "btn btn-secondary btn-sm" id = "btn-quick-ping" title = "รีเฟรชการเชื่อมต่อ" data-i18n = "refresh" data-i18n-title = "refresh" >
2026-10-16 22:37:28 +07:00
🔄 รีเฟรช
2026-10-16 22:03:47 +07:00
</ button >
</ div >
</ header >
<!-- Navigation Bar -->
< nav class = "nav-tabs" >
2026-10-17 00:22:03 +07:00
< button class = "tab-btn active" data-tab = "tab-dashboard" data-i18n = "tabDashboard" > 📊 แดชบอร์ด & จัดทีม</ button >
< button class = "tab-btn" data-tab = "tab-avatars" data-i18n = "tabAvatars" > 👥 ตัวละคร</ button >
< button class = "tab-btn" data-tab = "tab-equipment" data-i18n = "tabEquipment" > 🗡️ กรวยแสง & รีลิกส์</ button >
2026-10-18 22:16:18 +07:00
< button class = "tab-btn" data-tab = "tab-inventory" data-i18n = "tabInventory" > 🎒 ไอเทมในกระเป๋า</ button >
2026-10-24 19:12:10 +07:00
< button class = "tab-btn" data-tab = "tab-monster-settings" id = "tab-btn-monster-settings" data-i18n = "tabMonsterSettings" > 👾 Monster Setting</ button >
2026-10-17 13:07:32 +07:00
< button class = "tab-btn" data-tab = "tab-damage-analyst" id = "tab-btn-damage-analyst" data-i18n = "tabDamageAnalyst" > 💥 Damage Analyst</ button >
2026-10-17 00:22:03 +07:00
< button class = "tab-btn" data-tab = "tab-persistent" id = "tab-btn-persistent" data-i18n = "tabPersistent" > 💾 จัดการเซฟ GaC</ button >
< button class = "tab-btn" data-tab = "tab-exrank" id = "tab-btn-exrank" data-i18n = "tabExrank" > ⚡ สกิลพิเศษ Ex-Rank</ button >
< button class = "tab-btn" data-tab = "tab-json" data-i18n = "tabJson" > 📝 จัดการไฟล์ JSON</ button >
< button class = "tab-btn" data-tab = "tab-settings" data-i18n = "tabSettings" > ⚙️ ตั้งค่า</ button >
2026-10-19 02:58:44 +07:00
< div class = "nav-branch-pill" id = "nav-branch-pill" title = "Git Branch ที่ใช้งานอยู่" data-i18n-title = "branchTooltip" style = "display: none;" >
2026-10-17 11:56:50 +07:00
< svg class = "branch-icon" viewBox = "0 0 16 16" width = "12" height = "12" fill = "currentColor" >
< path fill-rule = "evenodd" d = "M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z" ></ path >
</ svg >
2026-10-19 02:58:44 +07:00
< span id = "nav-branch-name" ></ span >
2026-10-17 11:56:50 +07:00
</ div >
2026-10-16 22:03:47 +07:00
</ nav >
<!-- Main Container -->
< main class = "main-container" >
2026-10-16 22:37:28 +07:00
<!-- 1. Dashboard Tab & Party Lineup -->
2026-10-16 22:03:47 +07:00
< section id = "tab-dashboard" class = "tab-content active" >
< div class = "grid-3" style = "margin-bottom: 1.5rem;" >
< div class = "card stat-box" >
< div class = "stat-number" id = "stat-avatars" > 0</ div >
2026-10-17 00:22:03 +07:00
< div class = "stat-label" data-i18n = "statAvatars" > ตัวละครที่ครอบครอง</ div >
2026-10-16 22:03:47 +07:00
</ div >
< div class = "card stat-box" >
< div class = "stat-number" id = "stat-lightcones" > 0</ div >
2026-10-17 00:22:03 +07:00
< div class = "stat-label" data-i18n = "statLightcones" > กรวยแสง</ div >
2026-10-16 22:03:47 +07:00
</ div >
< div class = "card stat-box" >
< div class = "stat-number" id = "stat-relics" > 0</ div >
2026-10-17 00:22:03 +07:00
< div class = "stat-label" data-i18n = "statRelics" > รีลิกส์</ div >
2026-10-16 22:37:28 +07:00
</ div >
</ div >
<!-- Party Lineup Visualizer -->
< div class = "card" style = "margin-bottom: 1.5rem;" >
2026-10-17 01:05:33 +07:00
< div class = "card-title" style = "display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem;" >
< div style = "display: flex; align-items: center; gap: 0.6rem;" >
< span data-i18n = "currentLineupTitle" > 🎮 ทีมปัจจุบัน</ span >
< span class = "badge-creative" id = "badge-creative-mode" style = "display: none;" data-i18n = "badgeCreative" > โหมดสร้างสรรค์</ span >
</ div >
< div style = "display: flex; align-items: center; gap: 0.6rem;" >
< label class = "form-label" style = "margin: 0; cursor: pointer; text-transform: none; display: flex; align-items: center; gap: 0.45rem;" for = "toggle-creative-mode" >
< span data-i18n = "lblCreativeMode" > 🎨 โหมดสร้างสรรค์</ span >
</ label >
< label class = "switch" >
< input type = "checkbox" id = "toggle-creative-mode" >
< span class = "slider" ></ span >
</ label >
</ div >
2026-10-16 22:37:28 +07:00
</ div >
< div class = "lineup-grid" id = "lineup-container" >
<!-- Rendered by JS -->
2026-10-16 22:03:47 +07:00
</ div >
</ div >
2026-10-17 10:55:13 +07:00
< div class = "grid-2" style = "align-items: start;" >
<!-- Column 1: Server Status & Team Combat Synergy -->
< div style = "display: flex; flex-direction: column; gap: 1.5rem;" >
<!-- 1. Server & Map Card -->
< div class = "card" >
< div class = "card-title" >
< span data-i18n = "serverStatusTitle" > 📍 สถานะเซิร์ฟเวอร์ & พิกัดปัจจุบัน</ span >
2026-10-19 02:58:44 +07:00
< span class = "btn-sm btn-secondary" id = "badge-version" data-i18n = "apiLive" > API Live</ span >
2026-10-16 22:03:47 +07:00
</ div >
2026-10-17 10:55:13 +07:00
< div style = "display: flex; flex-direction: column; gap: 0.75rem;" >
2026-10-16 22:03:47 +07:00
< div >
2026-10-17 10:55:13 +07:00
< span class = "form-label" data-i18n = "lblServerModeActive" > โหมดเซิร์ฟเวอร์ที่ใช้งาน</ span >
< strong id = "lbl-active-mode" style = "color: var(--accent-cyan);" > GaC-hkrpg-go</ strong >
2026-10-16 22:03:47 +07:00
</ div >
< div >
2026-10-17 10:55:13 +07:00
< span class = "form-label" data-i18n = "lblApiEndpoint" > API Gateway Endpoint</ span >
< code id = "lbl-api-url" style = "color: var(--accent-cyan); font-size: 0.9rem;" > -</ code >
</ div >
< div style = "display: flex; gap: 1rem;" >
< div >
< span class = "form-label" data-i18n = "lblPlaneId" > Plane ID</ span >
< span id = "lbl-plane-id" style = "font-weight: bold;" > -</ span >
</ div >
< div >
< span class = "form-label" data-i18n = "lblFloorId" > Floor ID</ span >
< span id = "lbl-floor-id" style = "font-weight: bold;" > -</ span >
</ div >
</ div >
< div >
< span class = "form-label" data-i18n = "coords" > พิกัดตัวละคร XYZ</ span >
< span id = "lbl-coordinates" style = "color: var(--text-muted); font-size: 0.85rem;" > -</ span >
2026-10-16 22:03:47 +07:00
</ div >
</ div >
</ div >
2026-10-17 15:33:47 +07:00
<!-- 2. Mini Battle Summary & Team Stats -->
< div class = "card" id = "card-battle-summary" >
2026-10-17 10:55:13 +07:00
< div class = "card-title" style = "display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;" >
< span style = "display: flex; align-items: center; gap: 0.5rem;" >
2026-10-17 15:33:47 +07:00
< span > 💥</ span >
< span data-i18n = "miniBattleTitle" > สรุปการต่อสู้ล่าสุด & ดาเมจทีม</ span >
2026-10-17 10:55:13 +07:00
</ span >
2026-10-17 15:33:47 +07:00
< div style = "display: flex; align-items: center; gap: 0.4rem;" >
2026-10-19 02:58:44 +07:00
< span class = "badge-super-tag" id = "badge-mini-battle-status" data-i18n = "miniNoBattleTitle" style = "background: rgba(156, 163, 175, 0.12); color: var(--text-muted); font-weight: 800; border: 1px solid rgba(156, 163, 175, 0.25);" >
2026-10-17 15:33:47 +07:00
ยังไม่มีข้อมูลการต่อสู้
</ span >
< button type = "button" class = "btn btn-sm btn-secondary" id = "btn-mini-view-full-analyst" style = "font-size: 0.725rem; padding: 0.2rem 0.55rem; color: var(--accent-cyan); border-color: rgba(56, 189, 248, 0.35); font-weight: 700;" title = "เปิดหน้า Damage Analyst ตัวเต็ม" data-i18n = "miniViewFullAnalyst" >
Damage Analyst →
</ button >
</ div >
</ div >
< p class = "card-subtitle" style = "margin-bottom: 0.75rem;" data-i18n = "miniBattleSubtitle" >
สถิติดาเมจ, DPS และสัดส่วนการทำดาเมจของตัวละครในทีมจากการต่อสู้จริงล่าสุด
</ p >
<!-- A. Key Battle Metric Boxes (4 Boxes) -->
< div class = "mini-battle-metrics-grid" style = "display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.85rem;" >
< div class = "mini-battle-box" style = "background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--radius-sm); padding: 0.5rem 0.4rem; text-align: center;" >
< div class = "mini-battle-val" id = "mini-total-dmg" style = "font-size: 1.15rem; font-weight: 800; color: #f87171; font-family: monospace;" > -</ div >
< div class = "mini-battle-lbl" style = "font-size: 0.675rem; color: var(--text-muted); margin-top: 0.15rem;" data-i18n = "miniTotalDmg" > ดาเมจรวม</ div >
</ div >
< div class = "mini-battle-box" style = "background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--radius-sm); padding: 0.5rem 0.4rem; text-align: center;" >
< div class = "mini-battle-val" id = "mini-team-dps" style = "font-size: 1.15rem; font-weight: 800; color: var(--accent-gold); font-family: monospace;" > -</ div >
< div class = "mini-battle-lbl" style = "font-size: 0.675rem; color: var(--text-muted); margin-top: 0.15rem;" data-i18n = "miniTeamDps" > DPS รวม</ div >
</ div >
< div class = "mini-battle-box" style = "background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--radius-sm); padding: 0.5rem 0.4rem; text-align: center;" >
< div class = "mini-battle-val" id = "mini-break-dmg" style = "font-size: 1.15rem; font-weight: 800; color: var(--accent-cyan); font-family: monospace;" > -</ div >
< div class = "mini-battle-lbl" style = "font-size: 0.675rem; color: var(--text-muted); margin-top: 0.15rem;" data-i18n = "miniBreakDmg" > Break / Super Break</ div >
</ div >
< div class = "mini-battle-box" style = "background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--radius-sm); padding: 0.5rem 0.4rem; text-align: center;" >
< div class = "mini-battle-val" id = "mini-battle-turns" style = "font-size: 1.15rem; font-weight: 800; color: var(--accent-green); font-family: monospace;" > -</ div >
< div class = "mini-battle-lbl" style = "font-size: 0.675rem; color: var(--text-muted); margin-top: 0.15rem;" data-i18n = "miniBattleTurns" > เทิร์น / เวลา</ div >
</ div >
2026-10-17 10:55:13 +07:00
</ div >
2026-10-17 01:15:40 +07:00
2026-10-17 15:33:47 +07:00
<!-- B. Mini Avatar Damage Breakdown (4 Avatars) -->
< div style = "margin-bottom: 0.85rem;" >
< div style = "font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem;" data-i18n = "miniBreakdownTitle" >
📊 สัดส่วนดาเมจสมาชิกในทีม (Damage Share)
2026-10-17 01:15:40 +07:00
</ div >
2026-10-17 15:33:47 +07:00
< div id = "mini-battle-avatars-list" style = "display: flex; flex-direction: column; gap: 0.45rem;" >
<!-- Rendered dynamically by JS -->
2026-10-17 01:15:40 +07:00
</ div >
2026-10-17 10:55:13 +07:00
</ div >
2026-10-17 01:15:40 +07:00
2026-10-17 15:33:47 +07:00
<!-- C. Equipment Readiness & Stats Overview -->
2026-10-17 10:55:13 +07:00
< div >
2026-10-17 11:22:50 +07:00
< div style = "font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem;" data-i18n = "synergyEquipmentTitle" >
2026-10-17 15:33:47 +07:00
🛡️ ความพร้อมของอุปกรณ์และเลเวลเฉลี่ย
2026-10-17 10:55:13 +07:00
</ div >
< div class = "synergy-metrics-grid" >
< div class = "synergy-metric-box" >
< div class = "synergy-metric-val" id = "synergy-avg-level" > -</ div >
2026-10-17 11:22:50 +07:00
< div class = "synergy-metric-lbl" data-i18n = "synergyAvgLevel" > เลเวลเฉลี่ย</ div >
2026-10-17 10:55:13 +07:00
</ div >
< div class = "synergy-metric-box" >
< div class = "synergy-metric-val" id = "synergy-avg-eidolon" > -</ div >
2026-10-17 11:22:50 +07:00
< div class = "synergy-metric-lbl" data-i18n = "synergyAvgEidolon" > Eidolon เฉลี่ย</ div >
2026-10-17 10:55:13 +07:00
</ div >
< div class = "synergy-metric-box" >
< div class = "synergy-metric-val" id = "synergy-lc-ready" > -</ div >
2026-10-17 11:22:50 +07:00
< div class = "synergy-metric-lbl" data-i18n = "synergyLcEquipped" > สวมกรวยแสง</ div >
2026-10-17 10:55:13 +07:00
</ div >
< div class = "synergy-metric-box" >
< div class = "synergy-metric-val" id = "synergy-relic-ready" > -</ div >
2026-10-17 11:22:50 +07:00
< div class = "synergy-metric-lbl" data-i18n = "synergyRelicFull" > รีลิกส์ครบชุด</ div >
2026-10-17 10:55:13 +07:00
</ div >
2026-10-17 03:59:45 +07:00
</ div >
2026-10-17 10:55:13 +07:00
</ div >
</ div >
</ div >
<!-- Column 2: GM Command Dispatcher & Live Log Console -->
< div class = "card" id = "card-gm-console" style = "display: flex; flex-direction: column; gap: 0.75rem;" >
< div class = "card-title" style = "display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;" >
< span style = "display: flex; align-items: center; gap: 0.5rem;" >
< span > 💻</ span >
2026-10-19 02:58:44 +07:00
< span > GM Command Console & Live Log</ span >
2026-10-17 10:55:13 +07:00
</ span >
< div style = "display: flex; gap: 0.35rem;" >
2026-10-19 02:58:44 +07:00
< button type = "button" class = "btn btn-sm btn-secondary" id = "btn-console-copy-log" title = "Copy all logs" style = "padding: 0.2rem 0.6rem; font-size: 0.75rem;" >
📋 Copy
2026-10-17 10:55:13 +07:00
</ button >
2026-10-19 02:58:44 +07:00
< button type = "button" class = "btn btn-sm btn-secondary" id = "btn-console-clear-log" title = "Clear terminal log" style = "padding: 0.2rem 0.6rem; font-size: 0.75rem;" >
🗑️ Clear
2026-10-17 10:55:13 +07:00
</ button >
</ div >
</ div >
2026-10-19 02:58:44 +07:00
< p class = "card-subtitle" style = "margin-bottom: 0.25rem;" > Send GM and server commands, with live status and packet logs.</ p >
2026-10-21 16:30:08 +07:00
< div style = "display:flex; align-items:center; gap:0.65rem; flex-wrap:wrap;" >
< button type = "button" class = "btn btn-sm btn-secondary" id = "btn-client-unstuck" > Unstuck</ button >
< span id = "client-unstuck-description" style = "font-size:0.75rem; color:var(--text-muted);" > Clear a stuck loading spinner without restarting the game. Keeps saved CW progress.</ span >
</ div >
< div id = "client-unstuck-status" role = "status" aria-live = "polite" style = "font-size:0.75rem; color:var(--text-muted);" ></ div >
2026-10-17 10:55:13 +07:00
<!-- Interactive Terminal Screen -->
< div class = "console-terminal-wrapper" >
< div class = "console-terminal-header" >
< span class = "terminal-dot dot-red" ></ span >
< span class = "terminal-dot dot-yellow" ></ span >
< span class = "terminal-dot dot-green" ></ span >
< span class = "terminal-title" > GaC-hkrpg-go Console Session (Interactive GM Dispatcher)</ span >
</ div >
< div class = "console-terminal-log" id = "console-terminal-log" >
<!-- Logs rendered here -->
</ div >
</ div >
<!-- Command Input Bar -->
< form id = "form-console-cmd" style = "display: flex; gap: 0.5rem; align-items: center; margin-top: 0.25rem;" >
< div class = "console-input-wrap" style = "flex: 1; display: flex; align-items: center; background: rgba(0,0,0,0.4); border: 1px solid var(--border-color); border-radius: 6px; padding: 0 0.75rem;" >
< span style = "color: var(--accent-cyan); font-family: monospace; font-weight: 800; font-size: 1.1rem; margin-right: 0.5rem;" > > </ span >
2026-10-19 02:58:44 +07:00
< input type = "text" id = "console-cmd-input" class = "form-input" placeholder = "Type a command, e.g. /heal, /teleport 20411, /give 102 1000" style = "background: transparent; border: none; padding: 0.6rem 0; font-family: monospace; font-size: 0.85rem; box-shadow: none;" autocomplete = "off" role = "combobox" aria-autocomplete = "list" aria-controls = "console-suggestion-options" aria-expanded = "false" >
2026-10-17 10:55:13 +07:00
</ div >
2026-10-19 02:58:44 +07:00
< button type = "submit" class = "btn btn-primary" id = "btn-console-cmd-send" style = "padding: 0.6rem 1.25rem; font-weight: 700; white-space: nowrap;" >
Run
2026-10-17 03:59:45 +07:00
</ button >
2026-10-17 10:55:13 +07:00
</ form >
2026-10-19 02:58:44 +07:00
< div id = "console-command-suggestions" class = "console-suggestions" hidden >
< div class = "console-suggestions-header" >
< span > Command suggestions</ span >
< span id = "console-suggestion-count" class = "console-suggestion-count" > ‹ › </ span >
</ div >
< div id = "console-suggestion-options" role = "listbox" aria-label = "Command suggestions" ></ div >
</ div >
2026-10-17 10:55:13 +07:00
< div style = "font-size: 0.725rem; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center;" >
2026-10-19 02:58:44 +07:00
< span > Use ↑ / ↓ to browse suggestions or command history. Press Tab to complete.</ span >
< span id = "lbl-console-conn-status" style = "color: var(--accent-green);" > ● Server Online</ span >
2026-10-16 22:03:47 +07:00
</ div >
</ div >
</ div >
</ section >
2026-10-16 22:37:28 +07:00
<!-- 2. Avatars Tab (Build & Eidolon Editor) -->
2026-10-16 22:03:47 +07:00
< section id = "tab-avatars" class = "tab-content" >
< div style = "display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 1rem;" >
2026-10-16 23:33:26 +07:00
< div style = "display: flex; gap: 0.75rem; flex: 1; max-width: 680px; flex-wrap: wrap;" >
2026-10-17 00:22:03 +07:00
< input type = "text" id = "avatar-search" class = "form-input" data-i18n-placeholder = "searchPlaceholder" placeholder = "🔍 ค้นหาชื่อหรือ ID ตัวละคร..." style = "min-width: 180px; flex: 1;" >
2026-10-16 23:33:26 +07:00
< select id = "avatar-filter-rarity" class = "form-select" style = "max-width: 130px;" >
2026-10-17 00:22:03 +07:00
< option value = "all" data-i18n = "filterAllRarity" > ทุกระดับดาว</ option >
< option value = "5" data-i18n = "filter5Star" > 5 ดาว</ option >
< option value = "4" data-i18n = "filter4Star" > 4 ดาว</ option >
2026-10-16 22:37:28 +07:00
</ select >
2026-10-16 23:33:26 +07:00
< select id = "avatar-filter-element" class = "form-select" style = "max-width: 130px;" >
2026-10-17 00:22:03 +07:00
< option value = "all" data-i18n = "filterAllElements" > ทุกธาตุ</ option >
2026-10-16 23:16:48 +07:00
< option value = "Fire" > ไฟ</ option >
< option value = "Ice" > น้ำแข็ง</ option >
< option value = "Lightning" > สายฟ้า</ option >
< option value = "Wind" > ลม</ option >
< option value = "Physical" > กายภาพ</ option >
< option value = "Quantum" > ควอนตัม</ option >
< option value = "Imaginary" > จินตภาพ</ option >
2026-10-16 22:03:47 +07:00
</ select >
2026-10-16 23:33:26 +07:00
< select id = "avatar-filter-path" class = "form-select" style = "max-width: 130px;" >
2026-10-17 00:22:03 +07:00
< option value = "all" data-i18n = "filterAllPaths" > ทุกประเภท</ option >
2026-10-16 23:33:26 +07:00
< option value = "Destruction" > ทำลายล้าง</ option >
< option value = "Hunt" > ล่าสังหาร</ option >
< option value = "Erudition" > ปัญญา</ option >
< option value = "Harmony" > ประสาน</ option >
< option value = "Nihility" > ลบล้าง</ option >
< option value = "Preservation" > อนุรักษ์</ option >
< option value = "Abundance" > เฟื่องฟู</ option >
< option value = "Remembrance" > ความทรงจำ</ option >
< option value = "Elation" > ปีติ</ option >
</ select >
2026-10-16 22:03:47 +07:00
</ div >
2026-10-17 03:20:18 +07:00
< div style = "display: flex; gap: 0.5rem; flex-wrap: wrap;" >
< button class = "btn btn-primary" id = "btn-all-avatars-e0s1" data-i18n = "btnAllE0S1" style = "background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); border-color: #38bdf8;" > ⚡ ปรับ E0S1 ทุกตัว</ button >
2026-10-17 00:22:03 +07:00
< button class = "btn btn-gold" id = "btn-max-all-avatars" data-i18n = "btnMaxAll" > ⭐ ปรับ Max E6 ทุกตัว</ button >
< button class = "btn btn-secondary" id = "btn-reload-avatars" data-i18n = "btnReload" > 🔄 รีโหลด</ button >
2026-10-16 22:03:47 +07:00
</ div >
</ div >
< div id = "avatars-grid" class = "grid-4" >
2026-10-17 00:22:03 +07:00
< div style = "color: var(--text-muted); grid-column: 1/-1; text-align: center; padding: 2rem;" data-i18n = "avatarsLoading" >
2026-10-16 22:37:28 +07:00
กำลังดึงข้อมูลตัวละคร...
</ div >
</ div >
</ section >
<!-- 3. Equipment Tab (Lightcones & Relics) -->
< section id = "tab-equipment" class = "tab-content" >
2026-10-17 01:54:37 +07:00
<!-- Toolbar & Subtabs Card -->
< div class = "card" style = "margin-bottom: 1rem; padding: 0.85rem 1rem;" >
< div style = "display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem;" >
<!-- Subtab Buttons: Light Cones vs Relics -->
< div style = "display: flex; gap: 0.4rem; background: var(--bg-card-hover); padding: 0.3rem; border-radius: var(--radius-md); border: 1px solid var(--border-color);" >
< button type = "button" class = "btn btn-sm btn-primary eq-subtab-btn active" id = "btn-eq-subtab-lc" data-subtab = "lc" style = "display: flex; align-items: center; gap: 0.45rem;" >
< span data-i18n = "eqLcTitle" > 🗡️ กรวยแสง (Light Cones)</ span >
< span class = "badge-super-tag" id = "badge-total-lc" style = "padding: 0.05rem 0.4rem; font-size: 0.75rem;" > 0</ span >
</ button >
< button type = "button" class = "btn btn-sm btn-secondary eq-subtab-btn" id = "btn-eq-subtab-relic" data-subtab = "relic" style = "display: flex; align-items: center; gap: 0.45rem;" >
< span data-i18n = "eqRelicTitle" > 🛡️ รีลิกส์ (Relics)</ span >
< span class = "badge-super-tag" id = "badge-total-relics" style = "padding: 0.05rem 0.4rem; font-size: 0.75rem;" > 0</ span >
</ button >
2026-10-16 22:37:28 +07:00
</ div >
2026-10-17 01:54:37 +07:00
<!-- Search & Filter Controls -->
< div style = "display: flex; gap: 0.4rem; flex: 1; max-width: 620px; flex-wrap: wrap;" >
2026-10-19 02:58:44 +07:00
< input type = "text" id = "eq-search" class = "form-input" data-i18n-placeholder = "equipmentSearchPlaceholder" placeholder = "🔍 ค้นหาชื่อหรือ ID อุปกรณ์..." style = "flex: 1; min-width: 160px;" >
2026-10-17 01:54:37 +07:00
< select id = "eq-filter-rarity" class = "form-select" style = "max-width: 110px;" >
< option value = "all" data-i18n = "filterAllRarity" > ทุกดาว</ option >
< option value = "5" data-i18n = "filter5Star" > 5 ดาว</ option >
< option value = "4" data-i18n = "filter4Star" > 4 ดาว</ option >
2026-10-19 02:58:44 +07:00
< option value = "3" data-i18n = "filter3Star" > 3 ดาว</ option >
2026-10-17 01:54:37 +07:00
</ select >
< select id = "eq-filter-equipped" class = "form-select" style = "max-width: 130px;" >
2026-10-19 02:58:44 +07:00
< option value = "all" data-i18n = "filterAllStatus" > สถานะทั้งหมด</ option >
< option value = "equipped" data-i18n = "filterEquipped" > สวมใส่อยู่</ option >
< option value = "unequipped" data-i18n = "filterInInventory" > ในกระเป๋า</ option >
2026-10-17 01:54:37 +07:00
</ select >
< select id = "eq-filter-extra" class = "form-select" style = "max-width: 120px;" >
2026-10-19 02:58:44 +07:00
< option value = "all" data-i18n = "filterAllTypes" > ทุกประเภท</ option >
2026-10-17 01:54:37 +07:00
</ select >
</ div >
<!-- Action Buttons -->
< div style = "display: flex; gap: 0.4rem;" >
< button type = "button" class = "btn btn-sm btn-success" id = "btn-open-add-lc" data-i18n = "btnAddLc" > + เพิ่ม LC</ button >
< button type = "button" class = "btn btn-sm btn-success" id = "btn-open-add-relic" data-i18n = "btnAddRelic" style = "display: none;" > + เพิ่มรีลิกส์</ button >
2026-10-16 22:37:28 +07:00
</ div >
</ div >
2026-10-17 01:54:37 +07:00
</ div >
2026-10-16 22:37:28 +07:00
2026-10-17 01:54:37 +07:00
<!-- Main Layout: Tiles Grid + Inspector Side Panel -->
< div style = "display: flex; gap: 1rem; align-items: flex-start;" >
<!-- Left: Inventory Tiles Grid -->
< div style = "flex: 1; min-width: 0;" >
< div id = "lightcones-grid" class = "eq-tiles-grid" >
< div style = "color: var(--text-muted); text-align: center; padding: 2rem; grid-column: 1/-1;" data-i18n = "eqLcLoading" > กำลังโหลดข้อมูลกรวยแสง...</ div >
2026-10-16 22:37:28 +07:00
</ div >
2026-10-17 01:54:37 +07:00
< div id = "relics-grid" class = "eq-tiles-grid" style = "display: none;" >
< div style = "color: var(--text-muted); text-align: center; padding: 2rem; grid-column: 1/-1;" data-i18n = "eqRelicLoading" > กำลังโหลดข้อมูลรีลิกส์...</ div >
2026-10-16 22:37:28 +07:00
</ div >
2026-10-16 22:03:47 +07:00
</ div >
2026-10-17 01:54:37 +07:00
<!-- Right: Inspector Side Card -->
< div id = "eq-inspector-card" class = "eq-inspector-wrapper" style = "width: 320px; position: sticky; top: 80px; flex-shrink: 0; display: none;" >
<!-- Populated by JS -->
</ div >
2026-10-16 22:03:47 +07:00
</ div >
</ section >
2026-10-18 22:16:18 +07:00
<!-- Material inventory editor: edits only Client-catalog item quantities. -->
< section id = "tab-inventory" class = "tab-content" >
2026-10-21 16:30:08 +07:00
< div class = "inventory-mode-switch" role = "tablist" aria-label = "Inventory views" >
< button type = "button" id = "btn-inventory-catalog" class = "inventory-mode-btn active" role = "tab" aria-selected = "true" aria-controls = "item-catalog-panel" data-i18n = "itemCatalogTitle" > 📚 สมุดรวมไอเทม</ button >
< button type = "button" id = "btn-inventory-manage" class = "inventory-mode-btn" role = "tab" aria-selected = "false" aria-controls = "inventory-manage-panel" data-i18n = "inventoryTitle" > 🎒 จัดการจำนวนไอเทม</ button >
</ div >
< div id = "item-catalog-panel" class = "inventory-mode-panel active" role = "tabpanel" >
< div class = "card" style = "margin-bottom:1rem;" >
< div style = "display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;" >
< div >
< div class = "card-title" data-i18n = "itemCatalogTitle" > 📚 สมุดรวมไอเทม</ div >
< p class = "card-subtitle" data-i18n = "itemCatalogDescription" > ค้นชื่อหรือ ID เพื่อดูรูปและรหัสจากตารางเกม</ p >
</ div >
< span id = "item-catalog-count" class = "badge-super-tag" > —</ span >
</ div >
< div class = "item-catalog-toolbar" >
< input type = "search" id = "item-catalog-search" class = "form-input" data-i18n-placeholder = "itemCatalogSearchPlaceholder" placeholder = "ค้นหาชื่อหรือ Item ID..." >
< select id = "item-catalog-filter" class = "form-select" aria-label = "Filter item catalog" >
< option value = "all" data-i18n = "itemCatalogFilterAll" > ทั้งหมด</ option >
< option value = "supported" data-i18n = "itemCatalogFilterSupported" > GaC รองรับ</ option >
< option value = "item" data-i18n = "itemCatalogFilterItems" > ไอเทม</ option >
< option value = "lightcone" data-i18n = "itemCatalogFilterLightCones" > กรวยแสง</ option >
< option value = "relic" data-i18n = "itemCatalogFilterRelics" > รีลิกส์</ option >
</ select >
</ div >
< div id = "item-catalog-status" role = "status" aria-live = "polite" style = "font-size:.8rem;color:var(--text-muted);margin-top:.7rem;" data-i18n = "itemCatalogLoading" > กำลังโหลดสมุดไอเทม...</ div >
</ div >
< div class = "card" style = "padding:1rem 1rem 0;overflow:hidden;" >
< div id = "item-catalog-grid" class = "item-catalog-grid" >
< div class = "item-catalog-empty" data-i18n = "itemCatalogLoading" > กำลังโหลดสมุดไอเทม...</ div >
</ div >
< div class = "item-catalog-pagination" >
< button type = "button" class = "btn btn-sm btn-secondary" id = "item-catalog-prev" disabled data-i18n = "inventoryPrevious" > ก่อนหน้า</ button >
< span id = "item-catalog-page-label" style = "font-size:.8rem;color:var(--text-muted);" ></ span >
< button type = "button" class = "btn btn-sm btn-secondary" id = "item-catalog-next" disabled data-i18n = "inventoryNext" > ถัดไป</ button >
</ div >
</ div >
</ div >
< div id = "inventory-manage-panel" class = "inventory-mode-panel" role = "tabpanel" hidden >
2026-10-18 22:16:18 +07:00
< div class = "card" style = "margin-bottom: 1rem;" >
< div style = "display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;" >
< div >
< div class = "card-title" data-i18n = "inventoryTitle" > 🎒 จัดการจำนวนไอเทม</ div >
< p class = "card-subtitle" data-i18n = "inventoryDescription" > ค้นหาด้วย Item ID แล้วแก้จำนวนหลายรายการก่อนบันทึกครั้งเดียว รายการมาจาก catalog ของ Client ที่เซิร์ฟเวอร์ใช้ ช่องว่างหมายถึงใช้ค่าเริ่มต้นของเซิร์ฟเวอร์</ p >
</ div >
< div style = "display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;" >
< span id = "inventory-count" class = "badge-super-tag" > —</ span >
< span id = "inventory-dirty-count" class = "badge-super-tag" style = "display:none;" > 0</ span >
</ div >
</ div >
< div style = "display:flex;gap:.65rem;align-items:center;flex-wrap:wrap;margin-top:1rem;" >
< input type = "search" id = "inventory-search" class = "form-input" style = "flex:1;min-width:220px;" data-i18n-placeholder = "inventorySearchPlaceholder" placeholder = "ค้นหา Item ID..." >
< button type = "button" class = "btn btn-secondary" id = "btn-inventory-discard" disabled data-i18n = "inventoryDiscard" > ทิ้งการแก้ไข</ button >
< button type = "button" class = "btn btn-success" id = "btn-inventory-save" disabled data-i18n = "inventorySave" > บันทึกการเปลี่ยนแปลง</ button >
</ div >
< div id = "inventory-status" role = "status" aria-live = "polite" style = "font-size:.8rem;color:var(--text-muted);margin-top:.7rem;" data-i18n = "inventoryLoadHint" > กำลังโหลดรายการจากเซิร์ฟเวอร์...</ div >
</ div >
< div class = "card" style = "padding:0;overflow:hidden;" >
< div style = "overflow:auto;max-height:65vh;" >
< table style = "width:100%;border-collapse:collapse;min-width:420px;" >
< thead style = "position:sticky;top:0;background:var(--bg-card-hover);z-index:1;" >
< tr >
< th style = "text-align:left;padding:.8rem 1rem;" data-i18n = "inventoryItemId" > Item ID</ th >
< th style = "text-align:left;padding:.8rem 1rem;" data-i18n = "inventoryDefaultCount" > จำนวนในกระเป๋า</ th >
</ tr >
</ thead >
< tbody id = "inventory-materials-body" >
< tr >< td colspan = "2" style = "padding:1.5rem;text-align:center;color:var(--text-muted);" data-i18n = "inventoryLoadHint" > กำลังโหลดรายการจากเซิร์ฟเวอร์...</ td ></ tr >
</ tbody >
</ table >
</ div >
< div style = "display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.75rem 1rem;border-top:1px solid var(--border-color);" >
< button type = "button" class = "btn btn-sm btn-secondary" id = "btn-inventory-prev" disabled data-i18n = "inventoryPrevious" > ก่อนหน้า</ button >
< span id = "inventory-page-label" style = "font-size:.8rem;color:var(--text-muted);" ></ span >
< button type = "button" class = "btn btn-sm btn-secondary" id = "btn-inventory-next" disabled data-i18n = "inventoryNext" > ถัดไป</ button >
</ div >
</ div >
2026-10-21 16:30:08 +07:00
</ div >
2026-10-18 22:16:18 +07:00
</ section >
2026-10-24 19:12:10 +07:00
<!-- Monster settings: resource-backed stage inspection plus Calyx-only custom waves. -->
< section id = "tab-monster-settings" class = "tab-content" >
< div class = "card monster-settings-intro" >
< div class = "card-title" >< span data-i18n = "monsterSettingsTitle" > 👾 Monster Setting</ span ></ div >
< p class = "card-subtitle" data-i18n = "monsterSettingsDescription" > ตรวจสอบข้อมูลด่านและคลื่นมอนจาก resource ของ Client ตามเวอร์ชัน ปรับ custom monster ได้เฉพาะ Golden / Crimson Calyx เท่านั้น</ p >
< div class = "monster-settings-rule" role = "note" >
< span aria-hidden = "true" > 🔒</ span >
< span data-i18n = "monsterSettingsRule" > Weekly Boss, Stagnant Shadow, Cavern of Corrosion และ Endgame ใช้ข้อมูลด่านจาก Client และแก้คลื่นมอนผ่าน Srtool ไม่ได้</ span >
</ div >
</ div >
< div class = "monster-settings-tabs" role = "tablist" aria-label = "Monster settings modes" >
< button type = "button" class = "monster-settings-tab active" role = "tab" aria-selected = "true" data-monster-mode = "moc" data-i18n = "monsterModeMoc" > Memory of Chaos</ button >
< button type = "button" class = "monster-settings-tab" role = "tab" aria-selected = "false" data-monster-mode = "pf" data-i18n = "monsterModePf" > Pure Fiction</ button >
< button type = "button" class = "monster-settings-tab" role = "tab" aria-selected = "false" data-monster-mode = "as" data-i18n = "monsterModeAs" > Apocalyptic Shadow</ button >
< button type = "button" class = "monster-settings-tab" role = "tab" aria-selected = "false" data-monster-mode = "aa" data-i18n = "monsterModeAa" > Anomaly Arbitration</ button >
< button type = "button" class = "monster-settings-tab monster-settings-tab-aha" id = "monster-mode-aha" role = "tab" aria-selected = "false" aria-controls = "monster-settings-aha-help" data-monster-mode = "aha" data-i18n = "ahaHelpTitle" > Aha's Help</ button >
< button type = "button" class = "monster-settings-tab" role = "tab" aria-selected = "false" data-monster-mode = "custom" data-i18n = "monsterModeCustom" > Custom Enemy</ button >
< button type = "button" class = "monster-settings-tab" role = "tab" aria-selected = "false" data-monster-mode = "su" data-i18n = "monsterModeSu" > Simulated Universe</ button >
</ div >
< div id = "monster-settings-status" class = "monster-settings-status" role = "status" aria-live = "polite" data-i18n = "monsterSettingsLoading" > กำลังอ่าน stage จาก resource ของ Client...</ div >
< div id = "monster-settings-view" class = "monster-settings-view" role = "tabpanel" aria-live = "polite" ></ div >
< div id = "monster-settings-aha-help" class = "monster-settings-aha-help" role = "tabpanel" aria-labelledby = "monster-mode-aha" hidden >
< div class = "aha-help-card" id = "aha-help-card" >
< div class = "aha-help-heading" >
< div class = "aha-help-emblem" aria-hidden = "true" > ✦</ div >
< div class = "aha-help-heading-copy" >
< h3 data-i18n = "ahaHelpTitle" > Aha's Help</ h3 >
< p data-i18n = "ahaHelpDescription" > Choose the support level for the next battle that includes Voracity Corruption. This setting is separate from Aha Global.</ p >
</ div >
</ div >
< div class = "aha-help-options" id = "aha-help-options" role = "group" aria-label = "Aha's Help level" aria-describedby = "aha-help-status" ></ div >
< select id = "aha-help-level" class = "aha-help-native-select" aria-hidden = "true" tabindex = "-1" disabled >
< option value = "" data-i18n = "ahaHelpLoading" > Loading levels…</ option >
</ select >
< div class = "aha-help-actions" >
< div class = "aha-help-save-state" id = "aha-help-status" role = "status" aria-live = "polite" data-state = "loading" >
< span class = "aha-help-state-dot" aria-hidden = "true" ></ span >
< span id = "aha-help-status-text" data-i18n = "ahaHelpLoading" > Loading levels…</ span >
</ div >
< button type = "button" class = "btn btn-success aha-help-save-button" id = "btn-save-aha-help" disabled >
< span aria-hidden = "true" > 💾</ span >
< span data-i18n = "ahaHelpSave" > Save Aha's Help</ span >
</ button >
</ div >
</ div >
</ div >
</ section >
2026-10-17 13:07:32 +07:00
<!-- 3.5. Damage Analyst (In-Game Battle Telemetry & Damage Analysis) -->
< section id = "tab-damage-analyst" class = "tab-content" >
<!-- Toolbar & Control Card -->
< div class = "card" style = "margin-bottom: 1.25rem;" >
< div style = "display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;" >
< div >
< div class = "card-title" style = "margin-bottom: 0.25rem;" >
< span data-i18n = "analystTitle" > 💥 วิเคราะห์ความเสียหายจากการต่อสู้ (Damage Analyst)</ span >
< span class = "badge-super-tag" id = "badge-analyst-status" style = "background: rgba(34, 197, 94, 0.15); color: #4ade80;" > พร้อมรับข้อมูลจากเกม</ span >
</ div >
< p class = "card-subtitle" style = "margin-bottom: 0;" data-i18n = "analystSubtitle" >
ดักจับและวิเคราะห์ดาเมจจากการต่อสู้จริงในเกม Star Rail (ระบบเดียวกับ FireflyGO / Veritas)
</ p >
</ div >
< div style = "display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;" >
< label style = "display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-muted); cursor: pointer; user-select: none; margin-right: 0.5rem;" >
< input type = "checkbox" id = "chk-analyst-autosync" checked style = "accent-color: var(--accent-cyan); cursor: pointer;" >
< span data-i18n = "analystAutoSync" > ซิงค์อัตโนมัติ</ span >
</ label >
< button type = "button" class = "btn btn-primary" id = "btn-analyst-fetch" style = "background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);" >
< span data-i18n = "analystFetchBtn" > 🔄 ดึงดาเมจล่าสุดจากในเกม</ span >
</ button >
< input type = "file" id = "input-analyst-file" accept = ".json" style = "display: none;" >
< button type = "button" class = "btn btn-secondary" id = "btn-analyst-import" data-i18n = "analystImportBtn" >
📂 นำเข้า JSON
</ button >
< button type = "button" class = "btn btn-secondary" id = "btn-analyst-export" data-i18n = "analystExportBtn" >
💾 ส่งออก JSON
</ button >
< button type = "button" class = "btn btn-secondary" id = "btn-analyst-clear" style = "color: #f87171;" data-i18n = "analystClearBtn" >
🗑️ ล้างข้อมูล
</ button >
</ div >
</ div >
</ div >
<!-- Overview 4 Metrics Cards -->
< div class = "grid-4" style = "margin-bottom: 1.25rem;" >
< div class = "card" style = "padding: 1.2rem; border-left: 4px solid #ef4444; background: linear-gradient(135deg, rgba(239,68,68,0.06) 0%, rgba(20,20,28,0.7) 100%);" >
< div style = "font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;" data-i18n = "analystTotalDamage" > ดาเมจรวมทั้งทีม</ div >
< div style = "font-size: 1.85rem; font-weight: 900; color: #f87171; letter-spacing: -0.5px; margin: 0.25rem 0;" id = "analyst-team-damage" > 0</ div >
< div style = "font-size: 0.75rem; color: var(--text-muted);" id = "analyst-damage-av" > เฉลี่ยต่อรอบ: -</ div >
</ div >
< div class = "card" style = "padding: 1.2rem; border-left: 4px solid #f59e0b; background: linear-gradient(135deg, rgba(245,158,11,0.06) 0%, rgba(20,20,28,0.7) 100%);" >
< div style = "font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;" data-i18n = "analystCycles" > จำนวนรอบ (Cycles)</ div >
< div style = "font-size: 1.85rem; font-weight: 900; color: #fbbf24; letter-spacing: -0.5px; margin: 0.25rem 0;" id = "analyst-cycles" > 0 รอบ</ div >
2026-10-19 02:58:44 +07:00
< div style = "font-size: 0.75rem; color: var(--text-muted);" id = "analyst-cycles-note" data-i18n = "analystCyclesNote" > MoC / PF / AS Standard</ div >
2026-10-17 13:07:32 +07:00
</ div >
< div class = "card" style = "padding: 1.2rem; border-left: 4px solid #38bdf8; background: linear-gradient(135deg, rgba(56,189,248,0.06) 0%, rgba(20,20,28,0.7) 100%);" >
< div style = "font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;" data-i18n = "analystTurns" > เทิร์นทั้งหมด</ div >
< div style = "font-size: 1.85rem; font-weight: 900; color: #38bdf8; letter-spacing: -0.5px; margin: 0.25rem 0;" id = "analyst-total-turns" > 0 เทิร์น</ div >
< div style = "font-size: 0.75rem; color: var(--text-muted);" id = "analyst-auto-turns" > เทิร์นอัตโนมัติ: 0</ div >
</ div >
< div class = "card" style = "padding: 1.2rem; border-left: 4px solid #34d399; background: linear-gradient(135deg, rgba(52,211,153,0.06) 0%, rgba(20,20,28,0.7) 100%);" >
< div style = "font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;" data-i18n = "analystDuration" > ระยะเวลาการต่อสู้</ div >
< div style = "font-size: 1.85rem; font-weight: 900; color: #34d399; letter-spacing: -0.5px; margin: 0.25rem 0;" id = "analyst-duration" > 00:00</ div >
< div style = "font-size: 0.75rem; color: var(--text-muted);" id = "analyst-battle-meta" > Stage: - | Battle: -</ div >
</ div >
</ div >
<!-- Team Damage Share Bar -->
< div class = "card" style = "margin-bottom: 1.25rem;" >
< div class = "card-title" style = "display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;" >
< span data-i18n = "analystDpsShare" > สัดส่วนดาเมจของทีม (Team DPS Share)</ span >
< span style = "font-size: 0.8rem; color: var(--text-muted);" id = "analyst-total-share-label" > รวม 100%</ span >
</ div >
<!-- Progress Bar Container -->
< div id = "analyst-share-bar-container" style = "height: 18px; width: 100%; border-radius: 9px; background: rgba(255,255,255,0.05); overflow: hidden; display: flex; margin-bottom: 0.85rem; border: 1px solid rgba(255,255,255,0.1);" >
<!-- Dynamic segments filled by JS -->
</ div >
<!-- Legend Container -->
< div id = "analyst-share-legend" style = "display: flex; gap: 1.5rem; flex-wrap: wrap;" >
<!-- Dynamic legend filled by JS -->
</ div >
</ div >
<!-- Character Breakdown Grid -->
< div id = "analyst-characters-container" class = "grid-2" style = "gap: 1.25rem; margin-bottom: 1.5rem;" >
<!-- Populated dynamically by JS for each avatar in battle -->
</ div >
<!-- Target Enemies Encountered -->
< div class = "card" id = "analyst-enemies-card" style = "margin-bottom: 1.5rem;" >
< div class = "card-title" style = "margin-bottom: 0.75rem;" >
< span data-i18n = "analystEnemyTitle" > 👾 รายชื่อศัตรูที่ถูกโจมตี (Targets / Enemies)</ span >
</ div >
< div id = "analyst-enemies-container" style = "display: flex; flex-direction: column; gap: 0.6rem;" >
<!-- Populated by JS -->
</ div >
</ div >
</ section >
2026-10-16 22:37:28 +07:00
<!-- 4. Persistent Save Settings (Exclusive to GaC-hkrpg-go) -->
< section id = "tab-persistent" class = "tab-content" >
< div class = "card" style = "margin-bottom: 1.5rem;" >
< div class = "card-title" >
2026-10-17 00:22:03 +07:00
< span data-i18n = "persistentTitle" > 💾 จัดการไฟล์เซฟ GaC</ span >
< span class = "btn-sm btn-success" data-i18n = "persistentBadge" > เซิร์ฟเวอร์ของเราเอง</ span >
2026-10-16 22:37:28 +07:00
</ div >
2026-10-17 00:22:03 +07:00
< p class = "card-subtitle" data-i18n = "persistentSubtitle" >
ไฟล์ persistent เก็บการตั้งค่าสถานะผู้เล่นเฉพาะของเซิร์ฟเวอร์ GaC เช่น เพศ/ธาตุตัวเอก, สเตตัส March 7th, สวิตช์ฟังก์ชัน Global ต่างๆ
2026-10-16 22:37:28 +07:00
</ p >
</ div >
< div class = "grid-2" >
<!-- Main Character & March Path -->
2026-10-17 11:08:20 +07:00
< div class = "card" id = "card-persistent-chars" >
2026-10-17 00:22:03 +07:00
< div class = "card-title" data-i18n = "persistentTbM7Title" > 👤 ผู้บุกเบิก & March 7th</ div >
2026-10-16 22:37:28 +07:00
< form id = "form-persistent-chars" >
< div class = "form-group" >
2026-10-17 00:22:03 +07:00
< label class = "form-label" data-i18n = "lblTbGenderElement" > เพศ & ธาตุของตัวเอก</ label >
2026-10-16 22:37:28 +07:00
< select id = "persistent-mc-select" class = "form-select" >
2026-10-16 23:16:48 +07:00
< option value = "MalePhysical" > ผู้บุกเบิกชาย - กายภาพ</ option >
< option value = "FemalePhysical" > ผู้บุกเบิกหญิง - กายภาพ</ option >
< option value = "MalePreservation" > ผู้บุกเบิกชาย - ไฟ</ option >
< option value = "FemalePreservation" > ผู้บุกเบิกหญิง - ไฟ</ option >
< option value = "MaleHarmony" > ผู้บุกเบิกชาย - ประสาน</ option >
< option value = "FemaleHarmony" > ผู้บุกเบิกหญิง - ประสาน</ option >
< option value = "MaleRemembrance" > ผู้บุกเบิกชาย - ความทรงจำ</ option >
< option value = "FemaleRemembrance" > ผู้บุกเบิกหญิง - ความทรงจำ</ option >
2026-10-16 22:37:28 +07:00
</ select >
</ div >
< div class = "form-group" >
2026-10-17 00:22:03 +07:00
< label class = "form-label" data-i18n = "lblM7Path" > สายของ March 7th</ label >
2026-10-16 22:37:28 +07:00
< select id = "persistent-march-select" class = "form-select" >
2026-10-16 23:16:48 +07:00
< option value = "MarchHunt" > March 7th - ล่าสังหาร</ option >
< option value = "MarchPreservation" > March 7th - อนุรักษ์</ option >
2026-10-16 22:37:28 +07:00
</ select >
</ div >
2026-10-17 00:22:03 +07:00
< button type = "submit" class = "btn btn-primary" style = "width: 100%;" data-i18n = "btnSaveCharSettings" >
2026-10-16 22:37:28 +07:00
💾 บันทึกการตั้งค่าตัวละคร
</ button >
</ form >
</ div >
<!-- Global Features & Toggles -->
2026-10-17 11:08:20 +07:00
< div class = "card" id = "card-persistent-global" >
2026-10-17 00:22:03 +07:00
< div class = "card-title" data-i18n = "persistentGlobalTitle" > ⚙️ สวิตช์ระบบพิเศษของ GaC</ div >
2026-10-16 22:37:28 +07:00
< div style = "display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem;" >
< div class = "ex-switch-card" >
2026-10-29 00:13:34 +07:00
< div >
< div style = "font-weight: 700;" > Freecam / FaceCam</ div >
< div style = "font-size: 0.8rem; color: var(--text-muted);" > เลือกโหมด แล้วกด Tab ในเกมเพื่อเปิดหรือปิดกล้อง</ div >
< label for = "camera-mode" > โหมดกล้อง</ label >
< select id = "camera-mode" >< option value = "freecam" > Freecam</ option >< option value = "facecam" > FaceCam (ทดลอง)</ option ></ select >
< label for = "camera-distance" > ระยะ FaceCam</ label >
< input id = "camera-distance" type = "number" min = "0.5" max = "5" step = "0.1" value = "2" >
< button type = "button" class = "btn btn-success" id = "btn-save-camera" > บันทึกกล้อง</ button >
</ div >
</ div >
< div class = "ex-switch-card" >
2026-10-16 22:37:28 +07:00
< div >
2026-10-19 02:58:44 +07:00
< div style = "font-weight: 700;" data-i18n = "globalFeatureSilverWolf" > Silver Wolf Global Feature</ div >
2026-10-17 00:22:03 +07:00
< div style = "font-size: 0.8rem; color: var(--text-muted);" data-i18n = "swGlobalDesc" > เปิดใช้งานฟังก์ชันพิเศษ SW ทั่วทั้งเซิร์ฟเวอร์</ div >
2026-10-16 22:37:28 +07:00
</ div >
< label class = "switch" >
< input type = "checkbox" id = "toggle-sw-global" >
< span class = "slider" ></ span >
</ label >
</ div >
< div class = "ex-switch-card" >
< div >
2026-10-19 02:58:44 +07:00
< div style = "font-weight: 700;" data-i18n = "globalFeatureCastorice" > Castorice Global Feature</ div >
2026-10-17 00:22:03 +07:00
< div style = "font-size: 0.8rem; color: var(--text-muted);" data-i18n = "castoriceGlobalDesc" > เปิดใช้งานฟังก์ชันพิเศษ Castorice ทั่วทั้งเซิร์ฟเวอร์</ div >
2026-10-16 22:37:28 +07:00
</ div >
< label class = "switch" >
< input type = "checkbox" id = "toggle-castorice-global" >
< span class = "slider" ></ span >
</ label >
</ div >
2026-10-17 00:48:33 +07:00
< div class = "ex-switch-card" >
< div >
2026-10-19 02:58:44 +07:00
< div style = "font-weight: 700;" data-i18n = "globalFeatureAha" > Aeon ★ Aha Global Feature</ div >
2026-10-17 00:48:33 +07:00
< div style = "font-size: 0.8rem; color: var(--text-muted);" data-i18n = "ahaGlobalDesc" > เปิดใช้งานฟังก์ชันพิเศษ Aeon ★ Aha ทั่วทั้งเซิร์ฟเวอร์</ div >
</ div >
< label class = "switch" >
< input type = "checkbox" id = "toggle-aha-global" >
< span class = "slider" ></ span >
</ label >
</ div >
2026-10-17 00:22:03 +07:00
< button class = "btn btn-success" id = "btn-save-persistent-toggles" data-i18n = "btnSaveGlobalSwitch" >
2026-10-16 22:37:28 +07:00
💾 บันทึกสวิตช์ Global
</ button >
</ div >
</ div >
</ div >
2026-10-24 19:12:10 +07:00
2026-10-16 22:37:28 +07:00
</ section >
<!-- 5. Ex-Rank Tab -->
2026-10-16 22:03:47 +07:00
< section id = "tab-exrank" class = "tab-content" >
< div class = "card" style = "margin-bottom: 1.5rem;" >
< div class = "card-title" >
2026-10-17 00:22:03 +07:00
< span data-i18n = "exrankTitle" > ⚡ ระบบปลดล็อค Ex-Rank Skill</ span >
2026-10-16 22:03:47 +07:00
< div style = "display: flex; gap: 0.5rem;" >
2026-10-17 00:22:03 +07:00
< button class = "btn btn-success btn-sm" id = "btn-exrank-enable-all" data-i18n = "btnEnableAll" > เปิด Ex-Rank ทั้งหมด</ button >
< button class = "btn btn-secondary btn-sm" id = "btn-exrank-disable-all" data-i18n = "btnDisableAll" > ปิด Ex-Rank ทั้งหมด</ button >
2026-10-16 22:03:47 +07:00
</ div >
</ div >
2026-10-17 00:22:03 +07:00
< p class = "card-subtitle" data-i18n = "exrankSubtitle" >
2026-10-16 22:03:47 +07:00
เปิดใช้งานพรสวรรค์และกลไกพิเศษ Ex-Rank สำหรับตัวละครเฉพาะใน FreeSR (เช่น Jing Yuan โดน CC ไม่หยุดชะงัก, Dan Heng IL, Acheron)
</ p >
</ div >
< div id = "exrank-list" style = "display: flex; flex-direction: column; gap: 0.75rem;" >
2026-10-16 22:37:28 +07:00
<!-- Rendered by JS -->
2026-10-16 22:03:47 +07:00
</ div >
</ section >
2026-10-16 22:53:35 +07:00
<!-- 6. JSON Management Tab -->
2026-10-16 22:03:47 +07:00
< section id = "tab-json" class = "tab-content" >
< div class = "card" >
< div class = "card-title" style = "flex-wrap: wrap; gap: 0.75rem;" >
< div style = "display: flex; gap: 0.5rem;" >
2026-10-17 00:22:03 +07:00
< button class = "btn btn-sm btn-primary active" id = "btn-select-freesr" data-i18n = "btnFreesr" > 📄 freesr-data.json</ button >
< button class = "btn btn-sm btn-secondary" id = "btn-select-persistent" data-i18n = "btnPersistent" > 💾 ไฟล์เซฟ persistent</ button >
2026-10-17 11:08:20 +07:00
< button class = "btn btn-sm btn-secondary" id = "btn-select-datagame" data-i18n = "btnDataGame" style = "display: none;" > 🎮 data-in-game.json</ button >
2026-10-16 22:03:47 +07:00
</ div >
< div style = "display: flex; gap: 0.5rem;" >
2026-10-17 00:22:03 +07:00
< button class = "btn btn-sm btn-secondary" id = "btn-json-beautify" data-i18n = "btnBeautify" > ✨ จัดรูปแบบ JSON</ button >
< button class = "btn btn-sm btn-secondary" id = "btn-json-download" data-i18n = "btnDownload" > 📥 ดาวน์โหลด Backup</ button >
2026-10-16 22:03:47 +07:00
< label class = "btn btn-sm btn-secondary" style = "cursor: pointer; margin: 0;" >
2026-10-17 00:22:03 +07:00
< span data-i18n = "btnUpload" > 📤 อัปโหลดไฟล์</ span > < input type = "file" id = "json-file-input" accept = ".json,text/plain" style = "display: none;" >
2026-10-16 22:03:47 +07:00
</ label >
2026-10-17 00:22:03 +07:00
< button class = "btn btn-sm btn-success" id = "btn-json-save" data-i18n = "btnSaveServer" > 💾 บันทึกไปยังเซิร์ฟเวอร์</ button >
2026-10-16 22:03:47 +07:00
</ div >
</ div >
< div class = "json-editor-wrapper" >
2026-10-16 22:16:53 +07:00
< textarea id = "json-editor" class = "json-textarea" spellcheck = "false" placeholder = "..." ></ textarea >
2026-10-16 22:03:47 +07:00
< div style = "display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted);" >
2026-10-17 00:22:03 +07:00
< span id = "json-status-info" data-i18n = "jsonStatusReady" > พร้อมใช้งาน</ span >
< span data-i18n = "jsonTip" > คำแนะนำ: สามารถแก้ไขค่าดิบแล้วกด 'บันทึกไปยังเซิร์ฟเวอร์' ได้ทันที</ span >
2026-10-16 22:03:47 +07:00
</ div >
</ div >
</ div >
</ section >
2026-10-16 23:24:49 +07:00
<!-- 8. Settings -->
2026-10-16 22:03:47 +07:00
< section id = "tab-settings" class = "tab-content" >
2026-10-17 01:40:58 +07:00
< div style = "max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem;" >
< div class = "grid-2" >
<!-- Card 1: Server & Gateway Connection -->
< div class = "card" >
< div class = "card-title" data-i18n = "settingsConnTitle" > ⚙️ ตั้งค่าการเชื่อมต่อ API Gateway</ div >
< p class = "card-subtitle" data-i18n = "settingsConnSubtitle" > กำหนด Endpoint และโหมดของเซิร์ฟเวอร์ที่ต้องการสั่งการ</ p >
< form id = "form-settings" >
< div class = "form-group" >
< label class = "form-label" data-i18n = "lblServerMode" > โหมดเซิร์ฟเวอร์</ label >
< select id = "setting-server-mode" class = "form-select" >
2026-10-17 02:37:31 +07:00
< option value = "gac" > GaC-hkrpg-go</ option >
2026-10-24 19:12:10 +07:00
< option value = "firefly" disabled data-i18n = "serverModeFireflyPaused" > FireflyGo (กำลังพัฒนา)</ option >
< option value = "robin" disabled data-i18n = "serverModeRobinPaused" > RobinSR (กำลังพัฒนา)</ option >
2026-10-17 01:40:58 +07:00
</ select >
</ div >
2026-10-16 22:03:47 +07:00
2026-10-17 01:40:58 +07:00
< div class = "form-group" >
< label class = "form-label" data-i18n = "lblApiGatewayUrl" > REST API Gateway URL</ label >
< input type = "text" id = "setting-api-url" class = "form-input" placeholder = "http://localhost:21000" >
< div style = "display: flex; gap: 0.35rem; margin-top: 0.5rem; flex-wrap: wrap;" >
< button type = "button" class = "btn btn-sm btn-secondary btn-quick-url" data-url = "http://localhost:21000" > localhost:21000</ button >
< button type = "button" class = "btn btn-sm btn-secondary btn-quick-url" data-url = "http://127.0.0.1:21000" > 127.0.0.1:21000</ button >
< button type = "button" class = "btn btn-sm btn-secondary btn-quick-url" data-url = "http://localhost:8080" > localhost:8080</ button >
</ div >
</ div >
< div style = "display: flex; gap: 0.5rem; margin-top: 1.25rem;" >
< button type = "button" class = "btn btn-secondary" id = "btn-test-connection" style = "display: flex; align-items: center; gap: 0.4rem;" >
< span data-i18n = "btnTestPing" > ⚡ ทดสอบการเชื่อมต่อ</ span >
< span id = "ping-latency-badge" class = "badge-super-tag" style = "display: none; padding: 0.1rem 0.45rem; font-size: 0.75rem;" > -</ span >
</ button >
< button type = "submit" class = "btn btn-success" style = "flex: 1;" data-i18n = "btnSaveSettings" > 💾 บันทึกการตั้งค่า</ button >
</ div >
</ form >
</ div >
<!-- Card 2: Battle & Gameplay Preferences -->
< div class = "card" >
< div class = "card-title" data-i18n = "settingsBattleTitle" > 🎮 ค่าเริ่มต้นการต่อสู้ & FreeSR</ div >
< p class = "card-subtitle" data-i18n = "settingsBattleSubtitle" > ปรับแต่งพฤติกรรมเริ่มต้นของระบบในเกมและการจัดทีม</ p >
< div style = "display: flex; flex-direction: column; gap: 1rem;" >
2026-10-17 02:35:55 +07:00
<!-- Server Persistence Mode Information -->
< div style = "background: rgba(15, 23, 42, 0.45); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.85rem 1rem;" >
< div style = "display: flex; justify-content: space-between; align-items: center;" >
< span style = "font-weight: 700; font-size: 0.875rem;" data-i18n = "lblPersistenceInfo" > ระบบบันทึกทีมและข้อมูล (Lineup Storage)</ span >
< span id = "badge-persistence-mode" class = "badge-super-tag" style = "padding: 0.15rem 0.55rem; font-size: 0.75rem;" > Persistent API (GaC)</ span >
</ div >
2026-10-19 02:58:44 +07:00
< div style = "font-size: 0.75rem; color: var(--text-muted); margin-top: 0.35rem;" id = "desc-persistence-mode" data-i18n = "persistentDescription" >
2026-10-17 02:35:55 +07:00
GaC Server เก็บทีมใน persistent.json (รองรับโหมดสร้างสรรค์) • สำหรับ FireflyGo เก็บใน freesr-data.json
2026-10-17 01:40:58 +07:00
</ div >
</ div >
<!-- Auto-Sync Toggle -->
< div style = "display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--border-color);" >
< div >
< div style = "font-weight: 700; font-size: 0.9rem;" data-i18n = "lblAutoSync" > ซิงค์ไปยังเซิร์ฟเวอร์อัตโนมัติ (Auto-Sync)</ div >
< div style = "font-size: 0.75rem; color: var(--text-muted);" data-i18n = "descAutoSync" > ส่งการเปลี่ยนแปลงไปยังเซิร์ฟเวอร์ทันทีเมื่อแก้ไขตัวละครหรือไอเทม</ div >
</ div >
< label class = "switch" >
< input type = "checkbox" id = "setting-auto-sync" checked >
< span class = "slider" ></ span >
</ label >
</ div >
<!-- Creative Mode Default -->
< div style = "display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--border-color);" >
< div >
< div style = "font-weight: 700; font-size: 0.9rem;" data-i18n = "lblDefaultCreative" > เปิดโหมดสร้างสรรค์เมื่อเริ่มต้น (Creative Mode)</ div >
< div style = "font-size: 0.75rem; color: var(--text-muted);" data-i18n = "descDefaultCreative" > อนุญาตให้ใส่ตัวละครซ้ำหรือจัดทีมได้มากกว่า 4 ช่องตลอดเวลา</ div >
</ div >
< label class = "switch" >
< input type = "checkbox" id = "setting-default-creative" >
< span class = "slider" ></ span >
</ label >
</ div >
2026-10-16 22:03:47 +07:00
</ div >
2026-10-17 01:40:58 +07:00
</ div >
</ div >
< div class = "grid-2" >
<!-- Card 3: Showcase Card Display Settings -->
< div class = "card" >
< div class = "card-title" data-i18n = "settingsShowcaseTitle" > 🖼️ การแสดงผลการ์ด Showcase</ div >
< p class = "card-subtitle" data-i18n = "settingsShowcaseSubtitle" > ปรับแต่งความสวยงามและรายละเอียดในหน้าการ์ดแสดงผล Build</ p >
< div style = "display: flex; flex-direction: column; gap: 0.85rem;" >
<!-- Show Roll Counts on Relics -->
< div style = "display: flex; justify-content: space-between; align-items: center;" >
< div >
< div style = "font-weight: 700; font-size: 0.9rem;" data-i18n = "lblShowRolls" > แสดงจำนวน Roll ของซับสเตตัสรีลิกส์</ div >
< div style = "font-size: 0.75rem; color: var(--text-muted);" data-i18n = "descShowRolls" > แสดงแท็กจำนวนครั้งที่สุ่มลงสเตตัสย่อย (Sub-stat Roll Counts)</ div >
</ div >
< label class = "switch" >
< input type = "checkbox" id = "setting-showcase-rolls" checked >
< span class = "slider" ></ span >
</ label >
</ div >
<!-- Dynamic Element Aura Glow -->
< div style = "display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--border-color);" >
< div >
< div style = "font-weight: 700; font-size: 0.9rem;" data-i18n = "lblElementAura" > เอฟเฟกต์แสงเรืองตามธาตุ (Element Aura Glow)</ div >
< div style = "font-size: 0.75rem; color: var(--text-muted);" data-i18n = "descElementAura" > เปลี่ยนสีพื้นหลังและการเรืองแสงของการ์ดตามธาตุของตัวละครนั้นๆ</ div >
</ div >
< label class = "switch" >
< input type = "checkbox" id = "setting-showcase-aura" checked >
< span class = "slider" ></ span >
</ label >
</ div >
2026-10-16 22:03:47 +07:00
</ div >
2026-10-17 01:40:58 +07:00
</ div >
<!-- Card 4: Diagnostics & Cache Reset -->
< div class = "card" >
< div class = "card-title" data-i18n = "settingsCacheTitle" > 🧹 จัดการข้อมูลแคช & รีเซ็ตระบบ</ div >
< p class = "card-subtitle" data-i18n = "settingsCacheSubtitle" > ล้างข้อมูลชั่วคราวในเบราว์เซอร์หรือคืนค่าเครื่องมือเป็นค่าเริ่มต้น</ p >
< div style = "display: flex; flex-direction: column; gap: 0.75rem;" >
< div style = "display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem;" >
< span style = "color: var(--text-muted);" data-i18n = "lblCacheSize" > สถานะหน่วยความจำ LocalStorage:</ span >
2026-10-19 02:58:44 +07:00
< strong id = "lbl-cache-usage" style = "color: var(--accent-cyan); font-family: monospace;" > —</ strong >
2026-10-17 01:40:58 +07:00
</ div >
< div style = "display: flex; gap: 0.75rem; margin-top: 0.5rem; flex-wrap: wrap;" >
< button type = "button" class = "btn btn-secondary" id = "btn-clear-browser-cache" style = "flex: 1; min-width: 140px;" data-i18n = "btnClearCache" >
🧹 ล้างแคชเบราว์เซอร์
</ button >
< button type = "button" class = "btn btn-danger" id = "btn-reset-settings" style = "flex: 1; min-width: 140px;" data-i18n = "btnFactoryReset" >
🔄 คืนค่าเริ่มต้นทั้งหมด
</ button >
</ div >
2026-10-16 22:03:47 +07:00
</ div >
2026-10-17 01:40:58 +07:00
</ div >
2026-10-16 22:03:47 +07:00
</ div >
2026-10-17 01:40:58 +07:00
2026-10-17 10:44:14 +07:00
2026-10-16 22:03:47 +07:00
</ div >
</ section >
</ main >
2026-10-16 22:37:28 +07:00
<!-- Character Detail / Build Modal -->
< div class = "modal-overlay" id = "modal-avatar-detail" >
2026-10-17 11:52:20 +07:00
< div class = "modal-content" style = "max-width: 860px;" >
2026-10-16 23:49:27 +07:00
<!-- Modal Header -->
2026-10-16 22:37:28 +07:00
< div class = "modal-header" >
2026-10-17 00:22:03 +07:00
< h3 id = "modal-char-title" style = "font-weight: 800; font-size: 1.15rem; color: var(--text-highlight);" data-i18n = "modalTitleCharEdit" >
2026-10-16 22:37:28 +07:00
ปรับแต่งตัวละคร
</ h3 >
< button class = "btn btn-sm btn-secondary" id = "btn-close-avatar-modal" > ✕</ button >
</ div >
2026-10-16 23:49:27 +07:00
<!-- Character Top Banner & Quick Max All -->
2026-10-16 23:10:02 +07:00
< div style = "display: flex; gap: 1.25rem; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap;" >
2026-10-16 22:37:28 +07:00
< div class = "avatar-image-container" style = "width: 76px; height: 76px;" >
< img id = "modal-char-img" class = "avatar-img" src = "" alt = "" >
</ div >
2026-10-16 23:10:02 +07:00
< div style = "flex: 1; min-width: 180px;" >
2026-10-16 22:37:28 +07:00
< div id = "modal-char-name" style = "font-size: 1.25rem; font-weight: 800;" ></ div >
2026-10-16 23:49:27 +07:00
< div id = "modal-char-meta" style = "font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;" ></ div >
2026-10-16 22:37:28 +07:00
</ div >
2026-10-17 01:32:19 +07:00
< div style = "display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;" >
< button type = "button" class = "btn btn-primary" id = "btn-modal-e0s1" style = "padding: 0.5rem 0.95rem; font-weight: 800;" data-i18n = "btnE0S1" title = "Lv.80, E0, Max Skills, S1" >
⚡ E0S1
</ button >
2026-10-17 02:35:55 +07:00
< button type = "button" class = "btn btn-gold" id = "btn-modal-e6s5" style = "padding: 0.5rem 0.95rem; font-weight: 800;" data-i18n = "btnE6S5" title = "Lv.80, E6, Max Skills, S5" >
⭐ E6S5
</ button >
2026-10-17 01:32:19 +07:00
</ div >
2026-10-16 22:37:28 +07:00
</ div >
2026-10-17 02:35:55 +07:00
<!-- Sub Tabs Navigation (srtools & neonteam style) -->
2026-10-16 23:49:27 +07:00
< div class = "modal-subtabs" style = "display: flex; gap: 0.5rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; overflow-x: auto;" >
2026-10-17 02:35:55 +07:00
< button type = "button" class = "modal-subtab-btn active" data-modaltab = "modaltab-overview" data-i18n = "modalTabOverview" >
📋 ข้อมูลภาพรวม
2026-10-16 23:49:27 +07:00
</ button >
2026-10-17 02:35:55 +07:00
< button type = "button" class = "modal-subtab-btn" data-modaltab = "modaltab-relics" data-i18n = "modalTabRelics" >
2026-10-17 03:20:18 +07:00
🛡️ รีลิกส์ & อุปกรณ์
2026-10-16 23:49:27 +07:00
</ button >
2026-10-17 02:35:55 +07:00
< button type = "button" class = "modal-subtab-btn" data-modaltab = "modaltab-skills" data-i18n = "modalTabSkills" >
⚡ สกิลและร่องรอย
</ button >
< button type = "button" class = "modal-subtab-btn" data-modaltab = "modaltab-status" data-i18n = "modalTabStatus" >
⚙️ เลเวล & Eidolon
</ button >
2026-10-17 01:32:19 +07:00
< button type = "button" class = "modal-subtab-btn" data-modaltab = "modaltab-showcase" data-i18n = "modalTabShowcase" >
2026-10-17 03:20:18 +07:00
🖼️ การ์ดสรุปบิลด์
2026-10-17 01:32:19 +07:00
</ button >
2026-10-19 01:54:29 +07:00
< button type = "button" class = "modal-subtab-btn" data-modaltab = "modaltab-build-guide" data-i18n = "modalTabBuildGuide" >
📖 แนวทาง Build
</ button >
2026-10-16 23:49:27 +07:00
</ div >
2026-10-17 02:35:55 +07:00
<!-- Sub Tab 0: Overview & Combat Stats (Neonteam style https://srtools.neonteam.dev/1001/detail) -->
< div id = "modaltab-overview" class = "modal-subtab-content active" >
< div class = "overview-layout" >
<!-- Left: Big portrait art & character identity -->
< div class = "overview-portrait-box" >
2026-10-19 02:58:44 +07:00
< img id = "overview-portrait-img" class = "overview-portrait-img" src = "" alt = "Character Art" data-i18n-alt = "characterArtwork" >
2026-10-17 02:35:55 +07:00
< div class = "overview-portrait-info" >
< div id = "overview-char-name" style = "font-size: 1.35rem; font-weight: 800; color: #fff;" > -</ div >
< div id = "overview-char-meta" style = "display: flex; gap: 0.4rem; align-items: center; margin-top: 0.35rem; flex-wrap: wrap;" ></ div >
< div style = "display: flex; gap: 0.4rem; margin-top: 0.75rem;" >
< span id = "overview-badge-lvl" class = "badge-super-tag" > Lv. 80 / 80</ span >
< span id = "overview-badge-eidolon" class = "badge-super-tag" style = "background: rgba(251, 191, 36, 0.2); border-color: #fbbf24; color: #fbbf24;" > E6</ span >
</ div >
</ div >
</ div >
<!-- Right: Combat Stats, Equipped LC & Relic Summaries -->
< div style = "display: flex; flex-direction: column; gap: 1rem;" >
<!-- Combat Stats Panel -->
< div class = "card" style = "background: rgba(18, 24, 38, 0.7); border: 1px solid var(--border-color); padding: 1rem;" >
< div style = "font-weight: 800; font-size: 0.95rem; color: var(--text-highlight); margin-bottom: 0.75rem; display: flex; justify-content: space-between; align-items: center;" >
< span data-i18n = "overviewStatsTitle" > ⚔️ ค่าพลังการต่อสู้ (Combat Stats)</ span >
< span style = "font-size: 0.75rem; color: var(--text-muted);" data-i18n = "overviewStatsNote" > รวมโบนัสกรวยแสงและรีลิกส์</ span >
</ div >
< div class = "overview-stats-grid" id = "overview-stats-grid" >
<!-- Dynamically populated stats -->
</ div >
</ div >
<!-- Quick Equipped Equipment Glance -->
< div style = "display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem;" >
<!-- LC Glance -->
2026-10-19 02:58:44 +07:00
< div class = "card" id = "overview-lc-card" style = "background: rgba(18, 24, 38, 0.7); border: 1px solid var(--border-color); padding: 0.85rem; cursor: pointer; transition: all 0.2s;" title = "คลิกเพื่อจัดการ Light Cone" data-i18n-title = "overviewEquippedLc" >
2026-10-17 02:35:55 +07:00
< div style = "font-size: 0.75rem; color: var(--text-muted); font-weight: 700; margin-bottom: 0.5rem; display: flex; justify-content: space-between;" >
< span data-i18n = "overviewEquippedLc" > 🗡️ กรวยแสงที่สวมใส่</ span >
2026-10-19 02:58:44 +07:00
< span style = "color: var(--accent-cyan); font-size: 0.7rem;" data-i18n = "btnManage" > จัดการ ➔</ span >
2026-10-17 02:35:55 +07:00
</ div >
< div style = "display: flex; gap: 0.65rem; align-items: center;" >
< img id = "overview-lc-thumb" src = "" alt = "" style = "width: 44px; height: 60px; border-radius: 4px; object-fit: cover; border: 1px solid var(--border-color);" >
< div style = "min-width: 0; flex: 1;" >
< div id = "overview-lc-name" style = "font-weight: 700; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" > -</ div >
< div id = "overview-lc-rank" style = "font-size: 0.75rem; color: var(--accent-gold); margin-top: 0.2rem;" > S5 • Lv.80</ div >
</ div >
</ div >
</ div >
<!-- Relics Glance -->
2026-10-19 02:58:44 +07:00
< div class = "card" id = "overview-relics-card" style = "background: rgba(18, 24, 38, 0.7); border: 1px solid var(--border-color); padding: 0.85rem; cursor: pointer; transition: all 0.2s;" title = "คลิกเพื่อจัดการรีลิกส์" data-i18n-title = "overviewEquippedRelics" >
2026-10-17 02:35:55 +07:00
< div style = "font-size: 0.75rem; color: var(--text-muted); font-weight: 700; margin-bottom: 0.5rem; display: flex; justify-content: space-between;" >
< span data-i18n = "overviewEquippedRelics" > 🛡️ รีลิกส์และเซ็ต</ span >
2026-10-19 02:58:44 +07:00
< span style = "color: var(--accent-cyan); font-size: 0.7rem;" data-i18n = "btnManage" > จัดการ ➔</ span >
2026-10-17 02:35:55 +07:00
</ div >
< div id = "overview-relics-summary" style = "display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem;" >
<!-- Set bonuses active -->
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
<!-- Sub Tab: Relics Inspection & Selection (6 Slots) -->
< div id = "modaltab-relics" class = "modal-subtab-content" style = "display: none;" >
< div style = "display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;" >
< div >
< div style = "font-weight: 800; font-size: 1rem; color: var(--text-highlight);" data-i18n = "modalRelicsTitle" >
🛡️ สวมใส่รีลิกส์ (Relics 6 ชิ้น)
</ div >
< div style = "font-size: 0.75rem; color: var(--text-muted);" data-i18n = "modalRelicsSubtitle" >
เลือกเปลี่ยน ปรับสเตตัส หรือสวมใส่รีลิกส์แนะนำสำหรับตัวละครนี้
</ div >
</ div >
< div style = "display: flex; gap: 0.4rem; flex-wrap: wrap;" >
< button type = "button" class = "btn btn-sm btn-gold" id = "btn-modal-relics-auto" data-i18n = "btnAutoEquipRelics" >
⚡ ติดตั้งเซ็ตแนะนำครบชุด
</ button >
< button type = "button" class = "btn btn-sm btn-danger" id = "btn-modal-relics-clear" data-i18n = "btnClearAllRelics" >
🧹 ถอดทั้งหมด
</ button >
</ div >
</ div >
2026-10-17 03:20:18 +07:00
<!-- Equipped Lightcone Slot in Equipment Tab -->
2026-10-19 02:58:44 +07:00
< div class = "card" id = "relics-equipped-lc-box" style = "background: rgba(18, 24, 38, 0.75); border: 1px solid var(--border-color); padding: 0.85rem 1rem; margin-bottom: 1rem; cursor: pointer; transition: all 0.2s;" title = "คลิกเพื่อเลือกเปลี่ยน Light Cone" data-i18n-title = "overviewEquippedLc" >
2026-10-17 03:20:18 +07:00
< div style = "font-size: 0.75rem; color: var(--text-muted); font-weight: 700; margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center;" >
2026-10-19 02:58:44 +07:00
< span style = "color: var(--accent-cyan); font-weight: 800;" data-i18n = "overviewEquippedLc" > 🗡️ กรวยแสงที่สวมใส่ (คลิกเพื่อเลือกเปลี่ยน)</ span >
< span style = "color: var(--accent-gold); font-size: 0.75rem; font-weight: 700;" data-i18n = "btnChangeLc" > เปลี่ยนกรวยแสง ➔</ span >
2026-10-17 03:20:18 +07:00
</ div >
< div style = "display: flex; gap: 0.85rem; align-items: center;" >
< img id = "relics-tab-lc-thumb" src = "" alt = "" style = "width: 46px; height: 64px; border-radius: 6px; object-fit: cover; border: 1px solid var(--accent-gold);" >
< div style = "min-width: 0; flex: 1;" >
< div style = "display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;" >
< span id = "relics-tab-lc-name" style = "font-weight: 800; font-size: 0.95rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" > -</ span >
< span id = "relics-tab-lc-stars" style = "color: var(--accent-gold); font-size: 0.8rem; letter-spacing: 1px;" > ★★★★★</ span >
</ div >
< div style = "display: flex; gap: 0.6rem; align-items: center; margin-top: 0.25rem; font-size: 0.775rem; color: var(--text-muted); flex-wrap: wrap;" >
< span id = "relics-tab-lc-rank" style = "color: var(--accent-gold); font-weight: 800;" > S5</ span >
< span > •</ span >
< span id = "relics-tab-lc-level" style = "font-weight: 700; color: #fff;" > Lv. 80 / 80</ span >
< span > •</ span >
< span id = "relics-tab-lc-stats" style = "color: var(--accent-cyan); font-family: monospace;" > HP 952 / ATK 582 / DEF 529</ span >
</ div >
</ div >
2026-10-19 02:58:44 +07:00
< button type = "button" class = "btn btn-sm btn-primary" style = "pointer-events: none;" data-i18n = "btnChangeLc" > เลือกเปลี่ยน</ button >
2026-10-17 03:20:18 +07:00
</ div >
</ div >
2026-10-17 02:35:55 +07:00
<!-- 6 Relic Slots Grid -->
< div class = "relics-slots-grid" id = "modal-relics-slots-grid" >
<!-- Dynamically generated 6 slot boxes -->
</ div >
<!-- Active Set Bonuses -->
< div class = "card" style = "background: rgba(11, 15, 25, 0.75); border: 1px solid var(--border-color); padding: 0.85rem 1rem; margin-top: 1rem;" >
< div style = "font-weight: 700; font-size: 0.85rem; color: var(--accent-gold); margin-bottom: 0.5rem;" data-i18n = "activeSetEffects" >
✨ เอฟเฟกต์เซ็ตที่เปิดใช้งาน
</ div >
< div id = "modal-relics-active-sets" style = "display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.8rem; color: #cbd5e1;" >
<!-- Injected by JS -->
</ div >
</ div >
</ div >
2026-10-16 23:49:27 +07:00
<!-- Sub Tab 1: Skills & Traces (Like https://srtools.punklorde.org/skills-info) -->
2026-10-17 02:35:55 +07:00
< div id = "modaltab-skills" class = "modal-subtab-content" style = "display: none;" >
2026-10-16 23:49:27 +07:00
< div style = "display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;" >
2026-10-17 00:22:03 +07:00
< div style = "font-weight: 700; font-size: 0.95rem; color: var(--text-highlight);" data-i18n = "modalSkillCombatTitle" >
2026-10-16 23:49:27 +07:00
ระดับสกิลต่อสู้
</ div >
2026-10-17 00:22:03 +07:00
< button type = "button" class = "btn btn-sm btn-gold" id = "btn-modal-max-skills" data-i18n = "modalBtnMaxSkills" >
2026-10-16 23:49:27 +07:00
⭐ ปรับสกิลเต็ม 10/10
</ button >
</ div >
<!-- 4 Core Skills -->
2026-10-17 02:35:55 +07:00
< div class = "skills-grid" style = "display: flex; flex-direction: column; gap: 0.85rem;" >
2026-10-16 23:49:27 +07:00
<!-- 1. Basic Attack -->
< div class = "skill-row-card" >
< div class = "skill-row-header" >
2026-10-17 02:35:55 +07:00
< div style = "display: flex; align-items: center; gap: 0.65rem;" >
2026-10-19 02:58:44 +07:00
< img id = "skill-icon-basic" class = "skill-row-icon" src = "" alt = "Basic ATK" data-i18n-alt = "modalSkillBasic" >
2026-10-17 02:35:55 +07:00
< div >
< div style = "display: flex; align-items: center; gap: 0.4rem;" >
< span class = "skill-type-tag" data-i18n = "modalSkillBasic" > โจมตีปกติ</ span >
< span id = "skill-real-name-basic" class = "skill-name" > -</ span >
</ div >
</ div >
</ div >
2026-10-16 23:49:27 +07:00
< span class = "skill-lvl-badge" > Lv. < strong id = "val-skill-basic" > 6</ strong > / 6</ span >
</ div >
< div class = "skill-stepper" >
< button type = "button" class = "btn-step" id = "btn-step-dec-basic" > -</ button >
< input type = "range" min = "1" max = "6" value = "6" id = "range-skill-basic" class = "skill-range" >
< button type = "button" class = "btn-step" id = "btn-step-inc-basic" > +</ button >
< button type = "button" class = "btn-max-pill" id = "btn-skill-max-basic" > MAX</ button >
</ div >
2026-10-17 02:35:55 +07:00
< div id = "skill-desc-basic" class = "skill-desc-box" ></ div >
2026-10-16 23:49:27 +07:00
</ div >
<!-- 2. Skill -->
< div class = "skill-row-card" >
< div class = "skill-row-header" >
2026-10-17 02:35:55 +07:00
< div style = "display: flex; align-items: center; gap: 0.65rem;" >
2026-10-19 02:58:44 +07:00
< img id = "skill-icon-skill" class = "skill-row-icon" src = "" alt = "Skill" data-i18n-alt = "modalSkillSkill" >
2026-10-17 02:35:55 +07:00
< div >
< div style = "display: flex; align-items: center; gap: 0.4rem;" >
< span class = "skill-type-tag" data-i18n = "modalSkillSkill" > สกิลต่อสู้</ span >
< span id = "skill-real-name-skill" class = "skill-name" > -</ span >
</ div >
</ div >
</ div >
2026-10-16 23:49:27 +07:00
< span class = "skill-lvl-badge" > Lv. < strong id = "val-skill-skill" > 10</ strong > / 10</ span >
</ div >
< div class = "skill-stepper" >
< button type = "button" class = "btn-step" id = "btn-step-dec-skill" > -</ button >
< input type = "range" min = "1" max = "10" value = "10" id = "range-skill-skill" class = "skill-range" >
< button type = "button" class = "btn-step" id = "btn-step-inc-skill" > +</ button >
< button type = "button" class = "btn-max-pill" id = "btn-skill-max-skill" > MAX</ button >
</ div >
2026-10-17 02:35:55 +07:00
< div id = "skill-desc-skill" class = "skill-desc-box" ></ div >
2026-10-16 23:49:27 +07:00
</ div >
<!-- 3. Ultimate -->
< div class = "skill-row-card" >
< div class = "skill-row-header" >
2026-10-17 02:35:55 +07:00
< div style = "display: flex; align-items: center; gap: 0.65rem;" >
2026-10-19 02:58:44 +07:00
< img id = "skill-icon-ultra" class = "skill-row-icon" src = "" alt = "Ultimate" data-i18n-alt = "modalSkillUltra" >
2026-10-17 02:35:55 +07:00
< div >
< div style = "display: flex; align-items: center; gap: 0.4rem;" >
< span class = "skill-type-tag" data-i18n = "modalSkillUltra" > ท่าไม้ตาย</ span >
< span id = "skill-real-name-ultra" class = "skill-name" > -</ span >
</ div >
</ div >
</ div >
2026-10-16 23:49:27 +07:00
< span class = "skill-lvl-badge" > Lv. < strong id = "val-skill-ultra" > 10</ strong > / 10</ span >
</ div >
< div class = "skill-stepper" >
< button type = "button" class = "btn-step" id = "btn-step-dec-ultra" > -</ button >
< input type = "range" min = "1" max = "10" value = "10" id = "range-skill-ultra" class = "skill-range" >
< button type = "button" class = "btn-step" id = "btn-step-inc-ultra" > +</ button >
< button type = "button" class = "btn-max-pill" id = "btn-skill-max-ultra" > MAX</ button >
</ div >
2026-10-17 02:35:55 +07:00
< div id = "skill-desc-ultra" class = "skill-desc-box" ></ div >
2026-10-16 23:49:27 +07:00
</ div >
<!-- 4. Talent -->
< div class = "skill-row-card" >
< div class = "skill-row-header" >
2026-10-17 02:35:55 +07:00
< div style = "display: flex; align-items: center; gap: 0.65rem;" >
2026-10-19 02:58:44 +07:00
< img id = "skill-icon-talent" class = "skill-row-icon" src = "" alt = "Talent" data-i18n-alt = "modalSkillTalent" >
2026-10-17 02:35:55 +07:00
< div >
< div style = "display: flex; align-items: center; gap: 0.4rem;" >
< span class = "skill-type-tag" data-i18n = "modalSkillTalent" > พรสวรรค์</ span >
< span id = "skill-real-name-talent" class = "skill-name" > -</ span >
</ div >
</ div >
</ div >
2026-10-16 23:49:27 +07:00
< span class = "skill-lvl-badge" > Lv. < strong id = "val-skill-talent" > 10</ strong > / 10</ span >
</ div >
< div class = "skill-stepper" >
< button type = "button" class = "btn-step" id = "btn-step-dec-talent" > -</ button >
< input type = "range" min = "1" max = "10" value = "10" id = "range-skill-talent" class = "skill-range" >
< button type = "button" class = "btn-step" id = "btn-step-inc-talent" > +</ button >
< button type = "button" class = "btn-max-pill" id = "btn-skill-max-talent" > MAX</ button >
2026-10-16 22:53:35 +07:00
</ div >
2026-10-17 02:35:55 +07:00
< div id = "skill-desc-talent" class = "skill-desc-box" ></ div >
2026-10-16 22:53:35 +07:00
</ div >
2026-10-16 22:37:28 +07:00
</ div >
2026-10-16 23:49:27 +07:00
<!-- Traces & Technique Section -->
< div style = "margin-top: 1.25rem;" >
2026-10-17 00:22:03 +07:00
< div style = "font-weight: 700; font-size: 0.95rem; color: var(--text-highlight); margin-bottom: 0.75rem;" data-i18n = "modalTracesTitle" >
2026-10-16 23:49:27 +07:00
ร่องรอยและเทคนิค
</ div >
2026-10-17 02:35:55 +07:00
< div style = "display: flex; flex-direction: column; gap: 0.75rem;" >
<!-- Technique -->
< div class = "skill-row-card" style = "padding: 0.75rem 1rem;" >
< div style = "display: flex; justify-content: space-between; align-items: center;" >
< div style = "display: flex; align-items: center; gap: 0.65rem;" >
2026-10-19 02:58:44 +07:00
< img id = "skill-icon-technique" class = "skill-row-icon" src = "" alt = "Technique" data-i18n-alt = "modalTraceTechnique" >
2026-10-17 02:35:55 +07:00
< div >
< span class = "skill-type-tag" data-i18n = "modalTraceTechnique" > เทคนิค</ span >
< span id = "skill-real-name-technique" class = "skill-name" > -</ span >
</ div >
</ div >
< label class = "switch" >
< input type = "checkbox" id = "check-trace-technique" checked >
< span class = "slider" ></ span >
</ label >
</ div >
< div id = "skill-desc-technique" class = "skill-desc-box" style = "margin-top: 0.35rem;" ></ div >
</ div >
<!-- Major Traces A2, A4, A6 -->
< div style = "display: flex; flex-direction: column; gap: 0.6rem;" >
< div class = "trace-card-item" >
< div style = "display: flex; justify-content: space-between; align-items: center;" >
< div style = "display: flex; align-items: center; gap: 0.5rem;" >
2026-10-19 02:58:44 +07:00
< img id = "trace-icon-a2" class = "trace-icon-small" src = "" alt = "A2" data-i18n-alt = "traceA2" >
< span id = "trace-name-a2" style = "font-weight: 700; font-size: 0.875rem;" data-i18n = "traceA2" > 🌟 ร่องรอยพิเศษ A2</ span >
2026-10-17 02:35:55 +07:00
</ div >
< label class = "switch" >
< input type = "checkbox" id = "check-trace-a2" checked >
< span class = "slider" ></ span >
</ label >
</ div >
< div id = "trace-desc-a2" class = "skill-desc-box" style = "margin-top: 0.35rem;" ></ div >
</ div >
< div class = "trace-card-item" >
< div style = "display: flex; justify-content: space-between; align-items: center;" >
< div style = "display: flex; align-items: center; gap: 0.5rem;" >
2026-10-19 02:58:44 +07:00
< img id = "trace-icon-a4" class = "trace-icon-small" src = "" alt = "A4" data-i18n-alt = "traceA4" >
< span id = "trace-name-a4" style = "font-weight: 700; font-size: 0.875rem;" data-i18n = "traceA4" > 🌟 ร่องรอยพิเศษ A4</ span >
2026-10-17 02:35:55 +07:00
</ div >
< label class = "switch" >
< input type = "checkbox" id = "check-trace-a4" checked >
< span class = "slider" ></ span >
</ label >
</ div >
< div id = "trace-desc-a4" class = "skill-desc-box" style = "margin-top: 0.35rem;" ></ div >
</ div >
< div class = "trace-card-item" >
< div style = "display: flex; justify-content: space-between; align-items: center;" >
< div style = "display: flex; align-items: center; gap: 0.5rem;" >
2026-10-19 02:58:44 +07:00
< img id = "trace-icon-a6" class = "trace-icon-small" src = "" alt = "A6" data-i18n-alt = "traceA6" >
< span id = "trace-name-a6" style = "font-weight: 700; font-size: 0.875rem;" data-i18n = "traceA6" > 🌟 ร่องรอยพิเศษ A6</ span >
2026-10-17 02:35:55 +07:00
</ div >
< label class = "switch" >
< input type = "checkbox" id = "check-trace-a6" checked >
< span class = "slider" ></ span >
</ label >
</ div >
< div id = "trace-desc-a6" class = "skill-desc-box" style = "margin-top: 0.35rem;" ></ div >
</ div >
2026-10-16 22:53:35 +07:00
</ div >
2026-10-17 02:35:55 +07:00
<!-- 10 Stat Nodes -->
< label class = "trace-toggle-label" style = "margin-top: 0.25rem;" >
2026-10-16 23:49:27 +07:00
< input type = "checkbox" id = "check-trace-stats" checked class = "trace-checkbox" >
2026-10-17 00:22:03 +07:00
< span data-i18n = "traceStatNodes" > 💎 โหนดสเตตัสเสริมทั้งหมด (10 โหนด)</ span >
2026-10-16 23:49:27 +07:00
</ label >
2026-10-16 22:53:35 +07:00
</ div >
2026-10-16 22:37:28 +07:00
</ div >
</ div >
2026-10-16 23:49:27 +07:00
<!-- Sub Tab 2: Status & Eidolon -->
< div id = "modaltab-status" class = "modal-subtab-content" style = "display: none;" >
< div class = "grid-2" style = "gap: 1rem; margin-bottom: 1rem;" >
< div class = "form-group" >
< div style = "display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;" >
2026-10-17 00:22:03 +07:00
< label class = "form-label" style = "margin: 0;" data-i18n = "lblLevelRange" > ระดับเลเวล (1-80)</ label >
2026-10-16 23:49:27 +07:00
< div style = "display: flex; gap: 0.25rem;" >
< button type = "button" class = "btn btn-sm btn-secondary btn-lvl-preset" data-lvl = "1" > 1</ button >
< button type = "button" class = "btn btn-sm btn-secondary btn-lvl-preset" data-lvl = "20" > 20</ button >
< button type = "button" class = "btn btn-sm btn-secondary btn-lvl-preset" data-lvl = "60" > 60</ button >
< button type = "button" class = "btn btn-sm btn-secondary btn-lvl-preset" data-lvl = "70" > 70</ button >
< button type = "button" class = "btn btn-sm btn-primary btn-lvl-preset" data-lvl = "80" > 80</ button >
</ div >
</ div >
< input type = "number" id = "modal-char-level" class = "form-input" min = "1" max = "80" value = "80" >
</ div >
< div class = "form-group" >
< div style = "display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;" >
2026-10-17 00:22:03 +07:00
< label class = "form-label" style = "margin: 0;" data-i18n = "lblPromotionRange" > การเลื่อนขั้น (0-6)</ label >
2026-10-16 23:49:27 +07:00
< div style = "display: flex; gap: 0.25rem;" >
< button type = "button" class = "btn btn-sm btn-secondary btn-prom-preset" data-prom = "0" > 0</ button >
< button type = "button" class = "btn btn-sm btn-secondary btn-prom-preset" data-prom = "3" > 3</ button >
< button type = "button" class = "btn btn-sm btn-primary btn-prom-preset" data-prom = "6" > 6</ button >
</ div >
</ div >
< input type = "number" id = "modal-char-promotion" class = "form-input" min = "0" max = "6" value = "6" >
2026-10-16 22:53:35 +07:00
</ div >
</ div >
2026-10-16 23:49:27 +07:00
<!-- Eidolon Section -->
< div class = "form-group" >
< div style = "display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;" >
2026-10-17 00:22:03 +07:00
< label class = "form-label" style = "margin: 0;" data-i18n = "lblEidolonLevel" > ระดับ Eidolon</ label >
2026-10-16 23:49:27 +07:00
< div style = "display: flex; gap: 0.4rem;" >
2026-10-17 00:22:03 +07:00
< button type = "button" class = "btn btn-sm btn-secondary" id = "btn-modal-quick-e0" data-i18n = "btnResetE0" > รีเซ็ต E0</ button >
< button type = "button" class = "btn btn-sm btn-gold" id = "btn-modal-quick-e6" data-i18n = "btnMaxE6" > ⭐ ปลดเต็ม E6</ button >
2026-10-16 23:49:27 +07:00
</ div >
</ div >
< div class = "eidolon-buttons" id = "modal-char-eidolon-btns" style = "margin-top: 0.5rem; gap: 0.5rem;" >
<!-- Injected pips -->
</ div >
</ div >
2026-10-16 22:37:28 +07:00
</ div >
2026-10-17 01:32:19 +07:00
<!-- Sub Tab 3: Lightcone Equipment (Full artwork matching srtools) -->
2026-10-16 23:49:27 +07:00
< div id = "modaltab-lightcone" class = "modal-subtab-content" style = "display: none;" >
2026-10-17 01:32:19 +07:00
< div class = "lc-preview-container" >
<!-- Left: Full vertical artwork card -->
< div class = "lc-art-wrapper" id = "modal-lc-art-wrapper" >
2026-10-19 02:58:44 +07:00
< img id = "modal-lc-full-img" class = "lc-full-img" src = "" alt = "Light Cone Artwork" data-i18n-alt = "lightConeArtwork" >
2026-10-17 01:32:19 +07:00
< div id = "modal-lc-no-art" class = "lc-placeholder-text" style = "display: none;" >
2026-10-19 02:58:44 +07:00
< span data-i18n = "lightConeArtworkMissing" > 🗡️ ไม่มีรูปตัวอย่าง</ span >
2026-10-17 01:32:19 +07:00
</ div >
2026-10-16 23:49:27 +07:00
</ div >
2026-10-17 01:32:19 +07:00
<!-- Right: Details, Superimposition, Stats & Selector -->
< div class = "lc-details-col" >
< div style = "display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap;" >
< div >
< h3 id = "modal-lc-name-display" style = "font-size: 1.3rem; font-weight: 800; color: #fff; margin: 0 0 0.35rem 0;" > -</ h3 >
< div id = "modal-lc-meta-display" style = "display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;" ></ div >
</ div >
< div id = "modal-lc-rank-badge" class = "badge-super-tag" > S5 • Lv.80</ div >
</ div >
<!-- Level Row with Slider -->
< div class = "form-group" style = "margin-top: 0.75rem;" >
< div style = "display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;" >
< label class = "form-label" style = "margin: 0;" data-i18n = "lblLcLevel" > เลเวล (1-80)</ label >
< span id = "modal-lc-lvl-val" style = "font-weight: 800; font-family: monospace; color: var(--accent-cyan);" > 80 / 80</ span >
</ div >
< div style = "display: flex; gap: 0.75rem; align-items: center;" >
< input type = "range" id = "range-lc-level" min = "1" max = "80" value = "80" class = "skill-range" style = "flex: 1;" >
< input type = "number" id = "modal-lc-level" class = "form-input" min = "1" max = "80" value = "80" style = "width: 70px; text-align: center;" >
</ div >
2026-10-16 23:49:27 +07:00
</ div >
2026-10-17 01:32:19 +07:00
<!-- Superimposition Row S1 - S5 -->
2026-10-16 23:49:27 +07:00
< div class = "form-group" >
2026-10-17 01:32:19 +07:00
< label class = "form-label" style = "margin-bottom: 0.4rem;" data-i18n = "lblLcRank" > ระดับการขัดเกลา</ label >
< div class = "eidolon-buttons" id = "modal-lc-rank-btns" style = "gap: 0.5rem;" >
2026-10-16 23:49:27 +07:00
< button type = "button" class = "eidolon-pip lc-super-pip" data-rank = "1" > S1</ button >
< button type = "button" class = "eidolon-pip lc-super-pip" data-rank = "2" > S2</ button >
< button type = "button" class = "eidolon-pip lc-super-pip" data-rank = "3" > S3</ button >
< button type = "button" class = "eidolon-pip lc-super-pip" data-rank = "4" > S4</ button >
< button type = "button" class = "eidolon-pip lc-super-pip active" data-rank = "5" > S5</ button >
</ div >
</ div >
2026-10-17 01:32:19 +07:00
<!-- Passive Ability Description Card -->
< div class = "lc-passive-card" >
< div class = "lc-passive-title" data-i18n = "lcPassiveTitle" > เอฟเฟกต์สกิลพิเศษ</ div >
< div id = "modal-lc-passive-desc" class = "lc-passive-body" > ...</ div >
</ div >
<!-- Change Lightcone Section -->
< div style = "margin-top: 1rem; display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap;" >
< div style = "flex: 1; min-width: 220px;" >
< label class = "form-label" data-i18n = "lblSelectLc" > เลือกเปลี่ยน Light Cone</ label >
< select id = "select-modal-change-lc" class = "form-select" ></ select >
</ div >
< button type = "button" class = "btn btn-primary" id = "btn-modal-apply-change-lc" style = "padding: 0.65rem 1.25rem; font-weight: 700;" data-i18n = "btnChangeLc" >
เปลี่ยน Light Cone
</ button >
</ div >
< input type = "hidden" id = "modal-lc-id" value = "" >
</ div >
</ div >
</ div >
<!-- Sub Tab 4: Showcase Card (Matching srtools.punklorde.org/showcase-card) -->
< div id = "modaltab-showcase" class = "modal-subtab-content" style = "display: none;" >
<!-- Action Toolbar -->
< div style = "display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;" >
< div style = "font-weight: 800; font-size: 1rem; color: var(--text-highlight); display: flex; align-items: center; gap: 0.5rem;" >
< span data-i18n = "modalTabShowcase" > 🖼️ การ์ดแสดงผล</ span >
2026-10-19 02:58:44 +07:00
< span class = "btn-sm btn-secondary" id = "showcase-build-tag" data-i18n = "overviewStatsTitle" > Build Overview</ span >
2026-10-17 01:32:19 +07:00
</ div >
< div style = "display: flex; gap: 0.5rem; flex-wrap: wrap;" >
< button type = "button" class = "btn btn-sm btn-gold" id = "btn-showcase-auto-relics" data-i18n = "showcaseAutoRelics" >
⚡ ติดตั้งรีลิกส์แนะนำ
</ button >
< button type = "button" class = "btn btn-sm btn-secondary" id = "btn-showcase-copy-text" data-i18n = "showcaseCopy" >
📋 คัดลอกข้อความ
</ button >
< button type = "button" class = "btn btn-sm btn-primary" id = "btn-showcase-export-img" data-i18n = "showcaseExport" >
🖼️ ส่งออกรูปภาพ
</ button >
2026-10-16 23:10:02 +07:00
</ div >
</ div >
2026-10-17 01:32:19 +07:00
2026-10-17 03:20:18 +07:00
<!-- The Showcase Card UI Container with horizontal scroll wrapper -->
< div class = "showcase-scroll-wrapper" style = "overflow-x: auto; padding-bottom: 0.5rem; max-width: 100%;" >
< div id = "showcase-card-container" class = "showcase-card-layout" >
<!-- Rendered dynamically by JS -->
</ div >
2026-10-17 01:32:19 +07:00
</ div >
2026-10-16 23:10:02 +07:00
</ div >
2026-10-19 01:54:29 +07:00
<!-- Sub Tab 5: Per-character build data and Prydwen guide -->
< div id = "modaltab-build-guide" class = "modal-subtab-content" style = "display: none;" >
< div id = "build-guide-content" class = "build-guide-content" ></ div >
</ div >
2026-10-16 23:49:27 +07:00
<!-- Modal Footer -->
2026-10-16 22:53:35 +07:00
< div style = "display: flex; gap: 0.75rem; margin-top: 1.5rem; justify-content: flex-end; flex-wrap: wrap;" >
2026-10-17 00:22:03 +07:00
< button type = "button" class = "btn btn-secondary" id = "btn-modal-cancel-avatar" data-i18n = "modalBtnClose" >
2026-10-16 23:10:02 +07:00
✕ ปิด
2026-10-16 22:37:28 +07:00
</ button >
2026-10-17 00:22:03 +07:00
< button type = "button" class = "btn btn-success" id = "btn-modal-save-avatar" data-i18n = "modalBtnSave" >
2026-10-16 22:37:28 +07:00
💾 บันทึกตัวละคร
</ button >
</ div >
</ div >
</ div >
<!-- Party Member Picker Modal -->
< div class = "modal-overlay" id = "modal-lineup-picker" >
< div class = "modal-content" style = "max-width: 720px; max-height: 85vh; display: flex; flex-direction: column;" >
< div class = "modal-header" >
2026-10-17 00:22:03 +07:00
< h3 id = "modal-picker-title" style = "font-weight: 800;" data-i18n = "pickerTitle" > เลือกตัวละครเข้าทีม</ h3 >
2026-10-16 22:37:28 +07:00
< button class = "btn btn-sm btn-secondary" id = "btn-close-picker-modal" > ✕</ button >
</ div >
2026-10-17 00:22:03 +07:00
< input type = "text" id = "picker-search" class = "form-input" data-i18n-placeholder = "pickerSearchPlaceholder" placeholder = "🔍 ค้นหาตัวละครเพื่อลงทีม..." style = "margin-bottom: 1rem;" >
2026-10-17 01:05:33 +07:00
< div id = "picker-avatars-grid" class = "picker-grid-container" style = "overflow-y: auto; flex: 1; min-height: 0; padding-right: 0.5rem;" >
2026-10-16 22:37:28 +07:00
<!-- Injected by JS -->
</ div >
</ div >
</ div >
2026-10-16 22:03:47 +07:00
<!-- Settings Modal -->
< div class = "modal-overlay" id = "modal-settings" >
< div class = "modal-content" >
< div class = "modal-header" >
2026-10-17 00:22:03 +07:00
< h3 style = "font-weight: 700;" data-i18n = "apiModalTitle" > ⚙️ ตั้งค่าการเชื่อมต่อ API Server</ h3 >
2026-10-16 22:03:47 +07:00
< button class = "btn btn-sm btn-secondary" id = "btn-close-modal" > ✕</ button >
</ div >
< div >
< div class = "form-group" >
2026-10-17 00:22:03 +07:00
< label class = "form-label" data-i18n = "lblApiGatewayUrl" > Server REST API URL</ label >
2026-10-16 22:03:47 +07:00
< input type = "text" id = "modal-api-url" class = "form-input" >
</ div >
< div style = "display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem;" >
2026-10-17 00:22:03 +07:00
< button class = "btn btn-secondary" id = "btn-modal-cancel" data-i18n = "btnCancel" > ยกเลิก</ button >
< button class = "btn btn-primary" id = "btn-modal-save" data-i18n = "btnSaveTest" > บันทึก & ทดสอบ</ button >
2026-10-16 22:03:47 +07:00
</ div >
</ div >
</ div >
</ div >
2026-10-17 00:48:33 +07:00
<!-- Add Light Cone Modal -->
< div class = "modal-overlay" id = "modal-add-lc" >
2026-10-17 03:30:30 +07:00
< div class = "modal-content" style = "max-width: 760px; max-height: 88vh; display: flex; flex-direction: column;" >
< div class = "modal-header" style = "padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); margin-bottom: 0.75rem;" >
< h3 style = "font-weight: 800; margin: 0; display: flex; align-items: center; gap: 0.5rem;" data-i18n = "modalAddLcTitle" >
🗡️ เพิ่มกรวยแสงลง FreeSR
</ h3 >
2026-10-17 00:48:33 +07:00
< button type = "button" class = "btn btn-sm btn-secondary" id = "btn-close-add-lc-modal" > ✕</ button >
</ div >
2026-10-17 03:30:30 +07:00
< form id = "form-add-lc" style = "display: flex; flex-direction: column; flex: 1; min-height: 0;" >
<!-- 1. Selected Lightcone Preview Strip -->
< div id = "add-lc-preview-banner" style = "display: flex; gap: 0.85rem; align-items: center; background: rgba(251, 191, 36, 0.08); border: 1.5px solid var(--accent-gold); border-radius: var(--radius-sm); padding: 0.6rem 0.85rem; margin-bottom: 0.75rem;" >
< img id = "add-lc-preview-thumb" src = "" alt = "" style = "width: 44px; height: 60px; border-radius: 4px; object-fit: cover; border: 1px solid var(--accent-gold); background: #0b0d14; flex-shrink: 0;" >
< div style = "flex: 1; min-width: 0;" >
< div style = "font-size: 0.7rem; color: var(--accent-gold); font-weight: 800; text-transform: uppercase;" >
2026-10-19 02:58:44 +07:00
< span data-i18n = "selectedLightConeLabel" > ✓ กรวยแสงที่เลือก (Selected)</ span >
2026-10-17 03:30:30 +07:00
</ div >
< div id = "add-lc-preview-name" style = "font-weight: 800; font-size: 0.95rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" > -</ div >
< div id = "add-lc-preview-meta" style = "display: flex; gap: 0.65rem; font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; align-items: center; flex-wrap: wrap;" >
<!-- Populated by JS -->
</ div >
</ div >
< input type = "hidden" id = "add-lc-selected-id" value = "23001" >
< input type = "hidden" id = "add-lc-select" value = "23001" >
</ div >
<!-- 2. Search & Filter Bar -->
< div style = "display: flex; gap: 0.5rem; margin-bottom: 0.6rem; flex-wrap: wrap;" >
2026-10-19 02:58:44 +07:00
< input type = "text" id = "add-lc-search" class = "form-input" data-i18n-placeholder = "lightConeSearchPlaceholder" placeholder = "🔍 ค้นหากรวยแสง (ชื่อหรือ ID)..." style = "flex: 1; min-width: 160px;" >
2026-10-17 03:30:30 +07:00
< select id = "add-lc-filter-path" class = "form-select" style = "max-width: 140px;" >
< option value = "all" > ทุกสาย (All)</ option >
< option value = "Destruction" > ทำลายล้าง</ option >
< option value = "Hunt" > ล่าสังหาร</ option >
< option value = "Erudition" > ปัญญา</ option >
< option value = "Harmony" > ประสาน</ option >
< option value = "Nihility" > ลบล้าง</ option >
< option value = "Preservation" > อนุรักษ์</ option >
< option value = "Abundance" > เฟื่องฟู</ option >
< option value = "Remembrance" > ความทรงจำ</ option >
< option value = "Elation" > ปีติ</ option >
2026-10-17 00:48:33 +07:00
</ select >
2026-10-17 03:30:30 +07:00
< select id = "add-lc-filter-rarity" class = "form-select" style = "max-width: 110px;" >
2026-10-19 02:58:44 +07:00
< option value = "all" data-i18n = "filterAllRarity" > ทุกระดับดาว</ option >
< option value = "5" selected data-i18n = "filter5Star" > ★5 ดาว</ option >
< option value = "4" data-i18n = "filter4Star" > ★4 ดาว</ option >
< option value = "3" data-i18n = "filter3Star" > ★3 ดาว</ option >
2026-10-17 03:30:30 +07:00
</ select >
</ div >
<!-- 3. Visual Grid Container -->
< div id = "add-lc-visual-grid" class = "add-lc-grid-container" style = "flex: 1; min-height: 180px; max-height: 280px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.5rem; padding: 0.35rem; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin-bottom: 0.75rem;" >
<!-- Dynamically populated by JS -->
2026-10-17 00:48:33 +07:00
</ div >
2026-10-17 03:30:30 +07:00
<!-- 4. Level, Promotion, Superimpose, and Equip Avatar -->
< div class = "grid-4" style = "display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.6rem; margin-bottom: 0.75rem; align-items: end;" >
2026-10-17 00:48:33 +07:00
< div class = "form-group" style = "margin-bottom: 0;" >
2026-10-17 03:30:30 +07:00
< label class = "form-label" data-i18n = "modalColLevel" style = "font-size: 0.75rem;" > เลเวล (1-80)</ label >
2026-10-17 00:48:33 +07:00
< input type = "number" id = "add-lc-level" class = "form-input" min = "1" max = "80" value = "80" required >
</ div >
< div class = "form-group" style = "margin-bottom: 0;" >
2026-10-17 03:30:30 +07:00
< label class = "form-label" data-i18n = "lblPromotion" style = "font-size: 0.75rem;" > เลื่อนขั้น (0-6)</ label >
2026-10-17 00:48:33 +07:00
< input type = "number" id = "add-lc-promotion" class = "form-input" min = "0" max = "6" value = "6" required >
</ div >
< div class = "form-group" style = "margin-bottom: 0;" >
2026-10-19 02:58:44 +07:00
< label class = "form-label" data-i18n = "superimpositionLabel" style = "font-size: 0.75rem;" > Superimpose (ขัดเกลา)</ label >
2026-10-17 03:30:30 +07:00
< select id = "add-lc-rank" class = "form-select" required >
2026-10-19 02:58:44 +07:00
< option value = "5" selected data-superimposition-rank > S5 (ขัดเกลา 5)</ option >
< option value = "4" data-superimposition-rank > S4 (ขัดเกลา 4)</ option >
< option value = "3" data-superimposition-rank > S3 (ขัดเกลา 3)</ option >
< option value = "2" data-superimposition-rank > S2 (ขัดเกลา 2)</ option >
< option value = "1" data-superimposition-rank > S1 (ขัดเกลา 1)</ option >
2026-10-17 03:30:30 +07:00
</ select >
</ div >
< div class = "form-group" style = "margin-bottom: 0;" >
< label class = "form-label" data-i18n = "lblEquipAvatar" style = "font-size: 0.75rem;" > สวมใส่ให้ตัวละคร (ถ้าต้องการ)</ label >
< select id = "add-lc-avatar" class = "form-select" >
< option value = "0" data-i18n = "unassigned" > -- ยังไม่สวมใส่ (เก็บในคลัง) --</ option >
<!-- Injected by JS -->
</ select >
2026-10-17 00:48:33 +07:00
</ div >
</ div >
2026-10-17 03:30:30 +07:00
<!-- 5. Footer Buttons -->
< div style = "display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.6rem; border-top: 1px solid rgba(255, 255, 255, 0.08);" >
2026-10-17 00:48:33 +07:00
< button type = "button" class = "btn btn-secondary" id = "btn-cancel-add-lc" data-i18n = "btnCancel" > ยกเลิก</ button >
< button type = "submit" class = "btn btn-success" data-i18n = "btnAddLcSubmit" > 💾 เพิ่มลง FreeSR</ button >
</ div >
</ form >
</ div >
</ div >
<!-- Add Relic Modal -->
< div class = "modal-overlay" id = "modal-add-relic" >
< div class = "modal-content" style = "max-width: 580px;" >
< div class = "modal-header" >
< h3 style = "font-weight: 800;" data-i18n = "modalAddRelicTitle" > 🛡️ เพิ่มรีลิกส์ลง FreeSR</ h3 >
< button type = "button" class = "btn btn-sm btn-secondary" id = "btn-close-add-relic-modal" > ✕</ button >
</ div >
< form id = "form-add-relic" >
< div class = "form-group" >
< label class = "form-label" data-i18n = "lblSelectRelicSet" > เลือกเซ็ตรีลิกส์</ label >
< select id = "add-relic-set" class = "form-select" required >
<!-- Injected by JS -->
</ select >
</ div >
< div class = "grid-2" style = "gap: 0.75rem; margin-bottom: 1rem;" >
< div class = "form-group" style = "margin-bottom: 0;" >
< label class = "form-label" data-i18n = "lblRelicSlot" > ชิ้นส่วน (Slot)</ label >
< select id = "add-relic-slot" class = "form-select" required >
2026-10-19 02:58:44 +07:00
< option value = "1" data-relic-slot = "head" > 1: ส่วนหัว (Head / HP)</ option >
< option value = "2" data-relic-slot = "hands" > 2: ส่วนมือ (Hands / ATK)</ option >
< option value = "3" data-relic-slot = "body" > 3: ลำตัว (Body)</ option >
< option value = "4" data-relic-slot = "feet" > 4: รองเท้า (Feet)</ option >
< option value = "5" data-relic-slot = "sphere" > 5: ลูกแก้ว (Planar Sphere)</ option >
< option value = "6" data-relic-slot = "rope" > 6: สร้อยเชื่อมต่อ (Link Rope)</ option >
2026-10-17 00:48:33 +07:00
</ select >
</ div >
< div class = "form-group" style = "margin-bottom: 0;" >
< label class = "form-label" data-i18n = "modalColLevel" > เลเวล (0-15)</ label >
< input type = "number" id = "add-relic-level" class = "form-input" min = "0" max = "15" value = "15" required >
</ div >
</ div >
< div class = "form-group" >
< label class = "form-label" data-i18n = "lblMainAffix" > สเตตัสหลัก (Main Affix)</ label >
< select id = "add-relic-main-affix" class = "form-select" required >
<!-- Dynamic according to selected slot -->
</ select >
</ div >
< div class = "form-group" >
< label class = "form-label" data-i18n = "lblEquipAvatar" > สวมใส่ให้ตัวละคร (ถ้าต้องการ)</ label >
< select id = "add-relic-avatar" class = "form-select" >
< option value = "0" data-i18n = "unassigned" > -- ยังไม่สวมใส่ (เก็บในคลัง) --</ option >
<!-- Injected by JS -->
</ select >
</ div >
< div style = "display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem;" >
< button type = "button" class = "btn btn-secondary" id = "btn-cancel-add-relic" data-i18n = "btnCancel" > ยกเลิก</ button >
< button type = "submit" class = "btn btn-success" data-i18n = "btnAddRelicSubmit" > 💾 เพิ่มลง FreeSR</ button >
</ div >
</ form >
</ div >
2026-10-17 03:30:30 +07:00
</ div >
2026-10-17 11:52:20 +07:00
<!-- Modal: Select Relic for Specific Slot (Large, Spacious & Easy to Use) -->
2026-10-17 02:35:55 +07:00
< div class = "modal-overlay" id = "modal-select-relic-slot" >
2026-10-17 11:52:20 +07:00
< div class = "modal-content relic-picker-modal-content" >
< div class = "modal-header" style = "margin-bottom: 0.75rem;" >
< div style = "display: flex; align-items: center; gap: 0.65rem;" >
2026-10-19 02:58:44 +07:00
< img id = "modal-slot-picker-icon" src = "" alt = "Slot" data-i18n-alt = "slot" style = "width: 28px; height: 28px; object-fit: contain;" >
2026-10-17 11:52:20 +07:00
< div >
< h3 id = "modal-slot-picker-title" style = "font-weight: 800; font-size: 1.15rem; margin: 0;" data-i18n = "slotPickerTitle" >
🛡️ เลือกสวมใส่รีลิกส์
</ h3 >
2026-10-19 02:58:44 +07:00
< div id = "modal-slot-picker-subtitle" style = "font-size: 0.75rem; color: var(--text-muted); margin-top: 2px;" data-i18n = "slotPickerSubtitle" >
2026-10-17 11:52:20 +07:00
เลือกสวมใส่ชิ้นที่มีอยู่ หรือสร้างชิ้นใหม่ตรงตามบิลด์ที่แนะนำ
</ div >
</ div >
</ div >
2026-10-17 02:35:55 +07:00
< button type = "button" class = "btn btn-sm btn-secondary" id = "btn-close-slot-picker" > ✕</ button >
</ div >
2026-10-17 11:52:20 +07:00
<!-- Current Equipped Relic Banner with Unequip Button -->
< div id = "slot-picker-current-box" class = "slot-picker-current-banner" >
<!-- Injected currently equipped relic or empty status -->
</ div >
<!-- Tabs Navigation -->
< div class = "slot-picker-tabs" >
< button type = "button" class = "slot-picker-tab-btn active" id = "tab-btn-relic-quick" data-pickertab = "slot-picker-quick-tab" >
< span data-i18n = "tabQuickGen" > ⚡ สวมใส่ / สร้างชิ้นแนะนำ</ span >
</ button >
< button type = "button" class = "slot-picker-tab-btn" id = "tab-btn-relic-inventory" data-pickertab = "slot-picker-inventory-tab" >
< span data-i18n = "tabFromInventory" > 📦 เลือกจากคลัง</ span > (< span id = "slot-picker-inv-count" > 0</ span > )
</ button >
</ div >
<!-- Tab 1: Quick & Recommended Builder -->
< div id = "slot-picker-quick-tab" class = "slot-picker-tab-pane" >
<!-- Recommended Fast Equip Card -->
< div class = "slot-picker-rec-highlight" id = "slot-picker-rec-highlight" >
<!-- Injected recommended set card and instant equip button -->
</ div >
<!-- Custom Relic Creator -->
2026-10-17 02:35:55 +07:00
< div >
2026-10-17 11:52:20 +07:00
< div style = "font-weight: 700; font-size: 0.85rem; color: var(--text-highlight); margin-bottom: 0.5rem;" data-i18n = "chooseSet" >
เลือกเซ็ตที่ต้องการ:
</ div >
< div class = "slot-picker-set-grid" id = "slot-picker-set-grid" >
<!-- Injected set cards for this slot -->
</ div >
< div style = "font-weight: 700; font-size: 0.85rem; color: var(--text-highlight); margin-top: 0.85rem; margin-bottom: 0.5rem;" data-i18n = "chooseMainStat" >
เลือกสเตตัสหลัก (Main Stat):
</ div >
< div class = "slot-picker-mainstat-pills" id = "slot-picker-mainstat-pills" >
<!-- Injected main stat pill buttons -->
</ div >
2026-10-17 13:25:39 +07:00
<!-- Substats Customizer -->
< div class = "slot-picker-substats-section" >
< div style = "display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.5rem;" >
2026-10-19 02:58:44 +07:00
< div style = "font-weight: 700; font-size: 0.85rem; color: var(--text-highlight);" data-i18n = "substatCustomizerTitle" >
2026-10-17 13:25:39 +07:00
🔧 ปรับแต่งออฟรอง (Substats Customizer):
</ div >
< div class = "substat-presets-strip" >
2026-10-19 02:58:44 +07:00
< button type = "button" class = "btn-substat-preset" data-preset = "god" data-i18n = "substatPresetRecommended" data-i18n-title = "substatPresetRecommended" title = "ออฟแนะนำตามตัวละคร" > ⭐ ออฟเทพแนะนำ</ button >
< button type = "button" class = "btn-substat-preset" data-preset = "crit" data-i18n = "substatPresetCrit" data-i18n-title = "substatPresetCrit" title = "เน้นคริล้วน" > 🎯 คริ Rate/DMG</ button >
< button type = "button" class = "btn-substat-preset" data-preset = "spd" data-i18n = "substatPresetSpeed" data-i18n-title = "substatPresetSpeed" title = "เน้นความเร็ว" > ⚡ สปีด SPD</ button >
< button type = "button" class = "btn-substat-preset" data-preset = "break" data-i18n = "substatPresetBreak" data-i18n-title = "substatPresetBreak" title = "เน้นทำลายล้าง" > 🔨 Break Effect</ button >
< button type = "button" class = "btn-substat-preset" data-preset = "tank" data-i18n = "substatPresetTank" data-i18n-title = "substatPresetTank" title = "เน้นถึก ป้องกัน เลือด" > 🛡️ ถึก HP/DEF</ button >
2026-10-17 13:25:39 +07:00
</ div >
</ div >
< div class = "slot-picker-substats-grid" id = "slot-picker-substats-grid" >
<!-- Injected by JS: 4 substat rows with selects, steppers & previews -->
</ div >
< div style = "display: flex; justify-content: space-between; align-items: center; margin-top: 0.65rem; padding: 0.4rem 0.75rem; background: rgba(10, 14, 23, 0.75); border-radius: var(--radius-sm); border: 1px solid var(--border-color); font-size: 0.775rem;" >
< span style = "color: var(--text-muted);" >
2026-10-19 02:58:44 +07:00
< span data-i18n = "substatRollCountLabel" > 💡 รวมจำนวนโรล (Rolls):</ span > < strong id = "slot-picker-total-rolls" style = "color: var(--accent-gold); font-family: monospace; font-size: 0.9rem;" > 9</ strong > < span id = "slot-picker-roll-limit" data-i18n = "substatRollLimit" > / 9 โรล (ระดับ 5★ เลเวล 15)</ span >
2026-10-17 13:25:39 +07:00
</ span >
2026-10-19 02:58:44 +07:00
< button type = "button" class = "btn btn-sm btn-secondary" id = "btn-reset-substats" data-i18n = "substatResetButton" style = "font-size: 0.725rem; padding: 0.2rem 0.6rem;" > ↺ คืนค่าเดิม</ button >
2026-10-17 13:25:39 +07:00
</ div >
</ div >
< div style = "margin-top: 1rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;" >
< div id = "slot-picker-edit-mode-indicator" style = "font-size: 0.8rem; color: var(--accent-cyan); font-weight: 700;" ></ div >
2026-10-17 11:52:20 +07:00
< button type = "button" class = "btn btn-primary" id = "btn-slot-picker-confirm-custom" style = "padding: 0.65rem 1.4rem; font-weight: 800; font-size: 0.9rem;" data-i18n = "btnEquipInstant" >
2026-10-17 13:25:39 +07:00
⚡ สวมใส่ชิ้นนี้ทันที (+15 5★ ออฟที่เลือก)
2026-10-17 11:52:20 +07:00
</ button >
</ div >
2026-10-17 02:35:55 +07:00
</ div >
</ div >
2026-10-17 11:52:20 +07:00
<!-- Tab 2: Inventory Grid -->
< div id = "slot-picker-inventory-tab" class = "slot-picker-tab-pane" style = "display: none;" >
< div id = "slot-picker-inventory-list" class = "slot-picker-inv-grid" >
<!-- Injected cards of matching slot relics -->
</ div >
2026-10-17 02:35:55 +07:00
</ div >
</ div >
2026-10-17 00:48:33 +07:00
</ div >
2026-10-17 03:20:18 +07:00
<!-- Modal: Select Lightcone for Avatar -->
< div class = "modal-overlay" id = "modal-select-lightcone" >
< div class = "modal-content" style = "max-width: 720px; max-height: 85vh; display: flex; flex-direction: column;" >
< div class = "modal-header" >
2026-10-17 11:22:50 +07:00
< h3 id = "modal-lc-picker-title" style = "font-weight: 800;" data-i18n = "lcPickerTitle" >
2026-10-17 03:20:18 +07:00
🗡️ เลือกสวมใส่กรวยแสง (Light Cone)
</ h3 >
< button type = "button" class = "btn btn-sm btn-secondary" id = "btn-close-lc-picker" > ✕</ button >
</ div >
<!-- Search & Filters -->
< div style = "display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap;" >
2026-10-19 02:58:44 +07:00
< input type = "text" id = "lc-picker-search" class = "form-input" data-i18n-placeholder = "lightConeSearchPlaceholder" placeholder = "🔍 ค้นหาชื่อหรือ ID กรวยแสง..." style = "flex: 1; min-width: 160px;" >
2026-10-17 03:20:18 +07:00
< select id = "lc-picker-filter-path" class = "form-select" style = "max-width: 140px;" >
< option value = "all" > ทุกสาย</ option >
< option value = "same" selected > ตรงสายตัวละคร</ option >
< option value = "Destruction" > ทำลายล้าง</ option >
< option value = "Hunt" > ล่าสังหาร</ option >
< option value = "Erudition" > ปัญญา</ option >
< option value = "Harmony" > ประสาน</ option >
< option value = "Nihility" > ลบล้าง</ option >
< option value = "Preservation" > อนุรักษ์</ option >
< option value = "Abundance" > เฟื่องฟู</ option >
< option value = "Remembrance" > ความทรงจำ</ option >
< option value = "Elation" > ปีติ</ option >
</ select >
2026-10-19 02:58:44 +07:00
< select id = "lc-picker-rank" class = "form-select" style = "max-width: 110px;" data-i18n-title = "superimpositionSelectTitle" title = "ระดับการขัดเกลาเมื่อสวมใส่" >
< option value = "5" selected data-superimposition-rank > ขัดเกลา S5</ option >
< option value = "4" data-superimposition-rank > ขัดเกลา S4</ option >
< option value = "3" data-superimposition-rank > ขัดเกลา S3</ option >
< option value = "2" data-superimposition-rank > ขัดเกลา S2</ option >
< option value = "1" data-superimposition-rank > ขัดเกลา S1</ option >
2026-10-17 03:20:18 +07:00
</ select >
</ div >
<!-- Signature Recommendation Box -->
< div id = "lc-picker-signature-box" style = "display: none; background: rgba(251, 191, 36, 0.1); border: 1px dashed rgba(251, 191, 36, 0.5); border-radius: var(--radius-sm); padding: 0.65rem 0.85rem; margin-bottom: 0.75rem; align-items: center; justify-content: space-between; gap: 0.75rem;" >
< div style = "display: flex; gap: 0.6rem; align-items: center; min-width: 0;" >
< img id = "lc-picker-sig-thumb" src = "" alt = "" style = "width: 38px; height: 52px; border-radius: 4px; object-fit: cover; border: 1px solid var(--accent-gold);" >
< div style = "min-width: 0;" >
2026-10-17 11:22:50 +07:00
< div style = "font-size: 0.7rem; color: var(--accent-gold); font-weight: 800;" data-i18n = "lcPickerSigTitle" > ⭐ กรวยแสงประจำตัวแนะนำ (Signature)</ div >
2026-10-17 03:20:18 +07:00
< div id = "lc-picker-sig-name" style = "font-weight: 700; font-size: 0.875rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" > -</ div >
</ div >
</ div >
2026-10-17 11:22:50 +07:00
< button type = "button" class = "btn btn-sm btn-gold" id = "btn-lc-picker-quick-sig" data-i18n = "lcPickerEquipSig" > ⚡ สวมใส่ชิ้นนี้</ button >
2026-10-17 03:20:18 +07:00
</ div >
<!-- Lightcones List Grid -->
< div id = "lc-picker-list" style = "flex: 1; min-height: 0; max-height: 380px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.5rem; padding-right: 0.35rem;" >
<!-- Injected by JS -->
</ div >
<!-- Footer Actions -->
< div style = "display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; border-top: 1px solid var(--border-color); padding-top: 0.75rem;" >
2026-10-17 11:22:50 +07:00
< button type = "button" class = "btn btn-sm btn-secondary" id = "btn-lc-picker-unequip" style = "color: var(--accent-red);" data-i18n = "lcPickerUnequip" > ✕ ถอดกรวยแสงออก</ button >
< button type = "button" class = "btn btn-sm btn-secondary" id = "btn-lc-picker-close" data-i18n = "modalBtnClose" > ปิด</ button >
2026-10-17 03:20:18 +07:00
</ div >
</ div >
</ div >
2026-10-21 16:30:08 +07:00
< dialog id = "item-catalog-detail" class = "item-catalog-dialog" aria-labelledby = "item-catalog-detail-name" >
< div class = "item-catalog-detail-shell" >
< header class = "item-catalog-detail-header" >
< span data-i18n = "itemCatalogDetailTitle" > Item Details</ span >
< button type = "button" class = "item-catalog-dialog-close" id = "item-catalog-detail-close" data-i18n-aria-label = "itemCatalogClose" aria-label = "Close" > × </ button >
</ header >
< div class = "item-catalog-detail-body" >
< div class = "item-catalog-detail-art" id = "item-catalog-detail-art" ></ div >
< div class = "item-catalog-detail-copy" >
< h2 id = "item-catalog-detail-name" ></ h2 >
< div class = "item-catalog-detail-id" id = "item-catalog-detail-id" ></ div >
< div class = "item-catalog-detail-source" >< span data-i18n = "itemCatalogSourceTable" > Source tables</ span > : < span id = "item-catalog-detail-source" ></ span ></ div >
< div class = "item-catalog-detail-meta" id = "item-catalog-detail-meta" ></ div >
< section class = "item-catalog-detail-section" >
< h3 data-i18n = "itemCatalogItemDescription" > Description</ h3 >
< div class = "item-catalog-detail-description" id = "item-catalog-detail-description" ></ div >
</ section >
< section class = "item-catalog-detail-section item-catalog-detail-lore" id = "item-catalog-detail-lore-section" hidden >
< h3 data-i18n = "itemCatalogLore" > Background</ h3 >
< div id = "item-catalog-detail-lore" ></ div >
</ section >
</ div >
</ div >
< div class = "item-catalog-detail-quantity" >
< label for = "item-catalog-detail-amount" data-i18n = "itemCatalogQuantity" > Quantity</ label >
< div class = "item-catalog-amount-stepper" >
< button type = "button" id = "item-catalog-amount-minus" data-i18n-aria-label = "itemCatalogDecrease" aria-label = "Decrease quantity" > − </ button >
< input type = "number" id = "item-catalog-detail-amount" inputmode = "numeric" min = "1" max = "1" value = "1" >
< button type = "button" id = "item-catalog-amount-plus" data-i18n-aria-label = "itemCatalogIncrease" aria-label = "Increase quantity" > +</ button >
</ div >
< span id = "item-catalog-amount-limit" class = "item-catalog-amount-limit" ></ span >
</ div >
< footer class = "item-catalog-detail-footer" >
< button type = "button" class = "btn btn-secondary" id = "item-catalog-detail-done" data-i18n = "itemCatalogClose" > Close</ button >
</ footer >
</ div >
</ dialog >
2026-10-16 22:03:47 +07:00
<!-- Toast Notification Container -->
< div class = "toast-container" id = "toast-container" ></ div >
<!-- Script Modules -->
2026-10-25 00:45:23 +07:00
< script type = "module" src = "js/app.js?v=3.3" ></ script >
2026-10-16 22:03:47 +07:00
</ body >
</ html >
