Демо

Демо — девять приложений на весь экран: канбан-доска, конвертер изображений, игра, доска для рисования, таблица, драм-машина, генератор счетов, распознавание текста и дашборд веб-аналитики. Каждое приложение — один фрейм OnPress из разметки, файла стилей и файла скрипта. Сервер приложениям не нужен, они работают в браузере посетителя и хранят его данные там же, в localStorage.

Открытые библиотеки приложения подключают с CDN с фиксированной версией. Исходники всех девяти лежат в открытом репозитории onpress-docs на GitHub под лицензией MIT. Как устроено такое приложение и как поставить его на свой сайт, рассказывает раздел «Приложения».

Стопка — канбан-доска

Канбан-доска Стопка с колонками «Идеи», «К работе», «В работе» и «Готово», карточками, метками и сроками

Стопка раскладывает задачи по колонкам, как Trello. Карточки и колонки вы перетаскиваете мышью или пальцем, а у карточки есть цветные метки, срок с подсветкой просрочки, чек-лист с прогрессом и описание в Markdown. Поиск находит карточки по тексту и меткам. Доску вы выгружаете в JSON и загружаете обратно, а при первом входе Стопка показывает пример доски.

Открыть Стопку · Исходники на GitHub

Жмых — конвертер изображений

Конвертер изображений Жмых с выбором формата WebP, AVIF, JPG, PNG или ICO, качества, размера и обрезки

Жмых сжимает картинки пачкой и переводит их в WebP, AVIF, JPG, PNG и ICO. Файлы вы перетаскиваете в окно, выбираете на диске или вставляете из буфера, Жмых принимает и HEIC с телефона. Справа вы задаете качество, предельный размер и обрезку по пропорциям от 1:1 до 9:16. Шторка показывает картинку до и после, рядом Жмых пишет вес файла и экономию в процентах. Кодеки Squoosh работают в фоновых потоках браузера, файлы не уходят на сервер, а результат вы скачиваете по одному или ZIP-архивом.

Открыть Жмых · Исходники на GitHub

Blob Drop — игра

Игра Blob Drop с банкой капель, бонусами справа и порядком слияния слева

Blob Drop — головоломка с физикой. Вы бросаете капли в банку, и две одинаковые капли при касании дают каплю побольше. Цель — дорастить каплю до золотой звезды, пока капли не перевалили за пунктир наверху банки. Слияния заряжают четыре бонуса — тряску, лопание, чистку и радугу. Последний бросок вы отменяете кнопкой, а рекорды и незаконченную партию игра хранит в браузере. Вы играете мышью, пальцем или с клавиатуры.

Открыть Blob Drop · Исходники на GitHub

Доска для рисования

Доска встраивает во фрейм редактор Excalidraw с бесконечным холстом. Вы рисуете фигуры, стрелки с привязкой к фигурам, линии от руки и текст в стиле наброска, двигаете холст и меняете масштаб. Отмену, повтор и горячие клавиши дает сам Excalidraw. Доска сохраняет сцену в браузере после каждой правки, а вы выгружаете ее в PNG, SVG или файл сцены и открываете файл снова.

Открыть доску · Исходники на GitHub

Таблица

Таблица работает как Google Таблицы: строка формул, выделение диапазонов, несколько листов и ссылки между ними. Формулы считает движок HyperFormula, он знает почти 400 функций Excel и понимает русские имена вроде СУММ и ЕСЛИ. На панели вы задаете форматы чисел, валюту, проценты, жирный шрифт, цвет и заливку, сортируете данные и ставите автосумму, а маркер выделения протягивает значения автозаполнением. Таблица открывает CSV и XLSX и сохраняет книгу обратно в эти форматы, а при первом входе показывает бюджет поездки. HyperFormula выходит под лицензией GPLv3, приложение подключает ее с CDN, и в репозиторий она не входит.

Открыть таблицу · Исходники на GitHub

BX-808 — драм-машина

