Сайт для аренды оборудования: каталог, корзина и расчёт смены СЕВЕРСВЕТ

Ренталу кинотехники нужен сайт, который продаёт двумя вещами: железом и картинкой. Каталог оборудования с ценами, портфолио съёмок, контакты — и всё это должно летать на телефоне у продюсера, который ищет камеру на завтра.

Главная сложность рентала не в дизайне, а в арифметике. Продюсер набирает не один предмет, а комплект: тело, два объектива, монитор, батареи, карты, стойки. Пока сумма не посчитана, разговор не начинается — а считать её в переписке значит потерять полдня на обе стороны.

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

Решение приняли до первой строки кода, и оно определило всё остальное.

Обратная сторона честная: статику нельзя править из браузера. Поэтому каталог вынесен в один файл данных, и правка цены — это одна строка, а не программирование.

Парк — это 127 позиций в 14 разделах: камеры, оптика, адаптеры, носители, свет, грип, риг, стабилизация, мониторы, фокус и фильтры, звук, питание, связь и DIT, спецоборудование. Суточные ставки идут от 50 ₽ за мелочь вроде переходника до 5 000 ₽ за тело.

Всё это лежит в одном файле данных. Новая позиция — строка: название, ставка, количество, описание, метки типов съёмки. Страница собирается из него скриптом при открытии, поэтому добавить камеру и изменить цену может человек, который не пишет код.

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

Главная часть сайта — не витрина, а расчёт. Продюсер собирает комплект, ставит даты, и сумма считается на месте по правилам рентала, а не «по прайсу за штуку».

Корзина переживает закрытие вкладки: набранный комплект и даты лежат в браузере. Человек ушёл посмотреть смету, вернулся через день — всё на месте.

Значки техники сначала лежали отдельным файлом и подключались ссылкой вида <use href="sprite.svg#id"> — так делают все, и в трёх браузерах из четырёх это работает. Safari внешние ссылки на символы не читает вовсе. На айфоне каталог открывался без единой иконки, и заметить это можно было только на живом телефоне: в десктопной проверке всё было цело.

Починка вышла нестандартной: спрайт теперь живёт строкой прямо в скрипте и вставляется в страницу до отрисовки каталога. Файл при этом кэшируется отдельно, то есть скорость не пострадала. Мораль, которая повторяется в каждом проекте: сайт проверяется на устройствах, а не в одном браузере разработчика.

Живой сайт — seversvet.github.io: каталог с расчётом, фильмотека, команда, заявки в телеграм и по телефону. Хостинг стоит ноль, сертификат бесплатный, абонплаты нет ни за что.

Фильмотека — ролики с ленивыми луп-превью: карточка оживает при наведении, полное видео открывается плеером и не грузится, пока на него не нажали. Все работы в ней сняты и покрашены мной.

Обновление парка и цен — правка одного файла данных. За обслуживание сайта владелец не платит никому.

Такой сайт под вашу задачу — от 50 000 ₽ за лендинг, от 90 000 ₽ за многостраничник. Расчёт, корзина и прочая живая логика обсуждаются отдельно: это уже не вёрстка.