[html]
<link rel="stylesheet" href="https://forumstatic.ru/files/0007/e3/f7/40249.css">
<div id="port-block1" class="saled">
<img src="https://forumuploads.ru/uploads/0007/e3/f7/2/508401.jpg" id="export">
<a class="tip" id="cover" title="Адаптивный дизайн для форума мобильной игры Кузнечик">
<div id="icon"></div>
<img src="https://forumuploads.ru/uploads/0007/e3/f7/2617/935603.jpg" class="postimg">
</a>
<div id="cover-block">
Дата: 05.2020<br>
Автор: <a href="/profile.php?id=6784" target="_blank">Bruksa</a> & <a href="/profile.php?id=6774" target="_blank">satsana</a><br>
Описание: Адаптивный дизайн для форума мобильной игры Кузнечик<br>
<a id="store" href="http://domkyznechik.ru/" 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://forumuploads.ru/uploads/0007/e3/f7/2617/723376.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Список тем: темный дизайн"><img src="https://forumuploads.ru/uploads/0007/e3/f7/2617/847913.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Список тем: голубой дизайн"><img src="https://forumuploads.ru/uploads/0007/e3/f7/2617/485099.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Мобильное отображение списка тем: светлый дизайн"><img src="https://forumuploads.ru/uploads/0007/e3/f7/2617/647109.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Мобильное отображение списка тем: темный дизайн"><img src="https://forumuploads.ru/uploads/0007/e3/f7/2617/701566.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Мобильное отображение списка тем: голубой дизайн"><img src="https://forumuploads.ru/uploads/0007/e3/f7/2617/123459.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Страница топика: светлый дизайн"><img src="https://forumuploads.ru/uploads/0007/e3/f7/2617/515358.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Страница топика: темный дизайн"><img src="https://forumuploads.ru/uploads/0007/e3/f7/2617/463212.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Страница топика: голубой дизайн"><img src="https://forumuploads.ru/uploads/0007/e3/f7/2617/275658.jpg" 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]
ИДЕЯ ПРОЕКТА И ГРАФИКА
Дизайн разрабатывался для форума, посвященного мобильной игре "Загадочный дом".
По идеям заказчика движок форума был полностью переработан под мобильные устройства и планшеты, чтобы интерфейсом форума было удобно пользоваться игрокам мобильного приложения.Разработан макет интерфейса, удобный для пользователей мобильных устройств. Создано оформление форума в трех цветовых решениях: светлый, темный и "морской".
ВЕРСТКА И СКРИПТЫ
Код дизайна адаптивный на 4 варианта ширины монитора.Главная страница форума представляет собой только логотип и слайдер.
Переключения по разделам (форумам) осуществляется при помощи индивидуально разработанного слайдера, отображающегося на всех страницах форума.
Слайдер автоматически создает новые слайды при добавлении новых разделов форума и отображает количество новых непрочитанных сообщений в разделе.
Слайдер адаптирован под планшеты: слайды можно листать не только стрелочками, но ещё и движением пальца.
Также слайдер имеет опцию кастомизации фоновой картинки.Создано индивидуальное меню, работающее в том числе и в админке.
Стили форума переключаются при помощи индивидуально разработанного скрипта, добавляющего новые классы стилизации - таким образом, в отличие от стандартных для форумов mybb переключателей, не требуется хранить отдельные файлы стилей для других дизайнов, и любые правки производятся просто и быстро.Создан виджет отображения последнего сообщения на форуме с выводом аватарки автора (ссылающейся на профиль), индикатором онлайн автора сообщения, ссылкой на сообщение и выводом содержимого последнего сообщения.
По клику на строчку топика в списке тем происходит переход к последнему сообщению темы, что удобно для пользователей мобильных устройств.
