Разработка веб чата для сайта знакомств

Техническоезадание

Разработка дизайн макета

Требования к верстке: Адаптивная верстка (Responsible Templates).

Интерактивный прототип находится по адресу:

http://domlapki.esy.es/Camzone69/home.html

Примечание:

Пользователь - это веб-модель которая общается с юзерами, за счет онлайн чата и видео трансляции.

Юзер - это человек с которым ведет общение пользователь(Веб-модель).

Юзеры делятся на такие типы:

В главном чате:

- Гость. Незарегистрированные пользователи

- Users. Это зарегистрированные пользователи

Вприват чате

-Best. Это избранные друзья

-Online. Это друзья которые находяться в онлайне.

Статус пользователя - это отображаемое сообщение всем пользователем.Которое как указано в дизайн макете, он закреплен в верхней части главного

чата.

Описание проекта

Данная страница является рабочим пространством пользователя (Модели). На этой странице она может видеть, общатся и

выполнять дополнительные действия по отношению к юзерам. Пользователь также

ведет видеотрансляцию, которая транслируется на страницу юзера и

демонстрируется на странице пользователя.

Общение ведется в трех чатах, условно они разделены таким образом:

- Главный чат (Topic)

- Приват чат (Private chat)

- Быстрый чат (Quick chat)

На этой странице также отображается “Заработок пользователя”. Он отображен в

двух видах, один просто цифрами во вкладке “CREDITS”, другой в графике во

вкладке “CHARTS”.  Пользователь также имеет окно настроек, которое определяет взаимодействие юзеров с пользователем.

Рабочее пространство разделено на четыре основных блока и два вторичных:

Основные:

- Первый блок “Видео и Статистика”

- Второй блок “Главный чат”

- Третий блок “Приват чат”

- Четвертый блок “Быстрый чат”

Вторичные:

- Кнопка разворачивает/сворачивает “Третий блок”

- Кнопка “Быстрого чата”

 Первый блок:

Данный блок визуально разделен на два суб-блока.

Видео демонстрация. Отображает видео снимаемое камерой пользователя.

http://prntscr.com/edwwo7

В данной суб-блоке имеется следующие кнопки:

-      Первая иконка “Фото аппарат”, при нажатии делает скрин видео трансляции. Также при повторном нажатии скрин удаляется.

-      Вторая иконка “Твиттер”, при нажатии отправляет данный скрин в ленту новостей твиттера

-      Третья иконка “Инстаграм”, повторяем функцию “Твиттер”

-      Переключатель, при нажатии происходит функция выхода в сеть. При повторном нажатии выход в сеть прекращается.

Иконка шестеренки, при нажатии выдвигает панель настроек

Внизу данного блоке есть мягкий черный градиент который возможно трудно заметить в дизайн-макете. Данный градиент подчеркивает видимость иконок в нижней части блока.

Статистика пользователя

В данном суб-блоке отображается статистика пользователя“Заработок”

Данный блок имеет две вкладки: CREDITS, CHART.

http://prntscr.com/edx0ti

http://prntscr.com/edx1i3

Во вкладке CREDITS отображается статистика заработка в трех категориях и суммарное количество именуемое как “Total credits”.

Во вкладке CHART отображается график заработка во временной шкале.

Если условно то вектор Y отображает количество денег, вектор X отображает

время.

При наведении указателя мыши на пункт в графике, отображается письменная

статистика, как во вкладке CREDITS.

Когда указатель мышки находится на блоке графика, то пользователь за счет колёсика мыши, должен

иметь возможность увеличить или уменьшить шкалу графика.

Также в верхнем правом углу блока с графиком есть выпадающий список.

Благодаря которому пользователь имеет возможность отобразить статистику

заработка за день, за неделю и за текущий месяц.

Настройки

При нажатии на иконку “Шестеренка” с правого бока выдвигается панель настроек.

Данная панель дает возможность пользователю настроить взаимодействие с юзерами,

а также выбрать цвет и шрифт, только своих сообщений.

http://prntscr.com/edx599

Второй блок “Главный чат”:

Данный блок отвечает за коммуникацию всех юзеров с пользователем.

Вверху есть четыре элемента:

