Верстка интерфейса Умный Дом

Логика работы элементов:
1. Квадратные кнопки, должны менять цвет при щелчке: с серого на желтый и обратно.
2. Ползунок выбора температуры (и влажности) появляется при нажатию на кнопку с термометром, при изменении состояния на кнопке отображается выбранное значение.
3. Дата и время выбираются в появляющихся окошках и отображаются рядом с кнопкой.
4. Чекбоксы, радиокнопки и остальные элементы имеют обычную для себя логику работы

Важные замечания:
1. Элементы должны быть интерактивными - при смене состояния вызывать тестовое событие. Например нажали кнопку, она поменяла свой цвет, вылез тестовый алерт со значением кнопки. Тоже самое и с другими элементами - например выводить значение ползунка, когда его передвинули.
2. В коде и css файлах должно быть описание что за что отвечает
3. Необходимо, что бы можно было сериализовать элементы, т.е. добавить руками в коде неограниченное кол-во типовых элементов, поменяв их name и id, добавив соответствующий скрипт. Необходимо, что бы любой элемент можно было легко переставить на странице изменив в css его расположение. Так же должны переставляться и блоки с элементами.
4. В качестве примера раз в 10 секунд реализовать загрузку состояний всех элементов на странице из json (просто подготовленный заранее файл). Элементы должны при этом принять состояние из файла. Например кнопка должна загореться активной, на термометре должна появиться надпись с температурой из файла и т.д.