# TickBeep: Найдите клеща телефоном, пока он не добрался до кожи

> Проведите телефоном по одежде, коже и снаряжению. TickBeep подаст сигнал и отметит на экране ползущего клеща. Идёт закрытая бета.

<section class="hero-wrap">
  <div class="hero">
    <div>
      <div class="tags-row">
        <span class="tag now">Закрытая бета</span>
        <span class="tag next">Ищем полевых тестировщиков</span>
      </div>
      <h1>Найдите клеща раньше, чем он доберётся до кожи.</h1>
      <p class="lead">TickBeep превращает телефон в детектор клещей. Проведите им вдоль штанин, рукавов, спины и снаряжения. Когда в кадре что-то мелкое ползёт, телефон пищит, вибрирует и обводит объект на экране. Как металлоискатель, только для клещей.</p>
      <a class="cta" href="#beta">Записаться в полевую бету<small>закрытая бета на этот сезон, ссылки на магазин пока нет</small></a>
    </div>
    <figure class="hero-visual">
      <picture>
        <source srcset="/hero-tick-on-trousers.webp" type="image/webp">
        <img src="/hero-tick-on-trousers.jpg" width="1280" height="853" loading="eager" decoding="async"
             alt="Человек сидит на краю леса и проводит телефоном по собственной штанине. На экране телефона ткань увеличена, и два клеща отмечены яркими зелёными рамками.">
      </picture>
      <figcaption>Макет приложения в работе. TickBeep всё ещё в разработке, это не скриншот готового продукта.</figcaption>
    </figure>
  </div>
</section>

<section id="why">
  <h2>Почему глазам этого мало</h2>
  <p class="lead narrow">Вы уже вышли из леса. Отряхнулись у машины и вроде бы посмотрели на себя. Вот что обычный взгляд пропускает.</p>
  <div class="pain-grid">
    <div class="card">
      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" aria-hidden="true">
        <circle cx="20" cy="20" r="3" fill="#ff5a36"/>
        <circle cx="13" cy="13" r="2" fill="#ffb060"/>
        <rect x="8" y="34" width="24" height="3" rx="1.5" fill="#2c3940"/>
      </svg>
      <h3>Проблема - в самых мелких</h3>
      <p>Взрослого клеща ещё можно заметить и стряхнуть. Нимфа - это один-два миллиметра, и на тёмных штанах глаз просто скользит мимо. Именно такие уезжают с вами домой и цепляются на дни, пока их не заметят.</p>
    </div>
    <div class="card">
      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" aria-hidden="true">
        <path d="M20 4 L36 32 L4 32 Z" fill="none" stroke="#ffb060" stroke-width="2"/>
        <circle cx="20" cy="20" r="2.5" fill="#ff5a36"/>
      </svg>
      <h3>Свою спину вы не видите</h3>
      <p>Задняя часть ног, поясница, за воротником, между лопатками. Можно крутиться как угодно и всё равно не увидеть места, куда клещ реально ползёт. Поэтому люди проверяют друг друга. TickBeep нужен как раз на тот случай, когда вы одни.</p>
    </div>
    <div class="card">
      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" aria-hidden="true">
        <circle cx="20" cy="20" r="15" stroke="#ff5a36" stroke-width="2"/>
        <path d="M20 5 L20 12 M20 28 L20 35 M5 20 L12 20 M28 20 L35 20" stroke="#ff5a36" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <h3>Дома проверять уже поздно</h3>
      <p>Пока вы шли, он уже полз вверх. К тому моменту, как вы сели на диван, он может быть под поясом или уже в рукаве. Проверять надо у тропы, до того как вы сели в машину.</p>
    </div>
  </div>
  <p class="aside">Это не про запугивание. Просто самые маленькие и тихие - именно те, кого человек при самостоятельной проверке чаще всего пропускает.</p>
</section>

<section id="how" class="tight">
  <h2>Как это работает</h2>
  <p class="lead narrow">Три шага. Провели, услышали, посмотрели.</p>
  <div class="steps">
    <div class="step">
      <span class="n"></span>
      <h3>Сначала звук, не экран</h3>
      <p>Когда вы ведёте телефон по задней стороне собственной ноги, дисплей вообще не видно. Поэтому TickBeep не опирается на экран. Он пищит и вибрирует в ту же секунду, как что-то замечает. Вы просто продолжаете вести телефон и слушаете.</p>
    </div>
    <div class="step">
      <span class="n"></span>
      <h3>Зелёная рамка, когда вы всё же смотрите</h3>
      <p>Всё, что приложение поймало, получает яркую зелёную рамку прямо на живом изображении с камеры. Не нужно щуриться и искать объект по кадру. Телефон показывает точное место.</p>
    </div>
    <div class="step">
      <span class="n"></span>
      <h3>Оно следит за движением, а не за формой</h3>
      <p>После прогулки по лесу на вас полно мелочи: грязь, семена, ворс, хвоя. Всё это лежит спокойно. Клещ ползёт. TickBeep ищет маленький объект подходящего размера, который движется.</p>
    </div>
  </div>
  <p class="aside">Есть ещё две вещи, которые помогают и вашим глазам: режим инверсии цветов, где тёмная точка на перевёрнутом фоне вспыхивает ярче, и подсказка посветить фонариком вскользь, где настоящий объёмный объект даёт тень, а пятно - нет. Всё работает прямо на телефоне. Кадры с камеры никуда не уходят.</p>
