Live Your Life

Объявление

Новости
СервисСкрытие рекламных баннеров - проверь, чтоб не заблокировали!
ScriptПолезное о нейро-скриптах и безопасности.
СервисПополнение фонда форума иностранными картами.
Сервис Чистка заброшенных форумов. Проверь, чтобы твой старый форум не пропал!
Сервис Конкурс дизайнов для Mybb. Прием работ до 26 декабря.
Форум С 16-летием, ЛИЛ!
СервисПовышение цены за отключение рекламы
Интересное
Сезон 3. Выпуск 7 Интервью: "Ролевой дайджест"

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Live Your Life » Платные услуги » Дизайны, адаптив и техподдержка от бродяги


Дизайны, адаптив и техподдержка от бродяги

Сообщений 21 страница 33 из 33

1

Кто я?

Всем привет! Я Alex Kolmar или просто бродяга. Админить форумы начал почти сразу после своего прихода на ролевые, т.е. с 2011 года. Всё это время я периодически экспериментировал с кодами и графикой, сделал несколько дизайнов для форумов, поставил на коды множество чужих макетов, придумывал и модернизировал разные фишки для сайтов.

Что я умею

Сразу оговорюсь, что хоть я и хорошо знаком с фотошопом, но считаю себя в первую очередь верстальщиком, а уж потом дизайнером. Пока доводилось работать в основном с форумными ролевыми на платформе mybb/rusff, могу попробовать взяться и за что-то другое, но заранее ничего не обещаю.

♦ Поставлю макет вашего дизайна на код
Умею работать с макетами разной сложности, к вёрстке каждого подхожу индивидуально. Макеты обычно режу самостоятельно. Умею работать с макетами, сделанными как в Photoshop, так и в Figma.
Стоимость: от 2000 рублей.

♦ Сделаю мобильную/адаптивную версию вашего форума/сайта
Даже если у вас уже есть установленный дизайн, я могу сделать его версию для мобильного устройства.
Стоимость: от 1500 рублей, если вёрстка основного макета моя, и от 2000 рублей, если основная вёрстка не моя.

♦ Создам полный дизайн под ключ
Не пробовал делать глянцевые дизайны и пока вряд ли возьмусь, также не возьмусь за аниме, Корею. Больше люблю минимализм, фантастику, а также могу попробовать что-то в восточном стиле (в духе Принца Персии, Великолепного Века и т.п.). Если вы знаете, чего хотите, и у вас достаточно референсов, чтобы визуализировать задумку — я могу взяться за создание полного дизайна :з
Стоимость: от 4000 рублей.

♦ Обучу вёрстке и работе с макетом дизайна
Я не обучался вёрстке профессионально, а искал информацию в интернете, спрашивал совета у более опытных и совершенствовался на практике. Это долгий процесс, и если вы не желаете проходить подобный путь, то я готов поделиться с вами полученными знаниями :з В первую очередь это касается установки макета на форумы rusff/mybb — его структура и особенности, как подготовить макет дизайна, что возможно, а что сложно поставить на код, как создавать html-темы, какими инструментами пользоваться, чтобы облегчить себе жизнь и т.д.
Стоимость: 500 рублей/час, 1 занятие - 1,5 часа.

♦ Оформлю html-темы, страницы, интерактивные карты
Умею верстать страницы с нуля с тем или иным наполнением. Могу взяться за дизайн или вёрстку лендинга. Делаю интерактивные карты, иными словами, карты с кликабельными областями, при клике на которые открываются описания с картинками, ссылками и прочим контентом. Если предполагается добавление новых областей на карту, могу написать инструкцию по работе с ней.
Стоимость: от 200 рублей html-ки, карты от 500 рублей.

♦ Адаптирую доптолнения для форума и несложные скрипты
Подгоню по цвету/стилю/размеру различные дополнения для форума (слайдеры, скрипты маски, окна дополнительной информации и т.п.). Могу устанавливать несложные скрипты, найденные на просторах интернета (простые фильтры, разные праздничные украшения, часы, календари и прочие "фишки").
Стоимость: от 200 рублей.

Отредактировано бродяга (20-07-2024 11:30:47)

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

https://upforme.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
Time to burn
Анкета ролевика

