Update index.html

Author: Dubinetsky

index.html

@@ -101,16 +101,8 @@
     <!-- Панель керування + текстові правила -->
     <section class="card">
       <h1>Safe / Blind Zones — Live Tester</h1>
-      <p class="muted">Супер-коротко: <b>10% зверху</b>, <b>12% знизу</b>, <b>5% зліва/справа</b> — це "сліпі зони". Усе клікабельне й текст — <b>тільки в межах safe‑zone</b>. Додатковий запас (всередині safe‑zone) — <b>2–3%</b>.</p>
-      <div class="rules">
-        <strong>Просте пояснення:</strong>
-        <ol>
-          <li>Художники малюють фон на весь екран.</li>
-          <li>У "сліпих зонах" (10% зверху, 12% знизу, 5% збоку) — <b>тільки декор</b>.</li>
-          <li>Усе клікабельне й критично важливе — <b>всередині safe‑zone</b> та ще з <b>додатковим запасом 2–3%</b> від країв safe‑zone.</li>
-          <li>Так ми гарантуємо, що на жодному пристрої елементи не обріжуться та не підуть під жести/чолку.</li>
-        </ol>
-      </div>
+
+      <p class="muted">Супер-коротко<span class="t" data-tip="Фактична роздільна здатність: ширина×висота у пікселях.">W×H</span>: <b>10% зверху</b>, <b>12% знизу</b>, <b>5% зліва/справа</b> — це "сліпі зони". Усе клікабельне й текст — <b>тільки в межах safe‑zone</b>. Додатковий запас (всередині safe‑zone) — <b>2–3%</b>.</p>
 
       <h2 class="section-title">Налаштування екрана</h2>
 
@@ -205,6 +197,15 @@ <h2 class="section-title">Прев’ю фону</h2>
         <div class="b"><span class="pill">Мін. ціль</span><strong id="kTarget">–</strong><span class="note">px</span></div>
       </div>
 
+      <div class="rules">
+        <strong>Просте пояснення:</strong>
+        <ol>
+          <li>Художники малюють фон на весь екран.</li>
+          <li>У "сліпих зонах" (10% зверху, 12% знизу, 5% збоку) — <b>тільки декор</b>.</li>
+          <li>Усе клікабельне й критично важливе — <b>всередині safe‑zone</b> та ще з <b>додатковим запасом 2–3%</b> від країв safe‑zone.</li>
+          <li>Так ми гарантуємо, що на жодному пристрої елементи не обріжуться та не підуть під жести/чолку.</li>
+        </ol>
+      </div>
     </section>
 
     <!-- Прев’ю + таблиці → горизонтальний скролл при потребі -->