Иногда вопрос «Пойдём выпьем кофе?» хочется задать немного необычнее. Так появился Operation №1909 — небольшая интерактивная веб-страница в стилистике секретной операции.
Как это работает
Пользователь проходит сценарий с несколькими ветками и постепенно собирает параметры встречи:
- имя или позывной участника;
- напиток и атмосферу;
- формат встречи;
- день и время;
- дополнительное условие.
В финале страница формирует персональный Operation Protocol. В сценарии есть положительные и отрицательные варианты ответа, возможность корректно отказаться, динамические сообщения, анимации и режим «Сюрприз».
Реализация
Проект специально сделан автономным: вся логика находится в одном index.html, без сервера, базы данных, npm и JavaScript-фреймворков. Внутри файла разделены три слоя:
- HTML-интерфейс;
- CSS-оформление, адаптация под мобильные устройства и анимации;
- JavaScript-сценарий с ветвлениями, состоянием и финальным протоколом.
Незавершённый сценарий сохраняется в localStorage, поэтому страницу можно закрыть и продолжить позже. После завершения или отказа локальное состояние очищается.
Отправка результата
После финального подтверждения результат можно отправить через Formspree. Если сеть недоступна или отправка не сработала, интерфейс не зависает и предлагает сохранить результат скриншотом.
Проект опубликован как простой GitHub Pages-сайт: достаточно открыть index.html в браузере или разместить репозиторий на GitHub Pages. Его также можно адаптировать под собственный сценарий, тексты и название операции.
Открыть Operation №1909 на GitHub