+2

21

Перевёрстка и мобильная версия для форума Tales of the Forgotten Realms. Админ ролевой оказывал всяческое содействие, в т.ч. написал пару простеньких скриптов для личного звания и блока активных тем в мобильной версии :з

https://i.imgur.com/vJrf4Kt.gif

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

https://upforme.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
Time to burn
Анкета ролевика

0

22

Вёрстка интерактивной карты для ролевой по котам-воителям. К этой интерактивной карте я применил новый подход, использовав свежий код, который написал с помощью ChatGPT. Потыкать карту вживую можно здесь или тут.

Это просто картинка карты для визуализации, рисовал её не я :з
https://i.imgur.com/09ipnGW.png

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

https://upforme.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
Time to burn
Анкета ролевика

+5

23

Дизайн TES IV Oblivion

https://i.imgur.com/oGxuNhSl.jpg

Изначально делался просто в стол, так сказать, для души.

Актуальная версия на гитхабе. Скачать можно, тыкнув на зелёную кнопку code и выбрав "download zip". А потыкать вживую диз можно тут  :з

Особенности:
- Чистый код;
- Всплывающая таблица в шапке при наведении курсора;
- Иконки font awesome duotone в профиле и над формой ответа.

Планируется:
- Мобильная версия когда-нибудь

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

https://upforme.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
Time to burn
Анкета ролевика

0

24

Вёрстка новогоднего дизайна для Crossfeeling  https://upforme.ru/uploads/001b/ff/2a/3/473619.png

https://i.imgur.com/Z1F51ri.jpeg

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

https://upforme.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
Time to burn
Анкета ролевика

0

25

Полный дизайн для ролевой 1920. At the Dawn of Prohibition. Желаю ребятам успешно возродить ролевую :зз
Дизайн выполнен полностью в Figma

https://i.imgur.com/K8MwOgm.jpeg
https://i.imgur.com/8x7DgTS.jpeg
https://i.imgur.com/ThGv09d.png https://i.imgur.com/qxRjfSy.png
https://i.imgur.com/AfUiX0e.png https://i.imgur.com/zmCfNDo.png

Отредактировано бродяга (23-02-2025 17:55:00)

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

https://upforme.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
Time to burn
Анкета ролевика

+3

26

Мартовская акция: полный дизайн по цене вёрстки!*

*За цену вёрстки взято среднее значение стоимости вёрстки у популярных специалистов.
**Дизайн в Figma, в состав входят шапка, футер, оформление главной страницы, несложное оформление профиля в топике, 1 реклама, 1 баннер, 1-2 аватара для тех-аккаунтов. Прочее оформление и графика могут быть сделаны за дополнительную стоимость. Сроки выполнения устанавливаются исполнителем, за срочность также может взиматься дополнительная плата.

Оставить заявку

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

https://upforme.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
Time to burn
Анкета ролевика

0

27

Акция апреля: обучение вёрстке по старым ценам! 500 рублей/час, одно занятие - 1,5 часа.
Скидка действует на первый урок или при оплате сразу 4х занятий :з

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

https://upforme.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
Time to burn
Анкета ролевика

0

28

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

https://i.imgur.com/RNN1OXA.jpeg

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

https://upforme.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
Time to burn
Анкета ролевика

0

29

Мобильная версия для ролевой "Вентанна - смутное время".
Особенности:

1. Десктопную версию верстал не я, пришлось работать с чужим кодом.
2. Название ролевой в шапке написано латинскими буквами, т.к. данный шрифт не поддерживает кириллицу. Буква "я" перевёрнута посредством css.
3. Оформлена мобильная версия диалогов от Alex_63 в ЛС.
4. Все вкладки в объявлении при изначальной загрузке страницы скрыты для компактности.

Анимация

Отредактировано бродяга (03-08-2025 12:42:43)

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

https://upforme.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
Time to burn
Анкета ролевика

0

30

Простой генератор картинок-заглушек для форумных шаблонов: ссылка
Сделал с помощью ChatGPT.
Буду рад фидбэку, если что-то не работает и т.п.

Анимация
Подпись автора

https://upforme.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
Time to burn
Анкета ролевика

+1

31

