Для достижения данного эффекта, вам потребуется использовать комбинацию HTML, CSS и JavaScript.
1. Создайте HTML-структуру для отображения калькулятора. Создайте контейнер с двумя выпадающими списками для выбора планет, а также секцию для отображения пути и информации о количестве необходимого топлива.
2. Используйте CSS, чтобы сделать левую часть, содержащую выбор планет, максимально адаптивной и выглядящей как картинка. Придавайте стили элементам в соответствии с вашим дизайном.
3. Используйте JavaScript, чтобы реализовать функцию обработки выбора планет и оценки необходимого топлива. Создайте массив, где каждый элемент будет представлять отдельный этап пути (например, различные системы координат или планеты на пути). При выборе планет вам нужно будет рассчитывать количество необходимого топлива на основе ваших правил и добавлять этапы в массив.
4. Используйте JavaScript и CSS, чтобы отобразить путь на карте и выделить каждый этап при наведении курсора. Создайте элементы на карте, которые будут представлять каждый этап пути, и установите им соответствующие стили. Используйте события JavaScript, чтобы отобразить/скрыть этапы пути или изменить их стиль при наведении курсора.
Необходимость вручном расчете и отображении каждого элемента с использованием процентов будет зависеть от ваших требований и дизайна. Возможно, вам понадобится использовать проценты при задании размеров элементов или позиционирования. Обычно ширина элементов может быть указана в процентах от ширины родительского элемента для достижения адаптивности.