Веб-дизайн — удалённая работа в Москве

Дизайн сайта. Пень-управления 3D принтером. Платформа: Без платформы. Количество страниц: 9999. Добрый день! Пишем веб интерфейс для управления 3D принтером. Весь интерфейс должен быть легковесным для сервера, минималистичным для клиента, стильным для потребителя. --> Про дизайн: Основной стиль - Bootstrap. Картинок - чем меньше, тем лучше. Также все изображения должны быть векторными (например, svg). Кроссплатформенность и масштабируемость. Сайт не должен выглядеть инородно на Windows, MacOS, Linux, IOS, Android (12+). Также не должны поехать стили. Собственно, CSS стили - это самое главное в данном проекте. Весь дизайн должен быть в едином стиле. Допустимо использовать сторонние библиотеки со стилями, но надо согласовывать. Все стили задаются в CSS. Все анимации по возможности стандартные из Bootstrap. Крайне нежелательно нагружать JS. Если всё же делаете JS - нам потребуется код JS. --> Про интерфейс 1. Страница авторизации. Авторизация производится по логин-паролю + PIN из Google Authenticator. За образец можно посмотреть у GitHub. Т.е. при первом заходе. 1.1 Если пользователей нет в БД - просит ввести логин, пароль, подтверждение пароля (пароль второй раз). Здесь должны быть предусмотрены предупреждения о некорректности пароля, например, “Пароль долен содержать спец. символы“. 1.2 Ввод логина пароля. Тут всё стандартно. Логин-пароль. Также сообщения об ошибке. 1.3 Добавление аутентификатора. Если у пользователя нет OTken в системе - появится QR код с токеном и сообщение с инструкцией по подключению Google Authenticator. 1.4 Если у пользователя есть аутентификационный ключ. То. На мобильных - снизу появится сообщение “Сканер отпечатка“ и он сам занесется (Тут эти сообщения генерирует телефон). Если с компьютера - окошко с шестью цифрами 111-111. Кнопки далее делать не нужно, т.к. после ввода 6ти цифр - сразу должна происходить авторизация. 5. Главная страница должна содержать несколько вкладок. 1) Система 2) Принтеры 3) Настройки (Убрано сверху в шестерню) 4) Печать (Продублировано кнопкой сверху) Также нужно предусмотреть всплывающее окошко с выводом ошибок. Также предусмотреть кнопку / вкладку для добавления пользователя. 5.1 Система Вкладка система должна содержать сведения о системе. Текстовые: 1) Название системы 2) Архитектура 3) Кодовая база 4) IP адрес 5) Имя в сети (кнопка изменить и окошко куда ввести новый адресс с предупреждениями о корректности ввода) 6) Состояние пакетов. (Здесь должна быть кнопка обновить, если есть обновления) 7) Температура CPU. текущее/максимальное (Менять C/F) *) Далее будем увеличивать кол-во параметров Прогрессбары: 1) Полоски в полосе (сколько CPU - столько полосок разного цвета) - загрузка CPU. 2) Полоски в полосе (Сколько дисков, столько полосок) - загрузка дисков 3) Полоски в полосе загрузка RAM, SWAP, кэш Также должны быть подписи о % загрузки и что это за индикаторы. Кастомные: 1) Консоль. Это аналог консоли bash или cmd с возможностью ввода. 2) Состояние сети. Аналог палочек/антенок или что-то типа того. Обновления: Список плагинов с версией и кнопкой обновить/установить (где возможно), также кнопки обновить всё. Управление сервисами Список сервисов с кнопками запустить/остановить/перезапустить 5.2 Принтеры В этой вкладке нужно отобразить или вкладки принтеров (если он не один) или вкладку принтера. Примеры исполнения можно посмотреть с fluiid или mainsail. Слева или на ваше усмотрение. Должны быть вкладки: 1) Общая информация [Общее] 2) Консоль принтера [Консоль] 3) Печать [Печать] 4) Выравнивание стола [Выравнивание] 6) Подробная информация в виде графиков [????] 7) Прошивка принтера [Прошивка] 8) Настройки принтера [Настройки] 5.2.1. Общая информация 1) Окно состояния принтера и печати 2) Камеры принтера 3) Окно манипулирования принтером / отображения печати в реальном времени 4) Вентиляторы и температура (прогрессбар, где текущее max/min и выставленное значения) 5) Окно графиков температур 6) Консоль принтера + макросы 7) Где-то на видном месте кнопка экстренной остановки принтера, которую можно активировать потянув как при разблокировке экрана смартфона слева направо, например. 8) История печати (картинка + название + дата) 5.2.2. Консоль принтера [Консоль] Аналогична консоли из Система, но визуально должна отличаться, чтоб не перепутать. 5.2.3 Печать 1. История печати (картинка + название + дата) 2. Предпросмотр (сверху область 3D с моделью, снизу два ползутка - прогресбара (Слой, Прогресс), ниже данные, такие как время печати, кол-во прутка и т.д., и кнопка печать) 5.2.4 Выравнивание стола 1) Модель кривизны стола 2) Управление профилями высот. Тут как на картинке. 5.2.5 Настройки принтера Просто перечисление настроек A1, A2... Нужно показать настроку с переключателем Да/Нет, с ползунком 1-10 с строковым значением с кнопкой и справа от неё текст-значением 5.2.6 Окно графиков температур Температура CPU Температура экструдера 5.2.7 Прошивка принтера Кнопки Перезагрузить Klipper и прошивку принтера Окошко - логи KLIPPY Окошко - логи MOONRAKER Окошки должны содержать кнопку скачать.