todo/wizard.html

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="light dark" />
    <title>Что у вас не работает?</title>
    <style>
      :root {
        --bg: #ffffff;
        --panel: #f5f5f7;
        --text: #1f1f1f;
        --muted: #555;
        --border: #d0d0d5;
        --accent: #7c3aed;
        --link: #705dcf;
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --bg: #1e1e1e;
          --panel: #262626;
          --text: #dadada;
          --muted: #999;
          --border: #3f3f3f;
          --link: #a48bfa;
        }
      }
      html, body {
        margin: 0;
        padding: 0;
        background: var(--bg);
        color: var(--text);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.55;
      }
      .box {
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 16px 20px;
        margin: 8px;
        background: var(--panel);
      }
      h3 { margin: 0 0 12px; font-size: 18px; }
      .buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
      .buttons button {
        padding: 8px 14px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        font-family: inherit;
        border: 1px solid var(--border);
        background: var(--bg);
        color: var(--text);
        transition: border-color .15s, transform .05s;
      }
      .buttons button:hover { border-color: var(--accent); }
      .buttons button:active { transform: scale(.97); }
      .buttons button.active { outline: 2px solid var(--accent); }
      #answer h4 { margin: 12px 0 4px; font-size: 16px; }
      #answer p { margin: 6px 0; }
      #answer a { color: var(--link); }
      .hint { color: var(--muted); font-size: 13px; margin-top: 10px; }
    </style>
  </head>
  <body>
    <div class="box">
      <h3>🧭 Что у вас не работает?</h3>
      <div class="buttons" id="buttons"></div>
      <div id="answer"></div>
      <div class="hint" id="hint">Нажмите на кнопку — покажем короткий план действий со ссылками на нужные страницы вики.</div>
    </div>

    <script>
      const WIKI = 'https://wiki2.zapret.moe/';

      const link = (page, text) =>
        `<a href="${WIKI + encodeURI(page.replace(/ /g, '-'))}" target="_top">${text}</a>`;

      const ANSWERS = {
        youtube: {
          label: '📺 YouTube',
          title: '📺 Не работает YouTube',
          html:
            `<p>1. Установите лаунчер со страницы ${link('Zapret/download', 'скачивания')} и запустите стандартную стратегию.</p>` +
            `<p>2. Не помогло — включите оркестратор (автоперебор стратегий) или посмотрите разбор блокировки на странице ${link('Zapret/youtube', 'YouTube')}.</p>` +
            `<p>3. Всё ещё не работает — пройдите по чек-листу ${link('Zapret/zapret_not_working', '«Не работает!»')}.</p>`
        },
        discord: {
          label: '🎮 Discord',
          title: '🎮 Не работает Discord',
          html:
            `<p>1. Установите лаунчер со страницы ${link('Zapret/download', 'скачивания')}.</p>` +
            `<p>2. Голос не подключается или не грузятся картинки — смотрите страницу ${link('Zapret/discord', 'Discord')} и ${link('ipset-discord', 'ipset для Discord')}.</p>` +
            `<p>3. Осталась проблема — чек-лист ${link('Zapret/zapret_not_working', '«Не работает!»')}.</p>`
        },
        site: {
          label: '🌐 Другой сайт',
          title: '🌐 Не открывается другой сайт (ChatGPT, Gemini, Notion…)',
          html:
            `<p>1. Такие сайты чаще всего разблокируются через файл ${link('Zapret/hosts', 'hosts')} — в лаунчере это делается в пару кликов.</p>` +
            `<p>2. Для игр и нестандартных приложений соберите свои адреса: ${link('Zapret/Создание своей категории', 'создание своей категории')}.</p>`
        },
        nothing: {
          label: '⛔ Вообще всё',
          title: '⛔ Не работает вообще ничего',
          html:
            `<p>1. Пройдите чек-лист ${link('Zapret/zapret_not_working', '«Не работает!»')} — там разобраны конфликты с антивирусами и VPN.</p>` +
            `<p>2. Запустите ${link('Zapret/Blockcheck', 'блокчек')}, чтобы подобрать рабочую стратегию под вашего провайдера.</p>` +
            `<p>3. Ничего не помогло — задайте вопрос: <a href="https://git2.zapret.moe/zapretdiscordyoutube/zapret/issues/new" target="_blank">Forgejo Issues</a>, <a href="https://t.me/youtubenotwork" target="_blank">Telegram</a> или <a href="https://discord.gg/kkcBDG2uws" target="_blank">Discord</a>.</p>`
        }
      };

      const buttons = document.getElementById('buttons');
      const answer = document.getElementById('answer');
      const hint = document.getElementById('hint');

      for (const key of Object.keys(ANSWERS)) {
        const b = document.createElement('button');
        b.textContent = ANSWERS[key].label;
        b.addEventListener('click', () => {
          buttons.querySelectorAll('button').forEach((x) => x.classList.remove('active'));
          b.classList.add('active');
          hint.style.display = 'none';
          const a = ANSWERS[key];
          answer.innerHTML = `<h4>${a.title}</h4>${a.html}`;
        });
        buttons.appendChild(b);
      }
    </script>
  </body>
</html>