</section>

<section id="where" class="tight">
  <h2>Где он смотрит</h2>
  <p class="lead narrow">На вас, на вашей одежде и на том, что вы несли.</p>
  <div class="grid-3">
    <div class="where-card">
      <svg width="44" height="44" viewBox="0 0 44 44" fill="none" aria-hidden="true">
        <path d="M14 8 h8 v8 M14 8 c-6 6 -7 14 -5 22 l4 4 M14 8 v32 M22 16 v28 M26 20 l4 -4 c4 2 5 6 3 10 l-6 6" stroke="#ff5a36" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <h3>Одежда</h3>
      <p>Штанины, рукава, манжеты, воротники, швы, где они любят прятаться. Проведите по ткани до того, как она уедет с вами в машине.</p>
    </div>
    <div class="where-card">
      <svg width="44" height="44" viewBox="0 0 44 44" fill="none" aria-hidden="true">
        <path d="M22 6 c-6 0 -9 6 -9 13 v16 h5 v-20 h8 v20 h5 V19 c0 -7 -3 -13 -9 -13 Z" stroke="#ff5a36" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
        <line x1="22" y1="6" x2="22" y2="22" stroke="#ff5a36" stroke-width="2.4"/>
      </svg>
      <h3>Открытая кожа</h3>
      <p>Руки, шея, щиколотки, задняя часть колена. Те места, куда клещ и идёт, и те места, которые самому увидеть труднее всего.</p>
    </div>
    <div class="where-card">
      <svg width="44" height="44" viewBox="0 0 44 44" fill="none" aria-hidden="true">
        <rect x="8" y="12" width="28" height="20" rx="4" stroke="#ff5a36" stroke-width="2.4" fill="none"/>
        <path d="M14 14 v-5 h16 v5" stroke="#ff5a36" stroke-width="2.4" fill="none" stroke-linecap="round"/>
        <line x1="22" y1="12" x2="22" y2="8" stroke="#ff5a36" stroke-width="2.4" stroke-linecap="round"/>
        <path d="M16 24 h12" stroke="#ffb060" stroke-width="2.4" stroke-linecap="round"/>
      </svg>
      <h3>Ваше снаряжение</h3>
      <p>Рюкзак, сапоги, палатка, коврик. Клещ доезжает домой на ваших вещах, а потом находит вас позже. Проверять стоит не только себя, но и всё, что было с вами.</p>
    </div>
  </div>
</section>

<section id="status" class="tight">
  <h2>Что уже работает и что ещё в процессе</h2>
  <p class="lead narrow">Лучше сказать прямо, чем приукрашивать. Вот честное разделение.</p>
  <div class="grid-2">
    <div class="panel">
      <span class="tag now">Работает сейчас</span>
      <ul>
        <li>Поиск маленьких движущихся объектов на живом изображении с камеры</li>
        <li>Яркая зелёная рамка вокруг всего, что приложение поймало</li>
        <li>Звук и вибрация, чтобы оно работало вслепую</li>
        <li>Режим инверсии цветов</li>
        <li>Подсказка для фонарика вскользь</li>
        <li>Полностью работает на телефоне, кадры никуда не выгружаются</li>
      </ul>
    </div>
    <div class="panel">
      <span class="tag next">В процессе</span>
      <ul class="next">
        <li>Карта покрытия с использованием датчика глубины, чтобы приложение понимало, какие участки уже были просканированы, а какие вы пропустили</li>
        <li>Режим, настроенный под шерсть животных, на потом</li>
        <li>Тепловая насадка для поиска тёплых тел</li>
      </ul>
    </div>
  </div>
  <p class="aside">Мы не ставим даты напротив списка "в процессе". Выпустим, когда будет хорошо, а не раньше.</p>
</section>