Драм-машина BX-808 с сеткой из 16 шагов, микшером дорожек и басовой линией

BX-808 — драм-машина в духе Roland TR-808. Десять звуков ударных и бас BX-808 синтезирует через Web Audio прямо в браузере, без сэмплов. В сетке 16 или 32 шага, второй клик по шагу ставит акцент, а движением по дорожке вы рисуете ритм целиком. Темп вы задаете кнопками или отстукиваете, свинг и общую громкость — ползунками, а у каждой дорожки есть своя громкость, панорама, mute и solo. Четыре паттерна A–D в режиме цепочки звучат по очереди, восемь стилей и кнопка «Случайный» дают готовый ритм. Бит вы скачиваете в WAV или отправляете ссылкой, в которой записан весь паттерн.

Открыть BX-808 · Исходники на GitHub

Квиток — генератор счетов

Генератор счетов Квиток с формой реквизитов слева и живым листом счета A4 справа

Квиток собирает счет на оплату по российской форме, слева форма, справа живой лист A4. Квиток проверяет ИНН, БИК, корреспондентский и расчетный счет по контрольным цифрам, считает НДС в том числе или сверху и пишет сумму прописью. На счете Квиток печатает QR-код, который считывает приложение любого банка, а логотип, подпись и печать вы добавляете картинкой. Готовый счет вы скачиваете в PDF с настоящим текстом или отправляете на печать. Счета, клиентов и статусы оплаты Квиток хранит в вашем браузере.

Открыть Квиток · Исходники на GitHub

СКАНТЕКСТ — текст с картинки

Распознавание текста СКАНТЕКСТ с областью для картинки, инструментами обработки и панелью текста

СКАНТЕКСТ достает русский и английский текст из скриншотов, фото документов и сканов движком tesseract.js. Картинку вы перетаскиваете, вставляете из буфера или снимаете камерой телефона, потом поворачиваете, обрезаете до нужной области и усиливаете контраст. Каждое слово результата СКАНТЕКСТ связывает с рамкой на картинке и отмечает слова, в которых не уверен. Текст вы правите прямо в панели, копируете или сохраняете в .txt, а последние распознавания приложение держит в истории. Картинка не покидает ваше устройство.

Открыть СКАНТЕКСТ · Исходники на GitHub

Пульс — веб-аналитика

Дашборд веб-аналитики Пульс с восемью показателями и мини-графиками, графиком посещаемости со сравнением периодов и блоком «Сейчас на сайте»

Пульс — дашборд веб-аналитики в духе Яндекс Метрики и Google Analytics по вымышленному сайту видеоредактора kadr.studio. Восемь ключевых показателей Пульс выводит с динамикой и мини-графиками, а главный график строит по семи метрикам со сравнением с прошлым периодом и метками кампаний. Вы выбираете период или свой диапазон, фильтруете данные по источнику, устройству и стране, и Пульс пересчитывает все отчеты.

В отчетах есть шесть каналов трафика, UTM-кампании с ROMI, карта мира со странами и городами, устройства, браузеры и ОС, страницы входа и выхода, воронка из пяти шагов, когорты удержания, MRR и ARR по тарифам с оттоком, таблица пользователей с карточкой и историей платежей и лента «Сейчас на сайте». Демо-данные охватывают 18 месяцев, около 52 тысяч пользователей и 96 тысяч платежей, а графики рисует библиотека ECharts 5.6. Как подключить к такому дашборду настоящие данные из внешних сервисов, рассказывает гайд «Внешние данные».

Открыть Пульс · Исходники на GitHub

Демо на вашем сайте

Любое из девяти приложений вы ставите на свой сайт OnPress скриптом deploy.py из репозитория onpress-docs и продвигаете как SEO-страницу, ведь полезный инструмент на собственном адресе приводит поисковый трафик. Как поставить приложение, закрыть его от посторонних, дать ему данные сайта и внешние данные, рассказывает раздел «Приложения».