Рубрика: бесполезные тулзы от бродяги
Сделано с помощью Deepseek
Конвертер символов в html и 16-ричный код (для content в css): ссылка

Анимация
Подпись автора

https://upforme.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
Time to burn
Анкета ролевика

0

32

https://upforme.ru/uploads/001b/ff/2a/44/196280.gif

Автор: бродяга // Источник: ChatGPT // Релиз: 22.08.2025

Небольшой скрипт для автоматической прокрутки баннеров в футере (или любом другом месте), без использования устаревшего тега бегущей строки marquee. При наведении курсора останавливается на выбранном месте. Прокрутка осуществляется туда-обратно по достижении конца/начала блока.

Ссылка на Codepen

Код

В html-низ либо туда, где у вас будут баннеры:
Код:
<div class="banners">
 <div class="container" id="bannerContainer">
  <!-- тут баннеры -->
  <a href=""><img src="" alt=""></a>
  <a href=""><img src="" alt=""></a>
  <a href=""><img src="" alt=""></a>
  <a href=""><img src="" alt=""></a>
  <a href=""><img src="" alt=""></a>
 </div>
</div>
  <!-- скрипт -->
<script>
const container = document.querySelector("#bannerContainer");

let direction = 1; // 1 = вниз, -1 = вверх
let speed = 0.3;   // скорость (px/шаг, чем больше цифра, тем быстрее)
let pos = 0;
let scrolling = true;

function autoScroll() {
  if (scrolling) {
    pos += direction * speed;

    const maxScroll = container.scrollHeight - container.clientHeight;

    if (pos >= maxScroll) {
      direction = -1; // разворот в обратную сторону
    }
    if (pos <= 0) {
      direction = 1;
    }

    container.scrollTop = pos; // двигаем СКРОЛЛ, а не весь блок
  }
  requestAnimationFrame(autoScroll);
}
autoScroll();

// стоп на hover по любому баннеру
container.querySelectorAll("a").forEach(banner => {
  banner.addEventListener("mouseenter", () => scrolling = false);
  banner.addEventListener("mouseleave", () => scrolling = true);
});
</script>
Стиль (опционально, в одно из окон стилей в админке):
Код:
.banners {
  margin: 0 auto;
  padding: 10px;
  max-width: 573px;
  background: #DCDCDC;
  box-sizing: border-box;
}

#bannerContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  width: 100%;
  height: 67px;
  overflow: hidden;
}

.banners a {
  display: block;
  width: 88px;
  height: 31px;
}

Важно! У самого #bannerContainer должна быть скрыта прокрутка (overflow: hidden;), иначе скрипт не будет работать.

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

https://upforme.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
Time to burn
Анкета ролевика

+1

33

https://upforme.ru/uploads/0018/1e/e2/2/487740.png

Автор: бродяга (Alex Kolmar) // Источник: Deepseek // Релиз: 14.01.2026

На ролевых, где время действия растягивается на года, а то и десятилетия, вопрос актуальности возраста персонажей может подниматься регулярно. И я подумал: почему бы не написать скрипт, позволяющий вычислять возраст персонажа по его дате рождения на текущую игровую дату, вместо ручного изменения?
Данный скрипт вычисляет возраст по дате рождения персонажа. По умолчанию на реальную мировую дату, которую опционально можно заменить другой датой, например, на 300 лет вперёд в будущее или на 1543 год.
В будущем планируется доработать скрипт под другие летоисчисления (например, под календарь Dragon Age или The Elder Scrolls).


Код
В html-низ:

