Основной вид:



Общие положения

Никакого растра. Все иконки - Font Avesome, остальное - css. Либо svg.

Поддержка только современных браузеров. Из внешних библиотек допускается только jquery.

Исходный макет предоставлен в AI. Сверстанный сайт должен точно ему соответствовать.

Ход работы

Вначале скрипт должен загрузить с сайта (data.txt) в формате json данные о
- категориях;
- селлерах;
- темах.

Затем выводится список категорий и "карточки" тем. Карточки рисуются до конца видимого окна + один ряд. При скролле вниз дорисовываются соответственно.

Верхнее меню фиксировано, по центру окна. Кнопки "Deleted" и "Favorites" справа вверху выводятся только если соотвествующее количество элементов больше нуля (читать из кук или Local Storage)

При ошибке загрузки выводится сообщение "Oops, something went wrong. Load error."

Категории

Можно выбирать различные категории, карточки перерисовываются с учетом этого фильтра после каждого нажатия.

Цвет кнопок выбранных категорий меняется на розовый.

Выбранные id категорий (cid) сохраняются в куках и при повторном посещении сайта выводятся с учетом этого сохранения.

Кнопка All

- Если есть хотя бы одна невыбранная категория - сама кнопка серого цвета, при нажатии выбирает все.
- Если выбраны все категории, кнопка выделена (розовый), при нажатии снимает выделение со всех категорий.

Карточки

Отображаются из загруженного json файла название темы, категории через запятую, картинка (340х410) "img/{id}.jpg", если ретина то "imgr/{id}.jpg", селлер, кнопка "buy now" с ценой, добавить в избранное, удалить.

При наведении на картинку появляется в центре надпись "Live Preview", при клике - Preview (см далее). При нажатии кнопки "Buy Now" - новое окно с адресом buy.php?id={id}.

Кнопки "удалить" и "добавить в избранное" имеют alt теги "Won't see it again", "Mark to see later".

Удаление

При нажатии "удалить" карточка исчезает, пополняется счетчик "Deleted" в меню наверху, id удаленной темы запоминается в куках или в LocalStorage.

Добавление в избранное

При нажатии кнопки "сердце" карточка меняет стиль на розовый, пополняется счетчик "Favorites" в меню, id выбранной темы запоминается в куках или в LocalStorage. При повторном нажатии карточка возвращается к первоначальному виду, счетчик уменьшается, из кук удаляется id темы.

Preview

При нажатии на картинку карточки прямо в текущем окне (поверх всего) на всю ширину cверху выводится панель preview:

Остальная часть экрана белая, в центре iframe, куда подгружается файл preview.php?id={id}. Скроллинг возможен только в iframe.

При нажатии иконок устройств (в центре панели) ширина iframe меняется соответственно на 100%, 1024px, 728px, 480px, 320px как в примере. Выбранная иконка выделяется розовым.

При нажатии "Удалить" или "Добавить в избранное" (справа) окно preview закрывается, производится добавление в удаленные или избранные. "Back" - возврат (удаление окна preview).

Кнопки "Удалить" или "Добавить в избранное" отображаются розовым, если тема в соответствующих списках.

Удаленные

При нажатии кнопки меню "Deleted" отображаются удаленные темы, в меню появляется кнопка "Back".

Действия

- Восстановить (alt тег "Restore")
- Добавить в избранное. При этом из текущего списка карточка пропадает.
- Восстановить все (кнопка "Restore All").
- Возврат к основному списку по нажатию на "Back" или "Stoptheme.com".

Избранные

При нажатии кнопки меню "Favorites" отображаются избранные темы, в меню появляется кнопка "Back".

Действия

- Восстановить (сердце со значком "back") (alt тег "Dislike")
- Удалить (поместить в "Deleted"). При этом из текущего списка карточка пропадает.
- Очистить все (кнопка "Clear All").
- Возврат к основному списку по нажатию на "Back" или "Stoptheme.com".

Размер окна

При уменьшении окна вывод сворачивается до двух карточек в ряду таким образом:

При увеличении разворачивается максимум до пяти карточек в ряду, в зависимости от настроек.

Настройки/меню

При нажатии кнопки меню значка настроек (слева в меню) выезжает меню настроек: В разделе viewport можно менять количество столбцов (карточек в ряду). Отображение меняется соответственно, если позволяет ширина окна.

Что еще

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

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

Все кнопки/ссылки подсвечиваются при наведении:

При выводе карточек удаленные темы не показываются, избранные показываются в розовом цвете.

Если нечего отображать, выводится надпись "Nothing found", при этом если критериям поиска удовлетворяют темы в "удаленных", то еще выводится ссылка на удаленные "Check Deleted":

Нижний блок (как показано рисунком выше) всегда внизу, даже если есть пустое место.

Если с последней загрузки файла data.txt прошло более суток, файл загружается заново.

Пожалуйста, внимательней с цветами. Например, цвет текста на розовой кнопке "Buy Now" отличается от серой, панель "Preview" имеет градиент и т.д. Берите точные цвета из AI файла.

Шрифт Helvetica Neue, в различных начертаниях. Можно грузить с google.

Контакты

Заказчик: Тимофей Закиров, [email protected], skype: timofey_zakirov