80 lines
6.6 KiB
HTML
80 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
|
||
<title>Справка — Электронная очередь</title>
|
||
<style>
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f0f0f0;color:#111;min-height:100vh}
|
||
header{background:#fff;border-bottom:1px solid #e0e0e0;padding:14px 16px;display:flex;align-items:center;justify-content:space-between}
|
||
header h1{font-size:1.1rem;font-weight:700}
|
||
header a{font-size:.85rem;color:#2563eb;text-decoration:none}
|
||
header a:hover{text-decoration:underline}
|
||
main{max-width:520px;margin:0 auto;padding:16px 12px 48px}
|
||
section{background:#fff;border-radius:10px;padding:18px 16px;margin-bottom:14px;box-shadow:0 1px 3px rgba(0,0,0,.07)}
|
||
h2{font-size:1rem;font-weight:700;margin-bottom:12px}
|
||
h3{font-size:.9rem;font-weight:700;margin-bottom:6px;color:#374151}
|
||
ol{padding-left:20px}
|
||
ol li,ul li{margin-bottom:8px;font-size:.9rem;line-height:1.5;color:#444}
|
||
ul{padding-left:20px}
|
||
p.sub{font-size:.9rem;line-height:1.5;color:#444;margin-bottom:10px}
|
||
p.sub+p.sub{margin-top:0}
|
||
.badge{display:inline-block;background:#f3f4f6;color:#374151;border:1px solid #d1d5db;border-radius:5px;padding:1px 7px;font-size:.8rem;font-weight:600;white-space:nowrap}
|
||
.badge.red{background:#fee2e2;color:#dc2626;border-color:#fca5a5}
|
||
.badge.yellow{background:#fef9c3;color:#854d0e;border-color:#fde047}
|
||
.note{font-size:.82rem;color:#666;line-height:1.5;background:#fef9c3;border-radius:8px;padding:14px 16px;border:1px solid #fde047;margin-bottom:14px}
|
||
.note p+p{margin-top:8px}
|
||
.spread{font-size:.85rem;color:#555;line-height:1.5;text-align:center;padding:4px 8px}
|
||
.spread a{color:#2563eb}
|
||
footer{text-align:center;color:#bbb;font-size:.78rem;padding:8px 16px 24px}
|
||
footer a{color:#999}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>Справка</h1>
|
||
<a href="javascript:history.back()">← назад</a>
|
||
</header>
|
||
<main>
|
||
|
||
<section>
|
||
<h2>Как пользоваться</h2>
|
||
<ol>
|
||
<li>Отсканируйте QR-код или откройте ссылку на очередь.</li>
|
||
<li>Нажмите <span class="badge">Взять номер</span> — можно указать имя или псевдоним, или пропустить.</li>
|
||
<li>Ждите своей очереди. Приложение показывает позицию и примерное время ожидания (рассчитывается после первых трёх завершённых сессий).</li>
|
||
<li>Когда закончите — нажмите <span class="badge red">Ухожу</span>, чтобы освободить место.</li>
|
||
</ol>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Правила очереди</h2>
|
||
|
||
<h3>Первый человек прошёл в кабинет</h3>
|
||
<p class="sub">Человек зашёл — и забыл нажать <span class="badge red">Ухожу</span>. Не беда: любой участник очереди может нажать <span class="badge yellow">Отметить ушедшим</span> и освободить место. Запись перейдёт в режим ожидания — у первого есть 60 секунд, чтобы нажать <strong>Вернуть моё место</strong>, если это была ошибка. Не нажмёт — удалится автоматически. Очередь справляется сама.</p>
|
||
|
||
<h3>Участник из середины очереди ушёл</h3>
|
||
<p class="sub">Любой участник может проголосовать за удаление записи кнопкой <span class="badge">Голосовать за удаление</span>. Нужно набрать <strong>min(3, ⌈n/2⌉)</strong> голосов, где n — число человек в очереди. Например: при 4 участниках нужно 2 голоса, при 6 — 3.</p>
|
||
<p class="sub">Как только порог достигнут — та же 60-секундная пауза: владелец может нажать <strong>Вернуть моё место</strong>. Один участник может голосовать только за одного человека одновременно.</p>
|
||
|
||
<h3>Рядом человек без смартфона</h3>
|
||
<p class="sub">Отсутствие телефона — не стигма. Объясните ему, что здесь есть электронная очередь, и помогите встать. Скажите: «Я сейчас последний — номер #N. Вы встаёте между мной и следующим. Когда подойдёт кто-то новый с телефоном — предупредите его, что вы здесь и стоите без номера, между #N и #N+1».</p>
|
||
<p class="sub">Каждому достаточно помнить одного соседа — того, кто стоит перед ним. Это надёжнее, чем пытаться удержать в голове всю цепочку и восстанавливать её при разрыве.</p>
|
||
</section>
|
||
|
||
<div class="note">
|
||
<p><strong>Это неофициальный инструмент самоорганизации.</strong> Он никак не связан с организацией, у которой вы стоите в очереди. Никаких гарантий бесперебойной работы не даётся.</p>
|
||
<p>Здесь нет администратора и организатора. <strong>Вы сами организуете очередь — не очередь организует вас.</strong> Это означает ответственность: отмечайте себя как ушедшего, когда закончили; голосуйте за удаление тех, кто явно ушёл и не реагирует. Без взаимного уважения инструмент не работает.</p>
|
||
<p>Вопросы и пожелания: <a href="mailto:line.keeper@berkuta.xyz">line.keeper@berkuta.xyz</a></p>
|
||
</div>
|
||
|
||
<div class="spread">
|
||
<p>Знаете место, где люди часто стоят в живой очереди? <a href="/">Создайте свою очередь</a> и распечатайте QR-код.</p>
|
||
</div>
|
||
|
||
</main>
|
||
<footer>Очереди без записи, без регистрации</footer>
|
||
</body>
|
||
</html>
|