<!DOCTYPE html>

<html lang="it">

<head>
  <meta charset="utf-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <title>Home - RKOKO Config Table Tool Free</title>
  <link href="../favicon-32.png" rel="icon" type="image/png" />
  <style>
    :root {
      --bg: #f5f6f8;
      --panel: #fff;
      --text: #0f172a;
      --sub: #475569;
      --sub2: #64748b;
      --line: #dbe2ea;
      --accent: #111827;
      --soft: #f8fafc;
      --soft2: #f1f5f9;
      --code: #1f2430;
      --codeText: #d6deeb;
      --warnBg: #fff7ed;
      --warnLine: #fed7aa;
      --warnText: #9a3412;
      --okBg: #f0fdf4;
      --okLine: #bbf7d0;
      --okText: #166534
    }

    * {
      box-sizing: border-box
    }

    body {
      margin: 0;
      font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.7
    }

    .wrap {
      max-width: 1000px;
      margin: 0 auto;
      padding: 32px 24px 56px
    }

    .hero {
      padding: 40px 0 28px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 24px
    }

    .eyebrow {
      display: inline-block;
      font-size: 13px;
      color: var(--sub2);
      font-weight: 800;
      letter-spacing: .02em;
      margin-bottom: 10px
    }

    h1 {
      margin: 0;
      font-size: 42px;
      line-height: 1.15;
      letter-spacing: -.03em;
      color: #0b1220;
      font-weight: 800
    }

    .subtitle {
      margin-top: 14px;
      font-size: 18px;
      color: #475569;
      max-width: 820px;
      font-weight: 500
    }

    .code-param {
      color: #9a3412;
      font-weight: bold;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 22px
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 132px;
      padding: 11px 16px;
      border-radius: 12px;
      text-decoration: none;
      font-size: 14px;
      font-weight: 800;
      transition: .15s
    }

    .btn-primary {
      background: var(--accent);
      color: #fff;
      border: 1px solid var(--accent)
    }

    .btn-secondary {
      background: #fff;
      color: var(--text);
      border: 1px solid var(--line)
    }

    .btn:hover {
      transform: translateY(-1px)
    }

    .section {
      margin-bottom: 24px
    }

    .section-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      padding-left: 14px;
      border-left: 4px solid #111827
    }

    .section-no {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 999px;
      background: #111827;
      color: #fff;
      font-size: 13px;
      font-weight: 800
    }

    .section-head h2 {
      margin: 0;
      font-size: 22px;
      line-height: 1.22;
      color: #0b1220;
      font-weight: 800;
      letter-spacing: -.01em
    }

    h3 {
      margin: 0 0 10px;
      font-size: 18px;
      color: #0b1220
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 16px;
      box-shadow: 0 1px 0 rgba(15, 23, 42, .02)
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px
    }

    .card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 14px
    }

    .card-title {
      font-size: 15px;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 4px
    }

    .card-text {
      font-size: 13px;
      color: var(--sub);
      margin: 0
    }

    .steps {
      counter-reset: step;
      display: grid;
      gap: 10px
    }

    .step {
      position: relative;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px 14px 12px 88px
    }

    .step:before {
      counter-increment: step;
      content: attr(data-step-label) counter(step);
      position: absolute;
      left: 14px;
      top: 13px;
      width: 58px;
      height: 24px;
      border-radius: 999px;
      background: #111827;
      color: #fff;
      font-weight: 800;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .note {
      padding: 10px 12px;
      border-radius: 12px;
      background: var(--soft);
      border: 1px solid var(--line);
      font-size: 13px;
      color: #475569
    }

    .ok {
      background: var(--okBg);
      border-color: var(--okLine);
      color: var(--okText)
    }

    .table-wrap {
      overflow-x: auto
    }

    .table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      background: #fff
    }

    .table th,
    .table td {
      padding: 10px 12px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      vertical-align: top;
      font-size: 13px
    }

    .table th {
      background: var(--soft2);
      text-align: left;
      color: #0f172a;
      font-weight: 800
    }

    .table tr:last-child td {
      border-bottom: 0
    }

    .table th:last-child,
    .table td:last-child {
      border-right: 0
    }

    .sheet-table {
      overflow-x: auto;
      margin: 10px 0
    }

    .sheet-table table {
      border-collapse: separate;
      border-spacing: 0;
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      background: #fff;
      min-width: max-content
    }

    .sheet-table td {
      padding: 9px 12px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      font-size: 13px;
      white-space: nowrap;
      vertical-align: middle
    }

    .sheet-table tr:first-child td {
      font-family: Consolas, "SFMono-Regular", Menlo, monospace;
      background: #eef2f7;
      color: #0f172a;
      font-weight: 800
    }

    .sheet-table tr:nth-child(2) td {
      background: #f8fafc;
      color: #334155;
      font-weight: 700
    }

    .sheet-table tr:nth-child(3) td {
      font-family: Consolas, "SFMono-Regular", Menlo, monospace;
      color: #0f172a
    }

    .sheet-table tr:last-child td {
      border-bottom: 0
    }

    .sheet-table td:last-child {
      border-right: 0
    }

    code {
      font-family: Consolas, "SFMono-Regular", Menlo, monospace;
      background: #eef2f7;
      border: 1px solid #dbe2ea;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 16px;
      line-height: 2;
      margin: 2px 4px;
    }

    .code-block {
      background: var(--code);
      color: var(--codeText);
      border-radius: 14px;
      padding: 13px 14px;
      overflow: auto;
      font-family: Consolas, "SFMono-Regular", Menlo, monospace;
      font-size: 13px;
      line-height: 1.65;
      white-space: pre;
      margin: 10px 0
    }

    .compare-table th:nth-child(1),
    .compare-table td:nth-child(1) {
      width: 10%;
    }

    .compare-table td:nth-child(4),
    .compare-table td:nth-child(5),
    .compare-table th:nth-child(4),
    .compare-table th:nth-child(5) {
      text-align: center;
      white-space: nowrap
    }

    .support-badge,
    .no-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 58px;
      padding: 3px 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800
    }

    .support-badge {
      background: #dcfce7;
      color: #166534;
      border: 1px solid #bbf7d0
    }

    .no-badge {
      background: #fee2e2;
      color: #991b1b;
      border: 1px solid #fecaca
    }


    .tag-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      margin: 12px 0;
      overflow: hidden
    }

    .tag-title {
      padding: 12px 14px;
      background: var(--soft2);
      font-size: 16px;
      font-weight: 800;
      color: #0f172a;
      border-bottom: 1px solid var(--line)
    }

    .tag-body {
      padding: 14px
    }

    .tag-grid {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 8px 12px;
      font-size: 14px
    }

    .tag-label {
      font-weight: 800;
      color: #0f172a
    }

    .tag-text {
      color: #334155
    }

    .footer {
      margin-top: 28px;
      font-size: 13px;
      color: var(--sub2);
      text-align: center
    }


    .hero-toolbar {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-top: 22px;
    }

    .hero-toolbar .hero-actions {
      margin-top: 0;
      flex: 1;
    }

    .lang-switch {
      position: relative;
      flex-shrink: 0;
    }

    .lang-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text);
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
      box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
    }

    .lang-btn:hover {
      transform: translateY(-1px);
      border-color: #cfd5dd;
      background: #fcfcfd;
      box-shadow: 0 4px 14px rgba(0, 0, 0, .04);
    }

    .lang-btn-label {
      white-space: nowrap;
      line-height: 1;
    }

    .lang-btn-arrow {
      font-size: 12px;
      color: var(--sub2);
      line-height: 1;
    }

    .lang-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 30;
      width: min(320px, calc(100vw - 32px));
      max-height: 360px;
      overflow: auto;
      padding: 10px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: 0 16px 40px rgba(15, 23, 42, .12);
    }

    .lang-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .lang-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 40px;
      padding: 9px 12px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text);
      text-decoration: none;
      font-size: 13px;
      line-height: 1.35;
      transition: transform .15s ease, border-color .15s ease, background .15s ease;
    }

    .lang-item:hover {
      transform: translateY(-1px);
      border-color: #cfd5dd;
      background: #f8fafc;
    }

    .lang-item.is-current {
      background: #111827;
      color: #fff;
      border-color: #111827;
      pointer-events: none;
    }

    .lang-item-code {
      font-size: 11px;
      opacity: .72;
      flex-shrink: 0;
    }

    @media(max-width:820px) {
      .hero-toolbar {
        flex-direction: column;
        align-items: stretch;
      }

      .lang-switch {
        width: 100%;
      }

      .lang-btn {
        width: 100%;
        justify-content: space-between;
      }

      .lang-menu {
        left: 0;
        right: auto;
        width: 100%;
      }

      .lang-grid {
        grid-template-columns: 1fr;
      }

      .grid {
        grid-template-columns: 1fr
      }

      h1 {
        font-size: 34px
      }
    }

    @media(max-width:640px) {
      .wrap {
        padding: 24px 16px 40px
      }

      .hero {
        padding: 26px 0 22px
      }

      h1 {
        font-size: 28px
      }

      .panel {
        padding: 13px 14px
      }

      .btn {
        width: 100%
      }

      .tag-grid {
        grid-template-columns: 1fr;
        gap: 2px
      }

      .tag-label {
        margin-top: 6px
      }
    }


    .code-block {
      background: #0f172a;
      color: #dbeafe;
      border: 1px solid #1e293b;
      border-radius: 10px;
      padding: 18px 20px;
      line-height: 1.75;
      font-family: Consolas, "SFMono-Regular", Menlo, monospace;
      font-size: 15px;
      overflow-x: auto;
    }

    .code-comment {
      color: #94a3b8;
    }

    .code-keyword {
      color: #93c5fd;
      font-weight: 700;
    }

    .code-type {
      color: #67e8f9;
      font-weight: 600;
    }

    .code-api {
      color: #fcd34d;
    }

    .code-string {
      color: #86efac;
    }

    .code-number {
      color: #fca5a5;
    }

    .code-property {
      color: #c4b5fd;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <section class="hero">
      <div class="eyebrow">Documentazione versione Free</div>
      <h1>RKOKO Config Table Tool Free</h1>
      <div class="subtitle">Flusso di lavoro da Excel a JSON + configurazione C# per Unity.</div>
      <div class="hero-toolbar">
        <div class="hero-actions"><a class="btn btn-primary" href="#quick-start">Guida rapida</a><a
            class="btn btn-secondary" href="#csharp-quick">Riferimento rapido C#</a><a class="btn btn-secondary"
            href="#tag-manual">Manuale dei tag</a></div>
        <div class="lang-switch" data-lang-switch>
          <button class="lang-btn" type="button" data-lang-btn aria-haspopup="true" aria-expanded="false">
            <span class="lang-btn-label" data-lang-label>it</span>
            <span class="lang-btn-arrow">▾</span>
          </button>
          <div class="lang-menu" data-lang-menu hidden></div>
        </div>
      </div>
    </section>
    <section class="section" id="quick-start">
      <div class="section-head"><span class="section-no">1</span>
        <h2>Guida rapida</h2>
      </div>
      <div class="panel steps">
        <div class="step" data-step-label="Passo">Installa lo strumento: esegui <strong>RKOKO Config Free/Install</strong></div>
        <div class="step" data-step-label="Passo">Apri la cartella delle tabelle e controlla <code>demo.xlsx</code>: esegui <strong>RKOKO Config Free/Open Tables Folder</strong></div>
        <div class="step" data-step-label="Passo">Esporta JSON e codice C#: <strong>RKOKO Config Free/Export</strong></div>
      </div>
    </section>
    <section class="section">
      <div class="section-head"><span class="section-no">2</span>
        <h2>Struttura della tabella di configurazione</h2>
      </div>
      <div class="panel">
        <h3 style="margin-top:16px">Regole di denominazione Sheet</h3>
        <div class="table-wrap">
          <table class="table">
            <tr>
              <th>Regola</th>
              <th>Descrizione</th>
              <th>Esempio</th>
            </tr>
            <tr>
              <td><code><span class="code-param">SHEET_NAME</span></code></td>
              <td><span class="code-param">SHEET_NAME</span> è un segnaposto per il nome della tabella. <br/> <strong>Nota:</strong> verrà generata una classe tabella, quindi il nome deve rispettare le regole di denominazione C#.</td>
              <td><code>weapon</code></td>
            </tr>
            <tr>
              <td><code><span class="code-param">SHEET_NAME</span>|<span class="code-param">SUMMARY</span></code></td>
              <td><span class="code-param">SHEET_NAME</span> è un segnaposto per il nome della tabella. <br/> <span class="code-param">SUMMARY</span> è un segnaposto per la descrizione della tabella. <br/> <strong>Nota:</strong> separali con <code>|</code>.</td>
              <td><code>weapon|Tabella armi</code></td>
            </tr>
          </table>
        </div>
        <br />
        <div class="table-wrap">
          <table class="table">
            <tr>
              <th>Riga</th>
              <th>Scopo</th>
              <th>Esempio</th>
            </tr>
            <tr>
              <td>Riga 1</td>
              <td><strong>Riga dei tag</strong>, definisce tipi di campo e funzionalità speciali</td>
              <td><code>#key#int</code>、<code>#string</code>、<code>#link&gt;quality&gt;key</code></td>
            </tr>
            <tr>
              <td>Riga 2</td>
              <td><strong>Riga dei commenti</strong>, note per designer o editor di tabelle</td>
              <td>ID, nome arma, qualità, attacco</td>
            </tr>
            <tr>
              <td>Riga 3</td>
              <td><strong>Riga dei campi</strong>, usata per i campi JSON e la generazione del codice C#</td>
              <td>id、name、quality、atk</td>
            </tr>
          </table>
        </div>
      </div>
    </section>
    <section class="section">
      <div class="section-head"><span class="section-no">3</span>
        <h2>Esempio semplice</h2>
      </div>
      <div class="panel">
        <h3>tabella weapon</h3>
        <div class="sheet-table">
          <table>
            <tr>
              <td>#key#int</td>
              <td>#string</td>
              <td>#link>quality>key</td>
              <td>#int</td>
            </tr>
            <tr>
              <td>ID</td>
              <td>Nome arma</td>
              <td>Qualità</td>
              <td>Attacco</td>
            </tr>
            <tr>
              <td>id</td>
              <td>name</td>
              <td>quality</td>
              <td>atk</td>
            </tr>
            <tr>
              <td>2001</td>
              <td>Spada di ferro</td>
              <td>common</td>
              <td>10</td>
            </tr>
            <tr>
              <td>2002</td>
              <td>Arco del cacciatore</td>
              <td>rare</td>
              <td>20</td>
            </tr>
            <tr>
              <td>2003</td>
              <td>Bastone antico</td>
              <td>epic</td>
              <td>15</td>
            </tr>
          </table>
        </div>
      </div>
    </section>
    <section class="section" id="csharp-quick">
      <div class="section-head"><span class="section-no">4</span>
        <h2>Riferimento rapido C#</h2>
      </div>
      <div class="panel">
        <pre class="code-block"><span class="code-comment">// Interroga una tabella per chiave</span>
<span class="code-keyword">var</span> weapon = <span class="code-api"><span class="code-type">ConfigTables</span>.<span class="code-property">Data</span>.GetWeaponById</span>(<span class="code-number">2001</span>);
<span class="code-type">Debug</span>.Log(weapon.<span class="code-property">Name</span>);
<span class="code-type">Debug</span>.Log(weapon.<span class="code-property">Atk</span>);

<span class="code-comment">// Itera i dati</span>
<span class="code-keyword">foreach</span> (<span class="code-keyword">var</span> hero <span class="code-keyword">in</span> <span class="code-type">ConfigTables</span>.<span class="code-property">Data</span>.Hero.Data)
{
    <span class="code-type">Debug</span>.Log(hero.<span class="code-property">Name</span>);
}

<span class="code-comment">// Leggi la riga quality collegata da link</span>
<span class="code-type">Debug</span>.Log(weapon.<span class="code-property">__Quality</span>.<span class="code-property">Name</span>);
<span class="code-type">Debug</span>.Log(weapon.<span class="code-property">__Quality</span>.<span class="code-property">Color</span>);</pre>
      </div>
    </section>
    <section class="section" id="tag-manual">
      <div class="section-head"><span class="section-no">5</span>
        <h2>Manuale dei tag</h2>
      </div>
      <div class="panel">
        <div class="note ok"><strong>La versione Free è adatta a casi comuni come tabelle di configurazione di base e semplici tabelle numeriche. La <span class="code-param">versione completa</span> include funzionalità avanzate dei tag più complete.</strong></div>
        <div class="note ok" style="margin-top: 4px;"><strong>Tutti i tag possono essere scritti solo nella <span class="code-param">riga dei tag (prima riga)</span>. Iniziano con <code>#</code> e più tag possono essere concatenati direttamente.</strong></div>
        <p><strong>Dettagli e utilizzo:</strong></p>
        <div class="table-wrap">
          <table class="table compare-table">
            <tr>
              <th>Categoria</th>
              <th>Tag speciali</th>
              <th>Breve descrizione della funzione</th>
              <th>Versione Free</th>
              <th>Versione completa</th>
            </tr>
            <tr>
              <td><strong>Dati di base</strong></td>
              <td><code>#int</code>、<code>#long</code>、<code>#float</code>、<code>#double</code>、<code>#bool</code>、<code>#string</code></td>
              <td><strong>Usato per descrivere il tipo di dato della colonna.</strong> <br/><strong>Limite:</strong> <code>#bool</code> supporta solo 1 e 0.</td>
              <td><span class="support-badge">Supportato</span></td>
              <td><span class="support-badge">Supportato</span></td>
            </tr>
            <tr>
              <td><strong>Chiave di ricerca</strong></td>
              <td><code>#key</code></td>
              <td><strong>Usato per generare codice API di query.</strong> <br/><strong>Limite:</strong> supporta solo l’uso con <code>#int</code> o <code>#string</code>. <br/><strong>Sintassi:</strong><code>#key#int</code> <code>#key#string</code></td>
              <td><span class="support-badge">Supportato</span></td>
              <td><span class="support-badge">Supportato</span></td>
            </tr>
            <tr>
              <td><strong>Riferimento tra tabelle</strong></td>
              <td><code>#link</code></td>
              <td><strong>Usato per collegare dati in un’altra tabella.</strong> <br/>Un campo può fare riferimento a una riga di un’altra tabella. Dopo la generazione del codice, l’oggetto collegato può essere letto direttamente. <br/><strong>Sintassi:</strong><code>#link&gt;<span class="code-param">SHEET_NAME</span>&gt;<span class="code-param">FIELD_NAME</span></code> <br/><span class="code-param">SHEET_NAME</span>: nome della tabella di destinazione <br/><span class="code-param">FIELD_NAME</span>: campo di corrispondenza nella tabella di destinazione <br/><strong>Esempio:</strong><code>#link&gt;quality&gt;key</code></td>
              <td><span class="support-badge">Supportato</span></td>
              <td><span class="support-badge">Supportato</span></td>
            </tr>
            <tr>
              <td><strong>Ignora</strong></td>
              <td><code>#ignore</code></td>
              <td><strong>Usato per escludere una colonna o uno Sheet.</strong> <br/><strong>Escludere una colonna:</strong> aggiungi <code>#ignore</code> nella riga dei tag. <br/><strong>Escludere uno Sheet:</strong> se il nome dello Sheet contiene <code>#ignore</code>, quello Sheet non verrà esportato.</td>
              <td><span class="support-badge">Supportato</span></td>
              <td><span class="support-badge">Supportato</span></td>
            </tr>
            <tr>
              <td><strong>Collezioni</strong></td>
              <td><code>#list</code>、<code>#array</code></td>
              <td><strong>Usato per costruire collezioni.</strong> <br/><code>#list</code>: unisce più colonne in un campo collezione.<br/><code>#array</code>: analizza più valori in una singola cella come collezione. Il separatore predefinito è <code>|</code>.</td>
              <td><span class="no-badge">Non supportato</span></td>
              <td><span class="support-badge">Supportato</span></td>
            </tr>
            <tr>
              <td><strong>Relativo agli enum</strong></td>
              <td><code>#enumvalue</code>、<code>#enumname</code></td>
              <td><strong>Usato per generare codice enum.</strong> <br/>Valori e nomi enum nella tabella possono essere generati come enum C#, riducendo le costanti scritte a mano.</td>
              <td><span class="no-badge">Non supportato</span></td>
              <td><span class="support-badge">Supportato</span></td>
            </tr>
            <tr>
              <td><strong>Oggetti personalizzati</strong></td>
              <td><code>#item</code></td>
              <td><strong>Usato per incapsulare oggetti.</strong> <br/>Combina più colonne in un oggetto personalizzato. Supporta annidamento multilivello e può essere usato con altri tag. <br/><strong>Esempio:</strong> combinare le colonne <code>x</code> e <code>y</code> in un oggetto coordinate in stile <code>Vector2</code></td>
              <td><span class="no-badge">Non supportato</span></td>
              <td><span class="support-badge">Supportato</span></td>
            </tr>
          </table>
        </div>
      </div>
    </section>
    <div class="footer">Documentazione di RKOKO Config Table Tool Free</div>
  </div>

  <script>
    (function () {
      const STORAGE_KEY = "rkoko_config_doc_lang";

      const LANG_OPTIONS = [
        { code: "zh-CN", label: "简体中文" },
        { code: "zh-TW", label: "繁體中文" },
        { code: "en", label: "English" },
        { code: "ja", label: "日本語" },
        { code: "ko", label: "한국어" },
        { code: "es", label: "Español" },
        { code: "ru", label: "Русский" },
        { code: "fr", label: "Français" },
        { code: "de", label: "Deutsch" },
        { code: "pt", label: "Português" },
        { code: "vi", label: "Tiếng Việt" },
        { code: "tr", label: "Türkçe" },
        { code: "pl", label: "Polski" },
        { code: "it", label: "Italiano" },
        { code: "th", label: "ไทย" }
      ];

      const langWrap = document.querySelector("[data-lang-switch]");
      if (!langWrap) return;

      const btn = langWrap.querySelector("[data-lang-btn]");
      const btnLabel = langWrap.querySelector("[data-lang-label]");
      const menu = langWrap.querySelector("[data-lang-menu]");
      if (!btn || !btnLabel || !menu) return;

      const supportedCodes = new Set(LANG_OPTIONS.map(function (x) { return x.code; }));

      function detectCurrentLang() {
        const htmlLang = (document.documentElement.getAttribute("lang") || "").trim();
        if (supportedCodes.has(htmlLang)) return htmlLang;

        const path = (window.location.pathname || "").replace(/\\/g, "/");
        const parts = path.split("/").filter(Boolean);
        for (const part of parts) {
          if (supportedCodes.has(part)) return part;
        }
        return "zh-CN";
      }

      const currentLang = detectCurrentLang();
      const currentInfo = LANG_OPTIONS.find(function (x) { return x.code === currentLang; }) || LANG_OPTIONS[0];
      btnLabel.textContent = currentInfo.label;

      function getCurrentFileName() {
        const path = (window.location.pathname || "").replace(/\\/g, "/");
        const last = path.split("/").filter(Boolean).pop();
        if (!last || !/\.html?$/i.test(last)) return "index.html";
        return last;
      }

      function buildLangHref(targetLang) {
        const fileName = getCurrentFileName();
        const search = window.location.search || "";
        const hash = window.location.hash || "";
        return `../${targetLang}/${fileName}${search}${hash}`;
      }

      const grid = document.createElement("div");
      grid.className = "lang-grid";

      LANG_OPTIONS.forEach(function (item) {
        const a = document.createElement("a");
        a.className = "lang-item" + (item.code === currentLang ? " is-current" : "");
        a.href = buildLangHref(item.code);
        a.setAttribute("data-lang-code", item.code);

        a.addEventListener("click", function () {
          try {
            localStorage.setItem(STORAGE_KEY, item.code);
          } catch (e) {
          }
        });

        const label = document.createElement("span");
        label.textContent = item.label;

        const code = document.createElement("span");
        code.className = "lang-item-code";
        code.textContent = item.code;

        a.appendChild(label);
        a.appendChild(code);
        grid.appendChild(a);
      });

      menu.appendChild(grid);

      function closeMenu() {
        menu.hidden = true;
        btn.setAttribute("aria-expanded", "false");
      }

      function openMenu() {
        menu.hidden = false;
        btn.setAttribute("aria-expanded", "true");
      }

      btn.addEventListener("click", function (e) {
        e.stopPropagation();
        if (menu.hidden) openMenu();
        else closeMenu();
      });

      document.addEventListener("click", function (e) {
        if (!langWrap.contains(e.target)) closeMenu();
      });

      document.addEventListener("keydown", function (e) {
        if (e.key === "Escape") closeMenu();
      });

      closeMenu();
    })();
  </script>

</body>

</html>