663 lines
38 KiB
HTML
663 lines
38 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="th">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>GaC-Srtool — Ultimate Star Rail Server & Build Manager</title>
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
<link rel="icon" type="image/png" href="assets/logo.png">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- App Header -->
|
|
<header class="app-header">
|
|
<div class="brand">
|
|
<img src="assets/logo.png" alt="GaC Logo" class="brand-logo-img">
|
|
<div>
|
|
<div class="brand-title">GaC-Srtool</div>
|
|
<div class="brand-subtitle" data-i18n="appSubtitle">Star Rail FreeSR & Server Controller</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-controls">
|
|
<!-- Server Mode Selector -->
|
|
<div class="server-mode-badge" title="โหมดการเชื่อมต่อเซิร์ฟเวอร์">
|
|
<span>🌐</span>
|
|
<select id="server-mode-select" class="server-mode-select">
|
|
<option value="gac" selected>⚡ GaC-hkrpg-go</option>
|
|
<option value="firefly">🔥 FireflyGo</option>
|
|
<option value="robin">🕊️ RobinSR</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Language Selector (13 Languages) -->
|
|
<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 / ภาษา">
|
|
</select>
|
|
|
|
<!-- Connection Pill -->
|
|
<div class="connection-pill" id="btn-open-settings" title="คลิกเพื่อตั้งค่าการเชื่อมต่อ API">
|
|
<span class="status-dot" id="status-dot"></span>
|
|
<span id="connection-status-text">กำลังตรวจสอบ...</span>
|
|
</div>
|
|
|
|
<button class="btn btn-secondary btn-sm" id="btn-quick-ping" title="รีเฟรชการเชื่อมต่อ" data-i18n="refresh">
|
|
🔄 รีเฟรช
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Navigation Bar -->
|
|
<nav class="nav-tabs">
|
|
<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>
|
|
<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>
|
|
</nav>
|
|
|
|
<!-- Main Container -->
|
|
<main class="main-container">
|
|
|
|
<!-- 1. Dashboard Tab & Party Lineup -->
|
|
<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>
|
|
<div class="stat-label" data-i18n="statAvatars">ตัวละครที่ครอบครอง</div>
|
|
</div>
|
|
<div class="card stat-box">
|
|
<div class="stat-number" id="stat-lightcones">0</div>
|
|
<div class="stat-label" data-i18n="statLightcones">กรวยแสง</div>
|
|
</div>
|
|
<div class="card stat-box">
|
|
<div class="stat-number" id="stat-relics">0</div>
|
|
<div class="stat-label" data-i18n="statRelics">รีลิกส์</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Party Lineup Visualizer -->
|
|
<div class="card" style="margin-bottom: 1.5rem;">
|
|
<div class="card-title">
|
|
<span data-i18n="currentLineupTitle">🎮 ทีมปัจจุบัน</span>
|
|
</div>
|
|
<div class="lineup-grid" id="lineup-container">
|
|
<!-- Rendered by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-2">
|
|
<!-- Server & Map Card -->
|
|
<div class="card">
|
|
<div class="card-title">
|
|
<span data-i18n="serverStatusTitle">📍 สถานะเซิร์ฟเวอร์ & พิกัดปัจจุบัน</span>
|
|
<span class="btn-sm btn-secondary" id="badge-version">API Live</span>
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; gap: 0.75rem;">
|
|
<div>
|
|
<span class="form-label" data-i18n="lblServerModeActive">โหมดเซิร์ฟเวอร์ที่ใช้งาน</span>
|
|
<strong id="lbl-active-mode" style="color: var(--accent-cyan);">GaC-hkrpg-go</strong>
|
|
</div>
|
|
<div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions Card -->
|
|
<div class="card">
|
|
<div class="card-title" data-i18n="quickActionsTitle">⚡ ดำเนินการด่วน</div>
|
|
<p class="card-subtitle" data-i18n="quickActionsSubtitle">ส่งคำสั่งไปยังเซิร์ฟเวอร์ทันที</p>
|
|
<div style="display: flex; flex-direction: column; gap: 0.75rem;">
|
|
<button class="btn btn-gold" id="btn-quick-max-all" data-i18n="btnMaxAll">
|
|
⭐ ปรับเลเวล 80 & ปลด E6 ตัวละครทั้งหมด
|
|
</button>
|
|
<button class="btn btn-secondary" id="btn-quick-sync-persistent" data-i18n="btnSyncPersistent">
|
|
💾 ซิงค์ข้อมูล Persistent ล่าสุด
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2. Avatars Tab (Build & Eidolon Editor) -->
|
|
<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;">
|
|
<div style="display: flex; gap: 0.75rem; flex: 1; max-width: 680px; flex-wrap: wrap;">
|
|
<input type="text" id="avatar-search" class="form-input" data-i18n-placeholder="searchPlaceholder" placeholder="🔍 ค้นหาชื่อหรือ ID ตัวละคร..." style="min-width: 180px; flex: 1;">
|
|
<select id="avatar-filter-rarity" class="form-select" style="max-width: 130px;">
|
|
<option value="all" data-i18n="filterAllRarity">ทุกระดับดาว</option>
|
|
<option value="5" data-i18n="filter5Star">5 ดาว</option>
|
|
<option value="4" data-i18n="filter4Star">4 ดาว</option>
|
|
</select>
|
|
<select id="avatar-filter-element" class="form-select" style="max-width: 130px;">
|
|
<option value="all" data-i18n="filterAllElements">ทุกธาตุ</option>
|
|
<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>
|
|
</select>
|
|
<select id="avatar-filter-path" class="form-select" style="max-width: 130px;">
|
|
<option value="all" data-i18n="filterAllPaths">ทุกประเภท</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>
|
|
</div>
|
|
<div style="display: flex; gap: 0.5rem;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="avatars-grid" class="grid-4">
|
|
<div style="color: var(--text-muted); grid-column: 1/-1; text-align: center; padding: 2rem;" data-i18n="avatarsLoading">
|
|
กำลังดึงข้อมูลตัวละคร...
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. Equipment Tab (Lightcones & Relics) -->
|
|
<section id="tab-equipment" class="tab-content">
|
|
<div class="grid-2">
|
|
<!-- Lightcones Card -->
|
|
<div class="card">
|
|
<div class="card-title">
|
|
<span data-i18n="eqLcTitle">🗡️ กรวยแสงในคลัง</span>
|
|
<span class="btn-sm btn-secondary" id="badge-total-lc">0 ชิ้น</span>
|
|
</div>
|
|
<p class="card-subtitle" data-i18n="eqLcSubtitle">รายการกรวยแสงทั้งหมดจาก freesr-data.json</p>
|
|
<div id="lightcones-list" style="max-height: 520px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem;">
|
|
<div style="color: var(--text-muted); text-align: center; padding: 1.5rem;" data-i18n="eqLcLoading">กำลังโหลดข้อมูลกรวยแสง...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Relics Card -->
|
|
<div class="card">
|
|
<div class="card-title">
|
|
<span data-i18n="eqRelicTitle">🛡️ รีลิกส์ในคลัง</span>
|
|
<span class="btn-sm btn-secondary" id="badge-total-relics">0 ชิ้น</span>
|
|
</div>
|
|
<p class="card-subtitle" data-i18n="eqRelicSubtitle">รายการรีลิกส์ทั้งหมดจาก freesr-data.json</p>
|
|
<div id="relics-list" style="max-height: 520px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem;">
|
|
<div style="color: var(--text-muted); text-align: center; padding: 1.5rem;" data-i18n="eqRelicLoading">กำลังโหลดข้อมูลรีลิกส์...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 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">
|
|
<span data-i18n="persistentTitle">💾 จัดการไฟล์เซฟ GaC</span>
|
|
<span class="btn-sm btn-success" data-i18n="persistentBadge">เซิร์ฟเวอร์ของเราเอง</span>
|
|
</div>
|
|
<p class="card-subtitle" data-i18n="persistentSubtitle">
|
|
ไฟล์ persistent เก็บการตั้งค่าสถานะผู้เล่นเฉพาะของเซิร์ฟเวอร์ GaC เช่น เพศ/ธาตุตัวเอก, สเตตัส March 7th, สวิตช์ฟังก์ชัน Global ต่างๆ
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid-2">
|
|
<!-- Main Character & March Path -->
|
|
<div class="card">
|
|
<div class="card-title" data-i18n="persistentTbM7Title">👤 ผู้บุกเบิก & March 7th</div>
|
|
<form id="form-persistent-chars">
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="lblTbGenderElement">เพศ & ธาตุของตัวเอก</label>
|
|
<select id="persistent-mc-select" class="form-select">
|
|
<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>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="lblM7Path">สายของ March 7th</label>
|
|
<select id="persistent-march-select" class="form-select">
|
|
<option value="MarchHunt">March 7th - ล่าสังหาร</option>
|
|
<option value="MarchPreservation">March 7th - อนุรักษ์</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary" style="width: 100%;" data-i18n="btnSaveCharSettings">
|
|
💾 บันทึกการตั้งค่าตัวละคร
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Global Features & Toggles -->
|
|
<div class="card">
|
|
<div class="card-title" data-i18n="persistentGlobalTitle">⚙️ สวิตช์ระบบพิเศษของ GaC</div>
|
|
<div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem;">
|
|
<div class="ex-switch-card">
|
|
<div>
|
|
<div style="font-weight: 700;">Silver Wolf Global Feature</div>
|
|
<div style="font-size: 0.8rem; color: var(--text-muted);" data-i18n="swGlobalDesc">เปิดใช้งานฟังก์ชันพิเศษ SW ทั่วทั้งเซิร์ฟเวอร์</div>
|
|
</div>
|
|
<label class="switch">
|
|
<input type="checkbox" id="toggle-sw-global">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="ex-switch-card">
|
|
<div>
|
|
<div style="font-weight: 700;">Castorice Global Feature</div>
|
|
<div style="font-size: 0.8rem; color: var(--text-muted);" data-i18n="castoriceGlobalDesc">เปิดใช้งานฟังก์ชันพิเศษ Castorice ทั่วทั้งเซิร์ฟเวอร์</div>
|
|
</div>
|
|
<label class="switch">
|
|
<input type="checkbox" id="toggle-castorice-global">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<button class="btn btn-success" id="btn-save-persistent-toggles" data-i18n="btnSaveGlobalSwitch">
|
|
💾 บันทึกสวิตช์ Global
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 5. Ex-Rank Tab -->
|
|
<section id="tab-exrank" class="tab-content">
|
|
<div class="card" style="margin-bottom: 1.5rem;">
|
|
<div class="card-title">
|
|
<span data-i18n="exrankTitle">⚡ ระบบปลดล็อค Ex-Rank Skill</span>
|
|
<div style="display: flex; gap: 0.5rem;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<p class="card-subtitle" data-i18n="exrankSubtitle">
|
|
เปิดใช้งานพรสวรรค์และกลไกพิเศษ 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;">
|
|
<!-- Rendered by JS -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 6. JSON Management Tab -->
|
|
<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;">
|
|
<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>
|
|
</div>
|
|
<div style="display: flex; gap: 0.5rem;">
|
|
<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>
|
|
<label class="btn btn-sm btn-secondary" style="cursor: pointer; margin: 0;">
|
|
<span data-i18n="btnUpload">📤 อัปโหลดไฟล์</span> <input type="file" id="json-file-input" accept=".json,text/plain" style="display: none;">
|
|
</label>
|
|
<button class="btn btn-sm btn-success" id="btn-json-save" data-i18n="btnSaveServer">💾 บันทึกไปยังเซิร์ฟเวอร์</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="json-editor-wrapper">
|
|
<textarea id="json-editor" class="json-textarea" spellcheck="false" placeholder="..."></textarea>
|
|
<div style="display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted);">
|
|
<span id="json-status-info" data-i18n="jsonStatusReady">พร้อมใช้งาน</span>
|
|
<span data-i18n="jsonTip">คำแนะนำ: สามารถแก้ไขค่าดิบแล้วกด 'บันทึกไปยังเซิร์ฟเวอร์' ได้ทันที</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 8. Settings -->
|
|
<section id="tab-settings" class="tab-content">
|
|
<div style="max-width: 620px; margin: 0 auto;">
|
|
<!-- Endpoint config -->
|
|
<div class="card">
|
|
<div class="card-title" data-i18n="apiSettingsTitle">⚙️ ตั้งค่าการเชื่อมต่อ API Gateway</div>
|
|
<p class="card-subtitle" data-i18n="apiSettingsSubtitle">ปรับเปลี่ยนพอร์ตหรือ IP ได้ตามเซิร์ฟเวอร์ที่คุณใช้</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">
|
|
<option value="gac">⚡ GaC-hkrpg-go</option>
|
|
<option value="firefly">🔥 FireflyGo</option>
|
|
<option value="robin">🕊️ RobinSR</option>
|
|
</select>
|
|
</div>
|
|
<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">
|
|
<small style="color: var(--text-muted); display: block; margin-top: 0.35rem;">
|
|
* พอร์ตเริ่มต้น 21000 สำหรับ SDK server
|
|
</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="lblPingInterval">ความถี่ในการตรวจสอบสถานะ (วินาที)</label>
|
|
<input type="number" id="setting-ping-interval" class="form-input" min="3" max="60" value="10">
|
|
</div>
|
|
<div style="display: flex; gap: 0.75rem;">
|
|
<button type="submit" class="btn btn-success" style="flex: 1;" data-i18n="btnSaveSettings">💾 บันทึกการตั้งค่า</button>
|
|
<button type="button" class="btn btn-secondary" id="btn-reset-settings" data-i18n="btnResetDefault">คืนค่าเริ่มต้น</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- Character Detail / Build Modal -->
|
|
<div class="modal-overlay" id="modal-avatar-detail">
|
|
<div class="modal-content" style="max-width: 760px;">
|
|
<!-- Modal Header -->
|
|
<div class="modal-header">
|
|
<h3 id="modal-char-title" style="font-weight: 800; font-size: 1.15rem; color: var(--text-highlight);" data-i18n="modalTitleCharEdit">
|
|
ปรับแต่งตัวละคร
|
|
</h3>
|
|
<button class="btn btn-sm btn-secondary" id="btn-close-avatar-modal">✕</button>
|
|
</div>
|
|
|
|
<!-- Character Top Banner & Quick Max All -->
|
|
<div style="display: flex; gap: 1.25rem; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap;">
|
|
<div class="avatar-image-container" style="width: 76px; height: 76px;">
|
|
<img id="modal-char-img" class="avatar-img" src="" alt="">
|
|
</div>
|
|
<div style="flex: 1; min-width: 180px;">
|
|
<div id="modal-char-name" style="font-size: 1.25rem; font-weight: 800;"></div>
|
|
<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>
|
|
</div>
|
|
<button type="button" class="btn btn-gold" id="btn-modal-max-all-char" style="padding: 0.5rem 1rem; font-weight: 800;" data-i18n="modalBtnMaxAllChar">
|
|
⭐ ปรับเต็มทั้งหมด
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Sub Tabs Navigation (srtools style) -->
|
|
<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;">
|
|
<button type="button" class="modal-subtab-btn active" data-modaltab="modaltab-skills" data-i18n="modalTabSkills">
|
|
⚡ สกิลและร่องรอย
|
|
</button>
|
|
<button type="button" class="modal-subtab-btn" data-modaltab="modaltab-status" data-i18n="modalTabStatus">
|
|
⚙️ เลเวล & Eidolon
|
|
</button>
|
|
<button type="button" class="modal-subtab-btn" data-modaltab="modaltab-lightcone" data-i18n="modalTabLightcone">
|
|
🗡️ กรวยแสง
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Sub Tab 1: Skills & Traces (Like https://srtools.punklorde.org/skills-info) -->
|
|
<div id="modaltab-skills" class="modal-subtab-content active">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
|
|
<div style="font-weight: 700; font-size: 0.95rem; color: var(--text-highlight);" data-i18n="modalSkillCombatTitle">
|
|
ระดับสกิลต่อสู้
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-gold" id="btn-modal-max-skills" data-i18n="modalBtnMaxSkills">
|
|
⭐ ปรับสกิลเต็ม 10/10
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 4 Core Skills -->
|
|
<div class="skills-grid" style="display: flex; flex-direction: column; gap: 0.75rem;">
|
|
<!-- 1. Basic Attack -->
|
|
<div class="skill-row-card">
|
|
<div class="skill-row-header">
|
|
<span class="skill-name" data-i18n="modalSkillBasic">โจมตีปกติ</span>
|
|
<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>
|
|
</div>
|
|
|
|
<!-- 2. Skill -->
|
|
<div class="skill-row-card">
|
|
<div class="skill-row-header">
|
|
<span class="skill-name" data-i18n="modalSkillSkill">สกิลต่อสู้</span>
|
|
<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>
|
|
</div>
|
|
|
|
<!-- 3. Ultimate -->
|
|
<div class="skill-row-card">
|
|
<div class="skill-row-header">
|
|
<span class="skill-name" data-i18n="modalSkillUltra">ท่าไม้ตาย</span>
|
|
<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>
|
|
</div>
|
|
|
|
<!-- 4. Talent -->
|
|
<div class="skill-row-card">
|
|
<div class="skill-row-header">
|
|
<span class="skill-name" data-i18n="modalSkillTalent">พรสวรรค์</span>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Traces & Technique Section -->
|
|
<div style="margin-top: 1.25rem;">
|
|
<div style="font-weight: 700; font-size: 0.95rem; color: var(--text-highlight); margin-bottom: 0.75rem;" data-i18n="modalTracesTitle">
|
|
ร่องรอยและเทคนิค
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; gap: 0.6rem;">
|
|
<label class="trace-toggle-label">
|
|
<input type="checkbox" id="check-trace-technique" checked class="trace-checkbox">
|
|
<span data-i18n="modalTraceTechnique">⚡ เทคนิค — เปิดใช้งานก่อนเริ่มการต่อสู้</span>
|
|
</label>
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.6rem;">
|
|
<label class="trace-toggle-label">
|
|
<input type="checkbox" id="check-trace-a2" checked class="trace-checkbox">
|
|
<span data-i18n="traceA2">🌟 ร่องรอยพิเศษ A2</span>
|
|
</label>
|
|
<label class="trace-toggle-label">
|
|
<input type="checkbox" id="check-trace-a4" checked class="trace-checkbox">
|
|
<span data-i18n="traceA4">🌟 ร่องรอยพิเศษ A4</span>
|
|
</label>
|
|
<label class="trace-toggle-label">
|
|
<input type="checkbox" id="check-trace-a6" checked class="trace-checkbox">
|
|
<span data-i18n="traceA6">🌟 ร่องรอยพิเศษ A6</span>
|
|
</label>
|
|
</div>
|
|
<label class="trace-toggle-label">
|
|
<input type="checkbox" id="check-trace-stats" checked class="trace-checkbox">
|
|
<span data-i18n="traceStatNodes">💎 โหนดสเตตัสเสริมทั้งหมด (10 โหนด)</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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;">
|
|
<label class="form-label" style="margin: 0;" data-i18n="lblLevelRange">ระดับเลเวล (1-80)</label>
|
|
<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;">
|
|
<label class="form-label" style="margin: 0;" data-i18n="lblPromotionRange">การเลื่อนขั้น (0-6)</label>
|
|
<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">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Eidolon Section -->
|
|
<div class="form-group">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;">
|
|
<label class="form-label" style="margin: 0;" data-i18n="lblEidolonLevel">ระดับ Eidolon</label>
|
|
<div style="display: flex; gap: 0.4rem;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="eidolon-buttons" id="modal-char-eidolon-btns" style="margin-top: 0.5rem; gap: 0.5rem;">
|
|
<!-- Injected pips -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ultimate Energy Section -->
|
|
<div class="form-group" style="margin-top: 1.25rem;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;">
|
|
<label class="form-label" style="margin: 0;" data-i18n="modalEnergyTitle">พลังงานท่าไม้ตาย</label>
|
|
<div style="display: flex; gap: 0.35rem;">
|
|
<button type="button" class="btn btn-sm btn-secondary" id="btn-modal-energy-50" data-i18n="modalEnergy50">ตั้งค่า 50%</button>
|
|
<button type="button" class="btn btn-sm btn-primary" id="btn-modal-energy-100" data-i18n="modalEnergy100">เต็ม 100%</button>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; gap: 0.75rem; align-items: center;">
|
|
<input type="range" id="range-char-energy" min="0" max="140" value="140" class="skill-range" style="flex: 1;">
|
|
<span id="val-char-energy" style="font-weight: 800; font-family: monospace; min-width: 60px; text-align: right;">140/140</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sub Tab 3: Lightcone Equipment -->
|
|
<div id="modaltab-lightcone" class="modal-subtab-content" style="display: none;">
|
|
<div class="card" style="padding: 1.25rem; background: rgba(0,0,0,0.3); border: 1px solid var(--border-color);">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
|
|
<span style="font-weight: 800; font-size: 1rem; color: var(--text-highlight);" data-i18n="modalLcTitle">กรวยแสงที่สวมใส่</span>
|
|
<button type="button" class="btn btn-sm btn-gold" id="btn-modal-max-lc" data-i18n="modalBtnMaxLc">⭐ ปรับกรวยแสงเต็มขั้น</button>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="lblLcId">ID กรวยแสง</label>
|
|
<input type="number" id="modal-lc-id" class="form-input" data-i18n-placeholder="modalLcIdPlaceholder" placeholder="เช่น 21002 หรือ 24001">
|
|
<div id="modal-lc-preview" style="margin-top: 0.35rem; font-size: 0.875rem; font-weight: 700; color: var(--accent-cyan);"></div>
|
|
</div>
|
|
<div class="grid-2" style="gap: 1rem;">
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="lblLcLevel">เลเวลกรวยแสง (1-80)</label>
|
|
<input type="number" id="modal-lc-level" class="form-input" min="1" max="80" value="80">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="lblLcRank">ระดับการขัดเกลา</label>
|
|
<div class="eidolon-buttons" id="modal-lc-rank-btns" style="margin-top: 0.25rem;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Footer -->
|
|
<div style="display: flex; gap: 0.75rem; margin-top: 1.5rem; justify-content: flex-end; flex-wrap: wrap;">
|
|
<button type="button" class="btn btn-secondary" id="btn-modal-cancel-avatar" data-i18n="modalBtnClose">
|
|
✕ ปิด
|
|
</button>
|
|
<button type="button" class="btn btn-success" id="btn-modal-save-avatar" data-i18n="modalBtnSave">
|
|
💾 บันทึกตัวละคร
|
|
</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">
|
|
<h3 id="modal-picker-title" style="font-weight: 800;" data-i18n="pickerTitle">เลือกตัวละครเข้าทีม</h3>
|
|
<button class="btn btn-sm btn-secondary" id="btn-close-picker-modal">✕</button>
|
|
</div>
|
|
<input type="text" id="picker-search" class="form-input" data-i18n-placeholder="pickerSearchPlaceholder" placeholder="🔍 ค้นหาตัวละครเพื่อลงทีม..." style="margin-bottom: 1rem;">
|
|
<div id="picker-avatars-grid" class="grid-4" style="overflow-y: auto; flex: 1; padding-right: 0.5rem;">
|
|
<!-- Injected by JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Modal -->
|
|
<div class="modal-overlay" id="modal-settings">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 style="font-weight: 700;" data-i18n="apiModalTitle">⚙️ ตั้งค่าการเชื่อมต่อ API Server</h3>
|
|
<button class="btn btn-sm btn-secondary" id="btn-close-modal">✕</button>
|
|
</div>
|
|
<div>
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="lblApiGatewayUrl">Server REST API URL</label>
|
|
<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;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Notification Container -->
|
|
<div class="toast-container" id="toast-container"></div>
|
|
|
|
<!-- Script Modules -->
|
|
<script type="module" src="js/app.js"></script>
|
|
</body>
|
|
</html>
|