Вид спереди. Телефон и планшет — живые: закажите на одном, отметьте на другом. Открыть Mini App на весь экран
Чертёж 03Telegram Mini App + вебanorroDev
Зерно
Кофейня навынос в Telegram. Гость собирает напиток — разрез стакана перестраивается на глазах, — выбирает время и платит на кассе. Заказ сразу печатается у бариста, а «готово» с планшета возвращается гостю уведомлением. Две стороны одной системы — на одном листе.
Тема
Спецификация
| Поз. | Наименование и примечание |
|---|---|
| 1 | Меню и конструктор напиткаРазмер, молоко, шоты, сироп — разрез стакана перестраивается и подписывает слои в миллилитрах, как на чертеже. |
| 2 | Лента талоновНовый заказ «печатается» на рейке. Колонки Новые → Готовим → Готово, таймер краснеет, если заказ ждёт дольше обычного. |
| 3 | Смена и стоп-листПауза приёма и «закончилось» — у гостя позиция сразу недоступна, даже если он уже положил её в корзину. |
| 4 | Связь без сервераВ демо телефон и планшет связаны через BroadcastChannel в этом браузере. В рабочей версии — бот и база данных, интерфейсы те же. |
| 5 | Карта гостяШтамп за каждый выданный напиток, седьмой — в подарок: скидка сама появляется в корзине. |
Номера совпадают с выносками на чертеже.
Технические данные
| Устройства | iPhone 393 × 852 · iPad mini 1133 × 744 · масштаб 1:1 |
|---|---|
| Шрифты | Commissioner (ось FLAR — концы штрихов, как на вывеске), IBM Plex Mono |
| Технологии | HTML, CSS, JS без фреймворков · Telegram Mini Apps: MainButton, BackButton, вибрация, тема |
| Палитра |
|
Живое демо без сервера. Заказы живут только в этом браузере. Откройте Mini App и экран бариста в двух вкладках — они тоже связаны. Данные вымышленные, цены в долларах.