- Название “Topic”

- Иконка “+”. Отвечает за добавление статуса пользователя.

- 98 Guests - это отображаемое количество гостей на странице пользователя (Читать примечание)

- 112 Users - это отображаемое количество зарегистрированных юзеров которые находятся на странице пользователя.

http://prntscr.com/edx7wy

Ниже отображено поле “Статус пользователя”. Пользователь должен иметь возможность редактировать, удалять и добавлять данный статус.

Справа колонка отображает список зарегистрированных пользователей. Где отображается в статичном состоянии аватар и логин юзера

Данный список выдвигается когда на него наводишь мышью.

http://prntscr.com/edx927

Здесь отображается карточки юзеров. В карточке юзера есть:

- Логин

- Аватар

- Количество кредитов

- Кнопка “Камеры”. отображается видео трансляцию юзера. Если она не активна (Что отображается серым цветов), то это значит что пользователь

не включил свою камеру.

При нажатии на нею открывается попап окно, с видеотрансляцией юзера.

- Кнопка “Письмо”. при нажатии открывается чат в “Приватчате” и дальше пользователь ведет личное общение с выбранным юзером в приватном

чате.

- иконка “Троеточие”. при нажатии открывается контекстное меню где есть следующие элементы управления:

            - Кнопка“Добавить в друзья”. Если пользователь уже в “Друзьях”, тогда появляется кнопка

“Удалить из друзей”

            - Кнопка“Добавить в Бан”. Если пользователь уже ”Добавлен в Бан”, тогда Появляется

кнопка “Вывести из Бана (UNBAN)”

            -Кнопка “Игнор”. При нажатии включается функция, после активации которой,

сообщения данного юзера не отображаются в главном и приватном чате для всех юзеров в том числе. Если кнопка уже активна, то у пользователя должна быть возможность деактивировать её.

Данный список должен скролится при большом объемепользователей. Скрол сделать кастомным как указано в дизайн-макете.

Поле сообщений: 

Сделать все как на макете. Обратите внимание как должны быть отображены логин отправителя и время.

Поле ввода сообщений:

Здесь отображено само поле ввода сообщения, выбор цвета отправляемого сообщения, смайлы и кнопка

отправить.

Третий блок “Приват чат”:

Данный блок отвечает за личные сообщения.

http://prntscr.com/edxkqb

Данный блок очень схож по смыслу с “Главным чатом”. Отличие в том что, данный чат не имеет “Статуса пользователя”.

В верхней части имеется название “Friends” и две кнопки благодаря которым можно

выбрать тот или иной список (Best and Online).

Ниже отображаются активные переписки. На них отображается выбранный чат и количество непрочитанных сообщений от не выбранных пользователей.

 Желтая полоска под надписями “Best and online” это hover.

Список повторяет тот же функционал как и в “Главном чате”.

Кнопка разворачивает/сворачивает “Третий блок” 

http://prntscr.com/edxmon

Данная кнопка сворачивает и разворачивает “Приват чат”.

 В неактивном состоянии она дублирует значение “Best and Online”

В активном состоянии отображается только иконка стрелки вверх. что говорит о том что данное окно можно развернуть. Не в активном состоянии, противоположно.

Четвертый блок “Быстрый чат”

Это POPUP окно

Данный чат повторяет функцию приват чата. Но данный чат более гибкий и имеет возможность

открываться на всех страницах сервиса. А также перемещаться по всему экрану пользователя. Окно Быстрого чата должно ресайзится (Изменять размер) как угодно пользователю.

Кнопка “Быстрого чата”

Данная кнопка при нажатии открывает и закрывает окно “Быстрого чата”

http://prntscr.com/edxpdm

Также быстрый чат можно закрыть нажатием на иконку “Крестик”

При первом открытии быстро чата, в его окне,открывается список юзеров с которыми ведет общение пользователь в “Приват чате”. Также в этом списке отображается непрочитанные сообщения.

Окно быстрого чата

http://prntscr.com/edxqgg

В данном окне пользовательведет переписку с выбранным юзером.

В верхней части экрана отображен логин юзера, стрелка вернутся назад, иконка “Перейти в приват” и закрытие окна.