<!DOCTYPE html>

<html lang="es">

<head>
  <meta charset="utf-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <title>Inicio - 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">Documentación de la versión Free</div>
      <h1>RKOKO Config Table Tool Free</h1>
      <div class="subtitle">Flujo de Excel a JSON + configuración C# para Unity.</div>
      <div class="hero-toolbar">
        <div class="hero-actions"><a class="btn btn-primary" href="#quick-start">Inicio rápido</a><a
            class="btn btn-secondary" href="#csharp-quick">Referencia rápida de C#</a><a class="btn btn-secondary"
            href="#tag-manual">Manual de etiquetas</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>es</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>Inicio rápido</h2>
      </div>
      <div class="panel steps">
        <div class="step" data-step-label="Paso">Instala la herramienta: ejecuta <strong>RKOKO Config Free/Install</strong></div>
        <div class="step" data-step-label="Paso">Abre la carpeta de tablas y revisa <code>demo.xlsx</code>: ejecuta <strong>RKOKO Config Free/Open Tables Folder</strong></div>
        <div class="step" data-step-label="Paso">Exporta JSON y código C#: <strong>RKOKO Config Free/Export</strong></div>
      </div>
    </section>
    <section class="section">
      <div class="section-head"><span class="section-no">2</span>
        <h2>Estructura de la tabla de configuración</h2>
      </div>
      <div class="panel">
        <h3 style="margin-top:16px">Reglas de nombre de Sheet</h3>
        <div class="table-wrap">
          <table class="table">
            <tr>
              <th>Regla</th>
              <th>Descripción</th>
              <th>Ejemplo</th>
            </tr>
            <tr>
              <td><code><span class="code-param">SHEET_NAME</span></code></td>
              <td><span class="code-param">SHEET_NAME</span> es un marcador para el nombre de la tabla. <br/> <strong>Nota:</strong> Se generará una clase de tabla, por lo que el nombre debe cumplir las reglas de nomenclatura de 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> es un marcador para el nombre de la tabla. <br/> <span class="code-param">SUMMARY</span> es un marcador para la descripción de la tabla. <br/> <strong>Nota:</strong> Sepáralos con <code>|</code>.</td>
              <td><code>weapon|Tabla de armas</code></td>
            </tr>
          </table>
        </div>
        <br />
        <div class="table-wrap">
          <table class="table">
            <tr>
              <th>Fila</th>
              <th>Uso</th>
              <th>Ejemplo</th>
            </tr>
            <tr>
              <td>Fila 1</td>
              <td><strong>Fila de etiquetas</strong>, define tipos de campo y capacidades especiales</td>
              <td><code>#key#int</code>、<code>#string</code>、<code>#link&gt;quality&gt;key</code></td>
            </tr>
            <tr>
              <td>Fila 2</td>
              <td><strong>Fila de comentarios</strong>, notas para diseñadores o editores de tablas</td>
              <td>ID, nombre del arma, calidad, ataque</td>
            </tr>
            <tr>
              <td>Fila 3</td>
              <td><strong>Fila de campos</strong>, usada para campos JSON y generación de código 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>Ejemplo simple</h2>
      </div>
      <div class="panel">
        <h3>tabla 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>Nombre del arma</td>
              <td>Calidad</td>
              <td>Ataque</td>
            </tr>
            <tr>
              <td>id</td>
              <td>name</td>
              <td>quality</td>
              <td>atk</td>
            </tr>
            <tr>
              <td>2001</td>
              <td>Espada de hierro</td>
              <td>common</td>
              <td>10</td>
            </tr>
            <tr>
              <td>2002</td>
              <td>Arco de cazador</td>
              <td>rare</td>
              <td>20</td>
            </tr>
            <tr>
              <td>2003</td>
              <td>Bastón antiguo</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>Referencia rápida de C#</h2>
      </div>
      <div class="panel">
        <pre class="code-block"><span class="code-comment">// Consultar una tabla por clave</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">// Recorrer datos</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">// Leer la fila quality asociada por 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>Manual de etiquetas</h2>
      </div>
      <div class="panel">
        <div class="note ok"><strong>La versión Free es adecuada para casos comunes como tablas de configuración básicas y tablas numéricas simples. La <span class="code-param">versión completa</span> incluye funciones de etiquetas avanzadas más completas.</strong></div>
        <div class="note ok" style="margin-top: 4px;"><strong>Todas las etiquetas solo se pueden escribir en la <span class="code-param">fila de etiquetas (primera fila)</span>. Empiezan con <code>#</code> y varias etiquetas se pueden concatenar directamente.</strong></div>
        <p><strong>Detalles y uso:</strong></p>
        <div class="table-wrap">
          <table class="table compare-table">
            <tr>
              <th>Categoría</th>
              <th>Etiquetas especiales</th>
              <th>Descripción breve de la función</th>
              <th>Versión Free</th>
              <th>Versión completa</th>
            </tr>
            <tr>
              <td><strong>Datos básicos</strong></td>
              <td><code>#int</code>、<code>#long</code>、<code>#float</code>、<code>#double</code>、<code>#bool</code>、<code>#string</code></td>
              <td><strong>Se usa para describir el tipo de dato de la columna.</strong> <br/><strong>Límite:</strong> <code>#bool</code> solo admite 1 y 0.</td>
              <td><span class="support-badge">Compatible</span></td>
              <td><span class="support-badge">Compatible</span></td>
            </tr>
            <tr>
              <td><strong>Clave de consulta</strong></td>
              <td><code>#key</code></td>
              <td><strong>Se usa para generar código de API de consulta.</strong> <br/><strong>Límite:</strong> Solo admite uso con <code>#int</code> o <code>#string</code>. <br/><strong>Sintaxis:</strong><code>#key#int</code> <code>#key#string</code></td>
              <td><span class="support-badge">Compatible</span></td>
              <td><span class="support-badge">Compatible</span></td>
            </tr>
            <tr>
              <td><strong>Referencia entre tablas</strong></td>
              <td><code>#link</code></td>
              <td><strong>Se usa para relacionar datos de otra tabla.</strong> <br/>Un campo puede referenciar una fila de otra tabla. Después de generar código, el objeto relacionado se puede leer directamente. <br/><strong>Sintaxis:</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>: nombre de la tabla destino <br/><span class="code-param">FIELD_NAME</span>: campo de coincidencia en la tabla destino <br/><strong>Ejemplo:</strong><code>#link&gt;quality&gt;key</code></td>
              <td><span class="support-badge">Compatible</span></td>
              <td><span class="support-badge">Compatible</span></td>
            </tr>
            <tr>
              <td><strong>Ignorar</strong></td>
              <td><code>#ignore</code></td>
              <td><strong>Se usa para excluir una columna o una hoja.</strong> <br/><strong>Excluir columna:</strong> añade <code>#ignore</code> en la fila de etiquetas. <br/><strong>Excluir hoja:</strong> si el nombre de la Sheet contiene <code>#ignore</code>, esa Sheet no se exportará.</td>
              <td><span class="support-badge">Compatible</span></td>
              <td><span class="support-badge">Compatible</span></td>
            </tr>
            <tr>
              <td><strong>Colecciones</strong></td>
              <td><code>#list</code>、<code>#array</code></td>
              <td><strong>Se usa para construir colecciones.</strong> <br/><code>#list</code>: combina varias columnas en un campo de colección.<br/><code>#array</code>: analiza varios valores en una sola celda como colección. El separador predeterminado es <code>|</code>.</td>
              <td><span class="no-badge">No compatible</span></td>
              <td><span class="support-badge">Compatible</span></td>
            </tr>
            <tr>
              <td><strong>Relacionado con enum</strong></td>
              <td><code>#enumvalue</code>、<code>#enumname</code></td>
              <td><strong>Se usa para generar código enum.</strong> <br/>Los valores y nombres enum de la tabla se pueden generar como enums de C#, reduciendo constantes escritas a mano.</td>
              <td><span class="no-badge">No compatible</span></td>
              <td><span class="support-badge">Compatible</span></td>
            </tr>
            <tr>
              <td><strong>Objetos personalizados</strong></td>
              <td><code>#item</code></td>
              <td><strong>Se usa para encapsular objetos.</strong> <br/>Combina varias columnas en un objeto personalizado. Admite anidación multinivel y puede usarse con otras etiquetas. <br/><strong>Ejemplo:</strong> combina las columnas <code>x</code> e <code>y</code> en un objeto de coordenadas estilo <code>Vector2</code></td>
              <td><span class="no-badge">No compatible</span></td>
              <td><span class="support-badge">Compatible</span></td>
            </tr>
          </table>
        </div>
      </div>
    </section>
    <div class="footer">Documentación de 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>