[html]<link rel="stylesheet" href="https://forumstatic.ru/files/0007/e3/f7/40249.css?v=13">
<script>$('#pun-viewtopic #pun-crumbs1').after('<div class="superlink"><a href="/pages/portfolio">Портфолио команды</a></div>');</script>
<div id="port-block1" class="saled">

<a class="tip" id="cover" title="Дизайн и техническое оснащение ролевого форума с элементами детектива в духе Нэнси Дрю, но с намеками на магию.">
  <div id="icon"><div id="my-ic" class="material-icons">lock</div></div>
  <img src="https://forumupload.ru/uploads/0007/e3/f7/6822/863611.jpg" class="postimg">
</a>

<div id="cover-block">
Дата: 13.07.2021<br>
Автор: <a href="https://forumd.ru/profile.php?id=7006" target="_blank">ocean</a> & <a href="https://forumd.ru/profile.php?id=6774" target="_blank">satsana</a><br>
Платформа: MyBB<br>
Стоимость: 13200р<br>
Описание: Дизайн и техническое оснащение ролевого форума с элементами детектива в духе Нэнси Дрю, но с намеками на магию.<br>
<a id="store" href="https://thornhills.rolfor.me" target="_blank">Сайт заказчика</a>
</div>

</div>

<div id="port-block2" class="saled">

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Главная страница (на форуме НОЧЬ)"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/468251.jpg" class="postimg"></a></section>

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Главная страница (на форуме ДЕНЬ)"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/398168.jpg" class="postimg"></a></section>

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Страница списка топиков (на форуме ДЕНЬ)"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/598723.jpg" class="postimg"></a></section>

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Страница списка постов (на форуме ДЕНЬ)"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/551556.jpg" class="postimg"></a></section>

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Пример расположения товаров в магазине"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/368704.png" class="postimg"></a></section>

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Расширенная цветовая палитра"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/740937.png" class="postimg"></a></section>

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Пример журнала списания и пополнения монет и кристаллов"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/426618.png" class="postimg"></a></section>

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Уведомление при попытке купить товар с недостающим количеством монет или кристаллов"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/65319.png" class="postimg"></a></section>

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Возможность прикнопить больше 3-4 фотографий в объявлении"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/682518.png" class="postimg"></a></section>

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Чат"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/145365.png" class="postimg"></a></section>

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Анимация в объявлении при наведении"><img src="https://i.imgur.com/xTY4SaZ.gif" class="postimg"></a></section>

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Сокращённый вариант шапки"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/290029.png" class="postimg"></a></section>

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Анимация в в навигации при наведении"><img src="https://i.imgur.com/1FN5AYY.gif" class="postimg"></a></section>
</div>
<style>
.punbb .topicpost .post-content .spoiler-box {
border: 1px solid #e63737;
background-color: rgba(230,55,55,0.1);
}
.punbb .post-content .spoiler-box > div:hover {background-color: rgba(230,55,55,0.6);}
.punbb .post-content .spoiler-box > div {background-color: rgba(230,55,55,0.3);}
.post-content .spoiler-box > div.visible {background-color: rgba(230,55,55,0.8); color: #fff !important;}
</style>[/html]

подробное описание

ГРАФИКА
По просьбе заказчика в дизайне были использованы изумрудные, коричневые и серые оттенки, так как место действия - Ирландия, поэтому изумрудные оттенки играли важную роль. Мы постарались передать ощущения загадочности, предчувствия опасности, любопытство. Объявление должно содержать много информации, поэтому мы сделали так, чтобы его было интересно рассматривать. И последнее: у дизайна 2 версии: день и ночь. Они имеют схожую графику, однако ночью горят фонари и лампы, важные элементы подсвечиваются жёлтым светом, вся графика темнее чем днём.

ВЕРСТКА
Для дизайна выполнена индивидуальная вёрстка. В момент наступления ночи элементы дизайна темнеют и подсвечиваются. 

В объявлении и меню навигации есть анимация при наведении на разные элементы. Также у каждого элемента в объявлении свой фон. Подобная вёрстка очень удобна, если в будущем заказчик захочет сделать адаптивную мобильную версию дизайна. А также она позволяет "прикнопить" изображение в две строки, в блоках "РАЗЫСКИВАЮТСЯ" и "ПОДОЗРИТЕЛЬНО АКТИВНЫЕ". Для некоторых страниц, например, "Награды" сделана укороченная версия шапки без объявления. 

СКРИПТЫ
Для этого заказа было написано несколько скриптов:

  • Простой чат, который открывается в отдельном окне. В нем не нужно отдельно регистрироваться, используются те же данные, что и на форуме. Работает с ajax.

  • Скрипт автоматического начисления и списания игровой валюты (кристаллы, монеты и авторитет) с журналом начисления\списания для каждого пользователя. Авторитет начисляется за посты (1 пост от 1000 символов = +1 авторитет).

  • Скрипт игрового магазина: витрина, корзина и возможность оплачивать покупки игровой валютой. При оплаты покупки, пользователь получает товар автоматически. Если для покупки не хватает валюты, он получит уведомление о нехватке средств.

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

  • Скрипт смены дня и ночи на форуме и отсчёта игровых суток.

Другие скрипты, которые уже были на форуме, стилизованы под новый дизайн. Скрипт "Всплывающая табличка в топике с дополнительными данными юзера" адаптирован под ajax.

Подпись автора

If you don't know what is it about, it's about money (польская пословица)
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg