Заказчик

Необходимо сверстать и дополнить элементами динамики графический интерфейс для сайта виденаблюдения (десктоп-приложение, не требуется адаптировать под мобильные). Фактически интерфейс состоит из двух страниц: просмотра видео с камеры и списка камер (записей с камер).
На странице просмотра видео (образец в файле "Просмотр.png") воспроизводится видео (область справа) и размещается список доступных камер с архивными записями для каждой из них. Ширина списка – 20% от ширины страницы. При нажатии на символ выпадающего списка в строке камеры появляется подсписок с опциями просмотра записей. Поскольку и основной, и подсписок могут состоять из большого количества строк, необходимо обеспечить вертикальную прокрутку содержимого области, занимаемого списком. В случае нажатия пользователем на символ выпадающего списка после его раскрытия список схлопывается в одну строку (с адресом, где установлена камера).
Важно: список следует скрывать при нажатии пользователем на некоторый символ (крест или что-то подобное), задвигая его к левой границе. В этом случае правая область растягивается на всю ширину экрана. Но как только пользователь делает клик на символе раскрытия списка (вертикально ориентированный текст вида "Раскрыть список"), он вновь появляется в левой части, занимая свои фиксированные 20-25%. В каждой строке с адресом присутствуют символы выпадающего списка и проигрывания видео; последний символ (проигрывания) добавляется в каждую строку подсписка конкретной камеры. По возможности, адрес камеры из списка при её выборе пользователем передаётся в часть фрейма над областью показа видео (в этой области на рисунке приведен адрес "Арсенальная, 24"). Т.е. выбирая камеру, пользователь сразу видит адрес над видео, получаемым с неё.
На странице списка камер (записей) приводятся данные о количестве доступных камер и записей, а также помещается их список. Принцип отображения тот же, что на и на странице просмотра: клик на символ выпадающего списка – появляется подсписок, повторение действия – список скрывается. При нажатии на символ проигрывания выполняется переход на страницу просмотра. Для основного списка не следует добавлять прокрутку, т.е. высота страницы зависит от кол-ва строк с адресами камер.
Верхняя панель демонстрируется на каждой странице, футер не требуется.

Срок выполнения: в течение суток с момента публикации. Основные задачи – провести вёрстку согласно представленной разметке фреймов и обеспечить описанное поведение списка камер (записей).