На странице два списка остановок - "Откуда" и "Куда". Как только выбраны обе остановки происходит поиск подходящих рейсов и выводится их список. Кнопка "Переставить остановки" нужна для поиска обратных рейсов, она меняет местами остановки и запускает новый поиск рейсов.
Данные хранятся в виде массивов JavaScript. На этапе разработки HTML, CSS, JavaScript в отдельных файлах - для удобства доработки, отладки и тестирования. Итоговое расписание в одном файле - для удобства распространения.
Для сборки выполнить build.php (PHP 5.4+). Результат будет в каталоге result:
test.html- документ с тестовыми данными, для проверки_html.php- шаблон для конструктора расписания транспорта
data/icon.png - значок для теста
data/sample.php - тестовые данные
result/test.html - вариант для проверки, содержит тестовые данные из data/
result/_html.php - шаблон для сборки через конструктор расписания транспорта
src/transport.css - вставляется целиком, без изменений
src/transport.js - поля для вставки помечены символами подчеркивания: _STOPS_, _ROUTES_, _TEMPLATE_
src/transport.html - поля для вставки помечены комментариями: <!-- CSS -->, <!-- JS -->, <!-- TITLE --> и т.п.
build.php - скрипт для сборки
Для оформления расписания применяется CSS-фреймворк W3.CSS. Благодарю его разработчиков - авторов ресурса W3Schools.com.
W3.CSS is a small, fast, and modern CSS framework with built-in responsiveness.
W3.CSS is free to use. No license is necessary.