Код:
<!-- Подсчёт возраста персонажа по дате рождения на текущую игровую дату by бродяга -->
<script>
(function() {
    'use strict';
    
    function calculateAge(birthDate, forumDate) {
        let age = forumDate.getFullYear() - birthDate.getFullYear();
        const hasHadBirthdayThisYear = (
            forumDate.getMonth() > birthDate.getMonth() ||
            (forumDate.getMonth() === birthDate.getMonth() &&
             forumDate.getDate() >= birthDate.getDate())
        );
        if (!hasHadBirthdayThisYear) age--;
        return age;
    }

    function initAgeCalculator() {
        // ★ ЛОГИКА ВЫБОРА ДАТЫ МИРА ★
        let forumDate;
        
        // 1. Если задана конкретная дата мира
        if (typeof FORUM_CURRENT_DATE !== 'undefined') {
            forumDate = new Date(FORUM_CURRENT_DATE);
            console.log('Используется кастомная дата мира:', FORUM_CURRENT_DATE);
        }
        // 2. Если задано смещение по годам
        else if (typeof FORUM_YEAR_OFFSET !== 'undefined') {
            const realDate = new Date();
            forumDate = new Date(realDate);
            forumDate.setFullYear(realDate.getFullYear() + FORUM_YEAR_OFFSET);
            console.log('Используется смещение на', FORUM_YEAR_OFFSET, 'лет');
        }
        // 3. По умолчанию - реальная дата
        else {
            forumDate = new Date();
            console.log('Используется текущая реальная дата');
        }
        // ★ КОНЕЦ ЛОГИКИ ВЫБОРА ДАТЫ ★

        const birthdateElements = document.querySelectorAll('.birthdate[data-age-target]');

        birthdateElements.forEach(function(birthElement) {
            const birthDateString = birthElement.textContent.trim();
            const targetSelector = birthElement.getAttribute('data-age-target');
            const container = birthElement.closest('div, li, tr, .lz') || document;
            const targetElement = container.querySelector(targetSelector);

            if (!targetElement) return;

            if (birthDateString.toLowerCase() === 'unk') {
                if (targetSelector === '.prof') {
                    targetElement.innerHTML = 'unk <sup>y.o.</sup>';
                }
                return;
            }

            const birthDate = new Date(birthDateString);
            if (isNaN(birthDate.getTime())) {
                console.warn('Некорректная дата:', birthDateString);
                return;
            }

            const age = calculateAge(birthDate, forumDate);
            const ageHtml = age + ' <sup>y.o.</sup>';

            if (targetSelector === '.name a') {
                if (!targetElement.innerHTML.includes('<sup>y.o.</sup>')) {
                    targetElement.innerHTML += ', ' + ageHtml;
                }
            } else if (targetSelector === '.prof') {
                targetElement.innerHTML = ageHtml;
            } else {
                targetElement.innerHTML = ageHtml;
            }
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initAgeCalculator);
    } else {
        initAgeCalculator();
    }
})();
</script>

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

<div class="name"><a href="ссылка на анкету">Имя Фамилия</a><span class="birthdate" style="display:none;" data-age-target=".name a">гггг-мм-дд</span></div>

пояснение

зелёным: - элемент, внутри которого будет отображаться цифра возраста. Сама строка должна находиться за пределами элемента, где будет отражаться возраст, но быть прописанной рядом.
Например:

<div class="lz"><div class="name"><a href="https://bostoncrazzy.rusff.me/viewtopic.php?id=2163">ДЖЕЙДЕН ЛОУ</a><span class="birthdate" data-age-target=".name a">1994-11-05</span></div><div class="occ">Рок-музыкант, певец</div><div class="about">It's not like me, to <a href="https://bostoncrazzy.rusff.me/profile.php?id=710">worry</a> but when I see you <a href="https://bostoncrazzy.rusff.me/profile.php?id=895">fading</a> in the dark<br> I'll leave a <a href="https://bostoncrazzy.rusff.me/profile.php?id=701">light</a> on for you<br> Through the long nights, I will be right there for you if you drift too far<br> I'll leave a light on for you </div></div>

Если игровая дата отличается от реальной
В html-верх

1. Для мира с конкретной датой (например, 1856 год):

Код:
<script>var FORUM_CURRENT_DATE = "1856-11-05";</script>

2. Для мира со смещением (например, +300 лет от реальности):

Код:
<script>var FORUM_YEAR_OFFSET = 300;</script>

3. Если в игровом мире реальная дата, в html-верх ничего не добавляем.


По всем вопросам о работе скрипта, пожеланиям и т.п. пишите в ЛС.

Отредактировано бродяга (14-01-2026 13:56:34)

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

https://upforme.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
Time to burn
Анкета ролевика

+3


Вы здесь » Live Your Life » Платные услуги » Дизайны, адаптив и техподдержка от бродяги


Рейтинг форумов | Создать форум бесплатно