<section id="beta">
  <div class="form-panel">
    <span class="tag now">Закрытая бета</span>
    <h2>Записаться в бету</h2>
    <p class="lead">В этом сезоне мы набираем полевых тестировщиков. Место в бете бесплатное.</p>
    <form id="beta-form" action="/api/forms/tickbeep/beta" method="post">
      <div class="field">
        <label for="email">Email</label>
        <input type="email" id="email" name="email" required placeholder="you@example.com" autocomplete="email">
      </div>
      <div class="field">
        <label for="region">Регион или страна</label>
        <input type="text" id="region" name="region" placeholder="Беларусь, Латвия, Бавария" autocomplete="country-name">
      </div>
      <div class="field">
        <label for="device">Какой телефон вы носите</label>
        <input type="text" id="device" name="device" placeholder="iPhone 15 Pro, Pixel 8, Galaxy S23">
      </div>
      <div class="field">
        <span class="label">Где вы чаще бываете?</span>
        <label class="check"><input type="checkbox" name="terrain" value="woods"> Лес и тропы</label>
        <label class="check"><input type="checkbox" name="terrain" value="fields"> Поля и опушки</label>
        <label class="check"><input type="checkbox" name="terrain" value="grassland"> Луга и берега воды</label>
        <label class="check"><input type="checkbox" name="terrain" value="work"> Работа на улице</label>
      </div>
      <div class="hp" aria-hidden="true">
        <label for="website">Сайт</label>
        <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
      </div>
      <div class="cf-turnstile" data-sitekey="0x4AAAAAADTuJu-BSkxDDaDc"></div>
      <button class="btn" id="beta-submit" type="submit">Сохранить место</button>
      <p class="form-status" id="beta-status" role="status" aria-live="polite"></p>
      <p class="fine">Почему мы спрашиваем регион: клещи завязаны на местность. Вид на тропе в Шотландии - не тот же, что на дорожке в Коннектикуте. Мы тестируем на тех клещах, которые реально живут рядом с вами, поэтому нам нужны тестировщики из настоящих мест, а не из лаборатории.</p>
    </form>
  </div>
</section>

<section id="faq" class="tight">
  <h2>FAQ</h2>
  <details>
    <summary>Это медицинский прибор?</summary>
    <p>Нет. TickBeep - это вспомогательный инструмент обнаружения, который помогает раньше заметить ползущего клеща. Он ничего не диагностирует, не оценивает укус и не заменяет медицинский совет.</p>
  </details>
  <details>
    <summary>Что если клещ перестал двигаться?</summary>
    <p>Тогда приложение может его не поймать. TickBeep завязан на движение, поэтому неподвижный клещ может проскользнуть мимо. Считайте приложение вторым набором глаз, а не заменой нормальному осмотру. Оно помогает найти что-то быстрее, чем вы нашли бы в одиночку. Но не обещает найти каждого.</p>
  </details>
  <details>
    <summary>Куда уходят кадры с камеры?</summary>
    <p>Никуда. Вся обработка идёт на вашем телефоне. Кадры не выгружаются, не хранятся на сервере и никуда не отправляются.</p>
  </details>
  <details>
    <summary>Комаров оно тоже отмечает?</summary>
    <p>Да. Оно ищет всё маленькое и движущееся, так что комары, мошки и муравьи тоже попадут в рамку. Цель - клещи, а остальное это побочный эффект того, как всё устроено. Рамка, которую вы снимете за секунду, лучше нимфы, которую вы вообще не увидели.</p>
  </details>
  <details>
    <summary>Сколько это будет стоить?</summary>
    <p>Для участников беты этого сезона - бесплатно. В этом и состоит весь смысл записи сейчас.</p>
  </details>
  <details>
    <summary>Можно проверить собаку?</summary>
    <p>Это не основной сценарий. TickBeep сделан для проверки себя и своей одежды в поле. Режим, настроенный под шерсть животных, мы рассматриваем на потом, но само приложение - для вас и того, что вы носили, а не для питомца.</p>
  </details>
  <details>
    <summary>Android?</summary>
    <p>Есть в списке. Напишите в форме, какой телефон вы носите, это помогает решать, что делать следующим.</p>
  </details>
</section>

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<script>
(function () {
  var form = document.getElementById('beta-form');
  if (!form) return;
  var status = document.getElementById('beta-status');
  var submit = document.getElementById('beta-submit');
  var renderedAt = Math.floor(Date.now() / 1000);

  function setStatus(text, isError) {
    status.textContent = text;
    status.classList.toggle('is-error', !!isError);
    status.classList.toggle('is-ok', !isError && !!text);
  }

  function uuid() {
    return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, function (c) {
      return (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16);
    });
  }

  form.addEventListener('submit', async function (e) {
    e.preventDefault();
    submit.disabled = true;
    setStatus('Отправляем...', false);

    var data = new FormData(form);
    var terrain = data.getAll('terrain').join(', ');
    var payload = {
      fields: {
        email: data.get('email'),
        region: data.get('region') || '',
        device: data.get('device') || '',
        terrain: terrain
      },
      website: data.get('website') || '',
      rendered_at: renderedAt,
      idempotency_key: uuid(),
      'cf-turnstile-response': (form.querySelector('[name="cf-turnstile-response"]') || {}).value || null
    };

    try {
      var resp = await fetch('/api/forms/tickbeep/beta', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(payload)
      });
      var result = await resp.json();
      if (result.ok) {
        setStatus('Вы в списке. Мы напишем вам до начала сезона.', false);
        form.reset();
        if (window.turnstile) window.turnstile.reset();
      } else {
        setStatus('Не удалось отправить. Попробуйте ещё раз через минуту.', true);
        if (window.turnstile) window.turnstile.reset();
      }
    } catch (err) {
      setStatus('Ошибка сети. Попробуйте позже.', true);
      if (window.turnstile) window.turnstile.reset();
    } finally {
      submit.disabled = false;
    }
  });
})();
</script>